2026-10-23 10:51:31 +08:00
6 changed files with 285 additions and 167 deletions
@@ -19,3 +19,16 @@
 |---|---|---|---|
 | 美本土散板 | 新增 | 保持现有独立路由和表单容器；同步商品、预计托数、四项联系信息及必填的当地取送时间；删除运输方式、柜型和下单安排项 | 自动测试与人工视觉分开；待人工截图确认 |
 | 美本土散板 | 列表、详情 | 保持现有独立路由；展示同一保存值和真实承运安排，不访问运力池 | 待人工截图确认 |
+
+
+## Admin / Client 统一运输下单表单（2026-10-19）
+
+依据：当前对话明确要求“最多 Admin 添加客户选项，Client 从登录客户下单”，覆盖此前两端独立排版结论。保留应用壳层、正式路由及权限；业务表单统一为同一字段清单、排列、控件、默认值、校验及提交转换。
+
+| 页面 | 操作 | 承载与现有依据 | 本轮统一结论 | 验收 |
+|---|---|---|---|---|
+| 本土卡车 | Client 新增、Admin 新增/编辑 | 既有独立页面；原客户端截图及当前统一确认 | 运输信息双列，车辆必选；两端联系人/电话及详细地址左右对应；货物件重体；费用币种与两个分钟时间；备注；底部取消/提交。Admin 新增前置客户选择 | 自动合同及行为测试；待人工 1920×1080、100% 截图 |
+| 本土散板 | Client 新增、Admin 新增/编辑 | 既有独立页面；当前统一确认 | 与卡车共用表单；保留商品名、预计托数和件重体，移除车型；其余相同。Admin 新增前置客户选择 | 同上 |
+| 两类业务 | 列表、详情、承运安排 | 既有独立路由及只读承运摘要 | 本轮不改变承载；Client 不新增编辑路由 | 既有行为回归 |
+
+统一表单组件和转换逻辑各自位于应用内部，运行时不跨应用引用。两端业务组件源码一致性另作定向检查；下单数据不允许混入客户标识，Admin 在 API 参数显式选择客户，Client 由认证会话确定客户。
@@ -7,6 +7,9 @@ import ts from 'typescript'
 const api = readFileSync(new URL('./api/businessOrders.ts', import.meta.url), 'utf8')
 const routes = readFileSync(new URL('./routes.ts', import.meta.url), 'utf8')
 const view = readFileSync(new URL('./components/BusinessOrdersView.vue', import.meta.url), 'utf8')
+const demandComponent = readFileSync(new URL('./components/TransportDemandForm.vue', import.meta.url), 'utf8')
+const demandLogic = ts.transpileModule(readFileSync(new URL('./transportDemandForm.ts', import.meta.url), 'utf8'), { compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.ESNext } }).outputText.replace(/^export /gm, '')
+const demandHelpers = runInNewContext(`${demandLogic}\n({ createTransportDemandForm, transportDemandRules, transportDemandError, buildTransportDemand })`)
 const procurementApi = readFileSync(new URL('./api/procurement.ts', import.meta.url), 'utf8')
 const procurementView = readFileSync(new URL('./views/ProcurementView.vue', import.meta.url), 'utf8')

