33 lines
1.6 KiB
Vue
33 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import type { MerchantTransportFragment } from '../api/unifiedOrders'
|
|
import { customerTransportRows } from '../utils/transportFacts'
|
|
|
|
const props = defineProps<{ fragments: MerchantTransportFragment[] }>()
|
|
const rows = computed(() => customerTransportRows(props.fragments))
|
|
function time(value: string | null) { return value ? value.replace('T', ' ') : '—' }
|
|
</script>
|
|
|
|
<template>
|
|
<div class="transport-facts" aria-label="实际装载片段运输节点">
|
|
<strong>运输节点</strong>
|
|
<el-table v-if="rows.length" :data="rows" row-key="key" border size="small">
|
|
<el-table-column prop="inboundCode" label="入仓码" min-width="155" />
|
|
<el-table-column prop="cabinetNo" label="柜次" width="90" />
|
|
<el-table-column prop="containerNo" label="集装箱号" min-width="145" />
|
|
<el-table-column prop="nodeLabel" label="节点" min-width="150" />
|
|
<el-table-column label="实际时间" min-width="175"><template #default="{ row }">{{ time(row.actualAt) }}</template></el-table-column>
|
|
<el-table-column label="预计时间" min-width="175"><template #default="{ row }">{{ time(row.estimatedAt) }}</template></el-table-column>
|
|
<el-table-column prop="location" label="地点" min-width="130" />
|
|
<el-table-column prop="source" label="来源" width="105" />
|
|
</el-table>
|
|
<p v-else>暂无运输节点</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.transport-facts { margin-top: 9px; }
|
|
.transport-facts > strong { display: block; padding: 7px 0 5px; color: var(--navy); font-size: 11px; }
|
|
.transport-facts > p { color: var(--muted); font-size: 11px; }
|
|
</style>
|