integrated_traffic_vue/src/views/mechanical_files/assigned_manage/add.vue

<template>
  <layout-card>
    <el-divider content-position="left">车辆选择</el-divider>
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="登记编号" prop="RECORD_NUMBER">
            <el-input v-model="form.RECORD_NUMBER" placeholder="请输入登记编号"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="过户车型" prop="ASSIGNED_VEHICLE_MODEL">
            <el-select v-model="form.ASSIGNED_VEHICLE_MODEL"
                       placeholder="请选择过户车型"
                       @change="fnEditVehicleModel"
            >
              <el-option
                v-for="item in assignedVehicleModelList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.NAME"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="过户车辆" prop="VEHICLE_PLATE_NUMBER">
            <el-select
              v-model="form.VEHICLE_PLATE_NUMBER"
              @change="fnGetVehicleInfo"
            >
              <el-option
                v-for="item in form.ALLVEHICLE"
                :key="item.PLATE_NUMBER"
                :label="item.PLATE_NUMBER"
                :value="item.PLATE_NUMBER"
                placeholder="请选择过户车辆"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">过户前数据</el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="原车牌号" prop="RAW_PLATE_NUMBER">
            <el-input v-model="form.VEHICLE.PLATE_NUMBER"
                      placeholder="--"
                      disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="原车主/业主" prop="RAW_OWNERS">
            <el-input v-model="form.VEHICLE.RAW_OWNERS"
                      placeholder="--"
                      disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="原车主电话" prop="RAW_OWNERS_NUMBER">
            <el-input v-model="form.VEHICLE.RAW_OWNERS_NUMBER"
                      placeholder="--"
                      disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="原车辆营运证" prop="RAW_VEHICLE_OPERATION_CERTIFICATE">
            <el-input v-model="form.VEHICLE.RAW_VEHICLE_OPERATION_CERTIFICATE"
                      placeholder="--"
                      disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车架号" prop="FRAMES_NUMBER">
            <el-input v-model="form.VEHICLE.FRAMES_NUMBER"
                      placeholder="--"
                      disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="原行驶证照片" prop="RAW_DRIVINGLICENSE_IMG">
            <layout-upload
              v-model:file-list="form.VEHICLE.RAW_DRIVINGLICENSE_IMG"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">过户后数据</el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="过户类型" prop="ASSIGNED_TYPE">
            <el-select v-model="form.ASSIGNED_TYPE" placeholder="请选择过户类型">
              <el-option
                v-for="item in relatedClassificationList"
                :key="item.BIANMA"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="过户方式" prop="ASSIGNED_WAY">
            <el-select v-model="form.ASSIGNED_WAY" placeholder="请选择过户方式"
                       @change="fnEditAssignedWay"
            >
              <el-option
                v-for="item in assignedWayList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.NAME"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="办理日期" prop="TRANSACTION_DATE">
            <el-date-picker
              v-model="form.TRANSACTION_DATE"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              type="date"
              placeholder="请选择办理日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="现车主/业主" prop="NOW_OWNERS">
            <el-input v-model="form.NOW_OWNERS" placeholder="请填写现车主/业主" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="现车主电话" prop="NOW_OWNERS_NUMBER">
            <el-input v-model="form.NOW_OWNERS_NUMBER" placeholder="请填写现车主电话" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="登记人" prop="REGISTRANT">
            <el-input v-model="form.REGISTRANT" placeholder="请填写登记人" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="现车牌号" prop="NOW_PLATE_NUMBER">
            <el-input v-model="form.NOW_PLATE_NUMBER"
                      :disabled="form.ASSIGNED_WAY === '协议过户'" label="1"
                      placeholder="请填写现车牌号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="现营运证号" prop="NOW_OPERATION_CERTIFICATE">
            <el-input v-model="form.NOW_OPERATION_CERTIFICATE"
                      :disabled="form.ASSIGNED_WAY === '协议过户'" label="1"
                      placeholder="请填写现营运证号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="现登记日期" prop="NOW_RECORD_DATE">
            <el-date-picker
              v-model="form.NOW_RECORD_DATE"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              type="date"
              placeholder="请填写现登记日期"
              :disabled = "form.ASSIGNED_WAY === '协议过户'" label="1"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="现车辆营运证照片" prop="NOW_VEHICLE_OPERATION_CERTIFICATE">
            <layout-upload
              v-model:file-list="form.NOW_VEHICLE_OPERATION_CERTIFICATE"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现行驶证照片" prop="NOW_DRIVINGLICENSE_IMG">
            <layout-upload
              v-model:file-list="form.NOW_DRIVINGLICENSE_IMG"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="过户资料" prop="ASSIGNED_MATERIAL">
            <el-input
              v-model="form.ASSIGNED_MATERIAL"
              type="textarea"
              :autosize="{ minRows: 3 }"
              placeholder="请填写过户资料"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="REMARK">
            <el-input
              v-model="form.REMARK"
              placeholder="请填写备注"
              type="textarea"
              :autosize="{ minRows: 3 }"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="tc mt-10">
      <el-button type="primary" @click="fnSubmit">保存</el-button>
    </div>
  </layout-card>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  layoutFnGetAssignedWay,
  layoutFnGetAssignedVehicleModel
} from "@/assets/js/assigned_manage.js";
import {
  getFreightTrailerList,
  getFreightTrailerView
} from "@/request/enterprise_management.js"
import {
  getOperationVehicleList,
  findByIdOperatingVehicleInfo
} from "@/request/operation_vehicle.js"
import LayoutUpload from "@/components/upload/index.vue";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { addingPrefixToFile } from "@/assets/js/utils.js";
import {
  setAssignedManageAdd,
  setAssignedManageEdit,
  layoutFnGetScrapVehicleType,
} from "@/request/assigned_manage.js";
import { setUploadImg } from "@/request/api.js";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const ASSIGNED_ID = route.query.ASSIGNED_ID

