优化

src/modules/container-loading/pages/ContainerDetailView.emptyReturn.behavior.test.ts

@@ -17,7 +17,17 @@ const routeState = vi.hoisted(() => ({ params: { containerId: '9001' }, query: {
 const routerPush = vi.hoisted(() => vi.fn())
 vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: canAccess }) }))
 vi.mock('vue-router', () => ({ useRoute: () => routeState, useRouter: () => ({ push: routerPush }) }))
-vi.mock('@/modules/loading-lists', () => ({ ContainerFeesPanel: { template: '<div />' }, LoadingListDetailDrawer: { name: 'LoadingListDetailDrawer', props: ['detail', 'error', 'loading', 'mode', 'embedded'], template: '<div data-testid="loading-detail">{{ detail?.planNo }}</div>' }, PalletLabelPrintDialog: { template: '<div />' }, getConfirmedLoadingList: vi.fn(), getPreloadPlan: vi.fn() }))
+vi.mock('@/modules/loading-lists', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/modules/loading-lists')>()
+  const api = { getConfirmedLoadingList: vi.fn(), getPreloadPlan: vi.fn() }
+  return {
+    ...api,
+    useLoadingListDetail: () => actual.useLoadingListDetail(api),
+    ContainerFeesPanel: { template: '<div />' },
+    LoadingListDetailDrawer: { name: 'LoadingListDetailDrawer', props: ['detail', 'error', 'loading', 'mode', 'embedded', 'dense', 'backLabel'], template: '<div data-testid="loading-detail">{{ detail?.planNo }}</div>' },
+    PalletLabelPrintDialog: { template: '<div />' },
+  }
+})
 vi.mock('@/modules/ocean-bookings', () => ({ listOceanBookingLinkCandidates: vi.fn() }))
 vi.mock('@/modules/outbound-dispatch', () => ({ confirmContainerOutboundDispatch: vi.fn(), getContainerOutboundDispatch: vi.fn() }))
 vi.mock('@/modules/port-schedules', () => ({ CarrierScheduleQueryPanel: { template: '<div />' }, ContainerPortSchedulePanel: { name: 'ContainerPortSchedulePanel', props: ['container'], emits: ['saved'], template: '<div />' } }))
@@ -61,7 +71,7 @@ describe('ContainerDetailView empty return', () => {
     vi.mocked(getContainerOutboundDispatch).mockReset().mockResolvedValue({ aggregate: { dispatchStatus: 'WAITING_FOR_LOADING', gate: { inbounds: [] } }, timeline: [] } as never)
     vi.mocked(getContainer).mockReset().mockResolvedValue(base as never)
     vi.mocked(getContainerOverview).mockReset().mockResolvedValue(overview as never)
-    vi.mocked(getConfirmedLoadingList).mockReset().mockResolvedValue({ planNo: 'LP-1', items: [] } as never)
+    vi.mocked(getConfirmedLoadingList).mockReset().mockResolvedValue({ planNo: 'LP-1', summary: { status: 'COMPLETED' }, items: [] } as never)
     vi.mocked(recordTerminalDrayageEmptyReturn).mockReset().mockResolvedValue({ ...base.terminalDrayage, status: 'EMPTY_RETURNED', version: 4, actualEmptyReturnAt: '2026-09-09T12:00:00', allowedActions: [] } as never)
     vi.mocked(listContainerArrivalTimes).mockReset().mockResolvedValue([{ sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: '2026-09-25T15:31:00', actualWarehouseArrivalAt: '2026-09-26T09:00:00', version: 0 }])
   })
