代码优化

src/components/Crud/UD.operation.vue

@@ -1,7 +1,7 @@
 <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}`
       // 获取所有部门

src/views/system/user/index.vue

@@ -26,85 +26,51 @@
       <el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20">
         <!--工具栏-->
         <div class="head-container">
-          <!-- 搜索 -->
+          <div v-if="crud.props.searchToggle">
-          <el-input
+            <!-- 搜索 -->
-            v-model="query.blurry"
+            <el-input
-            clearable
+              v-model="query.blurry"
-            size="small"
+              clearable
-            placeholder="输入名称或者邮箱搜索"
+              size="small"
-            style="width: 200px;"
+              placeholder="输入名称或者邮箱搜索"
-            class="filter-item"
+              style="width: 200px;"
-            @keyup.enter.native="toQuery"
+              class="filter-item"
-          />
+              @keyup.enter.native="crud.toQuery"
-          <el-date-picker
-            v-model="query.createTime"
-            :default-time="['00:00:00','23:59:59']"
-            type="daterange"
-            range-separator=":"
-            size="small"
-            class="date-item"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          />
-          <el-select
-            v-model="query.enabled"
-            clearable
-            size="small"
-            placeholder="状态"
-            class="filter-item"
-            style="width: 90px"
-            @change="toQuery"
-          >
-            <el-option
-              v-for="item in enabledTypeOptions"
-              :key="item.key"
-              :label="item.display_name"
-              :value="item.key"
             />
-          </el-select>
+            <el-date-picker
-          <el-button
+              v-model="query.createTime"
-            class="filter-item"
+              :default-time="['00:00:00','23:59:59']"
-            size="mini"
+              type="daterange"
-            type="success"
+              range-separator=":"
-            icon="el-icon-search"
+              size="small"
-            @click="toQuery"
+              class="date-item"
-          >搜索</el-button>
+              value-format="yyyy-MM-dd HH:mm:ss"
-          <!-- 新增 -->
+              start-placeholder="开始日期"
-          <el-button
+              end-placeholder="结束日期"
-            class="filter-item"
+            />
-            size="mini"
+            <el-select
-            type="primary"
+              v-model="query.enabled"
-            icon="el-icon-plus"
+              clearable
-            @click="showAddFormDialog"
+              size="small"
-          >新增</el-button>
+              placeholder="状态"
-          <!-- 导出 -->
+              class="filter-item"
-          <el-button
+              style="width: 90px"
-            :loading="downloadLoading"
+              @change="crud.toQuery"
-            size="mini"
+            >
-            class="filter-item"
+              <el-option
-            type="warning"
+                v-for="item in enabledTypeOptions"
-            icon="el-icon-download"
+                :key="item.key"
-            @click="downloadMethod"
+                :label="item.display_name"
-          >导出</el-button>
+                :value="item.key"
+              />
+            </el-select>
+            <rrOperation :crud="crud" />
+          </div>
+          <crudOperation :permission="permission" />
         </div>
         <!--表单渲染-->
-        <el-dialog
+        <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="570px">
-          :visible.sync="dialog"
+          <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
-          :close-on-click-modal="false"
-          :before-close="cancel"
-          :title="getFormTitle()"
-          append-to-body
-          width="570px"
-        >
-          <el-form
-            ref="form"
-            :inline="true"
-            :model="form"
-            :rules="rules"
-            size="small"
-            label-width="66px"
-          >
             <el-form-item label="用户名" prop="username">
               <el-input v-model="form.username" />
             </el-form-item>
@@ -143,7 +109,7 @@
               </el-radio-group>
             </el-form-item>
             <el-form-item label="状态">
-              <el-radio-group v-model="form.enabled">
+              <el-radio-group v-model="form.enabled" :disabled="form.id === user.id">
                 <el-radio
                   v-for="item in dict.user_status"
                   :key="item.id"
@@ -171,101 +137,83 @@
             </el-form-item>
           </el-form>
           <div slot="footer" class="dialog-footer">
-            <el-button type="text" @click="cancel">取消</el-button>
+            <el-button type="text" @click="crud.cancelCU">取消</el-button>
-            <el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
+            <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
           </div>
         </el-dialog>
         <!--表格渲染-->
-        <el-table v-loading="loading" :data="data" style="width: 100%;">
+        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
-          <el-table-column :show-overflow-tooltip="true" prop="username" label="用户名" />
+          <el-table-column v-if="columns.visible('username')" :show-overflow-tooltip="true" prop="username" label="用户名" />
-          <el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称" />
+          <el-table-column v-if="columns.visible('nickName')" :show-overflow-tooltip="true" prop="nickName" label="昵称" />
-          <el-table-column prop="sex" label="性别" />
+          <el-table-column v-if="columns.visible('sex')" prop="sex" label="性别" />
-          <el-table-column :show-overflow-tooltip="true" prop="phone" width="120" label="电话" />
+          <el-table-column v-if="columns.visible('phone')" :show-overflow-tooltip="true" prop="phone" width="120" label="电话" />
-          <el-table-column :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" />
+          <el-table-column v-if="columns.visible('email')" :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" />
-          <el-table-column :show-overflow-tooltip="true" width="120" label="部门 / 岗位">
+          <el-table-column v-if="columns.visible('dept')" :show-overflow-tooltip="true" width="120" prop="dept" label="部门 / 岗位">
             <template slot-scope="scope">
               <div>{{ scope.row.dept.name }} / {{ scope.row.job.name }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="状态" align="center">
+          <el-table-column v-if="columns.visible('enabled')" label="状态" align="center" prop="enabled">
             <template slot-scope="scope">
               <el-switch
                 v-model="scope.row.enabled"
+                :disabled="user.id === scope.row.id"
                 active-color="#409EFF"
                 inactive-color="#F56C6C"
-                @change="changeEnabled(scope.row, scope.row.enabled,)"
+                @change="changeEnabled(scope.row, scope.row.enabled)"
               />
             </template>
           </el-table-column>
-          <el-table-column :show-overflow-tooltip="true" prop="createTime" width="150" label="创建日期">
+          <el-table-column v-if="columns.visible('createTime')" :show-overflow-tooltip="true" prop="createTime" width="150" label="创建日期">
             <template slot-scope="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
             </template>
           </el-table-column>
           <el-table-column
-            v-if="checkPermission(['admin','user:edit','user:del'])"
+            v-permission="['admin','user:edit','user:del']"
             label="操作"
             width="125"
             align="center"
             fixed="right"
           >
             <template slot-scope="scope">
-              <el-button
+              <udOperation
-                v-permission="['admin','user:edit']"
+                :data="scope.row"
-                size="mini"
+                :permission="permission"
-                type="primary"
-                icon="el-icon-edit"
-                @click="showEditFormDialog(scope.row)"
               />
-              <el-popover
-                :ref="scope.row.id"
-                v-permission="['admin','user:del']"
-                placement="top"
-                width="180"
-              >
-                <p>确定删除本条数据吗？</p>
-                <div style="text-align: right; margin: 0">
-                  <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-                  <el-button
-                    :loading="delLoading"
-                    type="primary"
-                    size="mini"
-                    @click="delMethod(scope.row.id)"
-                  >确定</el-button>
-                </div>
-                <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
-              </el-popover>
             </template>
           </el-table-column>
         </el-table>
         <!--分页组件-->
-        <el-pagination
+        <pagination />
-          :total="total"
-          :current-page="page + 1"
-          style="margin-top: 8px;"
-          layout="total, prev, pager, next, sizes"
-          @size-change="sizeChange"
-          @current-change="pageChange"
-        />
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import crud from '@/mixins/crud'
 import crudUser from '@/api/system/user'
 import { isvalidPhone } from '@/utils/validate'
 import { getDepts } from '@/api/system/dept'
 import { getAll, getLevel } from '@/api/system/role'
 import { getAllJob } from '@/api/system/job'
+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'
+import pagination from '@crud/Pagination'
 import Treeselect from '@riophae/vue-treeselect'
+import { mapGetters } from 'vuex'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
 let userRoles = []
+// crud交由presenter持有
+const defaultCrud = CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
+const defaultForm = { username: null, nickName: null, sex: '男', email: null, enabled: 'false', roles: [], job: { id: null }, dept: { id: null }, phone: null }
 export default {
   name: 'User',
-  components: { Treeselect },
+  components: { Treeselect, crudOperation, rrOperation, udOperation, pagination },
-  mixins: [crud],
+  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
   // 数据字典
   dicts: ['user_status'],
   data() {
@@ -280,18 +228,18 @@ export default {
       }
     }
     return {
-      crudMethod: {
-        ...crudUser
-      },
-      title: '用户',
       height: document.documentElement.clientHeight - 180 + 'px;',
       deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [],
       defaultProps: { children: 'children', label: 'name' },
+      permission: {
+        add: ['admin', 'user:add'],
+        edit: ['admin', 'user:edit'],
+        del: ['admin', 'user:del']
+      },
       enabledTypeOptions: [
         { key: 'true', display_name: '激活' },
         { key: 'false', display_name: '锁定' }
       ],
-      form: { username: null, nickName: null, sex: '男', email: null, enabled: 'false', roles: [], job: { id: null }, dept: { id: null }, phone: null },
       rules: {
         username: [
           { required: true, message: '请输入用户名', trigger: 'blur' },
@@ -311,10 +259,16 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters([
+      'user'
+    ])
+  },
   created() {
     this.$nextTick(() => {
       this.getDeptDatas()
-      this.init()
+      this.crud.toQuery()
+      this.crud.msg.add = '新增成功，默认密码：123456'
     })
   },
   mounted: function() {
@@ -331,13 +285,19 @@ export default {
         userRoles.push(role)
       })
     },
-    afterAddErrorMethod() {
+    [CRUD.HOOK.afterAddError](crud) {
+      this.afterErrorMethod(crud)
+    },
+    [CRUD.HOOK.afterEditError](crud) {
+      this.afterErrorMethod(crud)
+    },
+    afterErrorMethod(crud) {
       // 恢复select
       const initRoles = []
       userRoles.forEach(function(role, index) {
         initRoles.push(role.id)
       })
-      this.form.roles = initRoles
+      crud.form.roles = initRoles
     },
     deleteTag(value) {
       userRoles.forEach(function(data, index) {
@@ -350,51 +310,48 @@ export default {
       this.url = 'api/users'
       return true
     },
-    // 打开新增弹窗前做的操作
+    // 新增与编辑前做的操作
-    beforeShowAddForm() {
+    [CRUD.HOOK.afterToCU](crud, form) {
       this.getDepts()
       this.getRoles()
       this.getRoleLevel()
-    },
+      form.enabled = form.enabled.toString()
-    // 打开编辑弹窗前做的操作
-    beforeShowEditForm(data) {
       userRoles = []
-      this.getDepts()
-      this.getRoles()
-      this.getRoleLevel()
-      this.getJobs(this.form.dept.id)
-      this.form.enabled = data.enabled.toString()
       const roles = []
-      data.roles.forEach(function(role, index) {
+      form.roles.forEach(function(role, index) {
         roles.push(role.id)
         // 初始化编辑时候的角色
         const rol = { id: role.id }
         userRoles.push(rol)
       })
-      this.form.roles = roles
+      form.roles = roles
+    },
+    // 打开编辑弹窗前做的操作
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      this.getJobs(this.form.dept.id)
     },
     // 提交前做的操作
-    beforeSubmitMethod() {
+    [CRUD.HOOK.afterValidateCU](crud) {
-      if (!this.form.dept.id) {
+      if (!crud.form.dept.id) {
         this.$message({
           message: '部门不能为空',
           type: 'warning'
         })
         return false
-      } else if (!this.form.job.id) {
+      } else if (!crud.form.job.id) {
         this.$message({
           message: '岗位不能为空',
           type: 'warning'
         })
         return false
-      } else if (this.form.roles.length === 0) {
+      } else if (this.roles.length === 0) {
         this.$message({
           message: '角色不能为空',
           type: 'warning'
         })
         return false
       }
-      this.form.roles = userRoles
+      crud.form.roles = userRoles
       return true
     },
     // 获取左侧部门数据
@@ -419,7 +376,7 @@ export default {
       } else {
         this.query.deptId = data.id
       }
-      this.init()
+      this.crud.toQuery()
     },
     // 改变状态
     changeEnabled(data, val) {
@@ -428,8 +385,8 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.crudMethod.edit(data).then(res => {
+        crudUser.edit(data).then(res => {
-          this.notify(this.dict.label.user_status[val] + '成功', 'success')
+          this.crud.notify(this.dict.label.user_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
         }).catch(() => {
           data.enabled = !data.enabled
         })
@@ -452,19 +409,13 @@ export default {
     // 点击部门搜索对应的岗位
     selectFun(node, instanceId) {
       this.getJobs(node.id)
+      this.form.job.id = null
     },
     // 获取权限级别
     getRoleLevel() {
       getLevel().then(res => {
         this.level = res.level
       }).catch(() => { })
-    },
-    addSuccessNotify() {
-      this.$notify({
-        title: '新增成功，默认密码：123456',
-        type: 'success',
-        duration: 2500
-      })
     }
   }
 }