const assignedVehicleModelList = await layoutFnGetAssignedVehicleModel();

const relatedClassificationList = ref(null);

onMounted(async () => {
  const data = await layoutFnGetScrapVehicleType();
  relatedClassificationList.value = JSON.parse(data.value.zTreeNodes);
});

const getFreightVehicleList = await getFreightTrailerList();
const getOperationList = await getOperationVehicleList();
console.log(getOperationList,'55555555');
const assignedWayList = await layoutFnGetAssignedWay();

const rules = {
  ASSIGNED_VEHICLE_MODEL: [{ required: true, message: "过户车型不能为空", trigger: "change" }],
  ASSIGNED_VEHICLE: [{ required: true, message: "过户车辆不能为空", trigger: "blur" }],
  ASSIGNED_TYPE: [{ required: true, message: "过户类型不能为空", trigger: "change" }],
  ASSIGNED_WAY: [{ required: true, message: "过户方式不能为空", trigger: "change" }],
  TRANSACTION_DATE: [{required: true, message: "办理日期不能为空", trigger: "change"}],
  REGISTRANT: [{required: true, message: "登记人不能为空", trigger: "blur"}],
  NOW_VEHICLE_OPERATION_CERTIFICATE: [{required: true, message: "现车辆营运证照片不能为空", trigger: "blur"}],
  NOW_DRIVINGLICENSE_IMG: [{required: true, message: "现行驶证照片不能为空", trigger: "blur"}],
};
const formRef = ref(null);
const form = ref({
  VEHICLE_PLATE_NUMBER: "",
  ASSIGNED_ID: "",
  RECORD_NUMBER: "",
  ASSIGNED_TYPE: "",
  RAW_PLATE_NUMBER: "",
  NOW_PLATE_NUMBER: "",
  RAW_OWNERS: "",
  NOW_OWNERS: "",
  ASSIGNED_DATE: "",
  REGISTRANT: "",
  RAW_TRANSPORT_ENTERPRISES: "",
  ASSIGNED_VEHICLE_MODEL: "",
  ASSIGNED_VEHICLE: "",
  RAW_OWNERS_NUMBER: "",
  RAW_VEHICLE_OPERATION_CERTIFICATE: "",
  FRAMES_NUMBER: "",
  RAW_DRIVINGLICENSE_IMG: [],
  ASSIGNED_WAY: "",
  TRANSACTION_DATE: "",
  NOW_OWNERS_NUMBER: "",
  NOW_DRIVINGLICENSE_IMG: [],
  NOW_VEHICLE_OPERATION_CERTIFICATE: [],
  ASSIGNED_MATERIAL: "",
  REMARK: "",
  VEHICLE_TYPE: "",
  VEHICLE_BRAND: "",
  VEHICLE_MODEL: "",
  ENGINE_NUMBER: "",
  POWER_TYPE: "",
  EMISSION_STANDARD: "",
  RAW_CONTACT_NUMBE: "",
  NOW_CONTACT_NUMBER: "",
  RAW_OPERATION_CERTIFICATE: "",
  NOW_OPERATION_CERTIFICATE: "",
  TRANSPORT_ENTERPRISES: "",
  RAW_CONTACT_NUMBER: "",
  NOW_RECORD_DATE: "",
  OPERATING_ID: "",
  OPERATIONINFO: {},
  PLATE_NUMBER: "",
  VEHICLEOWNER: "",
  VEHICLEOWNER_NUMBER: "",
  OPERATING_CERTIFICATE: "",
  DRIVINGLICENSE_PHOTO: "",
  ALLVEHICLE: {},
  OPERATIONVEHICLELIST: [],
  FREIGHTVEHICLELIST: [],
  VEHICLE:{
    PLATE_NUMBER: "",
    RAW_OWNERS: "",
    RAW_OWNERS_NUMBER: "",
    RAW_VEHICLE_OPERATION_CERTIFICATE: "",
    FRAMES_NUMBER: "",
    RAW_DRIVINGLICENSE_IMG: ""
  }
});
const info = ref({});
const fnEditVehicleModel = async () => {
  form.value.VEHICLE_PLATE_NUMBER = null;
  form.value.VEHICLE = {};
  if(form.value.ASSIGNED_VEHICLE_MODEL === "运输车辆") {
    form.value.ALLVEHICLE = getOperationList.varList
    form.value.OPERATIONVEHICLELIST = form.value.ALLVEHICLE
  }else if(form.value.ASSIGNED_VEHICLE_MODEL === "货运挂车") {
    form.value.ALLVEHICLE = getFreightVehicleList.varList
    form.value.FREIGHTVEHICLELIST = form.value.ALLVEHICLE
  }
};
const fnGetVehicleInfo = async () => {
  if(form.value.ASSIGNED_VEHICLE_MODEL === "运输车辆") {
    for (let i = 0; i < form.value.OPERATIONVEHICLELIST.length; i++) {
      if(form.value.OPERATIONVEHICLELIST[i].PLATE_NUMBER === form.value.VEHICLE_PLATE_NUMBER) {
        const OPERATING_ID = form.value.OPERATIONVEHICLELIST[i].OPERATING_ID
        const resData = await findByIdOperatingVehicleInfo({ OPERATING_ID });
        info.value = resData.pd;
        form.value.VEHICLE.PLATE_NUMBER = info.value.PLATE_NUMBER
        form.value.VEHICLE.RAW_OWNERS = info.value.VEHICLEOWNER
        form.value.VEHICLE.RAW_OWNERS_NUMBER = info.value.VEHICLEOWNER_NUMBER
        form.value.VEHICLE.RAW_VEHICLE_OPERATION_CERTIFICATE = info.value.OPERATING_CERTIFICATE
        form.value.VEHICLE.FRAMES_NUMBER = info.value.FRAMES_NUMBER
        form.value.VEHICLE.RAW_DRIVINGLICENSE_IMG = info.value.DRIVINGLICENSE_PHOTO

        form.value.FRAMES_NUMBER = info.value.FRAMES_NUMBER
        form.value.VEHICLE_BRAND = info.value.VEHICLE_BRAND
        form.value.VEHICLE_MODEL = info.value.VEHICLE_MODEL
        form.value.ENGINE_NUMBER = info.value.ENGINE_NUMBER
        form.value.POWER_TYPE = info.value.FUEL_TYPE
        form.value.EMISSION_STANDARD = info.value.EMISSION_STANDARD
        form.value.RAW_PLATE_NUMBER = info.value.PLATE_NUMBER
        form.value.RAW_OWNERS = info.value.VEHICLEOWNER
        form.value.RAW_CONTACT_NUMBER = info.value.CONTACT_NUMBER
        form.value.RAW_OPERATION_CERTIFICATE = info.value.OPERATING_CERTIFICATE
      }
    }
  }else if(form.value.ASSIGNED_VEHICLE_MODEL === "货运挂车") {
    for (let i = 0; i < form.value.FREIGHTVEHICLELIST.length; i++) {
      if(form.value.FREIGHTVEHICLELIST[i].PLATE_NUMBER === form.value.VEHICLE_PLATE_NUMBER) {
        const FREIGHTTRAILER_ID = form.value.FREIGHTVEHICLELIST[i].FREIGHTTRAILER_ID
        const resData = await getFreightTrailerView({ FREIGHTTRAILER_ID });
        console.log("选中的货运挂车信息",resData);
        info.value = resData.pd;
        form.value.VEHICLE.PLATE_NUMBER = info.value.PLATE_NUMBER
        form.value.VEHICLE.RAW_OWNERS = info.value.CAR_OWNERS
        form.value.VEHICLE.RAW_OWNERS_NUMBER = info.value.CAR_OWNERS_TEL
        form.value.VEHICLE.RAW_VEHICLE_OPERATION_CERTIFICATE = info.value.OPER_CERTIFICATE_NUM
        form.value.VEHICLE.FRAMES_NUMBER = info.value.VIN
        form.value.VEHICLE.RAW_DRIVINGLICENSE_IMG = info.value.DRIVING_LICENSE_IMG
        form.value.VEHICLE_BRAND = info.value.TRAILER_BRAND;
        form.value.VEHICLE_MODEL = info.value.TRAILER_MODEL;
        form.value.RAW_PLATE_NUMBER = info.value.PLATE_NUMBER;
        form.value.RAW_OWNERS = info.value.CAR_OWNERS;
        form.value.RAW_CONTACT_NUMBER = info.value.CAR_OWNERS_TEL;
        form.value.RAW_OPERATION_CERTIFICATE = info.value.OPER_CERTIFICATE_NUM;
        form.value.FRAMES_NUMBER = info.value.VIN;

        form.value.ENGINE_NUMBER = info.value.TRAILER_MODEL;
        form.value.POWER_TYPE = info.value.TRAILER_MODEL;
      }
    }
  }
}
const fnEditAssignedWay = async () => {
  if(form.value.ASSIGNED_WAY === '协议过户') {
    form.value.NOW_PLATE_NUMBER = null;
    form.value.NOW_OPERATION_CERTIFICATE = null;
    form.value.NOW_RECORD_DATE = null;
  }
};
const fnGetData = async () => {
  if (!ASSIGNED_ID) return;
  const resData = await setAssignedManageEdit({ ASSIGNED_ID });
  form.value = resData.pd;
  form.value.NOW_VEHICLE_OPERATION_CERTIFICATE = addingPrefixToFile(
    resData.nowVehicleOperationCertificateImgs
  );
  form.value.NOW_DRIVINGLICENSE_IMG = addingPrefixToFile(
    resData.nowDrivinglicenseImg
  );
};
fnGetData();
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const resData = !ASSIGNED_ID
      ? await setAssignedManageAdd({ ...form.value })
      : await setAssignedManageEdit({ ...form.value ,ASSIGNED_ID:ASSIGNED_ID});
    const currentAssignedId =resData.pd.ASSIGNED_ID
    for (let i = 0; i < form.value.NOW_VEHICLE_OPERATION_CERTIFICATE.length; i++) {
      if (form.value.NOW_VEHICLE_OPERATION_CERTIFICATE[i].raw)
        await fnUploadImage(currentAssignedId, form.value.NOW_VEHICLE_OPERATION_CERTIFICATE[i].raw, 120);
    }
    for (let i = 0; i < form.value.NOW_DRIVINGLICENSE_IMG.length; i++) {
      if (form.value.NOW_DRIVINGLICENSE_IMG[i].raw)
        await fnUploadImage(currentAssignedId, form.value.NOW_DRIVINGLICENSE_IMG[i].raw, 121);
    }
    ElMessage.success("提交成功");
    router.back();
  },
  { atBegin: true }
);
const fnUploadImage = async (HIDDEN_ID, FFILE, TYPE) => {
  const formData = new FormData();
  formData.append("FOREIGN_KEY", HIDDEN_ID);
  formData.append("TYPE", TYPE);
  formData.append("FFILE", FFILE);
  await setUploadImg(formData);
};

</script>

<style scoped lang="scss"></style>