优化

src/api/overseasHttp.ts

@@ -65,3 +65,27 @@ export async function overseasApiRequest<T>(config: AxiosRequestConfig) {
     throw new ApiError(error instanceof Error ? error.message : '海外接口请求失败')
   }
 }
+
+export async function overseasBlobRequest(config: AxiosRequestConfig) {
+  try {
+    const response = await transport.request<Blob>({ ...config, responseType: 'blob' })
+    return response.data
+  } catch (error) {
+    if (error instanceof ApiError) throw error
+    if (axios.isAxiosError(error)) {
+      const body = error.response?.data
+      if (body instanceof Blob && body.type.includes('json')) {
+        try {
+          const parsed: unknown = JSON.parse(await body.text())
+          if (isApiEnvelope(parsed) || isApiFailure(parsed)) {
+            throw new ApiError(parsed.message, parsed.code, error.response?.status, undefined, parsed.traceId, parsed.requestId)
+          }
+        } catch (parseError) {
+          if (parseError instanceof ApiError) throw parseError
+        }
+      }
+      throw new ApiError(error.code === 'ERR_NETWORK' ? '无法连接海外服务' : error.message, error.code || 'OVERSEAS_HTTP_ERROR', error.response?.status)
+    }
+    throw new ApiError(error instanceof Error ? error.message : '海外文件下载失败')
+  }
+}

src/components.d.ts

@@ -33,6 +33,7 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']

src/modules/first-leg/views/businessIdentifiers.test.mjs

@@ -35,5 +35,5 @@ test('keeps overseas warehouse operations first and renders readable list values
   assert.match(overseas, /function formatDateTime\(value\?: string \| null\)/)
   assert.match(overseas, /import SingleLineText from '@\/components\/common\/SingleLineText\.vue'/)
   assert.match(overseas, /<SingleLineText :value="row\[String\(index\)\]"/)
-  assert.match(overseas, /<td><button class="warehouse-link"[^>]*>.*?查看<\/button><\/td><td v-for="\(_, index\) in config\.columns\.slice\(1\)"/s)
+  assert.match(overseas, /<td><div class="warehouse-list-actions"><button class="warehouse-link"[^>]*>.*?查看<\/button>.*?<\/div><\/td><td v-for="\(_, index\) in config\.columns\.slice\(1\)"/s)
 })

src/modules/overseas-warehouse/api/warehouseServices.ts

@@ -1,4 +1,4 @@
-import { overseasApiRequest } from '@/api/overseasHttp'
+import { overseasApiRequest, overseasBlobRequest } from '@/api/overseasHttp'
 
 export type RelabelDeliveryMethod = 'TRUCK' | 'EXPRESS' | 'TRUCK_PICKUP' | 'EXPRESS_PICKUP'
 
