fix(admin): restore loading list detail page navigation

AGENTS.md

@@ -60,7 +60,7 @@
 | 入库单扣货、解除、凭证与历史 | `modules/inbounds/pages/InboundOrdersView.vue`、详情工作区、`modules/inbounds/core/api.ts` | 列表展示服务端 `holdFlag/currentHoldReason` 并支持筛选；详情只按 `canHold/canRelease/actionBlockReason` 开放操作。扣货与解除提交当前 `version`、原因和独立幂等键，可选凭证先按明确客户与入库单上传；历史文件只调用专用下载入口，不把上传成功但未提交命令的文件冒充扣货证据 |
 | 客户专属价格簿、柜级阶梯运费与受控调价 | 列表/上传 `modules/fba-pricing/carrier-rates/pages/CarrierRatesView.vue`，版本详情/仓库映射/确认 `modules/fba-pricing/carrier-rates/pages/CarrierRateDetailView.vue`，路由 `modules/fba-pricing/routes.ts`；`modules/inbounds/fee/`、`modules/unified-orders/components/InboundFeeDetailManager.vue` | 列表与上传后按 `versionId` 进入 `fba-carrier-rate-detail` 独立详情页，价格行只读；回归入口 `modules/fba-pricing/carrier-rates/pages/CarrierRatesView.test.ts`。价格簿页面显式选择公共报价或具体客户；列表、上传、确认只作用于该 `customerId`，不得混合版本。计价优先消费客户专属 ACTIVE 版本，无专属版本才回退公共 ACTIVE；柜级阶梯金额和各客户分摊只展示服务端结果。调整计费量只能在服务端返回的上下 10% 范围内并提交当前费用版本、原因与二次确认；私人仓尾程派送费使用稳定 `PRIVATE_LAST_MILE_DELIVERY` 代码且只对 `PRIVATE` 目的地开放；一件代发须在预装确认前完成试算，计价后保持服务端 `WAIT_PALLETIZE` 状态 |
 | 财务、客户资金账户与柜级公共费用分摊 | `modules/finance/`，继续读该目录 `AGENTS.md`；客户账户 `pages/FinanceCustomerAccountsView.vue`，柜费 `modules/loading-lists/components/ContainerFeesPanel.vue`、`api/containerFees.ts` | `finance/`、`firstleg/`、`file/`、`docs/财务管理/`；实际、冻结、可用余额、授信与流水只消费 Finance 权威结果，充值审核和手工充扣携带版本与幂等键。跨客户公共柜费只按服务端柜内客户/订单事实分摊，金额必须守恒，创建与审核、驳回、调整、作废均整组原子处理 |