@@ -106,7 +109,7 @@ test('preserves the existing transport responsive rules without adding a narrow-
  assert.match(view, /queryFields/)
  assert.match(view, /\.detail-grid \{ grid-template-columns: 1fr; \}/)
  assert.match(view, /\.form-card :deep\(\.el-form-item\) \{ display: block; \}/)
-  assert.match(view, /\.budget-form-item :deep\(\.el-form-item__content\) \{ display: flex; flex-wrap: nowrap; \}/)
+  assert.match(demandComponent, /\.transport-demand-budget \{ display: grid; width: 100%/)
 })

 test('uses the shared dense order-list and detail visual language', () => {
@@ -121,18 +124,18 @@ function transportHarness(kind = 'trucking', failFirst = false) {
  const script = view.match(/<script setup lang="ts">([\s\S]*?)<\/script>/)[1]
  const compiled = ts.transpileModule(script, { compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.ESNext } }).outputText
    .replace(/^import .*?;$/gm, '').replace(/^export \{\};$/gm, '')
-  const harness = runInNewContext(`${compiled}\n({ form, rules, formRef, submit, detail, detailFields })`, {
+  const harness = runInNewContext(`${compiled}\n({ form, formRef, submit, detail, detailFields })`, {
    defineProps: () => ({ kind, createPage: true, detailPage: false }),
    withDefaults: props => props,
    computed: getter => ({ get value() { return typeof getter === 'function' ? getter() : getter.get() } }),
    reactive: value => value, ref: value => ({ value }), onMounted: () => {}, watch: () => {},
    useAuthStore: () => ({ hasPermission: () => true }), useRouter: () => ({ push: async () => {} }), useRoute: () => ({ params: {} }),
-    DEFAULT_CONTAINER_TYPE: '40HQ', poolOrderStatusLabels: {},
+    ...demandHelpers, poolOrderStatusLabels: {},
    ElMessage: { success: () => {}, error: () => {} },
    createTransport: async (business, payload) => { calls.push({ business, payload: { ...payload } }); if (failFirst && calls.length === 1) throw new Error('retry'); },
  })
  harness.formRef.value = { validate: async () => true, clearValidate: () => {} }
-  return { ...harness, calls }
+  return { ...harness, calls, rules: { get value() { return demandHelpers.transportDemandRules(kind === 'trucking' ? 'truck' : 'looseboard', harness.form) } } }
 }

 test('truck requires both contacts vehicle and minute times without inheriting looseboard fields', () => {
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { Package } from '@lucide/vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { ElMessage, type FormInstance } from 'element-plus'
+import TransportDemandForm from './TransportDemandForm.vue'
+import { createTransportDemandForm, transportDemandError, buildTransportDemand, type TransportDemandForm as DemandFormModel } from '../transportDemandForm'
 import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
 import type { TableAction } from '@/components/common/tableActions'
@@ -33,27 +34,7 @@ type PageMode = 'list' | 'create' | 'detail'

 interface ColumnDefinition { key: string; label: string; width?: number }

-interface BusinessForm {
-  productName: string
-  estimatedPalletCount: number
-  origin: string
-  originAddress: string
-  destination: string
-  destinationAddress: string
-  packageCount: number
-  totalWeightKg: number
-  totalVolumeCbm: number
-  budgetAmount?: number
-  currency: string
-  vehicleType: '' | 'PALLET_15' | 'PALLET_30'
-  originContactName: string
-  originContactPhone: string
-  destinationContactName: string
-  destinationContactPhone: string
-  pickupAt: string
-  deliveryAt: string
-  remark: string
-}
+type BusinessForm = DemandFormModel

 const configuration = computed(() => ({
  trucking: {
@@ -133,19 +114,6 @@ const queryFields = computed<QueryField[]>(() => [
 ])

 const form = reactive<BusinessForm>(emptyForm())
-const rules = computed<FormRules<BusinessForm>>(() => ({
-  origin: [{ required: true, message: '请输入起运地', trigger: 'blur' }],
-  destination: [{ required: true, message: '请输入目的地', trigger: 'blur' }],
-  ...(props.kind === 'trucking' ? { vehicleType: [{ required: true, message: '请选择车辆类型', trigger: 'change' }] } : {}),
-  originContactName: [{ required: true, message: '请输入起运地联系人', trigger: 'blur' }],
-  originContactPhone: [{ required: true, message: '请输入起运地联系电话', trigger: 'blur' }],
-  destinationContactName: [{ required: true, message: '请输入目的地联系人', trigger: 'blur' }],
-  destinationContactPhone: [{ required: true, message: '请输入目的地联系电话', trigger: 'blur' }],
-  pickupAt: [{ required: true, message: '请选择取货时间', trigger: 'change' }],
-  deliveryAt: [{ required: true, message: '请选择送货时间', trigger: 'change' }, {
-    validator: (_rule: unknown, value: string, callback: (error?: Error) => void) => callback(value && form.pickupAt && value < form.pickupAt ? new Error('送货时间不能早于取货时间') : undefined), trigger: 'change',
-  }],
-}))

 const detailFields = computed(() => {
  if (!detail.value) return []
@@ -177,14 +145,7 @@ const tableColumns = computed<DataTableColumn[]>(() => [

 const detailStatus = computed(() => detail.value ? statusLabel(detail.value.summary.status) : '—')

-function emptyForm(): BusinessForm {
-  return {
-    productName: '', estimatedPalletCount: 0, origin: '', originAddress: '',
-    destination: '', destinationAddress: '', packageCount: 0,
-    totalWeightKg: 0, totalVolumeCbm: 0, currency: 'USD',
-    remark: '', vehicleType: '', originContactName: '', originContactPhone: '', destinationContactName: '', destinationContactPhone: '', pickupAt: '', deliveryAt: '',
-  }
-}
+function emptyForm(): BusinessForm { return createTransportDemandForm() }

 function resetForm() { Object.assign(form, emptyForm()); submitKey.value = ''; formRef.value?.clearValidate() }
 function read(source: object, key: string) { return Reflect.get(source, key) as unknown }
@@ -287,35 +248,15 @@ async function loadDetail() {
 }

 async function submit() {
-  if (props.kind === 'looseboard' && form.pickupAt && form.deliveryAt && form.deliveryAt < form.pickupAt) { ElMessage.error('送达时间不能早于取货时间'); return }
+  const failure = transportDemandError(props.kind === 'trucking' ? 'truck' : 'looseboard', form)
+  if (failure) { ElMessage.error(failure); return }
  if (!await formRef.value?.validate().catch(() => false)) return
  submitting.value = true
  const stableSubmitKey = submitKey.value || idempotencyKey()
  submitKey.value = stableSubmitKey
  try {
-    const base = {
-      origin: form.origin, originAddress: form.originAddress || undefined,
-      destination: form.destination, destinationAddress: form.destinationAddress || undefined,
-      packageCount: form.packageCount,
-      totalWeightKg: form.totalWeightKg, totalVolumeCbm: form.totalVolumeCbm,
-      budgetAmount: form.budgetAmount, currency: form.currency || undefined,
-      remark: form.remark || undefined,
-      idempotencyKey: stableSubmitKey,
-    }
-    if (props.kind === 'trucking') {
-      if (!form.vehicleType) return
-      await createTransport('trucking', { ...base, vehicleType: form.vehicleType,
-        originContactName: form.originContactName, originContactPhone: form.originContactPhone,
-        destinationContactName: form.destinationContactName, destinationContactPhone: form.destinationContactPhone,
-        pickupAt: form.pickupAt, deliveryAt: form.deliveryAt,
-      })
-    } else {
-      await createTransport('looseboard', { ...base, productName: form.productName || undefined, estimatedPalletCount: form.estimatedPalletCount,
-        originContactName: form.originContactName, originContactPhone: form.originContactPhone,
-        destinationContactName: form.destinationContactName, destinationContactPhone: form.destinationContactPhone,
-        pickupAt: form.pickupAt, deliveryAt: form.deliveryAt,
-      })
-    }
+    if (props.kind === 'trucking') await createTransport('trucking', { ...buildTransportDemand('truck', form), idempotencyKey: stableSubmitKey })
+    else await createTransport('looseboard', { ...buildTransportDemand('looseboard', form), idempotencyKey: stableSubmitKey })
    ElMessage.success('订单提交成功')
    resetForm()
    if (props.createPage) await router.push({ name: listRouteName.value })
@@ -383,64 +324,8 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
      </section>
    </section>

-    <el-card v-else-if="kind === 'looseboard'" shadow="never" class="form-card looseboard-form-card">
-      <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
-        <div class="form-grid two-col lower-grid">
-          <el-form-item label="起运地" prop="origin"><el-input v-model.trim="form.origin" maxlength="255" placeholder="城市 / 港口 / 州" /></el-form-item>
-          <el-form-item label="目的地" prop="destination"><el-input v-model.trim="form.destination" maxlength="255" placeholder="城市 / 州" /></el-form-item>
-          <el-form-item label="起运地联系人" prop="originContactName"><el-input v-model.trim="form.originContactName" maxlength="128" placeholder="请输入起运地联系人" /></el-form-item>
-          <el-form-item label="目的地联系人" prop="destinationContactName"><el-input v-model.trim="form.destinationContactName" maxlength="128" placeholder="请输入目的地联系人" /></el-form-item>
-          <el-form-item label="起运地联系电话" prop="originContactPhone"><el-input v-model.trim="form.originContactPhone" type="tel" maxlength="128" placeholder="请输入起运地联系电话" /></el-form-item>
-          <el-form-item label="目的地联系电话" prop="destinationContactPhone"><el-input v-model.trim="form.destinationContactPhone" type="tel" maxlength="128" placeholder="请输入目的地联系电话" /></el-form-item>
-        </div>
-        <div class="form-section cargo-section"><h3><span class="section-icon"><Package :size="14" /></span>托载</h3><div class="form-grid cargo-grid">
-          <el-form-item label="商品名称"><el-input v-model.trim="form.productName" placeholder="请输入商品名称" /></el-form-item>
-          <el-form-item label="预计托数"><el-input-number v-model="form.estimatedPalletCount" :min="0" controls-position="right" placeholder="请输入预计托数" /></el-form-item>
-          <el-form-item label="总重量 (kg)"><el-input-number v-model="form.totalWeightKg" :min="0" :precision="2" controls-position="right" placeholder="请输入总重量" /></el-form-item>
-          <el-form-item label="总体积 (m³)"><el-input-number v-model="form.totalVolumeCbm" :min="0" :precision="3" controls-position="right" placeholder="请输入总体积" /></el-form-item>
-        </div></div>
-        <div class="form-grid two-col lower-grid">
-          <el-form-item label="预算总价"><el-input-number v-model="form.budgetAmount" :min="0" :precision="2" controls-position="right" placeholder="0.00" /></el-form-item>
-          <el-form-item label="预算币种"><el-select v-model="form.currency"><el-option label="USD" value="USD" /><el-option label="CNY" value="CNY" /></el-select></el-form-item>
-          <el-form-item label="取货时间" prop="pickupAt"><el-date-picker v-model="form.pickupAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择取货时间" @change="formRef?.validateField('deliveryAt').catch(() => undefined)" /></el-form-item>
-          <el-form-item label="送货时间" prop="deliveryAt"><el-date-picker v-model="form.deliveryAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择送货时间" /></el-form-item>
-        </div>
-        <el-collapse class="looseboard-extra"><el-collapse-item title="补充信息（选填）" name="extra"><div class="form-grid two-col">
-          <el-form-item label="件数"><el-input-number v-model="form.packageCount" :min="0" :precision="0" controls-position="right" placeholder="请输入件数" /></el-form-item>
-          <el-form-item label="备注"><el-input v-model="form.remark" type="textarea" maxlength="1000" :rows="2" placeholder="请输入备注（选填）" /></el-form-item>
-          <el-form-item label="起运地址补充"><el-input v-model.trim="form.originAddress" maxlength="500" placeholder="请输入详细起运地址（选填）" /></el-form-item>
-          <el-form-item label="目的地址补充"><el-input v-model.trim="form.destinationAddress" maxlength="500" placeholder="请输入详细目的地址（选填）" /></el-form-item>
-        </div></el-collapse-item></el-collapse>
-        <div class="form-actions"><el-button @click="returnToList">取消</el-button><el-button v-if="canCreate" type="primary" :loading="submitting" @click="submit">提交订单</el-button></div>
-      </el-form>
-    </el-card>
-
    <el-card v-else shadow="never" class="form-card">
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
-          <el-form-item v-if="kind === 'trucking'" label="车辆类型" prop="vehicleType"><el-select v-model="form.vehicleType" placeholder="请选择车辆类型"><el-option label="15拖" value="PALLET_15" /><el-option label="30拖" value="PALLET_30" /></el-select></el-form-item>
-          <el-form-item label="起运地" prop="origin"><el-input v-model.trim="form.origin" maxlength="255" placeholder="请输入起运地" /></el-form-item>
-          <el-form-item label="起运地址"><el-input v-model.trim="form.originAddress" maxlength="500" placeholder="请输入详细起运地址" /></el-form-item>
-          <template v-if="kind === 'trucking'">
-            <el-form-item label="起运地联系人" prop="originContactName"><el-input v-model.trim="form.originContactName" maxlength="128" placeholder="请输入起运地联系人" /></el-form-item>
-            <el-form-item label="起运地联系电话" prop="originContactPhone"><el-input v-model.trim="form.originContactPhone" type="tel" maxlength="128" placeholder="请输入起运地联系电话" /></el-form-item>
-          </template>
-          <el-form-item label="目的地" prop="destination"><el-input v-model.trim="form.destination" maxlength="255" placeholder="请输入目的地" /></el-form-item>
-          <el-form-item label="目的地址"><el-input v-model.trim="form.destinationAddress" maxlength="500" placeholder="请输入详细目的地址" /></el-form-item>
-          <template v-if="kind === 'trucking'">
-            <el-form-item label="目的地联系人" prop="destinationContactName"><el-input v-model.trim="form.destinationContactName" maxlength="128" placeholder="请输入目的地联系人" /></el-form-item>
-            <el-form-item label="目的地联系电话" prop="destinationContactPhone"><el-input v-model.trim="form.destinationContactPhone" type="tel" maxlength="128" placeholder="请输入目的地联系电话" /></el-form-item>
-          </template>
-          <el-form-item label="件数"><el-input-number v-model="form.packageCount" :min="0" placeholder="请输入件数" /></el-form-item>
-          <el-form-item label="总重量(kg)"><el-input-number v-model="form.totalWeightKg" :min="0" :precision="2" placeholder="请输入总重量" /></el-form-item>
-          <el-form-item label="总体积(m³)"><el-input-number v-model="form.totalVolumeCbm" :min="0" :precision="3" placeholder="请输入总体积" /></el-form-item>
-        <template v-if="kind === 'trucking'">
-          <el-form-item label="取货时间" prop="pickupAt"><el-date-picker v-model="form.pickupAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择取货日期和时间" @change="formRef?.validateField('deliveryAt').catch(() => undefined)" /></el-form-item>
-          <el-form-item label="送货时间" prop="deliveryAt"><el-date-picker v-model="form.deliveryAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择送货日期和时间" /></el-form-item>
-        </template>
-        <el-form-item class="budget-form-item" label="预算金额"><el-input-number v-model="form.budgetAmount" :min="0" :precision="2" placeholder="请输入预算金额" /><el-select v-model="form.currency" class="currency"><el-option label="USD" value="USD" /><el-option label="CNY" value="CNY" /></el-select></el-form-item>
-        <el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="4" maxlength="1000" show-word-limit placeholder="请输入其他要求" /></el-form-item>
-        <el-form-item><el-button @click="returnToList">取消</el-button><el-button v-if="canCreate" type="primary" :loading="submitting" @click="submit">提交订单</el-button></el-form-item>
-      </el-form>
+      <TransportDemandForm ref="formRef" :model="form" :kind="kind === 'trucking' ? 'truck' : 'looseboard'" :submitting="submitting" :can-submit="canCreate" @submit="submit" @cancel="returnToList" />
    </el-card>
  </section>
 </template>
@@ -472,44 +357,7 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
 .arrangement-grid div { grid-template-columns: 124px minmax(0, 1fr); }
 .arrangement-grid dt { white-space: normal; overflow-wrap: anywhere; }
 .detail-grid dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--navy); font-size: 12px; font-weight: 600; line-height: 1.4; }
-.form-card :deep(.el-form) { max-width: 860px; }
-.form-card :deep(.el-input), .form-card :deep(.el-textarea), .form-card :deep(.el-select), .form-card :deep(.el-date-editor) { width: 100%; }
-.form-card .currency { width: 110px; margin-left: 12px; }
-
-.warehouse-load-error { color: #b42318; font-size: 12px; }
-.looseboard-form-card { padding: 0; border: 1px solid #e7ebf1; border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgb(31 45 61 / 4%); }
-.looseboard-form-card :deep(.el-card__body) { padding: 0; }
-.looseboard-form-card :deep(.el-form) { max-width: none; }
-.looseboard-form-card :deep(.el-form-item) { margin-bottom: 16px; }
-.looseboard-form-card :deep(.el-form-item__label) { height: auto; padding-bottom: 7px; color: #27364d; font-size: 13px; font-weight: 600; line-height: 1.2; }
-.looseboard-form-card :deep(.el-input__wrapper), .looseboard-form-card :deep(.el-textarea__inner), .looseboard-form-card :deep(.el-select__wrapper), .looseboard-form-card :deep(.el-input-number) { min-height: 36px; border-radius: 8px; box-shadow: 0 0 0 1px #e1e6ed inset; }
-.looseboard-form-card :deep(.el-input-number) { width: 100%; }
-.form-section { padding: 25px 30px 5px; }
-.form-section h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 15px; color: #27364d; font-size: 14px; }
-.form-section h3 em { color: #e05252; font-style: normal; }
-.section-icon { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 5px; background: #fff3e0; color: #dd8d2c; }
-.mode-buttons :deep(.el-radio-group) { display: flex; gap: 10px; }
-.mode-buttons :deep(.el-radio-button__inner) { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 18px; border: 1px solid #dce3eb; border-radius: 8px !important; color: #4b5563; box-shadow: none; }
-.mode-buttons :deep(.el-radio-button:first-child .el-radio-button__inner) { border-left: 1px solid #dce3eb; }
-.mode-buttons :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) { border-color: #5965d8; background: #f0f2ff; color: #4f5bd5; box-shadow: none; }
-.form-grid { display: grid; gap: 0 22px; padding: 0 30px; }
-.two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1180px; }
-.two-col > .el-form-item { min-width: 0; }
-.cargo-section { margin-top: 4px; padding-top: 7px; background: #fafafa; border-top: 1px solid #f0f2f5; border-bottom: 1px solid #f0f2f5; }
-.cargo-grid { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(150px, .9fr)); max-width: 1180px; }
-.lower-grid { padding-top: 20px; }
-.lower-grid :deep(.el-date-editor) { width: 100%; }
-.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 5px; padding: 20px 30px 25px; border-top: 1px solid #f0f2f5; }
-.looseboard-extra { margin: 0 30px; }
-.looseboard-form-card .form-actions { padding-right: max(30px, calc(100% - 1150px)); }
-.form-actions .el-button { min-width: 80px; height: 36px; border-radius: 7px; }
-.form-actions .el-button--primary { background: linear-gradient(135deg, #6774df, #7553aa); border: 0; box-shadow: 0 5px 12px rgb(103 116 223 / 24%); }
-
-@media (min-width: 1400px) {
-  .looseboard-form-card :deep(.el-input), .looseboard-form-card :deep(.el-select), .looseboard-form-card :deep(.el-date-editor) { max-width: 560px; }
-  .cargo-grid :deep(.el-input), .cargo-grid :deep(.el-input-number) { max-width: 300px; }
-  .lower-grid :deep(.el-input-number), .lower-grid :deep(.el-date-editor) { max-width: 560px; }
-}
+.form-card :deep(.el-card__body) { padding: 0; }

@media (max-width: 767px) {
  .business-orders { gap: 14px; }
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { transportDemandRules, type TransportDemandForm, type TransportDemandKind } from '../transportDemandForm'
+
+const props = withDefaults(defineProps<{
+  model: TransportDemandForm
+  kind: TransportDemandKind
+  disabled?: boolean
+  submitting?: boolean
+  canSubmit?: boolean
+  editing?: boolean
+}>(), { disabled: false, submitting: false, canSubmit: true, editing: false })
+const emit = defineEmits<{ submit: []; cancel: [] }>()
+const formRef = ref<FormInstance>()
+const rules = computed(() => transportDemandRules(props.kind, props.model))
+defineExpose({
+  validate: () => formRef.value?.validate() ?? Promise.resolve(false),
+  clearValidate: (fields?: string | string[]) => formRef.value?.clearValidate(fields),
+})
+</script>
+
+<template>
+  <el-form ref="formRef" class="transport-demand-form" :model="model" :rules="rules" label-position="top" :disabled="disabled || submitting">
+    <slot name="customer" />
+    <section class="transport-demand-section">
+      <h3>运输信息</h3>
+      <div class="transport-demand-grid">
+        <el-form-item v-if="kind === 'truck'" class="transport-demand-wide" label="车辆类型" prop="vehicleType">
+          <el-select v-model="model.vehicleType" placeholder="请选择车辆类型"><el-option label="15拖" value="PALLET_15" /><el-option label="30拖" value="PALLET_30" /></el-select>
+        </el-form-item>
+        <el-form-item label="起运地" prop="origin"><el-input v-model.trim="model.origin" maxlength="255" placeholder="城市 / 港口 / 州" /></el-form-item>
+        <el-form-item label="目的地" prop="destination"><el-input v-model.trim="model.destination" maxlength="255" placeholder="城市 / 州" /></el-form-item>
+        <el-form-item label="起运地联系人" prop="originContactName"><el-input v-model.trim="model.originContactName" maxlength="128" placeholder="请输入起运地联系人" /></el-form-item>
+        <el-form-item label="目的地联系人" prop="destinationContactName"><el-input v-model.trim="model.destinationContactName" maxlength="128" placeholder="请输入目的地联系人" /></el-form-item>
+        <el-form-item label="起运地联系电话" prop="originContactPhone"><el-input v-model.trim="model.originContactPhone" type="tel" maxlength="128" placeholder="请输入起运地联系电话" /></el-form-item>
+        <el-form-item label="目的地联系电话" prop="destinationContactPhone"><el-input v-model.trim="model.destinationContactPhone" type="tel" maxlength="128" placeholder="请输入目的地联系电话" /></el-form-item>
+        <el-form-item label="起运详细地址"><el-input v-model.trim="model.originAddress" maxlength="500" placeholder="街道 / 门牌等补充信息（选填）" /></el-form-item>
+        <el-form-item label="目的详细地址"><el-input v-model.trim="model.destinationAddress" maxlength="500" placeholder="街道 / 门牌等补充信息（选填）" /></el-form-item>
+      </div>
+    </section>
+    <section class="transport-demand-section">
+      <h3>货物信息</h3>
+      <div class="transport-demand-grid" :class="kind === 'looseboard' ? 'transport-demand-cargo-four' : 'transport-demand-cargo-three'">
+        <el-form-item v-if="kind === 'looseboard'" label="商品名称"><el-input v-model.trim="model.productName" maxlength="255" placeholder="请输入商品名称（选填）" /></el-form-item>
+        <el-form-item v-if="kind === 'looseboard'" label="预计托数" prop="estimatedPalletCount"><el-input-number v-model="model.estimatedPalletCount" :min="0" :precision="0" controls-position="right" placeholder="请输入预计托数" /></el-form-item>
+        <el-form-item v-if="kind === 'truck'" label="件数" prop="packageCount"><el-input-number v-model="model.packageCount" :min="0" :precision="0" controls-position="right" placeholder="请输入件数" /></el-form-item>
+        <el-form-item label="总重量 (kg)" prop="totalWeightKg"><el-input-number v-model="model.totalWeightKg" :min="0" :precision="3" controls-position="right" placeholder="请输入总重量" /></el-form-item>
+        <el-form-item label="总体积 (m³)" prop="totalVolumeCbm"><el-input-number v-model="model.totalVolumeCbm" :min="0" :precision="6" controls-position="right" placeholder="请输入总体积" /></el-form-item>
+        <el-form-item v-if="kind === 'looseboard'" label="件数" prop="packageCount"><el-input-number v-model="model.packageCount" :min="0" :precision="0" controls-position="right" placeholder="请输入件数" /></el-form-item>
+      </div>
+    </section>
+    <section class="transport-demand-section">
+      <h3>费用与时效</h3>
+      <div class="transport-demand-grid">
+        <el-form-item label="预算总价" prop="budgetAmount"><div class="transport-demand-budget">
+          <el-input-number v-model="model.budgetAmount" :min="0" :precision="2" controls-position="right" placeholder="请输入预算总价（选填）" />
+          <el-select v-model="model.currency" aria-label="预算币种" placeholder="请选择预算币种"><el-option label="USD" value="USD" /><el-option label="CNY" value="CNY" /></el-select>
+        </div></el-form-item>
+        <div />
+        <el-form-item label="取货时间" prop="pickupAt"><el-date-picker v-model="model.pickupAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择取货日期和时间" @change="formRef?.validateField('deliveryAt').catch(() => undefined)" /></el-form-item>
+        <el-form-item label="送货时间" prop="deliveryAt"><el-date-picker v-model="model.deliveryAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择送货日期和时间" /></el-form-item>
+        <el-form-item class="transport-demand-wide" label="备注"><el-input v-model="model.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入其他要求（选填）" /></el-form-item>
+      </div>
+    </section>
+    <footer class="transport-demand-actions">
+      <el-button :disabled="submitting" @click="emit('cancel')">取消</el-button>
+      <el-button v-if="canSubmit" type="primary" :loading="submitting" :disabled="disabled" @click="emit('submit')">{{ editing ? '保存修改' : '提交订单' }}</el-button>
+    </footer>
+  </el-form>
+</template>
+
+<style scoped>
+.transport-demand-form { --el-component-size: 36px; width: 100%; max-width: 1180px; margin: 0; background: #fff; }
+.transport-demand-section { padding: 20px 24px 0; border-bottom: 1px solid #e7ebf1; }
+.transport-demand-section h3 { margin: 0 0 16px; color: #27364d; font-size: 14px; font-weight: 600; }
+.transport-demand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
+.transport-demand-cargo-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.transport-demand-cargo-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.transport-demand-wide { grid-column: 1 / -1; }
+.transport-demand-form :deep(.el-form-item) { min-width: 0; margin-bottom: 18px; }
+.transport-demand-form :deep(.el-form-item__label) { height: auto; padding-bottom: 6px; font-size: 13px; line-height: 20px; }
+.transport-demand-form :deep(.el-input), .transport-demand-form :deep(.el-input-number), .transport-demand-form :deep(.el-select), .transport-demand-form :deep(.el-date-editor) { width: 100%; }
+.transport-demand-budget { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 100px; gap: 10px; }
+.transport-demand-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; }
+.transport-demand-actions :deep(.el-button + .el-button) { margin-left: 0; }
+</style>
@@ -0,0 +1,61 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { runInNewContext } from 'node:vm'
+import test from 'node:test'
+import ts from 'typescript'
+
+const source = readFileSync(new URL('./transportDemandForm.ts', import.meta.url), 'utf8')
+const code = ts.transpileModule(source, { compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.ESNext } }).outputText.replace(/^export /gm, '')
+const { createTransportDemandForm, transportDemandError, buildTransportDemand } = runInNewContext(`${code}\n({ createTransportDemandForm, transportDemandError, buildTransportDemand })`)
+const valid = () => ({ ...createTransportDemandForm(), vehicleType: 'PALLET_15', origin: ' LA ', destination: ' ONT ', originContactName: ' 发货人 ', originContactPhone: ' +1-555-0100 ', destinationContactName: ' 收货人 ', destinationContactPhone: ' +1-555-0101 ', pickupAt: '2026-10-20T09:30:45', deliveryAt: '2026-10-20T15:45:12' })
+
+test('initial form leaves contacts and times blank, zeroes cargo and distinguishes blank budget from zero', () => {
+  const form = createTransportDemandForm()
+  for (const key of ['originContactName', 'originContactPhone', 'destinationContactName', 'destinationContactPhone', 'pickupAt', 'deliveryAt']) assert.equal(form[key], '')
+  for (const key of ['estimatedPalletCount', 'packageCount', 'totalWeightKg', 'totalVolumeCbm']) assert.equal(form[key], 0)
+  assert.equal(form.budgetAmount, undefined)
+  assert.equal(form.currency, 'USD')
+  assert.equal(buildTransportDemand('truck', valid()).budgetAmount, undefined)
+  assert.equal(buildTransportDemand('truck', { ...valid(), budgetAmount: 0 }).budgetAmount, 0)
+})
+
+for (const kind of ['truck', 'looseboard']) {
+  test(`${kind} requires both route contacts and both service times before building a payload`, () => {
+    for (const field of ['origin', 'destination', 'originContactName', 'originContactPhone', 'destinationContactName', 'destinationContactPhone', 'pickupAt', 'deliveryAt']) {
+      const form = { ...valid(), [field]: '' }
+      assert.ok(transportDemandError(kind, form), field)
+      assert.throws(() => buildTransportDemand(kind, form), undefined, field)
+    }
+  })
+  test(`${kind} rejects negative cargo, fractional counts, invalid budgets and reversed times`, () => {
+    for (const field of ['packageCount', 'totalWeightKg', 'totalVolumeCbm', 'budgetAmount']) {
+      assert.ok(transportDemandError(kind, { ...valid(), [field]: -1 }), field)
+      assert.ok(transportDemandError(kind, { ...valid(), [field]: Number.NaN }), field)
+    }
+    assert.ok(transportDemandError(kind, { ...valid(), packageCount: 1.5 }))
+    assert.ok(transportDemandError(kind, { ...valid(), deliveryAt: '2026-10-20T09:29:00' }))
+    assert.ok(transportDemandError(kind, { ...valid(), currency: 'EUR' }))
+  })
+  test(`${kind} sends minute wall-clock values, trims contacts, and excludes customer and old fields`, () => {
+    const payload = buildTransportDemand(kind, { ...valid(), customerId: 'forged', tenantId: 'forged', transportMode: 'OLD', containerType: '40HQ' })
+    assert.equal(payload.pickupAt, '2026-10-20T09:30:00')
+    assert.equal(payload.deliveryAt, '2026-10-20T15:45:00')
+    assert.equal(payload.origin, 'LA')
+    assert.equal(payload.originContactName, '发货人')
+    assert.equal(payload.destinationContactPhone, '+1-555-0101')
+    for (const key of ['customerId', 'tenantId', 'transportMode', 'transportType', 'containerType', 'contactName', 'contactInfo', 'requestedDate']) assert.equal(Object.hasOwn(payload, key), false, key)
+    assert.equal(transportDemandError(kind, { ...valid(), deliveryAt: '2026-10-20T09:30:01' }), undefined)
+  })
+}
+
+test('truck accepts only the two vehicle types and does not submit looseboard cargo forecasts', () => {
+  assert.ok(transportDemandError('truck', { ...valid(), vehicleType: 'PALLET_99' }))
+  const truck = buildTransportDemand('truck', { ...valid(), productName: 'cargo', estimatedPalletCount: 3 })
+  assert.equal(Object.hasOwn(truck, 'productName'), false)
+  assert.equal(Object.hasOwn(truck, 'estimatedPalletCount'), false)
+  const loose = buildTransportDemand('looseboard', { ...valid(), vehicleType: '', productName: ' cargo ', estimatedPalletCount: 3, packageCount: 8 })
+  assert.equal(Object.hasOwn(loose, 'vehicleType'), false)
+  assert.equal(loose.productName, 'cargo')
+  assert.equal(loose.estimatedPalletCount, 3)
+  assert.equal(loose.packageCount, 8)
+})
@@ -0,0 +1,106 @@
+import type { FormRules } from 'element-plus'
+
+export type TransportDemandKind = 'truck' | 'looseboard'
+export interface TransportDemandForm {
+  vehicleType: '' | 'PALLET_15' | 'PALLET_30'
+  origin: string
+  destination: string
+  originAddress: string
+  destinationAddress: string
+  originContactName: string
+  originContactPhone: string
+  destinationContactName: string
+  destinationContactPhone: string
+  productName: string
+  estimatedPalletCount: number
+  packageCount: number
+  totalWeightKg: number
+  totalVolumeCbm: number
+  budgetAmount: number | undefined
+  currency: 'USD' | 'CNY'
+  pickupAt: string
+  deliveryAt: string
+  remark: string
+}
+
+export function createTransportDemandForm(): TransportDemandForm {
+  return {
+    vehicleType: '', origin: '', destination: '', originAddress: '', destinationAddress: '',
+    originContactName: '', originContactPhone: '', destinationContactName: '', destinationContactPhone: '',
+    productName: '', estimatedPalletCount: 0, packageCount: 0, totalWeightKg: 0, totalVolumeCbm: 0,
+    budgetAmount: undefined, currency: 'USD', pickupAt: '', deliveryAt: '', remark: '',
+  }
+}
+
+const requiredText = {
+  origin: '起运地', destination: '目的地', originContactName: '起运地联系人',
+  originContactPhone: '起运地联系电话', destinationContactName: '目的地联系人', destinationContactPhone: '目的地联系电话',
+} as const
+
+export function localMinuteInput(value: unknown) {
+  return typeof value === 'string' && value ? `${value.slice(0, 16)}:00` : ''
+}
+
+export function transportDemandRules(kind: TransportDemandKind, form: TransportDemandForm): FormRules<TransportDemandForm> {
+  const rules: FormRules<TransportDemandForm> = {}
+  for (const [field, label] of Object.entries(requiredText)) {
+    rules[field as keyof typeof requiredText] = [{ required: true, whitespace: true, message: `请输入${label}`, trigger: 'blur' }]
+  }
+  if (kind === 'truck') rules.vehicleType = [{ required: true, message: '请选择车辆类型', trigger: 'change' }]
+  for (const [field, label] of [['packageCount', '件数'], ['estimatedPalletCount', '预计托数'], ['totalWeightKg', '总重量'], ['totalVolumeCbm', '总体积']] as const) {
+    if (field === 'estimatedPalletCount' && kind !== 'looseboard') continue
+    rules[field] = [{ required: true, type: 'number', min: 0, message: `${label}须为不小于 0 的数字`, trigger: 'change' }]
+  }
+  rules.budgetAmount = [{ type: 'number', min: 0, message: '预算总价不能小于 0', trigger: 'change' }]
+  rules.pickupAt = [{ required: true, message: '请选择取货时间', trigger: 'change' }]
+  rules.deliveryAt = [{ required: true, message: '请选择送货时间', trigger: 'change' }, {
+    validator: (_rule, value, callback) => callback(value && form.pickupAt && localMinuteInput(value) < localMinuteInput(form.pickupAt) ? new Error('送货时间不能早于取货时间') : undefined), trigger: 'change',
+  }]
+  return rules
+}
+
+export function transportDemandError(kind: TransportDemandKind, form: TransportDemandForm): string | undefined {
+  if (kind === 'truck' && !['PALLET_15', 'PALLET_30'].includes(form.vehicleType)) return '请选择车辆类型'
+  for (const [field, label] of Object.entries(requiredText)) {
+    if (!String(form[field as keyof typeof requiredText] || '').trim()) return `请输入${label}`
+  }
+  for (const [field, label] of [['pickupAt', '取货时间'], ['deliveryAt', '送货时间']] as const) {
+    if (!form[field]) return `请选择${label}`
+    if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?$/.test(form[field])) return `请选择有效的${label}`
+  }
+  if (localMinuteInput(form.deliveryAt) < localMinuteInput(form.pickupAt)) return '送货时间不能早于取货时间'
+  for (const [field, label] of [['packageCount', '件数'], ['totalWeightKg', '总重量'], ['totalVolumeCbm', '总体积'], ...(kind === 'looseboard' ? [['estimatedPalletCount', '预计托数'] as const] : [])] as const) {
+    if (!Number.isFinite(form[field]) || form[field] < 0) return `${label}须为不小于 0 的数字`
+  }
+  if (!Number.isInteger(form.packageCount) || kind === 'looseboard' && !Number.isInteger(form.estimatedPalletCount)) return '件数和预计托数须为整数'
+  if (form.budgetAmount != null && (!Number.isFinite(form.budgetAmount) || form.budgetAmount < 0)) return '预算总价不能小于 0'
+  if (!['USD', 'CNY'].includes(form.currency)) return '请选择预算币种'
+  return undefined
+}
+
+function commonPayload(form: TransportDemandForm) {
+  return {
+    origin: form.origin.trim(), destination: form.destination.trim(),
+    originAddress: form.originAddress.trim() || undefined, destinationAddress: form.destinationAddress.trim() || undefined,
+    originContactName: form.originContactName.trim(), originContactPhone: form.originContactPhone.trim(),
+    destinationContactName: form.destinationContactName.trim(), destinationContactPhone: form.destinationContactPhone.trim(),
+    packageCount: form.packageCount, totalWeightKg: form.totalWeightKg, totalVolumeCbm: form.totalVolumeCbm,
+    budgetAmount: form.budgetAmount ?? undefined, currency: form.currency,
+    pickupAt: localMinuteInput(form.pickupAt), deliveryAt: localMinuteInput(form.deliveryAt), remark: form.remark.trim() || undefined,
+  }
+}
+
+type CommonPayload = ReturnType<typeof commonPayload>
+type TruckPayload = CommonPayload & { vehicleType: 'PALLET_15' | 'PALLET_30' }
+type LooseboardPayload = CommonPayload & { productName: string | undefined; estimatedPalletCount: number }
+
+export function buildTransportDemand(kind: 'truck', form: TransportDemandForm): TruckPayload
+export function buildTransportDemand(kind: 'looseboard', form: TransportDemandForm): LooseboardPayload
+export function buildTransportDemand(kind: TransportDemandKind, form: TransportDemandForm) {
+  const failure = transportDemandError(kind, form)
+  if (failure) throw new Error(failure)
+  const common = commonPayload(form)
+  return kind === 'truck'
+    ? { ...common, vehicleType: form.vehicleType as 'PALLET_15' | 'PALLET_30' }
+    : { ...common, productName: form.productName.trim() || undefined, estimatedPalletCount: form.estimatedPalletCount }
+}