【项目管理】【待处理项目】处理流程添加居民意见图片和项目处理意见图片-王公峰-2020-11-02

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

@@ -150,6 +150,26 @@
                       show-word-limit
                       placeholder="请您选择居民诉求的处理情况及答复意见，向居民公开展示"></el-input>
           </el-form-item>
+          <el-form-item label="居民意见图片:" v-loading="loading" prop="outHandleImagesTemporary">
+            <el-upload
+                    ref="upload"
+                    :action="uploadUrl"
+                    :class="{hide:hideUpload}"
+                    list-type="picture-card"
+                    :file-list="dataForm.outHandleImagesTemporary"
+                    :limit=3
+                    :on-preview="handlePictureCardPreview"
+                    :on-remove="handleRemove"
+                    :on-success="handleAvatarSuccess"
+                    :on-error="handelError"
+                    :before-upload="beforeAvatarUpload">
+              <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 +178,26 @@
                       show-word-limit
                       placeholder="请您填写项目的实际办理情况(自己处理、吹哨报道、内部协调)，便于相关部门了解项目的实际情况"></el-input>
           </el-form-item>
+          <el-form-item label="处理意见图片:" v-loading="loadingItem" prop="HandleImagesTemporary">
+            <el-upload
+                    ref="upload"
+                    :action="uploadUrlItem"
+                    :class="{hideitem:hideUploadItem}"
+                    list-type="picture-card"
+                    :file-list="dataForm.HandleImagesTemporary"
+                    :limit=3
+                    :on-preview="handlePictureCardPreviewItem"
+                    :on-remove="handleRemoveItem"
+                    :on-success="handleAvatarSuccessItem"
+                    :on-error="handelErrorItem"
+                    :before-upload="beforeAvatarUploadItem">
+              <i class="el-icon-plus"></i>
+            </el-upload>
+            <el-dialog :visible.sync="dialogVisibleItem">
+              <img width="100%" :src="dialogImageUrlItem" alt="">
+            </el-dialog>
+            <div><font color="gray">1~3张图</font></div>
+          </el-form-item>
           <el-form-item label="满意度评价:"
                         prop="evaluateDeptDTOS"
                         v-if="evaluateDeptDTOSVisible">
@@ -241,6 +281,7 @@
 <script>
 import BMap from 'BMap'
 import 'element-ui/lib/theme-chalk/timeline.css'
+import Cookies from 'js-cookie'
 import 'element-ui/lib/theme-chalk/timeline-item.css'
 import 'element-ui/lib/theme-chalk/image.css'
 import debounce from 'lodash/debounce'
@@ -267,7 +308,9 @@ export default {
         handleCategory: '',
         issueLatitude: '',
         issueLongitude: '',
-        handlerDeptIdRule: ''
+        handlerDeptIdRule: '',
+        outHandleImagesTemporary: [],
+        HandleImagesTemporary: []
       },
       isAble: false,
       previewImgList: [],
@@ -282,18 +325,32 @@ export default {
         outHandleAdvice: '',
         handleCategory: '',
         deptResultDTOS: [],
-        evaluateDeptDTOS: []
+        evaluateDeptDTOS: [],
+        outhandleImages: [],
+        handleImages: []
       },
       deptResultDTOSVisible: false,
       evaluateDeptDTOSVisible: false,
       timeLineList: [],
