fix: bug

src/views/secondaryMerchant/components/subMerchantDetail.vue

@@ -227,6 +227,63 @@
                 <el-checkbox disabled />
               </el-form-item>
             </el-col>
+            <el-col :span="24">
+              <el-form-item label="类型" prop="jiaxianType">
+                <el-radio-group v-model="infoList.jiaxianType">
+                  <el-radio
+                    v-for="item in [
+                      { label: '嘉贤经销商', value: 'JIAXIAN' },
+                      { label: '商用经销商', value: 'GONGCHENG' }
+                    ]"
+                    :key="item.value"
+                    :label="item.value"
+                  >
+                    {{ item.label }}
+                  </el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="营业执照" prop="jiaxianType">
+                <template>
+                  <div
+                    style="display: flex; width: 120px; height: 120px; align-items: center; justify-content: center"
+                  >
+                    <el-image
+                      v-if="checkFileType(infoList.url) == 'image'"
+                      ref="img"
+                      :src="$imageUrl + infoList.url"
+                      fit="cover"
+                      :preview-src-list="[$imageUrl + infoList.url]"
+                      class="elImageClose"
+                    />
+                    <div
+                      style="
+                    display: flex;
+                    width: 120px;
+                    height: 120px;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                  "
+                      @click="openPdf(infoList)"
+                    >
+                      <img v-if="checkFileType(infoList.url) == 'word'" class="file" src="@/assets/common/word.png">
+                      <img v-if="checkFileType(infoList.url) == 'excel'" class="file" src="@/assets/common/excel.png">
+                      <img v-if="checkFileType(infoList.url) == 'ppt'" class="file" src="@/assets/common/ppt.png">
+                      <img
+                        v-if="checkFileType(infoList.url) == 'pdf'"
+                        class="file"
+                        style="cursor: pointer"
+                        src="@/assets/common/pdf.png"
+                      >
+
+                      <img v-if="checkFileType(infoList.url) == 'file'" class="file aaa" src="@/assets/common/zip.jpeg">
+                    </div>
+                  </div>
+                </template>
+              </el-form-item>
+            </el-col>
           </el-row>
           <!-- </el-form> -->
         </div>
@@ -319,7 +376,21 @@ export default {
       })
     })
     this.categoryArr = [...new Set([...this.frontCategory, ...this.pickCategory])]
