From 090c15099979ee5c6c0a8a9f9ccd416126986353 Mon Sep 17 00:00:00 2001
From: zhaochengke <beyondk2000@163.com>
Date: Thu, 16 Jun 2022 13:28:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=85=E5=9F=BA=E5=9C=B0bug=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/house/HouseApplyUploadComp.vue |   5 +-
 .../house/HouseLocationPlanComp.vue           |   4 +-
 src/components/house/MultiImageUploadComp.vue | 194 ++++++++++++++++++
 .../homeApplication/houseAnnounce.vue         |   1 -
 .../homestead/utilization/utilizationAdd.vue  |  10 +-
 .../utilization/utilizationDetail.vue         |  21 +-
 .../utilization/utilizationModify.vue         | 118 ++---------
 7 files changed, 228 insertions(+), 125 deletions(-)
 create mode 100644 src/components/house/MultiImageUploadComp.vue

diff --git a/src/components/house/HouseApplyUploadComp.vue b/src/components/house/HouseApplyUploadComp.vue
index e312720d..8b490622 100644
--- a/src/components/house/HouseApplyUploadComp.vue
+++ b/src/components/house/HouseApplyUploadComp.vue
@@ -11,13 +11,14 @@
               v-model="item.fileList"
               :after-read="(file, detail) => { handleUploadSuccess(file, detail, item); }"
               :readonly="disabled || !item.current"
-              :disabled="disabled || !item.current"
               :show-upload="!disabled && item.current"
               :before-delete="handleRemove"
               :deletable="!disabled && item.current"
               :before-read="checkFile"
             >
-              <!-- accept=".jpg,.png,.gif,.pdf,.doc,.docx,.xlsx,.xls" 设置了无法拉起相机/下载 -->
+              <!-- accept=".jpg,.png,.gif,.pdf,.doc,.docx,.xlsx,.xls" 设置了无法拉起相机/下载
+              :disabled="disabled || !item.current"
+              -->
             </van-uploader>
           </van-collapse-item>
         </van-collapse>
diff --git a/src/components/house/HouseLocationPlanComp.vue b/src/components/house/HouseLocationPlanComp.vue
index 2151927a..79b55d3e 100644
--- a/src/components/house/HouseLocationPlanComp.vue
+++ b/src/components/house/HouseLocationPlanComp.vue
@@ -2,7 +2,7 @@
   <div>
     <van-uploader
       ref="pictureUpload"
-      :disabled="uploadDisabled"
+      :disabled="disabled"
       :readonly="uploadDisabled"
       :deletable="!uploadDisabled"
       :show-upload="!uploadDisabled"