-      options: []
+      options: [],
+      uploadUrl: '',
+      hideUpload: false,
+      dialogImageUrl: '',
+      dialogVisible: false,
+      loading: false,
+      uploadUrlItem: '',
+      hideUploadItem: false,
+      dialogImageUrlItem: '',
+      dialogVisibleItem: false,
+      loadingItem: false
     }
   },
   mounted () {
     this.dataForm.id = this.$route.query.id
     this.getOptions()
     this.init()
+    this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/uploadImg?token=${Cookies.get('token')}`
+    this.uploadUrlItem = `${window.SITE_CONFIG['apiURL']}/oss/file/uploadImg?token=${Cookies.get('token')}`
   },
   filters: {
     formatState (item) {
@@ -412,6 +469,121 @@ export default {
         })
         .catch(() => {})
     },
+    beforeAvatarUpload (file) {
+      if (this.dataForm.outHandleImagesTemporary.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'
+      // const isLt1M = file.size / 1024 / 1024 < 1
+      // 判断是否符合格式要求
+      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('文件上传失败！')
+        this.handleErrorRemove(file)
+        return false
+      }
+      this.dataForm.outHandleImagesTemporary.push({ url: res.data.imgUrl, thumbnail: res.data.thumbnail, fileType: 1 })
+      this.hideUpload = this.dataForm.outHandleImagesTemporary.length >= 3
+    },
+    handleErrorRemove (file) {
+      // 实现缩略图模板时删除文件
+      let fileList = this.$refs.upload.uploadFiles
+      for (var i = 0; i < fileList.length; i++) {
+        let item = fileList[i]
+        if (item.url === file.url) {
+          fileList.splice(i, 1)
+        }
+      }
+    },
+    handelError () {
+      this.loading = false
+      this.isAble = false
+      this.$message.error('上传文件失败!')
+    },
+    handleRemove (file, fileList) {
+      for (var i = 0; i < this.dataForm.outHandleImagesTemporary.length; i++) {
+        let item = this.dataForm.outHandleImagesTemporary[i]
+        if (item.url === file.url) {
+          this.dataForm.outHandleImagesTemporary.splice(i, 1)
+        }
+      }
+      this.hideUpload = this.dataForm.outHandleImagesTemporary.length >= 3
+    },
+    handlePictureCardPreview (file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    // 对内意见
+    beforeAvatarUploadItem (file) {
+      if (this.dataForm.HandleImagesTemporary.length === 3) {
+        this.$message.error('最多上传3张图片!')
+        return false
+      }
+      this.loadingItem = true
+      this.isAble = true
+      const isJPG = file.type === 'image/jpeg'
+      const isPNG = file.type === 'image/png'
+      // const isLt1M = file.size / 1024 / 1024 < 1
+      // 判断是否符合格式要求
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传文件必须是jpg、png格式!')
+        this.loadingItem = false
+        this.isAble = false
+        return false
+      }
+    },
+    handleAvatarSuccessItem (res, file) {
+      this.loadingItem = false
+      this.isAble = false
+      if (res === null || res.data === null || res.data.imgUrl === null) {
+        this.$message.error('文件上传失败！')
+        this.handleErrorRemoveItem(file)
+        return false
+      }
+      this.dataForm.HandleImagesTemporary.push({ url: res.data.imgUrl, thumbnail: res.data.thumbnail, fileType: 1 })
+      this.hideUploadItem = this.dataForm.HandleImagesTemporary.length >= 3
+    },
+    handleErrorRemoveItem (file) {
+      // 实现缩略图模板时删除文件
+      let fileList = this.$refs.upload.uploadFiles
+      for (var i = 0; i < fileList.length; i++) {
+        let item = fileList[i]
+        if (item.url === file.url) {
+          fileList.splice(i, 1)
+        }
+      }
+    },
+    handelErrorItem () {
+      this.loadingItem = false
+      this.isAble = false
+      this.$message.error('上传文件失败!')
+    },
+    handleRemoveItem (file, fileList) {
+      for (var i = 0; i < this.dataForm.HandleImagesTemporary.length; i++) {
+        let item = this.dataForm.HandleImagesTemporary[i]
+        if (item.url === file.url) {
+          this.dataForm.HandleImagesTemporary.splice(i, 1)
+        }
+      }
+      this.hideUploadItem = this.dataForm.HandleImagesTemporary.length >= 3
+    },
+    handlePictureCardPreviewItem (file) {
+      this.dialogImageUrlItem = file.url
+      this.dialogVisibleItem = true
+    },
     visibleChange (val) {
       if (this.dataForm.handleResultDTOS.length === 0 && this.dataForm.handlerDeptIdRule === '' && val === true) {
         return this.$message.error('请先选择操作人部门！')
@@ -598,6 +770,14 @@ export default {
         this.postDataForm.evaluateDeptDTOS = []
       }
       this.isAble = true
+      for (var i = 0; i < this.dataForm.outHandleImagesTemporary.length; i++) {
+        let outItem = this.dataForm.outHandleImagesTemporary[i]
+        this.postDataForm.outhandleImages.push(outItem.url)
+      }
+      for (var j = 0; j < this.dataForm.HandleImagesTemporary.length; j++) {
+        let item = this.dataForm.HandleImagesTemporary[j]
+        this.postDataForm.handleImages.push(item.url)
+      }
       this.$http['post'](
         '/events/item/itemHandleSubmit', this.postDataForm).then(({ data: res }) => {
         if (res.code !== 0) {
@@ -620,6 +800,17 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+  .hide .el-upload--picture-card {
+    display: none;
+  }
+</style>
+
+<style lang="scss">
+  .hideitem .el-upload--picture-card {
+    display: none;
+  }
+</style>
 
 <style lang="scss">
 .project-handle {

src/views/modules/workRecord/dailyrecordinfoDetail.vue

@@ -247,7 +247,7 @@ export default {
       this.dataForm.address = position.address
     },
     beforeAvatarUpload (file) {
-      if (this.dataForm.length === 9) {
+      if (this.dataForm.images.length === 9) {
         this.$message.error('最多上传9张图片!')
         return false
       }

src/views/modules/workRecord/monthexcellentcaseDetail.vue

@@ -152,7 +152,7 @@ export default {
       })
     },
     beforeAvatarUpload (file) {
-      if (this.dataForm.length === 9) {
+      if (this.dataForm.images.length === 9) {
         this.$message.error('最多上传9张图片!')
         return false
       }

src/views/modules/workRecord/monthexcellentgridDetail.vue

@@ -183,7 +183,7 @@ export default {
       })
     },
     beforeAvatarUpload (file) {
-      if (this.dataForm.length === 9) {
+      if (this.dataForm.images.length === 9) {
         this.$message.error('最多上传9张图片!')
         return false
       }

src/views/modules/workRecord/monthexcellentpersonDetail.vue

@@ -173,7 +173,7 @@ export default {
       })
     },
     beforeAvatarUpload (file) {
-      if (this.dataForm.length === 9) {
+      if (this.dataForm.images.length === 9) {
         this.$message.error('最多上传9张图片!')
         return false
       }

src/views/modules/workRecord/monthrecordinfoDetail.vue

@@ -199,7 +199,7 @@ export default {
       })
     },
     beforeAvatarUpload (file) {
-      if (this.dataForm.length === 9) {
+      if (this.dataForm.images.length === 9) {
         this.$message.error('最多上传9张图片!')
         return false
       }