diff --git a/src/components/UploadFile/src/UploadImgs.vue b/src/components/UploadFile/src/UploadImgs.vue index 6bd31db1..dcda271c 100644 --- a/src/components/UploadFile/src/UploadImgs.vue +++ b/src/components/UploadFile/src/UploadImgs.vue @@ -90,6 +90,45 @@ const fileList = ref([]) const uploadNumber = ref(0) const uploadList = ref([]) const nameMap = ref>({}) +const uploading = ref(false) + +interface UploadEmits { + (e: 'update:modelValue', value: string[]): void + (e: 'uploading-change', value: boolean): void +} + +const emit = defineEmits() + +const setUploading = (value: boolean) => { + if (uploading.value === value) return + uploading.value = value + emit('uploading-change', value) +} + +const removeUploadingFile = (uploadFile?: UploadFile | UploadUserFile) => { + if (!uploadFile?.uid) return + const index = fileList.value.findIndex((item) => item.uid === uploadFile.uid) + if (index > -1) { + fileList.value.splice(index, 1) + } +} + +const finishUploadQueue = () => { + if (uploadNumber.value > 0 && uploadList.value.length !== uploadNumber.value) return + if (uploadList.value.length) { + fileList.value.push(...uploadList.value) + uploadList.value = [] + emitUpdateModelValue() + } + uploadNumber.value = 0 + setUploading(false) +} + +const finishOneUploadAsFailed = (uploadFile?: UploadFile | UploadUserFile) => { + removeUploadingFile(uploadFile) + uploadNumber.value = Math.max(uploadNumber.value - 1, 0) + finishUploadQueue() +} /** * @description 文件上传之前判断 * @param rawFile 上传的文件 @@ -109,16 +148,15 @@ const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => { message: `上传图片大小不能超过 ${props.fileSize}M!`, type: 'warning' }) - uploadNumber.value++ - return imgType.includes(rawFile.type as FileTypes) && imgSize + const valid = imgType.includes(rawFile.type as FileTypes) && imgSize + if (valid) { + uploadNumber.value++ + setUploading(true) + } + return valid } // 图片上传成功 -interface UploadEmits { - (e: 'update:modelValue', value: string[]): void -} - -const emit = defineEmits() const unwrapUploadPayload = (res: any) => { if (!res) return undefined const payload = res.data ?? res @@ -150,6 +188,7 @@ const uploadSuccess: UploadProps['onSuccess'] = (res: any, uploadFile): void => const url = getUrlFromRes(res) if (!url) { message.error('上传返回数据异常') + finishOneUploadAsFailed(uploadFile) return } const name = getNameFromRes(res, url) @@ -157,17 +196,9 @@ const uploadSuccess: UploadProps['onSuccess'] = (res: any, uploadFile): void => nameMap.value[url] = name } message.success('上传成功') - const index = fileList.value.findIndex((item) => item.uid === uploadFile.uid) - if (index > -1) { - fileList.value.splice(index, 1) - } + removeUploadingFile(uploadFile) uploadList.value.push({ name, url }) - if (uploadList.value.length === uploadNumber.value) { - fileList.value.push(...uploadList.value) - uploadList.value = [] - uploadNumber.value = 0 - emitUpdateModelValue() - } + finishUploadQueue() } const getDisplayNameByUrl = (url: string): string => { @@ -215,12 +246,13 @@ const handleRemove = (uploadFile: UploadFile) => { } // 图片上传错误提示 -const uploadError = () => { +const uploadError: UploadProps['onError'] = (_error, uploadFile) => { ElNotification({ title: '温馨提示', message: '图片上传失败,请您重新上传!', type: 'error' }) + finishOneUploadAsFailed(uploadFile) } // 文件数超出提示 diff --git a/src/locales/en.ts b/src/locales/en.ts index 654f69ba..8158f4cd 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -2723,6 +2723,7 @@ export default { inspectionMethod: 'Inspection Method', criteria: 'Criteria', inspectionTime: 'Inspection Time', + images: 'Images', remark: 'Remark', operator: 'Operator', projectContent: 'Project Content', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index a0259e6b..57266c39 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -2204,6 +2204,7 @@ export default { inspectionMethod: '点检方式', criteria: '判定标准', inspectionTime: '点检时间', + images: '图片', remark: '备注', operator: '操作人', // 维修 diff --git a/src/views/erp/mold/components/MoldMaintainView.vue b/src/views/erp/mold/components/MoldMaintainView.vue index 624ed666..f82b8a28 100644 --- a/src/views/erp/mold/components/MoldMaintainView.vue +++ b/src/views/erp/mold/components/MoldMaintainView.vue @@ -129,18 +129,25 @@ - - + - + @@ -85,7 +104,7 @@ v-else-if="scope.row.images" :src="parseFirstImage(scope.row.images)" @@ -117,7 +136,22 @@ const managementId = ref(undefined) const jobStatus = ref(undefined) const cancelReason = ref(undefined) const decisionMap = reactive>({}) -const imageMap = reactive>({}) +const imageMap = reactive>({}) +const imageUploadingMap = reactive>({}) +const hasImageUploading = computed(() => Object.values(imageUploadingMap).some(Boolean)) + +const setImageUploading = (key: string, value: boolean) => { + if (!key) return + if (value) { + imageUploadingMap[key] = true + } else { + delete imageUploadingMap[key] + } +} + +const isImageUploading = (key: string) => { + return !!imageUploadingMap[key] +} const getTagDict = (dictType: string, value: any) => { if (!dictReady.value) return undefined @@ -163,6 +197,7 @@ const open = async (options: { managementId: number; title?: string; jobStatus?: cancelReason.value = options.cancelReason for (const key of Object.keys(decisionMap)) delete decisionMap[key] for (const key of Object.keys(imageMap)) delete imageMap[key] + for (const key of Object.keys(imageUploadingMap)) delete imageUploadingMap[key] queryParams.pageNo = 1 await getList() } @@ -189,8 +224,8 @@ const getList = async () => { for (const row of list.value) { const id = row?.id if (!id) continue - if (row.images && !imageMap[String(id)]) { - imageMap[String(id)] = parseFirstImage(row.images) + if (!imageMap[String(id)]) { + imageMap[String(id)] = parseImages(row.images).slice(0, 3) } } } finally { @@ -214,8 +249,8 @@ const handleSave = async () => { if (String(row.inspectionResult) !== '0') continue const decision = decisionMap[String(row.id)] if (!decision) continue - const img = imageMap[String(row.id)] - payload.push({ ...(row as any), inspectionResult: decision, images: img || row.images }) + const images = imageMap[String(row.id)] + payload.push({ ...(row as any), inspectionResult: decision, images: Array.isArray(images) ? images.join(',') : row.images }) } if (!payload.length) { message.error(t('MoldManagement.TicketResultDialog.selectDecisionTip')) @@ -247,13 +282,34 @@ const parseImages = (value: any): string[] => { .filter(Boolean) } -const parseFirstImage = (value: any): string => { - return parseImages(value)[0] || '' -}