提交按钮防止多次点击调用接口

src/views/system/modules/RoleModal.vue

@@ -17,25 +17,29 @@
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           label="角色名称">
-          <a-input placeholder="请输入角色名称" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator="[ 'roleName', validatorRules.roleName]" />
+          <a-input placeholder="请输入角色名称" @change="event => event.target.value = event.target.value.trim()" :maxLength="30" v-decorator="[ 'roleName', validatorRules.roleName]" />
         </a-form-item>
 
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           label="角色编码">
-          <a-input placeholder="请输入角色编码" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" :disabled="roleDisabled" v-decorator="[ 'roleCode', validatorRules.roleCode]" />
+          <a-input placeholder="请输入角色编码" @change="event => event.target.value = event.target.value.trim()" :maxLength="64" :disabled="roleDisabled" v-decorator="[ 'roleCode', validatorRules.roleCode]" />
         </a-form-item>
 
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           label="描述">
-          <a-textarea :rows="5" @change="event => event.target.value = event.target.value.trim()" :maxLength="300" placeholder="请输入描述" v-decorator="[ 'description', validatorRules.description ]" />
+          <a-textarea :rows="5" @change="event => event.target.value = event.target.value.trim()" :maxLength="126" placeholder="请输入描述" v-decorator="[ 'description', validatorRules.description ]" />
         </a-form-item>
 
       </a-form>
     </a-spin>
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="handleOk" type="primary" :disabled="confirmLoading">确定</a-button>
+    </template>
   </a-modal>
 </template>
 
@@ -66,7 +70,7 @@
           roleName:{
             rules: [
               { required: true, message: '请输入角色名称!' },
-              { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
+              { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
             ],
             validateTrigger: 'blur'
           },
@@ -111,11 +115,11 @@
         this.visible = false;
       },
       handleOk () {
+        this.confirmLoading  =true
         const that = this;
         // 触发表单验证
         this.form.validateFields((err, values) => {
           if (!err) {
-            that.confirmLoading = true;
             values.roleName = (values.roleName || '').trim()
             values.roleCode = (values.roleCode || '').trim()
             let formData = Object.assign(this.model, values);
@@ -137,6 +141,8 @@
             }).finally(() => {
               that.confirmLoading = false;
             })
+          }else {
+            this.confirmLoading  =false
           }
         })
       },