房租租赁 合同上传附件

src/views/modules/plugins/rent/rentcontractinfo-add-or-update.vue

@@ -286,11 +286,36 @@
         </el-form-item>
         <br/>
 
-        <el-form-item label="合同附件" prop="fileList" label-width="140px">
+        <el-form-item label="合同照片" prop="fileList" label-width="140px">
           <template>
             <upload-image :defaultFileList="dataForm.fileList" :limit="6" @change="onChangeFileList"></upload-image>
           </template>
         </el-form-item>
+
+        <el-form-item label="合同附件" label-width="140px">
+          <template>
+            <el-upload
+              class="upload-demo"
+              multiple
+              :action="uploadUrl"
+              :data="{ customerId: customerId }"
+              :limit="limit"
+              :headers="$getElUploadHeaders()"
+              :on-success="(res, file) => handleFlieSuccess(res, file)"
+              :on-error="(res, file) => handleFlieError(res, file)"
+              :on-remove="(res) => handleFlieRemove(res)"
+              :on-exceed="(res) => handleFlieExceed(res)"
+              :before-upload="(file) => beforeFlieUpload(file)"
+              :on-preview="handlePreview"
+              :file-list="dataForm.docList">
+              <el-button size="small" type="primary">点击上传</el-button>
+              <div slot="tip" class="el-upload__tip">只能上传合同文件</div>
+            </el-upload>
+          </template>
+        </el-form-item>
+
+
+
       </el-form>
     <template slot="footer">
         <div class="resi-btns">
@@ -355,7 +380,8 @@ export default {
           idCardImgList: [],
           unit: ''
         }],
-        fileList: []
+        fileList: [],
+        docList: []
       },
       zzmmOptions: [
         { name: '党员', value: '党员' },
@@ -391,7 +417,10 @@ export default {
         buildingOptions: [],
         unitOptions: [],
         houseOptions: [],
-        agencyOptions: []
+        agencyOptions: [],
+        uploadUrl: `${window.SITE_CONFIG['apiURL']}/oss/file/uploadqrcodeV2`,
+        customerId: localStorage.getItem("customerId"),
+        limit: 3
     }
   },
   computed: {
@@ -537,6 +566,7 @@ export default {
           unit: ''
         }],
         fileList: [],
+        docList: [],
         agencyImgList: []
       }
     },
@@ -866,6 +896,43 @@ export default {
         this.editModeGetList()
       }).catch(() => {})
     },
+    handleFlieSuccess(res, file) {
+        if (res.code === 0 && res.msg === "success") {
+            let ob = {
+              fileType: '0',
+              fileUrl: file.response.data.url,
+              name: file.response.data.fileName
+            }
+            this.dataForm.docList.push(ob)
+        } else {
+            this.$message.error(res.msg)
+        }
+    },
+    handleFlieError(res, file) {
+        console.log(res)
+    },
+    handleFlieRemove(res) {
+      // console.log(JSON.stringify(res))
+        const delFile = res.fileUrl
+        this.dataForm.docList.forEach((item, key) => {
+            if (delFile == item.fileUrl) {
+              this.dataForm.docList.splice(key, 1)
+            }
+        })
+    },
+    handleFlieExceed(res) {
+        this.$message({
+          type: "warning",
+          message: `文件数量最多不超过${this.limit}个`,
+        })
+    },
+    beforeFlieUpload(file) {
+        console.log(file)
+    },
+    handlePreview(file) {
+      window.open(file.fileUrl)
+      // console.log(JSON.stringify(file));
+    },
     // 表单提交
     dataFormSubmitHandle: debounce(function () {
       this.$refs['dataForm'].validate((valid) => {
@@ -932,7 +999,9 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-
+    ::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip {
+      display: none !important;
+    }
     .div_btn {
         display: flex;
         justify-content: flex-end;

src/views/modules/plugins/rent/rentcontractinfo-look-or-check.vue

@@ -117,13 +117,17 @@
         </el-form-item>
         <br/>
 
-        <el-form-item label="合同附件" prop="fileList">
+        <el-form-item label="合同照片" prop="fileList">
             <template>
                 <label v-for="(item,index) in dataForm.fileList" :key="index">
                     <img :src="item.fileUrl" @click="imgShow(item.fileUrl)" width="100" height="100" />
                 </label>
             </template>
         </el-form-item>
+
+        <el-form-item label="合同附件">
+            <label v-for="(item,index) in dataForm.docList" :key="index" @click="downFile(item.fileUrl)" class="file-l">{{ item.name }}</label>
+        </el-form-item>
         <el-form-item label="审核原因" prop="reason" v-if="dataForm.flag === '1' && dataForm.state === '2'">
             <el-input v-model="dataForm.reason" placeholder="审核原因" disabled></el-input>
         </el-form-item>
@@ -184,7 +188,8 @@ export default {
           lesseeHouseAddress: '',
         signDate: '',
         startDate: '',
-        endDate: ''
+        endDate: '',
+        docList: [],
       },
         dataListLoading: false,
         dialogVisible: false,
@@ -346,6 +351,9 @@ export default {
               })
           }).catch(() => {})
       },
+    downFile(fileUrl) {
+        window.open(fileUrl)
+    },
     // 表单提交
     dataFormSubmitHandle: debounce(function () {
       this.$refs['dataForm'].validate((valid) => {
@@ -376,6 +384,11 @@ export default {
         margin-top: 20px;
         text-align: center;
     }
+    .file-l{
+      margin-right: 10px;
+      color: #3ebef7;
+      cursor: pointer;
+    }
 </style>
 <style lang="scss">
 .rent {

src/views/modules/plugins/rent/upload-image.vue

@@ -9,7 +9,8 @@
             :on-error="(res, file) => handleImgError(res, file)"
             :on-remove="(res) => handleImgRemove(res)"
             :on-exceed="(res) => handleImgExceed(res)"
-            :before-upload="(file) => beforeImgUpload(file)">
+            :before-upload="(file) => beforeImgUpload(file)"
+            accept="image/jpg,image/jpeg,image/png">
             <i slot="default" class="el-icon-plus"></i>
             <div slot="file" slot-scope="{file}">
                 <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">