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 @@