添加单次上传数量提示，单次上传数量限制，收集文件上传失败提示信息，统一显示

src/views/common/NewDigitalInvoiceUploadComponentTest.vue

@@ -2,9 +2,10 @@
 <template>
 	<div :key="uploadKey">
 		<!-- <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{ dividerName }} -->
-		<el-upload ref="upload" style="display: inline-block; " :show-header="'status'" action="" :limit="999"
-			:on-success="handleSuccessUpload" :http-request="httpRequest" multiple :on-exceed="(files, fileList) => {
-				$message.warning(`当前限制选择 999 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+		<el-upload ref="upload" style="display: inline-block; " :show-header="'status'" action="" :limit="50"
+			:on-success="handleSuccessUpload" :on-error="handleFileError" :http-request="httpRequest" multiple
+			:on-exceed="(files, fileList) => {
+				$message.warning(`当前限制选择 50 个文件，本次选择了 ${files.length} 个文件`)
 			}" :show-file-list="false" :before-upload="beforeUpload" :on-change="changes" :on-progress="uploadVideoProcess"
 			:file-list="fileList">
 			<template v-if="auth === 'view' && uploadFlag === false" #tip>
@@ -166,6 +167,9 @@ import Sortable from 'sortablejs';
 export default {
 	data() {
 		return {
+			fileCount: 0, //被阻止的文件数量
+			fileChangeCount: 0, // 所有待上传文件数量
+			messageList: [], // 收集错误消息
 			isConfirm: 0,//1:为主任审批，需要确认发票。2:为财务审批，无需确认
 			uploadKey: '',
 			progressFlag: false,
@@ -453,6 +457,9 @@ export default {
 			await httpRequest(file, fileNameInvoice(file), this.directory, this.maxValue)
 		},
 		handleSuccessUpload(response, file, fileList) {
+
+		},
+		handleFileError(err, file, fileList) {
 		},
 		async beforeUpload(file) {
 			this.changeLoading(true)
@@ -463,15 +470,15 @@ export default {
 			} else {
 				// 文件大小检查
 				if (!beforeAvatarUpload(file, this.dataListNew, this.maxValue)) {
-					this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!');
-					this.changeLoading(false)
+					this.messageList.push(`文件${file.name}大小不能超过 ${this.maxValue} MB!`)
+					this.fileCount++
 					return false;
 				}
 				// 对文件进行判定
 				const isXml = file.type === 'text/xml'; // 假设只接受 XML 文件
 				if (!isXml) {
-					this.$message.error('只能上传 XML 文件');
-					this.changeLoading(false)
+					this.messageList.push(`文件${file.name}格式错误,只能上传 XML 文件`)
+					this.fileCount++
 					return false; // 取消上传
 				}
 
@@ -482,8 +489,8 @@ export default {
 					// 后端解析
 					fileData = await this.ossService.disposeXmlFile(formBody)
 				} catch (e) {
-					this.$message.error('发票文件解析失败')
-					this.changeLoading(false)
+					this.messageList.push(`数电发票:${file.name}解析失败`)
+					this.fileCount++
 					return false
 				}
 
@@ -493,14 +500,14 @@ export default {
 				})
 				if (fileIndex != -1) {
 					if (JSON.stringify(fileData) === "{}") {
-						this.$message.warning({ message: `数电发票:${file.name}格式错误` });
-						this.changeLoading(false)
+						this.messageList.push(`数电发票:${file.name}格式错误`)
+						this.fileCount++
 						return false
 					}
 
 					if (this.commonJS.isNotEmpty(fileData.InvoiceNumber)) {
-						this.$message.warning({ message: `数电发票:${file.name + "<br/>发票号：" + fileData.InvoiceNumber}<br/>已经上传，请勿重复上传`, dangerouslyUseHTMLString: true });
-						this.changeLoading(false)
+						this.messageList.push(`数电发票:${file.name + "<br/>发票号：" + fileData.InvoiceNumber}已经上传，请勿重复上传`)
+						this.fileCount++
 						return false
 					}
 				}
@@ -515,8 +522,8 @@ export default {
 
 						if (!temporaryUrl || temporaryUrl.trim() === '') {
 							// 如果临时 URL 无效，则标记该文件为无效并删除
-							this.$message.warning({ message: `数电发票:${file.name}获取失败，上传失败。` });
-							this.changeLoading(false)
+							this.messageList.push(`数电发票:${file.name}获取失败，上传失败。`)
+							this.fileCount++
 							return false
 						} else {
 							// 如果临时 URL 有效，继续添加文件到有效文件列表
@@ -524,8 +531,8 @@ export default {
 						}
 					} catch (error) {
 						// 如果临时 URL 获取失败，也标记该文件为无效
-						this.$message.warning({ message: `数电发票:${file.name}获取失败，上传失败。` });
-						this.changeLoading(false)
+						this.messageList.push(`数电发票:${file.name}获取失败，上传失败。`)
+						this.fileCount++
 						return false
 					}
 				}
@@ -541,8 +548,8 @@ export default {
 					// 仅处理 XML 文件
 					if (file.name && file.name.toLowerCase().endsWith(".xml")) {
 						if (JSON.stringify(fileData) === "{}") {
-							this.$message.warning({ message: `数电发票:${file.name}格式错误` });
-							this.changeLoading(false)
+							this.messageList.push(`数电发票:${file.name}格式错误`)
+							this.fileCount++
 							return false
 						}
 						if (Object.keys(fileData).length > 0) {
@@ -559,28 +566,28 @@ export default {
 							}
 
 							if (this.toCompany !== fileData.BuyerInformationBuyerName) {
-								this.$message.warning({ message: `仅可上传${this.toCompany}的报销数电发票：<br/>${"文件名: " + file.name + "—— 发票号：" + fileData.InvoiceNumber}<br>上传失败 `, dangerouslyUseHTMLString: true });
-								this.changeLoading(false)
+								this.messageList.push(`仅可上传${this.toCompany}的报销数电发票：<br/>${"文件名: " + file.name + "—— 发票号：" + fileData.InvoiceNumber}上传失败 `)
+								this.fileCount++
 								return false
 							}
 							if (this.commonJS.isNotEmpty(fileData.InvoiceNumber)) {
 								var flag = this.invoiceReimbursementDispose(fileData)
 								if (flag) {
-									this.$message.warning({ message: `数电发票:${file.name + "-" + fileData.InvoiceNumber}<br/>已经上传，请勿重复上传`, dangerouslyUseHTMLString: true });
-									this.changeLoading(false)
+									this.messageList.push(`数电发票:${file.name + "-" + fileData.InvoiceNumber}已经上传，请勿重复上传`)
+									this.fileCount++
 									return false
 								}
 								//查询当前发票号是否已经被报销
 								let isUsed = await this.ossService.isUsedByInvoiceNumber(fileData.InvoiceNumber);
 								if (isUsed) {
-									this.$message.warning({ message: `数电发票:${file.name + "<br/> 发票号：" + fileData.InvoiceNumber}<br/>已经发起或已完成报销,无法重复报销`, dangerouslyUseHTMLString: true });
-									this.changeLoading(false)
+									this.messageList.push(`数电发票:${file.name + "<br/> 发票号：" + fileData.InvoiceNumber}已经发起或已完成报销,无法重复报销`)
+									this.fileCount++
 									return false
 								}
 								let inDate = this.formatDate(fileData.IssueTime)
 								if (inDate.indexOf("NaN") != -1 && this.commonJS.isNotEmpty(inDate)) {
-									this.$message.warning({ message: `数电发票:${file.name + "<br/> 发票号：" + fileData.InvoiceNumber}<br/>日期格式错误，上传失败。`, dangerouslyUseHTMLString: true });
-									this.changeLoading(false)
+									this.messageList.push(`数电发票:${file.name + "<br/> 发票号：" + fileData.InvoiceNumber}日期格式错误，上传失败。`)
+									this.fileCount++
 									return false
 								}
 							}
@@ -682,6 +689,24 @@ export default {
 			}
 		},
 		async changes(file, fileList) {
+			// 如果文件在beforeupload中被拦截，就通过ready状态判断
+			if (file.status == "ready") {
+				this.fileChangeCount++
+				setTimeout(() => {
+					if (this.fileChangeCount == this.fileCount) {
+						console.log(this.messageList.length);
+
+						this.messageList.forEach(msg => {
+							this.$message.warning({ message: msg, dangerouslyUseHTMLString: true });
+						});
+						this.messageList = []
+						this.fileCount = 0
+						this.fileChangeCount = 0
+						this.changeLoading(false)
+					}
+				}, 1000);
+			}
+
 			// 防止上传多次触发changes
 			if (file.status == 'ready' || file.status == 'uploading') return //阻止上传多次触发changes
 
@@ -690,11 +715,14 @@ export default {
 				f.status === 'ready' || f.status === 'uploading'
 			)
 			if (!this.hasUploading) {
-				this.$emit('changeLoading', false)
-				this.loading = false
-			} else {
-				this.$emit('changeLoading', this.hasUploading)
-				this.loading = this.hasUploading
+				this.messageList.forEach(msg => {
+					this.$message.warning({ message: msg, dangerouslyUseHTMLString: true });
+				});
+				this.messageList = []
+				this.fileCount = 0
+				this.fileChangeCount = 0
+				this.changeLoading(false)
+
 			}
 
 			try {
@@ -781,7 +809,6 @@ export default {
 				}
 				// 👇 初始化时主动触发一次
 				this.setNodeSort(null, null, 'init');
-				// 在 changes 完成后，手动调用 handleUploadSuccess
 				// await this.handleUploadSuccess(null, fileData, this.fileList);  // 传入空参数或实际参数
 
 			} catch (error) {

src/views/common/reimbursement/ReimbursementComponentTest.vue

@@ -43,7 +43,7 @@
                     @click="insertEvent('detail')" plain>
                     新增报销项
                 </el-button>
-                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息)</span>
+                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息，单次最多上传50张数电发票文件)</span>
                 <el-form inline :disabled="false" style="display: inline-block;">
                     <el-button v-if="this.isConfirm == 1" type="primary" size="default" style="margin-left: 10px;"
                         @click="allSelect('0')">全部取消</el-button>
@@ -188,7 +188,7 @@
                     @click="insertEvent('detail')" plain>
                     新增报销项
                 </el-button>
-                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息)</span>
+                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息，单次最多上传50张数电发票文件)</span>
                 <el-form inline :disabled="false" style="display: inline-block;">
                     <el-button v-if="this.isConfirm == 1" type="primary" size="default" style="margin-left: 10px;"
                         @click="allSelect('0')">全部取消</el-button>
@@ -333,7 +333,7 @@
                     @click="insertEvent('detail')" plain>
                     新增报销项
                 </el-button>
-                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息)</span>
+                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息，单次最多上传50张数电发票文件)</span>
                 <el-form inline :disabled="false" style="display: inline-block;">
                     <el-button v-if="this.isConfirm == 1" type="primary" size="default" style="margin-left: 10px;"
                         @click="allSelect('0')">全部取消</el-button>
@@ -467,7 +467,8 @@
 
         <div v-if="inputForm.sourceType === '2'">
             <el-divider content-position="left"><i class="el-icon-document"></i>
-                合同报销详情<span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息)</span>
+                合同报销详情<span style="color: red;"
+                    v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息，单次最多上传50张数电发票文件)</span>
                 <el-button size="default" style="margin-left: 20px" type="primary" v-if="insertBtn"
                     :disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'"
                     @click="insertEvent('contract_detail')" plain>
@@ -595,7 +596,7 @@
                     @click="insertEvent('report_detail')" plain>
                     新增报销项
                 </el-button>
-                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息)</span>
+                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息，单次最多上传50张数电发票文件)</span>
                 <el-form inline :disabled="false" style="display: inline-block;">
                     <el-button v-if="this.isConfirm == 1" type="primary" size="default" style="margin-left: 10px;"
                         @click="allSelect('0')">全部取消</el-button>
@@ -741,7 +742,7 @@
                     @click="insertEvent('report_detail')" plain>
                     新增报销项
                 </el-button>
-                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息)</span>
+                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息，单次最多上传50张数电发票文件)</span>
                 <el-form inline :disabled="false" style="display: inline-block;">
                     <el-button v-if="this.isConfirm == 1" type="primary" size="default" style="margin-left: 10px;"
                         @click="allSelect('0')">全部取消</el-button>
@@ -881,7 +882,7 @@
                     @click="insertEvent('others')" plain>
                     新增报销项
                 </el-button>
-                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息)</span>
+                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息，单次最多上传50张数电发票文件)</span>
                 <el-form inline :disabled="false" style="display: inline-block;">
                     <el-button v-if="this.isConfirm == 1" type="primary" size="default" style="margin-left: 10px;"
                         @click="allSelect('0')">全部取消</el-button>
@@ -1021,7 +1022,7 @@
                     :disabled="method === 'view' || this.formReadOnly" @click="insertEvent('procured')" plain>
                     新增报销项
                 </el-button>
-                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息)</span>
+                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息，单次最多上传50张数电发票文件)</span>
                 <el-form inline :disabled="false" style="display: inline-block;">
                     <el-button v-if="this.isConfirm == 1" type="primary" size="default" style="margin-left: 10px;"
                         @click="allSelect('0')">全部取消</el-button>
@@ -1141,7 +1142,7 @@
                     @click="insertEvent('zs_project_detail')" plain>
                     新增报销项
                 </el-button>
-                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息)</span>
+                <span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息，单次最多上传50张数电发票文件)</span>
                 <el-form inline :disabled="false" style="display: inline-block;">
                     <el-button v-if="this.isConfirm == 1" type="primary" size="default" style="margin-left: 10px;"
                         @click="allSelect('0')">全部取消</el-button>
@@ -1297,7 +1298,8 @@
         </div>
         <div v-if="inputForm.reimbursementType === '0'">
             <el-divider content-position="left"><i class="el-icon-document"></i>
-                专用发票信息<span style="color: red;" v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息)</span>
+                专用发票信息<span style="color: red;"
+                    v-if="this.isConfirm == 4">(可在报销单后操作栏新增xml格式数电发票信息，单次最多上传50张数电发票文件)</span>
                 <el-button size="default" style="margin-left: 10px" type="primary"
                     :disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'"
                     @click="insertEvent('amount')" plain>
@@ -3336,7 +3338,7 @@ export default {
                 this.screenLoading = this.$loading({
                     lock: true,
                     text: '数据处理中，请稍后...',
-                    background: 'rgba(0, 0, 0, 0.7)',
+                    background: 'rgba(0, 0, 0, 0.2)',
                 })
             } else {
                 this.screenLoading.close()