案例详情支持编辑

src/pages/characteristicsEditor/index.vue

@@ -90,8 +90,8 @@
                 </ul>
               </el-col>
             </el-form-item>
-           </el-form>
-           <div slot="footer" class="dialog-footer">
+            </el-form>
+            <div slot="footer" class="dialog-footer">
               <el-button size="mini" @click="dialogAddFormVisible = false">取 消</el-button>
               <el-button size="mini" type="primary" @click="saveData">保 存</el-button>
             </div>

src/pages/yhfq/albj/detail.vue

+import { data } from 'autoprefixer';
 <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.level } }">案例背景</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ name: 'case-list', query: { level: this.level } }">案例背景</el-breadcrumb-item>
           <el-breadcrumb-item :to="{ path: '/yhfq/albj/detail' }">案例背景</el-breadcrumb-item>
         </el-breadcrumb>
       </el-card>
     </div>
     <div>
-      <el-card class="box-card" style="float: left; width: 33.5%">
-        <div slot="header" class="clearfix">
-          <span style="display:block; text-align:center">公司信息</span>
-        </div>
-        <div class="text item">
-          {{ companyDetail }}
-        </div>
-      </el-card>
-      <el-card class="box-card" style="float: left; width: 33.3%">
-        <div slot="header" class="clearfix">
-          <span style="display:block; text-align:center">产品信息</span>
-        </div>
-        <div class="text item">
-          {{ productDetail }}
-        </div>
-      </el-card>
       <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span style="display:block; text-align:center">职位信息</span>
-        </div>
-        <div class="text item">
-          {{ positionDetail }}
-        </div>
+        <el-form size="mini" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="ruleForm">
+          <el-form-item label="案例名称" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item>
+          <el-form-item label="图片" prop="poster_url">
+            <el-upload
+              action="/api/opera/v1/file/upload"
+              list-type="picture-card"
+              name="file"
+              :file-list="fileList"
+              :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="ruleForm.poster_url">
+                <img width="100%" v-if="ruleForm.poster_url" :src="ruleForm.poster_url" alt="">
+              </el-input>
+            </el-dialog>
+          </el-form-item>
+          <el-form-item label="姓名" prop="username">
+            <el-input v-model="ruleForm.username"></el-input>
+          </el-form-item>
+          <el-form-item label="公司" prop="company">
+            <el-input v-model="ruleForm.company"></el-input>
+          </el-form-item>
+          <el-form-item label="公司详情" prop="company_detail">
+            <el-input type="textarea" v-model="ruleForm.company_detail"></el-input>
+          </el-form-item>
+          <el-form-item label="部门" prop="department">
+            <el-input v-model="ruleForm.department"></el-input>
+          </el-form-item>
+          <el-form-item label="部门详情" prop="department_detail">
+            <el-input type="textarea" v-model="ruleForm.department_detail"></el-input>
+          </el-form-item>
+          <el-form-item label="职位" prop="position">
+            <el-input v-model="ruleForm.position"></el-input>
+          </el-form-item>
+          <el-form-item label="职位详情" prop="position_detail">
+            <el-input type="textarea" v-model="ruleForm.position_detail"></el-input>
+          </el-form-item>
+          <el-form-item label="营销产品" prop="product">
+            <el-input v-model="ruleForm.product"></el-input>
+          </el-form-item>
+          <el-form-item label="营销产品详情" prop="product_detail">
+            <el-input type="textarea" v-model="ruleForm.product_detail"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">保存</el-button>
+          </el-form-item>
+        </el-form>
       </el-card>
     </div>
   </div>
