案件录入页面输入校验

src/views/caseFiling/archiveList.vue

         prop="registerDate"
         :show-overflow-tooltip="true"
       />
-      <el-table-column label="案件状态" align="center" prop="caseStatusName" />
+      <el-table-column label="案件状态" align="center" prop="caseStatusName">
+        <template slot-scope="scope">
+          <el-tag type="success">{{ scope.row.caseStatusName }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column
         label="操作"
         align="center"
     // model框显示
     showDetail(row) {
       this.getDetail({ id: row.id });
+      this.showarchiveDetails = true;
+      this.flagLoading = true;
     },
     // 关闭弹窗
     cancelpaymentdetails() {
     getDetail(parms) {
       adjudicationArchives(parms).then((res) => {
         this.detailform = res.data;
-        this.showarchiveDetails = true;
+        this.flagLoading = false;
       });
     },
   },

src/views/caseFiling/components/archiveDetailsDialog.vue

       noData: false,
     };
   },
+  watch: {
+    detailform(newValue) {
+      if (newValue) {
+        this.caseApplicationObj = this.detailform.caseApplication;
+        this.caselogDataArr = this.detailform.caseLogRecordList;
+        this.deliveryDataArr = this.detailform.logisticsInfoVOList;
+      }
+    },
+  },
   methods: {
     handleClick(tab, event) {
       // console.log(tab, event);
       this.$emit("cancelpaymentdetails");
     },
   },
-  created() {
-    this.caseApplicationObj = this.detailform.caseApplication;
-    this.caselogDataArr = this.detailform.caseLogRecordList;
-    this.deliveryDataArr = this.detailform.logisticsInfoVOList;
-  },
 };
 </script>
 

src/views/caseManagement/components/caseentryDialog.vue

         label-width="150px"
         :disabled="flag == '0'"
       >
-        <div style="display:inline-flex">
+        <div style="display: inline-flex">
           <div class="infoIcon"></div>
           <div class="caseInfo">案件信息：</div>
         </div>
               <el-input
                 v-model="formData.caseSubjectAmount"
                 placeholder="请输入案件标的"
-                @keyup.native="InputNumber('caseSubjectAmount')"
-                autocomplete="off"
+                @input="numberFn('caseSubjectAmount')"
               />
             </el-form-item>
           </el-col>
               <el-input
                 v-model="formData.claimPrinciOwed"
                 placeholder="请输入"
+                @input="numberFn('claimPrinciOwed')"
               />
             </el-form-item>
           </el-col>
               <el-input
                 v-model="formData.claimInterestOwed"
                 placeholder="请输入"
+                @input="numberFn('claimInterestOwed')"
               />
             </el-form-item>
           </el-col>
               <el-input
                 v-model="formData.claimLiquidDamag"
                 placeholder="请输入"
+                @input="numberFn('claimLiquidDamag')"
               />
             </el-form-item>
           </el-col>
       >
         <div v-for="(item, index) in form2.paymentArr" :key="index">
           <div style="display: flex; justify-content: space-between">
-            <div style="display:inline-flex">
+            <div style="display: inline-flex">
               <div class="infoIcon"></div>
               <div class="caseInfo">申请人主体信息：</div>
             </div>
                     message: '申请人不能为空',
                     trigger: 'blur',
                   },
+                  { max: 20, message: '长度应小于20个字符', trigger: 'blur' }
                 ]"
               >
                 <el-input v-model="item.name" placeholder="请输入" />
               <el-form-item
                 label="代码："
                 :prop="'paymentArr.' + index + '.identityNum'"
+                :rules="[
+                  { max: 50, message: '长度应小于50个字符', trigger: 'blur' }
+                ]"
               >
                 <el-input v-model="item.identityNum" placeholder="请输入" />
               </el-form-item>
                     message: '单位地址不能为空',
                     trigger: 'blur',
                   },
