优化

src/modules/overseas-business/PROTOTYPE_MATRIX.md

@@ -1,5 +1,7 @@
 # 海外业务原型核对矩阵
 
+本土散板列表、本土卡车新增/编辑共用`../overseas-master-data/index.ts`公开的`TransportRouteDialog`。字段来源、原型证据和缺值处理唯一见[运输路线地图](../overseas-master-data/PROTOTYPE_MATRIX.md#运输路线地图)。按已有起终点规划，不写订单、不使用固定演示、不采集GPS。
+
 ## 池来源本土订单承运安排
 
 依据：[内部拼车需求池首版开发契约](../../../../../docs/海外仓业务/内部拼车需求池首版开发契约.md) 第7节及本轮用户授权。

src/modules/overseas-business/pages/OverseasBusinessViews.test.ts

@@ -67,6 +67,32 @@ describe('overseas business mounted pages', () => {
   })
 
 
+  it.each(['查看路线'])('opens the shared route map from looseboard %s without requerying orders', async label => {
+    const wrapper = mountPage(TransportOrdersView, { domain: 'looseboard' })
+    await flushPromises()
+    expect(wrapper.findComponent({ name: 'TransportRouteDialog' }).props('modelValue')).toBe(false)
+    const requests = vi.mocked(listLocalLooseboardOrders).mock.calls.length
+    await wrapper.findAll('button').find(button => button.text() === label)!.trigger('click')
+    await flushPromises()
+    expect(wrapper.findComponent({ name: 'TransportRouteDialog' }).props('modelValue')).toBe(true)
+    expect(document.body.textContent).toContain('LA → ONT')
+    expect(listLocalLooseboardOrders).toHaveBeenCalledTimes(requests)
+  })
+
+  it.each([false, true])('opens truck route map on create/edit without saving (%s)', async editing => {
+    if (editing) { routing.route.params = { orderId: truck.id }; routing.route.query = { customerId: truck.customerId } }
+    const wrapper = mountPage(TransportOrderFormView, { domain: 'truck' })
+    await flushPromises()
+    await wrapper.findAll('button').find(button => button.text() === '查看路线')!.trigger('click')
+    await flushPromises()
+    expect(wrapper.findComponent({ name: 'TransportRouteDialog' }).props('modelValue')).toBe(true)
+    expect(createUsTruckOrder).not.toHaveBeenCalled()
+    expect(updateUsTruckOrder).not.toHaveBeenCalled()
+    const dialog = wrapper.findComponent({ name: 'TransportRouteDialog' })
+    expect(dialog.props('origin')).toEqual({ kind: 'address', label: editing ? 'Long Beach' : '', address: editing ? 'Long Beach Pier A' : '' })
+    expect(dialog.props('destinations')).toEqual([{ kind: 'address', label: editing ? 'Ontario' : '', address: editing ? 'Ontario Warehouse B' : '' }])
+  })
+
   it('opens the associated commercial order using a server-side order number filter', async () => {
     routing.route.query = { orderNo: 'LB-LINKED' }
     const wrapper = mount(TransportOrdersView, { props: { domain: 'looseboard' }, global: { plugins: [ElementPlus] } })

src/modules/overseas-business/pages/TransportOrderFormView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import { TransportRouteDialog, routeLocation } from '@/modules/overseas-master-data'
 import '../overseasBusinessDensity.css'
 import { computed, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -22,6 +23,7 @@ import type { FleetArrangement } from '../fleetArrangement'
 import type { CreateLocalLooseboardOrderRequest, CreateLocalTransportOrderRequest, LocalLooseboardStatus, LocalTransportStatus, LocalTransportType, LooseboardTransportMode, PalletRequired, UpdateLocalLooseboardOrderRequest, UpdateLocalTransportOrderRequest } from '../types'
 
 const props = defineProps<{ domain: 'truck' | 'looseboard' }>()
+const routeOpen = ref(false)
 const route = useRoute(); const router = useRouter(); const formRef = ref<FormInstance>()
 const orderId = computed(() => typeof route.params.orderId === 'string' ? route.params.orderId : '')
 const routeCustomerId = computed(() => typeof route.query.customerId === 'string' ? route.query.customerId : '')
@@ -124,8 +126,8 @@ watch([orderId, routeCustomerId, isLooseboard], () => { void load(); void loadCu
       <FormSection class="density-form-section" title="运输信息"><el-form-item label="运输类型" prop="transportType"><el-radio-group v-model="form.transportType"><el-radio-button v-for="item in transportTypes" :key="item.value" :value="item.value">{{ item.label }}</el-radio-button></el-radio-group></el-form-item><div class="form-grid two"><el-form-item label="起运地" prop="origin"><el-input v-model="form.origin" maxlength="255" placeholder="城市 / 港口 / 州" /></el-form-item><el-form-item label="目的地" prop="destination"><el-input v-model="form.destination" maxlength="255" placeholder="城市 / 州" /></el-form-item><el-form-item label="详细地址"><el-input v-model="form.originAddress" maxlength="500" placeholder="街道 / 门牌" /></el-form-item><el-form-item label="详细地址 / 码头 / 仓号"><el-input v-model="form.destinationAddress" maxlength="500" placeholder="地址 / 码头 / 仓号" /></el-form-item><el-form-item label="联系人" prop="contactName"><el-input v-model="form.contactName" maxlength="128" placeholder="请输入联系人姓名" /></el-form-item><el-form-item label="联系方式" prop="contactInfo"><el-input v-model="form.contactInfo" maxlength="128" placeholder="请输入联系方式" /></el-form-item></div></FormSection>
       <FormSection class="density-form-section" title="📦 货物信息"><div class="form-grid" :class="isLooseboard ? 'four' : 'five'"><el-form-item label="柜型"><el-select v-model="form.containerType"><el-option v-for="item in CONTAINER_SPECIFICATIONS" :key="item.type" :label="item.type" :value="item.type" /></el-select></el-form-item><el-form-item v-if="!isLooseboard" label="托数" prop="palletCount"><el-input-number v-model="form.palletCount" :min="1" controls-position="right" placeholder="请输入托盘数" /></el-form-item><el-form-item label="件数" prop="packageCount"><el-input-number v-model="form.packageCount" :min="0" controls-position="right" placeholder="请输入件数" /></el-form-item><el-form-item label="总重量 (kg)" prop="totalWeightKg"><el-input v-model="form.totalWeightKg" inputmode="decimal" placeholder="请输入总重量" /></el-form-item><el-form-item label="总体积 (m³)" prop="totalVolumeCbm"><el-input v-model="form.totalVolumeCbm" inputmode="decimal" placeholder="请输入总体积" /></el-form-item></div></FormSection>
       <FormSection class="density-form-section" title="费用与时效"><div class="form-grid two"><el-form-item label="预算总价" prop="budgetAmount"><el-input v-model="form.budgetAmount" inputmode="decimal" placeholder="请输入预算金额" ><template #append>{{ form.currency }}</template></el-input></el-form-item><el-form-item label="要求时间" prop="requestedDate"><el-date-picker v-model="form.requestedDate" type="date" value-format="YYYY-MM-DD" clearable /></el-form-item><el-form-item v-if="editing" label="状态"><el-input :model-value="statusLabel" disabled /></el-form-item><el-form-item class="span-2" label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></div></FormSection>
-    </el-form><footer class="form-actions"><el-button @click="back">取消</el-button><el-button type="primary" :loading="saving" :disabled="!editableStatus" @click="save"><Save :size="16" />{{ editing ? '保存修改' : '提交订单' }}</el-button></footer></section>
-  </DetailPageLayout></AdminPage>
+    </el-form><FormSection v-if="!isLooseboard" class="density-form-section" title="车辆与派车"><el-button @click="routeOpen = true">查看路线</el-button></FormSection><footer class="form-actions"><el-button @click="back">取消</el-button><el-button type="primary" :loading="saving" :disabled="!editableStatus" @click="save"><Save :size="16" />{{ editing ? '保存修改' : '提交订单' }}</el-button></footer></section>
+  </DetailPageLayout><TransportRouteDialog v-model="routeOpen" :origin="routeLocation(form.origin, form.originAddress)" :destinations="[routeLocation(form.destination, form.destinationAddress)]" /></AdminPage>
 </template>
 
 <style scoped>

src/modules/overseas-business/pages/TransportOrdersView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import { TransportRouteDialog, routeLocation, type RouteLocation } from '@/modules/overseas-master-data'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { Plus } from '@lucide/vue'
@@ -19,6 +20,13 @@ import { overseasBusinessPermissions } from '../permissions'
 import type { LocalLooseboardOrder, LocalLooseboardQuery, LocalLooseboardStatus, LocalTransportOrder, LocalTransportQuery, LocalTransportStatus, LocalTransportType, LooseboardTransportMode } from '../types'
 
 const props = defineProps<{ domain: 'truck' | 'looseboard' }>()
+const routeOpen = ref(false)
+const routeOrigin = ref<RouteLocation>(routeLocation('')), routeDestinations = ref<RouteLocation[]>([])
+function openRoute(row: LocalTransportOrder | LocalLooseboardOrder) {
+  routeOrigin.value = routeLocation(row.origin)
+  routeDestinations.value = [routeLocation(row.destination)]
+  routeOpen.value = true
+}
 const route = useRoute(); const router = useRouter(); const access = useAccessPreviewStore()
 const isLooseboard = computed(() => props.domain === 'looseboard'); const domainLabel = computed(() => isLooseboard.value ? '本土散板' : '本土卡车')
 const queryPreferenceKey = computed(() => isLooseboard.value ? 'overseas-business-looseboard-query' : 'overseas-business-truck-query')
@@ -59,7 +67,13 @@ const looseboardColumns: DataTableColumn[] = [
   { key: 'requestedDate', prop: 'requestedDate', label: '要求时间', width: 120 }, { key: 'status', label: '状态', width: 105, formatter: (row: LocalLooseboardOrder) => looseboardStatusLabels[row.status] },
   { key: 'createdAt', prop: 'createdAt', label: '创建时间', minWidth: 165, formatter: (row: LocalLooseboardOrder) => formatDateTime(row.createdAt) },
 ]
-const columns = computed(() => isLooseboard.value ? looseboardColumns : truckColumns)
+const columns = computed(() => {
+  if (!isLooseboard.value) return truckColumns
+  const visible = [...looseboardColumns]
+  visible.splice(visible.findIndex(column => column.key === 'status'), 0,
+    { key: 'routeMap', label: '路线地图', width: 120, slotName: 'routeMap' })
+  return visible
+})
 function formatDateTime(value?: string | null) { return value ? value.replace('T', ' ').slice(0, 16) : '—' }
 async function load() {
   rows.value = []; total.value = 0; loadError.value = null; loading.value = true
@@ -93,8 +107,9 @@ watch([page, pageSize], () => { void load() }); watch([isLooseboard, () => route
       <template #toolbar-actions><el-button v-if="access.can(createPermission)" type="primary" @click="openCreate"><Plus :size="16" />新增订单</el-button></template>
       <template #actions="{ row }"><div class="row-actions density-actions admin-text-actions"><el-button v-if="row.fleetArrangement" class="density-action" @click="showArrangement(row as LocalTransportOrder | LocalLooseboardOrder)">承运安排</el-button><el-tooltip v-if="!row.fleetArrangement && access.can(editPermission)" :disabled="canEdit(row as LocalTransportOrder | LocalLooseboardOrder)" content="当前状态不可编辑"><span><el-button class="density-action" data-tone="neutral" size="small" :disabled="!canEdit(row as LocalTransportOrder | LocalLooseboardOrder)" @click="openEdit(row as LocalTransportOrder | LocalLooseboardOrder)">编辑</el-button></span></el-tooltip></div></template>
       <template #pagination-left>共 {{ total }} 条{{ domainLabel }}订单</template>
+      <template #routeMap="{ row }"><el-button v-if="row.orderNo" link type="primary" @click="openRoute(row as LocalLooseboardOrder)">查看路线</el-button></template>
     </DataTable></section>
-  </ListPageLayout><AppDialog v-model="arrangementOpen" class="admin-density-dialog" title="承运安排" width="1080px" :show-confirm="false" cancel-text="关闭"><FleetArrangementSummary v-if="arrangement" :arrangement="arrangement" /></AppDialog></AdminPage>
+  </ListPageLayout><AppDialog v-model="arrangementOpen" class="admin-density-dialog" title="承运安排" width="1080px" :show-confirm="false" cancel-text="关闭"><FleetArrangementSummary v-if="arrangement" :arrangement="arrangement" /></AppDialog><TransportRouteDialog v-model="routeOpen" :origin="routeOrigin" :destinations="routeDestinations" /></AdminPage>
 </template>
 
 <style scoped>.table-panel { overflow:hidden; }</style>