文档库-分阶段实施详情-添加表单验证规则

jero-web/src/components/libraryAddForm/index.vue

@@ -258,7 +258,6 @@
         </a-table>
       </div>
       <a-modal
-        :model="tabledataGrad"
         :title="$t('newlyAdded')"
         :width="900"
         :visible="visibleGrad"
@@ -266,14 +265,15 @@
         :maskClosable="false"
         @cancel="visibleGrad = false"
       >
-          <a-form-model>
+          <a-form-model :rules="tablerules" :model="tabledataGrad"
+                        ref="tableruleForm">
             <a-row :gutter="24">
               <a-col :span="12">
                 <div class="box-title-text">
                   <div class="title-text">
                     <span>{{$t('Statutenumberclause')}}</span>
                   </div>
-                  <a-form-model-item class="itemModel">
+                  <a-form-model-item class="itemModel" prop="standNumberOrClause">
                     <a-input class="box-input" v-model="tabledataGrad.standNumberOrClause"
                                     :placeholder="$t('PleaseEnter')+$t('Statutenumberclause')"/>
                   </a-form-model-item>
@@ -313,7 +313,7 @@
                 <div class="title-text">
                   <span>{{$t('remarks')}}</span>
                 </div>
-                <a-form-model-item class="itemModel" style="height: auto">
+                <a-form-model-item class="itemModel" style="height: auto" prop="remarks">
                   <a-textarea :placeholder="$t('pleaseEnter')+$t('remarks')"
                               :rows="4" v-model="tabledataGrad.remarks"/>
                 </a-form-model-item>
@@ -325,13 +325,12 @@
           <a-button key="back" @click="visibleGrad = false">
             {{ $t('cancel') }}
           </a-button>
-          <a-button key="submit" type="primary" @click="handleCancel">
+          <a-button key="submit" type="primary" @click="handleSubmit">
             {{ $t('determine') }}
           </a-button>
         </template>
       </a-modal>
       <a-modal
-      :model="tabledataGrad"
       :title="$t('edit')"
       :width="900"
       :visible="tablevisibleGrad"
@@ -339,14 +338,15 @@
       :maskClosable="false"
       @cancel="tablevisibleGrad = false"
     >
-      <a-form-model>
+      <a-form-model :rules="tablerules" :model="tabledataGrad"
+                    ref="tableruleFormedit">
         <a-row :gutter="24">
           <a-col :span="12">
             <div class="box-title-text">
               <div class="title-text">
                 <span>{{$t('Statutenumberclause')}}</span>
               </div>
-              <a-form-model-item class="itemModel">
+              <a-form-model-item class="itemModel" prop="standNumberOrClause">
                 <a-input class="box-input" v-model="tabledataGrad.standNumberOrClause"
                          :placeholder="$t('PleaseEnter')+$t('Statutenumberclause')"/>
               </a-form-model-item>
@@ -386,7 +386,7 @@
               <div class="title-text">
                 <span>{{$t('remarks')}}</span>
               </div>
-              <a-form-model-item class="itemModel" style="height: auto">
+              <a-form-model-item class="itemModel" style="height: auto" prop="remarks">
                 <a-textarea :placeholder="$t('pleaseEnter')+$t('remarks')"
                             :rows="4" v-model="tabledataGrad.remarks"/>
               </a-form-model-item>
@@ -398,7 +398,7 @@
         <a-button key="back" @click="tablevisibleGrad = false">
           {{ $t('cancel') }}
         </a-button>
-        <a-button key="submit" type="primary" @click="tablehandleCancel">
+        <a-button key="submit" type="primary" @click="tablehandleSubmit">
           {{ $t('determine') }}
         </a-button>
       </template>
@@ -447,6 +447,24 @@
         dataGradto: [],
         isFormInline: false,
         rules: {},
+        tablerules: {
+          standNumberOrClause: [
+            {
+              // required: true,
+              max: 10,
+              message: this.$t('Statutenumberclause') + this.$t('cannotExceed') + 10 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ],
+          remarks: [
+            {
+              // required: true,
+              max: 1000,
+              message: this.$t('remarks') + this.$t('cannotExceed') + 1000 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ]
+        },
         labelCol: {
           xs: { span: 24 },
           sm: { span: 6 }
@@ -519,11 +537,15 @@
 
     },
     methods: {
-      tablehandleCancel(){
+      tablehandleSubmit(){
-        this.tablevisibleGrad = false
+        this.$refs.tableruleFormedit.validate((valid) => {
-        console.log(this.tabledataGrad)
+          if(valid){
-        this.dataGradto[this.tabledataIndex] = this.tabledataGrad
+            this.tablevisibleGrad = false
-        this.dataGradto= [... this.dataGradto]
+            console.log(this.tabledataGrad)
+            this.dataGradto[this.tabledataIndex] = this.tabledataGrad
+            this.dataGradto= [... this.dataGradto]
+          }
+        })
       },
       deleteLib(val,index) {
         let _this = this
@@ -544,9 +566,13 @@
         this.tabledataIndex = index
         this.tabledataGrad = JSON.parse(JSON.stringify(result))
       },
-      handleCancel(){
+      handleSubmit(){
-        this.dataGradto.push(this.tabledataGrad)
+        this.$refs.tableruleForm.validate(valid => {
-        this.visibleGrad = false
+          if (valid){
+            this.dataGradto.push(this.tabledataGrad)
+            this.visibleGrad = false
+          }
+        })
       },
       disabledDate(current) {
         return current && current < moment().subtract(1, 'day')