项目处理添加处理图片

src/views/modules/events/item-deal-detail-view.vue

@@ -150,6 +150,27 @@
                       show-word-limit
                       placeholder="请您选择居民诉求的处理情况及答复意见，向居民公开展示"></el-input>
           </el-form-item>
+          <el-form-item label="居民意见图片:" v-loading="loading" prop="outHandleImagesPC">
+            <el-upload
+                    :action="uploadUrl"
+                    :disabled="isAble"
+                    :class="{hide:hideUploadOut}"
+                    list-type="picture-card"
+                    :file-list="postDataForm.outHandleImagesPC"
+                    :limit=3
+                    :on-preview="handlePictureCardPreview"
+                    :on-remove="handleRemove"
+                    :on-success="handleAvatarSuccess"
+                    :on-error="handelError"
+                    :before-upload="beforeAvatarUpload"
+                    style="width:480px">
+              <i class="el-icon-plus"></i>
+            </el-upload>
+            <el-dialog :visible.sync="dialogVisible">
+              <img width="100%" :src="dialogImageUrl" alt="">
+            </el-dialog>
+            <div><font color="gray">1~3张图</font></div>
+          </el-form-item>
           <el-form-item label="项目处理意见:"
                         prop="handleAdvice">
             <el-input v-model="postDataForm.handleAdvice"
@@ -158,6 +179,24 @@
                       show-word-limit
                       placeholder="请您填写项目的实际办理情况(自己处理、吹哨报道、内部协调)，便于相关部门了解项目的实际情况"></el-input>
           </el-form-item>
+          <el-form-item label="处理意见图片:" v-loading="loadingIn" prop="handleImagesPC">
+            <el-upload
+                    :action="uploadUrl"
+                    :disabled="isAble"
+                    :class="{hide:hideUploadIn}"
+                    list-type="picture-card"
+                    :file-list="postDataForm.handleImagesPC"
+                    :limit=3
+                    :on-preview="handlePictureCardPreviewIn"
+                    :on-remove="handleRemoveIn"
+                    :on-success="handleAvatarSuccessIn"
+                    :on-error="handelErrorIn"
+                    :before-upload="beforeAvatarUploadIn"
+                    style="width:480px">
+              <i class="el-icon-plus"></i>
+            </el-upload>
+            <div><font color="gray">1~3张图</font></div>
+          </el-form-item>
           <el-form-item label="满意度评价:"
                         prop="evaluateDeptDTOS"
                         v-if="evaluateDeptDTOSVisible">
@@ -244,6 +283,8 @@ 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'
+import Cookies from 'js-cookie'
+import 'quill/dist/quill.snow.css'
 export default {
   name: 'itemDealDetailView',
   data () {
@@ -282,12 +323,23 @@ export default {
         outHandleAdvice: '',
         handleCategory: '',
         deptResultDTOS: [],
-        evaluateDeptDTOS: []
+        evaluateDeptDTOS: [],
+        handleImagesPC: [],
+        outHandleImagesPC: [],
+        handleImages: [],
+        outHandleImages: []
       },
       deptResultDTOSVisible: false,
       evaluateDeptDTOSVisible: false,
       timeLineList: [],
-      options: []
+      options: [],
+      loading: false,
+      loadingIn: false,
+      uploadUrl: '',
+      hideUploadOut: false,
+      hideUploadIn: false,
+      dialogImageUrl: '',
+      dialogVisible: false
     }
   },
   mounted () {
@@ -399,7 +451,103 @@ export default {
       }
     }
   },
