提交按钮loading

This commit is contained in:
吕金泽 2022-02-05 10:08:09 +08:00
parent 29f631ae38
commit 854a860aa7
10 changed files with 46 additions and 26 deletions

View File

@ -6,7 +6,7 @@
<el-button @click="dialogVisible = false">
关闭
</el-button>
<el-button type="primary" @click="confirmClick">
<el-button type="primary" :loading="confirmLoading" @click="confirmClick">
确认
</el-button>
</slot>
@ -37,7 +37,8 @@ export default {
},
data() {
return {
dialogVisible: false
dialogVisible: false,
confirmLoading: false
}
},
created() {
@ -53,7 +54,13 @@ export default {
},
methods: {
confirmClick() {
this.$emit('confirm-click')
this.$emit('confirm-click', this)
},
loading(){
this.confirmLoading = true
},
hideLoading(){
this.confirmLoading = false
},
show() {
this.dialogVisible = true

View File

@ -11,7 +11,7 @@
<mb-table ref="table" v-bind="tableOptions" />
<mb-dialog ref="formDialog" :title="dialogTitle" width="700px" @confirm-click="save">
<mb-dialog ref="formDialog" :title="dialogTitle" width="700px" @confirm-click="save($event)">
<template #content>
<el-form ref="dataForm" :inline="true" :rules="rules" :model="temp" label-position="right" label-width="100px" style="margin-left: 20px">
<el-form-item label="标签名" prop="label">
@ -151,10 +151,12 @@ export default {
this.$refs['dataForm'].clearValidate()
})
},
save() {
save(d) {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
d.loading()
this.$post('dict/items/save', this.temp).then(() => {
d.hideLoading()
this.$refs.formDialog.hide()
this.$notify({
title: '成功',
@ -164,7 +166,7 @@ export default {
})
this.reloadTable()
this.$common.getDictData()
})
}).catch(() => d.hideLoading())
}
})
},

View File

@ -11,7 +11,7 @@
<mb-table ref="table" v-bind="tableOptions" />
<mb-dialog ref="dictDialog" :title="dialogTitle" width="700px" @confirm-click="save()">
<mb-dialog ref="dictDialog" :title="dialogTitle" width="700px" @confirm-click="save($event)">
<template #content>
<el-form ref="dataForm" :inline="true" :rules="rules" :model="temp" label-position="right" label-width="100px" style="margin-left: 20px">
<el-form-item label="字典类型" prop="dictType">
@ -177,10 +177,12 @@ export default {
this.$refs['dataForm'].clearValidate()
})
},
save() {
save(d) {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
d.loading()
this.$post('dict/save', this.temp).then((response) => {
d.hideLoading()
this.temp.id = response.data
this.$refs.dictDialog.hide()
this.$notify({
@ -191,7 +193,7 @@ export default {
})
this.reloadTable()
this.$common.getDictData()
})
}).catch(() => d.hideLoading())
}
})
},

View File

@ -135,9 +135,10 @@ export default {
}
},
methods: {
save() {
save(d) {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
d.loading()
if(this.temp.pid == this.temp.id){
this.$notify({
title: '失败',
@ -165,6 +166,7 @@ export default {
this.temp.url = ''
}
this.$post('menu/save', this.temp).then(() => {
d.hideLoading()
this.$notify({
title: '成功',
message: (this.dialogStatus === 'create' ? '创建' : '修改') + '成功',
@ -172,7 +174,7 @@ export default {
duration: 2000
})
this.$emit('reload-table')
})
}).catch(() => d.hideLoading())
}
})
},

View File

@ -24,7 +24,7 @@
<mb-table ref="table" v-bind="tableOptions" v-if="menuData && menuData.length > 0 && refreshTable" />
<mb-dialog ref="menuFormDialog" width="1050px" :title="dialogTitle" @confirm-click="$refs.menuForm.save()">
<mb-dialog ref="menuFormDialog" width="1050px" :title="dialogTitle" @confirm-click="$refs.menuForm.save($event)">
<template #content>
<menu-form ref="menuForm" :menu-tree="menuTree" @reload-table="reloadTable" />
</template>

View File

@ -30,7 +30,7 @@
<mb-table ref="table" v-bind="tableOptions" v-if="officeData && officeData.length > 0 && refreshTable" />
<mb-dialog ref="officeFormDialog" width="1050px" :title="dialogTitle" @confirm-click="save()">
<mb-dialog ref="officeFormDialog" width="1050px" :title="dialogTitle" @confirm-click="save($event)">
<template #content>
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="80px" style="width: 900px; margin-left:50px;">
<el-row :gutter="24">
@ -264,9 +264,10 @@ export default {
this.$refs['dataForm'].clearValidate()
})
},
save() {
save(d) {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
d.loading()
if(this.temp.pid == this.temp.id){
this.$notify({
title: '失败',
@ -286,6 +287,7 @@ export default {
return
}
this.$post('office/save', this.temp).then(() => {
d.hideLoading()
this.reloadTable()
this.$refs.officeFormDialog.hide()
this.$notify({
@ -294,7 +296,7 @@ export default {
type: 'success',
duration: 2000
})
})
}).catch(() => d.hideLoading())
}
})
},

