多文件上传和下载

+<template>
+  <view class="file-upload-wrapper">
+    <view class="btn" @click="selectFile" v-if="fileList.length < limit">
+      <image class="icon" src="/static/images/add.png" mode="widthFix" />
+      <text>上传附件</text>
+    </view>
+    <view v-if="fileList.length > 0" class="file-list">
+      <view v-for="(item, index) in fileList" :key="index" class="file-item">
+        <text class="file-name">{{ item.fileName || item.originalFileName || item.name }}</text>
+        <text class="delete-btn" @click.stop="deleteFile(index)">×</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { uploadFileApi } from '@/api/base.js'
+import upload from '@/utils/upload'
+
+export default {
+  name: 'FileUpload',
+  props: {
+    value: { type: [Array, String], default: () => [] },
+    limit: { type: Number, default: 1 },
+    fileSize: { type: Number, default: 5 }, // MB
+    fileType: { type: Array, default: () => [] } // e.g. ['png', 'jpg', 'pdf']
+  },
+  data() {
+    return {
+      fileList: []
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (Array.isArray(val)) {
+          this.fileList = val
+        } else if (val) {
+          try {
+            this.fileList = JSON.parse(val)
+          } catch (e) {
+            this.fileList = []
+          }
+        } else {
+          this.fileList = []
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    extractId(res) {
+      const data = res && res.data ? res.data : res
+      const id = (data && (data.id || data.fileId || (data.data && (data.data.id || data.data.fileId))))
+        ? String(data.id || data.fileId || data.data.id || data.data.fileId)
+        : ''
+      return id
+    },
+    // 校验文件
+    validateFile(file) {
+      // 校验类型
+      if (this.fileType && this.fileType.length > 0) {
+        const name = file.name || ''
+        const ext = name.substring(name.lastIndexOf('.') + 1).toLowerCase()
+        if (!this.fileType.includes(ext)) {
+          uni.showToast({ title: `仅支持 ${this.fileType.join(',')} 格式`, icon: 'none' })
+          return false
+        }
+      }
+      // 校验大小
+      if (this.fileSize && file.size > this.fileSize * 1024 * 1024) {
+        uni.showToast({ title: `文件大小不能超过${this.fileSize}MB`, icon: 'none' })
+        return false
+      }
+      return true
+    },
+
+    async uploadFileByPath(filePath, name) {
+      const r = await upload({ url: '/sw/filebox/uploadFile', filePath, name: 'file' })
+      const id = this.extractId(r)
+      return { id, name }
+    },
+
+    async uploadFileByFormData(fd, name) {
+      const r = await uploadFileApi(fd)
+      const id = this.extractId(r)
+      return { id, name }
+    },
+
+    selectFile() {
+      const count = this.limit - this.fileList.length
+      if (count <= 0) return
+      if (typeof uni !== 'undefined' && typeof uni.chooseMessageFile === 'function') {
+        uni.chooseMessageFile({
+          count,
+          type: 'all',
+          success: (res) => {
+            const tempFiles = (res && res.tempFiles) ? res.tempFiles : []
+            this.processFiles(tempFiles)
+          },
+          fail: () => {
+            uni.showToast({ title: '未选择文件', icon: 'none' })
+          }
+        })
+        return
+      }
+      // #ifdef H5
+      this.selectFileH5()
+      // #endif
+    },
+
+    selectFileH5() {
+      const input = document.createElement('input')
+      input.type = 'file'
+      input.multiple = this.limit > 1
+      input.style.display = 'none'
+      document.body.appendChild(input)
+      input.addEventListener('change', (e) => {
+        const files = Array.from(e.target.files)
+        const processedFiles = files.map(f => ({
+          path: null,
+          file: f,
+          name: f.name,
+          size: f.size
+        }))
+        this.processFiles(processedFiles)
+        document.body.removeChild(input)
+      })
+      input.click()
+    },
+
+    async processFiles(files) {
+      if (!files || files.length === 0) return
+
+      const validFiles = []
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i]
+        if (this.validateFile(file)) {
+          validFiles.push(file)
+        }
+      }
+
+      if (validFiles.length === 0) return
+
+      if (this.fileList.length + validFiles.length > this.limit) {
+        uni.showToast({ title: `最多只能上传${this.limit}个文件`, icon: 'none' })
+        return
+      }
+
+      uni.showLoading({ title: '上传中...' })
+
+      try {
+        const uploadPromises = validFiles.map((f) => {
+          const name = f.name || 'file'
+          if (f.file) {
+            const fd = new FormData()
+            fd.append('file', f.file, name)
+            return this.uploadFileByFormData(fd, name)
+          }
+          if (f.path) {
+            return this.uploadFileByPath(f.path, name)
+          }
+          return Promise.resolve({ id: '', name })
+        })
+
+        const results = await Promise.all(uploadPromises)
+
+        const newFiles = results
+          .filter(r => r && r.id)
+          .map(r => ({ id: r.id, name: r.name, fileId: r.id, fileName: r.name }))
+
+        this.fileList = [...this.fileList, ...newFiles]
+        this.emitChange()
+
+      } catch (e) {
+        console.error(e)
+        uni.showToast({ title: '上传失败', icon: 'none' })
+      } finally {
+        uni.hideLoading()
+      }
+    },
+
+    deleteFile(index) {
+      this.fileList.splice(index, 1)
+      this.emitChange()
+    },
+
+    emitChange() {
+      this.$emit('input', this.fileList)
+      this.$emit('change', this.fileList)
+      this.$emit('update:value', this.fileList)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.file-upload-wrapper {
+  width: 100%;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  color: #3D48A3;
+  font-size: 28rpx;
+  cursor: pointer;
+  height: 48rpx;
+
+  .icon {
+    width: 32rpx;
+    height: 32rpx;
+    margin-right: 8rpx;
+  }
+}
+
+.file-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #f5f7fa;
+  padding: 12rpx 20rpx;
+  border-radius: 8rpx;
+
+  .file-name {
+    font-size: 26rpx;
+    color: #333;
+    flex: 1;
+    margin-right: 20rpx;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  .delete-btn {
+    color: #999;
+    font-size: 32rpx;
+    padding: 0 10rpx;
+  }
+}
+</style>

@@ -32,9 +32,23 @@
           <view class="row"><text class="label">经营年限</text><text class="value">{{ form.businessYears }}</text></view>
           <view class="row"><text class="label">单位地址</text><text class="value">{{ form.companyAddress }}</text></view>
           <view class="row"><text class="label">经营范围</text><text class="value">{{ form.businessScope }}</text></view>
-          <view class="row"><text class="label">工商信息</text><text class="value act" @click="downloadFile(form.businessFileId, form.businessFileName)">{{ form.businessFileName }}</text>
+          <view class="row">
+            <text class="label">工商信息</text>
+            <view class="value">
+              <view v-for="item in (form.businessFileInfoList || [])" :key="item.fileId || item.fileName" class="file-item"
+                @click="downloadFile(item.fileId, item.fileName)">
+                <text class="value act">{{ item.fileName }}</text>
+              </view>
+            </view>
           </view>
-          <view class="row"><text class="label">股东信息</text><text class="value act" @click="downloadFile(form.shareholderFileId, form.shareholderFileName)">{{ form.shareholderFileName }}</text>
+          <view class="row">
+            <text class="label">股东信息</text>
+            <view class="value">
+              <view v-for="item in (form.shareholderFileInfoList || [])" :key="item.fileId || item.fileName"
+                class="file-item" @click="downloadFile(item.fileId, item.fileName)">
+                <text class="value act">{{ item.fileName }}</text>
+              </view>
+            </view>
           </view>
         </view>
 
@@ -489,6 +503,14 @@ export default {
   }
 }
 
+.file-item {
+  margin-bottom: 12rpx;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
 .card {
   padding: 16rpx 0 8rpx;
   border-top: 1rpx solid #f0f0f0;

@@ -30,10 +30,23 @@
             <view class="row"><text class="label">经营年限</text><text class="value">{{ form.businessYears }}</text></view>
             <view class="row"><text class="label">单位地址</text><text class="value">{{ form.companyAddress }}</text></view>
             <view class="row"><text class="label">经营范围</text><text class="value">{{ form.businessScope }}</text></view>
-            <view class="row"><text class="label">工商信息</text><text class="value act" @click="downloadFile(form.businessFileId, form.businessFileName)">{{ form.businessFileName }}</text>
+            <view class="row">
+                <text class="label">工商信息</text>
+                <view class="value">
+                    <view v-for="item in (form.businessFileInfoList || [])" :key="item.fileId || item.fileName" class="file-item"
+                        @click="downloadFile(item.fileId, item.fileName)">
+                        <text class="value act">{{ item.fileName }}</text>
+                    </view>
+                </view>
             </view>
-            <view class="row"><text class="label">股东信息</text><text class="value act" @click="downloadFile(form.shareholderFileId, form.shareholderFileName)">{{ form.shareholderFileName
-                    }}</text>
+            <view class="row">
+                <text class="label">股东信息</text>
+                <view class="value">
+                    <view v-for="item in (form.shareholderFileInfoList || [])" :key="item.fileId || item.fileName" class="file-item"
+                        @click="downloadFile(item.fileId, item.fileName)">
+                        <text class="value act">{{ item.fileName }}</text>
+                    </view>
+                </view>
             </view>
         </view>
 
@@ -444,4 +457,12 @@ export default {
 .mgb10 {
     margin-bottom: 20rpx;
 }
+
+.file-item {
+    margin-bottom: 12rpx;
+}
+
+.file-item:last-child {
+    margin-bottom: 0;
+}
 </style>

@@ -43,11 +43,11 @@
 				<view class="dialog_body">
 					<view class="dialog_row">
 						<text class="dialog_label">上传工商信息</text>
-						<FileUpload v-model="businessFile" />
+							<FileUpload v-model="businessFileList" :limit="9" />
 					</view>
 					<view class="dialog_row">
 						<text class="dialog_label">上传股东信息</text>
-						<FileUpload v-model="shareholderFile" />
+							<FileUpload v-model="shareholderFileList" :limit="9" />
 					</view>
 				</view>
 				<view class="dialog_footer">
@@ -112,7 +112,7 @@
 <script>
 import FlowTimeline from '@/components/flow-timeline/index.vue'
 import SingleSelectSheet from '@/components/single-select/index.vue'
-import FileUpload from '@/components/file-upload/index.vue'
+import FileUpload from '@/components/file-upload/mutiple.vue'
 import { getSysFlowComponentPath } from '@/utils/flow-components.js'
 import { getFlowLinkByInstanceIdApi, getInstanceByBusinessIdApi, approvePassApi, approveRefuseApi } from '@/api/flow.js'
 import { getDicByCodeApi } from '@/api/base.js'
@@ -137,9 +137,9 @@ export default {
 			message: '',
 			customerInfoVisible: false,
 			companyReviewVisible: false,
-			businessFile: { id: '', name: '' },
-			shareholderFile: { id: '', name: '' },
-			customerInfo: { businessFileName: '', businessFileId: '', shareholderFileName: '', shareholderFileId: '' },
+			businessFileList: [],
+			shareholderFileList: [],
+			customerInfo: { businessFileList: [], shareholderFileList: [] },
 			companyReview: { companySettlementPeriod: '', companyMaterialSupplyPlan: '', companySuggestedCategory: '', companySuggestedCategoryName: '', companyCreditLimit: '' },
 			categoryOptions: [],
 			sheet: { visible: false, title: '请选择', options: [], value: '', field: '' },
@@ -330,10 +330,9 @@ export default {
 		},
 		// 是否填写-客户信息
 		hsCustomerInfo() {
-			if (this.customerInfo.businessFileId || this.customerInfo.shareholderFileId) {
-				return true
-			}
-			return false
+			const b = this.customerInfo && Array.isArray(this.customerInfo.businessFileList) ? this.customerInfo.businessFileList : []
+			const s = this.customerInfo && Array.isArray(this.customerInfo.shareholderFileList) ? this.customerInfo.shareholderFileList : []
+			return b.length > 0 || s.length > 0
 		},
 		// 是否填写-公司评审信息
 		hsCompanyReview() {
@@ -346,6 +345,24 @@ export default {
 		// 更多按钮操作
 		onExtra() {
 			if (this.extraBtnText === '客户信息') {
+				const toListModel = (arr) => {
+					const list = Array.isArray(arr) ? arr : []
+					return list.map(it => ({
+						id: (it && (it.fileId || it.id)) ? String(it.fileId || it.id) : '',
+						name: (it && (it.fileName || it.name)) ? String(it.fileName || it.name) : '',
+						fileId: (it && (it.fileId || it.id)) ? String(it.fileId || it.id) : '',
+						fileName: (it && (it.fileName || it.name)) ? String(it.fileName || it.name) : '',
+					})).filter(it => it.id)
+				}
+				const vals = this.getPayload() || {}
+				const b = (this.customerInfo && this.customerInfo.businessFileList && this.customerInfo.businessFileList.length > 0)
+					? this.customerInfo.businessFileList
+					: (vals.businessFileList || [])
+				const s = (this.customerInfo && this.customerInfo.shareholderFileList && this.customerInfo.shareholderFileList.length > 0)
+					? this.customerInfo.shareholderFileList
+					: (vals.shareholderFileList || [])
+				this.businessFileList = toListModel(b)
+				this.shareholderFileList = toListModel(s)
 				this.$refs.customerInfoPopup && this.$refs.customerInfoPopup.open()
 			} else if (this.extraBtnText === '公司评审') {
 				this.$refs.companyReviewPopup && this.$refs.companyReviewPopup.open()
@@ -353,12 +370,14 @@ export default {
 		},
 		// 上传客户信息 保存
 		onCustomerInfoSave() {
-			const b = this.businessFile || {}
-			const s = this.shareholderFile || {}
-			this.customerInfo.businessFileId = b.id || ''
-			this.customerInfo.businessFileName = b.name || ''
-			this.customerInfo.shareholderFileId = s.id || ''
-			this.customerInfo.shareholderFileName = s.name || ''
+			const b = Array.isArray(this.businessFileList) ? this.businessFileList : []
+			const s = Array.isArray(this.shareholderFileList) ? this.shareholderFileList : []
+			this.customerInfo.businessFileList = b
+				.map(it => ({ fileId: it.fileId || '', fileName: it.fileName || it.name || '' }))
+				.filter(it => it.fileId)
+			this.customerInfo.shareholderFileList = s
+				.map(it => ({ fileId: it.fileId || '', fileName: it.fileName || it.name || '' }))
+				.filter(it => it.fileId)
 			this.$refs.customerInfoPopup && this.$refs.customerInfoPopup.close()
 			console.log('审核__customerInfo', this.customerInfo)
 			uni.showToast({ title: '已保存', icon: 'none' })