From d066d024c620af1b54de2228ed2b2308b0f6d26e Mon Sep 17 00:00:00 2001 From: hwj Date: Tue, 26 May 2026 10:47:33 +0800 Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E8=AE=BE=E5=A4=87=E5=8F=B0?= =?UTF-8?q?=E8=B4=A6-=E7=94=9F=E4=BA=A7=E6=97=A5=E6=9C=9F/=E5=85=A5?= =?UTF-8?q?=E5=8E=82=E6=97=A5=E6=9C=9F=E4=B8=8D=E5=BF=85=E5=A1=AB=E3=80=81?= =?UTF-8?q?=E8=B5=84=E6=96=99=E4=B8=8A=E4=BC=A0=E6=B7=BB=E5=8A=A0loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UploadFile/src/UploadFile.vue | 40 +++++++++++++++---- .../mes/deviceledger/DeviceLedgerForm.vue | 39 +++++++++++++----- 2 files changed, 62 insertions(+), 17 deletions(-) diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue index 418c3d13..cd68809b 100644 --- a/src/components/UploadFile/src/UploadFile.vue +++ b/src/components/UploadFile/src/UploadFile.vue @@ -79,7 +79,7 @@ import { UploadFile } from 'element-plus/es/components/upload/src/upload' defineOptions({ name: 'UploadFile' }) const message = useMessage() // 消息弹窗 -const emit = defineEmits(['update:modelValue']) +const emit = defineEmits(['update:modelValue', 'uploading-change']) const props = defineProps({ modelValue: propTypes.oneOfType([String, Array]).isRequired, @@ -97,10 +97,32 @@ const uploadRef = ref() const uploadList = ref([]) const fileList = ref([]) const uploadNumber = ref(0) +const uploadPendingCount = ref(0) const nameMap = ref>({}) const { uploadUrl, httpRequest } = useUpload() +const emitUploadingChange = () => { + emit('uploading-change', uploadPendingCount.value > 0) +} + +const finalizeUploadBatch = () => { + if (uploadList.value.length) { + fileList.value.push(...uploadList.value) + uploadList.value = [] + emitUpdateModelValue() + } + uploadNumber.value = 0 +} + +const finishSingleUpload = () => { + uploadPendingCount.value = Math.max(uploadPendingCount.value - 1, 0) + if (uploadPendingCount.value === 0) { + finalizeUploadBatch() + } + emitUploadingChange() +} + // 文件上传之前判断 const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => { if (fileList.value.length >= props.limit) { @@ -126,6 +148,9 @@ const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => { } message.success('正在上传文件,请稍候...') uploadNumber.value++ + uploadPendingCount.value++ + emitUploadingChange() + return true } // 处理上传的文件发生变化 // const handleFileChange = (uploadFile: UploadFile): void => { @@ -153,6 +178,7 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any, uploadFile): void const url = getUrlFromRes(res) if (!url) { message.error('上传返回数据异常') + finishSingleUpload() return } const name = getNameFromRes(res, url) @@ -165,12 +191,7 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any, uploadFile): void fileList.value.splice(index, 1) } uploadList.value.push({ name, url }) - if (uploadList.value.length === uploadNumber.value) { - fileList.value.push(...uploadList.value) - uploadList.value = [] - uploadNumber.value = 0 - emitUpdateModelValue() - } + finishSingleUpload() } // 文件数超出提示 const handleExceed: UploadProps['onExceed'] = (): void => { @@ -179,6 +200,7 @@ const handleExceed: UploadProps['onExceed'] = (): void => { // 上传错误提示 const excelUploadError: UploadProps['onError'] = (): void => { message.error('导入数据失败,请您重新上传!') + finishSingleUpload() } // 删除上传文件 const handleRemove = (file: UploadFile) => { @@ -293,6 +315,10 @@ watch( (val: string | string[]) => { if (!val) { fileList.value = [] // fix:处理掉缓存,表单重置后上传组件的内容并没有重置 + uploadList.value = [] + uploadNumber.value = 0 + uploadPendingCount.value = 0 + emitUploadingChange() return } diff --git a/src/views/mes/deviceledger/DeviceLedgerForm.vue b/src/views/mes/deviceledger/DeviceLedgerForm.vue index 50584695..d62276d0 100644 --- a/src/views/mes/deviceledger/DeviceLedgerForm.vue +++ b/src/views/mes/deviceledger/DeviceLedgerForm.vue @@ -1,6 +1,13 @@