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

src/components/jero/JModal/index.vue

@@ -107,6 +107,7 @@
         return Object.keys(this.$slots).filter(key => !this.usedSlots.includes(key))
       },
       scopedSlotsKeys() {
+        console.log(this.$scopedSlots,'-----------------------------------')
         return Object.keys(this.$scopedSlots).filter(key => !this.usedSlots.includes(key))
       },
       allSlotsKeys() {

src/views/system/DepartList.vue

@@ -145,7 +145,7 @@
             </a-form>
             <div class="anty-form-btn">
               <a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
-              <a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form">保存</a-button>
+              <a-button @click="submitCurrForm" :disabled="disabledStatus" type="primary" htmlType="button" icon="form">保存</a-button>
             </div>
           </a-card>
           <a-card v-else :bordered="false" style="height:248px !important;">
@@ -240,6 +240,8 @@ export default {
       depart: {},
       columns: columns,
       disableSubmit: false,
+      // 编辑提交按钮的状态
+      disabledStatus:false,
       checkedKeys: [],
       selectedKeys: [],
       autoIncr: 1,
@@ -482,6 +484,7 @@ export default {
       this.currSelected.receiptTriggerType = value
     },
     submitCurrForm() {
+      this.disabledStatus = true
       this.form.validateFields((err, values) => {
         if (!err) {
           if (!this.currSelected.id) {
@@ -497,8 +500,13 @@ export default {
               this.loadTree()
             } else {
               this.$message.error(res.message)
+              this.disabledStatus = false
             }
+          }).finally( () => {
+            this.disabledStatus = false
           })
+        }else  {
+          this.disabledStatus = false
         }
       })
     },

src/views/system/modules/DepartModal.vue

@@ -82,9 +82,12 @@
           label="备注">
           <a-textarea placeholder="请输入备注" @change="event => event.target.value = event.target.value.trim()" :maxLength="200" v-decorator="['memo', {}]" />
         </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>
 
@@ -183,10 +186,10 @@ export default {
     },
     handleOk() {
       const that = this;
+      that.confirmLoading = true;
       // 触发表单验证
       this.form.validateFields((err, values) => {
         if (!err) {
-          that.confirmLoading = true;
           let formData = Object.assign(this.model, values);
           //时间格式化
           console.log(formData);
@@ -195,14 +198,17 @@ export default {
               that.$message.success(res.message);
               that.loadTreeData();
               that.$emit("ok");
+              that.close();
             } else {
               that.$message.warning(res.message);
             }
           }).finally(() => {
             that.confirmLoading = false;
-            that.close();
+
           });
 
+        }else {
+          that.confirmLoading = false;
         }
       });
     },

src/views/system/modules/DeptUserInfo.vue

@@ -303,6 +303,7 @@ export default {
       }
     },
     selectOK(data) {
+      if(data.length === 0) return
       let params = {};
       params.depId = this.currentDeptId;
       params.userIdList = [];

src/views/system/modules/PermissionDataRuleModal.vue

@@ -15,26 +15,26 @@
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           label="规则名称">
-          <a-input placeholder="请输入规则名称" v-decorator="['ruleName', validatorRules.ruleName]"/>
+          <a-input placeholder="请输入规则名称" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator="['ruleName', validatorRules.ruleName]"/>
         </a-form-item>
         <a-form-item
           v-show="showRuleColumn"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           label="规则字段">
-          <a-input placeholder="请输入规则字段" v-decorator="['ruleColumn', validatorRules.ruleColumn]"/>
+          <a-input placeholder="请输入规则字段" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator="['ruleColumn', validatorRules.ruleColumn]"/>
         </a-form-item>
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           label="条件规则">
-          <j-dict-select-tag @change="handleChangeRuleCondition" v-decorator="['ruleConditions', validatorRules.ruleConditions]" placeholder="请输入条件规则" :triggerChange="true" dictCode="rule_conditions"/>
+          <j-dict-select-tag  v-decorator="['ruleConditions', validatorRules.ruleConditions]" placeholder="请输入条件规则" :triggerChange="true" dictCode="rule_conditions"/>
         </a-form-item>
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           label="规则值">
-          <a-input placeholder="请输入规则值" v-decorator="['ruleValue', validatorRules.ruleValue]"/>
+          <a-input placeholder="请输入规则值" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator="['ruleValue', validatorRules.ruleValue]"/>
         </a-form-item>
 
         <a-form-item
@@ -76,9 +76,9 @@
         form: this.$form.createForm(this),
         permissionId: '',
         validatorRules: {
-          ruleConditions: {rules: [{required: true, message: '请选择条件!'}]},
+          ruleConditions: {rules: [{required: true, message: '请选择条件!'}],validateTrigger: 'blur'  },
-          ruleName: {rules: [{required: true, message: '请输入规则名称!'}]},
+          ruleName: {rules: [{required: true, message: '请输入规则名称!'}],validateTrigger: 'blur'  },
-          ruleValue: {rules: [{required: true, message: '请输入规则值!'}]},
+          ruleValue: {rules: [{required: true, message: '请输入规则值!'}],validateTrigger: 'blur'  },
           ruleColumn: {rules: []}
         },
         url: {
@@ -116,10 +116,11 @@
       },
       handleOk() {
         const that = this
+        that.confirmLoading = true
         // 触发表单验证
         this.form.validateFields((err, values) => {
           if (!err) {
-            that.confirmLoading = true
+
             let httpurl = ''
             let method = ''
             if (!this.model.id) {
@@ -140,13 +141,15 @@
               if (res.success) {
                 that.$message.success(res.message)
                 that.$emit('ok')
+                that.close()
               } else {
                 that.$message.warning(res.message)
               }
             }).finally(() => {
               that.confirmLoading = false
-              that.close()
             })
+          }else {
+            that.confirmLoading = false
           }
         })
       },

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: '请输入菜单标题!' }]},
+          name:{rules: [{ required: true, message: '请输入菜单标题!' }],validateTrigger: 'blur'  },
-          component:{rules: [{ required: this.show, message: '请输入前端组件!' }]},
+          component:{rules: [{ required: this.show, message: '请输入前端组件!' }],validateTrigger: 'blur'  },
-          url:{rules: [{ required: this.show, message: '请输入菜单路径!' }]},
+          url:{rules: [{ required: this.show, message: '请输入菜单路径!' }],validateTrigger: 'blur'  },
-          permsType:{rules: [{ required: true, message: '请输入授权策略!' }]},
+          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;

