优化

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="头程计费">