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

src/views/system/modules/PermissionModal.vue

@@ -163,11 +163,11 @@
       <!-- 选择图标 -->
       <icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
     </a-spin>
-      <a-row :style="{textAlign:'right'}">
+      <a-row :style="{textAlign:'right'}" v-if='!disableSubmit'>
         <a-button :style="{marginRight: '8px'}" @click="handleCancel">
           关闭
         </a-button>
-        <a-button :disabled="disableSubmit" @click="handleOk" type="primary">确定</a-button>
+        <a-button :disabled="confirmLoading" @click="handleOk" type="primary">确定</a-button>
       </a-row>
     </div>
   </a-drawer>
@@ -220,10 +220,10 @@
     computed:{
       validatorRules:function() {
         return {
-          name:{rules: [{ required: true, message: '请输入菜单标题!' }]},
-          component:{rules: [{ required: this.show, message: '请输入前端组件!' }]},
-          url:{rules: [{ required: this.show, message: '请输入菜单路径!' }]},
-          permsType:{rules: [{ required: true, message: '请输入授权策略!' }]},
+          name:{rules: [{ required: true, message: '请输入菜单标题!' }],validateTrigger: 'blur'  },
+          component:{rules: [{ required: this.show, message: '请输入前端组件!' }],validateTrigger: 'blur'  },
+          url:{rules: [{ required: this.show, message: '请输入菜单路径!' }],validateTrigger: 'blur'  },
+          permsType:{rules: [{ required: true, message: '请输入授权策略!' }],validateTrigger: 'blur'  },
           sortNo:{initialValue:1.0},
         }
       }
@@ -302,6 +302,7 @@
       },
       handleOk () {
         const that = this;
+        this.confirmLoading = true
         // 触发表单验证
         this.form.validateFields((err, values) => {
           if (!err) {
@@ -316,12 +317,12 @@
             let formData = Object.assign(this.model, values);
             if ((formData.menuType == 1 || formData.menuType == 2) && !formData.parentId) {
               that.validateStatus = 'error';
-              that.$message.error("请检查你填的类型以及信息是否正确！");
+              that.$message.warn("请检查你填的类型以及信息是否正确！");
+              that.confirmLoading = false;
               return;
             } else {
               that.validateStatus = 'success';
             }
-            that.confirmLoading = true;
             let obj;
             if (!this.model.id) {
               obj = addPermission(formData);
@@ -339,6 +340,8 @@
             }).finally(() => {
               that.confirmLoading = false;
             });
+          }else  {
+            this.confirmLoading = false
           }
         })
       },
@@ -373,6 +376,7 @@
         }
       },
       onChangeMenuType(e) {
+        this.form.resetFields()
         this.localMenuType=e.target.value
         if(e.target.value == 2){
           this.show = false;