@@ -133,6 +143,7 @@ describe('ContainerDetailView empty return', () => {
     vi.mocked(getContainerOverview).mockResolvedValue({ ...overview, loadingPlanId: '7001' } as never)
     vi.mocked(getConfirmedLoadingList).mockResolvedValue({
       planNo: 'LP-1',
+      summary: { status: 'COMPLETED' },
       items: [{ destinationWarehouse: 'ABE4' }, { destinationWarehouse: 'ABE4' }],
     } as never)
 
@@ -158,7 +169,7 @@ describe('ContainerDetailView empty return', () => {
 
 describe('domestic container loading list and booking link', () => {
   const domestic = { ...base, containerNo: null, warehouseId: '8', channelCode: 'ZBYHK', sourceType: 'SIMULATION', oceanBookingId: null, planId: '7001', planStatus: 'EDITING', version: 1, allowedActions: ['EDIT_CONTAINER'], terminalDrayage: null }
-  const loadingDetail = { planNo: 'LP-1', items: [] }
+  const loadingDetail = { planNo: 'LP-1', summary: { status: 'COMPLETED' }, items: [] }
 
   beforeEach(() => {
     routeState.query = {}
@@ -212,7 +223,8 @@ describe('domestic container loading list and booking link', () => {
         if (permitted) {
           const drawer = wrapper.findComponent({ name: 'LoadingListDetailDrawer' })
           expect(drawer.props('mode')).toBe(planStatus === 'COMPLETED' ? 'confirmed' : 'preload')
-          expect(drawer.props('embedded')).not.toBeUndefined()
+          expect(drawer.props('embedded')).toBeUndefined()
+          expect(drawer.props('backLabel')).toBe('返回货柜概览')
         }
         wrapper.unmount()
       }

src/modules/container-loading/pages/ContainerDetailView.test.ts

@@ -30,12 +30,12 @@ describe('ContainerDetailView customs integration', () => {
     expect(source).toContain(':sections="[\'documents\']"')
     expect(source).toContain(':sections="[\'pda\']"')
     expect(source).toContain('<LoadingListDetailDrawer')
-    expect(source).toContain('getConfirmedLoadingList')
-    expect(source).toContain('getPreloadPlan')
+    expect(source).toContain('useLoadingListDetail')
+    expect(source).toContain('await loadListDetail(mode, aggregate.loadingPlanId')
     expect(source).toContain('label="装柜清单"')
-    expect(source).toContain('打印装柜清单')
+    expect(source).not.toContain('function printLoadingList')
     expect(source).toContain("const loadingListMode = computed<LoadingListMode>(() => detail.value?.planStatus === 'COMPLETED' ? 'confirmed' : 'preload')")
-    expect(source).toContain('<LoadingListDetailDrawer dense :mode="loadingListMode" embedded')
+    expect(source).toContain('<LoadingListDetailDrawer dense :mode="loadingListMode" back-label="返回货柜概览"')
     expect(source).toContain(':sections="[\'pda\']"')
   })
 
@@ -46,7 +46,7 @@ describe('ContainerDetailView customs integration', () => {
     expect(navigationSource).toContain("title: '装柜清单'")
     expect(source).toContain('<el-tabs v-model="activeTab"')
     expect(source).toContain("v-if=\"isDomestic && activeTab === 'loading-list'\"")
-    expect(source).toContain("loadingDetail.value = await getConfirmedLoadingList(aggregate.loadingPlanId, resource.warehouseId)")
+    expect(source).toContain("await loadListDetail(mode, aggregate.loadingPlanId || '', resource.warehouseId || '')")
     expect(source).toContain('getContainer(containerId.value, props.workbench)')
     expect(source).toContain('getContainerOverview(containerId.value)')
     expect(source).toContain(':can-edit="false"')

src/modules/container-loading/pages/ContainerDetailView.vue

@@ -12,7 +12,7 @@ import AppDialog from '@/shared/components/AppDialog.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
 import { CarrierScheduleQueryPanel, ContainerPortSchedulePanel } from '@/modules/port-schedules'
-import { ContainerFeesPanel, getConfirmedLoadingList, getPreloadPlan, LoadingListDetailDrawer, PalletLabelPrintDialog, type LoadingDetail, type LoadingListMode } from '@/modules/loading-lists'
+import { ContainerFeesPanel, useLoadingListDetail, LoadingListDetailDrawer, PalletLabelPrintDialog, type LoadingListMode } from '@/modules/loading-lists'
 import {
   confirmContainerOutboundDispatch,
   getContainerOutboundDispatch,
@@ -144,9 +144,7 @@ const outboundDetail = ref<ContainerOutboundDispatchDetail | null>(null)
 const outboundError = ref<ApiErrorDetails | null>(null)
 const showPassedGates = ref(false)
 const carrierRefreshKey = ref(0)
-const loadingDetail = ref<LoadingDetail | null>(null)
-const loadingDetailLoading = ref(false)
-const loadingDetailError = ref<ApiErrorDetails | null>(null)
+const { detail: loadingDetail, loading: loadingDetailLoading, error: loadingDetailError, load: loadListDetail, reset: resetLoadingDetail } = useLoadingListDetail()
 const emptyReturnOpen = ref(false)
 const emptyReturnAt = ref('')
 const emptyReturnReason = ref('')
@@ -295,6 +293,7 @@ async function confirmEmptyReturn() {
 
 async function load() {
   if (!containerId.value) return
+  resetLoadingDetail()
   loading.value = true; error.value = null; overviewError.value = null
   try {
     const [resource, aggregate, arrivals] = await Promise.all([
@@ -331,23 +330,12 @@ async function loadOutboundDispatch() {
 }
 
 async function loadLoadingDetail(resource: ContainerBookingResource, aggregate: ContainerOverview) {
-  if (loadingDetail.value || loadingDetailLoading.value) return
-  loadingDetail.value = null; loadingDetailError.value = null
-  if (!aggregate.loadingPlanId || !resource.warehouseId) return
-  loadingDetailLoading.value = true
-  try {
-    if (resource.planStatus === 'COMPLETED') {
-      if (!canViewLoadingList.value) return
-      loadingDetail.value = await getConfirmedLoadingList(aggregate.loadingPlanId, resource.warehouseId)
-      return
-    }
-    if (!canViewPreload.value) return
-    loadingDetail.value = await getPreloadPlan(aggregate.loadingPlanId, resource.warehouseId)
-  } catch (cause) {
-    loadingDetailError.value = getApiErrorDetails(cause, '装柜清单加载失败')
-  } finally {
-    loadingDetailLoading.value = false
+  const mode = resource.planStatus === 'COMPLETED' ? 'confirmed' : 'preload'
+  if (!(mode === 'confirmed' ? canViewLoadingList.value : canViewPreload.value)) {
+    resetLoadingDetail()
+    return
   }
+  await loadListDetail(mode, aggregate.loadingPlanId || '', resource.warehouseId || '')
 }
 async function refreshAfterCustoms() {
   if (canViewOutboundDispatch.value) await loadOutboundDispatch()
@@ -518,7 +506,6 @@ async function completeClearance() {
 }
 
 function goBack() { void router.push({ name: isDomestic.value ? 'domestic-container-workbench' : 'overseas-container-workbench' }) }
-function printLoadingList() { window.print() }
 
 onMounted(async () => { await load(); if (isOverseas.value && route.query.action === 'documents') openDocument('DELIVERY_ORDER') })
 </script>
@@ -588,10 +575,10 @@ onMounted(async () => { await load(); if (isOverseas.value && route.query.action
       </section>
 
       <section v-if="isDomestic && activeTab === 'loading-list'" class="detail-section surface-panel" aria-labelledby="container-loading-list-heading">
-        <header class="loading-list-heading"><div><h2 id="container-loading-list-heading">{{ loadingListHeading }}</h2><p>{{ loadingListDescription }}</p></div><el-button v-if="loadingDetail && loadingListMode === 'confirmed'" @click="printLoadingList">打印装柜清单</el-button></header>
+        <header class="loading-list-heading"><div><h2 id="container-loading-list-heading">{{ loadingListHeading }}</h2><p>{{ loadingListDescription }}</p></div></header>
         <ContainerOverviewPanel v-if="overview" :overview="overview" :sections="['pda']" :can-manage-documents="false" :can-manage-customs="false" :can-manage-exception="false" />
         <ContainerCustomsPanel v-if="overview?.loadingPlanId && canListCustoms" :loading-plan-id="overview.loadingPlanId" :can-list="canListCustoms" :can-manage="canManageCustoms" :departure-state="customsDepartureState" @refreshed="refreshAfterCustoms" />
-        <LoadingListDetailDrawer dense :mode="loadingListMode" embedded :loading="loadingDetailLoading" :detail="loadingDetail" :error="loadingDetailError" :can-edit="false" @back="activeTab = 'overview'" @retry="overview && loadLoadingDetail(detail, overview)" />
+        <LoadingListDetailDrawer dense :mode="loadingListMode" back-label="返回货柜概览" :loading="loadingDetailLoading" :detail="loadingDetail" :error="loadingDetailError" :can-edit="false" @back="activeTab = 'overview'" @retry="overview && loadLoadingDetail(detail, overview)" />
       </section>
 
       <section v-if="canViewFirstLegFees && firstLegFeesOpened" v-show="activeTab === 'first-leg-fees'" v-loading="loadingDetailLoading" class="detail-section surface-panel" aria-label="头程计费">