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

src/view/sys/sys-dept.vue

@@ -116,58 +116,58 @@
 </template>
 
 <script>
-  import { getTreeList, getTreeSelectList, getDataList, add, update, remove, getExcelTemplate} from '@/api/sys/sys-dept'
+import { getTreeList, getTreeSelectList, getDataList, add, update, remove } 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 Treeselect from '@riophae/vue-treeselect'
-  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
-  export default {
+export default {
-    name: "sso-dept",
+  name: 'sso-dept',
   components: {
     Treeselect
   },
-    data() {
+  data () {
     return {
-        fixedHeader: true,// 高度自适应
+      fixedHeader: true, // 高度自适应
-        autoHeight: `${window.innerHeight} ` * 0.58,// 表格高度（随容器可用高度动态修正）
+      autoHeight: `${window.innerHeight} ` * 0.58, // 表格高度（随容器可用高度动态修正）
-        treeHeight: `${window.innerHeight} ` * 0.58,// 左侧树高度，对齐到右侧表格底部
+      treeHeight: `${window.innerHeight} ` * 0.58, // 左侧树高度，对齐到右侧表格底部
-        treeLoading: false,//树加载中
+      treeLoading: false, // 树加载中
       treeList: [],
       disabledTreeSelect: false,
       treeSelectList: [],
       search: {
         deptName: '',
-          parentId:'0'
+        parentId: '0'
       },
       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,14 +184,14 @@
         },
         {
           title: '部门编码',
-            key: 'deptCode',
+          key: 'deptCode'
         },
         {
           title: '部门描述',
           key: 'deptDesc'
-          },
+        }
       ],
-        pDeptList:[],          //父级部门列表
+      pDeptList: [], // 父级部门列表
       dataList: [],
       tableLoading: false,
       pageTotal: 0, // 总页数
@@ -208,12 +208,12 @@
       submitLoading: false,
       formItem: {
         id: '',
-          parentId: '0' ,
+        parentId: '0',
         deptName: '',
         deptCode: '',
         level: 0,
         deptDesc: '',
-          sort: 0,
+        sort: 0
       },
       ruleCustom: {
         parentId: [{
@@ -224,13 +224,13 @@
         }],
         deptCode: [{
           required: true, message: '请输入部门编码', trigger: 'blur'
-          }],
+        }]
-        },
+      }
     }
   },
   methods: {
     // 依据内容区可用高度动态分配：表格自适应，左侧树底部与表格底部严格对齐
-      calcHeight() {
+    calcHeight () {
       const wrap = this.$el.closest('.content-wrapper')
       const option = this.$refs.optionBox
       const btn = this.$refs.btnBox
@@ -240,15 +240,15 @@
         return
       }
       const wrapStyle = window.getComputedStyle(wrap)
-        const avail = wrap.clientHeight
+      const avail = wrap.clientHeight -
-          - (parseFloat(wrapStyle.paddingTop) || 0)
+          (parseFloat(wrapStyle.paddingTop) || 0) -
-          - (parseFloat(wrapStyle.paddingBottom) || 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
+      const fixed = option.offsetHeight + btn.offsetHeight +
-          + page.offsetHeight + pageMarginTop + pageMarginBottom
+          page.offsetHeight + pageMarginTop + pageMarginBottom
       this.autoHeight = Math.max(200, avail - fixed)
       // 等表格按新高度重排后再量底边，避免拿到上一帧的位置
       this.$nextTick(() => {
@@ -261,9 +261,9 @@
         })
       })
     },
-      getTreeChoose() {
+    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
@@ -272,23 +272,23 @@
       } else {
       }
     },
-      getTreeList() {
+    getTreeList () {
       getTreeList().then(res => {
         this.treeList = res.data.data
       })
     },
-      getTreeSelectList() {
+    getTreeSelectList () {
       getTreeSelectList().then(res => {
         this.treeSelectList = res.data.data
       })
     },
-      getDataList() {
+    getDataList () {
       let temp = JSON.parse(JSON.stringify(this.pageParam))
       let data = objectUtil.trimJoin(temp, this.search)
       this.tableLoading = true
       getDataList(data).then(res => {
         let page = res.data.data
-          if (page != null ){
+        if (page != null) {
           this.pageTotal = page.total
           this.dataList = page.records
         }
@@ -298,15 +298,15 @@
         }, 300)
       })
     },
-      toAdd() {
+    toAdd () {
-        this.modalTitle = "添加"
+      this.modalTitle = '添加'
       this.modal = true
 
       this.addModal = true
       this.editModal = false
     },
-      toEdit(index) {
+    toEdit (index) {
-        this.modalTitle = "编辑"
+      this.modalTitle = '编辑'
       let temp = this.dataList[index]
 
       this.addModal = false
@@ -327,37 +327,36 @@
         this.formItem.sort = temp.sort
       })
     },
-      submit(formItem) {
+    submit (formItem) {
       // 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("添加成功!")
+            this.$Message.success(isAdd ? '添加成功!' : '编辑成功!')
-              })
-            } else {//编辑
-              update(this.formItem).then(res => {
-                this.refresh()
-                this.getTreeSelectList()
-                this.getTreeList()
-                this.getDataList()
-                this.$Message.success("编辑成功!")
-              })
-            }
             this.cancel()
+            this.submitLoading = false
+          }).catch(() => {
+            // 失败保持弹窗打开，方便直接重试
+            this.submitLoading = false
+            this.$Message.error(isAdd ? '添加失败，请重试' : '编辑失败，请重试')
+          })
         }
       })
     },