@@ -95,7 +95,7 @@ export function confirmRelabelCompletion(relabelNo: string, remark?: string) {
   return overseasApiRequest<RelabelDetail>({ method: 'POST', url: `/merchant/v1/last-leg/relabel-applications/${encodeURIComponent(relabelNo)}/confirm-completion`, data: { idempotencyKey: crypto.randomUUID(), remark } })
 }
 export function downloadRelabelCompletionPhoto(relabelNo: string, fileId: string) {
-  return overseasApiRequest<Blob>({ method: 'GET', url: `/merchant/v1/last-leg/relabel-applications/${encodeURIComponent(relabelNo)}/completion-photos/${encodeURIComponent(fileId)}/download`, responseType: 'blob' })
+  return overseasBlobRequest({ method: 'GET', url: `/merchant/v1/last-leg/relabel-applications/${encodeURIComponent(relabelNo)}/completion-photos/${encodeURIComponent(fileId)}/download` })
 }
 export function listDiscards(params: Record<string, unknown>) {
   return overseasApiRequest<PageResult<DiscardSummary>>({ method: 'GET', url: '/merchant/v1/last-leg/cargo-discards', params })

src/modules/overseas-warehouse/views/ReturnOrdersView.vue

@@ -15,7 +15,7 @@ const total = ref(0)
 const operationWarehouses = ref<MerchantWarehouse[]>([])
 const operationWarehousesLoading = ref(false)
 const operationWarehousesError = ref('')
-const query = reactive({ page: 1, size: 20, returnNo: '', trackingNo: '', skuCode: '', status: '' })
+const query = reactive({ page: 1, size: 15, returnNo: '', trackingNo: '', skuCode: '', status: '' })
 interface SkuDraft { id: number; skuCode: string; productNameZh: string; expectedQuantity: number }
 let skuSequence = 0
 function emptySku(): SkuDraft { return { id: ++skuSequence, skuCode: '', productNameZh: '', expectedQuantity: 1 } }
@@ -67,7 +67,7 @@ function addItem() { form.items.push(emptySku()) }
 function removeItem(index: number) { if (form.items.length > 1) form.items.splice(index, 1) }
 async function load() {
   loading.value = true
-  try { const response = await listReturnOrders({ ...query, returnNo: query.returnNo || undefined, trackingNo: query.trackingNo || undefined, skuCode: query.skuCode || undefined, status: query.status || undefined }); rows.value = response.records; total.value = Number(response.total) }
+  try { const response = await listReturnOrders({ ...query, returnNo: query.returnNo || undefined, trackingNo: query.trackingNo || undefined, skuCode: query.skuCode || undefined, status: query.status || undefined }); rows.value = response.records; total.value = Number(response.total); if (!Number.isFinite(total.value)) total.value = response.records.length }
   finally { loading.value = false }
 }
 function changePage(page: number) {
@@ -111,7 +111,7 @@ onMounted(() => { void Promise.all([load(), loadOperationWarehouses()]) })
       <el-select v-model="query.status" clearable placeholder="签收状态"><el-option label="待签收" value="PENDING_RECEIPT" /><el-option label="部分签收" value="PARTIALLY_RECEIVED" /><el-option label="已完成" value="COMPLETED" /></el-select>
       <el-button @click="query.page=1; load()"><Search :size="16" />查询</el-button>
     </div>
-    <el-table v-loading="loading" :data="rows" @row-click="row => openDetail(row.returnNo)">
+    <el-table v-loading="loading" class="return-table-card" :data="rows" @row-click="row => openDetail(row.returnNo)">
       <el-table-column label="操作" width="90" fixed="left"><template #default="{ row }"><el-button link type="primary" @click.stop="openDetail(row.returnNo)">详情</el-button></template></el-table-column>
       <el-table-column prop="returnNo" label="退货单号" min-width="190" />
       <el-table-column prop="customerReferenceNo" label="客户参考号" min-width="150" />
@@ -123,7 +123,7 @@ onMounted(() => { void Promise.all([load(), loadOperationWarehouses()]) })
       <el-table-column label="状态" width="130"><template #default="{ row }"><el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag></template></el-table-column>
       <el-table-column label="创建时间" min-width="180"><template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template></el-table-column>
     </el-table>
-    <el-pagination :current-page="query.page" :page-size="query.size" :total="total" layout="total, prev, pager, next" @current-change="changePage" />
+    <div class="return-pagination"><span class="return-pagination-total">共 {{ total }} 条</span><el-select v-model="query.size" class="return-page-size-select" aria-label="每页条数" @change="query.page=1; load()"><el-option v-for="size in [15, 30, 50, 100]" :key="size" :label="`${size}条/页`" :value="size" /></el-select><el-pagination :current-page="query.page" :page-size="query.size" :total="total" :hide-on-single-page="false" layout="prev, pager, next" @current-change="changePage" /></div>
 
     <el-dialog v-model="showCreate" title="新建退货预报" width="1120px" destroy-on-close>
       <el-form label-width="190px" class="return-create-form">
@@ -144,11 +144,34 @@ onMounted(() => { void Promise.all([load(), loadOperationWarehouses()]) })
       </el-table>
       <template #footer><el-button @click="showCreate=false">取消</el-button><el-button type="primary" :loading="creating" @click="submit">提交预报</el-button></template>
     </el-dialog>
-    <el-drawer v-model="showDetail" title="退货签收详情" size="760px"><template v-if="selected"><el-descriptions :column="2" border><el-descriptions-item label="退货单号">{{ selected.order.returnNo }}</el-descriptions-item><el-descriptions-item label="状态"><el-tag :type="statusType(selected.order.status)">{{ statusLabel(selected.order.status) }}</el-tag></el-descriptions-item><el-descriptions-item label="海外仓">{{ operationWarehouseLabel(selected.order.overseasWarehouseId) }}</el-descriptions-item><el-descriptions-item label="实收 / 预报">{{ selected.order.receivedQuantity }} / {{ selected.order.expectedQuantity }}</el-descriptions-item><el-descriptions-item label="海外仓联系人">{{ selected.order.warehouseContactName || '—' }}</el-descriptions-item><el-descriptions-item label="海外仓联系电话">{{ selected.order.warehouseContactPhone || '—' }}</el-descriptions-item></el-descriptions><p v-if="selected.remark" class="remark">备注：{{ selected.remark }}</p><h3>预报与实收</h3><el-table :data="selected.items" size="small"><el-table-column prop="skuCode" label="SKU" /><el-table-column prop="productNameZh" label="中文品名" /><el-table-column prop="expectedQuantity" label="预报" /><el-table-column prop="receivedQuantity" label="实收" /></el-table><h3>签收批次</h3><el-table :data="selected.receipts" size="small"><el-table-column prop="receiptBatchNo" label="批次号" min-width="170" /><el-table-column prop="receiptNo" label="签收单号" min-width="170" /><el-table-column prop="cartonMark" label="箱号" min-width="190" /><el-table-column prop="trackingNo" label="快递单号"><template #default="{ row }">{{ row.trackingNo || '无快递单号' }}</template></el-table-column><el-table-column label="开始方式"><template #default="{ row }">{{ startedByLabel(row.startedBy) }}</template></el-table-column><el-table-column prop="receivedQuantity" label="实收" /><el-table-column label="签收时间" min-width="180"><template #default="{ row }">{{ formatDateTime(row.signedAt) }}</template></el-table-column></el-table></template></el-drawer>
+    <el-dialog v-model="showDetail" title="退货签收详情" width="min(980px, calc(100vw - 32px))" top="8vh" class="return-detail-dialog" destroy-on-close>
+      <template v-if="selected">
+        <div class="detail-summary"><div><span>退货单号</span><strong>{{ selected.order.returnNo }}</strong></div><div><span>状态</span><el-tag :type="statusType(selected.order.status)">{{ statusLabel(selected.order.status) }}</el-tag></div><div><span>海外仓</span><strong>{{ operationWarehouseLabel(selected.order.overseasWarehouseId) }}</strong></div><div><span>实收 / 预报</span><strong>{{ selected.order.receivedQuantity }} / {{ selected.order.expectedQuantity }}</strong></div><div><span>海外仓联系人</span><strong>{{ selected.order.warehouseContactName || '—' }}</strong></div><div><span>联系电话</span><strong>{{ selected.order.warehouseContactPhone || '—' }}</strong></div></div>
+        <p v-if="selected.remark" class="remark detail-remark">备注：{{ selected.remark }}</p>
+        <section class="detail-section"><h3>预报与实收</h3><el-table :data="selected.items" size="small" border><el-table-column prop="skuCode" label="SKU" min-width="180" /><el-table-column prop="productNameZh" label="中文品名" min-width="220" /><el-table-column prop="expectedQuantity" label="预报" width="100" /><el-table-column prop="receivedQuantity" label="实收" width="100" /></el-table></section>
+        <section class="detail-section"><h3>签收批次</h3><el-table :data="selected.receipts" size="small" border><el-table-column prop="receiptBatchNo" label="批次号" min-width="160" /><el-table-column prop="receiptNo" label="签收单号" min-width="160" /><el-table-column prop="cartonMark" label="箱号" min-width="170" /><el-table-column prop="trackingNo" label="快递单号" min-width="150"><template #default="{ row }">{{ row.trackingNo || '无快递单号' }}</template></el-table-column><el-table-column label="开始方式" width="110"><template #default="{ row }">{{ startedByLabel(row.startedBy) }}</template></el-table-column><el-table-column prop="receivedQuantity" label="实收" width="80" /><el-table-column label="签收时间" min-width="170"><template #default="{ row }">{{ formatDateTime(row.signedAt) }}</template></el-table-column></el-table></section>
+      </template>
+      <template #footer><el-button type="primary" @click="showDetail = false">关闭</el-button></template>
+    </el-dialog>
   </section>
 </template>
 
 <style scoped>
 .return-orders-page { padding: 20px; } .page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; } h2 { margin:0; font-size:22px; } p { margin:6px 0 0; color:var(--el-text-color-secondary); } .filter-bar { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)) auto; gap:10px; margin-bottom:14px; } .return-create-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; } .return-form-wide { grid-column:1 / -1; } .items-title { display:flex; justify-content:space-between; align-items:center; margin:16px 0 4px; font-weight:600; } .items-hint { margin-bottom:10px; color:var(--el-text-color-secondary); font-size:12px; } .el-pagination { margin-top:16px; justify-content:flex-end; } h3 { margin:24px 0 10px; font-size:16px; } h4 { margin:16px 0 8px; font-size:14px; } .remark { white-space:pre-wrap; } .warehouse-error, .duplicate-sku-error { margin-top:6px; color:var(--el-color-danger); font-size:12px; } :deep(.duplicate-sku-input .el-input__wrapper) { box-shadow:0 0 0 1px var(--el-color-danger) inset; } :deep(.el-dialog .el-select) { width:100%; }
