feat(pda): support five loading photos per category and reconcile saves

src/components/DispatchLoadingDocuments.vue

@@ -2,24 +2,27 @@
   <view class="loading-documents">
     <view class="heading">
       <view class="heading-main"><text class="heading-title">装车照片</text></view>
-      <text class="heading-progress">{{ busy ? '同步中' : snapshot ? `${snapshot.photos.length}/5 已保存` : '待同步' }}</text>
+      <text class="heading-progress">{{ busy ? '同步中' : snapshot ? `${completedCategories}/5 类已保存` : '待同步' }}</text>
       <button class="heading-refresh" :disabled="busy" @tap="load">刷新</button>
     </view>
+    <text class="section-hint">每类至少 1 张、最多 5 张，上传后自动保存，可逐张更换。</text>
+    <text v-if="needsRefresh" class="section-hint">保存状态尚未核实，请先刷新资料后再上传。</text>
     <view v-if="error" class="error" role="alert"><text>{{ error.message }}</text><text v-if="error.requestId">requestId：{{ error.requestId }}</text><text v-if="error.traceId">traceId：{{ error.traceId }}</text></view>
     <view class="photo-list">
       <view v-for="(slot, index) in slots" :key="slot" class="photo-card" :class="{ filled: snapshot?.photos.some(item => item.slot === slot) }">
         <view class="photo-card-header">
           <view class="photo-card-main">
             <text class="photo-number">{{ snapshot?.photos.some(item => item.slot === slot) ? '✓' : index + 1 }}</text>
-            <view class="photo-card-title"><text class="photo-label">{{ slotLabels[slot] }}</text><text v-if="snapshot?.photos.some(item => item.slot === slot)" class="photo-status">已保存 1 张</text></view>
+            <view class="photo-card-title"><text class="photo-label">{{ slotLabels[slot] }}</text><text class="photo-status">{{ photosFor(slot).length }}/5 张已保存</text></view>
           </view>
-          <button v-if="editable" class="photo-upload" :aria-label="`${snapshot?.photos.some(item => item.slot === slot) ? '更换' : '上传'}${slotLabels[slot]}`" :disabled="busy" @tap="choose(slot)">{{ snapshot?.photos.some(item => item.slot === slot) ? '更换图片' : '+ 上传图片' }}</button>
+          <button v-if="editable" class="photo-upload" :aria-label="`上传${slotLabels[slot]}`" :disabled="busy || photosFor(slot).length >= limit" @tap="choose(slot)">{{ photosFor(slot).length >= limit ? '已满 5 张' : '+ 上传图片' }}</button>
         </view>
         <view v-if="snapshot?.photos.some(item => item.slot === slot)" class="photo-preview-list">
           <view v-for="photo in snapshot.photos.filter(item => item.slot === slot)" :key="photo.fileId" class="photo-preview">
             <image v-if="images[photo.fileId]" class="photo-thumbnail" :src="images[photo.fileId]" mode="aspectFill" :aria-label="`预览${slotLabels[slot]}`" @tap="preview(images[photo.fileId])" />
             <button v-else class="photo-read-retry" :aria-label="`重新读取${slotLabels[slot]}`" :disabled="busy" @tap="load">图片读取失败，重试</button>
             <text v-if="images[photo.fileId]" class="photo-preview-caption" :aria-label="`查看${slotLabels[slot]}大图`" @tap="preview(images[photo.fileId])">查看大图</text>
+            <button v-if="editable" class="photo-replace" :disabled="busy" :aria-label="`更换${slotLabels[slot]}图片`" @tap="choose(slot, photo.fileId)">更换</button>
           </view>
         </view>
       </view>
@@ -29,17 +32,18 @@
 <script>
 import { session } from '@/stores/session.js'
 import { toDispatchError } from '@/utils/dispatch-error.js'
