54 lines
4.9 KiB
Vue
54 lines
4.9 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { computed, reactive, ref, watch } from 'vue'
|
|||
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|||
|
|
import { truckAppointmentStatusLabels, type SaveTruckAppointmentRequest, type TruckAppointmentResource } from '../types'
|
|||
|
|
|
|||
|
|
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 draft = reactive<SaveTruckAppointmentRequest>({ ...props.modelValue })
|
|||
|
|
watch(() => props.modelValue, (value) => Object.assign(draft, value), { deep: true })
|
|||
|
|
watch(draft, (value) => emit('update:modelValue', { ...value }), { deep: true })
|
|||
|
|
const rules: FormRules = {
|
|||
|
|
plannedLoadingAt: [{ required: true, message: '请选择预计装箱时间', trigger: 'change' }],
|
|||
|
|
}
|
|||
|
|
const relationText = computed(() => [props.resource?.customerName, props.resource?.outboundOrderId, props.resource?.containerBookingId].filter(Boolean).join(' / ') || '由服务端关联资源返回')
|
|||
|
|
async function validate() { return formRef.value?.validate() }
|
|||
|
|
defineExpose({ validate })
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<el-form ref="formRef" :model="draft" :rules="rules" label-position="top" :disabled="readonly || submitting" class="truck-form">
|
|||
|
|
<el-alert v-if="resource" type="info" :closable="false" class="relation-alert">关联资源：{{ relationText }}；柜型由关联柜体返回（只读）</el-alert>
|
|||
|
|
<el-row :gutter="16">
|
|||
|
|
<el-col :xs="24" :sm="12"><el-form-item label="承运商 ID" prop="carrierId"><el-input v-model="draft.carrierId" placeholder="请输入后端资源 ID" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="12"><el-form-item label="车队联系人"><el-input v-model="draft.fleetContact" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="12"><el-form-item label="车队电话"><el-input v-model="draft.fleetPhone" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="12"><el-form-item label="司机"><el-input v-model="draft.driverName" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="12"><el-form-item label="司机电话"><el-input v-model="draft.driverPhone" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="12"><el-form-item label="车头号"><el-input v-model="draft.vehicleNo" /></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" style="width:100%" /></el-form-item></el-col>
|
|||
|
|
<el-col v-if="resource" :xs="24" :sm="12"><el-form-item label="实际装箱时间"><el-input :model-value="resource.actualLoadingAt || ''" disabled /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="8"><el-form-item label="件数"><el-input v-model="draft.packageCount" inputmode="numeric" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="8"><el-form-item label="毛重（kg）"><el-input v-model="draft.grossWeightKg" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="8"><el-form-item label="体积（m³）"><el-input v-model="draft.volumeCbm" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="8"><el-form-item label="托盘数量"><el-input v-model="draft.palletCount" inputmode="numeric" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="8"><el-form-item label="应付拖车费"><el-input v-model="draft.payableAmount"><template #append>RMB</template></el-input></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="8"><el-form-item label="应收拖车费"><el-input v-model="draft.receivableAmount"><template #append>RMB</template></el-input></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="12"><el-form-item label="门店名称"><el-input v-model="draft.storeName" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="12"><el-form-item label="门店地址"><el-input v-model="draft.storeAddress" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="12"><el-form-item label="城市"><el-input v-model="draft.storeCity" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24" :sm="12"><el-form-item label="邮编"><el-input v-model="draft.storeZipcode" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24"><el-form-item label="PO"><el-input v-model="draft.poNo" /></el-form-item></el-col>
|
|||
|
|
<el-col :xs="24"><el-form-item label="备注"><el-input v-model="draft.remark" type="textarea" :rows="3" /></el-form-item></el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="form-actions"><el-button :disabled="readonly || submitting" @click="emit('attachments')">管理附件引用</el-button><el-button v-if="!readonly" type="primary" :loading="submitting" @click="emit('submit')">保存</el-button></div>
|
|||
|
|
</el-form>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.truck-form { padding-bottom: 12px; }
|
|||
|
|
.relation-alert { margin-bottom: 16px; }
|
|||
|
|
.form-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
|
|||
|
|
</style>
|