-      cancel() {
+    cancel () {
       // Modal cancel
-        this.modal = false;
+      this.modal = false
-        this.refresh();
+      this.refresh()
     },
-      toDelete(index) {
+    toDelete (index) {
       let temp = this.dataList[index]
 
       let data = {
@@ -366,18 +365,18 @@
       remove(data).then(res => {
         this.refresh()
         this.getDataList()
-          this.$Message.success("删除成功!")
+        this.$Message.success('删除成功!')
       })
     },
-      refresh() {
+    refresh () {
       this.pageParam = {
         pageNum: 1,
         pageSize: 10
-        };
+      }
       this.search = {
         deptName: '',
-          parentId:this.search.parentId
+        parentId: this.search.parentId
-        };
+      }
       this.formItem = {
         id: '',
         parentId: '0',
@@ -385,82 +384,82 @@
         deptCode: '',
         level: 0,
         deptDesc: '',
-          sort: 0,
+        sort: 0
-        };
+      }
     },
-      changePage(index) {
+    changePage (index) {
       // 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
-        this.pageParam.pageNum = index;
+      this.pageParam.pageNum = index
-        this.getDataList();
+      this.getDataList()
     },
-      changePageSize(page) {
+    changePageSize (page) {
       // 切换分页条数
-        this.pageParam.pageNum = 1;
+      this.pageParam.pageNum = 1
-        this.pageParam.pageSize = page;
+      this.pageParam.pageSize = page
-        this.getDataList();
+      this.getDataList()
     },
-      renderContent(h, { root, node, data }) {
+    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) {
+      } else if (data.level === 2) {
-          icon = "ios-paper-plane";
+        icon = 'ios-paper-plane'
-        }else if (data.level === 3) {
+      } else if (data.level === 3) {
-          icon = "md-radio";
+        icon = 'md-radio'
-        }else {
+      } else {
-          icon = "md-radio-button-off";
+        icon = 'md-radio-button-off'
       }
       return h(
-          "span",
+        'span',
         {
           style: {
-              display: "inline-block",
+            display: 'inline-block',
-              cursor: "pointer"
+            cursor: 'pointer'
           },
           on: {
             click: () => {
-                data.checked = !data.checked;
+              data.checked = !data.checked
             }
           }
         },
         [
-            h("span", [
+          h('span', [
-              h("Icon", {
+            h('Icon', {
               props: {
                 type: icon,
-                  size: "16"
+                size: '16'
               },
               style: {
-                  "margin-right": "8px",
+                'margin-right': '8px',
-                  "margin-bottom": "3px"
+                'margin-bottom': '3px'
               }
             }),
-              h("span", { class: "ivu-tree-title" }, data.title)
+            h('span', { class: 'ivu-tree-title' }, data.title)
           ])
         ]
-        );
+      )
-      },
+    }
 
   },
-    created() {
+  created () {
     this.getTreeList()
     this.getTreeSelectList()
     this.getDataList()
   },
-    mounted() {
+  mounted () {
     this.calcHeight()
     window.addEventListener('resize', this.calcHeight)
   },
-    activated() {
+  activated () {
     // keep-alive 缓存组件重新显示时，容器高度可能已变化，需重算
     this.calcHeight()
   },
-    beforeDestroy() {
+  beforeDestroy () {
     window.removeEventListener('resize', this.calcHeight)
   }
-  }
+}
 </script>
 
 <style lang="less" scoped>

src/view/sys/sys-permission.vue

@@ -133,24 +133,24 @@
 </template>
 
 <script>
-  import {getTreeList, getTreeSelectList, getDataList, add, update, remove} from '@/api/sys/sys-permission'
+import { getTreeList, getTreeSelectList, getDataList, add, update, remove } from '@/api/sys/sys-permission'
-  import {objectUtil, utils, exportExcel} from "@/common/js/util"
+import { objectUtil } from '@/common/js/util'
-  import IconChoose from "@/components/my-components/icon-choose"
+import IconChoose from '@/components/my-components/icon-choose'
-  import Treeselect from '@riophae/vue-treeselect'
+import Treeselect from '@riophae/vue-treeselect'
-  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
-  export default {
+export default {
-    name: "sso-menu",
+  name: 'sso-menu',
   components: {
     IconChoose,
     Treeselect
   },
-    data() {
+  data () {
     return {
-        fixedHeader: true,// 高度自适应
+      fixedHeader: true, // 高度自适应
-        autoHeight: `${window.innerHeight} ` * 0.58,// 表格高度（随容器可用高度动态修正）
+      autoHeight: `${window.innerHeight} ` * 0.58, // 表格高度（随容器可用高度动态修正）
-        treeHeight: `${window.innerHeight} ` * 0.58,// 左侧树高度，对齐到右侧表格底部
+      treeHeight: `${window.innerHeight} ` * 0.58, // 左侧树高度，对齐到右侧表格底部
-        treeLoading: false,//树加载中
+      treeLoading: false, // 树加载中
       treeList: [],
       disabledTreeSelect: false,
       treeSelectList: [],
@@ -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,14 +199,14 @@
         },
         {
           title: '菜单编码',
-            key: 'permissionCode',
+          key: 'permissionCode'
         },
         {
           title: '菜单描述',
           key: 'permissionDesc'
-          },
+        }
       ],
-        pMenuList: [],          //父级菜单列表
+      pMenuList: [], // 父级菜单列表
       dataList: [],
       tableLoading: false,
       pageTotal: 0, // 总页数
@@ -232,7 +232,7 @@
         url: '',
         component: '',
         status: '1',
-          sort: 0,
+        sort: 0
       },
       ruleCustom: {
         parentId: [{
@@ -252,13 +252,13 @@
         }],
         component: [{
           required: true, message: '请输入组件地址', trigger: 'blur'
-          }],
+        }]
-        },
+      }
     }
   },
   methods: {
     // 依据内容区可用高度动态分配：表格自适应，左侧树底部与表格底部严格对齐
-      calcHeight() {
+    calcHeight () {
       const wrap = this.$el.closest('.content-wrapper')
       const option = this.$refs.optionBox
       const btn = this.$refs.btnBox
@@ -268,15 +268,15 @@
         return
       }
       const wrapStyle = window.getComputedStyle(wrap)
-        const avail = wrap.clientHeight
+      const avail = wrap.clientHeight -
-          - (parseFloat(wrapStyle.paddingTop) || 0)
+          (parseFloat(wrapStyle.paddingTop) || 0) -
-          - (parseFloat(wrapStyle.paddingBottom) || 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
+      const fixed = option.offsetHeight + btn.offsetHeight +
-          + page.offsetHeight + pageMarginTop + pageMarginBottom
+          page.offsetHeight + pageMarginTop + pageMarginBottom
       this.autoHeight = Math.max(200, avail - fixed)
       // 等表格按新高度重排后再量底边，避免拿到上一帧的位置
       this.$nextTick(() => {
@@ -289,9 +289,9 @@
         })
       })
     },
-      getTreeChoose() {
+    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,17 +299,17 @@
         this.getDataList()
       }
     },