+                  { max: 50, message: '长度应小于50个字符', trigger: 'blur' }
                 ]"
               >
                 <el-input v-model="item.workAddress" placeholder="请输入" />
                     message: '联系地址不能为空',
                     trigger: 'blur',
                   },
+                  { max: 50, message: '长度应小于50个字符', trigger: 'blur' }
                 ]"
               >
                 <el-input v-model="item.contactAddress" placeholder="请输入" />
               </el-form-item>
             </el-col>
           </el-row>
-          <div style="display:inline-flex">
-              <div class="infoIcon"></div>
-              <div class="caseInfo2">代理人信息：</div>
+          <div style="display: inline-flex">
+            <div class="infoIcon"></div>
+            <div class="caseInfo2">代理人信息：</div>
           </div>
           <!-- <p>代理人信息：</p> -->
           <el-row>
                     message: '姓名不能为空',
                     trigger: 'blur',
                   },
+                  { max: 20, message: '长度应小于20个字符', trigger: 'blur' }
                 ]"
               >
                 <el-input v-model="item.nameAgent" placeholder="请输入" />
                     message: '联系地址不能为空',
                     trigger: 'blur',
                   },
+                  { max: 50, message: '长度应小于50个字符', trigger: 'blur' }
                 ]"
               >
                 <el-input
           :key="index + form2.paymentArr.length"
         >
           <div style="display: flex; justify-content: space-between">
-            <div style="display:inline-flex">
+            <div style="display: inline-flex">
               <div class="infoIcon"></div>
               <div class="caseInfo">被申请人主体信息：</div>
             </div>
                     message: '被申请人不能为空',
                     trigger: 'blur',
                   },
+                  { max: 20, message: '长度应小于20个字符', trigger: 'blur' }
                 ]"
               >
                 <el-input v-model="itm.name" placeholder="请输入" />
                     message: '单位地址不能为空',
                     trigger: 'blur',
                   },
+                  { max: 50, message: '长度应小于50个字符', trigger: 'blur' }
                 ]"
               >
                 <el-input v-model="itm.workAddress" placeholder="请输入" />
                     message: '联系地址不能为空',
                     trigger: 'blur',
                   },
+                  { max: 50, message: '长度应小于50个字符', trigger: 'blur' }
                 ]"
               >
                 <el-input v-model="itm.contactAddress" placeholder="请输入" />
               </el-form-item>
             </el-col>
           </el-row>
-          <div style="display:inline-flex">
-              <div class="infoIcon"></div>
-              <div class="caseInfo2">代理人信息：</div>
+          <div style="display: inline-flex">
+            <div class="infoIcon"></div>
+            <div class="caseInfo2">代理人信息：</div>
           </div>
           <!-- <p>代理人信息：</p> -->
           <el-row>
                     message: '姓名不能为空',
                     trigger: 'blur',
                   },
+                  { max: 20, message: '长度应小于20个字符', trigger: 'blur' }
                 ]"
               >
                 <el-input v-model="itm.nameAgent" placeholder="请输入" />
                     message: '联系地址不能为空',
                     trigger: 'blur',
                   },
+                  { max: 50, message: '长度应小于50个字符', trigger: 'blur' }
                 ]"
               >
                 <el-input
             message: "申请人主张欠本金不能为空",
             trigger: "blur",
           },
