优化

src/modules/customers/pages/CustomerDetailView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import {
   ArrowLeft, BarChart3, Box, Building2, CircleDollarSign, ClipboardList, Eye,
@@ -54,6 +54,9 @@ const orderPageSize = ref(10)
 const customerOrdersLoading = ref(false)
 const customerOrdersError = ref<ApiErrorDetails | null>(null)
 let skipNextOrderPageLoad = false
+let detailRequestSerial = 0
+let orderRequestSerial = 0
+let disposed = false
 const previews = ref<Record<string, PreviewState>>({})
 const previewOpen = ref(false)
 const previewName = ref('')
@@ -124,20 +127,23 @@ function transportLabel(order: PlatformFirstLegOrderResource) {
 }
 function formattedDate(value?: string | null) { return value ? value.replace('T', ' ').slice(0, 16) : '—' }
 
-async function loadCustomerOrders(page = orderPage.value) {
+async function loadCustomerOrders(page = orderPage.value, requestedTenantId = tenantId.value) {
   if (!access.can('platform:order:list')) return
+  const serial = ++orderRequestSerial
   customerOrdersLoading.value = true
   customerOrdersError.value = null
   try {
-    const result = await listPlatformFirstLegOrders({ tenantId: tenantId.value, page, size: orderPageSize.value })
+    const result = await listPlatformFirstLegOrders({ tenantId: requestedTenantId, page, size: orderPageSize.value })
+    if (disposed || serial !== orderRequestSerial || requestedTenantId !== tenantId.value) return
     customerOrders.value = result.records
     customerOrderTotal.value = result.total
     if (orderCount.value === null) orderCount.value = result.total
   } catch (error) {
+    if (disposed || serial !== orderRequestSerial || requestedTenantId !== tenantId.value) return
     customerOrders.value = []
     customerOrdersError.value = getApiErrorDetails(error, '运单记录加载失败，请稍后重试')
   } finally {
-    customerOrdersLoading.value = false
+    if (!disposed && serial === orderRequestSerial) customerOrdersLoading.value = false
   }
 }
 
@@ -178,15 +184,25 @@ async function openPreview(item: PlatformTenantQualification) {
 }
 
 async function loadDetail() {
+  const requestedTenantId = tenantId.value
+  const serial = ++detailRequestSerial
   loading.value = true
   loadError.value = null
   clearPreviews()
+  customer.value = null
+  qualifications.value = []
+  members.value = []
+  orderCount.value = null
+  customerOrders.value = []
+  customerOrderTotal.value = 0
+  customerOrdersError.value = null
   try {
     const [tenantResult, qualificationResult, memberResult] = await Promise.all([
-      getPlatformTenant(tenantId.value),
-      listTenantQualifications(tenantId.value),
-      listPlatformTenantMembers(tenantId.value),
+      getPlatformTenant(requestedTenantId),
+      listTenantQualifications(requestedTenantId),
+      listPlatformTenantMembers(requestedTenantId),
     ])
+    if (disposed || serial !== detailRequestSerial || requestedTenantId !== tenantId.value) return
     customer.value = tenantResult
     qualifications.value = qualificationResult
     members.value = memberResult
@@ -198,12 +214,13 @@ async function loadDetail() {
     if (access.can('platform:order:list')) {
       if (orderPage.value !== 1) skipNextOrderPageLoad = true
       orderPage.value = 1
-      customerOrders.value = []
-      customerOrderTotal.value = 0
-      optional.push(listPlatformTenantOrderCounts([tenantId.value]).then((records) => {
-        orderCount.value = Number(records.find((item) => String(item.tenantId) === tenantId.value)?.orderCount ?? 0)
-      }).catch(() => { orderCount.value = null }))
-      optional.push(loadCustomerOrders(1))
+      optional.push(listPlatformTenantOrderCounts([requestedTenantId]).then((records) => {
+        if (disposed || serial !== detailRequestSerial || requestedTenantId !== tenantId.value) return
+        orderCount.value = Number(records.find((item) => String(item.tenantId) === requestedTenantId)?.orderCount ?? 0)
+      }).catch(() => {
+        if (!disposed && serial === detailRequestSerial && requestedTenantId === tenantId.value) orderCount.value = null
+      }))
+      optional.push(loadCustomerOrders(1, requestedTenantId))
     } else {
       customerOrdersLoading.value = false
       customerOrdersError.value = null
@@ -212,11 +229,14 @@ async function loadDetail() {
     }
     await Promise.all(optional)
   } catch (error) {
+    if (disposed || serial !== detailRequestSerial || requestedTenantId !== tenantId.value) return
     customer.value = null
     qualifications.value = []
     members.value = []
     loadError.value = getApiErrorDetails(error, '客户详情加载失败，请稍后重试')
-  } finally { loading.value = false }
+  } finally {
+    if (!disposed && serial === detailRequestSerial) loading.value = false
+  }
 }
 
 function openOrder(order: PlatformFirstLegOrderResource) {
@@ -253,8 +273,25 @@ function handleTabKeydown(event: KeyboardEvent, key: DetailTab) {
   button?.focus()
   selectTab(tabs[next].key, button)
 }
-onMounted(loadDetail)
-onBeforeUnmount(clearPreviews)
+watch(tenantId, (value) => {
+  activeTab.value = 'basic'
+  if (value) void loadDetail()
+  else {
+    detailRequestSerial += 1
+    orderRequestSerial += 1
+    loading.value = false
+    customer.value = null
+    qualifications.value = []
+    members.value = []
+    customerOrders.value = []
+  }
+}, { immediate: true })
+onBeforeUnmount(() => {
+  disposed = true
+  detailRequestSerial += 1
+  orderRequestSerial += 1
+  clearPreviews()
+})
 watch(orderPage, (page, previousPage) => {
   if (skipNextOrderPageLoad) {
     skipNextOrderPageLoad = false