39 lines
3.4 KiB
Vue
39 lines
3.4 KiB
Vue
<script setup lang="ts">
|
||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||
import { useRouter } from 'vue-router'
|
||
import { poolOrderStatusLabels, type FleetArrangement } from '../fleetArrangement'
|
||
defineProps<{ arrangement: FleetArrangement }>()
|
||
const access = useAccessPreviewStore(), router = useRouter()
|
||
const time = (value: string | null) => value ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '—'
|
||
</script>
|
||
<template>
|
||
<section aria-label="承运安排">
|
||
<p>{{ arrangement.readOnlyReason }}</p>
|
||
<dl class="density-fields fleet-arrangement-fields">
|
||
<div><dt>订单号</dt><dd>{{ arrangement.businessOrderNo }}</dd></div>
|
||
<div><dt>外接预订号</dt><dd>{{ arrangement.bookingNo }}</dd></div>
|
||
<div><dt>车次号</dt><dd><el-button v-if="access.can('platform:fleet:trip:list')" class="fleet-arrangement-reference" link type="primary" @click="router.push({ name: 'overseas-master-data-trip-detail', params: { tripNo: arrangement.tripNo } })">{{ arrangement.tripNo }}</el-button><span v-else>{{ arrangement.tripNo }}</span></dd></div>
|
||
<div><dt>计划发车</dt><dd>{{ time(arrangement.plannedDepartureAt) }}</dd></div>
|
||
<div><dt>起运仓</dt><dd>{{ arrangement.originWarehouseName || '—' }}</dd></div>
|
||
<div><dt>目的地</dt><dd>{{ arrangement.destinationLabel || '—' }}</dd></div>
|
||
<div><dt>交货方式</dt><dd>{{ arrangement.deliveryMode === 'SELF_DELIVERY' ? '客户自送我仓' : '线下提货回我仓' }}</dd></div>
|
||
<div><dt>履约阶段</dt><dd>{{ poolOrderStatusLabels[arrangement.fulfillmentStage] || '待核对履约进度' }}</dd></div>
|
||
<div><dt>阶段时间</dt><dd>{{ time(arrangement.stageOccurredAt) }}</dd></div>
|
||
<div><dt>约定运费（非实收）</dt><dd>{{ arrangement.agreedFreightAmount == null ? '—' : `${Number(arrangement.agreedFreightAmount).toFixed(2)} ${arrangement.currency || ''}` }}</dd></div>
|
||
<div><dt>来货单号</dt><dd>{{ arrangement.incomingNo || '—' }}</dd></div>
|
||
<div><dt>排车单号</dt><dd><el-button v-if="arrangement.dispatchNo && access.can('platform:overseas-warehouse:dispatch:list')" class="fleet-arrangement-reference" link type="primary" @click="router.push({ name: 'overseas-dispatch-detail', params: { dispatchNo: arrangement.dispatchNo } })">{{ arrangement.dispatchNo }}</el-button><span v-else>{{ arrangement.dispatchNo || '—' }}</span></dd></div>
|
||
<div><dt>派送单号</dt><dd>{{ arrangement.deliveryNo || '—' }}</dd></div>
|
||
<div><dt>已签 / 未签 / 退回箱数</dt><dd>{{ arrangement.signedPackages ?? '—' }} / {{ arrangement.unsignedPackages ?? '—' }} / {{ arrangement.returnedPackages ?? '—' }}</dd></div>
|
||
</dl>
|
||
<p v-if="arrangement.deliveryInstructions">交货说明：{{ arrangement.deliveryInstructions }}</p>
|
||
<p v-if="arrangement.exceptionSummary" role="status">履约说明：{{ arrangement.exceptionSummary }}</p>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.fleet-arrangement-fields.density-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); --admin-field-label-width: 160px; }
|
||
.fleet-arrangement-fields dt { overflow-wrap: anywhere; }
|
||
.fleet-arrangement-fields .fleet-arrangement-reference { max-width: 100%; min-width: 0; height: auto; justify-content: flex-start; white-space: normal; text-align: left; line-height: inherit; }
|
||
.fleet-arrangement-reference :deep(span) { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
|
||
</style>
|