-| 货柜双工作台、排柜、预装/装柜清单、真实柜号后补与整柜报关 | 国内 `modules/container-loading/pages/DomesticContainersView.vue`、海外 `OverseasContainersView.vue`，共享详情实现 `ContainerDetailView.vue`；预装详情 `modules/loading-lists/pages/PreloadPlanDetailView.vue`，资料/PDA 证据 `components/ContainerOverviewPanel.vue`，报关 `components/ContainerCustomsPanel.vue` | 国内“送柜报关”只消费 `/containers/domestic` 与服务端 `allowedActions`，承载模拟柜、订舱关联、智能装柜；模拟柜创建选择与智能装柜一致的 9 类计划渠道，未关联订舱前实际渠道为空，订舱关联候选按计划渠道组匹配并同时展示订舱号与提单号、装柜清单页签、出口报关和国内出仓；创建柜次时自动生成唯一预装计划，预装详情先调用 `/loading-plans/{planId}/lifecycle`，完成后深链进入国内货柜详情的装柜清单页签，独立装柜清单导航 `/loading-lists` 复用已确认清单 API，列表下方展开只读明细并提供打印；货柜列表经 `ContainerWorkbenchView.vue` 在国内装柜与海外清关提柜之间按权限切换。订舱关联允许真实集装箱号为空，但确认预装和创建 PDA 任务前必须补齐；历史已建但缺号的任务仍可在预装详情首次补录，保存后恢复 PDA 可进入状态；全买单柜继续使用 `complete-all-buy`。海外“清关提柜”只消费 `/containers/overseas`，承载船节点、目的港清关、DO/PU、码头车队和还空；原预约/实际提柜展示位改为整柜预计/实际到仓，预计到仓在列表内人工快捷维护并经海外接口同步整柜尾程订单，实际到仓只读海外 PDA 首次开始收货时间。还空截止事实由服务端基于卸柜完成时间加 72 小时计算，前端不重算。两端统一使用 `containerBookingId`，列表范围由服务端 `scope=ACTIVE/HISTORY` 分页，禁止浏览器筛选或本地推导写资格。后端为 `LoadingListService`、`firstleg/customs/container/`、`firstleg/terminaldrayage/` 和 `lastleg-service/`，文件归 `file/` |
+| 货柜双工作台、排柜、预装/装柜清单、真实柜号后补与整柜报关 | 国内 `modules/container-loading/pages/DomesticContainersView.vue`、海外 `OverseasContainersView.vue`，共享详情实现 `ContainerDetailView.vue`；预装详情 `modules/loading-lists/pages/PreloadPlanDetailView.vue`，资料/PDA 证据 `components/ContainerOverviewPanel.vue`，报关 `components/ContainerCustomsPanel.vue` | 国内“送柜报关”只消费 `/containers/domestic` 与服务端 `allowedActions`，承载模拟柜、订舱关联、智能装柜；模拟柜创建选择与智能装柜一致的 9 类计划渠道，未关联订舱前实际渠道为空，订舱关联候选按计划渠道组匹配并同时展示订舱号与提单号、装柜清单页签、出口报关和国内出仓；创建柜次时自动生成唯一预装计划，预装详情先调用 `/loading-plans/{planId}/lifecycle`，完成后深链进入国内货柜详情的装柜清单页签，独立装柜清单导航 `/loading-lists` 复用已确认清单 API，查看进入独立详情路由 `/loading-lists/:planId`，保留返回列表和打印；货柜列表经 `ContainerWorkbenchView.vue` 在国内装柜与海外清关提柜之间按权限切换。订舱关联允许真实集装箱号为空，但确认预装和创建 PDA 任务前必须补齐；历史已建但缺号的任务仍可在预装详情首次补录，保存后恢复 PDA 可进入状态；全买单柜继续使用 `complete-all-buy`。海外“清关提柜”只消费 `/containers/overseas`，承载船节点、目的港清关、DO/PU、码头车队和还空；原预约/实际提柜展示位改为整柜预计/实际到仓，预计到仓在列表内人工快捷维护并经海外接口同步整柜尾程订单，实际到仓只读海外 PDA 首次开始收货时间。还空截止事实由服务端基于卸柜完成时间加 72 小时计算，前端不重算。两端统一使用 `containerBookingId`，列表范围由服务端 `scope=ACTIVE/HISTORY` 分页，禁止浏览器筛选或本地推导写资格。后端为 `LoadingListService`、`firstleg/customs/container/`、`firstleg/terminaldrayage/` 和 `lastleg-service/`，文件归 `file/` |
 | 合柜报关 / 同柜不可拆组 | `modules/unified-orders/api/coLoadGroups.ts`、`pages/UnifiedOrdersView.vue`；装柜消费 `modules/container-loading/pages/SmartLoadingWorkbenchView.vue` | 前端只提交订单 ID；Backend `firstleg/loading/coload/` 展开并冻结每票全部可用入仓片段。成员数是入仓片段数，不等于订单票数；只要求同国内仓、同渠道，允许跨客户及不同目的仓港；分配、移除、取消均整组处理 |
 | 全局智能装柜工作台、入仓码候选与箱数分配 | `modules/container-loading/components/SmartLoadingDialog.vue` 内嵌 `pages/GlobalSmartLoadingView.vue`，柜次页 `SmartLoadingWorkbenchView.vue`，以及 `smartLoadingChannelGroups.ts`、`smartLoadingItems.ts`、`api/platformContainerLoading.ts`；全局页当前不注册独立路由 | Backend `firstleg/` 的 `/inbound-candidates`、`/containers`、`/inbound-assignments`、`/plans/{planId}/pending-review-assignments`、`/group-assignments`、`/unpicked-items`。`orderStatuses` 最多四项且未传表示全部未完成状态；候选状态多选覆盖待审核、待测量、待分柜、装柜中，状态只用于筛选展示，按钮资格以服务端 `canAssign` 为准；待审核/待测量可提前占位但不得提前确认预装或启动 PDA。计划箱数编辑上限、已用和未用展示只消费服务端 `totalPackageCount/remainingPackageCount`，不得从候选页或本地规格重新拼算。人工加入允许跨渠道，智能推荐仍按柜次渠道。柜次容量和限重取服务端字段；同柜组作为单卡整组分页、分配和移除，任一成员已拣时整组保留 |
 | 国内货柜履约订舱资料、打印、关联候选与出仓前船期 | `modules/ocean-bookings/` 的 `components/OceanBookingDocumentsPanel.vue`、`OceanBookingPrintDialog.vue`，以及 `modules/container-loading/`、`modules/port-schedules/` | 订舱草稿按当前版本维护资料，放舱后资料与表单只读；打印对草稿与已放舱订舱均开放，按当前已保存资料生成，未填写字段显示“—”。`platformOceanBookings.ts` 的 `/link-candidates` 只消费服务端分页，`containerCount` 是柜型需求 `quantity` 总和；Backend `firstleg/oceanbooking/`、`file/`、`print/`、`firstleg/portschedule/` |

