优化(sys): 用户/角色/部门/权限页提交按钮启用loading，响应成功后关闭动画

src/view/sys/sys-dept.vue

@@ -116,13 +116,13 @@
 </template>
 
 <script>
-  import { getTreeList, getTreeSelectList, getDataList, add, update, remove, getExcelTemplate} from '@/api/sys/sys-dept'
-  import { objectUtil, utils, exportExcel } from "@/common/js/util"
+import { getTreeList, getTreeSelectList, getDataList, add, update, remove } from '@/api/sys/sys-dept'
+import { objectUtil } from '@/common/js/util'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 export default {
-    name: "sso-dept",
+  name: 'sso-dept',
   components: {
     Treeselect
   },
@@ -141,33 +141,33 @@
       },
       listColumns: [
         {
-            title: "#",
+          title: '#',
           type: 'index',
           width: 60,
           align: 'center',
           indexMethod: (row) => {
-              return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize);
+            return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize)
           }
         },
         {
           title: '部门名称',
           key: 'deptName',
-            width: 300,
+          width: 300
         },
         {
           title: '部门编码',
           key: 'deptCode',
-            width: 100,
+          width: 100
         },
         {
           title: '上级部门',
           key: 'pDeptName',
-            width: 300,
+          width: 300
         },
         {
           title: '部门描述',
           key: 'deptDesc',
-            width: 300,
+          width: 300
         },
         {
           title: '操作区',
@@ -184,12 +184,12 @@
         },
         {
           title: '部门编码',
-            key: 'deptCode',
+          key: 'deptCode'
         },
         {
           title: '部门描述',
           key: 'deptDesc'
-          },
+        }
       ],
       pDeptList: [], // 父级部门列表
       dataList: [],
@@ -213,7 +213,7 @@
         deptCode: '',
         level: 0,
         deptDesc: '',
-          sort: 0,
+        sort: 0
       },
       ruleCustom: {
         parentId: [{
@@ -224,8 +224,8 @@
         }],
         deptCode: [{
           required: true, message: '请输入部门编码', trigger: 'blur'
-          }],
-        },
+        }]
+      }
     }
   },
   methods: {
@@ -240,15 +240,15 @@
         return
       }
       const wrapStyle = window.getComputedStyle(wrap)
-        const avail = wrap.clientHeight
-          - (parseFloat(wrapStyle.paddingTop) || 0)
-          - (parseFloat(wrapStyle.paddingBottom) || 0)
+      const avail = wrap.clientHeight -
+          (parseFloat(wrapStyle.paddingTop) || 0) -
+          (parseFloat(wrapStyle.paddingBottom) || 0)
       const pageStyle = window.getComputedStyle(page)
       const pageMarginTop = parseFloat(pageStyle.marginTop) || 0
       const pageMarginBottom = parseFloat(pageStyle.marginBottom) || 0
       // 除表格外的固定块：查询区 + 按钮区 + 分页区（含上下外边距）
