dispacth_zhongpin/src/views/driver/vehicle/OilVehicleOwnerUpdate.vue

<template>
  <div>
    <el-row>
      <el-form
        :model="oilVehicleOwner"
        label-width="100px"
        :size="$store.getters.size"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>车辆基础信息</span>
          </div>

          <el-row type="flex">
            <el-col>
              <el-form-item label="车牌号" prop="plateNumber">
                <el-input v-model="oilVehicleOwner.plateNumber" clearable />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="车辆所属" prop="ownership">
                <el-select
                  v-model="oilVehicleOwner.ownership"
                  style="width: 100%"
                  @change="ownershipChange"
                >
                  <el-option label="个人" value="DRIVER" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="司机" prop="customerId">
                <el-select
                  v-model="oilVehicleOwner.customerId"
                  style="width: 100%"
                  clearable
                  filterable
                  remote
                  reserve-keyword
                  :remote-method="userRemoteMethod"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="
                      item.phone +
                      ' ( ' +
                      (item.userName ? item.userName + '-' : '') +
                      item.userCode +
                      ' ) '
                    "
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="常用油品" prop="normsOilNumber">
                <el-select
                  v-model="oilVehicleOwner.normsOilNumber"
                  style="width: 100%"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in oilList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col>
              <el-form-item label="车牌颜色" prop="plateColor">
                <el-select
                  v-model="oilVehicleOwner.plateColor"
                  style="width: 100%"
                >
                  <el-option label="黄色" value="黄色" />
                  <el-option label="蓝色" value="蓝色" />
                  <el-option label="绿色" value="绿色" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="燃油类型" prop="fuelType">
                <el-select
                  v-model="oilVehicleOwner.fuelType"
                  style="width: 100%"
                >
                  <el-option label="汽油" value="汽油" />
                  <el-option label="柴油" value="柴油" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="油箱大小" prop="tankSize">
                <el-input v-model="oilVehicleOwner.tankSize" clearable />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="车辆类型" prop="vehicleType">
                <el-select
                  v-model="oilVehicleOwner.vehicleType"
                  style="width: 100%"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in vehicleTypeList"
                    :key="item.typeCode"
                    :label="item.typeName"
                    :value="item.typeCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col>
              <el-form-item label="禁用标识" prop="enableMark">
                <el-switch
                  v-model="oilVehicleOwner.enableMark"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <el-col />
            <el-col />
          </el-row>
        </el-card>
        <el-col :span="24" style="text-align: right">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import oilVehicleOwnerApi from "@/api/user/oilVehicleOwner";
import oilCompanyInfoApi from "@/api/user/oilCompanyInfo";
import sysCustomerInfoApi from "@/api/user/sysCustomerInfo";
export default {
  props: {
    oilVehicleOwner: {
      type: Object,
      default() {},
    },
  },
  data() {
    return {
      gridNum: {
        row: {
          gutter: 2,
        },
        cols: {
          xs: 24,
          sm: 24,
          md: 12,
          lg: 12,
          xl: 6,
        },
      },
      customerList: [], // 企业集合
      userList: [], // 司机集合
      vehicleTypeList: [], // 车辆类型集合
      oilList: [], // 油品集合
    };
  },
  created() {
    oilVehicleOwnerApi.getVehicleType().then((res) => {
      this.vehicleTypeList = res.data;
    });
    oilVehicleOwnerApi.getOils().then((res) => {
      this.oilList = res.data;
    });
    oilCompanyInfoApi.getLike(this.oilVehicleOwner.companyId).then((res) => {
      this.customerList = res.data;
    });
    sysCustomerInfoApi
      .liekQuery(this.oilVehicleOwner.customerId)
      .then((res) => {
        this.userList = res.data;
      });
  },
  methods: {
    userRemoteMethod(value) {
      // 远程搜索
      if (value) {
        sysCustomerInfoApi.liekQuery(value).then((res) => {
          this.userList = res.data;
        });
      }
    },

    ownershipChange(value) {
      if (value === "DRIVER") {
        this.oilVehicleOwner.companyId = null;
      }
    },
    submit() {
      this.update(this.oilVehicleOwner);
    },
    update() {
      // 更新
      oilVehicleOwnerApi.updateDispatch(this.oilVehicleOwner).then((res) => {
        this.$message.success(res.msg);
        this.$emit("closeDialog");
        this.$emit("getByPage");
      });
    },
    close() {
      this.$emit("closeDialog");
    },
  },
};
</script>