-      getTreeList() {
+    getTreeList () {
       getTreeList().then(res => {
         this.treeList = res.data.data
       })
     },
-      getTreeSelectList() {
+    getTreeSelectList () {
       getTreeSelectList().then(res => {
         this.treeSelectList = res.data.data
       })
     },
-      getDataList() {
+    getDataList () {
       let temp = JSON.parse(JSON.stringify(this.pageParam))
       let data = objectUtil.trimJoin(temp, this.search)
       this.tableLoading = true
@@ -323,13 +323,13 @@
         }, 300)
       })
     },
-      toAdd() {
+    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
@@ -340,8 +340,8 @@
         }
       })
     },
-      toEdit(index) {
+    toEdit (index) {
-        this.modalTitle = "编辑"
+      this.modalTitle = '编辑'
       let temp = this.dataList[index]
 
       this.addModal = false
@@ -365,37 +365,36 @@
         this.formItem.sort = temp.sort
       })
     },
-      submit(formItem) {
+    submit (formItem) {
       // 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("添加成功!")
+            this.$Message.success(isAdd ? '添加成功!' : '编辑成功!')
-              })
-            } else {//编辑
-              update(this.formItem).then(res => {
-                this.refresh()
-                this.getTreeSelectList()
-                this.getTreeList()
-                this.getDataList()
-                this.$Message.success("编辑成功!")
-              })
-            }
             this.cancel()
+            this.submitLoading = false
+          }).catch(() => {
+            // 失败保持弹窗打开，方便直接重试
+            this.submitLoading = false
+            this.$Message.error(isAdd ? '添加失败，请重试' : '编辑失败，请重试')
+          })
         }
       })
     },
