已完成 处理进展编辑功能

src/views/modules/events/edit-process-progress.vue

@@ -2,18 +2,15 @@
   <el-dialog :visible.sync="visible" title="处理进展" :close-on-click-modal="false" :close-on-press-escape="false">
     <div v-for="(item,index) in processProgress" :key="index">
       <el-form :model="item" ref="item" :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'" style="padding-bottom: 60px">
-          <!-- <el-form-item label="" prop="">
-            <div>{{ index + 1 }}</div>
-          </el-form-item> -->
           <div style="padding-bottom: 20px">
             <div
-              :style="{marginBottom: '10px', width: '35px', height: '20px', fontSize: '12px', borderRadius: '4px', background: item.handleType === 'project' ? '#009688': item.handleType === 'issue' || item.handleType === 'issue-project' ? '#ffa546' : item.handleType === 'init' ? '#46A3FF' : '', color: '#fff', textAlign: 'center', lineHeight: '20px'}"
+              :style="{marginBottom: '10px', width: '35px', height: '20px', fontSize: '12px', borderRadius: '4px', background: item.handleType === 'project' ? '#009688': item.handleType === 'issue' || item.handleType === 'issue-project' ? '#ffa546' : item.handleType === 'event' || item.handleType === 'event-issue'? '#46A3FF' : '', color: '#fff', textAlign: 'center', lineHeight: '20px'}"
               style="display: inline-block !important">
-              {{item.handleType === 'project' ? '项目': item.handleType === 'issue' || item.handleType === 'issue-project' ? '议题' : item.handleType === 'init' ? '事件' : ''}}
+              {{item.handleType === 'project' ? '项目': item.handleType === 'issue' || item.handleType === 'issue-project' ? '议题' : item.handleType === 'event' || item.handleType === 'event-issue' ? '事件' : ''}}
             </div>
-            <span v-if="item.state != '100'" style="padding-left: 36px; font-weight: bold; color: rgb(96, 98, 102);">[  {{item | formatState}}  ]</span>
+            <span v-if="item.handleType != 'event'" style="padding-left: 36px; font-weight: bold; color: rgb(96, 98, 102);">[  {{item | formatState}}  ]</span>
-            <span v-if="item.state != '100'" style="padding-left: 36px">处理部门： {{item.handlerDept}}</span>
+            <span v-if="item.handleType != 'event'" style="padding-left: 36px">处理部门： {{item.handlerDept}}</span>
-            <span v-if="item.state == '100'" style="padding-left: 36px">议题内容： {{item.eventContent}}</span>
+            <span v-if="item.handleType === 'event'" style="padding-left: 36px">议题内容： {{item.eventContent}}</span>
           </div>
           <el-form-item label="操作时间">
             <el-date-picker v-model="item.createdTime"
@@ -21,28 +18,50 @@
                             placeholder="选择日期">
             </el-date-picker>
           </el-form-item>
-          <el-form-item label="项目处理意见">
+          <el-form-item :label="item.handleType === 'project' || item.handleType === 'issue-project' ? '项目处理意见' : '意见'">
             <el-input v-model="item.advice"></el-input>
           </el-form-item>
-          <el-form-item label="回复居民意见">
+          <el-form-item :label="item.handleType === 'project' || item.handleType === 'issue-project' ? '项目处理图片' : '图片'" 
-            <el-input v-model="item.outAdvice"></el-input>
+                        v-if="item.handleType != 'event'">
+            <el-upload list-type="picture-card"
+                      :limit=3
+                      :action="uploadUrl"
+                      :file-list="item.images"
+                      :on-exceed="handleExceed"
+                      :on-success="(res, file, fileList) => { return handlePicSuccess(res, file, fileList, index, 'image')}"
+                      :on-remove="(file, fileList) => { return handleRemove(file, fileList, index, 'image')}">
+              <i slot="default" class="el-icon-plus"></i>
+            </el-upload>
           </el-form-item>