+  created: function () {
+    this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/uploadImg?token=${Cookies.get('token')}`
+    this.uploadFileUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/uploadAllFile?token=${Cookies.get('token')}`
+  },
   methods: {
+    beforeAvatarUpload (file) {
+      if (this.postDataForm.outHandleImagesPC.length === 3) {
+        this.$message.error('最多上传3张图片!')
+        return false
+      }
+      this.loading = true
+      this.isAble = true
+      const isJPG = file.type === 'image/jpeg'
+      const isPNG = file.type === 'image/png'
+      // 判断是否符合格式要求
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传文件必须是jpg、png格式!')
+        this.loading = false
+        this.isAble = false
+        return false
+      }
+    },
+    handleAvatarSuccess (res, file) {
+      this.loading = false
+      this.isAble = false
+      if (res === null || res.data === null || res.data.imgUrl === null) {
+        this.$message.error('文件上传失败！')
+        return false
+      }
+      this.postDataForm.outHandleImagesPC.push({ url: res.data.imgUrl, thumbnail: res.data.thumbnail, fileType: 1, recordType: 1, fileName: res.data.fileName })
+      this.hideUploadOut = this.postDataForm.outHandleImagesPC.length >= 3
+    },
+    handelError () {
+      this.loading = false
+      this.loadingIn = false
+      this.isAble = false
+      this.$message.error('上传文件失败!')
+    },
+    handleRemove (file, fileList) {
+      for (var i = 0; i < this.postDataForm.outHandleImagesPC.length; i++) {
+        let item = this.postDataForm.outHandleImagesPC[i]
+        if (item.url === file.url) {
+          this.postDataForm.outHandleImagesPC.splice(i, 1)
+        }
+      }
+      this.hideUploadOut = this.postDataForm.outHandleImagesPC.length >= 3
+    },
+    handlePictureCardPreview (file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    beforeAvatarUploadIn (file) {
+      if (this.postDataForm.handleImagesPC.length === 3) {
+        this.$message.error('最多上传3张图片!')
+        return false
+      }
+      this.loadingIn = true
+      this.isAble = true
+      const isJPG = file.type === 'image/jpeg'
+      const isPNG = file.type === 'image/png'
+      // 判断是否符合格式要求
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传文件必须是jpg、png格式!')
+        this.loadingIn = false
+        this.isAble = false
+        return false
+      }
+    },
+    handleAvatarSuccessIn (res, file) {
+      this.loadingIn = false
+      this.isAble = false
+      if (res === null || res.data === null || res.data.imgUrl === null) {
+        this.$message.error('文件上传失败！')
+        return false
+      }
+      this.postDataForm.handleImagesPC.push({ url: res.data.imgUrl, thumbnail: res.data.thumbnail, fileType: 1, recordType: 1, fileName: res.data.fileName })
+      this.hideUploadIn = this.postDataForm.handleImagesPC.length >= 3
+    },
+    handelErrorIn () {
+      this.loading = false
+      this.loadingIn = false
+      this.isAble = false
+      this.$message.error('上传文件失败!')
+    },
+    handleRemoveIn (file, fileList) {
+      for (var i = 0; i < this.postDataForm.handleImagesPC.length; i++) {
+        let item = this.postDataForm.handleImagesPC[i]
+        if (item.url === file.url) {
+          this.postDataForm.handleImagesPC.splice(i, 1)
+        }
+      }
+      this.hideUploadIn = this.postDataForm.handleImagesPC.length >= 3
+    },
+    handlePictureCardPreviewIn (file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
     backToItemDeal () {
       this.$parent.selectComponent = 'ItemDeal'
     },
@@ -533,7 +681,7 @@ export default {
           })
         }).catch(() => { })
       }).catch(() => {
-                      
+
       })
     },
     pageSizeChangeHandleNew (val) {
@@ -600,6 +748,18 @@ export default {
         this.postDataForm.evaluateDeptDTOS = []
       }
       this.isAble = true
+
+
+      // 将对象遍历成数组
+      for (let oimg = 0; oimg < this.postDataForm.outHandleImagesPC.length; oimg++) {
+        this.postDataForm.outHandleImages[oimg] = this.postDataForm.outHandleImagesPC[oimg].url
+      }
+      for (let himg = 0; himg < this.postDataForm.handleImagesPC.length; himg++) {
+        this.postDataForm.handleImages[himg] = this.postDataForm.handleImagesPC[himg].url
+      }
+      console.log(this.postDataForm)
+      return false
+
       this.$http['post'](
         '/events/item/itemHandleSubmit', this.postDataForm).then(({ data: res }) => {
         if (res.code !== 0) {
@@ -623,6 +783,12 @@ export default {
 }
 </script>
 
+<style>
+  .hide .el-upload--picture-card {
+    display: none;
+  }
+</style>
+
 <style lang="scss">
 .project-handle {
   .el-timeline {