案件录入(添加校验)

src/views/caseAccessAll/caseEntry.vue

@@ -344,10 +344,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-dialog__body {
-  height: 700px !important;
-  overflow: auto !important;
-}
 #formContainer {
 }
 </style>

src/views/caseAccessAll/components/caseentryDialog.vue

@@ -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-input
-                  v-model="paymentArr[index].nameAgent"
-                  placeholder="请输入"
-                />
+              <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="identityNumAgent">
+              <el-form-item
+                label="身份证号："
+                :prop="'paymentArr.' + index + '.identityNumAgent'"
+                :rules="[
+                  {
+                    required: true,
+                    message: '身份证号不能为空',
+                    trigger: 'blur',
+                  },
+                ]"
+              >
                 <el-input
-                  v-model="paymentArr[index].identityNumAgent"
+                  v-model="item.identityNumAgent"
                   placeholder="请输入"
                 />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="联系电话：" prop="contactTelphoneAgent">
+              <el-form-item
+                label="联系电话："
+                :prop="'paymentArr.' + index + '.contactTelphoneAgent'"
+                :rules="[
+                  {
+                    required: true,
+                    message: '联系电话不能为空',
+                    trigger: 'blur',
+                  },
+                ]"
+              >
                 <el-input
-                  v-model="paymentArr[index].contactTelphoneAgent"
+                  v-model="item.contactTelphoneAgent"
                   placeholder="请输入"
                 />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="联系地址：" prop="contactAddressAgent">
+              <el-form-item
+                label="联系地址："
+                :prop="'paymentArr.' + index + '.contactAddressAgent'"
+                :rules="[
+                  {
+                    required: true,
+                    message: '联系地址不能为空',
+                    trigger: 'blur',
+                  },
+                ]"
+              >
                 <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-input
-                  v-model="paymentArr1[index].nameAgent"
-                  placeholder="请输入"
-                />
+              <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="identityNumAgent">
-                <el-input
-                  v-model="paymentArr1[index].identityNumAgent"
-                  placeholder="请输入"
-                />
+              <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="contactTelphoneAgent">
+              <el-form-item
+                label="联系电话："
+                :prop="'paymentArr1.' + index + '.contactTelphoneAgent'"
+                :rules="[
+                  {
+                    required: true,
+                    message: '联系电话不能为空',
+                    trigger: 'blur',
+                  },
+                ]"
+              >
                 <el-input
-                  v-model="paymentArr1[index].contactTelphoneAgent"
+                  v-model="itm.contactTelphoneAgent"
                   placeholder="请输入"
                 />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="联系地址：" prop="contactAddressAgent">
+              <el-form-item
+                label="联系地址："
+                :prop="'paymentArr1.' + index + '.contactAddressAgent'"
+                :rules="[
+                  {
+                    required: true,
+                    message: '联系地址不能为空',
+                    trigger: 'blur',
+                  },
+                ]"
+              >
                 <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>