案件录入(添加校验)

This commit is contained in:
Your Name
2023-09-13 14:33:22 +08:00
parent dcbc84bcd1
commit 1ff792104e
2 changed files with 340 additions and 251 deletions
-4
View File
@@ -344,10 +344,6 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
height: 700px !important;
overflow: auto !important;
}
#formContainer {
}
</style>
@@ -141,101 +141,178 @@
ref="form2"
:model="form2"
label-width="150px"
v-for="(item, index) in paymentArr"
:key="index"
:disabled="flag == '0'"
>
<div>
<div v-for="(item, index) in form2.paymentArr" :key="index">
<div style="display: flex; justify-content: space-between">
<p>申请人主体信息:</p>
<el-button
type="danger"
icon="el-icon-delete"
@click="deleteData(index)"
v-if="paymentArr.length > 1 && flag != '0'"
v-if="form2.paymentArr.length > 1 && flag != '0'"
></el-button>
</div>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<el-form-item label="申请人姓名" prop="name">
<el-input
v-model="paymentArr[index].name"
placeholder="请输入"
/>
<el-form-item
label="申请人姓名"
:prop="'paymentArr.' + index + '.name'"
:rules="[
{
required: true,
message: '申请人不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="item.name" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号:" prop="identityNum">
<el-input
v-model="paymentArr[index].identityNum"
placeholder="请输入"
/>
<el-form-item
label="身份证号:"
:prop="'paymentArr.' + index + '.identityNum'"
:rules="[
{
required: true,
message: '身份证号不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="item.identityNum" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话:" prop="contactTelphone">
<el-input
v-model="paymentArr[index].contactTelphone"
placeholder="请输入"
/>
<el-form-item
label="联系电话:"
:prop="'paymentArr.' + index + '.contactTelphone'"
:rules="[
{
required: true,
message: '联系电话不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="item.contactTelphone" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位地址:" prop="workAddress">
<el-input
v-model="paymentArr[index].workAddress"
placeholder="请输入"
/>
<el-form-item
label="单位地址:"
:prop="'paymentArr.' + index + '.workAddress'"
:rules="[
{
required: true,
message: '单位地址不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="item.workAddress" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位电话:" prop="workTelphone">
<el-input
v-model="paymentArr[index].workTelphone"
placeholder="请输入"
/>
<el-form-item
label="单位电话:"
:prop="'paymentArr.' + index + '.workTelphone'"
:rules="[
{
required: true,
message: '单位电话不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="item.workTelphone" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系地址:" prop="contactAddress">
<el-input
v-model="paymentArr[index].contactAddress"
placeholder="请输入"
/>
<el-form-item
label="联系地址:"
:prop="'paymentArr.' + index + '.contactAddress'"
:rules="[
{
required: true,
message: '联系地址不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="item.contactAddress" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<p>代理人信息:</p>
<el-row>
<el-col :span="12">
<el-form-item label="姓名:" prop="nameAgent">
<el-form-item
label="姓名:"
:prop="'paymentArr.' + index + '.nameAgent'"
:rules="[
{
required: true,
message: '姓名不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="item.nameAgent" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="身份证号:"
:prop="'paymentArr.' + index + '.identityNumAgent'"
:rules="[
{
required: true,
message: '身份证号不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="paymentArr[index].nameAgent"
v-model="item.identityNumAgent"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号:" prop="identityNumAgent">
<el-form-item
label="联系电话:"
:prop="'paymentArr.' + index + '.contactTelphoneAgent'"
:rules="[
{
required: true,
message: '联系电话不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="paymentArr[index].identityNumAgent"
v-model="item.contactTelphoneAgent"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话:" prop="contactTelphoneAgent">
<el-form-item
label="联系地址:"
:prop="'paymentArr.' + index + '.contactAddressAgent'"
:rules="[
{
required: true,
message: '联系地址不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="paymentArr[index].contactTelphoneAgent"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系地址:" prop="contactAddressAgent">
<el-input
v-model="paymentArr[index].contactAddressAgent"
v-model="item.contactAddressAgent"
placeholder="请输入"
/>
</el-form-item>
@@ -255,100 +332,178 @@
ref="form3"
label-width="150px"
:disabled="flag == '0'"
v-for="(item, index) in paymentArr1"
:key="index + paymentArr.length"
:model="form3"
>
<div>
<div
v-for="(itm, index) in form3.paymentArr1"
:key="index + form2.paymentArr.length"
>
<div style="display: flex; justify-content: space-between">
<p>被申请人主体信息:</p>
<el-button
type="danger"
icon="el-icon-delete"
@click="deleteData1(index)"
v-if="paymentArr1.length > 1 && flag != '0'"
v-if="form3.paymentArr1.length > 1 && flag != '0'"
></el-button>
</div>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<el-form-item label="被申请人姓名" prop="name">
<el-input
v-model="paymentArr1[index].name"
placeholder="请输入"
/>
<el-form-item
label="被申请人姓名"
:prop="'paymentArr1.' + index + '.name'"
:rules="[
{
required: true,
message: '被申请人不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="itm.name" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号:" prop="identityNum">
<el-input
v-model="paymentArr1[index].identityNum"
placeholder="请输入"
/>
<el-form-item
label="身份证号:"
:prop="'paymentArr1.' + index + '.identityNum'"
:rules="[
{
required: true,
message: '身份证号不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="itm.identityNum" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话:" prop="contactTelphone">
<el-input
v-model="paymentArr1[index].contactTelphone"
placeholder="请输入"
/>
<el-form-item
label="联系电话:"
:prop="'paymentArr1.' + index + '.contactTelphone'"
:rules="[
{
required: true,
message: '联系电话不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="itm.contactTelphone" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位地址:" prop="workAddress">
<el-input
v-model="paymentArr1[index].workAddress"
placeholder="请输入"
/>
<el-form-item
label="单位地址:"
:prop="'paymentArr1.' + index + '.workAddress'"
:rules="[
{
required: true,
message: '单位地址不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="itm.workAddress" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位电话:" prop="workTelphone">
<el-input
v-model="paymentArr1[index].workTelphone"
placeholder="请输入"
/>
<el-form-item
label="单位电话:"
:prop="'paymentArr1.' + index + '.workTelphone'"
:rules="[
{
required: true,
message: '单位电话不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="itm.workTelphone" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系地址:" prop="contactAddress">
<el-input
v-model="paymentArr1[index].contactAddress"
placeholder="请输入"
/>
<el-form-item
label="联系地址:"
:prop="'paymentArr1.' + index + '.contactAddress'"
:rules="[
{
required: true,
message: '联系地址不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="itm.contactAddress" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<p>代理人信息:</p>
<el-row>
<el-col :span="12">
<el-form-item label="姓名:" prop="nameAgent">
<el-form-item
label="姓名:"
:prop="'paymentArr1.' + index + '.nameAgent'"
:rules="[
{
required: true,
message: '姓名不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="itm.nameAgent" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="身份证号:"
:prop="'paymentArr1.' + index + '.identityNumAgent'"
:rules="[
{
required: true,
message: '身份证号不能为空',
trigger: 'blur',
},
]"
>
<el-input v-model="itm.identityNumAgent" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="联系电话:"
:prop="'paymentArr1.' + index + '.contactTelphoneAgent'"
:rules="[
{
required: true,
message: '联系电话不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="paymentArr1[index].nameAgent"
v-model="itm.contactTelphoneAgent"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号:" prop="identityNumAgent">
<el-form-item
label="联系地址:"
:prop="'paymentArr1.' + index + '.contactAddressAgent'"
:rules="[
{
required: true,
message: '联系地址不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="paymentArr1[index].identityNumAgent"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话:" prop="contactTelphoneAgent">
<el-input
v-model="paymentArr1[index].contactTelphoneAgent"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系地址:" prop="contactAddressAgent">
<el-input
v-model="paymentArr1[index].contactAddressAgent"
v-model="itm.contactAddressAgent"
placeholder="请输入"
/>
</el-form-item>
@@ -389,12 +544,47 @@ export default {
data() {
return {
formData: this.form,
form2: {}, //申请人主体信息
form3: {}, //被申请人主体信息
form2: {
paymentArr: [
{
identityType: 1,
name: "",
identityNum: "",
contactTelphone: "",
workAddress: "",
workTelphone: "",
contactAddress: "",
nameAgent: "",
contactTelphoneAgent: "",
contactAddressAgent: "",
},
],
}, //申请人主体信息
form3: {
paymentArr1: [
{
identityType: 2,
name: "",
identityNum: "",
contactTelphone: "",
workAddress: "",
workTelphone: "",
contactAddress: "",
nameAgent: "",
contactTelphoneAgent: "",
contactAddressAgent: "",
},
],
}, //被申请人主体信息
// 表单校验
rules: {
caseNum: [
{ required: true, message: "案件编号不能为空", trigger: "blur" },
{
required: true,
message: "案件编号不能为空",
trigger: ["change", "blur"],
},
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
caseSubjectAmount: [
{
@@ -465,122 +655,7 @@ export default {
// { type: 'number', message: '申请人主张违约金必须为数字值'}
],
},
rulesmain: {
name: [
{
required: true,
message: "申请人不能为空",
trigger: "blur",
},
],
identityNum: [
{
required: true,
message: "身份证号不能为空",
trigger: "blur",
},
],
contactTelphone: [
{
required: true,
message: "联系电话不能为空",
trigger: "blur",
},
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
workAddress: [
{
required: true,
message: "单位地址不能为空",
trigger: "blur",
},
],
workTelphone: [
{
required: true,
message: "单位电话不能为空",
trigger: "blur",
},
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
contactAddress: [
{
required: true,
message: "联系地址不能为空",
trigger: "blur",
},
],
nameAgent: [
{
required: true,
message: "姓名不能为空",
trigger: "blur",
},
],
identityNumAgent: [
{
required: true,
message: "身份证号不能为空",
trigger: "blur",
},
],
contactTelphoneAgent: [
{
required: true,
message: "联系电话不能为空",
trigger: "blur",
},
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
contactAddressAgent: [
{
required: true,
message: "联系地址不能为空",
trigger: "blur",
},
],
},
fileList: [],
paymentArr: [
{
identityType: 1,
name: "",
identityNum: "",
contactTelphone: "",
workAddress: "",
workTelphone: "",
contactAddress: "",
nameAgent: "",
contactTelphoneAgent: "",
contactAddressAgent: "",
},
],
paymentArr1: [
{
identityType: 2,
name: "",
identityNum: "",
contactTelphone: "",
workAddress: "",
workTelphone: "",
contactAddress: "",
nameAgent: "",
contactTelphoneAgent: "",
contactAddressAgent: "",
},
],
};
},
watch: {
@@ -589,8 +664,10 @@ export default {
if (val) {
this.formData = this.form;
if (this.flag == "1" || this.flag == "0") {
this.paymentArr = this.initpaymentArr;
this.paymentArr1 = this.initpaymentArr1;
setTimeout(() => {
this.form2.paymentArr = this.initpaymentArr;
this.form3.paymentArr1 = this.initpaymentArr1;
}, 1000);
}
}
},
@@ -617,7 +694,7 @@ export default {
// 新增申请人主体信息
generateForm() {
this.paymentArr.push({
this.form2.paymentArr.push({
identityType: 1,
name: "",
identityNum: "",
@@ -632,7 +709,7 @@ export default {
},
// 新增被申请人主体信息
generateForm1() {
this.paymentArr1.push({
this.form3.paymentArr1.push({
identityType: 2,
name: "",
identityNum: "",
@@ -647,11 +724,11 @@ export default {
},
// 删除申请人主体信息
deleteData(index) {
this.paymentArr.splice(index, 1);
this.form2.paymentArr.splice(index, 1);
},
// 删除被申请人主体信息
deleteData1(index) {
this.paymentArr1.splice(index, 1);
this.form3.paymentArr1.splice(index, 1);
},
// 提交立案申请 addCaseApply
submitForm() {
@@ -662,28 +739,40 @@ export default {
this.formData.loanEndDate = moment(this.formData.loanEndDate).format(
"YYYY-MM-DD HH:mm:ss"
);
this.formData.caseAffiliates = [
...this.paymentArr,
...this.paymentArr1,
];
if (valid) {
if (this.formData.id) {
editCaseApply({
...this.formData,
caseAffiliates: this.formData.caseAffiliates,
}).then((res) => {
this.$modal.msgSuccess("修改成功");
});
} else {
addCaseApply({
...this.formData,
caseAffiliates: this.formData.caseAffiliates,
}).then((response) => {
this.$modal.msgSuccess("新增成功");
});
}
this.$emit("cancel");
this.getcaseApply();
this.$refs["form2"].validate((valid) => {
if (valid) {
this.$refs["form3"].validate((vail) => {
if (vail) {
this.formData.caseAffiliates = [
...this.form2.paymentArr,
...this.form3.paymentArr1,
];
if (this.formData.id) {
editCaseApply({
...this.formData,
caseAffiliates: this.formData.caseAffiliates,
}).then((res) => {
this.$modal.msgSuccess("修改成功");
this.$emit("cancel");
this.getcaseApply();
});
} else {
addCaseApply({
...this.formData,
caseAffiliates: this.formData.caseAffiliates,
}).then((response) => {
this.$modal.msgSuccess("新增成功");
this.$emit("cancel");
this.getcaseApply();
});
}
// this.$emit("cancel");
// this.getcaseApply();
}
});
}
});
}
});
},
@@ -692,4 +781,8 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
height: 700px !important;
overflow: auto !important;
}
</style>