src/views/inventoryManagement/stockManagement/OilStockInDialog.vue
@@ -248,6 +248,43 @@
        <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' }]">
@@ -292,26 +329,6 @@
                        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>
@@ -448,6 +465,7 @@
  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({
@@ -474,6 +492,7 @@
    customerId: undefined,
    contactPerson: "",
    contactPhone: "",
    vehicleId: undefined,
    driverName: "",
    driverPhone: "",
    escortName: "",
@@ -494,6 +513,7 @@
  const oilDepotList = ref([]);
  const tankList = ref([]);
  const customerList = ref([]);
  const vehicleList = ref([]);
  const isShow = computed({
    get() {
      return props.visible;
@@ -559,6 +579,21 @@
    }
  };
  // 车辆选择改变:车牌号、车挂牌号与司机信息由车辆主数据带出,司机可手动覆盖
  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) {
@@ -611,6 +646,9 @@
    listCustomer({ current: 1, size: 1000, type: 0 }).then(res => {
      customerList.value = res?.data?.records || [];
    });
    allVehicle().then(res => {
      vehicleList.value = res?.data || [];
    });
  });
</script>
@@ -657,6 +695,24 @@
    }
    .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;
@@ -723,6 +779,26 @@
    }
  }
  // 车辆下拉面板(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 {