店铺代码优化

src/views/hisStore/store/audit.vue

@@ -409,6 +409,42 @@
           </div>
 
           <el-divider content-position="left">店铺配置信息</el-divider>
+          <el-col :span="12">
+            <el-form-item label="网销报告" prop="reportUrl">
+              <el-upload
+                class="upload-demo"
+                :action="uploadUrl"
+                :on-preview="handleFilePreview"
+                :on-remove="handleRemove"
+                :before-remove="beforeRemove"
+                multiple
+                :limit="1"
+                :on-exceed="handleExceed"
+                :file-list="reportFileList"
+                :show-file-list="true"
+                disabled>
+                <el-button size="small" type="primary" disabled>点击上传</el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备案" prop="filingUrl">
+              <el-upload
+                class="upload-demo"
+                :action="uploadUrl"
+                :on-preview="handleFilePreview"
+                :on-remove="handleRemove"
+                :before-remove="beforeRemove"
+                multiple
+                :limit="1"
+                :on-exceed="handleExceed"
+                :file-list="fileList"
+                :show-file-list="true"
+                disabled>
+                <el-button size="small" type="primary" disabled>点击上传</el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
           <el-form-item label="退货地址">
             <el-input v-model="dialogForm.refundAddress" />
           </el-form-item>
@@ -478,6 +514,9 @@
       </template>
     </StoreDialog>
 
+    <el-dialog :visible.sync="imagePreviewVisible" width="800px" append-to-body>
+      <img :src="previewImageUrl" style="width: 100%; height: auto; max-height: 600px; object-fit: contain;" />
+    </el-dialog>
   </div>
 
 
@@ -495,6 +534,10 @@ export default {
   components: { ImageUpload, StoreDialog },
   data() {
     return {
+      previewImageUrl: '',
+      imagePreviewVisible: false,
+      reportFileList:[],
+      fileList:[],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -611,6 +654,8 @@ export default {
         .then(([storeResponse, auditResponse]) => {
           this.form = storeResponse.data;
           this.auditLogs = auditResponse.auditLog || [];
+          this.reportFileList = this.urlToFileList(this.form.reportUrl);
+          this.fileList = this.urlToFileList(this.form.filingUrl);
           this.open = true;
         })
         .catch(() => {
@@ -805,6 +850,45 @@ export default {
         this.download(response.msg);
         this.exportLoading = false;
       }).catch(() => {});
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${ file.name }？`);
+    },
+    // 将逗号分隔的URL字符串转换为文件对象数组
+    urlToFileList(urlStr) {
+      if (!urlStr) return [];
+      return urlStr.split(',').map(url => {
+        const fileName = url.substring(url.lastIndexOf('/') + 1);
+        return {
+          name: fileName,
+          url: url,
+          uid: Date.now() + Math.random().toString(36).substr(2, 9) // 生成唯一ID
+        };
+      });
+    },
+    isImageFile(fileName) {
+      const imageSuffix = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
+      const suffix = fileName.split('.').pop().toLowerCase();
+      return imageSuffix.includes(suffix);
+    },
+
+    handleFilePreview(file) {
+      const { url, name } = file;
+      if (this.isImageFile(name)) {
+        this.previewImageUrl = url;
+        this.imagePreviewVisible = true;
+      } else {
+        window.open(url, '_blank');
+      }
     }
   }
 };
@@ -844,4 +928,21 @@ export default {
   color: #999;
   background-color: #fafafa;
 }
+.upload-demo.el-upload--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.upload-demo.el-upload--disabled .el-upload-list {
+  display: block !important;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
 </style>

src/views/hisStore/store/index.vue

@@ -877,6 +877,40 @@
           </el-row>
         </div>
         <el-divider content-position="left">店铺配置信息</el-divider>
+        <el-col :span="12">
+          <el-form-item label="网销报告" prop="reportUrl">
+            <el-upload
+              class="upload-demo"
+              :action="uploadUrl"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :before-remove="beforeRemove"
+              multiple
+              :limit="1"
+              :on-exceed="handleExceed"
+              :on-success="(response, file) => handleFileSuccess(response, file, 'reportUrl')"
+              :file-list="reportFileList">
+              <el-button size="small" type="primary">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="备案" prop="filingUrl">
+            <el-upload
+              class="upload-demo"
+              :action="uploadUrl"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :before-remove="beforeRemove"
+              :on-success="(response, file) => handleFileSuccess(response, file, 'filingUrl')"
+              multiple
+              :limit="1"
+              :on-exceed="handleExceed"
+              :file-list="fileList">
+              <el-button size="small" type="primary">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+        </el-col>
         <el-form-item label="退货地址" prop="refundAddress">
           <el-input v-model="form.refundAddress" placeholder="请输入退货地址" />
         </el-form-item>
@@ -987,6 +1021,8 @@ export default {
   components: { storeDetails, StoreDialog },
   data() {
     return {
+      reportFileList:[],
+      fileList:[],
       previewImageUrl: '', // 添加预览图片URL
       imagePreviewVisible: false,// 添加图片预览对话框可见性控制
       // 新增：控制LOGO上传组件禁用状态
@@ -1577,6 +1613,8 @@ export default {
             this.form.otherSpecialQualificationEnd
           ]);
         }
+        this.reportFileList = this.urlToFileList(this.form.reportUrl);
+        this.fileList = this.urlToFileList(this.form.filingUrl);
       });
     },
     /** 提交按钮 */
@@ -1814,6 +1852,30 @@ export default {
       this.form[`${field}FileName`] = ''; // 清空文件名
       this.$message.info('文件已移除');
     },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${ file.name }？`);
+    },
+    // 将逗号分隔的URL字符串转换为文件对象数组
+    urlToFileList(urlStr) {
+      if (!urlStr) return [];
+      return urlStr.split(',').map(url => {
+        const fileName = url.substring(url.lastIndexOf('/') + 1);
+        return {
+          name: fileName,
+          url: url,
+          uid: Date.now() + Math.random().toString(36).substr(2, 9) // 生成唯一ID
+        };
+      });
+    },
   }
 };
 </script>