61 lines
3.3 KiB
Vue
61 lines
3.3 KiB
Vue
<script setup lang="ts">
|
||
import { ArrowLeft } from '@lucide/vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import AdminPage from '@/shared/components/AdminPage.vue'
|
||
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
||
import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
|
||
import FormSection from '@/shared/components/FormSection.vue'
|
||
import ContractPendingNotice from '../components/ContractPendingNotice.vue'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const deliveryColumns: DataTableColumn[] = [
|
||
{ key: 'orderNo', prop: 'orderNo', label: '派送单号', minWidth: 160 },
|
||
{ key: 'sourceOrderNo', prop: 'sourceOrderNo', label: 'BOL / 来源单号', minWidth: 170 },
|
||
{ key: 'customerName', prop: 'customerName', label: '客户', minWidth: 160 },
|
||
{ key: 'destinationWarehouse', prop: 'destinationWarehouse', label: '目的仓', minWidth: 140 },
|
||
{ key: 'appointmentDate', prop: 'appointmentDate', label: '预约日期', minWidth: 130 },
|
||
{ key: 'status', prop: 'status', label: '派送状态', minWidth: 110 },
|
||
{ key: 'relation', prop: 'relation', label: '关联关系', minWidth: 120 },
|
||
]
|
||
const historyColumns: DataTableColumn[] = [
|
||
{ key: 'occurredAt', prop: 'occurredAt', label: '时间', minWidth: 150 },
|
||
{ key: 'orderNo', prop: 'orderNo', label: '派送单号', minWidth: 160 },
|
||
{ key: 'action', prop: 'action', label: '动作', minWidth: 110 },
|
||
{ key: 'relatedVehicle', prop: 'relatedVehicle', label: '关联车辆', minWidth: 140 },
|
||
{ key: 'reason', prop: 'reason', label: '原因', minWidth: 220 },
|
||
{ key: 'operatorName', prop: 'operatorName', label: '操作人', minWidth: 120 },
|
||
]
|
||
function backToList() {
|
||
void router.push({ name: 'overseas-master-data-vehicles' })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<AdminPage width="comfortable">
|
||
<DetailPageLayout aria-label="车辆详情">
|
||
<template #header>
|
||
<div class="detail-heading">
|
||
<div><h1>车辆详情</h1><p>车辆 ID：{{ String(route.params.vehicleId || '—') }}</p></div>
|
||
<el-button @click="backToList"><ArrowLeft :size="16" />返回列表</el-button>
|
||
</div>
|
||
</template>
|
||
<ContractPendingNotice domain="车辆详情" detail />
|
||
<section class="surface-panel detail-surface">
|
||
<FormSection title="车辆信息"><div class="detail-empty">没有可展示的真实车辆档案</div></FormSection>
|
||
<FormSection title="派送订单明细"><DataTable :data="[]" :columns="deliveryColumns" empty-text="车辆详情接口待接入" /></FormSection>
|
||
<FormSection title="派送更换记录" :bordered="false"><DataTable :data="[]" :columns="historyColumns" empty-text="车辆详情接口待接入" /></FormSection>
|
||
</section>
|
||
</DetailPageLayout>
|
||
</AdminPage>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
||
.detail-heading h1 { margin: 0; color: var(--cc-text); font-size: 20px; }
|
||
.detail-heading p { margin: 4px 0 0; color: var(--cc-muted); font-size: 12px; }
|
||
.detail-surface { min-width: 0; overflow: hidden; }
|
||
.detail-empty { padding: 18px; color: var(--cc-muted); text-align: center; }
|
||
@media (max-width: 720px) { .detail-heading { align-items: stretch; flex-direction: column; } .detail-heading :deep(.el-button) { min-height: 44px; } }
|
||
</style>
|