85 lines
5.2 KiB
Vue
85 lines
5.2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { useRoute, useRouter } from 'vue-router'
|
||
|
|
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
||
|
|
import OverseasDetailShell from '../components/OverseasDetailShell.vue'
|
||
|
|
|
||
|
|
const route = useRoute()
|
||
|
|
const router = useRouter()
|
||
|
|
const orderId = computed(() => String(route.params.orderId || '—'))
|
||
|
|
|
||
|
|
const orderFields = ['订单类型', '拒收时间', '实际入库时间', '头程单号', '货主', '海外仓', '转仓目的仓', 'FBA仓库', '集装箱号', '货柜异常', '异常原因', '运输方式', '预计到仓', '清关状态']
|
||
|
|
const detailFields = ['订单类型', '入仓码', '目的仓', '托数', '箱数', '数量', '体积重量', '预计到港时间', '实际到港时间', '预计到仓', '是否暂扣', '备注(仅自己)', '备注(客户)', '备注(仓库)']
|
||
|
|
const planFields = ['入仓码', '计划入库仓', '合托批次', '合托后托数', 'FBA预约号', '预约状态', '换标状态']
|
||
|
|
const documentColumns: DataTableColumn[] = [
|
||
|
|
{ key: 'type', label: '单据类型', minWidth: 120 },
|
||
|
|
{ key: 'number', label: '单据编号', minWidth: 180 },
|
||
|
|
{ key: 'createdAt', label: '生成时间', minWidth: 160 },
|
||
|
|
{ key: 'quote', label: '报价', minWidth: 140 },
|
||
|
|
]
|
||
|
|
const cargoColumns: DataTableColumn[] = [
|
||
|
|
{ key: 'sku', label: 'SKU', minWidth: 150 },
|
||
|
|
{ key: 'productName', label: '中文品名', minWidth: 180 },
|
||
|
|
{ key: 'pallets', label: '托数', width: 90, align: 'right' },
|
||
|
|
{ key: 'cartons', label: '箱数', width: 90, align: 'right' },
|
||
|
|
{ key: 'quantity', label: '件数', width: 90, align: 'right' },
|
||
|
|
{ key: 'weight', label: '重量(kg)', width: 110, align: 'right' },
|
||
|
|
{ key: 'volume', label: '体积(m³)', width: 110, align: 'right' },
|
||
|
|
]
|
||
|
|
const logColumns: DataTableColumn[] = [
|
||
|
|
{ key: 'occurredAt', label: '时间', minWidth: 160 },
|
||
|
|
{ key: 'node', label: '操作节点', minWidth: 140 },
|
||
|
|
{ key: 'operator', label: '操作人', minWidth: 130 },
|
||
|
|
{ key: 'result', label: '处理结果', minWidth: 220 },
|
||
|
|
]
|
||
|
|
|
||
|
|
function back() {
|
||
|
|
void router.push({ name: 'overseas-last-mile-orders' })
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<OverseasDetailShell title="尾程订单详情" reference-label="尾程单号" :reference-value="orderId" back-label="返回尾程订单" domain="尾程订单详情" @back="back">
|
||
|
|
<div class="detail-grid">
|
||
|
|
<section class="detail-section" aria-labelledby="last-mile-order-heading">
|
||
|
|
<h2 id="last-mile-order-heading">订单信息</h2>
|
||
|
|
<dl class="detail-fields"><div v-for="label in orderFields" :key="label"><dt>{{ label }}</dt><dd>—</dd></div></dl>
|
||
|
|
</section>
|
||
|
|
<section class="detail-section" aria-labelledby="last-mile-lines-heading">
|
||
|
|
<h2 id="last-mile-lines-heading">订单明细</h2>
|
||
|
|
<dl class="detail-fields"><div v-for="label in detailFields" :key="label"><dt>{{ label }}</dt><dd>—</dd></div></dl>
|
||
|
|
</section>
|
||
|
|
<section class="detail-section" aria-labelledby="last-mile-plan-heading">
|
||
|
|
<h2 id="last-mile-plan-heading">计划信息</h2>
|
||
|
|
<dl class="detail-fields"><div v-for="label in planFields" :key="label"><dt>{{ label }}</dt><dd>—</dd></div></dl>
|
||
|
|
</section>
|
||
|
|
<section class="detail-section table-section" aria-labelledby="last-mile-documents-heading">
|
||
|
|
<h2 id="last-mile-documents-heading">关联单据</h2>
|
||
|
|
<DataTable :data="[]" :columns="documentColumns" column-settings-mode="hide" empty-text="海外区域关联单据契约待接入" />
|
||
|
|
</section>
|
||
|
|
<section class="detail-section table-section is-wide" aria-labelledby="last-mile-cargo-heading">
|
||
|
|
<h2 id="last-mile-cargo-heading">货物信息</h2>
|
||
|
|
<DataTable :data="[]" :columns="cargoColumns" column-settings-mode="hide" empty-text="海外区域货物明细契约待接入" />
|
||
|
|
</section>
|
||
|
|
<section class="detail-section table-section" aria-labelledby="last-mile-logs-heading">
|
||
|
|
<h2 id="last-mile-logs-heading">操作记录</h2>
|
||
|
|
<DataTable :data="[]" :columns="logColumns" column-settings-mode="hide" empty-text="海外区域操作记录契约待接入" />
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</OverseasDetailShell>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.detail-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--cc-border); background: #fff; }
|
||
|
|
.detail-section { min-width: 0; padding: 16px 18px 18px; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
|
||
|
|
.detail-section:nth-child(even) { border-right: 0; }
|
||
|
|
.detail-section.is-wide { grid-column: 1 / -1; border-right: 0; }
|
||
|
|
.detail-section h2 { margin: 0 0 12px; color: var(--cc-text); font-size: 15px; }
|
||
|
|
.detail-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--cc-border); border-left: 1px solid var(--cc-border); }
|
||
|
|
.detail-fields > div { min-width: 0; min-height: 58px; padding: 9px 11px; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
|
||
|
|
.detail-fields dt { color: var(--cc-muted); font-size: 12px; }
|
||
|
|
.detail-fields dd { margin: 4px 0 0; color: var(--cc-text); overflow-wrap: anywhere; }
|
||
|
|
.table-section { padding-right: 0; padding-bottom: 0; padding-left: 0; overflow: hidden; }
|
||
|
|
.table-section h2 { margin-right: 18px; margin-left: 18px; }
|
||
|
|
</style>
|