优化

src/modules/ocean-bookings/pages/OceanBookingDetailView.test.ts

@@ -39,11 +39,24 @@ describe('OceanBookingDetailView interaction contract', () => {
   it('provides guidance for every free-text booking field', () => {
     for (const placeholder of [
       '请输入提单号（可选）', '请输入船名', '请输入航次', '例如：CNNGB', '例如：宁波港',
-      '例如：USLAX', '例如：洛杉矶港', '请输入最终交货地点', '例如：CY-CY',
-      '例如：PREPAID', '请输入订舱备注（可选）',
+      '例如：USLAX', '例如：洛杉矶港', '请输入最终交货地点', '请输入订舱备注（可选）',
     ]) expect(source).toContain(`placeholder="${placeholder}"`)
   })
 
+  it('uses compact choices and keeps capacity snapshots behind one specification control', () => {
+    expect(source).toContain("const serviceTermOptions = ['CY-CY', 'CY-DOOR', 'DOOR-CY', 'DOOR-DOOR']")
+    expect(source).toContain("const freightTermOptions = ['PREPAID', 'COLLECT']")
+    expect(source).toContain("const containerTypeOptions = ['20GP', '40GP', '40HC', '40NR', '45HC']")
+    expect(source).toContain('<el-select v-model="form.data.serviceTerm"')
+    expect(source).toContain('<el-select v-model="form.data.freightTerm"')
+    expect(source).toContain('<el-select v-model="container.containerType"')
+    expect(source).toContain('<el-select v-model="container.containerKind"')
+    expect(source).toContain(':aria-label="`设置箱型 ${index + 1} 的容量与限重`"')
+    expect(source).toContain('function containerSpecificationLabel(')
+    expect(source).not.toContain('<el-input v-model="form.data.serviceTerm"')
+    expect(source).not.toContain('<el-input v-model="container.containerType"')
+  })
+
   it('captures channel, warehouse, capacity snapshots and uses the release DTO', () => {
     expect(source).toContain("listPlatformWarehouses({ page: 1, size: 200, warehouseType: 'DOMESTIC', status: 'ACTIVE' })")
     expect(source).toContain("warehouse.status === 'ACTIVE' && warehouse.warehouseType === 'DOMESTIC'")
@@ -78,7 +91,7 @@ describe('OceanBookingDetailView interaction contract', () => {
     expect(source).toContain('function removeContainer(index: number) { if (form.data.containerRequirements.length > 1)')
     expect(source).toContain('<table class="container-table">')
     expect(source).toContain('.container-table-wrap{overflow-x:auto')
-    expect(source).toContain('.container-table td :deep(.el-input),.container-table td :deep(.el-input-number){width:100%;min-width:0}')
+    expect(source).toContain('.container-table td :deep(.el-select),.container-table td :deep(.el-input-number){width:100%;min-width:0}')
     expect(source).toContain(':controls="false" placeholder="请输入数量"')
     expect(source).not.toContain('class="container-row"')
   })
@@ -95,11 +108,11 @@ describe('OceanBookingDetailView interaction contract', () => {
     expect(source).toContain('aria-label="航线船期"')
     expect(source).toContain('aria-label="条款与柜量"')
     expect(source).toContain('grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))')
-    expect(source).toContain('.booking-group__body--fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}')
+    expect(source).toContain('.booking-group__body--fields,.booking-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}')
     expect(source).toContain('class="booking-field--wide" label="交货地点"')
     expect(source).toContain('@media(max-width:720px){.booking-groups,.party-grid{grid-template-columns:1fr}')
-    expect(source).toContain('@media(max-width:520px){.booking-group__body--fields{grid-template-columns:1fr}')
-    expect(source).toContain('min-width:580px')
+    expect(source).toContain('@media(max-width:520px){.booking-group__body--fields,.booking-terms{grid-template-columns:1fr}')
+    expect(source).toContain('min-width:520px')
   })
 
   it('keeps the three real booking parties in their own three-column section', () => {
@@ -108,4 +121,12 @@ describe('OceanBookingDetailView interaction contract', () => {
     expect(source).toContain("{ value: 'NOTIFY_PARTY', label: '通知人' }")
     expect(source).toContain('.party-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))')
   })
+
+  it('shows client-side validation failures instead of rendering an empty error alert', () => {
+    expect(source).toContain(':title="actionError.message"')
+    expect(source).toContain("actionError.value = { message: '请完善客户、装柜仓库和物流渠道等必填信息' }")
+    expect(source).toContain("actionError.value = { message: '发货人、收货人和通知人名称均为必填项' }")
+    expect(source).toContain('规格（必填）')
+    expect(source).toContain('placeholder="单位名称（必填）"')
+  })
 })