+.return-table-card { overflow:hidden; border:1px solid #e7ebf1; border-radius:4px; background:#fff; box-shadow:0 1px 3px rgba(25,42,70,.04); }
+.return-table-card :deep(.el-table) { width:100%; }
+.return-pagination { display:flex; justify-content:flex-end; padding:14px 18px; border-top:1px solid #eef1f5; }
+.return-pagination :deep(.el-pagination) { margin:0; }
+.return-pagination-total { color:#526176; font-size:14px; }
+.return-page-size-select { width:112px; margin-left:8px; }
+.return-page-size-select :deep(.el-input__inner), .return-page-size-select :deep(.el-select__selected-item) { color:#526176 !important; opacity:1 !important; -webkit-text-fill-color:#526176; }
+.detail-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 24px; padding:18px; border:1px solid #e5ebf3; border-radius:6px; background:#f8faff; }
+.detail-summary div { display:flex; min-width:0; flex-direction:column; gap:6px; }
+.detail-summary span { color:#7c899c; font-size:12px; }
+.detail-summary strong { overflow-wrap:anywhere; color:#26364f; font-size:14px; }
+.detail-remark { margin:14px 0 0; padding:10px 12px; border-left:3px solid #7aa7dc; background:#f7faff; color:#526176; }
+.detail-section h3 { margin:22px 0 10px; color:#26364f; font-size:15px; }
+.return-detail-dialog :deep(.el-dialog__body) { padding-top:4px; }
 @media (max-width: 760px) { .return-orders-page { padding:12px; } .page-heading { align-items:stretch; flex-direction:column; } .filter-bar { grid-template-columns:1fr 1fr; } }
+@media (max-width: 720px) { .detail-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .return-pagination { padding:12px; } }
 </style>

src/modules/overseas-warehouse/views/WarehouseServiceView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeft, Download, Eye, Plus, Printer, Search, Trash2, Upload } from '@lucide/vue'
 import SingleLineText from '@/components/common/SingleLineText.vue'
@@ -40,7 +40,7 @@ const configs: Record<ServiceType, ServiceConfig> = {
 }
 const config = computed(() => configs[props.service])
 const statusOptions = computed(() => props.service === 'labeling'
-  ? [{ label: '待处理', value: 'PENDING_PROCESSING' }, { label: '处理中', value: 'PROCESSING' }, { label: '待客户确认', value: 'CUSTOMER_CONFIRM_PENDING' }, { label: '待出库', value: 'READY_FOR_OUTBOUND' }, { label: '已完成', value: 'COMPLETED' }, { label: '已拒绝', value: 'REJECTED' }, { label: '已取消', value: 'CANCELLED' }]
+  ? [{ label: '待处理', value: 'PENDING_PROCESSING' }, { label: '处理中', value: 'PROCESSING' }, { label: '换标完成', value: 'COMPLETED' }]
   : props.service === 'disposal'
     ? [{ label: '待审核', value: 'PENDING_REVIEW' }, { label: '待 PDA 废弃', value: 'APPROVED' }, { label: '待仓库确认完成', value: 'PDA_COMPLETED' }, { label: '已完成', value: 'COMPLETED' }, { label: '已拒绝', value: 'REJECTED' }, { label: '已取消', value: 'CANCELLED' }]
     : [{ label: '待审核', value: 'PENDING_REVIEW' }, { label: '已通过', value: 'APPROVED' }, { label: '待分配', value: 'PENDING_ASSIGNMENT' }, { label: '已分配', value: 'ALLOCATED' }, { label: '已出库', value: 'OUTBOUNDED' }, { label: '部分收货', value: 'PARTIALLY_RECEIVED' }, { label: '已收货', value: 'RECEIVED' }, { label: '已拒绝', value: 'REJECTED' }])
@@ -69,9 +69,17 @@ const labelingModeHint = computed(() => labelingMode.value === 'carton'
     ? '只替换箱内商品 SKU 标签，保留原箱唛；同一箱唛可以添加多条 SKU 明细。'
     : '同一箱同时替换商品 SKU 标签和外箱箱唛；同一箱唛的多条 SKU 使用同一个新 FBA 箱唛和目的仓。')
 const submittedRows = ref<Record<string, string>[]>([])
+const page = ref(1)
+const pageSize = ref(15)
+const total = ref(0)
 interface ServiceDetail extends Record<string, unknown> { transferNo?: string; status?: string; estimatedShipAt?: string; actualShipAt?: string; cartons?: TransferCarton[] }
 const selectedDetail = ref<ServiceDetail | null>(null)
 const selectedRelabelDetail = ref<RelabelDetail | null>(null)
+const completionPhotoUrls = reactive<Record<string, string>>({})
+const completionPhotoLoading = reactive<Record<string, boolean>>({})
+const completionPhotoErrors = reactive<Record<string, boolean>>({})
+const completionPhotoPreviewUrls = computed(() => (selectedRelabelDetail.value?.completionEvidence?.photoFileIds || [])
+  .map((fileId) => completionPhotoUrls[fileId]).filter(Boolean))
 const fbaWarehouses = ref<MerchantWarehouse[]>([])
 const operationWarehouses = ref<MerchantWarehouse[]>([])
 const fbaWarehousesLoading = ref(false)
@@ -114,7 +122,8 @@ const skuTotalCreateInput = ref<HTMLInputElement | null>(null)
 let cargoSequence = 0
 let skuRelabelSequence = 0
 
-watch(() => props.service, () => { mode.value = 'list'; resetFilters(); resetForm(); void loadPage() })
+watch(() => props.service, () => { mode.value = 'list'; page.value = 1; resetFilters(); resetForm(); void loadPage() })
+watch(mode, (value) => { if (value !== 'detail') clearCompletionPhotos() })
 watch(() => form.relabel, (value) => {
   if (props.service === 'transfer' && value) {
     labelingMode.value = 'carton_and_sku'
@@ -137,6 +146,7 @@ async function loadPage() {
   await load()
 }
 onMounted(() => { void loadPage(); void nextTick(refreshWarehouseMarkLabels) })
+onBeforeUnmount(clearCompletionPhotos)
 function resetFilters() { Object.assign(filters, { number: '', inboundNo: '', warehouse: '', destination: '', status: '', start: '', end: '' }) }
 function resetForm() {
   Object.assign(form, { customerNo: '', inboundNo: '', sourceWarehouse: '', warehouse: '', destination: '', address: '', contact: '', phone: '', deliveryMethod: '', relabelDeliveryMethod: '', trackingNo: '', reason: '', requirement: '', relabel: false, remark: '', labelDeadline: '', estimatedArrivalAt: '', estimatedShipAt: '', fbaShipmentNo: '', volumeCbm: 0.01 })
@@ -465,10 +475,14 @@ function warehouseDisplay(value?: string) {
   }).join('、')
 }
 function statusLabel(value: string) {
+  if (props.service === 'labeling') {
+    if (value === 'PROCESSING') return '处理中'
+    return ['READY_FOR_OUTBOUND', 'COMPLETED'].includes(value) ? '换标完成' : '待处理'
+  }
   const labels: Record<string, string> = {
 
     PENDING_PROCESSING: '待处理', PROCESSING: '处理中', CUSTOMER_CONFIRM_PENDING: '待客户确认',
-    READY_FOR_OUTBOUND: '待出库', COMPLETED: '已完成', CANCELLED: '已取消',
+    READY_FOR_OUTBOUND: '换标完成', COMPLETED: '已完成', CANCELLED: '已取消',
     PENDING_REVIEW: '待审核', APPROVED: '待 PDA 废弃', PDA_COMPLETED: '待仓库确认完成', REJECTED: '已拒绝', PENDING_ASSIGNMENT: '待分配',
     ALLOCATED: '已分配', OUTBOUNDED: '已出库', PARTIALLY_RECEIVED: '部分收货', RECEIVED: '已收货',
 
@@ -491,24 +505,32 @@ async function load() {
   loading.value = true
   try {
     if (props.service === 'labeling') {
-      const result = await listRelabels({ page: 1, size: 20, relabelNo: filters.number || undefined, overseasWarehouseId: filters.warehouse || undefined, status: filters.status || undefined, createdFrom: dateTime(filters.start), createdTo: dateTime(filters.end, true) })
+      const result = await listRelabels({ page: page.value, size: pageSize.value, relabelNo: filters.number || undefined, overseasWarehouseId: filters.warehouse || undefined, status: filters.status || undefined, createdFrom: dateTime(filters.start), createdTo: dateTime(filters.end, true) })
+      total.value = Number.isFinite(Number(result.total)) ? Number(result.total) : result.records.length
       submittedRows.value = result.records.map((item) => {
         const destinationWarehouses = warehouseDisplay(item.overseasWarehouseId)
-        return row([item.relabelNo, item.customerOrderNo, destinationWarehouses, '—', item.itemCount, item.totalPackageCount, statusLabel(item.status), formatDateTime(item.createdAt)])
+        return { ...row([item.relabelNo, item.customerOrderNo, destinationWarehouses, '—', item.itemCount, item.totalPackageCount, statusLabel(item.status), formatDateTime(item.createdAt)]), __status: item.status }
       })
     } else if (props.service === 'disposal') {
-      const result = await listDiscards({ page: 1, size: 20, discardNo: filters.number || undefined, inboundCode: filters.inboundNo || undefined, overseasWarehouseId: filters.warehouse || undefined, status: filters.status || undefined, createdFrom: dateTime(filters.start), createdTo: dateTime(filters.end, true) })
+      const result = await listDiscards({ page: page.value, size: pageSize.value, discardNo: filters.number || undefined, inboundCode: filters.inboundNo || undefined, overseasWarehouseId: filters.warehouse || undefined, status: filters.status || undefined, createdFrom: dateTime(filters.start), createdTo: dateTime(filters.end, true) })
+      total.value = Number.isFinite(Number(result.total)) ? Number(result.total) : result.records.length
       submittedRows.value = result.records.map((item) => row([item.discardNo, item.inboundCodes, item.overseasWarehouseName || '—', '—', item.totalPackages, `${item.currency} ${item.totalFee}`, statusLabel(item.status), formatDateTime(item.createdAt)]))
     } else {
-      const result = await listTransfers({ page: 1, size: 20, transferNo: filters.number || undefined, inboundCode: filters.inboundNo || undefined, operatingWarehouseId: filters.warehouse || undefined, fbaWarehouseCode: filters.destination || undefined, status: filters.status || undefined, ...(props.service === 'relabel' ? { needRelabel: true } : {}), createdFrom: dateTime(filters.start), createdTo: dateTime(filters.end, true) })
+      const result = await listTransfers({ page: page.value, size: pageSize.value, transferNo: filters.number || undefined, inboundCode: filters.inboundNo || undefined, operatingWarehouseId: filters.warehouse || undefined, fbaWarehouseCode: filters.destination || undefined, status: filters.status || undefined, ...(props.service === 'relabel' ? { needRelabel: true } : {}), createdFrom: dateTime(filters.start), createdTo: dateTime(filters.end, true) })
-      submittedRows.value = result.records.map((item) => props.service === 'transfer'
+      total.value = Number.isFinite(Number(result.total)) ? Number(result.total) : result.records.length
-        ? row([item.transferNo, item.packageCount, warehouseDisplay(item.operatingWarehouseId), item.fbaWarehouseCode, deliveryMethodLabel(item.deliveryMethod), item.needRelabel ? '是 · 待绑定换标单' : '否', statusLabel(item.status), formatDateTime(item.createdAt)])
+      submittedRows.value = result.records.map((item) => {
-        : row([item.transferNo, '—', item.fbaWarehouseCode, '—', item.packageCount, '是', item.relabelNo ? '已生成' : '待生成', statusLabel(item.status), formatDateTime(item.createdAt)]))
+        const operationWarehouse = warehouseDisplay(item.operatingWarehouseId)
+        return props.service === 'transfer'
+          ? row([item.transferNo, item.packageCount, operationWarehouse, item.fbaWarehouseCode, deliveryMethodLabel(item.deliveryMethod), item.needRelabel ? '是 · 待绑定换标单' : '否', statusLabel(item.status), formatDateTime(item.createdAt)])
+          : row([item.transferNo, '—', item.fbaWarehouseCode, '—', item.packageCount, '是', item.relabelNo ? '已生成' : '待生成', statusLabel(item.status), formatDateTime(item.createdAt)])
+      })
     }
-  } catch (error) { ElMessage.error(error instanceof Error ? error.message : '列表加载失败') }
+  } catch (error) { submittedRows.value = []; total.value = 0; ElMessage.error(error instanceof Error ? error.message : '列表加载失败') }
   finally { loading.value = false }
 }
-function query() { void load() }
+function query() { page.value = 1; void load() }
+function changePage(value: number) { page.value = value; void load() }
+function changePageSize(value: number) { pageSize.value = value; page.value = 1; void load() }
 async function submit() {
   const primaryWarehouse = props.service === 'relabel' ? form.sourceWarehouse : form.warehouse
   const relabelRows = labelingMode.value === 'carton' ? cartonDetailRows.value : skuRelabelRows.value
@@ -602,6 +624,7 @@ async function openDetail(value: Record<string, string>) {
     selectedDetail.value = { ...value, ...(detail as ServiceDetail), ...(discardSummary || {}) }
     selectedRelabelDetail.value = props.service === 'labeling' ? detail as RelabelDetail : null
     mode.value = 'detail'
+    if (props.service === 'labeling') void loadCompletionPhotos()
   } catch (error) { ElMessage.error(error instanceof Error ? error.message : '详情加载失败') }
 }
 async function confirmTransferMeasurements() {
@@ -623,24 +646,37 @@ async function printTransferCartons() {
     printWindow.opener = null; printWindow.document.open(); printWindow.document.write(label.printableHtml); printWindow.document.close(); printWindow.focus(); printWindow.print()
   } catch (error) { ElMessage.error(error instanceof Error ? error.message : '箱唛加载失败') }
 }
-async function confirmRelabel() {
+function clearCompletionPhotos() {
-  const relabelNo = selectedRelabelDetail.value?.application.relabelNo
+  for (const url of Object.values(completionPhotoUrls)) URL.revokeObjectURL(url)
-  if (!relabelNo) return
+  for (const key of Object.keys(completionPhotoUrls)) delete completionPhotoUrls[key]
-  try {
+  for (const key of Object.keys(completionPhotoLoading)) delete completionPhotoLoading[key]
-    await ElMessageBox.confirm('确认仓库上传的换标结果无误并继续出库流程吗？', '换标完成确认', { confirmButtonText: '确认并继续', cancelButtonText: '取消' })
+  for (const key of Object.keys(completionPhotoErrors)) delete completionPhotoErrors[key]
-    selectedRelabelDetail.value = await confirmRelabelCompletion(relabelNo)
-    ElMessage.success('已确认换标完成，订单已进入后续出库流程')
-  } catch (error) { if (error !== 'cancel') ElMessage.error(error instanceof Error ? error.message : '确认失败') }
 }
-async function previewCompletionPhoto(fileId: string) {
+async function loadCompletionPhoto(fileId: string) {
   const relabelNo = selectedRelabelDetail.value?.application.relabelNo
-  if (!relabelNo) return
+  if (!relabelNo || completionPhotoLoading[fileId]) return
+  completionPhotoLoading[fileId] = true
+  completionPhotoErrors[fileId] = false
   try {
     const blob = await downloadRelabelCompletionPhoto(relabelNo, fileId)
+    if (selectedRelabelDetail.value?.application.relabelNo !== relabelNo) return
+    if (completionPhotoUrls[fileId]) URL.revokeObjectURL(completionPhotoUrls[fileId])
     const url = URL.createObjectURL(blob)
-    window.open(url, '_blank', 'noopener,noreferrer')
+    completionPhotoUrls[fileId] = url
-    window.setTimeout(() => URL.revokeObjectURL(url), 60_000)
+  } catch { if (selectedRelabelDetail.value?.application.relabelNo === relabelNo) completionPhotoErrors[fileId] = true }
-  } catch (error) { ElMessage.error(error instanceof Error ? error.message : '完工照片加载失败') }
+  finally { completionPhotoLoading[fileId] = false }
+}
+async function loadCompletionPhotos() {
+  clearCompletionPhotos()
+  await Promise.all((selectedRelabelDetail.value?.completionEvidence?.photoFileIds || []).map(loadCompletionPhoto))
+}
+async function confirmRelabelFromList(relabelNo: string) {
+  try {
+    await ElMessageBox.confirm('确认仓库上传的换标结果无误并继续出库流程吗？', '换标完成确认', { confirmButtonText: '确认并继续', cancelButtonText: '取消' })
+    await confirmRelabelCompletion(relabelNo)
+    ElMessage.success('已确认换标完成，订单已进入后续出库流程')
+    await load()
+  } catch (error) { if (error !== 'cancel') ElMessage.error(error instanceof Error ? error.message : '确认失败') }
 }
 async function cancelSelectedDiscard() {
   const no = String(selectedDetail.value?.discardNo || selectedDetail.value?.['0'] || '')
@@ -764,8 +800,12 @@ function selectRelabelInventory(inboundOrderId: string) {
         <div class="warehouse-filter-actions"><el-button type="primary" @click="query"><Search :size="16" />查询</el-button><el-button @click="resetFilters(); query()">重置</el-button></div>
       </div>
       <div v-loading="loading" class="warehouse-card warehouse-table-card">
-        <div class="warehouse-table-scroll"><table><thead><tr><th v-for="column in config.columns" :key="column">{{ column }}</th></tr></thead><tbody><tr v-for="(row, rowIndex) in submittedRows" :key="rowIndex"><td><button class="warehouse-link" type="button" @click="openDetail(row)"><Eye :size="15" />查看</button></td><td v-for="(_, index) in config.columns.slice(1)" :key="index"><SingleLineText :value="row[String(index)]" /></td></tr><tr v-if="submittedRows.length === 0"><td :colspan="config.columns.length"><div class="warehouse-empty">{{ config.emptyText }}</div></td></tr></tbody></table></div>
+        <div class="warehouse-table-scroll"><table><thead><tr><th v-for="column in config.columns" :key="column">{{ column }}</th></tr></thead><tbody><tr v-for="(row, rowIndex) in submittedRows" :key="rowIndex"><td><div class="warehouse-list-actions"><button class="warehouse-link" type="button" @click="openDetail(row)"><Eye :size="15" />查看</button><el-button v-if="props.service === 'labeling' && row.__status === 'CUSTOMER_CONFIRM_PENDING'" size="small" type="primary" @click="confirmRelabelFromList(row['0'])">换标完成确认</el-button></div></td><td v-for="(_, index) in config.columns.slice(1)" :key="index"><SingleLineText :value="row[String(index)]" /></td></tr><tr v-if="submittedRows.length === 0"><td :colspan="config.columns.length"><div class="warehouse-empty">{{ config.emptyText }}</div></td></tr></tbody></table></div>
-        <div class="warehouse-pagination"><span>共 <strong>{{ submittedRows.length }}</strong> 条</span><el-button size="small" disabled>上一页</el-button><button type="button" class="warehouse-page-number">1</button><el-button size="small" disabled>下一页</el-button></div>
+        <div class="warehouse-pagination">
+          <span class="warehouse-pagination-total">共 {{ total }} 条</span>
+          <el-select v-model="pageSize" class="warehouse-page-size-select" aria-label="每页条数" @change="changePageSize"><el-option v-for="size in [15, 30, 50, 100]" :key="size" :label="`${size}条/页`" :value="size" /></el-select>
+          <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" :hide-on-single-page="false" layout="prev, pager, next" @current-change="changePage" />
+        </div>
       </div>
     </template>
 
@@ -889,13 +929,13 @@ function selectRelabelInventory(inboundOrderId: string) {
         </tbody></table></div>
       </div>
       <div v-if="props.service === 'labeling'" class="warehouse-card warehouse-form-section">
-        <div class="warehouse-section-heading"><h3>换标完成与出库</h3><el-button v-if="selectedRelabelDetail?.application.status === 'CUSTOMER_CONFIRM_PENDING'" type="primary" @click="confirmRelabel">换标完成确认</el-button></div>
+        <div class="warehouse-section-heading"><h3>换标完成与出库</h3></div>
         <div class="warehouse-detail-grid warehouse-fulfillment-grid">
           <div><span>派送方式</span><strong>{{ deliveryMethodLabel(selectedRelabelDetail?.application.deliveryMethod || '') || '无需出库' }}</strong></div>
           <div><span>履约状态</span><strong>{{ selectedRelabelDetail?.application.fulfillmentStatus || '—' }}</strong></div>
           <div><span>客户确认时间</span><strong>{{ formatDateTime(selectedRelabelDetail?.application.customerConfirmedAt) }}</strong></div>
         </div>
-        <div class="warehouse-evidence"><span>仓库完工照片</span><div v-if="selectedRelabelDetail?.completionEvidence?.photoFileIds?.length" class="warehouse-photo-actions"><el-button v-for="(fileId, index) in selectedRelabelDetail.completionEvidence.photoFileIds" :key="fileId" size="small" plain @click="previewCompletionPhoto(fileId)"><Eye :size="14" />照片 {{ index + 1 }}</el-button></div><strong v-else>仓库尚未上传完工照片</strong></div>
+        <div class="warehouse-evidence"><span>仓库完工照片</span><div v-if="selectedRelabelDetail?.completionEvidence?.photoFileIds?.length" class="warehouse-photo-grid"><div v-for="(fileId, index) in selectedRelabelDetail.completionEvidence.photoFileIds" :key="fileId" class="warehouse-photo-item"><el-image v-if="completionPhotoUrls[fileId]" :src="completionPhotoUrls[fileId]" :preview-src-list="completionPhotoPreviewUrls" :initial-index="completionPhotoPreviewUrls.indexOf(completionPhotoUrls[fileId])" fit="cover" preview-teleported /><div v-else-if="completionPhotoLoading[fileId]" class="warehouse-photo-placeholder">照片 {{ index + 1 }} 加载中…</div><button v-else class="warehouse-photo-placeholder warehouse-photo-retry" type="button" @click="loadCompletionPhoto(fileId)">{{ completionPhotoErrors[fileId] ? `照片 ${index + 1} 加载失败，点击重试` : `加载照片 ${index + 1}` }}</button></div></div><strong v-else>仓库尚未上传完工照片</strong></div>
         <p v-if="selectedRelabelDetail?.completionEvidence?.completionRemark" class="warehouse-completion-remark">完工备注：{{ selectedRelabelDetail.completionEvidence.completionRemark }}</p>
       </div>
       <div v-if="props.service === 'labeling'" class="warehouse-card warehouse-form-section">
@@ -926,10 +966,20 @@ function selectRelabelInventory(inboundOrderId: string) {
 .warehouse-unmaintained{margin-left:8px;color:#e6a23c;font-size:12px;font-style:normal}
 .warehouse-labeling-tabs{margin-top:-8px}.warehouse-labeling-heading{align-items:flex-start}.warehouse-labeling-heading h3{margin-bottom:16px}.warehouse-template-actions{display:flex;gap:8px;padding-bottom:12px}.warehouse-tab-actions{align-items:center;margin:2px 0 14px}.warehouse-tab-actions p{margin:0;color:#7d8797;font-size:12px}.warehouse-tab-actions>div{display:flex;gap:8px}.warehouse-sku-notice{margin:0 0 14px;padding:10px 12px;border:1px solid #f2d39b;border-radius:4px;background:#fff8e8;color:#8a6116;font-size:12px}.warehouse-sku-label-table{min-width:980px}.warehouse-sku-label-table :deep(.el-input-number){width:160px}:deep(.warehouse-labeling-tabs>.el-tabs__header){margin-bottom:18px}:deep(.warehouse-labeling-tabs .el-tabs__item){height:42px;padding:0 26px;font-weight:600}.warehouse-labeling-mode{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 16px;border:1px solid #dce5f5;border-radius:5px;background:#f7f9ff}.warehouse-labeling-mode>span{color:#34445c;font-size:13px;font-weight:650;white-space:nowrap}.warehouse-labeling-mode p{margin:0;color:#71809a;font-size:12px}.warehouse-labeling-mode :deep(.el-radio-group){display:flex;flex-shrink:0}.warehouse-labeling-mode :deep(.el-radio-button__inner){padding:8px 14px}
 .warehouse-relabel-detail-table{min-width:1420px}.warehouse-relabel-detail-table td strong{color:#253f67}
-.warehouse-native-file{min-height:32px;padding:5px 8px;border:1px solid #dcdfe6;border-radius:4px;background:#fff;color:#606266}.warehouse-fulfillment-grid{margin-bottom:18px}.warehouse-evidence{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid #e7ebf1;border-radius:4px;background:#f8fafc}.warehouse-evidence>span{color:#71809a;font-size:12px}.warehouse-evidence>strong{color:#8a95a5;font-size:12px;font-weight:400}.warehouse-photo-actions{display:flex;flex-wrap:wrap;gap:8px}.warehouse-completion-remark{margin:10px 0 0;color:#596579;font-size:12px}
+.warehouse-native-file{min-height:32px;padding:5px 8px;border:1px solid #dcdfe6;border-radius:4px;background:#fff;color:#606266}.warehouse-fulfillment-grid{margin-bottom:18px}.warehouse-evidence{display:flex;align-items:flex-start;gap:16px;padding:14px;border:1px solid #e7ebf1;border-radius:4px;background:#f8fafc}.warehouse-evidence>span{padding-top:6px;color:#71809a;font-size:12px;white-space:nowrap}.warehouse-evidence>strong{padding-top:6px;color:#8a95a5;font-size:12px;font-weight:400}.warehouse-photo-grid{display:grid;grid-template-columns:repeat(4,140px);gap:12px}.warehouse-photo-item{width:140px;height:105px;overflow:hidden;border:1px solid #dce3ed;border-radius:5px;background:#fff}.warehouse-photo-item :deep(.el-image){display:block;width:100%;height:100%;cursor:zoom-in}.warehouse-photo-placeholder{display:flex;width:100%;height:100%;align-items:center;justify-content:center;padding:10px;border:0;background:#f4f7fb;color:#8792a2;font-size:12px;text-align:center}.warehouse-photo-retry{cursor:pointer}.warehouse-completion-remark{margin:10px 0 0;color:#596579;font-size:12px}
 .warehouse-template-actions{flex-wrap:wrap;justify-content:flex-end}.warehouse-import-preview{margin:0 0 16px;padding:14px;border:1px solid #cfe0f5;border-radius:5px;background:#f8fbff}.warehouse-import-preview .warehouse-section-heading{margin-bottom:10px}.warehouse-import-preview .warehouse-section-heading>div{display:flex;align-items:center;gap:10px}.warehouse-import-preview p{margin:0;color:#7d8797;font-size:12px}.warehouse-binding-preview-table{min-width:980px;background:#fff}
 .warehouse-transfer-relabel .warehouse-labeling-heading>div:first-child{min-width:0}.warehouse-transfer-relabel .warehouse-labeling-heading h3{margin-bottom:6px}.warehouse-transfer-relabel .warehouse-labeling-heading p{margin:0 0 16px;color:#7d8797;font-size:12px}.warehouse-transfer-relabel-fields{margin-bottom:18px}.warehouse-transfer-mark-table{min-width:1420px}.warehouse-transfer-mark-table td{vertical-align:top}.warehouse-transfer-mark-table :deep(.el-textarea){min-width:220px}.warehouse-transfer-mark-table :deep(.el-input-number){width:150px}.warehouse-count-error{color:#d64545}
 .warehouse-transfer-form{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.warehouse-transfer-form--relabel{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start}.warehouse-transfer-form--relabel .warehouse-transfer-main-card{grid-column:1;grid-row:1}.warehouse-transfer-form--relabel .warehouse-transfer-cargo-card{grid-column:1;grid-row:2}.warehouse-transfer-form--relabel .warehouse-transfer-relabel{grid-column:2;grid-row:1 / span 2;margin-bottom:0}.warehouse-transfer-form--relabel .warehouse-transfer-submit-bar{grid-column:1 / -1}.warehouse-transfer-form :deep(.el-input__wrapper),.warehouse-transfer-form :deep(.el-textarea__inner),.warehouse-transfer-form :deep(.el-select__wrapper),.warehouse-transfer-form :deep(.el-date-editor.el-input__wrapper){min-height:32px}.warehouse-transfer-form .warehouse-form-section{padding:16px}.warehouse-transfer-form .warehouse-form-section h3{margin-bottom:12px;padding-bottom:9px;font-size:14px}.warehouse-transfer-form .warehouse-form-grid{gap:12px 16px}.warehouse-transfer-form .warehouse-choice-field{min-height:34px;padding:8px 10px;grid-template-columns:118px auto 1fr;gap:10px}.warehouse-transfer-form .warehouse-choice-field>span{font-size:12px}.warehouse-transfer-form .warehouse-choice-field small{font-size:11px}.warehouse-transfer-form .warehouse-receiving-card{gap:12px;padding:10px 12px}.warehouse-transfer-form .warehouse-section-heading{margin-bottom:8px}.warehouse-transfer-form .warehouse-edit-table{font-size:11px}.warehouse-transfer-form .warehouse-edit-table th{height:36px;padding:0 9px}.warehouse-transfer-form .warehouse-edit-table td{height:42px;padding:6px 7px}.warehouse-transfer-form .warehouse-transfer-mark-table :deep(.el-textarea){min-width:150px}.warehouse-transfer-form .warehouse-transfer-mark-table :deep(.el-input-number){width:112px}.warehouse-transfer-form .warehouse-hint{margin-top:5px;font-size:11px}.warehouse-transfer-form .warehouse-labeling-mode{gap:9px;margin-bottom:10px;padding:9px 10px}.warehouse-transfer-form .warehouse-labeling-mode>span{font-size:12px}.warehouse-transfer-form .warehouse-labeling-mode p{font-size:11px}.warehouse-transfer-form .warehouse-labeling-mode :deep(.el-radio-button__inner){padding:6px 9px}.warehouse-transfer-form .warehouse-template-actions{gap:5px;padding-bottom:8px}.warehouse-transfer-form .warehouse-template-actions :deep(.el-button){padding:6px 8px;font-size:11px}.warehouse-transfer-form .warehouse-submit-bar{padding:4px 0 18px}.warehouse-transfer-form .warehouse-submit-bar :deep(.el-button){min-height:32px;padding:7px 14px}.warehouse-transfer-form .warehouse-transfer-relabel{overflow:hidden}.warehouse-transfer-form .warehouse-transfer-relabel-fields{margin-bottom:10px}
 @media(max-width:1250px){.warehouse-transfer-form--relabel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.warehouse-transfer-form .warehouse-template-actions{justify-content:flex-start}.warehouse-transfer-form .warehouse-labeling-heading{align-items:flex-start;flex-direction:column}}
 .warehouse-transfer-form .pickup-address-field{grid-column:span 1}
+/* Keep the count and controls visible together on narrow list pages. */
+.warehouse-pagination { justify-content: flex-end; }
+.warehouse-pagination-total { color: #526176; font-size: 14px; }
+.warehouse-pagination :deep(.el-pagination) { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 0; }
+.warehouse-page-size-select { width: 112px; margin-left: 8px; }
+.warehouse-page-size-select :deep(.el-input__inner), .warehouse-page-size-select :deep(.el-select__selected-item) { color: #526176 !important; opacity: 1 !important; -webkit-text-fill-color: #526176; }
+.warehouse-list-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
+@media (max-width: 720px) {
+  .warehouse-pagination :deep(.el-pagination) { width: 100%; justify-content: flex-end; }
+}
 </style>

src/modules/overseas-warehouse/views/relabelAttachments.test.mjs

@@ -148,3 +148,18 @@ test('贴标详情展示箱唛、SKU 子明细和独立FBA目的仓', () => {
   assert.match(view, /item\.operationType === 'CARTON_AND_SKU'/)
   assert.match(view, /item\.skuItems\?\.length/)
 })
+
+test('客户在换标列表确认完工且照片使用二进制下载', () => {
+  assert.match(view, /row\.__status === 'CUSTOMER_CONFIRM_PENDING'/)
+  assert.match(view, /confirmRelabelFromList\(row\['0'\]\)/)
+  assert.doesNotMatch(view, /selectedRelabelDetail\?\.application\.status === 'CUSTOMER_CONFIRM_PENDING'/)
+  assert.match(api, /overseasBlobRequest/)
+})
+
+test('客户详情进入页面后直接回显完工照片并支持大图预览', () => {
+  assert.match(view, /void loadCompletionPhotos\(\)/)
+  assert.match(view, /class="warehouse-photo-grid"/)
+  assert.match(view, /<el-image v-if="completionPhotoUrls\[fileId\]"/)
+  assert.match(view, /:preview-src-list="completionPhotoPreviewUrls"/)
+  assert.doesNotMatch(view, />照片 \{\{ index \+ 1 \}\}<\/el-button>/)
+})