admin-web/src/modules/overseas-master-data/components/TripHandoverPanel.vue

<script setup lang="ts">
import '@/styles/adminWorkbench.css'
import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { ApiResponseError, getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import RowActions, { type RowActionItem } from '@/shared/components/RowActions.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import { listVehicles } from '../api/overseasMasterData'
import { listDrivers } from '../api/drivers'
import { confirmTripHandover, previewTripHandover, listTripHandovers, releaseHandoverResource, handoverNumber, handoverVersion,
  type HandoverCommand, type HandoverPreview, type HandoverRecord, type HandoverRelease, type HandoverSelection } from '../api/tripHandovers'
import type { TripDetail } from '../tripTypes'
import type { VehicleDetail } from '../types'
import type { DriverDetail } from '../driverTypes'

const props = defineProps<{ detail: TripDetail }>()
const emit = defineEmits<{ saved: [] }>()
const access = useAccessPreviewStore()
const readable = computed(() => access.can('platform:fleet:trip:list'))
const writable = computed(() => readable.value && access.can('platform:fleet:trip:handover'))
const releasable = computed(() => readable.value && access.can('platform:fleet:trip:release'))
const rows = ref<HandoverRecord[]>([]), page = ref(1), size = ref(10), total = ref(0), loading = ref(false), busy = ref(false)
const error = ref<ApiErrorDetails | null>(null), commandError = ref<ApiErrorDetails | null>(null)
const preview = ref<HandoverPreview | null>(null), selected = ref<HandoverRecord | null>(null)
const pending = ref<HandoverCommand | null>(null), pendingRelease = ref<{ number: string; command: HandoverRelease } | null>(null)
const vehicles = ref<VehicleDetail[]>([]), drivers = ref<DriverDetail[]>([])
const vehicleLoading = ref(false), driverLoading = ref(false)
const form = reactive({ vehicleId: '', driverId: '', handedOverAt: '', expectedDriverEndAt: '', location: '', reason: '' })
const ending = ref<'VEHICLE' | 'DRIVER' | null>(null)
const endForm = reactive({ actualEndAt: '', location: '', vehicleStatus: 'IN_SERVICE' })
let scope = 0, query = 0, vehicleQuery = 0, driverQuery = 0, previewQuery = 0
const time = (value: string) => value ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '—'
const columns: DataTableColumn[] = [
  { key: 'actions', label: '操作', width: 300, fixed: 'left', slotName: 'actions' },
  { key: 'handoverNo', prop: 'handoverNo', label: '交接编号', minWidth: 220 },
  { key: 'time', label: '实际交接时间', minWidth: 180, slotName: 'time' },
  { key: 'vehicles', label: '交接前后车辆', minWidth: 200, slotName: 'vehicles' },
  { key: 'drivers', label: '交接前后司机', minWidth: 180, slotName: 'drivers' },
  { key: 'location', label: '交接地点', minWidth: 200, slotName: 'location' },
]
function canEnd(row: HandoverRecord, kind: 'VEHICLE' | 'DRIVER') {
  const vehicle = kind === 'VEHICLE', before = row.snapshot.previous, after = row.snapshot.replacement
  return releasable.value && (vehicle ? before.vehicleId !== after.vehicleId && !row.vehicleRelease && before.vehicleId !== props.detail.trip.vehicleId
    : before.driverId !== after.driverId && !row.driverRelease && before.driverId !== props.detail.trip.driverId)
}
function actions(row: HandoverRecord): RowActionItem[] {
  return [{ key: 'detail', label: '查看交接' }, ...(canEnd(row, 'VEHICLE') ? [{ key: 'VEHICLE', label: '结束原车辆任务' }] : []),
    ...(canEnd(row, 'DRIVER') ? [{ key: 'DRIVER', label: '结束原司机任务' }] : [])]
}
function show(row: HandoverRecord, action: string) {
  if (busy.value || pending.value || pendingRelease.value) return
  selected.value = row; ending.value = action === 'VEHICLE' || action === 'DRIVER' ? action : null
  endForm.actualEndAt = new Date().toISOString(); endForm.location = ''; endForm.vehicleStatus = 'IN_SERVICE'; commandError.value = null
}
async function load() {
  const token = ++query
  if (!readable.value) { rows.value = []; total.value = 0; return }
  loading.value = true; error.value = null
  try { const result = await listTripHandovers(props.detail.trip.tripNo, page.value, size.value); if (token === query) { rows.value = result.records; total.value = result.total } }
  catch (cause) { if (token === query) error.value = getApiErrorDetails(cause, '交接记录加载失败') }
  finally { if (token === query) loading.value = false }
}
watch(() => props.detail.trip.tripNo, () => {
  scope++; query++; previewQuery++; vehicleQuery++; driverQuery++; pending.value = null; pendingRelease.value = null
  busy.value = false; preview.value = null; selected.value = null; ending.value = null; commandError.value = null
  vehicles.value = []; drivers.value = []; vehicleLoading.value = false; driverLoading.value = false
  Object.assign(form, { vehicleId: props.detail.trip.vehicleId || '', driverId: props.detail.trip.driverId || '', handedOverAt: new Date().toISOString(), expectedDriverEndAt: props.detail.trip.expectedDriverEndAt, location: '', reason: '' })
  page.value = 1
}, { immediate: true })
watch([() => props.detail.trip.tripNo, page, size, readable], load, { immediate: true })
watch([() => props.detail.trip.recordVersion, () => form.vehicleId, () => form.driverId, () => form.handedOverAt, () => form.expectedDriverEndAt], () => { previewQuery++; preview.value = null })
async function searchVehicles(keyword = '') {
  const token = ++vehicleQuery; vehicleLoading.value = true
  try { const result = await listVehicles({ page: 1, size: 30, keyword: keyword || undefined, region: 'OVERSEAS', status: 'IN_SERVICE' }); if (token === vehicleQuery) vehicles.value = result.records }
  catch (cause) { if (token === vehicleQuery) commandError.value = getApiErrorDetails(cause, '车辆候选读取失败') }
  finally { if (token === vehicleQuery) vehicleLoading.value = false }
}
async function searchDrivers(keyword = '') {
  const token = ++driverQuery; driverLoading.value = true
  try { const result = await listDrivers({ page: 1, size: 30, keyword: keyword || undefined, region: 'OVERSEAS', active: true, reviewStatus: 'APPROVED', expectedEnd: form.expectedDriverEndAt }); if (token === driverQuery) drivers.value = result.records }
  catch (cause) { if (token === driverQuery) commandError.value = getApiErrorDetails(cause, '司机候选读取失败') }
  finally { if (token === driverQuery) driverLoading.value = false }
}
function selection(): HandoverSelection {
  return { recordVersion: props.detail.trip.recordVersion, vehicleId: form.vehicleId, driverId: form.driverId,
    handedOverAt: new Date(form.handedOverAt).toISOString(), expectedDriverEndAt: new Date(form.expectedDriverEndAt).toISOString() }
}
async function inspect() {
  if (busy.value || pending.value || !writable.value) return
  if (!form.vehicleId || !form.driverId || !form.handedOverAt || !form.expectedDriverEndAt) { ElMessage.warning('请选择接替资源并填写交接及预计任务结束时间'); return }
  const token = ++previewQuery, generation = scope; busy.value = true; commandError.value = null; preview.value = null
  try { const result = await previewTripHandover(props.detail.trip.tripNo, selection()); if (token === previewQuery && generation === scope) preview.value = result }
  catch (cause) { if (generation === scope) commandError.value = getApiErrorDetails(cause, '交接核对未通过') }
  finally { pending.value = null; pendingRelease.value = null;  if (generation === scope) busy.value = false }
}
async function confirm() {
  if (busy.value || !writable.value || (!pending.value && !preview.value)) return
  if (!pending.value && !form.location.trim()) { ElMessage.warning('请填写实际交接地点'); return }
  const generation = scope; busy.value = true; commandError.value = null
  try {
    pending.value ??= { selection: selection(), cargoHash: preview.value!.cargoHash, location: form.location.trim(), reason: form.reason.trim() || undefined, idempotencyKey: crypto.randomUUID() }
    const result = await confirmTripHandover(props.detail.trip.tripNo, pending.value)
    if (generation !== scope) return
    pending.value = null; preview.value = null; selected.value = result; emit('saved'); ElMessage.success('交接已记录，请分别核对原资源任务结束')
    await load()
  } catch (cause) { if (generation === scope) { if (cause instanceof ApiResponseError && /^A04/.test(cause.code)) { pending.value = null; preview.value = null } commandError.value = getApiErrorDetails(cause, '交接未确认，请核对或重试') } }
  finally { pending.value = null; pendingRelease.value = null;  if (generation === scope) busy.value = false }
}
async function release() {
  if (busy.value || !releasable.value || (!pendingRelease.value && (!selected.value || !ending.value))) return
  if (!pendingRelease.value && (!endForm.actualEndAt || !endForm.location.trim())) { ElMessage.warning('请填写实际任务结束时间和地点'); return }
  const generation = scope; busy.value = true; commandError.value = null
  try {
    pendingRelease.value ??= { number: selected.value!.handoverNo, command: { recordVersion: handoverVersion(selected.value!.recordVersion), resourceKind: ending.value!, actualEndAt: new Date(endForm.actualEndAt).toISOString(), location: endForm.location.trim(), vehicleStatus: ending.value === 'VEHICLE' ? endForm.vehicleStatus : undefined, idempotencyKey: crypto.randomUUID() } }
    const result = await releaseHandoverResource(props.detail.trip.tripNo, pendingRelease.value.number, pendingRelease.value.command)
    if (generation !== scope) return
    pendingRelease.value = null; selected.value = result; ending.value = null; emit('saved'); ElMessage.success('原资源任务已结束'); await load()
  } catch (cause) {
    if (generation === scope) {
      commandError.value = getApiErrorDetails(cause, '任务结束未确认，请核对或重试')

    }
  }
  finally { pending.value = null; pendingRelease.value = null;  if (generation === scope) busy.value = false }
}
onBeforeUnmount(() => { scope++; query++; previewQuery++; vehicleQuery++; driverQuery++ })
</script>

<template>
  <section aria-label="在途交接" class="handover-panel">
    <p v-if="!readable">暂无车次交接查看权限。</p>
    <template v-else>
      <p>交接后原车辆和司机分别结束实际任务。已经签收或完成退回的货物保留原运输记录。</p>
      <LoadErrorState v-if="error" title="交接记录加载失败" :message="error.message" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
      <div v-if="writable && (detail.trip.status === 'IN_TRANSIT' || pending)">

        <el-form label-position="top" :disabled="busy || !!pending || !!pendingRelease" class="density-form handover-form">
          <el-form-item label="接替车辆" required><el-select v-model="form.vehicleId" filterable remote :remote-method="searchVehicles" :loading="vehicleLoading" @focus="searchVehicles()">
            <el-option v-if="detail.trip.vehicleId && !vehicles.some(row => row.id === detail.trip.vehicleId)" :value="detail.trip.vehicleId" :label="detail.trip.vehiclePlate || '当前车辆'" />
            <el-option v-for="vehicle in vehicles" :key="vehicle.id" :value="vehicle.id" :label="vehicle.plateNumber" />
          </el-select></el-form-item>
          <el-form-item label="接替司机" required><el-select v-model="form.driverId" filterable remote :remote-method="searchDrivers" :loading="driverLoading" @focus="searchDrivers()">
            <el-option v-if="detail.trip.driverId && !drivers.some(row => row.id === detail.trip.driverId)" :value="detail.trip.driverId" :label="detail.trip.driverName || '当前司机'" />
            <el-option v-for="driver in drivers" :key="driver.id" :value="driver.id" :label="`${driver.details.name} · ${driver.details.phone}`" />
          </el-select></el-form-item>
          <el-form-item label="实际交接时间" required><el-date-picker v-model="form.handedOverAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ssZ" /></el-form-item>
          <el-form-item label="司机预计任务结束" required><el-date-picker v-model="form.expectedDriverEndAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ssZ" /></el-form-item>
          <el-form-item label="实际交接地点" required><el-input v-model="form.location" maxlength="500" placeholder="请输入实际交接地点" /></el-form-item>
          <el-form-item label="交接说明（选填）"><el-input v-model="form.reason" maxlength="1000" placeholder="如车辆故障或司机替班（选填）" /></el-form-item>
        </el-form>
        <el-button :loading="busy" :disabled="!!pending || !!pendingRelease" @click="inspect">核对交接货物</el-button>
        <el-button :disabled="busy || !!pending || !!pendingRelease" @click="emit('saved')">刷新车次</el-button>
        <template v-if="preview">
          <p v-if="preview.driverQualification.expiringSoon">驾驶证将在30天内到期，当前预计任务结束仍在有效期内。</p>
          <p>本次交接 {{ preview.cargo.remainingPalletIds.length }} 个实托，占 {{ handoverNumber(preview.cargo.occupied.palletSpaces) }} 托位、{{ handoverNumber(preview.cargo.occupied.weightKg) }} kg、{{ handoverNumber(preview.cargo.occupied.volumeCbm) }} m³。</p>
          <table class="density-table"><thead><tr><th>客户排车单</th><th>交接箱数</th></tr></thead><tbody><tr v-for="(cargo, index) in preview.cargo.remainingCargo" :key="index"><td>{{ cargo.dispatchNo }}</td><td>{{ cargo.packages }}</td></tr></tbody></table>
        </template>
        <el-button v-if="preview || pending" type="primary" :loading="busy" @click="confirm">{{ '确认实际交接' }}</el-button>
      </div>
      <div v-if="commandError" role="alert"><p>{{ commandError.message }}</p><ApiErrorMeta :details="commandError" /></div>
      <div class="workbench-table"><DataTable v-model:page="page" v-model:page-size="size" :data="rows" :columns="columns" :loading="loading" :total="total" row-key="handoverNo" empty-text="暂无在途交接记录">
        <template #actions="{ row }"><RowActions :actions="actions(row as HandoverRecord)" @action="show(row as HandoverRecord, $event)" /></template>
        <template #time="{ row }">{{ time(row.snapshot.handedOverAt) }}</template>
        <template #vehicles="{ row }">{{ row.snapshot.previous.vehiclePlate || '—' }} → {{ row.snapshot.replacement.vehiclePlate || '—' }}</template>
        <template #drivers="{ row }">{{ row.snapshot.previous.driverName || '—' }} → {{ row.snapshot.replacement.driverName || '—' }}</template>
        <template #location="{ row }">{{ row.snapshot.location }}</template>
      </DataTable></div>
      <div v-if="selected" class="handover-detail">
        <h4>交接记录 {{ selected.handoverNo }}</h4>
        <p>{{ selected.snapshot.reason }} · {{ selected.snapshot.location }}</p>
        <p>原车辆任务：{{ selected.snapshot.previous.vehicleId === selected.snapshot.replacement.vehicleId ? '车辆继续执行' : selected.vehicleRelease ? `已结束 · ${time(selected.vehicleRelease.actualEndAt)} · ${selected.vehicleRelease.location}` : '尚未结束' }}</p>
        <p>原司机任务：{{ selected.snapshot.previous.driverId === selected.snapshot.replacement.driverId ? '司机继续执行' : selected.driverRelease ? `已结束 · ${time(selected.driverRelease.actualEndAt)} · ${selected.driverRelease.location}` : '尚未结束' }}</p>
        <p>交接前已完成派送：{{ selected.snapshot.cargo.completedDeliveries.map(row => row.deliveryNo).join('、') || '—' }}</p>
        <template v-if="ending || pendingRelease">

          <el-form label-position="top" class="density-form handover-form" :disabled="busy || !!pendingRelease">
            <el-form-item label="实际任务结束时间" required><el-date-picker v-model="endForm.actualEndAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ssZ" /></el-form-item>
            <el-form-item label="实际任务结束地点" required><el-input v-model="endForm.location" maxlength="500" placeholder="请输入原车辆或司机实际结束任务的地点" /></el-form-item>
            <el-form-item v-if="ending === 'VEHICLE'" label="车辆实际状态" required><el-select v-model="endForm.vehicleStatus"><el-option value="IN_SERVICE" label="在役" /><el-option value="MAINTENANCE" label="维修中" /><el-option value="INACTIVE" label="停用" /><el-option value="RETURNED" label="已归还" /></el-select></el-form-item>
          </el-form>
          <el-button v-if="releasable" type="primary" :loading="busy" @click="release">{{ '确认原资源任务结束' }}</el-button>
        </template>
      </div>
    </template>
  </section>
</template>
<style scoped>
.handover-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--admin-space-4) var(--admin-space-6)}
.handover-form :deep(.el-select){width:100%}.handover-detail{margin-top:var(--admin-space-6)}
</style>