-          <el-form-item label="图片">
+          <el-form-item label="回复居民意见" v-if="item.handleType != 'event' && item.handleType != 'event-issue' && item.handleType != 'issue'">
             <el-input v-model="item.outAdvice"></el-input>
           </el-form-item>
+          <el-form-item label="回复居民图片" v-if="item.handleType != 'event' && item.handleType != 'event-issue' && item.handleType != 'issue'">
+            <el-upload list-type="picture-card"
+                      :limit=3
+                      :action="uploadUrl"
+                      :file-list="item.outImages"
+                      :on-exceed="handleExceed"
+                      :on-success="(res, file, fileList) => { return handlePicSuccess(res, file, fileList, index, 'outImage')}"
+                      :on-remove="(file, fileList) => { return handleRemove(file, fileList, index, 'outImage')}">
+              <i slot="default" class="el-icon-plus"></i>
+            </el-upload>
+          </el-form-item>
     </el-form>
     </div>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button type="primary" :disabled = "isDisabled" :loading="isLoading" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
     </template>
   </el-dialog>
 </template>
 
 <script>
+import Cookies from 'js-cookie'
 import 'element-ui/lib/theme-chalk/timeline.css'
 import 'element-ui/lib/theme-chalk/timeline-item.css'
 import 'element-ui/lib/theme-chalk/image.css'
+import debounce from 'lodash/debounce'
 export default {
   data () {
     return {
@@ -50,7 +69,11 @@ export default {
       dataForm: {
         id: ''
       },
-      processProgress: []
+      uploadUrl: '',
+      // 数据源
+      processProgress: [],
+      isDisabled: false,
+      isLoading: false
     }
   },
   filters: {
@@ -65,7 +88,7 @@ export default {
         } else if (item.state === 10) {
           return '结案'
         }
-      } else if (item.handleType === 'issue' || item.handleType === 'init') {
+      } else if (item.handleType === 'issue' || item.handleType === 'event-issue') {
         if (item.state === 0) {
           return '审核通过'
         } else if (item.state === 1) {
@@ -80,16 +103,14 @@ export default {
       }
     }
   },
-  watch: {
-    'processProgress': function (val) {
-      console.log('processProgress')
-      console.log(this.processProgress)
-    }
-  },
   methods: {
     init () {
       this.$nextTick(() => {
         this.visible = true
+        // 确定按钮 防点击
+        this.isDisabled = false
+        this.isLoading = false
+        this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
         if (this.dataForm.id) {
           this.getInfo()
         }
@@ -101,13 +122,59 @@ export default {
           return this.$message.error(res.msg)
         }
         this.processProgress = res.data
-        console.log(this.processProgress)
       }).catch(() => {})
     },
-    dataFormSubmitHandle () {
+    // 图片上传
-      console.log('processProgress')
+    handlePicSuccess (res, file, fileList, index, imgType) {
-      console.log(this.processProgress)
+      let image = {}
+      image.name = Math.round(Math.random() * 5)
+      image.url = res.data.url
+      if ('outImage' == imgType) {
+        this.processProgress[index].outImages.push(image)
+      } else if ('image' == imgType) {
+        this.processProgress[index].images.push(image)
       }
+    },
+    handleRemove (file, fileList, index, imgType) {
+      if ('outImage' == imgType) {
+        this.processProgress[index].outImages = fileList
+      } else if ('image' == imgType) {
+        this.processProgress[index].images = fileList
+      }
+    },
+    handleExceed () {
+      this.$message({
+        showClose: true,
+        message: '只能上传三张图片',
+        type: 'warning'
+      })
+    },
+    dataFormSubmitHandle: debounce(function () {
+      // this.$refs['dataForm'].validate((valid) => {
+        // if (!valid) {
+        //   return false
+        // }
+        this.isLoading = true
+        this.isDisabled = true
+        this.$http['post']('/events/item/editProcessProgressList/', this.processProgress).then(({ data: res }) => {
+          if (res.code !== 0) {
+            // 确定按钮 防点击
+            this.isDisabled = false
+            this.isLoading = false
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      // })
+    }, 1000, { 'leading': true, 'trailing': false })
   }
 }
 </script>