提交按钮loading

magic-boot-ui/src/components/MagicBoot/mb-dialog.vue

@@ -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

magic-boot-ui/src/views/system/dict/dict-items.vue

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

magic-boot-ui/src/views/system/dict/dict-list.vue

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

magic-boot-ui/src/views/system/menu/menu-form.vue

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

magic-boot-ui/src/views/system/menu/menu-list.vue

@@ -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>

magic-boot-ui/src/views/system/office/office-list.vue

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

magic-boot-ui/src/views/system/role/role-assign-permissions.vue

@@ -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())
     }
   }
 }

magic-boot-ui/src/views/system/role/role-list.vue

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

magic-boot-ui/src/views/system/user/user-form.vue

@@ -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) => {
+          }).then(() => {
-            this.dialogVisible = false
+            d.hideLoading()
             this.$notify({
               title: '成功',
               message: this.dialogTitle + '成功',
@@ -110,7 +111,7 @@ export default {
               duration: 2000
             })
             this.$emit('reload-table')
-          })
+          }).catch(() => d.hideLoading())
         }
       })
     },

magic-boot-ui/src/views/system/user/user-list.vue

@@ -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>