@@ -22,7 +22,7 @@ import request from "@/utils/request";
 
 export default {
   name: "HouseLocationPlanComp",
-  props: ["uploadDisabled", 'jsonData', 'proposerId', 'tableName'],
+  props: ["uploadDisabled", 'jsonData', 'proposerId', 'tableName', 'disabled'],
   watch: {
     jsonData: {
       handler: function (newVal, oldVal) {
diff --git a/src/components/house/MultiImageUploadComp.vue b/src/components/house/MultiImageUploadComp.vue
new file mode 100644
index 00000000..c8438cae
--- /dev/null
+++ b/src/components/house/MultiImageUploadComp.vue
@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <van-uploader
+      ref="pictureUpload"
+      :disabled="disabled"
+      :readonly="uploadDisabled"
+      :deletable="!uploadDisabled"
+      :show-upload="!uploadDisabled"
+      :data="uploadImg.postData"
+      :before-delete="handleRemove"
+      v-model="uploadImg.fileList"
+      :after-read="onUploadChanged"
+    >
+<!--      :accept="uploadImg.accept"-->
+    </van-uploader>
+  </div>
+</template>
+
+<script>
+import {getToken} from "@/utils/auth";
+import request from "@/utils/request";
+import {Notify} from "vant";
+
+export default {
+  name: "MultiImageUploadComp",
+  props: ["uploadDisabled", 'value', 'tableId', 'tableName', 'bizPath', 'fileType', 'resultType', 'attach', 'disabled'],
+  watch: {
+    value: {
+      handler: function (newVal, oldVal) {
+        if(newVal == this.internalValue)
+          return;
+        this.reset();
+        this.uploadImg.fileList = this.makeUploadFileList(newVal);
+        this.internalValue = newVal;
+      },
+      immediate: true,
+    },
+  },
+  created() {
+  },
+  data() {
+    return {
+      uploadImg: {
+        //上传图片配置
+        attachImgUrl: "/common/attach",
+        uploadImgUrl: "/common/upload",
+        removeImgUrl: "/system/attachment/remove",
+        uploadImgHeaders: {
+          Authorization: "Bearer " + getToken(),
+        },
+        accept: '.jpg,.png,.gif,.jpeg',
+        fileList: [],
+        postData: {
+          tableId: this.tableId || '',
+          tableName: this.tableName || '',
+          bizPath: this.bizPath || 'upload',
+          fileType: this.fileType || '',
+        },
+      },
+      internalValue: null,
+    }
+  },
+  methods: {
+    reset() {
+    },
+    onUploadChanged(file, detail) {
+      console.log(file, detail);
+      this.setFileStatus(file, 'uploading', '文件上传中...');
+      this.updateFile(file).then((resp) => {
+        this.setFileStatus(file, 'done', '文件上传成功');
+        if(this.attach)
+        {
+          file.id = resp.id;
+          file.path = resp.fileUrl;
+        }
+        else {
+          file.path = resp.fileName;
+        }
+        file.fileList = this.uploadImg.fileList;
+        this.$emit('fileChanged', this.uploadImg.fileList);
+        this.updateValue();
+        console.log('新增', this.uploadImg.fileList);
+      }).catch((e) => {
+        this.setFileStatus(file, 'fail', '文件上传失败');
+      })
+      return true;
+    },
+    setFileStatus(file, status, message) {
+      file.status = status;
+      file.message = message;
+    },
+    notify(message, type) {
+      Notify.clear();
+      Notify({ type: type || 'primary', message: message });
+    },
+    handleRemove(file, detail) {
+      console.log(file, detail);
+      if(file.id) // new upload
+      {
+        this.setFileStatus(file, 'uploading', '文件删除中...');
+        this.removeFile(file.id).then((resp) => {
+        }).finally(() => {
+          let index = this.uploadImg.fileList.indexOf(file);
+          console.log(index);
+          if(index !== -1)
+            this.uploadImg.fileList.splice(index, 1);
+          console.log(this.uploadImg.fileList);
+          this.$emit('fileChanged', this.uploadImg.fileList);
+          this.updateValue();
+          console.log('删除', this.uploadImg.fileList);
+        })
+      }
+      else // from server
+      {
+        let index = this.uploadImg.fileList.indexOf(file);
+        if(index !== -1)
+          this.uploadImg.fileList.splice(index, 1);
+        this.$emit('fileChanged', this.uploadImg.fileList);
+        this.updateValue();
+      }
+      return true;
+    },
+    // 图片上传尺寸大小检验
+    beforeUpload(file) {
+      const isLt50M = file.size / 1024 / 1024 < 30;
+      if (!isLt50M) {
+        this.$message({
+          message: "上传文件大小不能超过 30MB!",
+          type: "error",
+        });
+        return false;
+      } else if (file.name.length > 100) {
+        // 图片上传文件名长度检验(配合后台上传方法的验证,否则上传不成功但是前台无提示)
+        this.$message({
+          message: "上传文件的文件名长度不能超过 100个字符!",
+          type: "error",
+        });
+        return false;
+      }
+      return isLt50M;
+    },
+    getFileName(path) {
+      let index = path.lastIndexOf('/');
+      return index !== -1 && index !== path.length - 1 ? path.substr(index + 1) : path;
+    },
+    makeUploadFileList(joinStr) {
+      if(!joinStr) return [];
+      const Host = '/api'; //this.$store.getters.baseRoutingUrl;
+      let fileList = Array.isArray(joinStr) ? joinStr : joinStr.split(',');
+      let res = [];
+      fileList.forEach((x) => {
+        let item = {
+          name: this.getFileName(x),
+          url: Host + x,
+          path: x,
+          fileList: res,
+        };
+        res.push(item);
+      });
+      return res;
+    },
+    updateFile(file) {
+      // 自动上传
+      let formData = new FormData;
+      formData.append('file', file.file);
+      return request({
+        url: this.attach ? this.uploadImg.attachImgUrl : this.uploadImg.uploadImgUrl,
+        method: "post",
+        params: this.uploadImg.postData,
+        data: formData,
+      });
+    },
+    removeFile(id) {
+      return request({
+        url: this.uploadImg.removeImgUrl + `/${id}`,
+        method: "get",
+      });
+    },
+    updateValue() {
+      let arr = this.uploadImg.fileList.map((x) => x.path);
+      if(this.resultType === 'array')
+        this.internalValue = arr;
+      else
+        this.internalValue = arr.join(',');
+      console.log('更新值: ', this.internalValue);
+      this.$emit('input', this.internalValue);
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/onlineHome/homestead/homeApplication/houseAnnounce.vue b/src/views/onlineHome/homestead/homeApplication/houseAnnounce.vue
index c00d52c7..fa490a87 100644
--- a/src/views/onlineHome/homestead/homeApplication/houseAnnounce.vue
+++ b/src/views/onlineHome/homestead/homeApplication/houseAnnounce.vue
@@ -231,7 +231,6 @@ export default {
     },
     openQrCodePreview(id) {
       getProposer(id).then((resp) => {
-        console.log(this.$store.getters.baseRoutingUrl + resp.data.qrCodeUrl);
         ImagePreview([this.$store.getters.baseRoutingUrl + resp.data.qrCodeUrl]);
       }).catch((e) => {
         this.$toast.fail('获取二维码失败!');
diff --git a/src/views/onlineHome/homestead/utilization/utilizationAdd.vue b/src/views/onlineHome/homestead/utilization/utilizationAdd.vue
index 0912de8e..3f992768 100644
--- a/src/views/onlineHome/homestead/utilization/utilizationAdd.vue
+++ b/src/views/onlineHome/homestead/utilization/utilizationAdd.vue
@@ -179,21 +179,21 @@
           <van-row>
             <van-col span="12">
               <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片东</p>
-              <van-uploader v-model="findList" multiple />
+              <MultiImageUploadComp v-model="circulation.xczpd"/>
             </van-col>
             <van-col span="12">
               <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片南</p>
-              <van-uploader v-model="findList" multiple />
+              <MultiImageUploadComp v-model="circulation.xczpn"/>
             </van-col>
           </van-row>
           <van-row>
             <van-col span="12">
               <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片西</p>
-              <van-uploader v-model="findList" multiple />
+              <MultiImageUploadComp v-model="circulation.xczpx" />
             </van-col>
             <van-col span="12">
               <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片北</p>
-              <van-uploader v-model="findList" multiple />
+              <MultiImageUploadComp v-model="circulation.xczpb" />
             </van-col>
           </van-row>
         </div>
@@ -222,8 +222,10 @@
 import { nmfwlyAdd } from "@/api/onlineHome/homestead/utilization";
 import { zjdzd } from "@/api/onlineHome/homestead/circulation";
 import {Notify} from "vant";
+import MultiImageUploadComp from "@/components/house/MultiImageUploadComp"
 export default {
     name: "circulationAdd",
+  components: {MultiImageUploadComp},
   data() {
     return {
       currentDate: new Date(),
diff --git a/src/views/onlineHome/homestead/utilization/utilizationDetail.vue b/src/views/onlineHome/homestead/utilization/utilizationDetail.vue
index 44dca3f0..80393fc7 100644
--- a/src/views/onlineHome/homestead/utilization/utilizationDetail.vue
+++ b/src/views/onlineHome/homestead/utilization/utilizationDetail.vue
@@ -28,21 +28,21 @@
       <van-row>
         <van-col span="12">
           <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片东</p>
-          <van-uploader v-model="findListD" readonly  :show-upload="false" :deletable="false" max-count="1"/>
+          <MultiImageUploadComp :value="circulation.xczpd" :uploadDisabled="true"/>
         </van-col>
         <van-col span="12">
           <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片南</p>
-          <van-uploader v-model="findListN" readonly :show-upload="false" :deletable="false" max-count="1" />
+          <MultiImageUploadComp :value="circulation.xczpn" :uploadDisabled="true"/>
         </van-col>
       </van-row>
       <van-row>
         <van-col span="12">
           <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片西</p>
-          <van-uploader v-model="findListX" readonly :show-upload="false" :deletable="false" max-count="1" />
+          <MultiImageUploadComp :value="circulation.xczpx" :uploadDisabled="true"/>
         </van-col>
         <van-col span="12">
           <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片北</p>
-          <van-uploader v-model="findListB" readonly :show-upload="false" :deletable="false" max-count="1" />
+          <MultiImageUploadComp :value="circulation.xczpb" :uploadDisabled="true"/>
         </van-col>
       </van-row>
     </div>
@@ -56,16 +56,13 @@
 
 <script>
   import { getZjdly } from "@/api/onlineHome/homestead/utilization";
+  import MultiImageUploadComp from "@/components/house/MultiImageUploadComp"
   export default {
     name: "utilizationDetail",
+    components: {MultiImageUploadComp},
     data() {
       return {
-        findList:[],
-        circulation:[],
-        findListD:[],
-        findListN:[],
-        findListX:[],
-        findListB:[],
+        circulation:{},
       };
     },
     created() {
@@ -91,10 +88,6 @@
           this.houseGetDicts("phlyms").then((res) => {
             this.circulation.phlyms = this.selectDictLabel(res.data, response.data.phlyms);
           });
-          if(response.data.xczpd != null){this.findListD.push({url:process.env.VUE_APP_BASE_ROUTING_URL + response.data.xczpd, isImage: true});}
-          if(response.data.xczpx != null){this.findListX.push({url:process.env.VUE_APP_BASE_ROUTING_URL + response.data.xczpx, isImage: true});}
-          if(response.data.xczpn != null){this.findListN.push({url:process.env.VUE_APP_BASE_ROUTING_URL + response.data.xczpn, isImage: true});}
-          if(response.data.xczpb != null){this.findListB.push({url:process.env.VUE_APP_BASE_ROUTING_URL + response.data.xczpb, isImage: true});}
           this.circulation = response.data;
         });
       }
diff --git a/src/views/onlineHome/homestead/utilization/utilizationModify.vue b/src/views/onlineHome/homestead/utilization/utilizationModify.vue
index e0374dc4..ab9419cc 100644
--- a/src/views/onlineHome/homestead/utilization/utilizationModify.vue
+++ b/src/views/onlineHome/homestead/utilization/utilizationModify.vue
@@ -179,21 +179,21 @@
         <van-row>
           <van-col span="12">
             <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片东</p>
-            <van-uploader v-model="findListD" max-count="1" :before-delete="deleteFileD"/>
+            <MultiImageUploadComp v-model="circulation.xczpd"/>
           </van-col>
           <van-col span="12">
             <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片南</p>
-            <van-uploader v-model="findListN" max-count="1" :before-delete="deleteFileX" />
+            <MultiImageUploadComp v-model="circulation.xczpn"/>
           </van-col>
         </van-row>
         <van-row>
           <van-col span="12">
             <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片西</p>
-            <van-uploader v-model="findListX" max-count="1" :before-delete="deleteFileN" />
+            <MultiImageUploadComp v-model="circulation.xczpx" />
           </van-col>
           <van-col span="12">
             <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片北</p>
-            <van-uploader v-model="findListB" max-count="1" :before-delete="deleteFileB" />
+            <MultiImageUploadComp v-model="circulation.xczpb" />
           </van-col>
         </van-row>
       </div>
@@ -222,15 +222,13 @@
 import { zjdzd } from "@/api/onlineHome/homestead/circulation";
 import { getZjdly , nmfwlyEdit , upload} from "@/api/onlineHome/homestead/utilization";
 import {Notify} from "vant";
+import MultiImageUploadComp from "@/components/house/MultiImageUploadComp"
 export default {
     name: "utilizationModify",
+  components: {MultiImageUploadComp},
   data() {
     return {
       currentDate: new Date(),
-      findListD:[],
-      findListN:[],
-      findListX:[],
-      findListB:[],
 
       phlyms : '',
       fwsfxz : '',
@@ -302,11 +300,6 @@ export default {
           }
         });
         this.circulation = response.data;
-        if(response.data.xczpd != null){this.findListD.push({url:process.env.VUE_APP_BASE_ROUTING_URL + response.data.xczpd, isImage: true});}
-        if(response.data.xczpx != null){this.findListX.push({url:process.env.VUE_APP_BASE_ROUTING_URL + response.data.xczpx, isImage: true});}
-        if(response.data.xczpn != null){this.findListN.push({url:process.env.VUE_APP_BASE_ROUTING_URL + response.data.xczpn, isImage: true});}
-        if(response.data.xczpb != null){this.findListB.push({url:process.env.VUE_APP_BASE_ROUTING_URL + response.data.xczpb, isImage: true});}
-
       });
     },
     onConfirmZjddm(data){
@@ -347,101 +340,22 @@ export default {
       this.circulation.dcsj = this.getNowFormatDate(data).substr(0,10);;
       this.showdcsj = false;
     },
-    base64toFile(dataurl, filename = "file") {
-      let arr = dataurl.split(",");
-      let mime = arr[0].match(/:(.*?);/)[1];
-      let suffix = mime.split("/")[1];
-      let bstr = atob(arr[1]);
-      let n = bstr.length;
-      let u8arr = new Uint8Array(n);
-      while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-      }
-      return new File([u8arr], `${filename}.${suffix}`, {
-        type: mime,
-      });
-    },
     goSubmit(){
+      console.log(this.circulation);
       this.$refs._Form.validate().then(() => {
-      if(this.findListD != '' && this.findListD[0].content != undefined){
-        console.log('1111')
-        const params = new FormData()
-        params.append('file', this.base64toFile(this.findListD[0].content))
-        upload(params).then(res => {
-          this.circulation.xczpd = res.fileName;
-        });
-      }
-      if(this.findListX != '' && this.findListX[0].content != undefined){
-        console.log('2222')
-        const params = new FormData()
-        params.append('file', this.base64toFile(this.findListX[0].content))
-        upload(params).then(res => {
-          this.circulation.xczpx = res.fileName;
-        });
-      }
-      if( this.findListN != '' && this.findListN[0].content != undefined){
-        console.log('3333')
-        const params = new FormData()
-        params.append('file', this.base64toFile(this.findListN[0].content))
-        upload(params).then(res => {
-          this.circulation.xczpn = res.fileName;
-        });
-      }
-      if( this.findListB != '' && this.findListB[0].content != undefined){
-        console.log('4444')
-        const params = new FormData()
-        params.append('file', this.base64toFile(this.findListB[0].content))
-        upload(params).then(res => {
-          this.circulation.xczpb = res.fileName;
-        });
-      }
-      var that = this ;
-      setTimeout(function(){
-        console.log(that.circulation);
-        nmfwlyEdit(that.circulation).then(response => {
-          if(response.code = 200){
-            that.$toast.success('保存成功');
-            this.$router.back();
-          }
-        });
-      },2000);
+      nmfwlyEdit(this.circulation).then(response => {
+        if(response.code = 200){
+          this.$toast.success('保存成功');
+          this.back();
+        }
+      });
       }).catch((e) => {
         Notify({ type: 'danger', message: '请填写完整的表单项' });
       });
     },
-    deleteFileD(elIndex){
-      this.circulation.xczpd = null ;
-      this.findListD = [];
-      console.log()
-      return (file, name) => {
-        let fileIndex = name.index
-        this.findListD[elIndex].splice(fileIndex, 1)
-      }
-    },
-    deleteFileX(elIndex){
-      this.circulation.xczpx = null ;
-      this.findListX = [];
-      return (file, name) => {
-        let fileIndex = name.index
-        this.findListX[elIndex].splice(fileIndex, 1)
-      }
-    },
-    deleteFileN(elIndex){
-      this.circulation.xczpn = null ;
-      this.findListN = [];
-      return (file, name) => {
-        let fileIndex = name.index
-        this.findListN[elIndex].splice(fileIndex, 1)
-      }
-    },
-    deleteFileB(elIndex){
-      this.circulation.xczpb = null ;
-      this.findListB = [];
-      return (file, name) => {
-        let fileIndex = name.index
-        this.findListB[elIndex].splice(fileIndex, 1)
-      }
-    },
+    back() {
+      setTimeout(() => this.$router.back(), 1000);
+    }
   },
 }
 </script>