| | |
| | | <div class="form-section-title">物流信息</div> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="车辆" |
| | | prop="vehicleId" |
| | | :rules="[{ required: true, message: '请选择车辆', trigger: 'change' }]"> |
| | | <el-select v-model="formState.vehicleId" |
| | | placeholder="请选择" |
| | | clearable |
| | | filterable |
| | | popper-class="vehicle-select-popper" |
| | | style="width: 100%" |
| | | @change="vehicleChange"> |
| | | <el-option v-for="item in vehicleList" |
| | | :key="item.id" |
| | | :label="item.plateNumber" |
| | | :value="item.id"> |
| | | <div class="vehicle-option"> |
| | | <div class="vehicle-option-title">{{ item.plateNumber }}</div> |
| | | <div class="vehicle-option-line">默认司机:{{ item.driverName || '--' }}</div> |
| | | <div class="vehicle-option-line">司机电话:{{ item.driverPhone || '--' }}</div> |
| | | <div class="vehicle-option-line">核定载重(吨):{{ item.loadCapacity ?? '--' }}</div> |
| | | </div> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="车挂牌号" |
| | | prop="trailerPlateNo" |
| | | :rules="[{ required: true, message: '请输入车挂牌号', trigger: 'blur' }]"> |
| | | <el-input v-model="formState.trailerPlateNo" |
| | | :readonly="!!formState.vehicleId" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="司机姓名" |
| | | prop="driverName" |
| | | :rules="[{ required: true, message: '请输入司机姓名', trigger: 'blur' }]"> |
| | |
| | | placeholder="请输入11位数字" |
| | | maxlength="11" |
| | | @input="phoneInput('escortPhone')" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="车牌号" |
| | | prop="truckPlateNo" |
| | | :rules="[{ required: true, message: '请输入车牌号', trigger: 'blur' }]"> |
| | | <el-input v-model="formState.truckPlateNo" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="车挂牌号" |
| | | prop="trailerPlateNo" |
| | | :rules="[{ required: true, message: '请输入车挂牌号', trigger: 'blur' }]"> |
| | | <el-input v-model="formState.trailerPlateNo" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | import { addStockInRecordOnly } from "@/api/inventoryManagement/stockInventory.js"; |
| | | import { allOilDepot } from "@/api/basicData/oilDepot.js"; |
| | | import { allTankInfo } from "@/api/basicData/tankInfo.js"; |
| | | import { allVehicle } from "@/api/basicData/vehicle.js"; |
| | | import { listCustomer } from "@/api/basicData/customer.js"; |
| | | |
| | | const props = defineProps({ |
| | |
| | | customerId: undefined, |
| | | contactPerson: "", |
| | | contactPhone: "", |
| | | vehicleId: undefined, |
| | | driverName: "", |
| | | driverPhone: "", |
| | | escortName: "", |
| | |
| | | const oilDepotList = ref([]); |
| | | const tankList = ref([]); |
| | | const customerList = ref([]); |
| | | const vehicleList = ref([]); |
| | | const isShow = computed({ |
| | | get() { |
| | | return props.visible; |
| | |
| | | } |
| | | }; |
| | | |
| | | // 车辆选择改变:车牌号、车挂牌号与司机信息由车辆主数据带出,司机可手动覆盖 |
| | | const vehicleChange = id => { |
| | | const vehicle = vehicleList.value.find(item => item.id === id); |
| | | if (vehicle) { |
| | | formState.value.truckPlateNo = vehicle.plateNumber || ""; |
| | | // 车挂牌号与车牌号是同一个牌,选了车辆就带出并置为只读,避免手填出两个不一致的值 |
| | | formState.value.trailerPlateNo = vehicle.plateNumber || ""; |
| | | formState.value.driverName = vehicle.driverName || ""; |
| | | formState.value.driverPhone = vehicle.driverPhone || ""; |
| | | } else { |
| | | formState.value.truckPlateNo = ""; |
| | | formState.value.trailerPlateNo = ""; |
| | | } |
| | | }; |
| | | |
| | | // 产品选择处理 |
| | | const handleProductSelect = async products => { |
| | | if (products && products.length > 0) { |
| | |
| | | listCustomer({ current: 1, size: 1000, type: 0 }).then(res => { |
| | | customerList.value = res?.data?.records || []; |
| | | }); |
| | | allVehicle().then(res => { |
| | | vehicleList.value = res?.data || []; |
| | | }); |
| | | }); |
| | | </script> |
| | | |
| | |
| | | } |
| | | |
| | | .tank-option-line { |
| | | font-size: 12px; |
| | | color: #909399; |
| | | line-height: 1.8; |
| | | } |
| | | } |
| | | |
| | | // 车辆下拉选项:小卡片样式 |
| | | .vehicle-option { |
| | | padding: 8px 10px; |
| | | |
| | | .vehicle-option-title { |
| | | font-size: 14px; |
| | | font-weight: 600; |
| | | color: #303133; |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .vehicle-option-line { |
| | | font-size: 12px; |
| | | color: #909399; |
| | | line-height: 1.8; |
| | |
| | | } |
| | | } |
| | | |
| | | // 车辆下拉面板(body 下,需全局样式) |
| | | .vehicle-select-popper { |
| | | .el-select-dropdown__item { |
| | | height: auto; |
| | | line-height: normal; |
| | | padding: 4px 0; |
| | | } |
| | | |
| | | .vehicle-option { |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 6px; |
| | | background-color: #fafbfc; |
| | | |
| | | &:hover { |
| | | border-color: #409eff; |
| | | background-color: #f0f7ff; |
| | | } |
| | | } |
| | | } |
| | | |
| | | // 客户名称下拉面板(body 下,需全局样式) |
| | | .customer-select-popper { |
| | | .el-select-dropdown__item { |