forked from integrated_whb/integrated_whb_vue
404 lines
13 KiB
Vue
404 lines
13 KiB
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="FREIGHTTRAILER_ID">
|
|
<el-select
|
|
v-model="form.FREIGHTTRAILER_ID"
|
|
@change="fnGetTrailerInfo"
|
|
>
|
|
<el-option
|
|
v-for="item in choiceTrailerList.varList"
|
|
:key="item.PLATE_NUMBER"
|
|
:label="item.PLATE_NUMBER"
|
|
:value="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="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="form.PLATE_NUMBER" placeholder="--" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="车架号" prop="FRAMES_NUMBER">
|
|
<el-input v-model="form.FRAMES_NUMBER" placeholder="--" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="车辆类型" prop="VEHICLE_TYPE">
|
|
<el-input v-model="form.VEHICLE_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="form.CAR_OWNERS" placeholder="--" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="车主电话" prop="VEHICLEOWNER_NUMBER">
|
|
<el-input
|
|
v-model="form.VEHICLEOWNER_NUMBER"
|
|
placeholder="--"
|
|
disabled
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="初登日期" prop="FIRSTSHOW_DATE">
|
|
<el-input v-model="form.FIRSTSHOW_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="form.PROVINCE" placeholder="--" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="所属地市" prop="CITY">
|
|
<el-input v-model="form.CITY" placeholder="--" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="所属区县" prop="COUNTY">
|
|
<el-input v-model="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="form.DRIVINGLICENSE_PHOTO"
|
|
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="VEHICLEOWNER">
|
|
<el-input
|
|
v-model="form.VEHICLEOWNER"
|
|
placeholder="请填写车主业主"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="联系电话" prop="CONTACT_NUMBER">
|
|
<el-input
|
|
v-model="form.CONTACT_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="TRANSACTION_DATA">
|
|
<el-date-picker
|
|
v-model="form.TRANSACTION_DATA"
|
|
value-format="YYYY-MM-DD"
|
|
format="YYYY-MM-DD"
|
|
type="date"
|
|
placeholder="请选择办理日期"
|
|
@change="fnGetExpireDate"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="税务周期" prop="TAXESDUES_PERIOD">
|
|
<el-select
|
|
v-model="form.TAXESDUES_PERIOD"
|
|
@change="fnGetExpireDate"
|
|
>
|
|
<el-option
|
|
v-for="item in TAXES_PERIOD"
|
|
:key="item.NAME"
|
|
: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="form.EXPIRE_DATE"
|
|
value-format="YYYY-MM-DD"
|
|
format="YYYY-MM-DD"
|
|
type="date"
|
|
disabled
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-form-item label="提醒天数" prop="REMINDER_DAY">
|
|
<el-select v-model="form.REMINDER_DAY" @change="fnGetReminderData">
|
|
<el-option
|
|
v-for="item in REMIND_DAYS"
|
|
:key="item.NAME"
|
|
:label="item.NAME"
|
|
:value="item.NUM"
|
|
/>
|
|
</el-select>
|
|
<!-- <el-input
|
|
v-model="form.REMINDER_DAY"
|
|
placeholder="请填写提醒天数"
|
|
@change="fnGetReminderData"
|
|
/>-->
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="提醒日期" prop="REMINDER_DATA">
|
|
<el-date-picker
|
|
v-model="form.REMINDER_DATA"
|
|
value-format="YYYY-MM-DD"
|
|
format="YYYY-MM-DD"
|
|
type="date"
|
|
disabled
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="提醒状态">
|
|
<el-switch
|
|
v-model="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="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="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 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,
|
|
getChoiceTrailerList,
|
|
} from "@/request/enterprise_management.js";
|
|
import { ElMessage } from "element-plus";
|
|
import { useRouter } from "vue-router";
|
|
import { addingPrefixToFile } from "@/assets/js/utils.js";
|
|
import { REMIND_DAYS, TAXES_PERIOD } from "@/assets/js/constant.js";
|
|
const router = useRouter();
|
|
const choiceTrailerList = await getChoiceTrailerList();
|
|
const rules = {
|
|
TRAILER_VEHICLE: [
|
|
{ required: true, message: "挂车车辆不能为空", trigger: "blur" },
|
|
],
|
|
VEHICLEOWNER: [
|
|
{ required: true, message: "车主/业主不能为空", trigger: "blur" },
|
|
],
|
|
CONTACT_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: "请输入正确的手机号码",
|
|
},
|
|
],
|
|
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" },
|
|
{ pattern: /^([1-9][0-9]*)$/, message: "请输入正整数", trigger: "blur" },
|
|
],
|
|
REMINDER_DATA: [
|
|
{ required: true, message: "提醒日期不能为空", trigger: "change" },
|
|
],
|
|
FREIGHTTRAILER_ID: [
|
|
{ required: true, message: "挂车车辆不能为空", trigger: "change" },
|
|
],
|
|
};
|
|
const formRef = ref(null);
|
|
const form = ref({
|
|
FREIGHTTRAILER_ID: "",
|
|
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: {},
|
|
CAR_OWNERS: "",
|
|
DRIVING_LICENSE_IMG: [],
|
|
ALLTRAILERINFO: [],
|
|
TAXATIONLISTTRAILER: [],
|
|
TRAILER: [],
|
|
});
|
|
const fnGetExpireDate = async () => {
|
|
if (
|
|
form.value.TRANSACTION_DATA !== "" &&
|
|
form.value.TAXESDUES_PERIOD !== ""
|
|
) {
|
|
const TAXESDUES_PERIOD = Number(
|
|
form.value.TAXESDUES_PERIOD.substring(
|
|
0,
|
|
form.value.TAXESDUES_PERIOD.indexOf("个")
|
|
)
|
|
);
|
|
const date = new Date(form.value.TRANSACTION_DATA);
|
|
date.setMonth(date.getMonth() + TAXESDUES_PERIOD);
|
|
const year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
month = month < 10 ? "0" + month : month;
|
|
let day = date.getDate();
|
|
day = day < 10 ? "0" + day : day;
|
|
form.value.EXPIRE_DATE = year + "-" + month + "-" + day;
|
|
if (form.value.TRANSACTION_DATA === null) {
|
|
form.value.EXPIRE_DATE = null;
|
|
}
|
|
}
|
|
fnGetReminderData();
|
|
};
|
|
const fnGetReminderData = async () => {
|
|
if (
|
|
form.value.TRANSACTION_DATA !== "" &&
|
|
form.value.TAXESDUES_PERIOD !== "" &&
|
|
form.value.REMINDER_DAY !== ""
|
|
) {
|
|
const REMINDER_DAY = Number(form.value.REMINDER_DAY);
|
|
const date = new Date(form.value.EXPIRE_DATE);
|
|
date.setDate(date.getDate() - REMINDER_DAY);
|
|
const year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
month = month < 10 ? "0" + month : month;
|
|
let day = date.getDate();
|
|
day = day < 10 ? "0" + day : day;
|
|
form.value.REMINDER_DATA = year + "-" + month + "-" + day;
|
|
if (form.value.TRANSACTION_DATA === null) {
|
|
form.value.REMINDER_DATA = null;
|
|
}
|
|
}
|
|
};
|
|
const fnGetTrailerInfo = async () => {
|
|
const FREIGHTTRAILER_ID = form.value.FREIGHTTRAILER_ID;
|
|
form.value.FREIGHTTRAILER_ID = FREIGHTTRAILER_ID;
|
|
const resData = await getFreightTrailerView({ FREIGHTTRAILER_ID });
|
|
form.value.PROVINCE = resData.pd.PROVINCE;
|
|
form.value.CITY = resData.pd.CITY;
|
|
form.value.COUNTY = resData.pd.COUNTY;
|
|
form.value.PLATE_NUMBER = resData.pd.PLATE_NUMBER;
|
|
form.value.FRAMES_NUMBER = resData.pd.VIN;
|
|
form.value.VEHICLE_TYPE = resData.pd.TRAILER_TYPE;
|
|
form.value.CAR_OWNERS = resData.pd.CAR_OWNERS;
|
|
form.value.VEHICLEOWNER_NUMBER = resData.pd.CAR_OWNERS_TEL;
|
|
form.value.FIRSTSHOW_DATE = resData.pd.INITIAL_REGISTRATION_DATE;
|
|
form.value.DRIVINGLICENSE_PHOTO = resData.pd.DRIVING_LICENSE_IMG;
|
|
form.value.VEHICLE_MODEL = resData.pd.TRAILER_MODEL;
|
|
form.value.VEHICLE_BRAND = resData.pd.TRAILER_BRAND;
|
|
form.value.DRIVINGLICENSE_PHOTO = addingPrefixToFile(
|
|
resData.drivingLicenseImgs
|
|
);
|
|
};
|
|
const fnSubmit = debounce(
|
|
1000,
|
|
async () => {
|
|
await useFormValidate(formRef);
|
|
await setTaxationManageAdd({ ...form.value });
|
|
ElMessage.success("提交成功");
|
|
router.back();
|
|
},
|
|
{ atBegin: true }
|
|
);
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|