优化

src/modules/ocean-bookings/pages/OceanBookingDetailView.vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
 import { useRoute, useRouter } from 'vue-router'
-import { ArrowLeft, Plus, Save, SlidersHorizontal, Trash2 } from '@lucide/vue'
+import { ArrowLeft, Plus, Save, Trash2 } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { getApiErrorDetails } from '@/shared/api/http'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
@@ -12,6 +12,7 @@ import AdminPage from '@/shared/components/AdminPage.vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
 import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
 import PageToolbar from '@/shared/components/PageToolbar.vue'
+import { CONTAINER_SPECIFICATIONS } from '@/shared/domain/containerSpecifications'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import { listPlatformPartners, type PlatformPartnerResource } from '@/modules/master-data'
 import { listSuppliers, type Supplier } from '@/modules/suppliers'
@@ -34,14 +35,14 @@ import type {
   OceanBookingStatus,
 } from '../types'
 import { oceanBookingStatusLabel } from '../status'
-import { containerRequirementError, createBlankContainerRequirement } from '../containerRequirements'
+import { containerRequirementError, createBlankContainerRequirement, selectContainerRequirementType } from '../containerRequirements'
 
 const partyTypes = [
   { value: 'SHIPPER', label: '发货人' },
   { value: 'CONSIGNEE', label: '收货人' },
   { value: 'NOTIFY_PARTY', label: '通知人' },
 ] as const
-const containerTypeOptions = ['20GP', '40GP', '40HC', '40NR', '45HC']
+const containerTypeOptions = CONTAINER_SPECIFICATIONS
 const containerKindOptions = [
   { value: 'FCL', label: '整箱 FCL' },
   { value: 'LCL', label: '拼箱 LCL' },
@@ -338,7 +339,6 @@ function validateContainerRequirements() {
   return true
 }
 function containerSpecificationLabel(container: OceanBookingDraftData['containerRequirements'][number]) {
-  if (!(Number(container.capacityCbm) > 0) || !(Number(container.maxWeightKg) > 0)) return '设置规格'
   return `${container.capacityCbm} m³ / ${container.maxWeightKg} kg`
 }
 function addContainer() { form.data.containerRequirements.push(createBlankContainerRequirement()) }
@@ -414,18 +414,9 @@ onMounted(() => { void load(); void loadOptions() })
                       </el-tooltip>
                       <span v-else aria-hidden="true">—</span>
                     </td>
-                    <td><el-select v-model="container.containerType" :disabled="!editable" placeholder="请选择箱型"><el-option v-for="value in containerTypeOptions" :key="value" :label="value" :value="value" /></el-select></td>
+                    <td><el-select :model-value="container.containerType" :disabled="!editable" placeholder="请选择箱型" @update:model-value="selectContainerRequirementType(container, String($event || ''))"><el-option v-for="item in containerTypeOptions" :key="item.type" :label="item.type" :value="item.type" /></el-select></td>
                     <td><el-select v-model="container.containerKind" :disabled="!editable" placeholder="请选择箱种"><el-option v-for="item in containerKindOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select></td>
-                    <td class="container-table__specification">
-                      <el-popover v-if="editable" placement="bottom" :width="300" trigger="click">
-                        <template #reference><el-button size="small" plain :type="Number(container.capacityCbm) > 0 && Number(container.maxWeightKg) > 0 ? 'default' : 'warning'" :aria-label="`设置箱型 ${index + 1} 的容量与限重`"><SlidersHorizontal :size="14" />{{ containerSpecificationLabel(container) }}</el-button></template>
-                        <div class="container-specification-fields">
-                          <label><span>容量（m³）</span><el-input-number v-model="container.capacityCbm" :min="0.01" :precision="2" :controls="false" placeholder="请输入容量" /></label>
-                          <label><span>限重（kg）</span><el-input-number v-model="container.maxWeightKg" :min="0.01" :precision="2" :controls="false" placeholder="请输入限重" /></label>
-                        </div>
-                      </el-popover>
-                      <span v-else>{{ containerSpecificationLabel(container) }}</span>
-                    </td>
+                    <td class="container-table__specification"><span>{{ containerSpecificationLabel(container) }}</span></td>
                     <td><el-input-number v-model="container.quantity" :disabled="!editable" :min="1" :max="999" :controls="false" placeholder="请输入数量" /></td>
                   </tr>
                 </tbody>