-        const fixed = option.offsetHeight + btn.offsetHeight
-          + page.offsetHeight + pageMarginTop + pageMarginBottom
+      const fixed = option.offsetHeight + btn.offsetHeight +
+          page.offsetHeight + pageMarginTop + pageMarginBottom
       this.autoHeight = Math.max(200, avail - fixed)
       // 等表格按新高度重排后再量底边，避免拿到上一帧的位置
       this.$nextTick(() => {
@@ -263,7 +263,7 @@
     },
     getTreeChoose () {
       // 获取选中的节点信息
-        let choose = this.$refs.tree.getSelectedNodes();
+      let choose = this.$refs.tree.getSelectedNodes()
       if (choose.length > 0) {
         this.formItem.parentId = choose[0].id
         this.formItem.level = choose[0].level + 1
@@ -299,14 +299,14 @@
       })
     },
     toAdd () {
-        this.modalTitle = "添加"
+      this.modalTitle = '添加'
       this.modal = true
 
       this.addModal = true
       this.editModal = false
     },
     toEdit (index) {
-        this.modalTitle = "编辑"
+      this.modalTitle = '编辑'
       let temp = this.dataList[index]
 
       this.addModal = false
@@ -331,31 +331,30 @@
       // modal 提交
       this.$refs[formItem].validate((valid) => {
         if (valid) {
-            if (this.addModal) {//添加
-              add(this.formItem).then(res => {
+          // 点击即转圈，等请求响应成功后再关闭，同时防重复提交
+          this.submitLoading = true
+          const isAdd = this.addModal
+          const req = isAdd ? add(this.formItem) : update(this.formItem)
+          req.then(res => {
             this.refresh()
             this.getTreeSelectList()
             this.getTreeList()
             this.getDataList()
-                this.$Message.success("添加成功!")
-              })
-            } else {//编辑
-              update(this.formItem).then(res => {
-                this.refresh()
-                this.getTreeSelectList()
-                this.getTreeList()
-                this.getDataList()
-                this.$Message.success("编辑成功!")
-              })
-            }
+            this.$Message.success(isAdd ? '添加成功!' : '编辑成功!')
             this.cancel()
+            this.submitLoading = false
+          }).catch(() => {
+            // 失败保持弹窗打开，方便直接重试
+            this.submitLoading = false
+            this.$Message.error(isAdd ? '添加失败，请重试' : '编辑失败，请重试')
+          })
         }
       })
     },
     cancel () {
       // Modal cancel
-        this.modal = false;
-        this.refresh();
+      this.modal = false
+      this.refresh()
     },
     toDelete (index) {
       let temp = this.dataList[index]
@@ -366,18 +365,18 @@
       remove(data).then(res => {
         this.refresh()
         this.getDataList()
-          this.$Message.success("删除成功!")
+        this.$Message.success('删除成功!')
       })
     },
     refresh () {
       this.pageParam = {
         pageNum: 1,
         pageSize: 10
-        };
+      }
       this.search = {
         deptName: '',
         parentId: this.search.parentId
-        };
+      }
       this.formItem = {
         id: '',
         parentId: '0',
@@ -385,63 +384,63 @@
         deptCode: '',
         level: 0,
         deptDesc: '',
-          sort: 0,
-        };
+        sort: 0
+      }
     },
     changePage (index) {
       // 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
-        this.pageParam.pageNum = index;
-        this.getDataList();
+      this.pageParam.pageNum = index
+      this.getDataList()
     },
     changePageSize (page) {
       // 切换分页条数
-        this.pageParam.pageNum = 1;
-        this.pageParam.pageSize = page;
-        this.getDataList();
+      this.pageParam.pageNum = 1
+      this.pageParam.pageSize = page
+      this.getDataList()
     },
     renderContent (h, { root, node, data }) {
-        let icon = "";
+      let icon = ''
       if (data.level === 0) {
-          icon = "ios-navigate";
+        icon = 'ios-navigate'
       } else if (data.level === 1) {
-          icon = "md-planet";
+        icon = 'md-planet'
       } else if (data.level === 2) {
-          icon = "ios-paper-plane";
+        icon = 'ios-paper-plane'
       } else if (data.level === 3) {
-          icon = "md-radio";
+        icon = 'md-radio'
       } else {
-          icon = "md-radio-button-off";
+        icon = 'md-radio-button-off'
       }
       return h(
-          "span",
+        'span',
         {
           style: {
-              display: "inline-block",
-              cursor: "pointer"
+            display: 'inline-block',
+            cursor: 'pointer'
           },
           on: {
             click: () => {
-                data.checked = !data.checked;
+              data.checked = !data.checked
             }
           }
         },
         [
-            h("span", [
-              h("Icon", {
+          h('span', [
+            h('Icon', {
               props: {
                 type: icon,
-                  size: "16"
+                size: '16'
               },
               style: {
-                  "margin-right": "8px",
-                  "margin-bottom": "3px"
+                'margin-right': '8px',
+                'margin-bottom': '3px'
               }
             }),
-              h("span", { class: "ivu-tree-title" }, data.title)
+            h('span', { class: 'ivu-tree-title' }, data.title)
           ])
         ]
-        );
-      },
+      )
+    }
 
   },
   created () {

src/view/sys/sys-permission.vue

@@ -134,13 +134,13 @@
 
 <script>
 import { getTreeList, getTreeSelectList, getDataList, add, update, remove } from '@/api/sys/sys-permission'
-  import {objectUtil, utils, exportExcel} from "@/common/js/util"
-  import IconChoose from "@/components/my-components/icon-choose"
+import { objectUtil } from '@/common/js/util'
+import IconChoose from '@/components/my-components/icon-choose'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 export default {
-    name: "sso-menu",
+  name: 'sso-menu',
   components: {
     IconChoose,
     Treeselect
@@ -160,12 +160,12 @@
       },
       listColumns: [
         {
-            title: "#",
+          title: '#',
           type: 'index',
           width: 60,
           align: 'center',
           indexMethod: (row) => {
-              return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize);
+            return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize)
           }
         },
         {
@@ -174,7 +174,7 @@
         },
         {
           title: '菜单编码',
-            key: 'permissionCode',
+          key: 'permissionCode'
         },
         {
           title: '上级菜单',
@@ -199,12 +199,12 @@
         },
         {
           title: '菜单编码',
-            key: 'permissionCode',
+          key: 'permissionCode'
         },
         {
           title: '菜单描述',
           key: 'permissionDesc'
-          },
+        }
       ],
       pMenuList: [], // 父级菜单列表
       dataList: [],
