编辑用户群

src/pages/yhfq/cgroup/edit.vue

+<template>
+  <div>
+    <div>
+      <el-card class="box-card">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+              <el-breadcrumb-item :to="{ name: 'case-list', params: { level: this.$route.params.case_info.level.toString() } }">案例背景</el-breadcrumb-item>
+              <el-breadcrumb-item :to="{ name: 'group-list', params: this.$route.params.case_info }">用户群</el-breadcrumb-item>
+              <el-breadcrumb-item>编辑用户群</el-breadcrumb-item>
+          </el-breadcrumb>
+      </el-card>
+    </div>
+    <div>
+      <el-card class="box-card">
+        <span>当前案例： {{ this.$route.params.case_info.name }}</span>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>创建用户群</span>
+        </div>
+        <div>
+          <el-form size="mini" :model="groupForm" :rules="groupRules"
+              ref="groupForm" label-width="130px" class="groupForm">
+            <el-form-item label="用户群名称" prop="name" :disabled="groupNameDisabled">
+              <el-input v-model="groupForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="用户群图片" prop="poster_url" :disabled="groupPosterUrlDisabled">
+              <el-upload
+                action="/api/opera/v1/file/upload"
+                list-type="picture-card"
+                name="file"
+                :limit="1"
+                :multiple="false"
+                :on-preview="handlePictureCardPreview"
+                :on-remove="handleRemove"
+                :on-success="uploadSuccess"
+                :on-error="uploadError"
+                :data="{ type: 'image' }"
+              >
+                <i class="el-icon-plus"></i>
+                </el-upload>
+                <el-dialog :visible.sync="visible">
+                  <el-input :v-model="groupForm.poster_url">
+                      <img width="100%" v-if="groupForm.poster_url" :src="groupForm.poster_url" alt="">
+                  </el-input>
+                </el-dialog>
+              </el-form-item>
+          </el-form>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'edit',
+  data() {
+    return {
+      groupNameDisabled: false,
+      groupPosterUrlDisabled: false,
+      visible: false,
+      dialogFormVisible: false,
+      characteristicTemplateList: [],
+      characteristicsHidden: false,
+      optionsHidden: true,
+      groupHidden: false,
+      selectId: '',
+      group: {},
+      groupForm: {
+        case_id: '',
+        name: '',
+        poster_url: '',
+        desc: ''
+      },
+      groupRules: {}
+    }
+  },
+  mounted() {
+    var caseInfo = this.$route.params.case_info
+    console.log('case_info', caseInfo)
+    this.group = this.$route.params.group
+    this.groupForm = {
+      case_id: caseInfo.id,
+      name: this.group.name,
+      poster_url: this.group.poster_url,
+      desc: this.group.desc
+    }
+    if (this.group.poster_url) {
+      this.groupPosterUrlDisabled = true
+    }
+    console.log(this.groupForm)
+  },
+  methods: {
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePictureCardPreview(file) {
+      this.groupForm.poster_url = file.url
+      this.visible = true
+    },
+    uploadSuccess(response, file, fileList) {
+      console.log('文件上传成功')
+      console.log(response, file, fileList)
+      if (response.code === 0) {
+        var data = response.data
+        var imageInfo = data[0]
+        this.groupForm.poster_url = imageInfo.url
+        this.visible = false
+      } else {
+        console.log('文件上传失败')
+        this.$message.error('文件上传失败')
+      }
+    },
+    uploadError(err, file, fileList) {
+      console.log('文件上传失败')
+      console.log(err)
+      this.$message.error('文件上传失败')
+    }
+  }
+}
+</script>

src/pages/yhfq/cgroup/index.vue

@@ -4,7 +4,7 @@
       <el-card class="box-card">
         <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-          <el-breadcrumb-item :to="{ name: 'case-list', params: { level: this.$route.params.level.toString() } }">案例背景</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ name: 'case-list', params: { level: this.$route.params.level } }">案例背景</el-breadcrumb-item>
           <el-breadcrumb-item :to="{ name: 'group-list' }">用户群</el-breadcrumb-item>
         </el-breadcrumb>
       </el-card>
@@ -82,16 +82,12 @@
         <div class="scroll-content">
           <i v-for="(characteristic, index) in characteristicsInfo.characteristics" :key="index">
             <div v-if="characteristic.context" class="scroll-container">
-                {{ characteristic.name + '：'}}
+                <span>{{ characteristic.name }} :</span>
                 <span v-for="(contextInfo, index) in JSON.parse(characteristic.context)" :key="index"><br/>{{contextInfo.options + '、' + contextInfo.options_info +'. '}}</span>
                 <br/>
             </div>
           </i>
         </div>
-        <div slot="footer" class="dialog-footer">
-          <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-        </div>
       </el-dialog>
     </div>
   </div>
@@ -128,6 +124,13 @@ export default {
   methods: {
     // 编辑
     handleEdit(index, group) {
+      this.$router.push({
+        name: 'group-edit',
+        params: {
+          case_info: this.$route.params,
+          group: group
+        }
+      })
     },
     // 删除
     handleDelete(index, group) {

src/router/routes.js

@@ -9,6 +9,7 @@ const userGroup = [
   { path: '/yhfq/albj/add', name: 'case-add', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj/add') },
   { path: '/yhfq/groups', name: 'group-list', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/cgroup/index') },
   { path: '/yhfq/groups/add', name: 'group-add', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/cgroup/add') },
+  { path: '/yhfq/groups/edit', name: 'group-edit', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/cgroup/edit') },
   { path: '/albj', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj') },
   { path: '/yhfq/alfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/alfx') },
   { path: '/yhfq/yhqfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/yhqfx') }