From d2c9343887b944c5fd64e802fbfe88a6946e54a5 Mon Sep 17 00:00:00 2001
From: wanggongfeng <1305282856@qq.com>
Date: Mon, 2 Nov 2020 14:50:01 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E3=80=91=E3=80=90=E5=BE=85=E5=A4=84=E7=90=86=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E3=80=91=E5=A4=84=E7=90=86=E6=B5=81=E7=A8=8B=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=B1=85=E6=B0=91=E6=84=8F=E8=A7=81=E5=9B=BE=E7=89=87=E5=92=8C?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=A4=84=E7=90=86=E6=84=8F=E8=A7=81=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87-=E7=8E=8B=E5=85=AC=E5=B3=B0-2020-11-02?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/events/item-deal-detail-view.vue  | 197 +++++++++++++++++-
 .../workRecord/dailyrecordinfoDetail.vue      |   2 +-
 .../workRecord/monthexcellentcaseDetail.vue   |   2 +-
 .../workRecord/monthexcellentgridDetail.vue   |   2 +-
 .../workRecord/monthexcellentpersonDetail.vue |   2 +-
 .../workRecord/monthrecordinfoDetail.vue      |   2 +-
 6 files changed, 199 insertions(+), 8 deletions(-)

diff --git a/src/views/modules/events/item-deal-detail-view.vue b/src/views/modules/events/item-deal-detail-view.vue
index 9675d68..96497bb 100644
--- a/src/views/modules/events/item-deal-detail-view.vue
+++ b/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 {
diff --git a/src/views/modules/workRecord/dailyrecordinfoDetail.vue b/src/views/modules/workRecord/dailyrecordinfoDetail.vue
index a711e83..da68576 100644
--- a/src/views/modules/workRecord/dailyrecordinfoDetail.vue
+++ b/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
       }
diff --git a/src/views/modules/workRecord/monthexcellentcaseDetail.vue b/src/views/modules/workRecord/monthexcellentcaseDetail.vue
index 8694904..e7d0755 100644
--- a/src/views/modules/workRecord/monthexcellentcaseDetail.vue
+++ b/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
       }
diff --git a/src/views/modules/workRecord/monthexcellentgridDetail.vue b/src/views/modules/workRecord/monthexcellentgridDetail.vue
index ce91096..ba796b5 100644
--- a/src/views/modules/workRecord/monthexcellentgridDetail.vue
+++ b/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
       }
diff --git a/src/views/modules/workRecord/monthexcellentpersonDetail.vue b/src/views/modules/workRecord/monthexcellentpersonDetail.vue
index 6ec04aa..d5eb3e1 100644
--- a/src/views/modules/workRecord/monthexcellentpersonDetail.vue
+++ b/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
       }
diff --git a/src/views/modules/workRecord/monthrecordinfoDetail.vue b/src/views/modules/workRecord/monthrecordinfoDetail.vue
index d5ab6b6..7d92014 100644
--- a/src/views/modules/workRecord/monthrecordinfoDetail.vue
+++ b/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
       }