src/modules/loading-lists/components/LoadingListsView.behavior.test.ts

@@ -2,8 +2,8 @@ import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import LoadingListsView from './LoadingListsView.vue'
 
-const mocks = vi.hoisted(() => ({ get: vi.fn(), list: vi.fn(), can: vi.fn(), push: vi.fn() }))
-vi.mock('vue-router', () => ({ useRoute: () => ({ query: {} }), useRouter: () => ({ push: mocks.push, replace: vi.fn() }) }))
+const mocks = vi.hoisted(() => ({ get: vi.fn(), list: vi.fn(), can: vi.fn(), push: vi.fn(), replace: vi.fn(), query: {} as Record<string, string> }))
+vi.mock('vue-router', () => ({ useRoute: () => ({ query: mocks.query }), useRouter: () => ({ push: mocks.push, replace: mocks.replace }) }))
 vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: mocks.can }) }))
 vi.mock('@/modules/container-loading', () => ({ ContainerSimulationCreate: { template: '<div />' } }))
 vi.mock('@/modules/iam', () => ({ listPlatformTenants: async () => ({ records: [] }) }))
@@ -20,27 +20,32 @@ function render() {
     ElButton: { template: '<button><slot /></button>' },
   } } })
 }
-describe('confirmed manifest inline detail', () => {
-  beforeEach(() => { vi.clearAllMocks(); mocks.can.mockReturnValue(true); mocks.list.mockResolvedValue({ records: rows, total: 2 }) })
-  it('ignores an older detail response when another manifest is selected', async () => {
-    let resolveFirst!: (value: unknown) => void
-    mocks.get.mockImplementationOnce(() => new Promise(resolve => { resolveFirst = resolve }))
-      .mockResolvedValueOnce({ summary: { status: 'COMPLETED', planId: '2', loadingListNo: 'LIST-2' } })
+describe('confirmed manifest navigation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.query = {}
+    mocks.can.mockReturnValue(true)
+    mocks.list.mockResolvedValue({ records: rows, total: 2 })
+  })
+  it('opens each manifest on its dedicated detail route with warehouse context', async () => {
     const wrapper = render(); await flushPromises()
     await wrapper.findAll('button')[0]!.trigger('click')
-    await wrapper.findAll('button')[2]!.trigger('click'); await flushPromises()
-    resolveFirst({ summary: { status: 'COMPLETED', planId: '1', loadingListNo: 'LIST-1' } }); await flushPromises()
-    expect(wrapper.get('[data-testid="detail"]').text()).toBe('LIST-2')
-    expect(mocks.get).toHaveBeenNthCalledWith(2, '2', '22')
-    expect(mocks.push).not.toHaveBeenCalled()
+    expect(mocks.push).toHaveBeenLastCalledWith({ name: 'loading-list-detail', params: { planId: '1' }, query: { warehouseId: '11' } })
+    await wrapper.findAll('button')[2]!.trigger('click')
+    expect(mocks.push).toHaveBeenLastCalledWith({ name: 'loading-list-detail', params: { planId: '2' }, query: { warehouseId: '22' } })
+    expect(mocks.get).not.toHaveBeenCalled()
+    expect(wrapper.find('[data-testid="detail"]').exists()).toBe(false)
   })
-  it('does not print when loading fails', async () => {
-    const print = vi.spyOn(window, 'print').mockImplementation(() => {})
-    mocks.get.mockRejectedValueOnce(new Error('清单不可用'))
+  it('prints through the dedicated detail page', async () => {
     const wrapper = render(); await flushPromises()
-    await wrapper.findAll('button')[1]!.trigger('click'); await flushPromises()
-    expect(wrapper.get('[data-testid="detail"]').text()).toContain('清单不可用')
-    expect(print).not.toHaveBeenCalled(); print.mockRestore()
+    await wrapper.findAll('button')[1]!.trigger('click')
+    expect(mocks.push).toHaveBeenCalledWith({ name: 'loading-list-detail', params: { planId: '1' }, query: { warehouseId: '11', print: '1' } })
+    expect(mocks.get).not.toHaveBeenCalled()
+  })
+  it('replaces a list deep link with the dedicated detail route', async () => {
+    mocks.query = { planId: '2', warehouseId: '22' }
+    render(); await flushPromises()
+    expect(mocks.replace).toHaveBeenCalledWith({ name: 'loading-list-detail', params: { planId: '2' }, query: { warehouseId: '22' } })
   })
   it('does not fetch manifests without list permission', async () => {
     mocks.can.mockReturnValue(false)

src/modules/loading-lists/components/LoadingListsView.test.ts

@@ -59,15 +59,15 @@ describe('LoadingListsView', () => {
 
   it('keeps preload routes while completed lists move into domestic container detail', () => {
     expect(source).toContain("name: 'preload-plan-detail'")
-    expect(source).toContain('loadConfirmedDetail')
-    expect(source).toContain('confirmed-inline-detail')
+    expect(source).toContain("name: 'loading-list-detail'")
+    expect(source).not.toContain('confirmed-inline-detail')
     expect(preloadDetailSource).toContain('返回列表')
     expect(preloadDetailSource).toContain('router.back()')
     expect(confirmedDetailSource).toContain('返回列表')
     expect(confirmedDetailSource).toContain('router.back()')
     expect(confirmedDetailSource).toContain('@media (min-width: 1920px) { .confirmed-loading-detail-page { width: 100%; max-width: none; gap: 12px; } }')
-    expect(routesSource).not.toContain("path: 'loading-lists/:planId'")
-    expect(routesSource).not.toContain("name: 'loading-list-detail'")
+    expect(routesSource).toContain("path: 'loading-lists/:planId'")
+    expect(routesSource).toContain("name: 'loading-list-detail'")
   })
 
   it('keeps the real transport edit contract in a 620px centered modal on the detail page', () => {
@@ -111,7 +111,7 @@ describe('LoadingListsView', () => {
     expect(source).toContain('useRoute()')
     expect(source).toContain('route.query.planId')
     expect(source).toContain('route.query.warehouseId')
-    expect(source).toContain('await loadConfirmedDetail(planId, warehouseId)')
+    expect(source).toContain("await router.replace({ name: 'loading-list-detail'")
     expect(confirmedDetailSource).toContain("result.summary.status !== 'COMPLETED'")
     expect(confirmedDetailSource).toContain('MODE_STATUS_MISMATCH')
     expect(confirmedDetailSource).toContain('watch([planId, warehouseId], () => void loadDetail())')

src/modules/loading-lists/components/LoadingListsView.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
-import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
-import LoadingListDetailDrawer from './LoadingListDetailDrawer.vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ContainerSimulationCreate } from '@/modules/container-loading'
 
@@ -19,8 +18,6 @@ import StatusBadge from '@/shared/components/StatusBadge.vue'
 import { loadingListStatusLabel } from '../status'
 import {
   listConfirmedLoadingLists,
-  getConfirmedLoadingList,
-  type LoadingDetail,
   listPreloadPlans,
   type ConfirmedSummary,
   type LoadingListMode,
@@ -43,44 +40,8 @@ const customers = ref<PlatformTenantResource[]>([])
 const customersLoading = ref(false)
 const query = reactive<QueryModel>({ customerId: '', keyword: '', createdRange: [] })
 const handledDeepLink = ref('')
-const selectedPlan = ref<{ planId: string; warehouseId: string } | null>(null)
-const confirmedDetail = ref<LoadingDetail<ConfirmedSummary> | null>(null)
-const detailLoading = ref(false)
-const detailError = ref<ApiErrorDetails | null>(null)
-let detailSequence = 0
-
-function closeConfirmedDetail() {
-  ++detailSequence
-  selectedPlan.value = null
-  confirmedDetail.value = null
-  detailError.value = null
-  detailLoading.value = false
-}
-
-async function loadConfirmedDetail(planId: string, warehouseId: string) {
-  const sequence = ++detailSequence
-  selectedPlan.value = { planId, warehouseId }
-  confirmedDetail.value = null
-  detailError.value = null
-  detailLoading.value = true
-  try {
-    if (!warehouseId) throw new Error('该清单缺少所属仓库信息，无法查询详情')
-    const result = await getConfirmedLoadingList(planId, warehouseId)
-    if (sequence !== detailSequence) return
-    if (result.summary.status !== 'COMPLETED') throw new Error('该计划尚未形成正式装柜清单')
-    confirmedDetail.value = result
-  } catch (cause) {
-    if (sequence === detailSequence) detailError.value = getApiErrorDetails(cause, '装柜清单明细加载失败')
-  } finally {
-    if (sequence === detailSequence) detailLoading.value = false
-  }
-}
-
-async function printConfirmed(row: LoadingListSummary) {
-  await loadConfirmedDetail(String(row.planId), String(row.warehouseId || ''))
-  if (!confirmedDetail.value || confirmedDetail.value.summary.planId !== String(row.planId)) return
-  await nextTick()
-  window.print()
+function printConfirmed(row: LoadingListSummary) {
+  void router.push({ name: 'loading-list-detail', params: { planId: String(row.planId) }, query: { warehouseId: String(row.warehouseId || ''), print: '1' } })
 }
 
 const isPreload = computed(() => props.mode === 'preload')
@@ -180,7 +141,7 @@ async function openDeepLinkedDetail() {
     await router.replace({ name: 'preload-plan-detail', params: { planId }, query: { warehouseId } })
     return
   }
-  await loadConfirmedDetail(planId, warehouseId)
+  await router.replace({ name: 'loading-list-detail', params: { planId }, query: { warehouseId } })
 }
 
 function onSimulationCreated() {
@@ -200,7 +161,7 @@ function openDetail(rowValue: object) {
     void router.push({ name: 'preload-plan-detail', params: { planId: String(row.planId) }, query: { warehouseId: String(row.warehouseId || '') } })
     return
   }
-  void loadConfirmedDetail(String(row.planId), String(row.warehouseId || ''))
+  void router.push({ name: 'loading-list-detail', params: { planId: String(row.planId) }, query: { warehouseId: String(row.warehouseId || '') } })
 }
 
 async function loadCustomers() {
@@ -265,7 +226,7 @@ onMounted(() => {
         </template>
         <template #actions="{ row }"><div class="row-actions density-actions admin-text-actions" :class="{ 'density-actions': isPreload }">
             <el-button v-if="canView" :class="{ 'density-action': isPreload }" size="small" :type="isPreload ? undefined : 'primary'" :plain="!isPreload" @click="openDetail(row)">查看</el-button>
-            <el-button v-if="canView && !isPreload" class="density-action" size="small" :disabled="detailLoading" @click="printConfirmed(row as LoadingListSummary)">打印</el-button>
+            <el-button v-if="canView && !isPreload" class="density-action" size="small" @click="printConfirmed(row as LoadingListSummary)">打印</el-button>
           </div></template>
         <template #customers="{ row }"><LineClampText :content="(row as PreloadSummary).customers.map((item) => item.customerName || '客户信息缺失').join('、')" /></template>
         <template #vesselVoyage="{ row }">{{ (row as PreloadSummary).vesselName || '—' }} / {{ (row as PreloadSummary).voyageNo || '—' }}</template>
@@ -276,10 +237,6 @@ onMounted(() => {
         <template #createdAt="{ row }">{{ formatDateTime(row.createdAt) }}</template>
       </DataTable></section>
     </ListPageLayout>
-    <section v-if="!isPreload && canView && selectedPlan" class="confirmed-inline-detail" aria-label="装柜清单明细">
-      <h2>装柜清单明细 {{ confirmedDetail?.summary.loadingListNo || '' }}</h2>
-      <LoadingListDetailDrawer dense embedded mode="confirmed" :loading="detailLoading" :detail="confirmedDetail" :error="detailError" :can-edit="false" @back="closeConfirmedDetail" @retry="loadConfirmedDetail(selectedPlan.planId, selectedPlan.warehouseId)" />
-    </section>
 
   </div>
   </AdminPage>
@@ -287,7 +244,6 @@ onMounted(() => {
 
 <style scoped>
 .loading-lists-page { display: grid; min-width: 0; gap: var(--admin-space-6, 16px); }
-@media print { .loading-lists-page :deep(.list-page-layout) { display: none; } }
 .table-panel { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }
 .row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-2, 6px); }
 .row-actions :deep(.el-button) { margin-left: 0; }

src/modules/loading-lists/pages/ConfirmedLoadingListDetailView.test.ts

@@ -0,0 +1,65 @@
+import { flushPromises, shallowMount } from '@vue/test-utils'
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'
+import { reactive } from 'vue'
+import ConfirmedLoadingListDetailView from './ConfirmedLoadingListDetailView.vue'
+
+const mocks = vi.hoisted(() => ({ get: vi.fn(), push: vi.fn(), replace: vi.fn(), back: vi.fn(), route: { params: { planId: '1' }, query: { warehouseId: '11' } as Record<string, string> } }))
+vi.mock('vue-router', () => ({ useRoute: () => mocks.route, useRouter: () => mocks }))
+vi.mock('../api/platformLoadingLists', () => ({ getConfirmedLoadingList: mocks.get }))
+vi.mock('@/shared/api/http', () => ({ getApiErrorDetails: (cause: Error) => ({ message: cause.message }) }))
+
+function render() {
+  return shallowMount(ConfirmedLoadingListDetailView, { global: { stubs: {
+    AdminPage: { template: '<main><slot /></main>' },
+    LoadingListDetailDrawer: { name: 'LoadingListDetailDrawer', props: ['detail', 'error', 'loading'], template: '<section />' },
+  } } })
+}
+const completed = (planId = '1') => ({ summary: { status: 'COMPLETED', planId, loadingListNo: `LIST-${planId}` }, items: [], histories: [] })
+
+describe('confirmed loading list detail page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.route = reactive({ params: { planId: '1' }, query: { warehouseId: '11' } })
+    mocks.get.mockResolvedValue(completed())
+    vi.spyOn(window, 'print').mockImplementation(() => {})
+  })
+  afterEach(() => vi.restoreAllMocks())
+  it('loads read-only detail on the dedicated page and returns to the list', async () => {
+    const wrapper = render(); await flushPromises()
+    expect(mocks.get).toHaveBeenCalledWith('1', '11')
+    const detail = wrapper.findComponent({ name: 'LoadingListDetailDrawer' })
+    expect(detail.props('detail')).toEqual(completed())
+    expect(window.print).not.toHaveBeenCalled()
+    vi.spyOn(window.history, 'length', 'get').mockReturnValue(1)
+    detail.vm.$emit('back')
+    expect(mocks.push).toHaveBeenCalledWith({ name: 'loading-lists' })
+    wrapper.unmount()
+  })
+  it('prints only after detail has loaded and removes the print request', async () => {
+    mocks.route.query.print = '1'
+    const wrapper = render(); await flushPromises()
+    expect(window.print).toHaveBeenCalledTimes(1)
+    expect(wrapper.findComponent({ name: 'LoadingListDetailDrawer' }).props('loading')).toBe(false)
+    expect(mocks.replace).toHaveBeenCalledWith({ name: 'loading-list-detail', params: { planId: '1' }, query: { warehouseId: '11' } })
+    wrapper.unmount()
+  })
+  it('keeps failure visible and does not print when loading fails', async () => {
+    mocks.route.query.print = '1'
+    mocks.get.mockRejectedValueOnce(new Error('清单不可用'))
+    const wrapper = render(); await flushPromises()
+    expect(wrapper.findComponent({ name: 'LoadingListDetailDrawer' }).props('error').message).toBe('清单不可用')
+    expect(window.print).not.toHaveBeenCalled()
+    wrapper.unmount()
+  })
+  it('ignores a stale response after switching manifests', async () => {
+    let resolveFirst!: (value: unknown) => void
+    mocks.get.mockImplementationOnce(() => new Promise(resolve => { resolveFirst = resolve }))
+      .mockResolvedValueOnce(completed('2'))
+    const wrapper = render()
+    mocks.route.params.planId = '2'
+    await flushPromises()
+    resolveFirst(completed()); await flushPromises()
+    expect(wrapper.findComponent({ name: 'LoadingListDetailDrawer' }).props('detail')).toEqual(completed('2'))
+    wrapper.unmount()
+  })
+})

src/modules/loading-lists/pages/ConfirmedLoadingListDetailView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import AdminPage from '@/shared/components/AdminPage.vue'
@@ -37,6 +37,14 @@ async function loadDetail() {
       return
     }
     detail.value = result
+    loading.value = false
+    if (route.query.print === '1') {
+      await nextTick()
+      if (sequence !== loadSequence) return
+      window.print()
+      const { print: _print, ...query } = route.query
+      await router.replace({ name: 'loading-list-detail', params: { planId: planId.value }, query })
+    }
   } catch (cause) {
     if (sequence !== loadSequence) return
     detail.value = null
@@ -51,6 +59,10 @@ function goBack() {
   else void router.push({ name: 'loading-lists' })
 }
 
+function printDetail() {
+  window.print()
+}
+
 onMounted(() => void loadDetail())
 watch([planId, warehouseId], () => void loadDetail())
 </script>
@@ -58,6 +70,7 @@ watch([planId, warehouseId], () => void loadDetail())
 <template>
   <AdminPage>
     <div class="confirmed-loading-detail-page">
+      <el-button v-if="detail" class="print-action" :disabled="loading" @click="printDetail">打印</el-button>
       <LoadingListDetailDrawer
         mode="confirmed"
         :loading="loading"
@@ -73,5 +86,6 @@ watch([planId, warehouseId], () => void loadDetail())
 
 <style scoped>
 .confirmed-loading-detail-page { display: grid; min-width: 0; max-width: 1280px; gap: 16px; }
+@media print { .print-action { display: none; } }
 @media (min-width: 1920px) { .confirmed-loading-detail-page { width: 100%; max-width: none; gap: 12px; } }
 </style>

src/modules/loading-lists/routes.test.ts

@@ -4,6 +4,7 @@ import { loadingListRoutes } from './routes'
 describe('loading list routes', () => {
   it('registers the confirmed list with its own read permission', () => {
     expect(loadingListRoutes.map((route) => [route.path, route.meta.permission])).toEqual([
+      ['loading-lists/:planId', 'platform:firstleg:loading-list:list'],
       ['loading-lists', 'platform:firstleg:loading-list:list'],
       ['loading-plans', 'platform:firstleg:preload:list'],
       ['loading-plans/:planId', 'platform:firstleg:preload:list'],

src/modules/loading-lists/routes.ts

@@ -1,6 +1,12 @@
 import type { RouteRecordRaw } from 'vue-router'
 
 export const loadingListRoutes = [
+  {
+    path: 'loading-lists/:planId',
+    name: 'loading-list-detail',
+    component: () => import('./pages/ConfirmedLoadingListDetailView.vue'),
+    meta: { title: '装柜清单详情', showPageHeading: false, permission: 'platform:firstleg:loading-list:list' },
+  },
   {
     path: 'loading-lists',
     name: 'loading-lists',