优化

src/modules/suppliers/pages/SupplierDetailView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ArrowLeft, FileText, Pencil } from '@lucide/vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
@@ -17,13 +17,31 @@ const route = useRoute(); const router = useRouter(); const access = useAccessPr
 const canView = computed(() => access.can('platform:supplier:list'))
 const supplierId = computed(() => typeof route.params.id === 'string' ? route.params.id : '')
 const supplier = ref<Supplier | null>(null); const loading = ref(false); const error = ref<ApiErrorDetails | null>(null); const licenseOpen = ref(false)
+let loadSequence = 0
 const items = computed(() => supplier.value ? [
   ['供应商名称', supplier.value.name], ['供应商类别', categoryLabels[supplier.value.category]], ['国内/国外', supplier.value.scope ? scopeLabels[supplier.value.scope] : '—'], ['地区', supplier.value.region],
   ['法人代表', supplier.value.legalRepresentative], ['联系人', supplier.value.contactName], ['联系电话', supplier.value.phone], ['电子邮箱', supplier.value.email || '—'],
   ['营业执照号', supplier.value.businessLicenseNo || '—'], ['结算周期', settlementLabels[supplier.value.settlementPeriod]], ['公司地址', supplier.value.address || '—'], ['备注', supplier.value.remark || '—'],
 ] : [])
-async function load() { if (!canView.value) return; loading.value = true; error.value = null; try { supplier.value = await getSupplier(supplierId.value) } catch (cause) { error.value = getApiErrorDetails(cause, '供应商详情加载失败') } finally { loading.value = false } }
-onMounted(load)
+async function load() {
+  const requestedId = supplierId.value
+  const sequence = ++loadSequence
+  if (!canView.value || !requestedId) { supplier.value = null; loading.value = false; error.value = null; return }
+  supplier.value = null
+  loading.value = true
+  error.value = null
+  try {
+    const result = await getSupplier(requestedId)
+    if (sequence !== loadSequence || requestedId !== supplierId.value) return
+    supplier.value = result
+  } catch (cause) {
+    if (sequence !== loadSequence || requestedId !== supplierId.value) return
+    error.value = getApiErrorDetails(cause, '供应商详情加载失败')
+  } finally {
+    if (sequence === loadSequence) loading.value = false
+  }
+}
+watch(supplierId, () => { void load() }, { immediate: true })
 </script>
 
 <template>