-      cancel() {
+    cancel () {
       // Modal cancel
-        this.modal = false;
+      this.modal = false
-        this.refresh();
+      this.refresh()
     },
-      toDelete(index) {
+    toDelete (index) {
       let temp = this.dataList[index]
 
       let data = {
@@ -406,18 +405,18 @@
         this.getTreeSelectList()
         this.getTreeList()
         this.getDataList()
-          this.$Message.success("删除成功!")
+        this.$Message.success('删除成功!')
       })
     },
-      refresh() {
+    refresh () {
       this.pageParam = {
         pageNum: 1,
         pageSize: 10
-        };
+      }
       this.search = {
         permissionName: '',
         parentId: this.search.parentId
-        };
+      }
       this.formItem = {
         id: '',
         parentId: '0',
@@ -428,70 +427,70 @@
         permissionDesc: '',
         url: '',
         component: '',
-          sort: 0,
+        sort: 0
-        };
+      }
     },
-      changePage(index) {
+    changePage (index) {
       // 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
-        this.pageParam.pageNum = index;
+      this.pageParam.pageNum = index
-        this.getDataList();
+      this.getDataList()
     },
-      changePageSize(page) {
+    changePageSize (page) {
       // 切换分页条数
-        this.pageParam.pageNum = 1;
+      this.pageParam.pageNum = 1
-        this.pageParam.pageSize = page;
+      this.pageParam.pageSize = page
-        this.getDataList();
+      this.getDataList()
     },
-      renderContent(h, {root, node, data}) {
+    renderContent (h, { root, node, data }) {
-        let icon = data.icon;
+      let icon = data.icon
       return h(
-          "span",
+        'span',
         {
           style: {
-              display: "inline-block",
+            display: 'inline-block',
-              cursor: "pointer"
+            cursor: 'pointer'
           },
           on: {
             click: () => {
-                data.checked = !data.checked;
+              data.checked = !data.checked
             }
           }
         },
         [
-            h("span", [
+          h('span', [
-              h("Icon", {
+            h('Icon', {
               props: {
                 type: icon,
-                  size: "16"
+                size: '16'
               },
               style: {
-                  "margin-right": "8px",
+                'margin-right': '8px',
-                  "margin-bottom": "3px"
+                'margin-bottom': '3px'
               }
             }),
-              h("span", {class: "ivu-tree-title"}, data.title)
+            h('span', { class: 'ivu-tree-title' }, data.title)
           ])
         ]
-        );
+      )
+    }
   },
-    },
+  created () {
-    created() {
     this.getTreeList()
     this.getTreeSelectList()
     this.getDataList()
   },
-    mounted() {
+  mounted () {
     this.calcHeight()
     window.addEventListener('resize', this.calcHeight)
   },
-    activated() {
+  activated () {
     // keep-alive 缓存组件重新显示时，容器高度可能已变化，需重算
     this.calcHeight()
   },
-    beforeDestroy() {
+  beforeDestroy () {
     window.removeEventListener('resize', this.calcHeight)
   }
-  }
+}
 </script>
 
 <style lang="less" scoped>

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('添加成功!')
+            this.$Message.success(isAdd ? '添加成功!' : '编辑成功!')
-            })
-          } else { // 编辑
-            update(this.formItem).then(res => {
-              this.refresh()
-              this.getDataList()
-              this.$Message.success('编辑成功!')
-            })
-          }
             this.cancel()
+            this.submitLoading = false
+          }).catch(() => {
+            // 失败保持弹窗打开，方便直接重试
+            this.submitLoading = false
+            this.$Message.error(isAdd ? '添加失败，请重试' : '编辑失败，请重试')
+          })
         }
       })
     },
@@ -404,7 +405,7 @@ export default {
         this.treeList = res.data.data
       })
     },
-    renderContent (h, {root, node, data}) {
+    renderContent (h, { root, node, data }) {
       // 初始化树的icon
       let icon = data.icon
       return h(
@@ -432,7 +433,7 @@ export default {
                 'margin-bottom': '3px'
               }
             }),
-            h('span', {class: 'ivu-tree-title'}, data.title)
+            h('span', { class: 'ivu-tree-title' }, data.title)
           ])
         ]
       )

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('添加成功!')
+            this.$Message.success(isAdd ? '添加成功!' : '编辑成功!')
-            })
-          } else { // 编辑
-            update(data).then(res => {
-              this.getDataList()
-              this.$Message.success('编辑成功!')
-            })
-          }
             this.cancel()
+            this.submitLoading = false
+          }).catch(() => {
+            // 失败保持弹窗打开，方便直接重试
+            this.submitLoading = false
+            this.$Message.error(isAdd ? '添加失败，请重试' : '编辑失败，请重试')
+          })
         }
       })
     },