优化

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, ref, watch, onBeforeUnmount } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getRelabel, downloadRelabelDocument, type RelabelDetail } from '../api/warehouseServices'
+const props = defineProps<{ relabelNo: string; detail?: RelabelDetail | null }>()
+const loaded = ref<RelabelDetail | null>(null)
+const loading = ref(false)
+const error = ref('')
+const busy = ref(false)
+const previewUrl = ref('')
+const previewOpen = ref(false)
+const previewTitle = ref('')
+let generation = 0
+const current = computed(() => props.detail || loaded.value)
+/** 各申请分别加载，失败只影响资料区，不阻断订单详情。 */
+async function load() {
+  const ticket = ++generation
+  loaded.value = null; error.value = ''
+  if (props.detail || !props.relabelNo) { loading.value = false; return }
+  loading.value = true
+  try { const result = await getRelabel(props.relabelNo); if (ticket === generation) loaded.value = result }
+  catch (cause) { if (ticket === generation) error.value = cause instanceof Error ? cause.message : '贴标资料加载失败' }
+  finally { if (ticket === generation) loading.value = false }
+}
+watch(() => [props.relabelNo, props.detail], () => { clearPreview(); void load() }, { immediate: true })
+interface DocumentRow { key: string; kind: string; fileId: string; fileName: string; scope: string; itemId?: string; context?: string }
+const documents = computed<DocumentRow[]>(() => {
+  const result: DocumentRow[] = []
+  const application = current.value?.application
+  if (!application) return result
+  // 旧总文件仅作为兼容回显，避免与已分类型的总文件重复展示。
+  const add = (kind: string, id: string | null | undefined, name: string | null | undefined, scope: string, itemId?: string, context?: string) => {
+    if (id) result.push({ key: scope + ':' + (itemId || '') + ':' + id, kind, fileId: id, fileName: name || '未命名文件', scope, itemId, context })
+  }
+  add('箱唛总文件', application.cartonTotalFileId, application.cartonTotalFileName, 'CARTON_TOTAL')
+  add('SKU 标签总文件', application.skuTotalFileId, application.skuTotalFileName, 'SKU_TOTAL')
+  if (application.totalFileId !== application.cartonTotalFileId && application.totalFileId !== application.skuTotalFileId)
+    add('贴标总文件', application.totalFileId, application.totalFileName, 'TOTAL')
+  add('面单文件', application.shippingLabelFileId, application.shippingLabelFileName, 'SHIPPING')
+  for (const item of current.value?.items || []) add('明细文件', item.relabelFileId, item.relabelFileName, 'ITEM', String(item.id), [item.cartonMark, item.skuCode].filter(Boolean).join(' / '))
+  return result
+})
+/** 切换申请及关闭预览时释放文件对象。 */
+function clearPreview() { if (previewUrl.value) URL.revokeObjectURL(previewUrl.value); previewUrl.value = ''; previewOpen.value = false }
+/** 使用带身份认证的下载接口，预览和保存共享同一归属校验。 */
+async function openFile(key: string, download = false) {
+  const row = documents.value.find(document => document.key === key)
+  if (!row || busy.value) return
+  busy.value = true
+  const ticket = generation
+  try {
+    const blob = await downloadRelabelDocument(props.relabelNo, row.fileId, row.scope, row.itemId)
+    if (ticket !== generation) return
+    if (download) {
+      const url = URL.createObjectURL(blob); const link = document.createElement('a')
+      link.href = url; link.download = row.fileName; link.click(); window.setTimeout(() => URL.revokeObjectURL(url), 1000)
+    } else { clearPreview(); previewUrl.value = URL.createObjectURL(blob); previewTitle.value = row.fileName; previewOpen.value = true }
+  } catch (cause) { ElMessage.error(cause instanceof Error ? cause.message : '文件读取失败，请重试') }
+  finally { busy.value = false }
+}
+onBeforeUnmount(() => { ++generation; clearPreview() })
+</script>
+<template>
+  <section class="relabel-documents" aria-label="客户上传的贴标文件">
+    <h3>贴标文件<span v-if="relabelNo"> · {{ relabelNo }}</span></h3>
+    <p v-if="loading">资料加载中…</p>
+    <p v-else-if="error" role="alert">{{ error }} <el-button link type="primary" @click="load">重试</el-button></p>
+    <el-table v-else :data="documents" row-key="key" border empty-text="暂无上传的贴标文件">
+      <el-table-column prop="kind" label="文件类型" width="150" />
+      <el-table-column prop="context" label="对应箱唛 / SKU" min-width="180" />
+      <el-table-column prop="fileName" label="文件名称" min-width="240" />
+      <el-table-column label="操作" width="150"><template #default="{ row }"><el-button link type="primary" :disabled="busy" @click="openFile(String(row.key))">查看</el-button><el-button link type="primary" :disabled="busy" @click="openFile(String(row.key), true)">下载</el-button></template></el-table-column>
+    </el-table>
+    <el-dialog v-model="previewOpen" :title="previewTitle" width="80%" append-to-body @closed="clearPreview"><iframe v-if="previewUrl" :src="previewUrl" :title="previewTitle" class="relabel-document-preview" /></el-dialog>
+  </section>
+</template>
+<style scoped>
+.relabel-documents { margin: 16px 0; }
+.relabel-documents h3 { margin: 0 0 12px; font-size: 14px; }
+.relabel-documents h3 span { font-weight: 400; }
+.relabel-document-preview { width: 100%; height: 70vh; border: 0; }
+</style>