From 43604b951d5ea97f06202b13a6db60da95fb76c6 Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Tue, 8 Sep 2026 22:35:07 +0800
Subject: [PATCH] fix: keep container overview mounted

---
 .../pages/ContainerDetailView.test.ts                  |  6 ++++++
 .../container-loading/pages/ContainerDetailView.vue    | 10 +++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/modules/container-loading/pages/ContainerDetailView.test.ts b/src/modules/container-loading/pages/ContainerDetailView.test.ts
index b5bf2e55..6506f05d 100644
--- a/src/modules/container-loading/pages/ContainerDetailView.test.ts
+++ b/src/modules/container-loading/pages/ContainerDetailView.test.ts
@@ -49,6 +49,12 @@ describe('ContainerDetailView customs integration', () => {
     expect(source).toContain(':can-edit="false"')
   })
 
+  it('keeps the loaded overview mounted while switching fee tabs', () => {
+    expect(source).toContain("v-show=\"activeTab === 'overview'\" class=\"detail-section surface-panel\" aria-labelledby=\"container-voyage-heading\"")
+    expect(source).toContain("v-if=\"isOverseas\" v-show=\"activeTab === 'overview'\"")
+    expect(source).not.toContain("v-if=\"activeTab === 'overview'\" class=\"detail-section surface-panel\"")
+  })
+
   it('separates domestic first-leg fees and connects the overseas fee lifecycle lazily', () => {
     expect(source).toContain('label="头程计费" name="first-leg-fees"')
     expect(source).toContain('label="尾程计费" name="last-leg-fees"')
diff --git a/src/modules/container-loading/pages/ContainerDetailView.vue b/src/modules/container-loading/pages/ContainerDetailView.vue
index bf1d8e43..9d4f9b90 100644
--- a/src/modules/container-loading/pages/ContainerDetailView.vue
+++ b/src/modules/container-loading/pages/ContainerDetailView.vue
@@ -409,26 +409,26 @@ onMounted(async () => { await load(); if (isOverseas.value && route.query.action
     <template v-else-if="detail">
       <el-tabs v-model="activeTab" class="workbench-tabs" @tab-change="rememberWorkbenchTab"><el-tab-pane :label="isDomestic ? '送柜报关' : '清关提柜'" name="overview" /><el-tab-pane v-if="isDomestic && detail.planStatus === 'COMPLETED' && canViewLoadingList" label="装柜清单" name="loading-list" /><el-tab-pane v-if="isDomestic && overview?.loadingPlanId" label="头程计费" name="first-leg-fees" /><el-tab-pane v-if="isOverseas" label="尾程计费" name="last-leg-fees" /></el-tabs>
       <LoadErrorState v-if="overviewError" compact title="履约摘要加载失败" :message="overviewError.message" :show-retry="false" />
-      <section v-if="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-information-heading">
+      <section v-show="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-information-heading">
         <h2 id="container-information-heading">货柜信息</h2>
         <div class="detail-fields"><dl><div><dt>真实订舱</dt><dd><span>{{ detail.oceanBookingId ? (detail.billOfLadingNo || '已关联') : '未关联' }}</span><el-button v-if="canLinkOceanBooking" link type="primary" @click="openOceanBookingLink"><Link2 :size="14" />关联已放舱订舱</el-button></dd></div><div><dt>异常状态</dt><dd>{{ detail.exceptionActive ? '异常' : '正常' }}</dd></div><div><dt>目的仓</dt><dd>{{ detail.destinationWarehouseName || detail.destinationWarehouseCode || '—' }}</dd></div><div><dt>拖车公司</dt><dd>{{ detail.terminalTruckingCompany || '—' }}</dd></div></dl></div>
         <ContainerOverviewPanel v-if="isDomestic && overview" :overview="overview" :sections="['exception']" :can-manage-documents="canEdit" :can-manage-customs="canManageCustoms" :can-manage-exception="canEdit" @manage-exception="openException" />
       </section>
 
-      <section v-if="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-voyage-heading">
+      <section v-show="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-voyage-heading">
         <h2 id="container-voyage-heading">船名航次信息</h2>
         <div class="detail-fields"><dl><div><dt>船公司</dt><dd>{{ detail.shippingCompanyName || '—' }}</dd></div><div><dt>船名 / 航次</dt><dd>{{ [detail.vesselName, detail.voyageNo].filter(Boolean).join(' / ') || '—' }}</dd></div><div><dt>预计开船</dt><dd>{{ formatTime(detail.estimatedSailingAt) }}</dd></div><div><dt>预计到港</dt><dd>{{ formatTime(detail.estimatedPortArrivalAt) }}</dd></div></dl></div>
         <div class="carrier-panel"><CarrierScheduleQueryPanel :key="carrierRefreshKey" :ocean-booking-id="detail.oceanBookingId" :container-booking-id="detail.id" :warehouse-timeline="overview?.timeline || []" /></div>
       </section>
 
-      <section v-if="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-customs-heading">
+      <section v-show="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-customs-heading">
         <h2 id="container-customs-heading">{{ isDomestic ? '出口报关信息' : '目的港清关与提柜资料' }}</h2>
         <ContainerOverviewPanel v-if="isOverseas && overview" :overview="overview" :sections="['documents']" :can-manage-documents="canManageDestinationDocuments" :can-manage-customs="canManageDestinationDocuments" :can-manage-exception="false" :document-busy="documentDownloading" :pickup-code-busy="pickupCodeSaving" @upload-document="openDocument" @download-document="downloadDocument" @save-pickup-code="savePickupCode" />
         <el-alert v-if="documentRefreshWarning" type="warning" :closable="false" :title="documentRefreshWarning.message"><template #default><ApiErrorMeta :details="documentRefreshWarning" /></template></el-alert>
         <ContainerCustomsPanel v-if="isDomestic && detail.planStatus === 'COMPLETED' && overview?.loadingPlanId && canListCustoms" :loading-plan-id="overview.loadingPlanId" :can-list="canListCustoms" :can-manage="canManageCustoms" :departure-state="customsDepartureState" @refreshed="refreshAfterCustoms" />
       </section>
 
-      <section v-if="isDomestic && activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-receiving-heading">
+      <section v-if="isDomestic" v-show="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-receiving-heading">
         <h2 id="container-receiving-heading">装柜作业与国内出仓</h2>
         <ContainerOverviewPanel v-if="overview" :overview="overview" :sections="['pda']" :can-manage-documents="canEdit" :can-manage-customs="canManageCustoms" :can-manage-exception="canEdit" />
         <div v-if="detail.planStatus === 'COMPLETED' && canViewOutboundDispatch" class="outbound-panel" aria-label="国内出仓门禁">
@@ -449,7 +449,7 @@ onMounted(async () => { await load(); if (isOverseas.value && route.query.action
         </div>
       </section>
 
-      <section v-if="isOverseas && activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-overseas-receiving-heading">
+      <section v-if="isOverseas" v-show="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-overseas-receiving-heading">
         <h2 id="container-overseas-receiving-heading">提柜、卸柜与还空</h2>
         <div class="detail-fields"><dl><div><dt>码头拖车状态</dt><dd>{{ workbenchDetail?.statusSummary?.terminalDrayageStatus || '—' }}</dd></div><div><dt>码头车队</dt><dd>{{ workbenchDetail?.terminalDrayage?.fleetSupplierName || '—' }}</dd></div><div><dt>预约提柜</dt><dd>{{ formatTime(workbenchDetail?.terminalDrayage?.pickupAppointmentAt) }}</dd></div><div><dt>实际提柜</dt><dd>{{ formatTime(workbenchDetail?.terminalDrayage?.actualPickupAt) }}</dd></div><div><dt>卸柜完成</dt><dd>{{ formatTime(workbenchDetail?.actualFacts?.unloadingCompletedAt as string | null) }}</dd></div><div><dt>实际还柜</dt><dd>{{ formatTime(workbenchDetail?.terminalDrayage?.actualEmptyReturnAt) }}</dd></div></dl></div>
       </section>