feat(admin): synchronize fleet photos and multi-image loading documents

src/modules/overseas-master-data/components/OutsourcedBusinessPhotosEditor.vue

@@ -16,10 +16,10 @@ const open = defineModel<boolean>({ default: false })
 const props = defineProps<{ detail: OutsourcedBusinessDetail | null }>()
 const emit = defineEmits<{ saved: [value: OutsourcedBusinessDetail]; busy: [value: boolean] }>()
 const auth = useAuthStore(), access = useAccessPreviewStore(), busy = ref(false), error = ref<ApiErrorDetails | null>(null)
-const urls = ref<Partial<Record<OutsourcedBusinessPhotoSlot,string>>>({}), reading = ref<OutsourcedBusinessPhotoSlot | null>(null)
+const urls = ref<Record<string,string>>({}), reading = ref<string | null>(null)
 const uploadable = computed(() => access.can(permission.outsourcedBusinessUpload) && props.detail?.row.actions.upload.allowed === true)
 let actor = '', number = '', generation = 0
-function savedPhoto(slot: OutsourcedBusinessPhotoSlot) { return props.detail?.photos.find(photo => photo.slot === slot && photo.savedAt) }
+function savedPhotos(slot: OutsourcedBusinessPhotoSlot) { return props.detail?.photos.filter(photo => photo.slot === slot && photo.savedAt) || [] }
 function release() { Object.values(urls.value).forEach(url => { if (url) URL.revokeObjectURL(url) }); urls.value = {} }
 function ensureScope() { if (auth.user?.id !== actor || props.detail?.row.dispatchNo !== number) throw new Error('图片作业身份或排车单已变化，请重新打开') }
 watch(busy, value => emit('busy', value))
@@ -30,17 +30,18 @@ watch(open, value => {
 }, { immediate: true })
 watch(() => props.detail?.photos, () => { generation++; release(); reading.value = null })
 onBeforeUnmount(() => { generation++; release() })
-async function preview(slot: OutsourcedBusinessPhotoSlot) {
-  const photo = savedPhoto(slot), current = generation
+async function preview(slot: OutsourcedBusinessPhotoSlot, fileId: string) {
+  const photo = savedPhotos(slot).find(item => item.fileId === fileId), current = generation
   if (!photo || reading.value) return
-  reading.value = slot; error.value = null
-  try { const blob = await getOutsourcedBusinessPhotoContent(number, photo); if (current !== generation || !open.value) return; urls.value[slot] = URL.createObjectURL(blob) }
+  reading.value = fileId; error.value = null
+  try { const blob = await getOutsourcedBusinessPhotoContent(number, photo); if (current !== generation || !open.value) return; urls.value[fileId] = URL.createObjectURL(blob) }
   catch (cause) { if (current === generation) error.value = getApiErrorDetails(cause, '图片读取失败') }
   finally { if (current === generation) reading.value = null }
 }
-async function upload(slot: OutsourcedBusinessPhotoSlot, event: Event) {
+async function upload(slot: OutsourcedBusinessPhotoSlot, event: Event, replaceFileId?: string) {
   const input = event.target as HTMLInputElement, file = input.files?.[0]; input.value = ''
   if (!file || busy.value || !uploadable.value) return
+  if (!replaceFileId && savedPhotos(slot).length >= (slot.startsWith('FUEL_') ? 1 : 5)) return
   if (!['image/jpeg','image/png'].includes(file.type) || !file.size) { error.value = { message: '请选择有效的JPG或PNG图片' }; return }
   busy.value = true; error.value = null
   try {
@@ -48,7 +49,7 @@ async function upload(slot: OutsourcedBusinessPhotoSlot, event: Event) {
     const photo = await uploadOutsourcedBusinessPhoto(number, slot, file, crypto.randomUUID()); ensureScope()
     const latest = await getOutsourcedBusiness(number); ensureScope()
     if (!latest.row.actions.upload.allowed) throw new Error(latest.row.actions.upload.blockReason || '当前不允许上传照片')
-    const result = await bindOutsourcedBusinessPhoto(number, slot, { recordVersion: outsourcedBusinessVersion(latest.row.recordVersion), idempotencyKey: crypto.randomUUID(), fileId: photo.fileId }); ensureScope()
+    const result = await bindOutsourcedBusinessPhoto(number, slot, { recordVersion: outsourcedBusinessVersion(latest.row.recordVersion), idempotencyKey: crypto.randomUUID(), fileId: photo.fileId, ...(replaceFileId ? { replaceFileId } : {}) }); ensureScope()
     emit('saved', result); ElMessage.success('照片已保存')
   } catch (cause) { error.value = getApiErrorDetails(cause, '图片上传或保存失败，请重新选择图片') }
   finally { busy.value = false }
@@ -60,10 +61,13 @@ function beforeClose(done: () => void) { if (!busy.value) done() }
   <OutsourcedBusinessPhotosDialog v-model="open" :dispatch-no="detail?.row.dispatchNo" :busy="busy" :before-close="beforeClose">
     <template #state><LoadErrorState v-if="error" title="照片作业未完成" :message="error.message" :show-retry="false"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState><p v-if="!uploadable">{{ detail?.row.actions.upload.blockReason || '当前仅可查看照片' }}</p></template>
     <template v-for="role in outsourcedBusinessPhotoRoles" :key="role.slot" #[role.viewSlot]>
-      <img v-if="urls[role.slot]" :src="urls[role.slot]" :alt="role.label" class="outsourced-business-photo" />
-      <template v-if="savedPhoto(role.slot)"><p>{{ savedPhoto(role.slot)?.fileName }} · 已保存</p><el-button :loading="reading === role.slot" :disabled="Boolean(reading)" @click="preview(role.slot)">查看图片</el-button></template>
-      <p v-else>暂无已保存照片</p>
-      <label v-if="uploadable" class="outsourced-business-upload">{{ savedPhoto(role.slot) ? '替换图片' : '上传图片' }}<input type="file" accept="image/jpeg,image/png" :disabled="busy" @change="upload(role.slot, $event)" /></label>
+      <div v-for="photo in savedPhotos(role.slot)" :key="photo.fileId">
+        <img v-if="urls[photo.fileId]" :src="urls[photo.fileId]" :alt="role.label" class="outsourced-business-photo" />
+        <p>{{ photo.fileName }} · 已保存</p><el-button :loading="reading === photo.fileId" :disabled="Boolean(reading)" @click="preview(role.slot, photo.fileId)">查看图片</el-button>
+        <label v-if="uploadable" class="outsourced-business-upload">替换图片<input type="file" accept="image/jpeg,image/png" :disabled="busy" @change="upload(role.slot, $event, photo.fileId)" /></label>
+      </div>
+      <p v-if="!savedPhotos(role.slot).length">暂无已保存照片</p>
+      <label v-if="uploadable && savedPhotos(role.slot).length < (role.slot.startsWith('FUEL_') ? 1 : 5)" class="outsourced-business-upload">上传图片<input type="file" accept="image/jpeg,image/png" :disabled="busy" @change="upload(role.slot, $event)" /></label>
     </template>
   </OutsourcedBusinessPhotosDialog>
 </template>