@@ -232,7 +232,7 @@
         url: '',
         component: '',
         status: '1',
-          sort: 0,
+        sort: 0
       },
       ruleCustom: {
         parentId: [{
@@ -252,8 +252,8 @@
         }],
         component: [{
           required: true, message: '请输入组件地址', trigger: 'blur'
-          }],
-        },
+        }]
+      }
     }
   },
   methods: {
@@ -268,15 +268,15 @@
         return
       }
       const wrapStyle = window.getComputedStyle(wrap)
-        const avail = wrap.clientHeight
-          - (parseFloat(wrapStyle.paddingTop) || 0)
-          - (parseFloat(wrapStyle.paddingBottom) || 0)
+      const avail = wrap.clientHeight -
+          (parseFloat(wrapStyle.paddingTop) || 0) -
+          (parseFloat(wrapStyle.paddingBottom) || 0)
       const pageStyle = window.getComputedStyle(page)
       const pageMarginTop = parseFloat(pageStyle.marginTop) || 0
       const pageMarginBottom = parseFloat(pageStyle.marginBottom) || 0
       // 除表格外的固定块：查询区 + 按钮区 + 分页区（含上下外边距）
-        const fixed = option.offsetHeight + btn.offsetHeight
-          + page.offsetHeight + pageMarginTop + pageMarginBottom
+      const fixed = option.offsetHeight + btn.offsetHeight +
+          page.offsetHeight + pageMarginTop + pageMarginBottom
       this.autoHeight = Math.max(200, avail - fixed)
       // 等表格按新高度重排后再量底边，避免拿到上一帧的位置
       this.$nextTick(() => {
@@ -291,7 +291,7 @@
     },
     getTreeChoose () {
       // 获取选中的节点信息
-        let choose = this.$refs.tree.getSelectedNodes();
+      let choose = this.$refs.tree.getSelectedNodes()
       if (choose.length > 0) {
         this.formItem.parentId = choose[0].id
         this.formItem.level = choose[0].level + 1
@@ -325,11 +325,11 @@
     },
     toAdd () {
       if (this.formItem.level === 3) {
-          this.$Message.warning("不可以添加子菜单！")
+        this.$Message.warning('不可以添加子菜单！')
         return
       }
 
-        this.modalTitle = "添加"
+      this.modalTitle = '添加'
       this.addModal = true
       this.editModal = false
       this.modal = true
@@ -341,7 +341,7 @@
       })
     },
     toEdit (index) {
-        this.modalTitle = "编辑"
+      this.modalTitle = '编辑'
       let temp = this.dataList[index]
 
       this.addModal = false
@@ -369,31 +369,30 @@
       // modal 提交
       this.$refs[formItem].validate((valid) => {
         if (valid) {
-            if (this.addModal) {//添加
-              add(this.formItem).then(res => {
+          // 点击即转圈，等请求响应成功后再关闭，同时防重复提交
+          this.submitLoading = true
+          const isAdd = this.addModal
+          const req = isAdd ? add(this.formItem) : update(this.formItem)
+          req.then(res => {
             this.refresh()
             this.getTreeSelectList()
             this.getTreeList()
             this.getDataList()
-                this.$Message.success("添加成功!")
-              })
-            } else {//编辑
-              update(this.formItem).then(res => {
-                this.refresh()
-                this.getTreeSelectList()
-                this.getTreeList()
-                this.getDataList()
-                this.$Message.success("编辑成功!")
-              })
-            }
+            this.$Message.success(isAdd ? '添加成功!' : '编辑成功!')
             this.cancel()
+            this.submitLoading = false
+          }).catch(() => {
+            // 失败保持弹窗打开，方便直接重试
+            this.submitLoading = false
+            this.$Message.error(isAdd ? '添加失败，请重试' : '编辑失败，请重试')
+          })
         }
       })
     },
     cancel () {
       // Modal cancel
-        this.modal = false;
-        this.refresh();
+      this.modal = false
+      this.refresh()
     },
     toDelete (index) {
       let temp = this.dataList[index]
@@ -406,18 +405,18 @@
         this.getTreeSelectList()
         this.getTreeList()
         this.getDataList()
-          this.$Message.success("删除成功!")
+        this.$Message.success('删除成功!')
       })
     },
     refresh () {
       this.pageParam = {
         pageNum: 1,
         pageSize: 10
-        };
+      }
       this.search = {
         permissionName: '',
         parentId: this.search.parentId
-        };
+      }
       this.formItem = {
         id: '',
         parentId: '0',
@@ -428,52 +427,52 @@
         permissionDesc: '',
         url: '',
         component: '',
-          sort: 0,
-        };
+        sort: 0
+      }
     },
     changePage (index) {
       // 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
-        this.pageParam.pageNum = index;
-        this.getDataList();
+      this.pageParam.pageNum = index
+      this.getDataList()
     },
     changePageSize (page) {
       // 切换分页条数
-        this.pageParam.pageNum = 1;
-        this.pageParam.pageSize = page;
-        this.getDataList();
+      this.pageParam.pageNum = 1
+      this.pageParam.pageSize = page
+      this.getDataList()
     },
     renderContent (h, { root, node, data }) {
-        let icon = data.icon;
+      let icon = data.icon
       return h(
-          "span",
+        'span',
         {
           style: {
-              display: "inline-block",
-              cursor: "pointer"
+            display: 'inline-block',
+            cursor: 'pointer'
           },
           on: {
             click: () => {
-                data.checked = !data.checked;
+              data.checked = !data.checked
             }
           }
         },
         [
-            h("span", [
-              h("Icon", {
+          h('span', [
+            h('Icon', {
               props: {
                 type: icon,
-                  size: "16"
+                size: '16'
               },
               style: {
-                  "margin-right": "8px",
-                  "margin-bottom": "3px"
+                'margin-right': '8px',
+                'margin-bottom': '3px'
               }
             }),
-              h("span", {class: "ivu-tree-title"}, data.title)
+            h('span', { class: 'ivu-tree-title' }, data.title)
           ])
         ]
-        );
-      },
+      )
+    }
   },
   created () {
     this.getTreeList()

src/view/sys/sys-role.vue

@@ -142,7 +142,7 @@
 import { getTreeListByRoleId } from '@/api/sys/sys-permission'
 import { getDataList, add, update, remove, addRolePermission } from '@/api/sys/sys-role'
 import { getTreeSelectList } from '@/api/sys/sys-dept'
-import { objectUtil, utils, exportExcel } from '@/common/js/util'
+import { objectUtil } from '@/common/js/util'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
@@ -313,20 +313,21 @@ export default {
       // modal 提交
       this.$refs[formItem].validate((valid) => {
         if (valid) {
-          if (this.addModal) { // 添加
-            add(this.formItem).then(res => {
+          // 点击即转圈，等请求响应成功后再关闭，避免无反馈像卡住，同时防重复提交
+          this.submitLoading = true
+          const isAdd = this.addModal
+          const req = isAdd ? add(this.formItem) : update(this.formItem)
+          req.then(res => {
             this.refresh()
             this.getDataList()
-              this.$Message.success('添加成功!')
-            })
-          } else { // 编辑
-            update(this.formItem).then(res => {
-              this.refresh()
-              this.getDataList()
-              this.$Message.success('编辑成功!')
-            })
-          }
+            this.$Message.success(isAdd ? '添加成功!' : '编辑成功!')
             this.cancel()
+            this.submitLoading = false
+          }).catch(() => {
+            // 失败保持弹窗打开，方便直接重试
+            this.submitLoading = false
+            this.$Message.error(isAdd ? '添加失败，请重试' : '编辑失败，请重试')
+          })
         }
       })
     },

src/view/sys/sys-user.vue

@@ -372,18 +372,20 @@ export default {
             userRoleStr: JSON.stringify(userAndRoleArr).toString()
           })
 
-          if (this.addModal) { // 添加
-            add(data).then(res => {
+          // 点击即转圈，等请求响应成功后再关闭，同时防重复提交
+          this.submitLoading = true
+          const isAdd = this.addModal
+          const req = isAdd ? add(data) : update(data)
+          req.then(res => {
             this.getDataList()
-              this.$Message.success('添加成功!')
-            })
-          } else { // 编辑
-            update(data).then(res => {
-              this.getDataList()
-              this.$Message.success('编辑成功!')
-            })
-          }
+            this.$Message.success(isAdd ? '添加成功!' : '编辑成功!')
             this.cancel()
+            this.submitLoading = false
+          }).catch(() => {
+            // 失败保持弹窗打开，方便直接重试
+            this.submitLoading = false
+            this.$Message.error(isAdd ? '添加失败，请重试' : '编辑失败，请重试')
+          })
         }
       })
     },