integrated_traffic_vue/src/views/mechanical_files/scrap_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="请输入登记编号"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="移除车型" prop="SCRAP_VEHICLEMODEL">
            <el-select
              v-model="form.SCRAP_VEHICLEMODEL"
              placeholder="请选择移除车型"
              @change="fnEditVehicleModel"
            >
              <el-option
                v-for="item in SCRAP_VEHICLE_MODEL"
                :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="SCRAP_VEHICLE">
            <el-select v-model="form.SCRAP_VEHICLE" @change="fnGetVehicleInfo">
              <el-option
                v-for="item in form.ALLVEHICLE"
                :key="item.PLATE_NUMBER"
                :label="item.PLATE_NUMBER"
                :value="item.ID"
                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="VEHICLEOWNER">
            <el-input
              v-model="form.VEHICLE.VEHICLEOWNER"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="VEHICLEOWNER_NUMBER">
            <el-input
              v-model="form.VEHICLE.VEHICLEOWNER_NUMBER"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车牌号" prop="PLATE_NUMBER">
            <el-input
              v-model="form.VEHICLE.PLATE_NUMBER"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <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-col :span="6">
          <el-form-item label="车型" prop="SCRAP_VEHICLEMODEL">
            <el-input
              v-model="form.VEHICLE.SCRAP_VEHICLEMODEL"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="品牌" prop="BRAND">
            <el-input v-model="form.VEHICLE.BRAND" placeholder="--" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="排放标准" prop="EMISSION_STANDARD">
            <el-input
              v-model="form.VEHICLE.EMISSION_STANDARD"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="动力类型" prop="POWER_TYPE">
            <el-input
              v-model="form.VEHICLE.POWER_TYPE"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="初登日期" prop="FIRSTSHOW_DATE">
            <el-input
              v-model="form.VEHICLE.FIRSTSHOW_DATE"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="行驶证照片" prop="DRIVING_LICENSE_IMG">
            <layout-upload
              v-model:file-list="form.DRIVING_LICENSE_IMG"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
              disabled
            />
          </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="SCRAP_DATE">
            <el-date-picker
              v-model="form.SCRAP_DATE"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              type="date"
              placeholder="请选择移除日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="登记人" prop="REGISTRANT">
            <el-input
              v-model="form.REGISTRANT"
              placeholder="请填写登记人"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="移除资料" prop="SCRAP_MATERIAL">
            <el-input
              v-model="form.SCRAP_MATERIAL"
              placeholder="请填写移除资料"
              type="textarea"
              :autosize="{ minRows: 3 }"
            />
          </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 { ref } from "vue";
