代码优化

src/components/Crud/UD.operation.vue

 <template>
   <div>
     <el-button v-permission="permission.edit" size="mini" type="primary" icon="el-icon-edit" @click="crud.toEdit(data)" />
-    <el-popover v-model="pop" v-permission="permission.del" placement="top" width="180" trigger="manual">
+    <el-popover v-model="pop" v-permission="permission.del" placement="top" width="180" trigger="manual" @show="onPopoverShow" @hide="onPopoverHide">
       <p>确定删除本条数据吗？</p>
       <div style="text-align: right; margin: 0">
         <el-button size="mini" type="text" @click="doCancel">取消</el-button>
@@ -42,6 +42,17 @@ export default {
       if (data === this.data) {
         this.pop = false
       }
+    },
+    onPopoverShow() {
+      setTimeout(() => {
+        document.addEventListener('click', this.handleDocumentClick)
+      }, 0)
+    },
+    onPopoverHide() {
+      document.removeEventListener('click', this.handleDocumentClick)
+    },
+    handleDocumentClick(event) {
+      this.pop = false
     }
   }
 }

src/components/Crud/crud.js

@@ -69,6 +69,12 @@ function CRUD(options) {
         return this.add > CRUD.STATUS.NORMAL ? `新增${crud.title}` : this.edit > CRUD.STATUS.NORMAL ? `编辑${crud.title}` : crud.title
       }
     },
+    msg: {
+      submit: '提交成功',
+      add: '新增成功',
+      edit: '编辑成功',
+      del: '删除成功'
+    },
     page: {
       // 页码
       page: 0,
@@ -83,6 +89,21 @@ function CRUD(options) {
     downloadLoading: false
   }
   const methods = {
+    /**
+     * 通用的提示
+     */
+    submitSuccessNotify() {
+      crud.notify(crud.msg.submit, CRUD.NOTIFICATION_TYPE.SUCCESS)
+    },
+    addSuccessNotify() {
+      crud.notify(crud.msg.add, CRUD.NOTIFICATION_TYPE.SUCCESS)
+    },
+    editSuccessNotify() {
+      crud.notify(crud.msg.edit, CRUD.NOTIFICATION_TYPE.SUCCESS)
+    },
+    delSuccessNotify() {
+      crud.notify(crud.msg.del, CRUD.NOTIFICATION_TYPE.SUCCESS)
+    },
     // 搜索
     toQuery() {
       crud.page.page = 1
@@ -97,7 +118,7 @@ function CRUD(options) {
         crud.loading = true
         // 请求数据
         initData(crud.url, crud.getQueryParams()).then(data => {
-          crud.page.total = data.total
+          crud.page.total = data.totalElements
           crud.data = data.content
           crud.resetDataStatus()
           // time 毫秒后显示表格
@@ -218,10 +239,12 @@ function CRUD(options) {
       crud.crudMethod.add(crud.form).then(() => {
         crud.status.add = CRUD.STATUS.NORMAL
         crud.resetForm()
-        crud.notify('新增成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+        crud.addSuccessNotify()
         callVmHook(crud, CRUD.HOOK.afterSubmit)
         crud.toQuery()
-      }).catch(() => {})
+      }).catch(() => {
+        callVmHook(crud, CRUD.HOOK.afterAddError)
+      })
     },
     /**
      * 执行编辑
@@ -234,10 +257,12 @@ function CRUD(options) {
         crud.status.edit = CRUD.STATUS.NORMAL
         crud.getDataStatus(crud.form.id).edit = CRUD.STATUS.NORMAL
         crud.resetForm()
-        crud.notify('编辑成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+        crud.editSuccessNotify()
         callVmHook(crud, CRUD.HOOK.afterSubmit)
         crud.refresh()
-      }).catch(() => {})
+      }).catch(() => {
+        callVmHook(crud, CRUD.HOOK.afterEditError)
+      })
     },
     /**
      * 执行删除
@@ -252,7 +277,7 @@ function CRUD(options) {
       return crud.crudMethod.del(data.id).then(() => {
         dataStatus.delete = CRUD.STATUS.NORMAL
         crud.dleChangePage(1)
-        crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+        crud.delSuccessNotify()
         callVmHook(crud, CRUD.HOOK.afterDelete, data)
         crud.refresh()
       }).catch(() => {
@@ -638,7 +663,9 @@ CRUD.HOOK = {
   /** 提交 - 之前 */
   beforeSubmit: 'beforeCrudSubmitCU',
   /** 提交 - 之后 */
-  afterSubmit: 'afterCrudSubmitCU'
+  afterSubmit: 'afterCrudSubmitCU',
+  afterAddError: 'afterCrudAddError',
+  afterEditError: 'afterCrudEditError'
 }
 
 /**

src/views/system/dept/index.vue

@@ -80,6 +80,7 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import udOperation from '@crud/UD.operation'
+
 // crud交由presenter持有
 const defaultCrud = CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
 const defaultForm = { id: null, name: null, pid: 1, enabled: 'true' }
@@ -109,7 +110,7 @@ export default {
     }
   },
   methods: {
-    // 打开新增与编辑弹窗前做的操作
+    // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU](crud, form) {
       form.enabled = `${form.enabled}`
       // 获取所有部门