优化提交

src/modules/overseas-warehouse/pages/RelabelOrderDetailView.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, onBeforeUnmount } from 'vue'
+import { Eye, FileUp } from '@lucide/vue'
+import { ElMessage } from 'element-plus'
 import { useRoute, useRouter } from 'vue-router'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
-import { getRelabelOrder, type RelabelDetailDto } from '../api/relabelOrders'
+import { downloadRelabelPdf, getRelabelOrder, uploadRelabelPdf, type RelabelDetailDto } from '../api/relabelOrders'
 import { formatOverseasDateTime } from '../lastMilePresentation'
 import OverseasReadOnlyDetail from '../components/OverseasReadOnlyDetail.vue'
+import AppDialog from '@/shared/components/AppDialog.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -14,6 +17,10 @@ const orderId = computed(() => String(route.params.orderId || ''))
 const detail = ref<RelabelDetailDto | null>(null)
 const loading = ref(false)
 const loadError = ref<ApiErrorDetails | null>(null)
+const uploading = ref(false)
+const previewUrl = ref('')
+const previewTitle = ref('')
+const previewOpen = ref(false)
 const groups = [
   { title: '单据信息', fields: ['换标单号', '关联订单', '状态', '资金状态', '创建时间', '更新时间'] },
   { title: '商品信息', fields: ['商品SKU', '中文品名', '箱数', '预算总价'] },
@@ -57,19 +64,36 @@ async function load() {
 }
 function back() { void router.push({ name: 'overseas-relabel-orders' }) }
 onMounted(load)
+onBeforeUnmount(() => { if (previewUrl.value) URL.revokeObjectURL(previewUrl.value) })
+async function uploadPdf(event: Event, scope: 'TOTAL' | 'ITEM', itemId?: string) {
+  const input = event.target as HTMLInputElement; const file = input.files?.[0]; input.value = ''
+  if (!file || !detail.value) return
+  if (file.type !== 'application/pdf' && !file.name.toLowerCase().endsWith('.pdf')) { ElMessage.warning('只支持PDF文件'); return }
+  if (file.size > 50 * 1024 * 1024) { ElMessage.warning('PDF文件不能超过50MB'); return }
+  uploading.value = true
+  try { detail.value = await uploadRelabelPdf(orderId.value, file, scope, itemId); ElMessage.success(scope === 'TOTAL' ? '总PDF上传成功' : '明细PDF上传成功') }
+  catch (error) { ElMessage.error(getApiErrorDetails(error, 'PDF上传失败').message) }
+  finally { uploading.value = false }
+}
+async function previewPdf(fileId: string | null | undefined, name: string, scope: 'TOTAL' | 'ITEM', itemId?: string) {
+  if (!fileId) return
+  try { const blob = await downloadRelabelPdf(orderId.value, fileId, scope, itemId); if (previewUrl.value) URL.revokeObjectURL(previewUrl.value); previewUrl.value = URL.createObjectURL(blob); previewTitle.value = name; previewOpen.value = true }
+  catch (error) { ElMessage.error(getApiErrorDetails(error, 'PDF预览加载失败').message) }
+}
 </script>
 
 <template>
   <OverseasReadOnlyDetail title="换标单详情" reference-label="换标单号" :reference-value="referenceValue" back-label="返回换标单" domain="换标单详情" :groups="groups" :field-values="fieldValues" :pending="false" :status-text="detail ? status(detail.application.status) : '加载中'" :loading="loading" :show-content="!loadError" @back="back">
     <template #state><LoadErrorState v-if="loadError" title="换标单详情加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template>
     <template #content-after>
+      <section class="relabel-document-panel" aria-label="总换标文件"><div class="relabel-mark-list__head"><h2>总换标 PDF</h2><label class="file-picker"><FileUp :size="15" />{{ uploading ? '上传中' : (detail?.application.totalFileName ? '更换PDF' : '上传PDF') }}<input type="file" accept="application/pdf,.pdf" :disabled="uploading" @change="uploadPdf($event, 'TOTAL')" /></label></div><div v-if="detail?.application.totalFileId" class="document-row"><strong>{{ detail.application.totalFileName }}</strong><el-button size="small" plain @click="previewPdf(detail.application.totalFileId, detail.application.totalFileName || '总换标PDF', 'TOTAL')"><Eye :size="14" />直接预览</el-button></div><div v-else class="attachment-empty">暂未上传总换标PDF</div></section>
       <section class="relabel-mark-list" aria-label="箱唛换标信息">
         <div class="relabel-mark-list__head"><h2>箱唛换标信息</h2><span>共 {{ detail?.items.length || 0 }} 条</span></div>
         <div class="relabel-mark-list__scroll">
           <table>
-            <thead><tr><th>我方箱唛</th><th>FBA 箱唛</th><th>商品 SKU</th><th>中文品名</th><th>FBA 货件编号</th><th>换标新 SKU</th><th>目的仓</th><th>备注</th></tr></thead>
+            <thead><tr><th>我方箱唛</th><th>FBA 箱唛</th><th>商品 SKU</th><th>中文品名</th><th>FBA 货件编号</th><th>换标新 SKU</th><th>目的仓</th><th>明细PDF</th></tr></thead>
             <tbody>
-              <tr v-for="item in detail?.items || []" :key="item.id"><td class="mark-code">{{ text(item.cartonMark) }}</td><td class="mark-code">{{ text(item.fbaCartonMark) }}</td><td>{{ text(item.skuCode) }}</td><td>{{ text(item.productNameZh) }}</td><td>{{ text(item.shipmentNo) }}</td><td>{{ text(item.newSkuCode) }}</td><td>{{ text(item.destinationWarehouseId) }}</td><td>{{ text(item.remark) }}</td></tr>
+              <tr v-for="item in detail?.items || []" :key="item.id"><td class="mark-code">{{ text(item.cartonMark) }}</td><td class="mark-code">{{ text(item.fbaCartonMark) }}</td><td>{{ text(item.skuCode) }}</td><td>{{ text(item.productNameZh) }}</td><td>{{ text(item.shipmentNo) }}</td><td>{{ text(item.newSkuCode) }}</td><td>{{ text(item.destinationWarehouseId) }}</td><td><span v-if="item.relabelFileName" class="document-actions"><strong>{{ item.relabelFileName }}</strong><el-button size="small" link type="primary" @click="previewPdf(item.relabelFileId, item.relabelFileName, 'ITEM', item.id)"><Eye :size="14" />预览</el-button></span><label v-else class="inline-file-picker"><FileUp :size="14" />上传<input type="file" accept="application/pdf,.pdf" :disabled="uploading" @change="uploadPdf($event, 'ITEM', item.id)" /></label></td></tr>
               <tr v-if="!detail?.items.length"><td class="empty-cell" colspan="8">暂无箱唛换标信息</td></tr>
             </tbody>
           </table>
@@ -77,6 +101,7 @@ onMounted(load)
       </section>
     </template>
   </OverseasReadOnlyDetail>
+  <AppDialog v-if="previewUrl" v-model="previewOpen" :title="previewTitle" width="min(900px, calc(100vw - 28px))" :show-footer="false"><div class="pdf-preview"><iframe :src="previewUrl" :title="`${previewTitle}预览`" /></div></AppDialog>
 </template>
 
 <style scoped>
@@ -91,5 +116,12 @@ td { min-height: 46px; padding: 12px; border-bottom: 1px solid var(--cc-border);
 tbody tr:last-child td { border-bottom: 0; }
 tbody tr:hover td { background: #fafcff; }
 .mark-code { color: #245b9e; font-weight: 600; }
+.relabel-document-panel { grid-column: 1 / -1; padding: 18px; border-bottom: 1px solid var(--cc-border); }
+.document-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--cc-border); border-radius:6px; }
+.file-picker, .inline-file-picker { display:inline-flex; align-items:center; gap:5px; color:var(--el-color-primary); cursor:pointer; }
+.file-picker input, .inline-file-picker input { display:none; }
+.document-actions { display:inline-flex; align-items:center; gap:8px; }
+.pdf-preview { overflow:hidden; border:1px solid var(--cc-border); border-radius:6px; background:#f5f7fa; }
+.pdf-preview iframe { display:block; width:100%; height:min(72vh,760px); border:0; background:#fff; }
 .empty-cell { height: 96px; color: var(--cc-muted); text-align: center; }
 </style>