70 lines
7.5 KiB
Vue
70 lines
7.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import type { DispatchDetail, Driver, Vehicle } from '../dispatchContracts'
|
|
import type { DispatchVehicleMaintenance } from '../dispatchVehicleMaintenance'
|
|
import { formatOverseasDateTime } from '../lastMilePresentation'
|
|
import DispatchResourceFields from './DispatchResourceFields.vue'
|
|
|
|
defineProps<{ detail: DispatchDetail; disabled: boolean }>()
|
|
const vehicle = defineModel<Vehicle>('vehicle', { required: true })
|
|
const driver = defineModel<Driver>('driver', { required: true })
|
|
const maintenance = defineModel<DispatchVehicleMaintenance>('maintenance', { required: true })
|
|
const plannedDepartureAt = defineModel<string>('plannedDepartureAt', { required: true })
|
|
const estimatedArrivalAt = defineModel<string>('estimatedArrivalAt', { required: true })
|
|
const publishLooseboardDemand = defineModel<boolean>('publishLooseboardDemand', { required: true })
|
|
const tab = ref('info')
|
|
const deliveryMethods = ['FBA自提', '客户自提', '卡派打托', '卡派地板', '快递', '外配']
|
|
const pickupMethods = ['一提一卸', '一提多卸']
|
|
const loadTypes = ['托盘', '地板', '混装']
|
|
const vehicleTypes = ['厢式货车', '平板车', '集装箱卡车']
|
|
</script>
|
|
|
|
<template>
|
|
<el-tabs v-model="tab" class="density-element-tabs density-contained-tabs maintenance-tabs">
|
|
<el-tab-pane label="排车信息" name="info">
|
|
<div class="density-dialog-sections">
|
|
<section class="density-dialog-section" aria-label="本车资源登记">
|
|
<h3 class="density-dialog-section__title">车辆与司机</h3>
|
|
<table class="density-table density-table--editable maintenance-table"><tbody><tr><td><el-form-item label="排车单号"><el-input :model-value="detail.dispatchNo" readonly /></el-form-item></td><td><el-form-item label="发车时间"><el-input :model-value="formatOverseasDateTime(detail.dispatchInfo.departedAt)" readonly /></el-form-item></td></tr></tbody></table>
|
|
<DispatchResourceFields continuous v-model:vehicle="vehicle" v-model:driver="driver" :disabled="disabled" />
|
|
</section>
|
|
<section class="density-dialog-section" aria-label="本车时间登记">
|
|
<h3 class="density-dialog-section__title">排车时间</h3>
|
|
<table class="density-table density-table--editable maintenance-table"><tbody><tr><td><el-form-item label="计划发车时间"><el-date-picker v-model="plannedDepartureAt" :disabled="disabled" type="datetime" value-format="YYYY-MM-DDTHH:mm:ssZ" placeholder="请选择计划发车时间" /></el-form-item></td><td><el-form-item label="预计到达时间"><el-date-picker v-model="estimatedArrivalAt" :disabled="disabled" type="datetime" value-format="YYYY-MM-DDTHH:mm:ssZ" placeholder="请选择预计到达时间" /></el-form-item></td></tr></tbody></table>
|
|
</section>
|
|
<section class="density-dialog-section" aria-label="派送补充资料">
|
|
<h3 class="density-dialog-section__title">派送信息</h3>
|
|
<div class="maintenance-delivery-fields">
|
|
<el-form-item label="预派送日期"><el-date-picker v-model="maintenance.plannedDeliveryDate" type="date" value-format="YYYY-MM-DD" :disabled="disabled" placeholder="请选择预派送日期" /></el-form-item>
|
|
<el-form-item label="派送方式"><el-select v-model="maintenance.deliveryMethod" :disabled="disabled" clearable placeholder="请选择派送方式"><el-option v-for="value in deliveryMethods" :key="value" :label="value" :value="value" /></el-select></el-form-item>
|
|
<el-form-item label="提货方式"><el-select v-model="maintenance.pickupMethod" :disabled="disabled" clearable placeholder="请选择提货方式"><el-option v-for="value in pickupMethods" :key="value" :label="value" :value="value" /></el-select></el-form-item>
|
|
<el-form-item label="装车类型"><el-select v-model="maintenance.loadType" :disabled="disabled" clearable placeholder="请选择装车类型"><el-option v-for="value in loadTypes" :key="value" :label="value" :value="value" /></el-select></el-form-item>
|
|
<el-form-item label="车队邮箱"><el-input v-model="maintenance.fleetEmail" :disabled="disabled" maxlength="254" placeholder="请输入车队邮箱" /></el-form-item>
|
|
<el-form-item label="车辆类型"><el-select v-model="maintenance.vehicleType" :disabled="disabled" clearable placeholder="请选择车辆类型"><el-option v-for="value in vehicleTypes" :key="value" :label="value" :value="value" /></el-select></el-form-item>
|
|
<el-form-item label="预约账号"><el-input v-model="maintenance.appointmentAccount" :disabled="disabled" maxlength="128" placeholder="请输入预约账号" /></el-form-item>
|
|
<el-form-item label="预约号"><el-input v-model="maintenance.appointmentNo" :disabled="disabled" maxlength="128" placeholder="请输入预约号" /></el-form-item>
|
|
</div>
|
|
<el-form-item v-if="detail.taskType === 'DELIVERY'" label="散板需求"><el-checkbox v-model="publishLooseboardDemand" :disabled="disabled">发布公共散板需求</el-checkbox></el-form-item>
|
|
<table v-if="detail.dispatchInfo.fbaAppointments.length" class="density-table"><thead><tr><th>目的仓</th><th>已确认预约号</th><th>确认送达时间</th></tr></thead><tbody><tr v-for="(appointment, index) in detail.dispatchInfo.fbaAppointments" :key="appointment.batchKey + '-' + index"><td>{{ appointment.destinationWarehouseCode || '—' }}</td><td>{{ appointment.appointmentNo || appointment.batchNo || '—' }}</td><td>{{ formatOverseasDateTime(appointment.confirmedAt) }}</td></tr></tbody></table>
|
|
</section>
|
|
<section class="density-dialog-section" aria-label="本车费用信息"><h3 class="density-dialog-section__title">费用信息</h3><slot name="fees"><p class="density-dialog-note">{{ detail.documents.deliveries.length ? '费用以关联派送单的正式费用记录为准。' : '尚未生成派送单费用。' }}</p></slot></section>
|
|
<section class="density-dialog-section" aria-label="车辆维护附件"><h3 class="density-dialog-section__title">附件</h3><slot name="attachments" /></section>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="`关联订单 (${detail.orderDetails.length})`" name="orders">
|
|
<slot name="appointments" />
|
|
<div class="maintenance-orders"><table class="density-table"><thead><tr><th>客户</th><th>订单号</th><th>入仓码</th><th>重量(kg)</th><th>托数</th><th>目的FBA仓</th><th>体积(m³)</th><th>集装箱号</th></tr></thead><tbody><tr v-for="(order, index) in detail.orderDetails" :key="`${order.sourceKey}-${order.orderNo}-${index}`"><td>{{ order.customerName || '—' }}</td><td>{{ order.orderNo || '—' }}</td><td>{{ order.inboundCode || '—' }}</td><td>{{ order.grossWeightKg ?? '—' }}</td><td>{{ order.palletCount ?? '—' }}</td><td>{{ order.destinationFbaWarehouse || '—' }}</td><td>{{ order.volumeCbm ?? '—' }}</td><td>{{ order.containerNo || '—' }}</td></tr><tr v-if="!detail.orderDetails.length"><td colspan="8">暂无关联订单</td></tr></tbody></table></div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.maintenance-table { table-layout: fixed; }
|
|
.maintenance-table td { width: 50%; }
|
|
.maintenance-delivery-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--admin-space-4); }
|
|
.maintenance-delivery-fields > * { min-width: 0; }
|
|
.maintenance-delivery-fields :deep(.el-date-editor), .maintenance-table :deep(.el-date-editor) { width: 100%; }
|
|
.maintenance-orders { overflow-x: auto; }
|
|
.maintenance-orders table { min-width: 1000px; }
|
|
</style>
|