-    this.infoList = res.data
+    this.infoList = {
+      ...res.data,
+      files: []
+    }
+    if (this.infoList.url) {
+      this.infoList.files = [
+        {
+          hover: true,
+          name: '营业执照',
+          status: 'success',
+          url: this.infoList.url,
+          uid: '111'
+        }
+      ]
+    }
   },
   methods: {
     goBack() {
@@ -372,12 +443,49 @@ export default {
         this.$successMsg('保存成功')
         this.$emit('close')
       })
+    },
+    // 检查文件类型
+    checkFileType(url) {
+      if (!url) return ''
+      const fileSuffix = url.substring(url.lastIndexOf('.') + 1)
+
+      if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
+        return 'image'
+      } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
+        return 'word'
+      } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
+        return 'excel'
+      } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
+        return 'ppt'
+      } else if (['pdf'].includes(fileSuffix)) {
+        return 'pdf'
+      } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
+        return 'file'
+      } else {
+        return ''
+      }
+    },
+    openPdf(item) {
+      const link = document.createElement('a')
+      link.style.display = 'none'
+      link.href = this.$imageUrl + item.url
+      link.download = item.fileName
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-image-viewer__close {
+  top: 106px;
+  right: 40px;
+  width: 40px;
+  height: 40px;
+  font-size: 40px;
+}
 .sty {
   margin-bottom: 20px;
 }

src/views/secondaryMerchant/components/subMerchantForm.vue

@@ -15,8 +15,8 @@
                 <el-input v-if="isCustomer" v-model="formData.higherPrantNumber" disabled placeholder="系统自动生成" />
                 <el-select
                   v-else
-                  filterable
                   v-model="formData.higherPrantNumber"
+                  filterable
                   placeholder="请选择"
                   clearable
                   style="width: 100%"
@@ -86,6 +86,50 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
+          <el-col :span="24">
+            <el-form-item label="营业执照" prop="jiaxianType">
+              <ImageUpload :file-list="formData.files" />
+              <!-- <template v-else>
+                <div
+                  v-for="item in formData.files"
+                  :key="item.fileUrl"
+                  style="display: flex; width: 120px; height: 120px; align-items: center; justify-content: center"
+                >
+                  <el-image
+                    v-if="checkFileType(item.fileUrl) == 'image'"
+                    ref="img"
+                    :src="$imageUrl + item.fileUrl"
+                    fit="cover"
+                    :preview-src-list="[$imageUrl + item.fileUrl]"
+                    class="elImageClose"
+                  />
+                  <div
+                    style="
+                    display: flex;
+                    width: 120px;
+                    height: 120px;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                  "
+                    @click="openPdf(item)"
+                  >
+                    <img v-if="checkFileType(item.fileUrl) == 'word'" class="file" src="@/assets/common/word.png">
+                    <img v-if="checkFileType(item.fileUrl) == 'excel'" class="file" src="@/assets/common/excel.png">
+                    <img v-if="checkFileType(item.fileUrl) == 'ppt'" class="file" src="@/assets/common/ppt.png">
+                    <img
+                      v-if="checkFileType(item.fileUrl) == 'pdf'"
+                      class="file"
+                      style="cursor: pointer"
+                      src="@/assets/common/pdf.png"
+                    >
+
+                    <img v-if="checkFileType(item.fileUrl) == 'file'" class="file aaa" src="@/assets/common/zip.jpeg">
+                  </div>
+                </div>
+              </template> -->
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-card>
       <el-card v-if="formData.jiaxianType === 'JIAXIAN'">
@@ -148,16 +192,13 @@
         <el-row :gutter="20">
           <el-col :span="8">
             <el-form-item label="审核人">
-              <el-input v-model="formData.approvalName" placeholder="系统自动生成" disabled /> </el-form-item
-          ></el-col>
+              <el-input v-model="formData.approvalName" placeholder="系统自动生成" disabled /> </el-form-item></el-col>
           <el-col :span="8">
             <el-form-item label="审核时间">
-              <el-input v-model="formData.approvalTime" placeholder="系统自动生成" disabled /> </el-form-item
-          ></el-col>
+              <el-input v-model="formData.approvalTime" placeholder="系统自动生成" disabled /> </el-form-item></el-col>
           <el-col :span="24">
             <el-form-item label="备注">
-              <el-input v-model="formData.approvalRemark" placeholder="请输入备注" /> </el-form-item
-          ></el-col>
+              <el-input v-model="formData.approvalRemark" placeholder="请输入备注" /> </el-form-item></el-col>
         </el-row>
 
         <div style="margin: 20px">
@@ -179,7 +220,11 @@ import {
   getStageCustomerDetail
 } from '@/api/basic_data/dealer'
 import { mapGetters } from 'vuex'
+import ImageUpload from '@/components/Common/image-upload.vue'
 export default {
+  components: {
+    ImageUpload
+  },
   props: {
     moduleType: {
       type: Number,
@@ -214,7 +259,9 @@ export default {
         approvalName: '',
         approvalTime: '',
         approvalRemark: '',
-        jiaxianType: 'JIAXIAN'
+        jiaxianType: 'JIAXIAN',
+        files: [],
+        url: ''
       },
       customerList: []
     }
@@ -235,7 +282,21 @@ export default {
     },
     getStageCustomerDetail() {
       getStageCustomerDetail({ id: this.detailsId }).then(res => {
-        this.formData = res.data
+        this.formData = {
+          ...res.data,
+          files: []
+        }
+        if (this.formData.url) {
+          this.formData.files = [
+            {
+              hover: true,
+              name: '营业执照',
+              status: 'success',
+              url: this.formData.url,
+              uid: '111'
+            }
+          ]
+        }
       })
     },
     getDealerListV2() {
@@ -265,6 +326,9 @@ export default {
     },
     handleSubmit() {
       if (this.moduleType !== 1) {
+        if (this.formData.files.length) {
+          this.formData.url = this.formData.files[0].url
+        }
         updateStagecustomer({
           ...this.formData
         }).then(res => {
@@ -305,12 +369,50 @@ export default {
     },
     handleReset() {
       this.$refs.formData.resetFields()
+    },
+    // 检查文件类型
+    checkFileType(url) {
+      if (!url) return ''
+      const fileSuffix = url.substring(url.lastIndexOf('.') + 1)
+
+      if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
+        return 'image'
+      } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
+        return 'word'
+      } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
+        return 'excel'
+      } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
+        return 'ppt'
+      } else if (['pdf'].includes(fileSuffix)) {
+        return 'pdf'
+      } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
+        return 'file'
+      } else {
+        return ''
+      }
+    },
+    openPdf(item) {
+      console.log(item, 999)
+      const link = document.createElement('a')
+      link.style.display = 'none'
+      link.href = this.$imageUrl + item.fileUrl
+      link.download = item.fileName
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-image-viewer__close {
+  top: 106px;
+  right: 40px;
+  width: 40px;
+  height: 40px;
+  font-size: 40px;
+}
 .sty {
   margin-bottom: 20px;
 }