|
|
|
@@ -14,22 +14,25 @@ import { TRUCK_APPOINTMENT_STATUSES, truckAppointmentStatusLabels, type TruckApp
|
|
|
|
|
|
|
|
|
|
const router = useRouter(); const rows = ref<TruckAppointmentResource[]>([]); const loading = ref(false); const loaded = ref(false); const page = ref(1); const pageSize = ref(20); const total = ref(0); const loadError = ref<ApiErrorDetails | null>(null)
|
|
|
|
|
const access = useAccessPreviewStore()
|
|
|
|
|
const filters = ref({ keyword: '', status: '' as TruckAppointmentStatus | '', containerBookingId: '' }); const applied = ref({ ...filters.value })
|
|
|
|
|
const filters = ref({ keyword: '', status: '' as TruckAppointmentStatus | '', containerBookingId: '', containerType: '' }); const applied = ref({ ...filters.value })
|
|
|
|
|
const fields = computed<QueryField[]>(() => [
|
|
|
|
|
{ key: 'keyword', type: 'input', label: '关键词', placeholder: '委托单位、预约单号、车牌' },
|
|
|
|
|
{ key: 'keyword', type: 'input', label: '关键词', placeholder: '委托单位、派车单号、车牌号' },
|
|
|
|
|
{ key: 'status', type: 'select', label: '状态', placeholder: '全部状态', options: TRUCK_APPOINTMENT_STATUSES.map((value) => ({ value, label: truckAppointmentStatusLabels[value] })) },
|
|
|
|
|
{ key: 'containerBookingId', type: 'input', label: '柜体 ID', placeholder: '按关联柜体筛选' },
|
|
|
|
|
{ key: 'containerType', type: 'select', label: '柜型', placeholder: '全部柜型', options: [
|
|
|
|
|
{ value: '20GP', label: '20GP' }, { value: '40GP', label: '40GP' }, { value: '40HC', label: '40HC' },
|
|
|
|
|
] },
|
|
|
|
|
])
|
|
|
|
|
const columns: DataTableColumn[] = [
|
|
|
|
|
{ key: 'actions', label: '操作', width: 150, fixed: 'left', slotName: 'actions' },
|
|
|
|
|
{ key: 'appointmentNo', prop: 'appointmentNo', label: '预约单号', minWidth: 170 },
|
|
|
|
|
{ key: 'relation', label: '关联资源', minWidth: 220, slotName: 'relation' },
|
|
|
|
|
{ key: 'company', label: '承运商', minWidth: 150, slotName: 'company' },
|
|
|
|
|
{ key: 'driver', label: '司机/车头', minWidth: 150, slotName: 'driver' },
|
|
|
|
|
{ key: 'store', label: '门店', minWidth: 130, slotName: 'store' },
|
|
|
|
|
{ key: 'plannedLoadingAt', label: '预计装箱时间', minWidth: 170, formatter: (row: TruckAppointmentResource) => formatDateTime(row.plannedLoadingAt) },
|
|
|
|
|
{ key: 'appointmentNo', prop: 'appointmentNo', label: '派车单号', minWidth: 170 },
|
|
|
|
|
{ key: 'containerBookingId', prop: 'containerBookingId', label: '关联柜体', minWidth: 130, formatter: (row: TruckAppointmentResource) => row.containerBookingId || '—' },
|
|
|
|
|
{ key: 'company', label: '运输公司', minWidth: 160, slotName: 'company' },
|
|
|
|
|
{ key: 'driver', label: '司机', minWidth: 130, slotName: 'driver' },
|
|
|
|
|
{ key: 'vehicleNo', prop: 'vehicleNo', label: '车头号', minWidth: 120, formatter: (row: TruckAppointmentResource) => row.vehicleNo || '—' },
|
|
|
|
|
{ key: 'store', label: '门店', minWidth: 140, slotName: 'store' },
|
|
|
|
|
{ key: 'payableAmount', label: '应付拖车费', minWidth: 130, formatter: (row: TruckAppointmentResource) => row.payableAmount ? `¥${row.payableAmount}` : '—' },
|
|
|
|
|
{ key: 'receivableAmount', label: '应收拖车费', minWidth: 130, formatter: (row: TruckAppointmentResource) => row.receivableAmount ? `¥${row.receivableAmount}` : '—' },
|
|
|
|
|
{ key: 'plannedLoadingAt', label: '预计装箱日期', minWidth: 170, formatter: (row: TruckAppointmentResource) => formatDateTime(row.plannedLoadingAt) },
|
|
|
|
|
{ key: 'status', label: '状态', width: 130, slotName: 'status' },
|
|
|
|
|
{ key: 'attachments', label: '附件', width: 90, formatter: (row: TruckAppointmentResource) => String(row.attachments?.length || 0) },
|
|
|
|
|
]
|
|
|
|
@@ -40,22 +43,20 @@ function statusLabel(value: unknown) {
|
|
|
|
|
: String(value || '—')
|
|
|
|
|
}
|
|
|
|
|
async function load() { loading.value = true; loadError.value = null; try { const result = await listTruckAppointments({ page: page.value, size: pageSize.value, ...applied.value } as TruckAppointmentQuery); rows.value = result.records; total.value = result.total; loaded.value = true } catch (error) { rows.value = []; total.value = 0; loadError.value = getApiErrorDetails(error, '拖车预约加载失败，请稍后重试') } finally { loading.value = false } }
|
|
|
|
|
function search(model: QueryModel) { applied.value = { keyword: String(model.keyword || ''), status: (model.status || '') as TruckAppointmentStatus | '', containerBookingId: String(model.containerBookingId || '') }; page.value = 1; void load() }
|
|
|
|
|
function reset() { filters.value = { keyword: '', status: '', containerBookingId: '' }; search(filters.value) }
|
|
|
|
|
function search(model: QueryModel) { applied.value = { keyword: String(model.keyword || ''), status: (model.status || '') as TruckAppointmentStatus | '', containerBookingId: '', containerType: String(model.containerType || '') }; page.value = 1; void load() }
|
|
|
|
|
function reset() { filters.value = { keyword: '', status: '', containerBookingId: '', containerType: '' }; search(filters.value) }
|
|
|
|
|
onMounted(load)
|
|
|
|
|
</script>
|
|
|
|
|
<template>
|
|
|
|
|
<section class="business-page trucking-page">
|
|
|
|
|
<div class="page-heading"><div><h1>拖车预约</h1><p>维护拖车预约、关联资源与派车状态</p></div></div>
|
|
|
|
|
<QueryToolbar v-model="filters" class="surface-panel" ariaLabel="拖车预约查询" :fields="fields" preference-key="trucking-query" @search="search" @reset="reset" />
|
|
|
|
|
<LoadErrorState v-if="loadError" class="surface-panel" title="拖车预约加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
|
|
|
|
|
<section class="surface-panel table-panel" :aria-busy="loading">
|
|
|
|
|
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="trucking-appointments" aria-label="拖车预约列表" empty-text="暂无符合筛选条件的拖车预约">
|
|
|
|
|
<template #toolbar-start><div class="table-heading"><h2>拖车预约列表</h2><span>共 {{ total }} 条</span></div></template>
|
|
|
|
|
<template #toolbar-actions><el-button v-if="access.can('platform:firstleg:truck-appointment:create')" type="primary" :disabled="loading" @click="router.push({ name: 'trucking-new' })"><Plus :size="16" />新增拖车</el-button></template>
|
|
|
|
|
<template #relation="{ row }"><div>{{ row.customerName || '—' }}</div><small>{{ row.entrustingPartyName || '委托单位待关联' }} · 出仓单 {{ row.outboundOrderId || '—' }} · 柜体 {{ row.containerBookingId || '—' }}</small><small>柜型 {{ row.relatedContainerType || '由关联资源返回' }}</small></template>
|
|
|
|
|
<template #company="{ row }">{{ row.carrierName || row.carrierId || '—' }}</template>
|
|
|
|
|
<template #driver="{ row }">{{ row.driverName || '—' }}<small>{{ row.vehicleNo || '—' }}</small></template>
|
|
|
|
|
<template #driver="{ row }">{{ row.driverName || '—' }}<small>{{ row.driverPhone || '—' }}</small></template>
|
|
|
|
|
<template #store="{ row }">{{ row.storeName || '—' }}</template>
|
|
|
|
|
<template #status="{ row }"><StatusBadge :status="statusLabel(row.status)" /></template>
|
|
|
|
|
<template #actions="{ row }"><el-button text :aria-label="`查看 ${row.appointmentNo || row.id}`" @click="router.push({ name: 'trucking-detail', params: { id: String(row.id) } })"><Eye :size="16" />查看</el-button><el-button v-if="access.can('platform:firstleg:truck-appointment:edit')" text :aria-label="`编辑 ${row.appointmentNo || row.id}`" @click="router.push({ name: 'trucking-detail', params: { id: String(row.id) }, query: { edit: '1' } })"><Pencil :size="16" />编辑</el-button></template>
|
|
|
|
@@ -66,8 +67,7 @@ onMounted(load)
|
|
|
|
|
</template>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.trucking-page { min-width: 0; padding: 24px; }
|
|
|
|
|
.page-heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:18px; flex-wrap:wrap; }
|
|
|
|
|
h1 { margin:0; font-size:24px; }.page-heading p { margin:6px 0 0; color:var(--el-text-color-secondary); }.surface-panel { margin-bottom:16px; }.table-panel { overflow:hidden; }.table-heading { display:flex; align-items:baseline; gap:10px; }.table-heading h2 { margin:0; font-size:16px; }.table-heading span { color:var(--el-text-color-secondary); font-size:13px; }.empty-hint { display:flex; justify-content:center; gap:8px; color:var(--el-text-color-secondary); padding:24px; }
|
|
|
|
|
.surface-panel { margin-bottom:16px; }.table-panel { overflow:hidden; }.table-heading { display:flex; align-items:baseline; gap:10px; }.table-heading h2 { margin:0; font-size:16px; }.table-heading span { color:var(--el-text-color-secondary); font-size:13px; }.empty-hint { display:flex; justify-content:center; gap:8px; color:var(--el-text-color-secondary); padding:24px; }
|
|
|
|
|
small { display:block; color:var(--el-text-color-secondary); margin-top:3px; }
|
|
|
|
|
@media (max-width:600px) { .trucking-page { padding:16px 12px; } h1 { font-size:20px; } }
|
|
|
|
|
@media (max-width:600px) { .trucking-page { padding:16px 12px; } }
|
|
|
|
|
</style>
|
|
|
|
|
