@@ -3,18 +3,17 @@ import { computed, onMounted, reactive, ref, watch } from 'vue'
import type { FormInstance , FormRules } from 'element-plus'
import { Eye , Save } from '@lucide/vue'
import type { SaveTruckAppointmentRequest , TruckAppointmentResource } from '../types'
import { listPlatformTenants , type PlatformTenantResource } from '@/modules/iam'
import { listSuppliers , type Supplier } from '@/modules/suppliers'
import { listContainers , type ContainerBookingResource } from '@/modules/container-load ing'
import { listOceanBookings , type OceanBookingResource } from '@/modules/ocean-bookings '
import { listAllPlatformWarehouses , type PlatformWarehouseSummaryResource } from '@/modules/warehouses'
import { getOceanBooking , listOceanBookings , type OceanBookingAllocatedContainer , type OceanBookingDocument , type OceanBookingResource } from '@/modules/ocean-book ings '
import { isIso6346ContainerNumber } from '../iso6346 '
const props = defineProps < { modelValue : SaveTruckAppointmentRequest ; resource ? : TruckAppointmentResource | null ; readonly ? : boolean ; submitting ? : boolean } > ( )
const emit = defineEmits < { 'update:modelValue' : [ SaveTruckAppointmentRequest ] ; submit : [ ] ; attachments : [ ] } > ( )
const formRef = ref < FormInstance > ( )
const relationWarning = ref ( '' )
const derivedCustomerSource = ref < 'booking' | 'container' | null > ( null )
const billOfLadingFromBooking = ref ( false )
const bookingContainersLoading = ref ( false )
const bookingContainersError = ref ( '' )
const bookingDocuments = ref < OceanBookingDocument [ ] > ( [ ] )
const defaults : Partial < SaveTruckAppointmentRequest > = { expectedVersion : 0 , currency : 'RMB' , payableAmount : '0.00' , receivableAmount : '0.00' , packageCount : 0 , palletCount : 0 , transitMinutes : 0 }
function normalizeDraft ( value : SaveTruckAppointmentRequest ) : SaveTruckAppointmentRequest { return { ... defaults , ... value , currency : value . currency ? . trim ( ) . toUpperCase ( ) || 'RMB' } }
const draft = reactive < SaveTruckAppointmentRequest > ( normalizeDraft ( props . modelValue ) )
@@ -30,7 +29,13 @@ const phoneRule = (label: string) => ({ validator: (_rule: unknown, value: unkno
else callback ( new Error ( ` ${ label } 格式不正确 ` ) )
} , trigger : 'blur' } )
const rules : FormRules = {
customerId : [ { required : true , message : '请选择客户 ' , trigger : 'change' } , { validator : ( _rule , value , callback ) => callback ( selectableCustomers . value . some ( ( item ) => String ( item . id ) === String ( value ) ) ? undefined : new Error ( '请选择有效的启用客户' ) ) , trigger : 'change' } ] ,
oceanBookingId : [ { required : true , message : '请选择已放舱订舱 ' , trigger : 'change' } , { validator : ( _rule , value , callback ) => {
if ( ! ( bookings . value . some ( ( item ) => item . id === String ( value ) && item . status === 'RELEASED' ) || selectedBookingFallback . value ? . id === String ( value ) ) ) return callback ( new Error ( '请选择有效的已放舱订舱' ) )
if ( bookingContainersError . value ) return callback ( new Error ( '订舱资料状态加载失败,请重试' ) )
return callback ( bookingDocumentReady . value ? undefined : new Error ( '所选订舱缺少有效的订舱确认文件或提单文件' ) )
} , trigger : 'change' } ] ,
containerBookingId : [ { required : true , message : '请选择该订舱下已录真实集装箱号的柜次' , trigger : 'change' } , { validator : ( _rule , value , callback ) => callback ( selectableContainers . value . some ( ( item ) => item . containerBookingId === String ( value ) ) || ( props . readonly && selectedContainerFallback . value ? . id === String ( value ) ) ? undefined : new Error ( '请选择该订舱下有效的真实柜号柜次' ) ) , trigger : 'change' } ] ,
customerId : [ { required : true , message : '所选订舱缺少客户信息' , trigger : 'change' } ] ,
carrierId : [ { required : true , message : '请选择承运商' , trigger : 'change' } , { validator : ( _rule , value , callback ) => callback ( selectableCarriers . value . some ( ( item ) => String ( item . id ) === String ( value ) ) ? undefined : new Error ( '请选择有效的合作中拖车供应商' ) ) , trigger : 'change' } ] ,
plannedLoadingAt : [ { required : true , message : '请选择预计装箱时间' , trigger : 'change' } ] ,
fleetPhone : [ phoneRule ( '车队电话' ) ] , driverPhone : [ phoneRule ( '司机电话' ) ] , storePhone : [ phoneRule ( '门店电话' ) ] ,
@@ -38,25 +43,21 @@ const rules: FormRules = {
grossWeightKg : [ nonNegative ( '毛重' ) ] , volumeCbm : [ nonNegative ( '体积' ) ] , payableAmount : [ nonNegative ( '应付拖车费' ) ] , receivableAmount : [ nonNegative ( '应收拖车费' ) ] ,
currency : [ { pattern : /^[A-Z]{3,8}$/ , message : '币种请输入 3-8 位大写字母(如 RMB)' , trigger : 'blur' } ] ,
}
const customers = ref < PlatformTenantResource [ ] > ( [ ] )
const carriers = ref < Supplier [ ] > ( [ ] )
const containers = ref < ContainerBookingResource [ ] > ( [ ] )
const containers = ref < OceanBookingAllocatedContainer [ ] > ( [ ] )
const bookings = ref < OceanBookingResource [ ] > ( [ ] )
const warehouses = ref < PlatformWarehouseSummaryResource [ ] > ( [ ] )
const optionsLoading = ref ( false )
const optionsError = ref ( '' )
const selectableCustomers = computed ( ( ) => customers . value . filter ( ( item ) => item . status === 'ACTIVE' ) )
const selectableWarehouses = computed ( ( ) => warehouses . value . filter ( ( item ) => (
item . status === 'ACTIVE' || String ( item . id ) === String ( draft . warehouseId )
) ) )
const selectableCarriers = computed ( ( ) => carriers . value . filter ( ( item ) => (
item . status === 'ACTIVE'
) ) )
const selectedReleasedBooking = computed ( ( ) => bookings . value . find ( ( item ) => item . id === draft . oceanBookingId && item . status === 'RELEASED' ) || null )
const bookingDocumentReady = computed ( ( ) => bookingDocuments . value . some ( ( document ) => document . valid && [ 'BOOKING_CONFIRMATION' , 'BILL_OF_LADING' ] . includes ( document . documentType ) ) )
const selectableContainers = computed ( ( ) => containers . value . filter ( ( item ) => isIso6346ContainerNumber ( item . containerNo ) ) )
const selectedContainerFallback = computed ( ( ) => {
const id = draft . containerBookingId
const snapshot = props . resource
if ( ! id || containers . value . some ( ( item ) => String ( item . id ) === String ( id ) ) || String ( snapshot ? . containerBookingId ) !== String ( id ) ) return null
if ( ! id || selectableContainers . value . some ( ( item ) => String ( item . containerBookingId ) === String ( id ) ) || String ( snapshot ? . containerBookingId ) !== String ( id ) ) return null
return {
id : String ( id ) ,
label : ` 柜次号: ${ snapshot ? . cabinetNo || '待生成' } / 集装箱号: ${ snapshot ? . containerNo || '待录入' } ` ,
@@ -68,93 +69,96 @@ const selectedBookingFallback = computed(() => {
if ( ! id || bookings . value . some ( ( item ) => String ( item . id ) === String ( id ) ) || String ( snapshot ? . oceanBookingId ) !== String ( id ) ) return null
return { id : String ( id ) , label : snapshot ? . oceanBookingNo || '订舱号缺失' }
} )
const selectedWarehouseFallback = computed ( ( ) => {
const id = draft . warehouseId
const snapshot = props . resource
if ( ! id || selectableWarehouses . value . some ( ( item ) => String ( item . id ) === String ( id ) ) || String ( snapshot ? . warehouseId ) !== String ( id ) ) return null
return { id : String ( id ) , label : snapshot ? . warehouseName || '当前仓库(需重新选择)' }
} )
function customerLabel ( customer : PlatformTenantResource ) { return customer . tenantName }
function selectCustomer ( customerId : string ) { const customer = selectableCustomers . value . find ( ( item ) => String ( item . id ) === customerId ) ; draft . customerId = customer ? . id ? String ( customer . id ) : null ; draft . customerName = customer ? customerLabel ( customer ) : null ; derivedCustomerSource . value = null ; relationWarning . value = '' }
function selectCarrier ( carrierId : string ) { const carrier = selectableCarriers . value . find ( ( item ) => String ( item . id ) === carrierId ) ; draft . carrierId = carrier ? . id || null ; draft . carrierName = carrier ? . name || null }
function applyRelatedCustomer ( customerId : string | null | undefined , customerName : string | null | undefined , source : 'booking' | 'container' ) {
if ( ! customerId ) return
if ( ! draft . customerId ) { draft . customerId = String ( customerId ) ; draft . customerName = customerName || null ; derivedCustomerSource . value = source ; return }
if ( String ( draft . customerId ) !== String ( customerId ) ) relationWarning . value = '所选关联资源与当前客户不一致,请重新选择客户或清空该关联'
}
function selectContainer ( containerId : string ) {
const item = containers . value . find ( ( entry ) => entry . id === containerId )
draft . containerBookingId = item ? . id || null
const item = selectableContainers . value . find ( ( entry ) => entry . containerBookingId === containerId )
draft . containerBookingId = item ? . containerBookingId || null
relationWarning . value = ''
if ( ! item ) {
draft . loadingPlanId = null ; draft . warehouseId = null
if ( derivedCustomerSource . value === 'container' ) { draft . customerId = null ; draft . customerName = null ; derivedCustomerSource . value = null }
draft . loadingPlanId = null
return
}
draft . loadingPlanId = item . planId || null ; draft . warehouseId = item . warehouseId || null
applyRelatedCustomer ( item . customerId , item . customerName , 'container' )
draft . loadingPlanId = null
}
function selectBooking ( bookingId : string ) {
async function loadBookingContainers ( bookingId : string ) {
bookingContainersLoading . value = true
bookingContainersError . value = ''
try {
const booking = await getOceanBooking ( bookingId )
if ( ! bookings . value . some ( ( item ) => item . id === booking . id ) ) bookings . value . push ( booking )
containers . value = booking . containers || [ ]
bookingDocuments . value = booking . documents || [ ]
if ( ! selectableContainers . value . some ( ( item ) => item . containerBookingId === draft . containerBookingId ) ) {
draft . containerBookingId = null
draft . loadingPlanId = null
}
} catch {
containers . value = [ ]
bookingDocuments . value = [ ]
draft . containerBookingId = null
draft . loadingPlanId = null
bookingContainersError . value = '该订舱柜次加载失败,请重试'
} finally {
bookingContainersLoading . value = false
}
}
async function selectBooking ( bookingId : string ) {
const item = bookings . value . find ( ( entry ) => entry . id === bookingId )
const previouslyDerivedBillOfLading = billOfLadingFromBooking . value
draft . oceanBookingId = item ? . id || null
draft . containerBookingId = null
draft . loadingPlanId = null
containers . value = [ ]
bookingDocuments . value = [ ]
relationWarning . value = ''
if ( ! item ) {
if ( billOfLadingFromBooking . value ) draft . billOfLadingNo = null
billOfLadingFromBooking . value = false
if ( derivedCustomerSource . value === 'booking' ) { draft . customerId = null ; draft . customerName = null ; derivedCustomerSource . value = null }
draft . customerId = null
draft . customerName = null
draft . warehouseId = null
draft . billOfLadingNo = null
return
}
applyRelatedCustomer ( item . customerId , item . customerName , 'booking' )
if ( item . status === 'RELEASED' ) {
if ( draft . billOfLadingNo && draft . billOfLadingNo !== item . billOfLadingNo ) relationWarning . value = '已放舱订舱的提单号与当前填写值不一致,已使用订舱冻结快照'
draft . billOfLadingNo = item . billOfLadingNo || null
billOfLadingFromBooking . value = true
} else {
if ( previouslyDerivedBillOfLading ) draft . billOfLadingNo = null
billOfLadingFromBooking . value = false
}
draft . customerId = item . customerId
draft . customerName = item . customerName
draft . warehouseId = item . warehouseId
draft . billOfLadingNo = item . billOfLadingNo
await loadBookingContainers ( item . id )
}
async function loadOptions ( ) {
optionsLoading . value = true ; optionsError . value = ''
const results = await Promise . allSettled ( [
listPlatformTenants ( { page : 1 , size : 200 , status : 'ACTIVE' } ) ,
listSuppliers ( { page : 1 , size : 200 , category : 'TRUCKING' , status : 'ACTIVE' } ) ,
listContainers ( { page : 1 , size : 200 } ) ,
listOceanBookings ( { page : 1 , size : 200 } ) ,
listAllPlatformWarehouses ( ) ,
listOceanBookings ( { page : 1 , size : 200 , status : 'RELEASED' } ) ,
] )
if ( results [ 0 ] . status === 'fulfilled' ) customers . value = results [ 0 ] . value . records . filter ( ( customer ) => customer . status === 'ACTIVE' )
if ( results [ 1 ] . status === 'fulfilled' ) carriers . value = results [ 1 ] . value . records . filter ( ( item ) => item . category === 'TRUCKING' && item . status === 'ACTIVE ' )
if ( results [ 2 ] . status === 'fulfilled' ) containers . value = results [ 2 ] . value . records
if ( results [ 3 ] . status === 'fulfilled' ) bookings . value = results [ 3 ] . value . records
if ( results [ 4 ] . status === 'fulfilled' ) warehouses . value = results [ 4 ] . value
const failed = [ '客户' , '承运商' , '柜次' , '订舱' , '仓库' ] . filter ( ( _ , index ) => results [ index ] ? . status === 'rejected' )
if ( results [ 0 ] . status === 'fulfilled' ) carriers . value = results [ 0 ] . value . records . filter ( ( item ) => item . category === 'TRUCKING' && item . status === 'ACTIVE' )
if ( results [ 1 ] . status === 'fulfilled' ) bookings . value = results [ 1 ] . value . records . filter ( ( item ) => item . status === 'RELEASED ' )
const failed = [ '承运商' , '已放舱订舱' ] . filter ( ( _ , index ) => results [ index ] ? . status === 'rejected' )
if ( failed . length ) optionsError . value = ` ${ failed . join ( '、' ) } 选项加载失败 `
optionsLoading . value = false
if ( draft . oceanBookingId ) await loadBookingContainers ( String ( draft . oceanBookingId ) )
}
async function validate ( ) { return formRef . value ? . validate ( ) }
async function submitForm ( ) { if ( await formRef . value ? . validate ( ) ) emit ( 'submit' ) }
defineExpose ( { validate } )
onMounted ( ( ) => { void loadOptions ( ) } )
watch ( ( ) => props . readonly , ( readonly ) => { if ( ! readonly && ! customers . value . length ) void loadOptions ( ) } )
watch ( ( ) => props . readonly , ( readonly ) => { if ( ! readonly && ! bookings . value . length ) void loadOptions ( ) } )
< / script >
< template >
< el-form ref = "formRef" :model = "draft" :rules = "rules" label -position = " top " : disabled = "readonly || submitting" class = "truck-form" >
< div class = "relation-note" > < span > 订舱 、 柜次和装柜计划均为可选关联 , 不影响独立开立拖车预约 ; 选择后仅用于补全快照和一致性检查 。 < / span > < div v-if = "$slots['relation-note-actions']" class="relation-note__actions"><slot name="relation-note-actions" / > < / div > < / div >
< div class = "relation-note" > < span > 拖车预约必须先选择已放舱 订舱, 再选择该订舱下已录入真实 ISO 集装箱号的柜次 ; 客户 、 仓库和提单号由订舱冻结资料带入 , 最终资格仍由服务端校验 。 < / span > < div v-if = "$slots['relation-note-actions']" class="relation-note__actions"><slot name="relation-note-actions" / > < / div > < / div >
< el-alert v-if = "relationWarning" type="warning" :closable="false" show-icon :title="relationWarning" class="relation-alert" / >
< el-alert v-if = "optionsError" type="warning" :closable="false" show-icon :title="optionsError" class="relation-alert"><el-button link type="warning" :loading="optionsLoading" @click="loadOptions" > 重新加载选项 < / el -button > < / el-alert >
< el-row :gutter = "16" >
< el-col :xs = "24" > < el-divider content -position = " left " > 订舱与柜次 ( 必填 ) < / el-divider > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "订舱" prop = "oceanBookingId" > < el-select :model-value = "draft.oceanBookingId" filterable placeholder = "请先选择已放舱订舱" :loading = "optionsLoading" no -data -text = " 暂无可用的已放舱订舱 " style = "width:100%" @ update : model -value = " selectBooking ( String ( $ event | | ' ' ) ) " > < el-option v-if = "selectedBookingFallback" :key="selectedBookingFallback.id" :label="selectedBookingFallback.label" :value="selectedBookingFallback.id" /><el-option v-for="item in bookings" :key="item.id" :label="`${item.bookingNo || '订舱号缺失'}${item.billOfLadingNo ? ` / 提单号:${item.billOfLadingNo}` : ''}`" :value="item.id" / > < / el-select > < / el-form-item > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "柜次(真实集装箱号)" prop = "containerBookingId" > < el-select :model-value = "draft.containerBookingId" filterable : disabled = "!draft.oceanBookingId || bookingContainersLoading" placeholder = "请先选择订舱,再选择真实柜号柜次" :loading = "bookingContainersLoading" : no -data -text = " draft.oceanBookingId ? ' 该订舱暂无已录真实集装箱号的柜次 ' : ' 请先选择订舱 ' " style = "width:100%" @ update : model -value = " selectContainer ( String ( $ event | | ' ' ) ) " > < el-option v-if = "selectedContainerFallback" :key="selectedContainerFallback.id" :label="selectedContainerFallback.label" :value="selectedContainerFallback.id" :disabled="!readonly" /><el-option v-for="item in selectableContainers" :key="item.containerBookingId" :label="`柜次号:${item.cabinetNo || '待生成'} / 集装箱号:${item.containerNo}`" :value="item.containerBookingId" /></el-select><div v-if="bookingContainersError" class="field-error"><span>{{ bookingContainersError }}</span><el-button link type="primary" :loading="bookingContainersLoading" @click="draft.oceanBookingId && loadBookingContainers(String(draft.oceanBookingId))">重新加载</el-button></div><div v-else-if="draft.oceanBookingId && !bookingContainersLoading && !selectableContainers.length" class="field-hint" > 只有已分配至该订舱且已录入真实 ISO 集装箱号的柜次可以预约拖车 。 < / div > < / el -form -item > < / el-col >
< el-col :xs = "24" > < el-divider content -position = " left " > 基本信息 < / el-divider > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "客户" prop = "customerId" > < el-select :model-value = "draft.customerId" filterable clearable placeholder = "请选择客户" :loading = "optionsLoading" no -data -text = " 暂无启用的客户 " style = "width:100%" @ update : model -value = " selectCustomer ( String ( $ event | | ' ' ) ) " > < el-option v-if = "draft.customerId && !selectableCustomers.some((item) => String(item.id) === String(draft.customerId))" :label="draft.customerName || '历史客户(需重新选择)'" :value="String(draft.customerId)" disabled /><el-option v-for="item in selectableCustomers" :key="String(item.id)" :label="customerLabel(item)" :value="String(item.id)" / > < / el-select > < / el-form-item > < / el-col >
< el-col v-if = "draft.oceanBookingId && !bookingContainersLoading && !bookingContainersError && !bookingDocumentReady" :xs="24"><el-alert title="所选订舱缺少有效的订舱确认文件或提单文件,暂不能创建或保存拖车预约" type="warning" :closable="false" show -icon / > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "客户" prop = "customerId" > < el-input : model -value = " draft.customerName | | ' ' " disabled placeholder = "选择订舱后自动带入" / > < / el-form-item > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "承运商" prop = "carrierId" > < el-select :model-value = "draft.carrierId" filterable clearable placeholder = "请选择承运商" :loading = "optionsLoading" no -data -text = " 暂无可用拖车供应商 " style = "width:100%" @ update : model -value = " selectCarrier ( String ( $ event | | ' ' ) ) " > < el-option v-if = "draft.carrierId && !selectableCarriers.some((item) => String(item.id) === String(draft.carrierId))" :label="draft.carrierName || '当前承运商(需重新选择)'" :value="String(draft.carrierId)" disabled /><el-option v-for="item in selectableCarriers" :key="String(item.id)" :label="item.name" :value="String(item.id)" / > < / el-select > < / el-form-item > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "预计装箱时间" prop = "plannedLoadingAt" > < el-date-picker v-model = "draft.plannedLoadingAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择预计装箱时间" style="width:100%" / > < / el-form-item > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "提单号" > < el-input v-model = "draft.billOfLadingNo" :disabled="Boolean(selectedReleasedBooking)" maxlength="128" placeholder="草稿可暂不填写,派车前必填" /><div v-if= "selectedReleasedBooking" class="field-hint"> 已从放舱订舱回填并锁定 < / div > < / el -form -item > < / el-col >
< el-col :xs = "24" > < el-divider content -position = " left " > 可选关联 < / el-divider > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "关联柜次(可选)" > < el-select :model-value = "draft.containerBookingId" filterable clearable placeholder = "可选择柜次辅助补全" :loading = "optionsLoading" no -data -text = " 暂无可关联柜次 " style = "width:100%" @ update : model -value = " selectContainer ( String ( $ event | | ' ' ) ) " > < el-option v-if = "selectedContainerFallback" :key="selectedContainerFallback.id" :label="selectedContainerFallback.label" :value="selectedContainerFallback.id" /><el-option v-for="item in containers" :key="item.id" :label="`柜次号:${item.cabinetNo || item.bookingNo || '待生成'} / 集装箱号:${item.containerNo || '待录入'}`" :value="item.id" / > < / el-select > < / el-form-item > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "关联订舱(可选)" > < el-select :model-value = "draft.oceanBookingId" filterable clearable placeholder = "可选择订舱辅助补全" :loading = "optionsLoading" no -data -text = " 暂无可关联订舱 " style = "width:100%" @ update : model -value = " selectBooking ( String ( $ event | | ' ' ) ) " > < el-option v-if = "selectedBookingFallback" :key="selectedBookingFallback.id" :label="selectedBookingFallback.label" :value="selectedBookingFallback.id" /><el-option v-for="item in bookings" :key="item.id" :label="item.bookingNo || '订舱号缺失'" :value="item.id" / > < / el-select > < / el-form-item > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "仓库" > < el-select v-model = "draft.warehouseId" filterable clearable placeholder="请选择仓库" :loading="optionsLoading" style="width:100%"><el-option v-if="selectedWarehouseFallback" :key="selectedWarehouseFallback.id" :label="selectedWarehouseFallback.label" :value="selectedWarehouseFallback.id" /><el-option v-for="item in selectableWarehouses" :key="String(item.id)" :label="`${item.warehouseName}( ${item.warehouseCode}) `" :value="String(item.id)" / > < / el-select > < / el-form-item > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "提单号" > < el-input : model -value = " draft.billOfLadingNo | | ' ' " disabled placeholder = "选择订舱后自动带入" / > < div v-if = "selectedReleasedBooking" class="field-hint" > 已从放舱订舱冻结资料带入 < / div > < / el -form -item > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "仓库" > < el-input : model -value = " selectedReleasedBooking ? .warehouseName | | resource ? .warehouseName | | ' ' " disabled placeholder = "选择订舱后自动带入" / > < / el-form-item > < / el-col >
< el-col v-if = "resource" :xs="24" :sm="12"><el-form-item label="派车单号"><el-input :model-value="resource.appointmentNo || ''" disabled / > < / el-form-item > < / el-col >
< el-col :xs = "24" > < el-divider content -position = " left " > 运输与时间计划 < / el-divider > < / el-col >
< el-col :xs = "24" :sm = "12" > < el-form-item label = "车队联系人" > < el-input v-model = "draft.fleetContact" placeholder="请输入车队联系人" / > < / el-form-item > < / el-col >
@@ -198,7 +202,7 @@ watch(() => props.readonly, (readonly) => { if (!readonly && !customers.value.le
: deep ( . el - divider ) { margin : 14 px 0 10 px ; }
: deep ( . el - divider _ _text ) { color : var ( -- el - text - color - primary ) ; font - size : 14 px ; font - weight : 600 ; }
: deep ( . el - input ) , : deep ( . el - textarea ) , : deep ( . el - date - editor ) { max - width : 100 % ; }
. field - hint { margin - top : 4 px ; color : var ( -- cc - muted ) ; font - size : 12 px ; }
. field - error , . field - hint { display : flex ; align - items : center ; justify - content : space - between ; gap : 8 px ; margin - top : 4 px ; color : var ( -- cc - muted ) ; font - size : 12 px ; line - height : 20 px } . field - error { color : var ( -- el - color - danger ) }
@ media ( max - width : 480 px ) {
. truck - form { padding - inline : 2 px ; }
. relation - note { align - items : flex - start ; flex - direction : column ; }