优化

src/modules/trucking/components/TruckAppointmentForm.vue

@@ -50,11 +50,12 @@ const candidates = ref<TruckAppointmentCandidate[]>([])
 const optionsLoading = ref(false)
 const optionsError = ref('')
 let bookingLoadSequence = 0
+let optionsLoadSequence = 0
 const selectableCarriers = computed(() => carriers.value.filter((item) => (
   item.status === 'ACTIVE'
 )))
 const bookings = computed(() => {
-  const result = new Map<string, { id: string; bookingNo: string; billOfLadingNo: string; warehouseId: string; warehouseName: string | null; bookingDocumentReady: boolean }>()
+  const result = new Map<string, { id: string; bookingNo: string; billOfLadingNo: string | null; warehouseId: string; warehouseName: string | null; bookingDocumentReady: boolean }>()
   for (const item of candidates.value) if (!result.has(item.oceanBookingId)) result.set(item.oceanBookingId, {
     id: item.oceanBookingId,
     bookingNo: item.oceanBookingNo,
@@ -139,12 +140,14 @@ async function selectBooking(bookingId: string) {
   draft.billOfLadingNo = item.billOfLadingNo
 }
 async function loadOptions() {
+  const sequence = ++optionsLoadSequence
   optionsLoading.value = true; optionsError.value = ''
-  if (relationLocked.value) candidates.value = []
+  candidates.value = []
   const results = await Promise.allSettled([
     listSuppliers({ page: 1, size: 200, category: 'TRUCKING', status: 'ACTIVE' }),
     relationLocked.value ? Promise.resolve({ records: [] as TruckAppointmentCandidate[] }) : listTruckAppointmentCandidates({ page: 1, size: 200 }),
   ])
+  if (sequence !== optionsLoadSequence) return
   if (results[0].status === 'fulfilled') carriers.value = results[0].value.records.filter((item) => item.category === 'TRUCKING' && item.status === 'ACTIVE')
   if (results[1].status === 'fulfilled') candidates.value = results[1].value.records
   const failed = ['承运商', '可预约订舱柜次'].filter((_, index) => results[index]?.status === 'rejected')
@@ -179,7 +182,7 @@ watch(() => props.resource?.id, (id, previous) => { if (id && id !== previous) v
     <el-alert v-if="optionsError" type="warning" :closable="false" show-icon :title="optionsError" class="relation-alert"><el-button link type="warning" :loading="optionsLoading" @click="loadOptions">重新加载选项</el-button></el-alert>
     <el-row :gutter="16">
       <el-col :xs="24"><el-divider content-position="left">订舱与柜次（必填）</el-divider></el-col>
-      <el-col class="relation-column" :xs="24" :sm="12"><el-form-item label="订舱" prop="oceanBookingId"><el-select :model-value="draft.oceanBookingId" filterable :disabled="relationLocked" placeholder="请选择仍有可预约柜次的已放舱订舱" :loading="optionsLoading" no-data-text="暂无仍有可预约柜次的已放舱订舱" style="width:100%" @update:model-value="selectBooking(String($event || ''))"><el-option v-if="selectedBookingFallback" :key="selectedBookingFallback.id" :label="selectedBookingFallback.label" :value="selectedBookingFallback.id" disabled /><el-option v-for="item in bookings" :key="item.id" :label="`${item.bookingNo || '订舱号缺失'} / 提单号：${item.billOfLadingNo}`" :value="item.id" /></el-select></el-form-item></el-col>
+      <el-col class="relation-column" :xs="24" :sm="12"><el-form-item label="订舱" prop="oceanBookingId"><el-select :model-value="draft.oceanBookingId" filterable :disabled="relationLocked" placeholder="请选择仍有可预约柜次的已放舱订舱" :loading="optionsLoading" no-data-text="暂无仍有可预约柜次的已放舱订舱" style="width:100%" @update:model-value="selectBooking(String($event || ''))"><el-option v-if="selectedBookingFallback" :key="selectedBookingFallback.id" :label="selectedBookingFallback.label" :value="selectedBookingFallback.id" disabled /><el-option v-for="item in bookings" :key="item.id" :label="`${item.bookingNo || '订舱号缺失'} / 提单号：${item.billOfLadingNo || '缺失'}`" :value="item.id" /></el-select></el-form-item></el-col>
       <el-col class="relation-column" :xs="24" :sm="12"><el-form-item label="柜次" prop="containerBookingId"><el-select :model-value="draft.containerBookingId" filterable :disabled="relationLocked || !draft.oceanBookingId || optionsLoading || bookingContainersLoading" placeholder="请先选择订舱，再选择可预约柜次" :loading="optionsLoading || bookingContainersLoading" :no-data-text="draft.oceanBookingId ? '该订舱暂无可预约柜次' : '请先选择订舱'" style="width:100%" @update:model-value="selectContainer(String($event || ''))"><el-option v-if="selectedContainerFallback" :key="selectedContainerFallback.id" :label="selectedContainerFallback.label" :value="selectedContainerFallback.id" disabled /><el-option v-for="item in selectableContainers" :key="item.containerBookingId" :label="containerOptionLabel(item)" :value="item.containerBookingId" /></el-select><div v-if="bookingContainersError" class="field-error"><span>{{ bookingContainersError.message }}</span><ApiErrorMeta :details="bookingContainersError" /><el-button link type="primary" :loading="bookingContainersLoading" @click="draft.oceanBookingId && loadCurrentBookingContext(String(draft.oceanBookingId))">重新加载</el-button></div><div v-else-if="draft.oceanBookingId && !optionsLoading && !bookingContainersLoading && !selectableContainers.length && !relationLocked" class="field-hint">该订舱当前没有可创建拖车预约的柜次。</div></el-form-item></el-col>
       <el-col :xs="24"><el-divider content-position="left">基本信息</el-divider></el-col>
       <el-col v-if="draft.oceanBookingId && !bookingContainersLoading && !bookingContainersError && !draft.billOfLadingNo?.trim()" :xs="24"><el-alert title="所选订舱缺少有效提单号，暂不能创建或保存拖车预约" type="warning" :closable="false" show-icon /></el-col>