View File

@ -23,11 +23,13 @@ export default {
})
},
methods: {
save() {
save(d) {
d.loading()
this.$post('role/save', {
id: this.id,
menus: this.menus
}).then((response) => {
d.hideLoading()
this.$notify({
title: '成功',
message: '分配成功',
@ -35,7 +37,7 @@ export default {
duration: 2000
})
this.$emit('close')
})
}).catch(() => d.hideLoading())
}
}
}

View File

@ -11,7 +11,7 @@
<mb-table ref="table" v-bind="tableOptions" />
<mb-dialog ref="roleFormDialog" :title="dialogTitle" width="1000px" @confirm-click="save()">
<mb-dialog ref="roleFormDialog" :title="dialogTitle" width="1000px" @confirm-click="save($event)">
<template #content>
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px" style="width: 900px;">
<el-row :gutter="24">
@ -55,7 +55,7 @@
</template>
</mb-dialog>
<mb-dialog ref="assignPermissionsDialog" title="分配权限" width="750" @confirm-click="$refs.assignPermissions.save()">
<mb-dialog ref="assignPermissionsDialog" title="分配权限" width="750" @confirm-click="$refs.assignPermissions.save($event)">
<template #content>
<role-assign-permissions ref="assignPermissions" :key="Math.random()" :id="temp.id" @close="() => { $refs.assignPermissionsDialog.hide(); temp.id = '' }" />
</template>
@ -207,10 +207,12 @@ export default {
this.$refs['dataForm'].clearValidate()
})
},
save() {
save(d) {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
d.loading()
this.$post('role/save', this.temp).then(() => {
d.hideLoading()
this.reloadTable()
this.$refs.roleFormDialog.hide()
this.$notify({
@ -219,7 +221,7 @@ export default {
type: 'success',
duration: 2000
})
})
}).catch(() => d.hideLoading())
}
})
},

View File

@ -94,15 +94,16 @@ export default {
this.$refs['dataForm'].clearValidate()
})
},
save() {
save(d) {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
d.loading()
this.$request({
url: 'user/save',
method: 'post',
params: this.temp
}).then((response) => {
this.dialogVisible = false
}).then(() => {
d.hideLoading()
this.$notify({
title: '成功',
message: this.dialogTitle + '成功',
@ -110,7 +111,7 @@ export default {
duration: 2000
})
this.$emit('reload-table')
})
}).catch(() => d.hideLoading())
}
})
},

View File

@ -34,7 +34,7 @@
<mb-table ref="table" v-bind="tableOptions" @selection-change="selectionChange" />
<mb-dialog ref="userFormDialog" :title="dialogTitle" @confirm-click="$refs.userForm.save()" width="770px">
<mb-dialog ref="userFormDialog" :title="dialogTitle" @confirm-click="$refs.userForm.save($event)" width="770px">
<template #content>
<user-form ref="userForm" :dialog-status="dialogTitle" @reload-table="reloadTable" />
</template>