-          // { type: 'number', message: '申请人主张欠本金必须为数字值'}
         ],
         claimInterestOwed: [
           {
             message: "申请人主张欠利息不能为空",
             trigger: "blur",
           },
-          // { type: 'number', message: '申请人主张欠利息必须为数字值'}
         ],
         Overduedays: [
           {
             message: "逾期天数不能为空",
             trigger: "blur",
           },
-          // { type: 'number', message: '逾期天数必须为数字值'}
         ],
         claimLiquidDamag: [
           {
             message: "申请人主张违约金不能为空",
             trigger: "blur",
           },
-          // { type: 'number', message: '申请人主张违约金必须为数字值'}
         ],
         arbitratClaims: [
           {
           if (this.flag == "1" || this.flag == "0") {
             this.form2.paymentArr = this.initpaymentArr;
             this.form3.paymentArr1 = this.initpaymentArr1;
-            console.log(this.caseAttachList,this.flag, "caseAttachList--flag");
             this.caseAttachList.forEach((item) => {
-              console.log(item, "iytem");
               if (item.annexType == 2) {
                 this.applicateArr.push({
                   annexName: item.annexName,
     },
   },
   methods: {
-     // 过滤输入的金额
-    InputNumber (property) {
-      this.formData[property] = this.limitInputPointNumber(this.formData[property])
+    numberFn(p) {
+      this.formData[p] =
+        this.formData[p]
+          .replace(/[^\d^\.]+/g, "")
+          .replace(/^0+(\d)/, "$1")
+          .replace(/^\./, "0.")
+          .match(/^\d*(\.?\d{0,2})/g)[0] || "";
     },
- 
-    // 验证只能输入数字
-    limitInputNumber (val) {
-      if (val) {
-        return String(val).replace(/\D/g, '')
-      }
-      return val
-    },
- 
-    // 限制只能输入数字(可以输入两位小数)
-    limitInputPointNumber (val) {
-      if (val === 0 || val === '0' || val === '') {
-        return ''
-      } else {
-        let value = null
-        value = String(val).replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
-        value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
-        value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
-        value = value.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
-        return Number(value)
-      }
-    },
-
     UploadUrl() {
       return window.location.origin + "/API/evidence/upload";
     },

src/views/caseManagement/components/formateCourtDialog.vue

           </el-radio-group>
         </el-form-item>
       </el-form>
-      <el-tag type="warning" v-if="noArbitrator">当前案件未指定仲裁员，请先指定仲裁员！</el-tag>
+      <el-tag type="warning" v-if="noArbitrator"
+        >当前案件未指定仲裁员，请先指定仲裁员！</el-tag
+      >
       <p></p>
       <!-- <el-form ref="form"> -->
-      <div v-if="isAgreePendTral == 0 || noArbitrator" style="display:inline-flex;  margin-bottom: 8px;">
-          <div class="infoIcon"></div>
-          <div>仲裁员信息列表</div>
+      <div
+        v-if="isAgreePendTral == 0 || noArbitrator"
+        style="display: inline-flex; margin-bottom: 8px"
+      >
+        <div class="infoIcon"></div>
+        <div>仲裁员信息列表</div>
       </div>
       <el-table
         :data="dataList"
     formateCourtData: {
       handler(val) {
         if (val.arbitratorName == null) {
-          console.log('无仲裁员',val);
-          this.noArbitrator = true
+          console.log("无仲裁员", val);
+          this.noArbitrator = true;
         } else {
-          this.noArbitrator = false
+          this.noArbitrator = false;
         }
       },
     },
     },
     // 确认
     submitForm() {
-      // if (this.arbitrators.length > 0) {
-      if (this.isAgreePendTral == 0) {
+      if (this.noArbitrator) {
         this.paramsdata = {
-          isAgreePendTral: 0,
           id: this.formateCourtData.id,
           arbitrators: this.arbitrators,
         };
       } else {
-        this.paramsdata = {
-          isAgreePendTral: 1,
-          id: this.formateCourtData.id,
-        };
+        if (this.isAgreePendTral == 0) {
+          this.paramsdata = {
+            isAgreePendTral: 0,
+            id: this.formateCourtData.id,
+            arbitrators: this.arbitrators,
+          };
+        } else {
+          this.paramsdata = {
+            isAgreePendTral: 1,
+            id: this.formateCourtData.id,
+          };
+        }
       }
+
       pendTralCheck(this.paramsdata).then((res) => {
         this.cancel();
         this.$modal.msgSuccess("组庭成功");