优化

src/modules/overseas-warehouse/components/DispatchLoadingDocuments.vue

@@ -94,22 +94,31 @@ defineExpose({ busy })
     <p v-if="snapshot?.stage === 'AFTER_LOADING'">请上传 5 张装车照片，全部保存成功后自动进入派送中。</p>
     <LoadErrorState v-if="error" compact title="装车资料操作失败" :message="error.message" :show-retry="!pending && !corrupted" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
     <div v-if="pending" role="status">有装车照片尚未确认保存。<el-button :disabled="busy || !editable" @click="recover">{{ pending.conflict ? '刷新并重试保存' : '核对原请求并继续保存' }}</el-button></div>
-    <div class="loading-photo-grid">
-      <section v-for="(slot, index) in loadingPhotoSlots" :key="slot" class="density-dialog-section loading-photo-card">
-        <h3 class="density-dialog-section__title">装车照片 {{ index + 1 }}</h3>
-        <template v-for="photo in snapshot?.photos.filter(item => item.slot === slot) || []" :key="photo.fileId">
+    <table class="density-table loading-documents-table" aria-label="装车照片"><thead><tr><th class="photo-actions">操作</th><th class="photo-category">照片类别</th><th>文件名称</th><th class="photo-preview">图片预览</th><th class="photo-time">保存时间</th></tr></thead><tbody>
+      <tr v-for="(slot, index) in loadingPhotoSlots" :key="slot">
+        <td><label v-if="editable" class="photo-upload" :class="{ 'is-disabled': busy || Boolean(pending) }">上传／替换<input type="file" accept="image/jpeg,image/png" :aria-label="`装车照片 ${index + 1}`" :disabled="busy || Boolean(pending)" @change="upload(slot, $event)" /></label><span v-else>—</span></td>
+        <td>装车照片 {{ index + 1 }}</td>
+        <td><div v-for="photo in snapshot?.photos.filter(item => item.slot === slot) || []" :key="photo.fileId">{{ photo.fileName }}</div><span v-if="!snapshot?.photos.some(item => item.slot === slot)">未上传</span></td>
+        <td><template v-for="photo in snapshot?.photos.filter(item => item.slot === slot) || []" :key="photo.fileId">
           <el-image v-if="images[photo.fileId]" :src="images[photo.fileId]" :preview-src-list="[images[photo.fileId]!]" fit="contain" class="loading-photo-image" preview-teleported />
           <el-button v-else link :disabled="busy" @click="load">图片读取失败，点击重试</el-button>
-        </template>
-        <div v-if="!snapshot?.photos.some(item => item.slot === slot)" class="loading-photo-empty">未上传</div>
-        <label v-if="editable">上传／替换图片<input type="file" accept="image/jpeg,image/png" :aria-label="`装车照片 ${index + 1}`" :disabled="busy || Boolean(pending)" @change="upload(slot, $event)" /></label>
-      </section>
-    </div>
+        </template><span v-if="!snapshot?.photos.some(item => item.slot === slot)">—</span></td>
+        <td><div v-for="photo in snapshot?.photos.filter(item => item.slot === slot) || []" :key="photo.fileId">{{ photo.savedAt?.replace('T', ' ') || '—' }}</div><span v-if="!snapshot?.photos.some(item => item.slot === slot)">—</span></td>
+      </tr>
+    </tbody></table>
   </div>
 </template>
 <style scoped>
-.loading-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-4); }
-.loading-photo-image, .loading-photo-empty { width: 100%; height: 150px; margin-bottom: var(--admin-space-3); }
-.loading-photo-empty { display: grid; place-items: center; background: var(--cc-bg-soft, #f3f7ff); color: var(--cc-text-secondary, #64748b); }
-.loading-photo-card input { display: block; margin-top: var(--admin-space-2); max-width: 100%; }
+.loading-documents-table { table-layout: fixed; }
+.loading-documents-table td { overflow-wrap: anywhere; }
+.photo-actions { width: 110px; }
+.photo-category { width: 120px; }
+.photo-preview { width: 140px; }
+.photo-time { width: 190px; }
+.loading-photo-image { display: block; width: 100px; height: 64px; }
+.photo-upload { position: relative; display: inline-flex; color: var(--el-color-primary); cursor: pointer; }
+.photo-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
+.photo-upload:focus-within { outline: 2px solid var(--el-color-primary); outline-offset: 2px; }
+.photo-upload.is-disabled { color: var(--el-text-color-disabled); cursor: not-allowed; }
+.photo-upload.is-disabled input { cursor: not-allowed; }
 </style>