优化

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

@@ -5,7 +5,7 @@ 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('../api/platformLoadingLists', () => ({ getConfirmedLoadingList: mocks.get, getPreloadPlan: vi.fn() }))
 vi.mock('@/shared/api/http', () => ({ getApiErrorDetails: (cause: Error) => ({ message: cause.message }) }))
 
 function render() {

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

@@ -1,57 +1,23 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import LoadingListDetailDrawer from '../components/LoadingListDetailDrawer.vue'
-import {
-  getConfirmedLoadingList,
-  type ConfirmedSummary,
-  type LoadingDetail,
-} from '../api/platformLoadingLists'
+import { useLoadingListDetail } from '../useLoadingListDetail'
+import { printLoadingList } from '../printLoadingList'
 
 const route = useRoute()
 const router = useRouter()
-const loading = ref(false)
-const detail = ref<LoadingDetail<ConfirmedSummary> | null>(null)
-const error = ref<ApiErrorDetails | null>(null)
-let loadSequence = 0
+const { detail, loading, error, load } = useLoadingListDetail()
 const planId = computed(() => String(route.params.planId || ''))
 const warehouseId = computed(() => typeof route.query.warehouseId === 'string' ? route.query.warehouseId : '')
 
 async function loadDetail() {
-  const sequence = ++loadSequence
-  detail.value = null
-  if (!planId.value || !warehouseId.value) {
-    loading.value = false
-    error.value = { code: 'MISSING_WAREHOUSE_CONTEXT', message: '该清单缺少所属仓库信息，无法安全查询详情，请返回列表重新进入。' }
-    return
-  }
-  loading.value = true
-  error.value = null
-  try {
-    const result = await getConfirmedLoadingList(planId.value, warehouseId.value)
-    if (sequence !== loadSequence) return
-    if (result.summary.status !== 'COMPLETED') {
-      error.value = { code: 'MODE_STATUS_MISMATCH', message: '该计划尚未形成正式装柜清单，请从预装清单入口查看。' }
-      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
-    error.value = getApiErrorDetails(cause, '装柜清单详情加载失败，请稍后重试')
-  } finally {
-    if (sequence === loadSequence) loading.value = false
-  }
+  const result = await load('confirmed', planId.value, warehouseId.value)
+  if (!result || detail.value !== result || route.query.print !== '1') return
+  await printLoadingList()
+  const { print: _print, ...query } = route.query
+  await router.replace({ name: 'loading-list-detail', params: { planId: planId.value }, query })
 }
 
 function goBack() {
@@ -59,10 +25,6 @@ function goBack() {
   else void router.push({ name: 'loading-lists' })
 }
 
-function printDetail() {
-  window.print()
-}
-
 onMounted(() => void loadDetail())
 watch([planId, warehouseId], () => void loadDetail())
 </script>
@@ -70,8 +32,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
+      <LoadingListDetailDrawer dense
         mode="confirmed"
         :loading="loading"
         :detail="detail"
@@ -86,6 +47,5 @@ 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>