更换logo，用户管理优化完成

src/api/job.js

@@ -36,19 +36,4 @@ export function edit(data) {
   })
 }
 
-export function downloadJob(params) {
+export default { add, edit, del }
-  return request({
-    url: 'api/job/download',
-    method: 'get',
-    params,
-    responseType: 'blob'
-  })
-}
-
-export default {
-  add,
-  edit,
-  del,
-  getAllJob,
-  downloadJob
-}

src/api/user.js

@@ -8,15 +8,6 @@ export function add(data) {
   })
 }
 
-export function downloadUser(params) {
-  return request({
-    url: 'api/users/download',
-    method: 'get',
-    params,
-    responseType: 'blob'
-  })
-}
-
 export function del(id) {
   return request({
     url: 'api/users/' + id,
@@ -51,3 +42,6 @@ export function updateEmail(code, data) {
     data
   })
 }
+
+export default { add, edit, del }
+

src/assets/styles/variables.scss

@@ -19,7 +19,7 @@ $menuHover:#263445;
 $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
 
-$sideBarWidth: 200px;
+$sideBarWidth: 205px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/layout/components/Sidebar/Logo.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script>
+import Logo from '@/assets/images/logo.png'
 export default {
   name: 'SidebarLogo',
   props: {
@@ -24,8 +25,8 @@ export default {
   },
   data() {
     return {
-      title: 'EL-ADMIN 后台管理',
+      title: 'ELADMIN-后台管理',
-      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+      logo: Logo
     }
   }
 }
@@ -57,7 +58,7 @@ export default {
       width: 32px;
       height: 32px;
       vertical-align: middle;
-      margin-right: 12px;
+      margin-right: 6px;
     }
 
     & .sidebar-title {

src/mixins/crud.js

@@ -8,7 +8,7 @@ export default {
       // 表格数据
       data: [],
       // 排序规则，默认 id 降序， 支持多字段排序 ['id,desc', 'createTime,asc']
-      sort: ['id,desc', 'createTime,asc'],
+      sort: ['id,desc'],
       // 页码
       page: 0,
       // 每页数据条数

src/utils/validate.js

@@ -64,6 +64,11 @@ export function validEmail(email) {
   return reg.test(email)
 }
 
+export function isvalidPhone(phone) {
+  const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
+  return reg.test(phone)
+}
+
 /**
  * @param {string} str
  * @returns {Boolean}

src/views/system/user/center.vue

@@ -36,6 +36,7 @@
           </div>
         </el-card>
       </el-col>
+      <!-- 用户日志 -->
       <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
@@ -143,6 +144,7 @@ export default {
         duration: 2500
       })
     },
+    // 刷新日志
     refresh() {
       this.ico = 'el-icon-loading'
       this.init()

src/views/system/user/form.vue

@@ -1,218 +0,0 @@
-<template>
-  <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="isAdd ? '新增用户' : '编辑用户'" 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>
-      <el-form-item label="状态" prop="enabled">
-        <el-radio v-for="item in dicts" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
-      </el-form-item>
-      <el-form-item label="电话" prop="phone">
-        <el-input v-model.number="form.phone" />
-      </el-form-item>
-      <el-form-item label="邮箱" prop="email">
-        <el-input v-model="form.email" />
-      </el-form-item>
-      <el-form-item label="部门">
-        <treeselect v-model="deptId" :options="depts" style="width: 178px" placeholder="选择部门" @select="selectFun" />
-      </el-form-item>
-      <el-form-item label="岗位">
-        <el-select v-model="jobId" style="width: 178px" placeholder="请先选择部门">
-          <el-option
-            v-for="(item, index) in jobs"
-            :key="item.name + index"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item style="margin-bottom: 0px;" label="角色">
-        <el-select v-model="roleIds" style="width: 450px;" multiple placeholder="请选择">
-          <el-option
-            v-for="(item, index) in roles"
-            :key="item.name + index"
-            :disabled="level !== 1 && item.level <= level"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </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="doSubmit">确认</el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-
-import { add, edit } from '@/api/user'
-import { getDepts } from '@/api/dept'
-import { getAll, getLevel } from '@/api/role'
-import { getAllJob } from '@/api/job'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-export default {
-  components: { Treeselect },
-  props: {
-    isAdd: {
-      type: Boolean,
-      required: true
-    },
-    dicts: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    const validPhone = (rule, value, callback) => {
-      if (!value) {
-        callback(new Error('请输入电话号码'))
-      } else if (!this.isvalidPhone(value)) {
-        callback(new Error('请输入正确的11位手机号码'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      dialog: false, loading: false, form: { username: '', email: '', enabled: 'false', roles: [], job: { id: '' }, dept: { id: '' }, phone: null },
-      roleIds: [], roles: [], depts: [], deptId: null, jobId: null, jobs: [], level: 3,
-      rules: {
-        username: [
-          { required: true, message: '请输入用户名', trigger: 'blur' },
-          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
-        ],
-        email: [
-          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
-        ],
-        phone: [
-          { required: true, trigger: 'blur', validator: validPhone }
-        ],
-        enabled: [
-          { required: true, message: '状态不能为空', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.form.dept.id = this.deptId
-      this.form.job.id = this.jobId
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          if (this.deptId === null || this.deptId === undefined) {
-            this.$message({
-              message: '部门不能为空',
-              type: 'warning'
-            })
-          } else if (this.jobId === null) {
-            this.$message({
-              message: '岗位不能为空',
-              type: 'warning'
-            })
-          } else if (this.roleIds.length === 0) {
-            this.$message({
-              message: '角色不能为空',
-              type: 'warning'
-            })
-          } else {
-            this.loading = true
-            this.form.roles = []
-            const _this = this
-            this.roleIds.forEach(function(data, index) {
-              const role = { id: data }
-              _this.form.roles.push(role)
-            })
-            if (this.isAdd) {
-              this.doAdd()
-            } else this.doEdit()
-          }
-        } else {
-          return false
-        }
-      })
-    },
-    doAdd() {
-      add(this.form).then(res => {
-        this.resetForm()
-        this.$notify({
-          title: '添加成功',
-          message: '默认密码：123456',
-          type: 'success',
-          duration: 2500
-        })
-        this.loading = false
-        this.$parent.init()
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
-    },
-    doEdit() {
-      edit(this.form).then(res => {
-        this.resetForm()
-        this.$notify({
-          title: '修改成功',
-          type: 'success',
-          duration: 2500
-        })
-        this.loading = false
-        this.$parent.init()
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.deptId = null
-      this.jobId = null
-      this.roleIds = []
-      this.form = { username: '', email: '', enabled: 'false', roles: [], job: { id: '' }, dept: { id: '' }, phone: null }
-    },
-    getRoles() {
-      getAll().then(res => {
-        this.roles = res
-      }).catch(err => {
-        console.log(err.response.data.message)
-      })
-    },
-    getJobs(id) {
-      getAllJob(id).then(res => {
-        this.jobs = res.content
-      }).catch(err => {
-        console.log(err.response.data.message)
-      })
-    },
-    getDepts() {
-      getDepts({ enabled: true }).then(res => {
-        this.depts = res.content
-      })
-    },
-    isvalidPhone(str) {
-      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
-      return reg.test(str)
-    },
-    selectFun(node, instanceId) {
-      this.getJobs(node.id)
-    },
-    getRoleLevel() {
-      getLevel().then(res => {
-        this.level = res.level
-      }).catch(err => {
-        console.log(err.response.data.message)
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/system/user/index.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="app-container">
-    <!--form 组件-->
-    <eForm ref="form" :is-add="isAdd" :dicts="dict.user_status" />
     <el-row :gutter="20">
-      <!--部门数据-->
+      <!--侧边部门数据-->
       <el-col :xs="9" :sm="6" :md="4" :lg="4" :xl="4">
         <div class="head-container">
           <el-input v-model="deptName" clearable size="small" placeholder="输入部门名称搜索" prefix-icon="el-icon-search" class="filter-item" @input="getDeptDatas" />
         </div>
-        <el-tree :data="depts" :props="defaultProps" :expand-on-click-node="false" default-expand-all @node-click="handleNodeClick" />
+        <el-tree :data="deptDatas" :props="defaultProps" :expand-on-click-node="false" default-expand-all @node-click="handleNodeClick" />
       </el-col>
       <!--用户数据-->
       <el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20">
@@ -17,7 +15,7 @@
           <!-- 搜索 -->
           <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.date"
+            v-model="query.createTime"
             :default-time="['00:00:00','23:59:59']"
             type="daterange"
             range-separator=":"
@@ -32,27 +30,68 @@
           </el-select>
           <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
           <!-- 新增 -->
-          <div v-permission="['admin','user:add']" style="display: inline-block;margin: 0px 2px;">
           <el-button
             class="filter-item"
             size="mini"
             type="primary"
             icon="el-icon-plus"
-              @click="add"
+            @click="showAddFormDialog"
           >新增</el-button>
-          </div>
           <!-- 导出 -->
-          <div style="display: inline-block;">
           <el-button
             :loading="downloadLoading"
             size="mini"
             class="filter-item"
             type="warning"
             icon="el-icon-download"
-              @click="download"
+            @click="downloadMethod"
           >导出</el-button>
         </div>
+        <!--表单渲染-->
+        <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="hideFormDialog" :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>
+            <el-form-item label="状态" prop="enabled">
+              <el-radio v-for="item in dict.user_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
+            </el-form-item>
+            <el-form-item label="电话" prop="phone">
+              <el-input v-model.number="form.phone" />
+            </el-form-item>
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" />
+            </el-form-item>
+            <el-form-item label="部门" prop="dept.id">
+              <treeselect v-model="form.dept.id" :options="depts" style="width: 178px" placeholder="选择部门" @select="selectFun" />
+            </el-form-item>
+            <el-form-item label="岗位" prop="job.id">
+              <el-select v-model="form.job.id" style="width: 178px" placeholder="请先选择部门">
+                <el-option
+                  v-for="(item, index) in jobs"
+                  :key="item.name + index"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item style="margin-bottom: 0px;" label="角色" prop="roles">
+              <el-select v-model="form.roles" style="width: 450px;" multiple placeholder="请选择">
+                <el-option
+                  v-for="item in roles"
+                  :key="item.name"
+                  :disabled="level !== 1 && item.level <= level"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="text" @click="hideFormDialog">取消</el-button>
+            <el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
           </div>
+        </el-dialog>
         <!--表格渲染-->
         <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
           <el-table-column prop="username" label="用户名" />
@@ -80,7 +119,7 @@
           </el-table-column>
           <el-table-column v-if="checkPermission(['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="edit(scope.row)" />
+              <el-button v-permission="['admin','user:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
               <el-popover
                 :ref="scope.row.id"
                 v-permission="['admin','user:del']"
@@ -90,7 +129,7 @@
                 <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="subDelete(scope.row.id)">确定</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>
@@ -112,35 +151,65 @@
 </template>
 
 <script>
-import checkPermission from '@/utils/permission'
+import crud from '@/mixins/crud'
-import initData from '@/mixins/initData'
+import crudUser from '@/api/user'
-import { del, downloadUser, edit } from '@/api/user'
+import { isvalidPhone } from '@/utils/validate'
 import { getDepts } from '@/api/dept'
-import { parseTime, downloadFile } from '@/utils/index'
+import { getAll, getLevel } from '@/api/role'
-import eForm from './form'
+import { getAllJob } from '@/api/job'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 export default {
   name: 'User',
-  components: { eForm },
+  components: { Treeselect },
-  mixins: [initData],
+  mixins: [crud],
-  // 设置数据字典
+  // 数据字典
   dicts: ['user_status'],
   data() {
+    // 自定义验证
+    const validPhone = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入电话号码'))
+      } else if (!isvalidPhone(value)) {
+        callback(new Error('请输入正确的11位手机号码'))
+      } else {
+        callback()
+      }
+    }
     return {
-      height: document.documentElement.clientHeight - 180 + 'px;', isAdd: false,
+      crudMethod: {
-      delLoading: false, deptName: '', depts: [], deptId: null,
+        ...crudUser
-      defaultProps: {
-        children: 'children',
-        label: 'name'
       },
+      title: '用户',
+      height: document.documentElement.clientHeight - 180 + 'px;',
+      deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [],
+      defaultProps: { children: 'children', label: 'name' },
       enabledTypeOptions: [
         { key: 'true', display_name: '激活' },
         { key: 'false', display_name: '锁定' }
+      ],
+      form: { username: null, email: null, enabled: 'false', roles: [], job: { id: null }, dept: { id: null }, phone: null },
+      rules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, trigger: 'blur', validator: validPhone }
+        ],
+        enabled: [
+          { required: true, message: '状态不能为空', trigger: 'blur' }
         ]
       }
+    }
   },
   created() {
-    this.getDeptDatas()
     this.$nextTick(() => {
+      this.getDeptDatas()
       this.init()
     })
   },
@@ -151,103 +220,82 @@ export default {
     }
   },
   methods: {
-    parseTime,
-    checkPermission,
     beforeInit() {
       this.url = 'api/users'
-      const sort = 'id,desc'
-      const query = this.query
-      const blurry = query.blurry
-      const enabled = query.enabled
-      this.params = { page: this.page, size: this.size, sort: sort, deptId: this.deptId }
-      if (blurry) { this.params['blurry'] = blurry }
-      if (query.date) {
-        this.params['startTime'] = query.date[0]
-        this.params['endTime'] = query.date[1]
-      }
-      if (enabled !== '' && enabled !== null) { this.params['enabled'] = enabled }
       return true
     },
-    // 导出
+    // 打开新增弹窗前做的操作
-    download() {
+    beforeShowAddForm() {
-      this.beforeInit()
+      this.getDepts()
-      this.downloadLoading = true
+      this.getRoles()
-      downloadUser(this.params).then(result => {
+      this.getRoleLevel()
-        downloadFile(result, '用户列表', 'xlsx')
-        this.downloadLoading = false
-      }).catch(() => {
-        this.downloadLoading = false
-      })
     },
-    subDelete(id) {
+    // 打开编辑弹窗前做的操作
-      this.delLoading = true
+    beforeShowEditForm(data) {
-      del(id).then(res => {
+      this.getDepts()
-        this.delLoading = false
+      this.getRoles()
-        this.$refs[id].doClose()
+      this.getRoleLevel()
-        this.dleChangePage()
+      this.getJobs(this.form.dept.id)
-        this.init()
+      this.form.enabled = data.enabled.toString()
-        this.$notify({
+      const roles = []
-          title: '删除成功',
+      data.roles.forEach(function(role, index) {
-          type: 'success',
+        roles.push(role.id)
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        console.log(err.response.data.message)
       })
+      this.form.roles = roles
     },
+    // 提交前做的操作
+    beforeSubmitMethod() {
+      if (!this.form.dept.id) {
+        this.$message({
+          message: '部门不能为空',
+          type: 'warning'
+        })
+        return false
+      } else if (!this.form.job.id) {
+        this.$message({
+          message: '岗位不能为空',
+          type: 'warning'
+        })
+        return false
+      } else if (this.form.roles.length === 0) {
+        this.$message({
+          message: '角色不能为空',
+          type: 'warning'
+        })
+        return false
+      }
+      const roles = []
+      this.form.roles.forEach(function(data, index) {
+        const role = { id: data }
+        roles.push(role)
+      })
+      this.form.roles = roles
+      return true
+    },
+    // 获取左侧部门数据
     getDeptDatas() {
       const sort = 'id,desc'
       const params = { sort: sort }
       if (this.deptName) { params['name'] = this.deptName }
       getDepts(params).then(res => {
+        this.deptDatas = res.content
+      })
+    },
+    // 获取弹窗内部门数据
+    getDepts() {
+      getDepts({ enabled: true }).then(res => {
         this.depts = res.content
       })
     },
+    // 切换部门
     handleNodeClick(data) {
       if (data.pid === 0) {
-        this.deptId = null
+        this.query.deptId = null
       } else {
-        this.deptId = data.id
+        this.query.deptId = data.id
       }
       this.init()
     },
-    add() {
-      this.isAdd = true
-      this.$refs.form.getDepts()
-      this.$refs.form.getRoles()
-      this.$refs.form.getRoleLevel()
-      this.$refs.form.dialog = true
-    },
-    // 数据转换
-    formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => {
-        if (j === 'createTime' || j === 'lastPasswordResetTime') {
-          return parseTime(v[j])
-        } else if (j === 'enabled') {
-          return parseTime(v[j]) ? '启用' : '禁用'
-        } else {
-          return v[j]
-        }
-      }))
-    },
-    edit(data) {
-      this.isAdd = false
-      const _this = this.$refs.form
-      _this.getRoles()
-      _this.getDepts()
-      _this.getRoleLevel()
-      _this.roleIds = []
-      _this.form = { id: data.id, username: data.username, phone: data.phone, email: data.email, enabled: data.enabled.toString(), roles: [], dept: { id: data.dept.id }, job: { id: data.job.id }}
-      data.roles.forEach(function(data, index) {
-        _this.roleIds.push(data.id)
-      })
-      _this.deptId = data.dept.id
-      _this.jobId = data.job.id
-      _this.getJobs(_this.deptId)
-      _this.dialog = true
-    },
     // 改变状态
     changeEnabled(data, val) {
       this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
@@ -255,19 +303,36 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        edit(data).then(res => {
+        this.crudMethod.edit(data).then(res => {
-          this.$notify({
+          this.notify(this.dict.label.user_status[val] + '成功', 'success')
-            title: this.dict.label.user_status[val] + '成功',
+        }).catch(() => {
-            type: 'success',
-            duration: 2500
-          })
-        }).catch(err => {
           data.enabled = !data.enabled
-          console.log(err.response.data.message)
         })
       }).catch(() => {
         data.enabled = !data.enabled
       })
+    },
+    // 获取弹窗内角色数据
+    getRoles() {
+      getAll().then(res => {
+        this.roles = res
+      }).catch(() => {})
+    },
+    // 获取弹窗内岗位数据
+    getJobs(id) {
+      getAllJob(id).then(res => {
+        this.jobs = res.content
+      }).catch(() => {})
+    },
+    // 点击部门搜索对应的岗位
+    selectFun(node, instanceId) {
+      this.getJobs(node.id)
+    },
+    // 获取权限级别
+    getRoleLevel() {
+      getLevel().then(res => {
+        this.level = res.level
+      }).catch(() => {})
     }
   }
 }