优化

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>