1

src/modules/trucking/components/TruckAppointmentForm.test.ts

@@ -47,6 +47,16 @@ describe('TruckAppointmentForm interaction contract', () => {
     expect(source).not.toContain('const relationText = computed')
   })
 
+  it('loads readonly detail options and preserves relation snapshots outside the first page', () => {
+    expect(source).toContain('onMounted(() => { void loadOptions() })')
+    expect(source).toContain('const selectedContainerFallback = computed')
+    expect(source).toContain('const selectedBookingFallback = computed')
+    expect(source).toContain('const selectedWarehouseFallback = computed')
+    expect(source).toContain('v-if="selectedContainerFallback"')
+    expect(source).toContain('v-if="selectedBookingFallback"')
+    expect(source).toContain('v-if="selectedWarehouseFallback"')
+  })
+
   it('keeps booking, cabinet and loading plan optional and only uses them for completion hints', () => {
     expect(source).toContain('订舱、柜次和装柜计划均为可选关联，不影响独立开立拖车预约')
     expect(source).toContain('class="relation-note"')

src/modules/trucking/components/TruckAppointmentForm.vue

@@ -53,6 +53,27 @@ const selectableCarriers = computed(() => carriers.value.filter((item) => (
   item.status === 'ACTIVE'
 )))
 const selectedReleasedBooking = computed(() => bookings.value.find((item) => item.id === draft.oceanBookingId && item.status === 'RELEASED') || null)
+const selectedContainerFallback = computed(() => {
+  const id = draft.containerBookingId
+  const snapshot = props.resource
+  if (!id || containers.value.some((item) => String(item.id) === String(id)) || String(snapshot?.containerBookingId) !== String(id)) return null
+  return {
+    id: String(id),
+    label: `柜次号：${snapshot?.cabinetNo || '待生成'} / 集装箱号：${snapshot?.containerNo || '待录入'}`,
+  }
+})
+const selectedBookingFallback = computed(() => {
+  const id = draft.oceanBookingId
+  const snapshot = props.resource
+  if (!id || bookings.value.some((item) => String(item.id) === String(id)) || String(snapshot?.oceanBookingId) !== String(id)) return null
+  return { id: String(id), label: snapshot?.oceanBookingNo || '订舱号缺失' }
+})
+const selectedWarehouseFallback = computed(() => {
+  const id = draft.warehouseId
+  const snapshot = props.resource
+  if (!id || selectableWarehouses.value.some((item) => String(item.id) === String(id)) || String(snapshot?.warehouseId) !== String(id)) return null
+  return { id: String(id), label: snapshot?.warehouseName || '当前仓库（需重新选择）' }
+})
 function customerLabel(customer: PlatformTenantResource) { return customer.tenantName }
 function selectCustomer(customerId: string) { const customer = selectableCustomers.value.find((item) => String(item.id) === customerId); draft.customerId = customer?.id ? String(customer.id) : null; draft.customerName = customer ? customerLabel(customer) : null; derivedCustomerSource.value = null; relationWarning.value = '' }
 function selectCarrier(carrierId: string) { const carrier = selectableCarriers.value.find((item) => String(item.id) === carrierId); draft.carrierId = carrier?.id || null; draft.carrierName = carrier?.name || null }
@@ -115,7 +136,7 @@ async function loadOptions() {
 async function validate() { return formRef.value?.validate() }
 async function submitForm() { if (await formRef.value?.validate()) emit('submit') }
 defineExpose({ validate })
-onMounted(() => { if (!props.readonly) void loadOptions() })
+onMounted(() => { void loadOptions() })
 watch(() => props.readonly, (readonly) => { if (!readonly && !customers.value.length) void loadOptions() })
 </script>
 
@@ -131,9 +152,9 @@ watch(() => props.readonly, (readonly) => { if (!readonly && !customers.value.le
       <el-col :xs="24" :sm="12"><el-form-item label="预计装箱时间" prop="plannedLoadingAt"><el-date-picker v-model="draft.plannedLoadingAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择预计装箱时间" style="width:100%" /></el-form-item></el-col>
       <el-col :xs="24" :sm="12"><el-form-item label="提单号"><el-input v-model="draft.billOfLadingNo" :disabled="Boolean(selectedReleasedBooking)" maxlength="128" placeholder="草稿可暂不填写，派车前必填" /><div v-if="selectedReleasedBooking" class="field-hint">已从放舱订舱回填并锁定</div></el-form-item></el-col>
       <el-col :xs="24"><el-divider content-position="left">可选关联</el-divider></el-col>
-      <el-col :xs="24" :sm="12"><el-form-item label="关联柜次（可选）"><el-select :model-value="draft.containerBookingId" filterable clearable placeholder="可选择柜次辅助补全" :loading="optionsLoading" no-data-text="暂无可关联柜次" style="width:100%" @update:model-value="selectContainer(String($event || ''))"><el-option v-for="item in containers" :key="item.id" :label="`柜次号：${item.cabinetNo || item.bookingNo || '待生成'} / 集装箱号：${item.containerNo || '待录入'}`" :value="item.id" /></el-select></el-form-item></el-col>
-      <el-col :xs="24" :sm="12"><el-form-item label="关联订舱（可选）"><el-select :model-value="draft.oceanBookingId" filterable clearable placeholder="可选择订舱辅助补全" :loading="optionsLoading" no-data-text="暂无可关联订舱" style="width:100%" @update:model-value="selectBooking(String($event || ''))"><el-option v-for="item in bookings" :key="item.id" :label="item.bookingNo || '订舱号缺失'" :value="item.id" /></el-select></el-form-item></el-col>
-      <el-col :xs="24" :sm="12"><el-form-item label="仓库"><el-select v-model="draft.warehouseId" filterable clearable placeholder="请选择仓库" :loading="optionsLoading" style="width:100%"><el-option v-for="item in selectableWarehouses" :key="String(item.id)" :label="`${item.warehouseName}（${item.warehouseCode}）`" :value="String(item.id)" /></el-select></el-form-item></el-col>
+      <el-col :xs="24" :sm="12"><el-form-item label="关联柜次（可选）"><el-select :model-value="draft.containerBookingId" filterable clearable placeholder="可选择柜次辅助补全" :loading="optionsLoading" no-data-text="暂无可关联柜次" style="width:100%" @update:model-value="selectContainer(String($event || ''))"><el-option v-if="selectedContainerFallback" :key="selectedContainerFallback.id" :label="selectedContainerFallback.label" :value="selectedContainerFallback.id" /><el-option v-for="item in containers" :key="item.id" :label="`柜次号：${item.cabinetNo || item.bookingNo || '待生成'} / 集装箱号：${item.containerNo || '待录入'}`" :value="item.id" /></el-select></el-form-item></el-col>
+      <el-col :xs="24" :sm="12"><el-form-item label="关联订舱（可选）"><el-select :model-value="draft.oceanBookingId" filterable clearable 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" /><el-option v-for="item in bookings" :key="item.id" :label="item.bookingNo || '订舱号缺失'" :value="item.id" /></el-select></el-form-item></el-col>
+      <el-col :xs="24" :sm="12"><el-form-item label="仓库"><el-select v-model="draft.warehouseId" filterable clearable placeholder="请选择仓库" :loading="optionsLoading" style="width:100%"><el-option v-if="selectedWarehouseFallback" :key="selectedWarehouseFallback.id" :label="selectedWarehouseFallback.label" :value="selectedWarehouseFallback.id" /><el-option v-for="item in selectableWarehouses" :key="String(item.id)" :label="`${item.warehouseName}（${item.warehouseCode}）`" :value="String(item.id)" /></el-select></el-form-item></el-col>
       <el-col v-if="resource" :xs="24" :sm="12"><el-form-item label="派车单号"><el-input :model-value="resource.appointmentNo || ''" disabled /></el-form-item></el-col>
       <el-col :xs="24"><el-divider content-position="left">运输与时间计划</el-divider></el-col>
       <el-col :xs="24" :sm="12"><el-form-item label="车队联系人"><el-input v-model="draft.fleetContact" placeholder="请输入车队联系人" /></el-form-item></el-col>