代码优化

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">
-          <!-- 搜索 -->
-          <el-input
-            v-model="query.blurry"
-            clearable
-            size="small"
-            placeholder="输入名称或者邮箱搜索"
-            style="width: 200px;"
-            class="filter-item"
-            @keyup.enter.native="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"
+          <div v-if="crud.props.searchToggle">
+            <!-- 搜索 -->
+            <el-input
+              v-model="query.blurry"
+              clearable
+              size="small"
+              placeholder="输入名称或者邮箱搜索"
+              style="width: 200px;"
+              class="filter-item"
+              @keyup.enter.native="crud.toQuery"
             />
-          </el-select>
-          <el-button
-            class="filter-item"
-            size="mini"
-            type="success"
-            icon="el-icon-search"
-            @click="toQuery"
-          >搜索</el-button>
-          <!-- 新增 -->
-          <el-button
-            class="filter-item"
-            size="mini"
-            type="primary"
-            icon="el-icon-plus"
-            @click="showAddFormDialog"
-          >新增</el-button>
-          <!-- 导出 -->
-          <el-button
-            :loading="downloadLoading"
-            size="mini"
-            class="filter-item"
-            type="warning"
-            icon="el-icon-download"
-            @click="downloadMethod"
-          >导出</el-button>
+            <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="crud.toQuery"
+            >
+              <el-option
+                v-for="item in enabledTypeOptions"
+                :key="item.key"
+                :label="item.display_name"
+                :value="item.key"
+              />
+            </el-select>
+            <rrOperation :crud="crud" />
+          </div>
+          <crudOperation :permission="permission" />
         </div>
         <!--表单渲染-->
-        <el-dialog
-          :visible.sync="dialog"
-          :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-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">
+          <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 :loading="loading" type="primary" @click="submitMethod">确认</el-button>
+            <el-button type="text" @click="crud.cancelCU">取消</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-column :show-overflow-tooltip="true" prop="username" label="用户名" />
-          <el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称" />
-          <el-table-column prop="sex" label="性别" />
-          <el-table-column :show-overflow-tooltip="true" prop="phone" width="120" label="电话" />
-          <el-table-column :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" />
-          <el-table-column :show-overflow-tooltip="true" width="120" label="部门 / 岗位">
+        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+          <el-table-column v-if="columns.visible('username')" :show-overflow-tooltip="true" prop="username" label="用户名" />
+          <el-table-column v-if="columns.visible('nickName')" :show-overflow-tooltip="true" prop="nickName" label="昵称" />
+          <el-table-column v-if="columns.visible('sex')" prop="sex" label="性别" />
+          <el-table-column v-if="columns.visible('phone')" :show-overflow-tooltip="true" prop="phone" width="120" label="电话" />
+          <el-table-column v-if="columns.visible('email')" :show-overflow-tooltip="true" width="135" prop="email" 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
-                v-permission="['admin','user:edit']"
-                size="mini"
-                type="primary"
-                icon="el-icon-edit"
-                @click="showEditFormDialog(scope.row)"
+              <udOperation
+                :data="scope.row"
+                :permission="permission"
               />
-              <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
-          :total="total"
-          :current-page="page + 1"
-          style="margin-top: 8px;"
-          layout="total, prev, pager, next, sizes"
-          @size-change="sizeChange"
-          @current-change="pageChange"
-        />
+        <pagination />
       </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 },
-  mixins: [crud],
+  components: { Treeselect, crudOperation, rrOperation, udOperation, pagination },
+  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()
-    },
-    // 打开编辑弹窗前做的操作
-    beforeShowEditForm(data) {
+      form.enabled = form.enabled.toString()
       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() {
-      if (!this.form.dept.id) {
+    [CRUD.HOOK.afterValidateCU](crud) {
+      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 => {
-          this.notify(this.dict.label.user_status[val] + '成功', 'success')
+        crudUser.edit(data).then(res => {
+          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
-      })
     }
   }
 }