wangpeng
/
integrated_traffic_vue
forked from integrated_whb/integrated_whb_vue
1
0
Fork 0
Code Pull Requests Activity
integrated_traffic_vue/src/views/mechanical_files/assigned_manage/add.vue

550 lines
18 KiB
Vue
Raw Blame History

<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"
delete-to-server
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="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"
delete-to-server
/>
</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"
delete-to-server
/>
</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 {
getFreightTrailerView,
} from "@/request/enterprise_management.js";
import {
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,
getAssignedOperationVehicleList,
getAssignedFreightTrailerList
} 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 freightVehicleList = await getAssignedFreightTrailerList();
const assignedWayList = await layoutFnGetAssignedWay();
const operationList = await getAssignedOperationVehicleList();
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" },
],
NOW_OWNERS_NUMBER: [
{ required: true, message: "请输入现车主电话", trigger: "blur" },
{ min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
{
pattern:
/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
message: "请输入正确的手机号码",
},
],
NOW_OWNERS: [
{ 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 = operationList.varList;
form.value.OPERATIONVEHICLELIST = form.value.ALLVEHICLE;
} else if (form.value.ASSIGNED_VEHICLE_MODEL === "货运挂车") {
form.value.ALLVEHICLE = freightVehicleList.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;
form.value.VEHICLE.RAW_DRIVINGLICENSE_IMG = addingPrefixToFile(
resData.drivinglicensephoto
);
}
}
} 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 });
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;
form.value.VEHICLE.RAW_DRIVINGLICENSE_IMG = addingPrefixToFile(
resData.drivingLicenseImgs
);
}
}
}
};
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,
});
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>
View Git Blame Copy Permalink