<template> <layout-card> <el-divider content-position="left">车辆选择</el-divider> <el-form ref="formRef" :model="data.form" :rules="rules" label-width="100px" > <el-row> <el-col :span="6"> <el-form-item label="挂车车辆" prop="TRAILER_VEHICLE"> <el-select v-model="data.form.TRAILER_VEHICLE" @change="fnGetTrailerInfo" > <el-option v-for="item in getTrailerList" :key="item.PLATE_NUMBER" :label="item.PLATE_NUMBER" :value="(data.TRAILERRECORD_NUMBER = item.FREIGHTTRAILER_ID)" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="登记编号" prop="RECORD_NUMBER"> <el-input v-model="data.form.RECORD_NUMBER" placeholder="请输入登记编号" /> </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="PLATE_NUMBER"> <el-input v-model="data.Trailer.PLATE_NUMBER" placeholder="--" disabled /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="车架号" prop="FRAMES_NUMBER"> <el-input v-model="data.Trailer.VIN" placeholder="--" disabled /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="车辆类型" prop="VEHICLE_TYPE"> <el-input v-model="data.Trailer.TRAILER_TYPE" placeholder="--" disabled /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="6"> <el-form-item label="车主业主" prop="CAR_OWNERS"> <el-input v-model="data.Trailer.CAR_OWNERS" placeholder="--" disabled /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="车主电话" prop="VEHICLEOWNER_NUMBER"> <el-input v-model="data.Trailer.CAR_OWNERS_TEL" placeholder="--" disabled /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="初登日期" prop="FIRSTSHOW_DATE"> <el-input v-model="data.Trailer.INITIAL_REGISTRATION_DATE" placeholder="--" disabled /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="6"> <el-form-item label="所属省份" prop="PROVINCE"> <el-input v-model="data.Trailer.PROVINCE" placeholder="--" disabled /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="所属地市" prop="CITY"> <el-input v-model="data.form.CITY" placeholder="--" disabled /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="所属区县" prop="COUNTY"> <el-input v-model="data.form.COUNTY" placeholder="--" disabled /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="6"> <el-form-item label="行驶证照片" prop="DRIVINGLICENSE_PHOTO"> <layout-upload v-model:file-list="data.form.DRIVINGLICENSE_PHOTO" 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="VEHICLEOWNER"> <el-input v-model="data.form.VEHICLEOWNER" placeholder="请填写车主业主" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="联系电话" prop="CONTACT_NUMBER"> <el-input v-model="data.form.CONTACT_NUMBER" placeholder="请填写联系电话" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="登记人" prop="REGISTRANT"> <el-input v-model="data.form.REGISTRANT" placeholder="请填写登记人" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="6"> <el-form-item label="办理日期" prop="TRANSACTION_DATA"> <el-date-picker v-model="data.form.TRANSACTION_DATA" 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="TAXESDUES_PERIOD"> <el-select v-model="data.form.TAXESDUES_PERIOD"> <el-option v-for="item in TaxesPeriodList" :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="EXPIRE_DATE"> <el-date-picker v-model="data.form.EXPIRE_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="REMINDER_DAY"> <el-input v-model="data.form.REMINDER_DAY" placeholder="请填写提醒天数" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="提醒日期" prop="REMINDER_DATA"> <el-date-picker v-model="data.form.REMINDER_DATA" 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="提醒状态"> <el-switch v-model="data.form.REMINDER_STATUS" active-value="0" inactive-value="1" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="税费资料" prop="TAXESDUES_MATERIAL"> <el-input v-model="data.form.TAXESDUES_MATERIAL" placeholder="请填写税费资料" type="textarea" :autosize="{ minRows: 3 }" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="备注" prop="REMARK"> <el-input v-model="data.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 { reactive, ref } from "vue"; import { layoutFnGetTaxesPeriod, layoutFnGetTrailerList, } from "@/assets/js/taxation_manage.js"; import LayoutUpload from "@/components/upload/index.vue"; import { debounce } from "throttle-debounce"; import useFormValidate from "@/assets/js/useFormValidate.js"; import { setTaxationManageAdd } from "@/request/taxation_manage.js"; import { getFreightTrailerView } from "@/request/enterprise_management.js"; import { ElMessage } from "element-plus"; import { useRouter } from "vue-router"; import { addingPrefixToFile } from "@/assets/js/utils.js"; const router = useRouter(); const TaxesPeriodList = await layoutFnGetTaxesPeriod(); const getTrailerList = await layoutFnGetTrailerList(); const rules = { TRAILER_VEHICLE: [ { required: true, message: "挂车车辆不能为空", trigger: "blur" }, ], VEHICLEOWNER: [ { required: true, message: "车主/业主不能为空", trigger: "blur" }, ], CONTACT_NUMBER: [ { required: true, message: "联系电话不能为空", trigger: "blur" }, ], REGISTRANT: [{ required: true, message: "登记人不能为空", trigger: "blur" }], TRANSACTION_DATA: [ { required: true, message: "办理日期不能为空", trigger: "change" }, ], TAXESDUES_PERIOD: [ { required: true, message: "税费周期不能为空", trigger: "change" }, ], EXPIRE_DATE: [ { required: true, message: "到期日期不能为空", trigger: "change" }, ], REMINDER_DAY: [ { required: true, message: "提醒天数不能为空", trigger: "blur" }, ], REMINDER_DATA: [ { required: true, message: "提醒日期不能为空", trigger: "change" }, ], }; const formRef = ref(null); const data = reactive({ form: { TAXATION_ID: "", RECORD_NUMBER: "", PLATE_NUMBER: "", VEHICLEOWNER: "", CONTACT_NUMBER: "", TRANSACTION_DATA: "", TAXESDUES_PERIOD: "", EXPIRE_DATE: "", REGISTRANT: "", TRANSPORT_ENTERPRISES: "", REMINDER_STATUS: "", EXPIRE_STATUS: "", RECORD_STATUS: "", TRAILER_VEHICLE: "", FRAMES_NUMBER: "", VEHICLE_TYPE: "", VEHICLEOWNER_NUMBER: "", FIRSTSHOW_DATE: "", PROVINCE: "", CITY: "", COUNTY: "", REMINDER_DAY: "", REMINDER_DATA: "", TAXESDUES_MATERIAL: "", REMARK: "", REGISTER_NUMBER: "", VEHICLE_MODEL: "", VEHICLE_BRAND: "", DRIVINGLICENSE_PHOTO: [], }, TrailerInfo: [], TRAILERRECORD_NUMBER: "", Trailer: {}, }); data.TrailerInfo = getTrailerList; const info = ref({}); const fnGetTrailerInfo = async () => { const FREIGHTTRAILER_ID = data.form.TRAILER_VEHICLE; const resData = await getFreightTrailerView({ FREIGHTTRAILER_ID }); info.value = resData.pd; info.value.TRAILER_IMG = addingPrefixToFile(resData.trailerImgs); info.value.DRIVING_LICENSE_IMG = addingPrefixToFile( resData.drivingLicenseImgs ); info.value.OPER_CERTIFICATE_IMG = addingPrefixToFile( resData.operCertificateImgs ); info.value.TRAILER_INFO = addingPrefixToFile(resData.trailerInfoImgs); data.Trailer = info.value data.form.PLATE_NUMBER = data.Trailer.PLATE_NUMBER data.form.FRAMES_NUMBER = data.Trailer.VIN data.form.VEHICLE_TYPE = data.Trailer.TRAILER_TYPE data.form.VEHICLEOWNER_NUMBER = data.Trailer.CAR_OWNERS_TEL data.form.FIRSTSHOW_DATE = data.Trailer.INITIAL_REGISTRATION_DATE data.form.DRIVINGLICENSE_PHOTO = data.Trailer.DRIVING_LICENSE_IMG data.form.VEHICLE_MODEL = data.Trailer.TRAILER_MODEL data.form.VEHICLE_BRAND = data.Trailer.TRAILER_BRAND }; const fnSubmit = debounce( 1000, async () => { await useFormValidate(formRef); const formData = new FormData(); Object.keys(data.form).forEach((key) => { formData.append(key, data.form[key]); }); formData.delete("DRIVINGLICENSE_PHOTO"); if (data.form.DRIVINGLICENSE_PHOTO[0].raw) formData.append( "drivinglicenseFile", data.form.DRIVINGLICENSE_PHOTO[0].raw ); formData.append( "drivinglicenseFileType", !!data.form.DRIVINGLICENSE_PHOTO[0].raw ); await setTaxationManageAdd(formData); ElMessage.success("提交成功"); router.back(); }, { atBegin: true } ); </script> <style scoped lang="scss"></style>