1

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

@@ -113,6 +113,9 @@ describe('LoadingListsView', () => {
     expect(source).toContain("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())')
+    expect(confirmedDetailSource).toContain('if (sequence !== loadSequence) return')
+    expect(preloadDetailSource).toContain('watch([planId, warehouseId], () => void loadDetail())')
   })
 
   it('uses backend readiness for whole-plan confirmation and translates blocking reasons', () => {
@@ -139,8 +142,8 @@ describe('LoadingListsView', () => {
     expect(source).toContain('flex-wrap: wrap')
     expect(source).toContain('@media (max-width: 720px)')
     expect(source).toContain('.row-actions { gap: 4px; }')
-    expect(source).toContain(':loading="loading"\n        stripe')
-    expect(detailSource).toContain(':columns="itemColumns"\n          stripe')
+    expect(source).toMatch(/:loading="loading"\s+stripe/)
+    expect(detailSource).toMatch(/:columns="itemColumns"\s+stripe/)
   })
 
   it('shows every prototype detail field that is backed by the loading item contract', () => {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { FileUp } from '@lucide/vue'
 import { ElMessage, type UploadFile } from 'element-plus'
@@ -28,13 +28,16 @@ const customsDialogOpen = ref(false)
 const customsFile = ref<File | null>(null)
 const customsSaving = ref(false)
 const customsError = ref<ApiErrorDetails | null>(null)
+let loadSequence = 0
 const planId = computed(() => String(route.params.planId || ''))
 const warehouseId = computed(() => typeof route.query.warehouseId === 'string' ? route.query.warehouseId : '')
 const canManageCustoms = computed(() => access.can('platform:firstleg:customs:manage'))
 
 async function loadDetail() {
+  const sequence = ++loadSequence
+  detail.value = null
   if (!planId.value || !warehouseId.value) {
-    detail.value = null
+    loading.value = false
     error.value = { code: 'MISSING_WAREHOUSE_CONTEXT', message: '该清单缺少所属仓库信息，无法安全查询详情，请返回列表重新进入。' }
     return
   }
@@ -49,17 +52,18 @@ async function loadDetail() {
         throw cause
       }),
     ])
+    if (sequence !== loadSequence) return
     if (result.summary.status !== 'COMPLETED') {
-      detail.value = null
       error.value = { code: 'MODE_STATUS_MISMATCH', message: '该计划尚未形成正式装柜清单，请从预装清单入口查看。' }
       return
     }
     detail.value = { ...result, customsDocument }
   } catch (cause) {
+    if (sequence !== loadSequence) return
     detail.value = null
     error.value = getApiErrorDetails(cause, '装柜清单详情加载失败，请稍后重试')
   } finally {
-    loading.value = false
+    if (sequence === loadSequence) loading.value = false
   }
 }
 
@@ -129,6 +133,7 @@ async function completeCustomsDocument() {
 }
 
 onMounted(() => void loadDetail())
+watch([planId, warehouseId], () => void loadDetail())
 </script>
 
 <template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import AdminPage from '@/shared/components/AdminPage.vue'
@@ -33,6 +33,7 @@ const remarkError = ref<ApiErrorDetails | null>(null)
 const remarkTarget = ref<LoadingItem | null>(null)
 const warehouseRemark = ref('')
 const remarkOperationId = ref('')
+let loadSequence = 0
 const planId = computed(() => String(route.params.planId || ''))
 const warehouseId = computed(() => typeof route.query.warehouseId === 'string' ? route.query.warehouseId : '')
 const canEdit = computed(() => access.can('platform:firstleg:preload:edit'))
@@ -47,7 +48,10 @@ const editRules: FormRules = {
 }
 
 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
   }
@@ -55,6 +59,7 @@ async function loadDetail() {
   error.value = null
   try {
     const result = await getPreloadPlan(planId.value, warehouseId.value)
+    if (sequence !== loadSequence) return
     if (!['EDITING', 'LOADING'].includes(result.summary.status)) {
       detail.value = null
       error.value = { code: 'MODE_STATUS_MISMATCH', message: '该计划不属于预装清单状态，请从对应清单入口查看。' }
@@ -62,9 +67,10 @@ async function loadDetail() {
     }
     detail.value = result
   } catch (cause) {
+    if (sequence !== loadSequence) return
     error.value = getApiErrorDetails(cause, '预装清单详情加载失败，请稍后重试')
   } finally {
-    loading.value = false
+    if (sequence === loadSequence) loading.value = false
   }
 }
 
@@ -183,6 +189,7 @@ async function submitConfirmPreload() {
 }
 
 onMounted(() => void loadDetail())
+watch([planId, warehouseId], () => void loadDetail())
 </script>
 
 <template>