update 新增修改操作 改为 buttonLoading 有效防止重复提交 减少全局loading闪屏 用户体验极佳

This commit is contained in:
疯狂的狮子li
2021-09-26 10:20:34 +08:00
parent 30c89b33fe
commit a97ec1bd9a
2 changed files with 20 additions and 2 deletions

View File

@ -251,7 +251,7 @@
#end #end
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
</div> </div>
</el-dialog> </el-dialog>
@ -273,6 +273,8 @@ export default {
}, },
data() { data() {
return { return {
// 按钮loading
buttonLoading: false,
// 遮罩层 // 遮罩层
loading: true, loading: true,
// 显示搜索条件 // 显示搜索条件
@ -441,6 +443,7 @@ export default {
submitForm() { submitForm() {
this.#[[$]]#refs["form"].validate(valid => { this.#[[$]]#refs["form"].validate(valid => {
if (valid) { if (valid) {
this.buttonLoading = true;
#foreach ($column in $columns) #foreach ($column in $columns)
#if($column.htmlType == "checkbox") #if($column.htmlType == "checkbox")
this.form.$column.javaField = this.form.${column.javaField}.join(","); this.form.$column.javaField = this.form.${column.javaField}.join(",");
@ -451,12 +454,18 @@ export default {
this.#[[$modal]]#.msgSuccess("修改成功"); this.#[[$modal]]#.msgSuccess("修改成功");
this.open = false; this.open = false;
this.getList(); this.getList();
}).finally(() => {
// 防止异常loading不关闭
this.buttonLoading = false;
}); });
} else { } else {
add${BusinessName}(this.form).then(response => { add${BusinessName}(this.form).then(response => {
this.#[[$modal]]#.msgSuccess("新增成功"); this.#[[$modal]]#.msgSuccess("新增成功");
this.open = false; this.open = false;
this.getList(); this.getList();
}).finally(() => {
// 防止异常loading不关闭
this.buttonLoading = false;
}); });
} }
} }

View File

@ -305,7 +305,7 @@
#end #end
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
</div> </div>
</el-dialog> </el-dialog>
@ -322,6 +322,8 @@ export default {
#end #end
data() { data() {
return { return {
// 按钮loading
buttonLoading: false,
// 遮罩层 // 遮罩层
loading: true, loading: true,
// 导出遮罩层 // 导出遮罩层
@ -493,6 +495,7 @@ export default {
submitForm() { submitForm() {
this.#[[$]]#refs["form"].validate(valid => { this.#[[$]]#refs["form"].validate(valid => {
if (valid) { if (valid) {
this.buttonLoading = true;
#foreach ($column in $columns) #foreach ($column in $columns)
#if($column.htmlType == "checkbox") #if($column.htmlType == "checkbox")
this.form.$column.javaField = this.form.${column.javaField}.join(","); this.form.$column.javaField = this.form.${column.javaField}.join(",");
@ -506,12 +509,18 @@ export default {
this.#[[$modal]]#.msgSuccess("修改成功"); this.#[[$modal]]#.msgSuccess("修改成功");
this.open = false; this.open = false;
this.getList(); this.getList();
}).finally(() => {
// 防止异常loading不关闭
this.buttonLoading = false;
}); });
} else { } else {
add${BusinessName}(this.form).then(response => { add${BusinessName}(this.form).then(response => {
this.#[[$modal]]#.msgSuccess("新增成功"); this.#[[$modal]]#.msgSuccess("新增成功");
this.open = false; this.open = false;
this.getList(); this.getList();
}).finally(() => {
// 防止异常loading不关闭
this.buttonLoading = false;
}); });
} }
} }