62 lines
4.2 KiB
Vue
62 lines
4.2 KiB
Vue
<template>
|
||
<view class="handover-card">
|
||
<view class="handover-heading"><text class="handover-title">发车与交接记录</text><button :disabled="loading" @tap="load">刷新</button></view>
|
||
<text v-if="loading">正在读取当前运输资源…</text>
|
||
<view v-else-if="error" class="handover-error" role="alert">
|
||
<text>{{ error.message }}</text><text v-if="error.requestId">requestId：{{ error.requestId }}</text><text v-if="error.traceId">traceId：{{ error.traceId }}</text>
|
||
<button @tap="load">重新读取</button>
|
||
</view>
|
||
<template v-else-if="status">
|
||
<text class="handover-line">车次 {{ status.tripNo }}</text>
|
||
<text class="handover-line">原始发车：{{ status.originalDeparture.vehiclePlate || '—' }} · {{ status.originalDeparture.driverName || '—' }}</text>
|
||
<view v-if="status.latestHandover" class="handover-record">
|
||
<text class="handover-line">最近交接 {{ status.latestHandover.handoverNo || '—' }}</text>
|
||
<text class="handover-line">{{ time(status.latestHandover.handedOverAt) }} · {{ status.latestHandover.location || '—' }}</text>
|
||
<text class="handover-line">{{ status.latestHandover.previous.vehiclePlate || '—' }} → {{ status.latestHandover.replacement.vehiclePlate || '—' }}</text>
|
||
<text class="handover-line">{{ status.latestHandover.previous.driverName || '—' }} → {{ status.latestHandover.replacement.driverName || '—' }}</text>
|
||
</view>
|
||
<text v-else class="handover-line">本排车暂无在途交接记录。</text>
|
||
<view v-for="delivery in status.deliveries" :key="delivery.deliveryNo" class="handover-delivery">
|
||
<text class="handover-line">{{ delivery.deliveryNo }} · 原实发 {{ delivery.packages }} 箱 · 剩余 {{ delivery.remainingPackages }} 箱 · {{ label(delivery) }}</text>
|
||
<text class="handover-line">{{ delivery.terminalAt ? '完成时承运' : '当前承运' }}：{{ delivery.transport.vehiclePlate || '—' }} · {{ delivery.transport.driverName || '—' }}</text>
|
||
<text v-if="delivery.transport.driverPhone" class="handover-line">联系电话 {{ delivery.transport.driverPhone }}</text>
|
||
</view>
|
||
<text class="handover-note">交接由后台确认。本页只读，不重复发车。</text>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { getDispatchHandoverStatus } from '@/api/trip-handover.js'
|
||
import { toDispatchError } from '@/utils/dispatch-error.js'
|
||
export default {
|
||
props: { dispatchNo: { type: String, required: true }, recordVersion: { type: [String, Number], default: null } },
|
||
data() { return { status: null, error: null, loading: false, generation: 0 } },
|
||
computed: { scopeKey() { return `${this.dispatchNo}:${this.recordVersion ?? ''}` } },
|
||
watch: { scopeKey: { immediate: true, handler() { this.status = null; this.load() } } },
|
||
beforeUnmount() { this.generation++ },
|
||
methods: {
|
||
async load() {
|
||
const generation = ++this.generation
|
||
this.error = null; this.status = null
|
||
if (!this.dispatchNo) { this.loading = false; return }
|
||
this.loading = true
|
||
try { const result = await getDispatchHandoverStatus(this.dispatchNo); if (generation === this.generation) this.status = result }
|
||
catch (cause) { if (generation === this.generation) this.error = toDispatchError(cause, '交接记录读取失败') }
|
||
finally { if (generation === this.generation) this.loading = false }
|
||
},
|
||
time(value) { return value ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '—' },
|
||
label(delivery) {
|
||
if (delivery.terminalAt) return delivery.status === 'RETURNED' ? '运输已完成' : '已签收'
|
||
return { WAIT_DELIVERY: '派送中', RETURN_PENDING: '待退回' }[delivery.status] || '待核对'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.handover-card{padding:28rpx;background:#fff;border-radius:20rpx;margin-top:20rpx;color:#334155;font-size:26rpx}
|
||
.handover-heading{display:flex;align-items:center;justify-content:space-between;gap:16rpx}.handover-title{font-size:30rpx;font-weight:600}
|
||
.handover-heading button{margin:0;font-size:26rpx}.handover-line{display:block;margin-top:12rpx;overflow-wrap:anywhere}
|
||
.handover-record,.handover-delivery{padding-top:16rpx;margin-top:16rpx;border-top:1px solid #e2e8f0}.handover-note{display:block;margin-top:20rpx;color:#64748b}
|
||
.handover-error{color:#b91c1c}.handover-error text{display:block;margin-top:12rpx}
|
||
</style>
|