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

This commit is contained in:
fengachen
2021-08-24 17:08:00 +08:00
parent 246a3010d8
commit 17edcf91cd
12 changed files with 94 additions and 36 deletions
+2 -1
View File
@@ -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() {
@@ -225,4 +226,4 @@
max-width: 100vw;
}
}
</style>
</style>
+9 -1
View File
@@ -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
}
})
},
+9 -3
View File
@@ -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;
}
});
},
@@ -303,6 +303,7 @@ export default {
}
},
selectOK(data) {
if(data.length === 0) return
let params = {};
params.depId = this.currentDeptId;
params.userIdList = [];
@@ -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: '请选择条件!'}]},
ruleName: {rules: [{required: true, message: '请输入规则名称!'}]},
ruleValue: {rules: [{required: true, message: '请输入规则值!'}]},
ruleConditions: {rules: [{required: true, message: '请选择条件!'}],validateTrigger: 'blur' },
ruleName: {rules: [{required: true, message: '请输入规则名称!'}],validateTrigger: 'blur' },
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
}
})
},
@@ -176,4 +179,4 @@
<style scoped>
</style>
</style>
+12 -8
View File
@@ -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;
+7 -2
View File
@@ -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
}
})
},
+11 -5
View File
@@ -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
}
})
},
+7 -1
View File
@@ -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() {
@@ -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)
}
})
+13 -2
View File
@@ -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
}
}
}
+4 -2
View File
@@ -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;
}
})
},