feat: 批量订购上传支付进度与失败明细

src/components/business/VoucherUpload.vue

@@ -12,6 +12,7 @@
       drag
       multiple
       :auto-upload="false"
+      :accept="accept"
       :on-change="handleFileChange"
       :on-remove="handleRemoveFile"
       list-type="picture"
@@ -20,7 +21,7 @@
       <div class="voucher-upload__text">将{{ voucherName }}拖到此处，或<em>点击上传</em></div>
       <template #tip>
         <div class="el-upload__tip">
-          支持多张图片或附件，最多上传 {{ maxCount }} 个文件；可粘贴文件。
+          {{ tip || `支持多张图片或附件，最多上传 ${maxCount} 个文件；可粘贴文件。` }}
         </div>
       </template>
       <template #file="{ file }">
@@ -61,11 +62,15 @@
     modelValue?: string[] | string
     voucherName?: string
     maxCount?: number
+    accept?: string
+    tip?: string
   }
 
   const props = withDefaults(defineProps<Props>(), {
     voucherName: '凭证',
-    maxCount: 5
+    maxCount: 5,
+    accept: '',
+    tip: ''
   })
 
   const emit = defineEmits<{
@@ -171,6 +176,20 @@
     const file = uploadFile.raw
     if (!file) return
 
+    if (props.accept) {
+      const accepted = props.accept.split(',').some((type) => {
+        const value = type.trim().toLowerCase()
+        return value.startsWith('.')
+          ? file.name.toLowerCase().endsWith(value)
+          : file.type.toLowerCase() === value
+      })
+      if (!accepted) {
+        ElMessage.warning(`只能上传 ${props.accept} 格式的文件`)
+        removeUploadFile(uploadFile)
+        return
+      }
+    }
+
     if (!selectedUploadUids.has(uploadFile.uid)) {
       if (selectedUploadUids.size >= getMaxCount()) {
         showMaxCountWarning()