优化

2026-10-21 17:28:04 +08:00
parent 5e8daad5a0
commit fde16235ea
12 changed files with 233 additions and 62 deletions
@@ -10,12 +10,13 @@ import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import { ApiResponseError, getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import { getDispatchEvidence, getDispatchEvidenceContent, uploadDispatchEvidence } from '../api/dispatches'
 import { DispatchInputError, type DispatchEvidenceFile, type DispatchEvidenceKind } from '../dispatchContracts'
-const props = defineProps<{ dispatchNo: string; kind: DispatchEvidenceKind; disabled?: boolean; readonly?: boolean; label?: string; saveHint?: string; referenceIds?: string[] }>()
+const props = defineProps<{ dispatchNo: string; kind: DispatchEvidenceKind; disabled?: boolean; readonly?: boolean; photoCard?: boolean; label?: string; saveHint?: string; referenceIds?: string[] }>()
 const ids = defineModel<string[]>({ required: true })
 const allIds = computed(() => [...new Set([...(props.referenceIds || []), ...ids.value])])
 const emit = defineEmits<{ busy: [value: boolean] }>()
 const metadata = ref<Record<string, DispatchEvidenceFile>>({}), error = ref<ApiErrorDetails | null>(null), uploading = ref(false), input = ref<HTMLInputElement | null>(null)
 const imageOpen = ref(false), imageUrl = ref(''), imageName = ref(''), previewLoading = ref(false)
+const thumbnails = ref<Record<string, string>>({})
 const label = computed(() => props.label || (props.kind === 'VEHICLE' ? '本趟车辆证据' : props.kind === 'DRIVER_PHOTO' ? '司机照片' : '本趟司机证照'))
 const types = ['application/pdf', 'image/jpeg', 'image/png'], maximum = 10 * 1024 * 1024, urls = new Set<string>()
 const uploadTypes = computed(() => ['DRIVER_PHOTO', 'EXCEPTION'].includes(props.kind) ? types.slice(1) : types)
@@ -29,11 +30,22 @@ function fail(cause: unknown, fallback: string) { error.value = getApiErrorDetai
 function closePreview() { previewGeneration++; pendingPopup?.close(); pendingPopup = null; imageOpen.value = false; previewLoading.value = false; if (imageUrl.value) { URL.revokeObjectURL(imageUrl.value); urls.delete(imageUrl.value); imageUrl.value = '' } }
 async function load() {
  const current = ++generation, no = props.dispatchNo, kind = props.kind, values = [...allIds.value]
+  for (const url of Object.values(thumbnails.value)) { URL.revokeObjectURL(url); urls.delete(url) }
+  thumbnails.value = {}
  closePreview(); metadata.value = {}; error.value = null
  if (!no) return
  const results = await Promise.allSettled(values.map(async id => valid(await getDispatchEvidence(no, kind, id), id)))
  if (current !== generation) return
  results.forEach(result => { if (result.status === 'fulfilled') metadata.value[result.value.fileId] = result.value; else fail(result.reason, '附件资料读取失败，请重试；原引用已保留') })
+  if (props.photoCard) await Promise.all(values.map(async id => {
+    const file = metadata.value[id]
+    if (!file || !file.contentType.startsWith('image/')) return
+    try {
+      const blob = await readContent(no, kind, id, file)
+      if (current !== generation) return
+      const url = URL.createObjectURL(blob); urls.add(url); thumbnails.value[id] = url
+    } catch (cause) { if (current === generation) fail(cause, '照片读取失败，请重试') }
+  }))
 }
 function choose(id: string | null = null) { if (props.readonly || props.disabled || uploading.value || !props.dispatchNo) return; replacing = id; input.value?.click() }
 async function upload(event: Event) {
@@ -52,6 +64,17 @@ async function upload(event: Event) {
  finally { uploading.value = false; emit('busy', false) }
 }
 function remove(id: string) { if (!props.readonly && !props.disabled && !uploading.value) ids.value = ids.value.filter(value => value !== id) }
+async function readContent(no: string, kind: DispatchEvidenceKind, id: string, file: DispatchEvidenceFile) {
+  const blob = await getDispatchEvidenceContent(no, kind, id)
+  const type = blob.type.split(';')[0]?.toLowerCase()
+  if (type?.includes('json')) {
+    let body: Partial<{ code: string; message: string; requestId: string; traceId: string }>
+    try { body = JSON.parse(await blob.text()) as typeof body } catch { throw new DispatchInputError('附件内容返回错误信息，请重新读取') }
+    throw new ApiResponseError(body.message || '附件读取失败', body.code || 'INVALID_FILE_CONTENT', undefined, undefined, body.requestId, body.traceId)
+  }
+  if (type !== file.contentType || blob.size <= 0 || blob.size > maximum || blob.size !== file.sizeBytes) throw new DispatchInputError('附件内容类型或大小与本车元数据不一致')
+  return blob
+}
 async function preview(id: string) {
  const file = metadata.value[id]; if (!file || previewLoading.value) return
  closePreview(); const current = ++previewGeneration, scope = generation
@@ -59,15 +82,8 @@ async function preview(id: string) {
  if (file.contentType === 'application/pdf') { pendingPopup = window.open('', '_blank'); if (!pendingPopup) { previewLoading.value = false; fail(new DispatchInputError('请允许本站打开PDF预览窗口'), 'PDF预览未打开'); return } }
  else { imageName.value = file.fileName; imageOpen.value = true }
  try {
-    const blob = await getDispatchEvidenceContent(props.dispatchNo, props.kind, id)
+    const blob = await readContent(props.dispatchNo, props.kind, id, file)
    if (current !== previewGeneration || scope !== generation) return
-    const type = blob.type.split(';')[0]?.toLowerCase()
-    if (type?.includes('json')) {
-      let body: Partial<{ code: string; message: string; requestId: string; traceId: string }>
-      try { body = JSON.parse(await blob.text()) as typeof body } catch { throw new DispatchInputError('附件内容返回错误信息，请重新读取') }
-      throw new ApiResponseError(body.message || '附件读取失败', body.code || 'INVALID_FILE_CONTENT', undefined, undefined, body.requestId, body.traceId)
-    }
-    if (type !== file.contentType || blob.size <= 0 || blob.size > maximum || blob.size !== file.sizeBytes) throw new DispatchInputError('附件内容类型或大小与本车元数据不一致')
    const url = URL.createObjectURL(blob); urls.add(url)
    if (file.contentType === 'application/pdf') { pendingPopup!.location.href = url; pendingPopup = null; window.setTimeout(() => { URL.revokeObjectURL(url); urls.delete(url) }, 60_000) }
    else imageUrl.value = url
@@ -78,10 +94,22 @@ watch(() => JSON.stringify([props.dispatchNo, props.kind, allIds.value]), load,
 onBeforeUnmount(() => { generation++; closePreview(); for (const url of urls) URL.revokeObjectURL(url); urls.clear(); emit('busy', false) })
 </script>
 <template>
-  <section class="dispatch-evidence density-dialog-section" data-tone="source" :class="{ 'dispatch-evidence--readonly': readonly }" :aria-label="label"><h4 class="density-dialog-section__title">{{ label }}<InlineHelp title="附件上传说明"><p>{{ uploadFormats }}，单文件最大10MiB；{{ saveHint || '上传后保存车辆信息才完成本车引用。' }}</p></InlineHelp></h4>
+  <section class="dispatch-evidence density-dialog-section" data-tone="source" :class="{ 'dispatch-evidence--readonly': readonly }" :aria-label="label"><h4 v-if="!photoCard" class="density-dialog-section__title">{{ label }}<InlineHelp title="附件上传说明"><p>{{ uploadFormats }}，单文件最大10MiB；{{ saveHint || '上传后保存车辆信息才完成本车引用。' }}</p></InlineHelp></h4>
    <LoadErrorState v-if="error" title="本趟附件操作未完成" :message="error.message" compact retry-text="重新读取资料" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
-    <table v-if="allIds.length" class="density-table dispatch-evidence-table"><thead><tr><th class="dispatch-evidence__actions">操作</th><th>附件名称</th></tr></thead><tbody><tr v-for="id in allIds" :key="id"><td class="dispatch-evidence__actions"><div class="density-actions"><el-button link :disabled="!metadata[id] || previewLoading" @click="preview(id)">预览</el-button><template v-if="!readonly && ids.includes(id)"><el-button link :disabled="disabled || uploading" @click="choose(id)">替换</el-button><el-button link :disabled="disabled || uploading" @click="remove(id)">移除引用</el-button></template></div></td><td><LineClampText :content="metadata[id]?.fileName || '附件资料待核实'" /></td></tr></tbody></table>
-    <p v-else class="density-dialog-note">暂无本趟附件。</p>
+    <figure v-if="photoCard" class="evidence-photo-card">
+      <div v-if="allIds.length" class="evidence-photo-list">
+        <div v-for="id in allIds" :key="id">
+          <button type="button" class="evidence-photo-preview" :aria-label="'预览' + label + '：' + (metadata[id]?.fileName || id)" :disabled="!metadata[id] || previewLoading" @click="preview(id)"><img v-if="thumbnails[id]" :src="thumbnails[id]" :alt="label + '：' + metadata[id]?.fileName"><span v-else>{{ metadata[id]?.contentType === 'application/pdf' ? '查看 PDF' : '照片待加载' }}</span></button>
+          <div v-if="!readonly && ids.includes(id)" class="density-actions"><el-button link :disabled="disabled || uploading" @click="choose(id)">替换</el-button><el-button link :disabled="disabled || uploading" @click="remove(id)">移除引用</el-button></div>
+        </div>
+      </div>
+      <div v-else class="evidence-photo-empty">暂无照片</div>
+      <figcaption>{{ label }}<InlineHelp v-if="!readonly" title="附件上传说明"><p>{{ uploadFormats }}，单文件最大10MiB；{{ saveHint || '上传后保存车辆信息才完成本车引用。' }}</p></InlineHelp></figcaption>
+    </figure>
+    <template v-else>
+      <table v-if="allIds.length" class="density-table dispatch-evidence-table"><thead><tr><th class="dispatch-evidence__actions">操作</th><th>附件名称</th></tr></thead><tbody><tr v-for="id in allIds" :key="id"><td class="dispatch-evidence__actions"><div class="density-actions"><el-button link :disabled="!metadata[id] || previewLoading" @click="preview(id)">预览</el-button><template v-if="!readonly && ids.includes(id)"><el-button link :disabled="disabled || uploading" @click="choose(id)">替换</el-button><el-button link :disabled="disabled || uploading" @click="remove(id)">移除引用</el-button></template></div></td><td><LineClampText :content="metadata[id]?.fileName || '附件资料待核实'" /></td></tr></tbody></table>
+      <p v-else class="density-dialog-note">暂无本趟附件。</p>
+    </template>
    <template v-if="!readonly"><input ref="input" class="evidence-input" type="file" :accept="uploadTypes.join(',')" :aria-label="'上传' + label" :disabled="disabled || uploading || !dispatchNo" @change="upload"><el-button :disabled="disabled || uploading || !dispatchNo" :loading="uploading" @click="choose()">上传{{ label }}</el-button></template>
    <AppDialog append-to-body class="admin-density-dialog admin-workbench is-dialog" :model-value="imageOpen" :title="imageName || '附件预览'" width="min(900px, calc(100vw - 28px))" fullscreenable :loading="previewLoading" :show-confirm="false" cancel-text="关闭" @update:model-value="closePreview">
      <div class="density-dialog-sections"><section class="density-dialog-section" data-tone="source" aria-label="本车附件预览信息"><h3 class="density-dialog-section__title">附件信息</h3><table class="density-table"><tbody><tr><th scope="row">排车单号</th><td>{{ dispatchNo || '—' }}</td></tr><tr><th scope="row">附件名称</th><td>{{ imageName || '—' }}</td></tr></tbody></table></section><p v-if="previewLoading" class="density-dialog-note" role="status">正在读取本车附件…</p><img v-if="imageUrl" class="evidence-image" :src="imageUrl" :alt="imageName"></div>
@@ -95,4 +123,10 @@ onBeforeUnmount(() => { generation++; closePreview(); for (const url of urls) UR
 .dispatch-evidence > .el-button { margin-top: var(--admin-space-3); }
 .evidence-input { display: none; }
 .evidence-image { display: block; max-width: 100%; max-height: 72vh; margin: auto; object-fit: contain; }
+.evidence-photo-card { margin: 0; text-align: center; }
+.evidence-photo-list { display: grid; gap: var(--admin-space-3); }
+.evidence-photo-preview, .evidence-photo-empty { box-sizing: border-box; width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--el-border-color-lighter); border-radius: var(--el-border-radius-base); color: var(--el-text-color-secondary); }
+.evidence-photo-preview { padding: 0; cursor: pointer; }
+.evidence-photo-preview img { width: 100%; height: 100%; object-fit: contain; }
+.evidence-photo-card figcaption { margin-top: var(--admin-space-3); font-weight: 600; }
 </style>