-import { loadingPhotoSlots, getLoadingDocuments, uploadLoadingPhoto, bindLoadingPhoto, readLoadingPhoto } from '@/api/dispatch-loading-documents.js'
+import { loadingPhotoSlots, loadingPhotoLabels, loadingPhotoLimit, getLoadingDocuments, uploadLoadingPhoto, bindLoadingPhoto, readLoadingPhoto } from '@/api/dispatch-loading-documents.js'
 
 export default {
   props: { dispatchNo: { type: String, required: true } },
   emits: ['saved', 'busy-change'],
-  data() { return { slots: loadingPhotoSlots, slotLabels: { LOADING_SCENE: '装车现场', LOADING_LIST: '装车清单', PRE_DEPARTURE_CHECK: '发车前检查', DRIVER_LICENSE: '驾驶证', RECEIPT: '回执' }, snapshot: null, busy: false, error: null, images: {}, active: true, revision: 0,
+  data() { return { slots: loadingPhotoSlots, slotLabels: loadingPhotoLabels, limit: loadingPhotoLimit, snapshot: null, busy: false, needsRefresh: false, error: null, images: {}, active: true, revision: 0,
     scope: `${session.currentUser?.id || ''}:${session.currentUser?.warehouseId || ''}`, number: this.dispatchNo } },
-  computed: { editable() { return this.snapshot?.editable === true } },
+  computed: { editable() { return this.snapshot?.editable === true && !this.needsRefresh }, completedCategories() { return this.slots.filter(slot => this.photosFor(slot).length > 0).length } },
   mounted() { this.load() },
   beforeUnmount() { this.active = false; this.revision++; this.$emit('busy-change', false) },
   methods: {
+    photosFor(slot) { return (this.snapshot?.photos || []).filter(photo => photo.slot === slot) },
     ensureScope() { if (!this.active || this.number !== this.dispatchNo || this.scope !== `${session.currentUser?.id || ''}:${session.currentUser?.warehouseId || ''}`) throw new Error('作业身份已变化，请重新进入任务') },
     key() { return `loading-${Date.now()}-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}` },
     async previews() {
@@ -48,22 +52,44 @@ export default {
         const image = await readLoadingPhoto(this.number, photo); this.ensureScope(); this.images[photo.fileId] = image
       }))
     },
-    async load() { await this.run(async () => { const value = await getLoadingDocuments(this.number); this.ensureScope(); this.snapshot = value; await this.previews() }) },
-    async choose(slot) {
+    async refreshFacts() {
+      this.needsRefresh = true
+      const value = await getLoadingDocuments(this.number); this.ensureScope()
+      this.snapshot = value; this.needsRefresh = false; await this.previews()
+    },
+    async load() { await this.run(() => this.refreshFacts()) },
+    async choose(slot, replaceFileId = null) {
       if (this.busy || !this.editable) return
+      const capacity = replaceFileId ? 1 : this.limit - this.photosFor(slot).length
+      if (capacity <= 0) return
+      let saved = 0, reconciled = false
       await this.run(async () => {
-        const chosen = await uni.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['camera', 'album'] }); this.ensureScope()
-        const filePath = chosen.tempFilePaths?.[0]; if (!filePath) return
-        if (chosen.tempFiles?.[0]?.size > 10 * 1024 * 1024) throw new Error('请选择不超过10MiB的图片')
-        const photo = await uploadLoadingPhoto(this.number, slot, filePath, this.key()); this.ensureScope()
-        if (photo?.slot !== slot || !photo.fileId) throw new Error('上传结果与装车照片框不一致')
-        const latest = await getLoadingDocuments(this.number); this.ensureScope(); this.snapshot = latest
-        if (!this.editable) throw new Error('当前任务不可修改装车照片，请刷新任务查看')
-        const value = await bindLoadingPhoto(this.number, slot, { recordVersion: latest.recordVersion, idempotencyKey: this.key(), fileId: photo.fileId }); this.ensureScope()
-        this.snapshot = value; await this.previews()
-        uni.showToast({ title: value.stage === 'DELIVERING' && value.complete ? '资料齐全，已进入派送中' : '装车照片已保存', icon: 'none' })
-        return true
-      }, true)
+        const chosen = await uni.chooseImage({ count: capacity, sizeType: ['compressed'], sourceType: ['camera', 'album'] }); this.ensureScope()
+        const paths = chosen.tempFilePaths || []; if (!paths.length) return
+        if (paths.length > capacity) throw new Error(`本次最多可选择${capacity}张图片`)
+        if (chosen.tempFiles?.some(file => file.size > 10 * 1024 * 1024)) throw new Error('请选择不超过10MiB的图片')
+        // 逐张以最新版本绑定；部分失败保留前面已保存照片，不重放失败上传。
+        for (const filePath of paths) {
+          const photo = await uploadLoadingPhoto(this.number, slot, filePath, this.key()); this.ensureScope()
+          if (photo?.slot !== slot || !photo.fileId) throw new Error('上传结果与装车照片框不一致')
+          const latest = await getLoadingDocuments(this.number); this.ensureScope(); this.snapshot = latest
+          if (!this.editable) throw new Error('当前任务不可修改装车照片，请刷新任务查看')
+          try {
+            const value = await bindLoadingPhoto(this.number, slot, { recordVersion: latest.recordVersion, idempotencyKey: this.key(), fileId: photo.fileId, ...(replaceFileId ? { replaceFileId } : {}) }); this.ensureScope()
+            this.snapshot = value
+          } catch (cause) {
+            // 保存可能已成功；只重读最新事实，失败时必须先刷新再继续。
+            try {
+              await this.refreshFacts()
+              reconciled = this.snapshot.recordVersion !== latest.recordVersion || this.snapshot.dispatchRecordVersion !== latest.dispatchRecordVersion || this.snapshot.stage !== latest.stage
+            } catch { /* 保留原错误与刷新入口。 */ }
+            throw cause
+          }
+          saved++; await this.previews()
+        }
+        uni.showToast({ title: this.snapshot.stage === 'DELIVERING' && this.snapshot.complete ? '资料齐全，已进入派送中' : `已保存${saved}张照片`, icon: 'none' })
+      })
+      if ((saved || reconciled) && this.active) this.$emit('saved')
     },
     preview(url) { uni.previewImage({ current: url, urls: [url] }) },
     async run(work, notify = false) {
@@ -103,6 +129,7 @@ export default {
 .photo-preview { box-sizing: border-box; width: calc(33.333% - 12rpx); min-width: 128rpx; padding: 8rpx; border: 2rpx solid #dbe5ef; border-radius: 16rpx; background: #fff; }
 .photo-thumbnail { display: block; width: 100%; height: 136rpx; border-radius: 12rpx; background: #e7edf5; }
 .photo-preview-caption { display: block; overflow: hidden; margin-top: 8rpx; color: #64748b; font-size: 18rpx; line-height: 28rpx; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
+.photo-replace { margin: 8rpx 0 0; padding: 0; color: #174d91; font-size: 22rpx; line-height: 64rpx; background: #eef5ff; }
 .photo-read-retry { display: flex; box-sizing: border-box; width: 100%; min-height: 136rpx; margin: 0; padding: 12rpx; align-items: center; justify-content: center; border: 0; border-radius: 12rpx; color: #174d91; font-size: 20rpx; line-height: 30rpx; background: #e7edf5; }
 .error { margin-top: 16rpx; padding: 12rpx 16rpx; border-radius: 14rpx; color: #b91c1c; background: #fff1f0; }
 .error text { display: block; font-size: 22rpx; line-height: 34rpx; overflow-wrap: anywhere; }