forked from integrated_whb/integrated_whb_vue
318 lines
10 KiB
Vue
318 lines
10 KiB
Vue
|
<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="RECORD_NUMBER">
|
||
|
<el-input v-model="data.form.RECORD_NUMBER" placeholder="请输入登记编号" />
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="6">
|
||
|
<el-form-item label="挂车车辆" prop="PLATE_NUMBER">
|
||
|
<el-input v-model="data.form.PLATE_NUMBER" placeholder="请输入挂车车辆" 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="PLATE_NUMBER">
|
||
|
<el-input v-model="data.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="data.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="data.form.VEHICLE_TYPE"
|
||
|
placeholder="--"
|
||
|
disabled
|
||
|
/>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
</el-row>
|
||
|
<el-row>
|
||
|
<el-col :span="6">
|
||
|
<el-form-item label="车主业主" prop="VEHICLEOWNER">
|
||
|
<el-input v-model="data.form.VEHICLEOWNER"
|
||
|
placeholder="--"
|
||
|
disabled
|
||
|
/>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="6">
|
||
|
<el-form-item label="车主电话" prop="VEHICLEOWNER_NUMBER">
|
||
|
<el-input v-model="data.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="data.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="data.form.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-divider content-position="left">挂车税务信息</el-divider>
|
||
|
<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="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-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-row>
|
||
|
<el-row>
|
||
|
<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="办理日期" 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="提醒状态">
|
||
|
<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="12">
|
||
|
<el-form-item label="行驶证照片" prop="OPERATING_CERTIFICATE_PHOTO">
|
||
|
<layout-upload
|
||
|
v-model:file-list="data.form.OPERATING_CERTIFICATE_PHOTO"
|
||
|
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="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,
|
||
|
} from "@/assets/js/taxation_manage.js";
|
||
|
import { debounce } from "throttle-debounce";
|
||
|
import useFormValidate from "@/assets/js/useFormValidate.js";
|
||
|
import { editTaxationManageInfo, findByIdTaxationManageInfo } from "@/request/taxation_manage.js";
|
||
|
import { ElMessage } from "element-plus";
|
||
|
import { useRoute, useRouter } from "vue-router";
|
||
|
import LayoutUpload from "@/components/upload/index.vue";
|
||
|
|
||
|
const route = useRoute();
|
||
|
const router = useRouter();
|
||
|
const { TAXATION_ID } = route.query;
|
||
|
|
||
|
const TaxesPeriodList = await layoutFnGetTaxesPeriod();
|
||
|
const rules = {
|
||
|
TRAILER_VEHICLE: [{ required: true, message: "挂车车辆不能为空", trigger: "change" }],
|
||
|
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: ""
|
||
|
},
|
||
|
TAXATION_NUMBER: "",
|
||
|
});
|
||
|
|
||
|
const fnGetData = async () => {
|
||
|
if(TAXATION_ID) {
|
||
|
const resData = await findByIdTaxationManageInfo({ TAXATION_ID });
|
||
|
data.form = resData.pd;
|
||
|
}
|
||
|
}
|
||
|
fnGetData();
|
||
|
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){
|
||
|
if (data.form.DRIVINGLICENSE_PHOTO[0].raw) formData.append("drivinglicenseFile", data.form.DRIVINGLICENSE_PHOTO[0].raw);
|
||
|
formData.append("drivinglicenseFile", !!data.form.DRIVINGLICENSE_PHOTO[0].raw);
|
||
|
}
|
||
|
await editTaxationManageInfo(formData);
|
||
|
ElMessage.success("提交成功");
|
||
|
router.back();
|
||
|
},
|
||
|
{ atBegin: true }
|
||
|
);
|
||
|
|
||
|
</script>
|
||
|
|
||
|
<style scoped lang="scss"></style>
|