src/views/system/modules/QuartzJobModal.vue

@@ -51,6 +51,10 @@
         </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>
 
@@ -121,6 +125,7 @@
       },
       handleOk () {
         const that = this;
+        that.confirmLoading = true;
         // 触发表单验证
         this.form.validateFields((err, values) => {
           console.log('values',values)
@@ -129,8 +134,6 @@
               this.$message.warning('请输入cron表达式!');
               return false;
             }
-
-            that.confirmLoading = true;
             let httpurl = '';
             let method = '';
             if(!this.model.id){
@@ -156,6 +159,8 @@
               that.confirmLoading = false;
             })
 
+          }else {
+            that.confirmLoading = false
           }
         })
       },

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
           }
         })
       },

src/views/system/modules/SelectUserModal.vue

@@ -52,7 +52,10 @@
       </div>
       <!-- table区域-end -->
 
-
+      <template slot="footer">
+        <a-button @click="handleCancel">关闭</a-button>
+        <a-button @click="handleOk" type="primary" :disabled="disabledStatus">确定</a-button>
+      </template>
     </a-modal>
   </div>
 </template>
@@ -77,6 +80,7 @@
         queryParam: {},
         // 记录上次查询条件
         lastQueryParam:{},
+        disabledStatus:false,
         // 表头
         columns1: [
           {
@@ -169,9 +173,11 @@
         this.visible = false;
       },
       handleOk() {
+        this.disabledStatus =true
         this.dataSource2 = this.selectedRowKeys;
         console.log("data:" + this.dataSource2);
         this.$emit("selectFinished", this.dataSource2);
+        this.disabledStatus =false
         this.visible = false;
       },
       add() {

src/views/system/modules/SysConfusionForm.vue

@@ -167,10 +167,11 @@ export default {
     },
     submitForm() {
       const that = this;
+      this.confirmLoading = true
+      this.$emit('disableFalse',true)
       // 触发表单验证
       this.form.validateFields((err, values) => {
         if (!err) {
-          that.confirmLoading = true;
           let httpurl = '';
           let method = '';
           if (!this.model.id) {
@@ -191,7 +192,11 @@ export default {
             }
           }).finally(() => {
             that.confirmLoading = false;
+            this.$emit('disableFalse',false)
           })
+        }else {
+          this.confirmLoading = false
+          this.$emit('disableFalse',false)
         }
 
       })

src/views/system/modules/SysConfusionModal.vue

@@ -8,7 +8,11 @@
       :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
       @cancel="handleCancel"
       cancelText="关闭">
-    <sys-confusion-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></sys-confusion-form>
+    <sys-confusion-form ref="realForm" @ok="submitCallback" @disableFalse="setSubmitFalse" :disabled="disableSubmit"></sys-confusion-form>
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="handleOk" type="primary" :disabled="disabledStatus">确定</a-button>
+    </template>
   </j-modal>
 </template>
 
@@ -26,7 +30,8 @@ export default {
       title: '',
       width: 800,
       visible: false,
-      disableSubmit: false
+      disableSubmit: false,
+      disabledStatus:false
     }
   },
   methods: {
@@ -55,6 +60,12 @@ export default {
     },
     handleCancel() {
       this.close()
+    },
+    /*
+    * 改变状态
+    * */
+    setSubmitFalse(val) {
+      this.disabledStatus = val
     }
   }
 }

src/views/system/modules/UserModal.vue

@@ -126,7 +126,7 @@
       <!--      -->
       <!--      </a-popconfirm>-->
       <a-button style="margin-right: .8rem" @click="handleCancel">取消</a-button>
-      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
+      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading" :disabled="confirmLoading">提交</a-button>
     </div>
   </a-drawer>
 </template>
@@ -402,10 +402,10 @@ export default {
     handleSubmit() {
       console.log("username",this.form.getFieldValue('username'))
       const that = this;
+      that.confirmLoading = true;
       // 触发表单验证
       this.form.validateFields((err, values) => {
         if (!err) {
-          that.confirmLoading = true;
           let formData = Object.assign(this.model, values);
           if (that.fileList != '') {
             formData.avatar = that.fileList;
@@ -453,6 +453,8 @@ export default {
             that.userDepartModel.departIdList = {userId: '', departIdList: []};
           })
 
+        }else {
+          that.confirmLoading = false;
         }
       })
     },