@@ -48,10 +84,24 @@ export default {
       if (res.code === 0) {
         console.log(res.data)
         var data = res.data
-        this.companyDetail = data.company_detail
-        this.productDetail = data.product_detail
-        this.positionDetail = data.position_detail
-        this.level = data.level.toString()
+        this.level = data.level + ''
+        console.log('level', this.level)
+        this.ruleForm.name = data.name
+        this.ruleForm.username = data.username
+        this.ruleForm.company = data.company
+        this.ruleForm.company_detail = data.company_detail
+        this.ruleForm.department = data.department
+        this.ruleForm.department_detail = data.department_detail
+        this.ruleForm.position = data.position
+        this.ruleForm.position_detail = data.position_detail
+        this.ruleForm.product = data.product
+        this.ruleForm.product_detail = data.product_detail
+        this.ruleForm.poster_url = data.poster_url
+        this.ruleForm.is_sort = data.is_sort
+        this.ruleForm.level = data.level
+        var obj = {}
+        obj.url = data.poster_url
+        this.fileList.push(obj)
         return true
       } else {
         this.$message.error(res.message)
@@ -67,7 +117,109 @@ export default {
       companyDetail: '',
       productDetail: '',
       positionDetail: '',
-      level: ''
+      fileList: [],
+      level: '',
+      ruleForm: {
+        name: '',
+        username: '',
+        company: '',
+        company_detail: '',
+        department: '',
+        department_detail: '',
+        position: '',
+        position_detail: '',
+        product: '',
+        product_detail: '',
+        poster_url: '',
+        is_sort: 0,
+        level: 0
+      },
+      visible: false,
+      rules: {
+        name: [
+          { required: true, message: '请输入案例名称', trigger: 'blur' },
+          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: '请输入姓名', trigger: 'blur' },
+          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
+        ],
+        company: [
+          { required: true, message: '请输入公司', trigger: 'blur' },
+          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
+        ],
+        company_detail: [
+          { required: true, message: '请输入公司详情', trigger: 'blur' }
+        ],
+        department: [
+          { required: true, message: '请输入部门', trigger: 'blur' },
+          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
+        ],
+        department_detail: [
+          { required: false, message: '请输入部门详情', trigger: 'blur' }
+        ],
+        position: [
+          { required: true, message: '请输入职位', trigger: 'blur' },
+          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
+        ],
+        position_detail: [
+          { required: true, message: '请输入职位详情', trigger: 'blur' }
+        ],
+        product: [
+          { required: true, message: '请输入营销产品', trigger: 'blur' },
+          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
+        ],
+        product_detail: [
+          { required: true, message: '请输入营销产品详情', trigger: 'blur' }
+        ],
+        poster_url: [
+          { required: true, message: '请输入营销产品详情', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePictureCardPreview(file) {
+      this.ruleForm.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.ruleForm.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('文件上传失败')
+    },
+    onSubmit() {
+      if (this.$route.query.id) {
+        casesApi.caseUpdate(this.$route.query.id, this.ruleForm).then(res => {
+          if (res.code === 0) {
+            this.$message.success(res.message)
+            return true
+          } else {
+            this.$message.error(res.message)
+            return false
+          }
+        }).catch(error => {
+          console.log(error)
+          this.$message.error('保存失败')
+          return false
+        })
+      }
     }
   }
 }

src/pages/yhfq/reach/index.vue

@@ -169,14 +169,14 @@ import * as casesApi from '@/api/cases'
 import * as groupApi from '@/api/cgroups'
 import * as triggerApi from '@/api/triggerEdit'
 export default {
-  name: 'reach',
+  name: 'reach-list',
   mounted() {
     var caseId = this.$route.query.id
     casesApi.caseInfo(caseId).then(res => {
       if (res.code === 0) {
         this.case = res.data
         this.addForm.case_id = this.case.id
-        reachApi.reachList({ case_id: caseId }).then(res => {
+        reachApi.reachList({ case_id: this.case.id }).then(res => {
           if (res.code === 0) {
             this.tableData = res.data
             return true
@@ -211,19 +211,8 @@ export default {
 
         groupApi.groupList({ case_id: this.case.id }).then(res => {
           if (res.code === 0) {
+            console.log('groupList', res.data)
             this.groupList = res.data
-            reachApi.reachList({ case_id: this.case.id }).then(res => {
-              if (res.code === 0) {
-                this.tableData = res.data
-                return true
-              } else {
-                this.$message.error(res.message)
-                return false
-              }
-            }).catch(error => {
-              console.log(error)
-              return false
-            })
             return true
           } else {
             this.$message.error(res.message)
@@ -276,14 +265,11 @@ export default {
         if (res.code === 0) {
           this.dialogAddVisible = false
           this.$message.success(res.message)
-          this.addForm = {
-            cgroup_id: '',
-            case_id: '',
-            reach_way_id: '',
-            reach_date_id: '',
-            keywords: [],
-            keywordsStr: ''
-          }
+          this.addForm.cgroup_id = ''
+          this.addForm.reach_way_id = ''
+          this.addForm.reach_date_id = ''
+          this.addForm.keywords = ''
+          this.addForm.keywordsStr = ''
           reachApi.reachList({ case_id: this.case.id }).then(res => {
             if (res.code === 0) {
               this.tableData = res.data