import {
  setScrapManageAdd,
  setScrapManageEdit,
  layoutFnGetScrapType,
  getScrapOperationVehicleList,
  getScrapFreightTrailerList,
} from "@/request/scrap_manage.js";
import { getFreightTrailerView } from "@/request/enterprise_management.js";
import {
  getOperationVehicleInfo,
  setOperationsScrapStatus,
} 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 { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { addingPrefixToFile } from "@/assets/js/utils.js";
const route = useRoute();
const router = useRouter();

const getAllOperationVehicleList = await getScrapOperationVehicleList();
const getAllFrailerList = await getScrapFreightTrailerList();

const VEHICLE_MODEL = await layoutFnGetScrapType();
const SCRAP_ID = route.query.SCRAP_ID;
const rules = {
  SCRAP_VEHICLEMODEL: [
    { required: true, message: "移除车型不能为空", trigger: "change" },
  ],
  SCRAP_VEHICLE: [
    { required: true, message: "移除车辆不能为空", trigger: "blur" },
  ],
  SCRAP_DATE: [
    { required: true, message: "移除日期不能为空", trigger: "change" },
  ],
  REGISTRANT: [
    { required: true, message: "登记人不能为空", trigger: "change" },
  ],
};
const formRef = ref(null);
const form = ref({
  SCRAP_ID: "",
  RECORD_NUMBER: "",
  PLATE_NUMBER: "",
  SCRAP_VEHICLEMODEL: "",
  VEHICLEOWNER: "",
  CONTACT_NUMBER: "",
  SCRAP_DATE: "",
  REGISTRANT: "",
  CORPINFO_ID: "",
  TRANSPORT_ENTERPRISES: "",
  SCRAP_VEHICLE: "",
  VEHICLEOWNER_NUMBER: "",
  DRIVINGLICENSE_PHOTO: "",
  FRAMES_NUMBER: "",
  BRAND: "",
  EMISSION_STANDARD: "",
  POWER_TYPE: "",
  FIRSTSHOW_DATE: "",
  SCRAP_MATERIAL: "",
  REMARK: "",
  ENGINE_NUMBER: "",
  VEHICLE_MODEL: "",
  TRANSACTION_DATE: "",
  FREIGHTTRAILER_ID: "",
  VEHICLE: {
    VEHICLEOWNER: "",
    VEHICLEOWNER_NUMBER: "",
    PLATE_NUMBER: "",
    FRAMES_NUMBER: "",
    SCRAP_VEHICLEMODEL: "",
    BRAND: "",
    EMISSION_STANDARD: "",
    POWER_TYPE: "",
    FIRSTSHOW_DATE: "",
    DRIVINGLICENSE_PHOTO: "",
  },
  ALLVEHICLE: {},
  OPERATIONVEHICLELIST: [],
  FREIGHTVEHICLELIST: [],
  DRIVING_LICENSE_IMG: [],
  ID: "",
});
const fnEditVehicleModel = async () => {
  form.value.SCRAP_VEHICLE = null;
  form.value.VEHICLE = {};
  form.value.DRIVING_LICENSE_IMG = [];
  if (form.value.SCRAP_VEHICLEMODEL === "运输车辆") {
    form.value.ALLVEHICLE = getAllOperationVehicleList.varList;
    form.value.OPERATIONVEHICLELIST = form.value.ALLVEHICLE;
  } else if (form.value.SCRAP_VEHICLEMODEL === "货运挂车") {
    form.value.ALLVEHICLE = getAllFrailerList.varList;
    form.value.FREIGHTVEHICLELIST = form.value.ALLVEHICLE;
  }
};
const info = ref({});
const fnGetVehicleInfo = async () => {
  if (form.value.SCRAP_VEHICLEMODEL === "运输车辆") {
    for (let i = 0; i < form.value.OPERATIONVEHICLELIST.length; i++) {
      if (
        form.value.OPERATIONVEHICLELIST[i].OPERATING_ID ===
        form.value.SCRAP_VEHICLE
      ) {
        const OPERATING_ID = form.value.OPERATIONVEHICLELIST[i].OPERATING_ID;
        await setOperationsScrapStatus({ OPERATING_ID });
        const resData = await getOperationVehicleInfo({ OPERATING_ID });
        info.value = resData.pd;
        form.value.VEHICLE.VEHICLEOWNER = info.value.CONTACT;
        form.value.VEHICLE.VEHICLEOWNER_NUMBER = info.value.CONTACT_NUMBER;
        form.value.VEHICLE.PLATE_NUMBER = info.value.PLATE_NUMBER;
        form.value.VEHICLE.FRAMES_NUMBER = info.value.FRAMES_NUMBER;
        form.value.VEHICLE.SCRAP_VEHICLEMODEL = form.value.SCRAP_VEHICLEMODEL;
        form.value.VEHICLE.BRAND = info.value.VEHICLE_BRAND;
        form.value.VEHICLE.EMISSION_STANDARD = info.value.EMISSION_STANDARD;
        form.value.VEHICLE.POWER_TYPE = info.value.VEHICLE_BRAND;
        form.value.VEHICLE.FIRSTSHOW_DATE = info.value.FIRSTSHOW_DATE;
        form.value.VEHICLE.DRIVINGLICENSE_PHOTO =
          info.value.DRIVINGLICENSE_PHOTO;
        form.value.PLATE_NUMBER = info.value.PLATE_NUMBER;
        form.value.VEHICLEOWNER = info.value.CONTACT;
        form.value.CONTACT_NUMBER = info.value.CONTACT_NUMBER;
        form.value.FRAMES_NUMBER = info.value.FRAMES_NUMBER;
        form.value.VEHICLEOWNER_NUMBER = info.value.CONTACT_NUMBER;
        form.value.ENGINE_NUMBER = info.value.ENGINE_NUMBER;
        form.value.FIRSTSHOW_DATE = info.value.FIRSTSHOW_DATE;
        form.value.BRAND = info.value.VEHICLE_BRAND;
        form.value.VEHICLE_MODEL = info.value.VEHICLE_MODEL;
        form.value.POWER_TYPE = info.value.VEHICLE_MODEL;
        form.value.EMISSION_STANDARD = info.value.EMISSION_STANDARD;
        form.value.DRIVING_LICENSE_IMG = addingPrefixToFile(
          resData.drivinglicensephoto
        );
      }
    }
  } else if (form.value.SCRAP_VEHICLEMODEL === "货运挂车") {
    for (let i = 0; i < form.value.FREIGHTVEHICLELIST.length; i++) {
      if (
        form.value.FREIGHTVEHICLELIST[i].FREIGHTTRAILER_ID ===
        form.value.SCRAP_VEHICLE
      ) {
        form.value.FREIGHTTRAILER_ID =
          form.value.FREIGHTVEHICLELIST[i].FREIGHTTRAILER_ID;
        form.value.VEHICLE.VEHICLEOWNER =
          form.value.FREIGHTVEHICLELIST[i].CONTACTS;
        form.value.VEHICLE.VEHICLEOWNER_NUMBER =
          form.value.FREIGHTVEHICLELIST[i].CONTACT_PHONE;
        form.value.VEHICLE.PLATE_NUMBER =
          form.value.FREIGHTVEHICLELIST[i].PLATE_NUMBER;
        form.value.VEHICLE.FRAMES_NUMBER = form.value.FREIGHTVEHICLELIST[i].VIN;
        form.value.VEHICLE.SCRAP_VEHICLEMODEL = form.value.SCRAP_VEHICLEMODEL;
        form.value.VEHICLE.BRAND =
          form.value.FREIGHTVEHICLELIST[i].TRAILER_BRAND;
        form.value.VEHICLE.EMISSION_STANDARD =
          form.value.FREIGHTVEHICLELIST[i].EMISSION_STANDARD;
        form.value.VEHICLE.POWER_TYPE =
          form.value.FREIGHTVEHICLELIST[i].VEHICLE_BRAND;
        form.value.VEHICLE.FIRSTSHOW_DATE =
          form.value.FREIGHTVEHICLELIST[i].INITIAL_REGISTRATION_DATE;
        form.value.VEHICLE.DRIVINGLICENSE_PHOTO =
          form.value.FREIGHTVEHICLELIST[i].DRIVING_LICENSE_IMG;

        form.value.PLATE_NUMBER = form.value.FREIGHTVEHICLELIST[i].PLATE_NUMBER;
        form.value.VEHICLEOWNER = form.value.FREIGHTVEHICLELIST[i].CONTACTS;
        form.value.CONTACT_NUMBER =
          form.value.FREIGHTVEHICLELIST[i].CAR_OWNERS_TEL;
        form.value.FRAMES_NUMBER = form.value.FREIGHTVEHICLELIST[i].VIN;
        form.value.VEHICLEOWNER_NUMBER =
          form.value.FREIGHTVEHICLELIST[i].CONTACT_PHONE;
        form.value.BRAND = form.value.FREIGHTVEHICLELIST[i].TRAILER_BRAND;
        form.value.VEHICLE_MODEL =
          form.value.FREIGHTVEHICLELIST[i].TRAILER_MODEL;
        form.value.POWER_TYPE = form.value.FREIGHTVEHICLELIST[i].TRAILER_MODEL;
        form.value.EMISSION_STANDARD =
          form.value.FREIGHTVEHICLELIST[i].TRAILER_MODEL;
        form.value.FIRSTSHOW_DATE =
          form.value.FREIGHTVEHICLELIST[i].INITIAL_REGISTRATION_DATE;
        const FREIGHTTRAILER_ID =
          form.value.FREIGHTVEHICLELIST[i].FREIGHTTRAILER_ID;
        const resData = await getFreightTrailerView({ FREIGHTTRAILER_ID });
        form.value.DRIVING_LICENSE_IMG = addingPrefixToFile(
          resData.drivingLicenseImgs
        );
      }
    }
  }
};
const fnGetData = async () => {
  if (!SCRAP_ID) return;
  const resData = await setScrapManageEdit({ SCRAP_ID });
  form.value = resData.pd;
};
fnGetData();
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    await setScrapManageAdd({ ...form.value });
    ElMessage.success("提交成功");
    router.back();
  },
  { atBegin: true }
);
const SCRAP_VEHICLE_MODEL = VEHICLE_MODEL.value.list;
</script>

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