• SaaS系统用户权限设计

    SaaS系统用户权限设计

    学习目标：

    理解RBAC模型的基本概念及设计思路

    了解SAAS-HRM中权限控制的需求及表结构分析完成组织机构的基本CRUD操作

    完成用户管理的基本CRUD操作完成角色管理的基本CRUD操作

    组织机构管理

    需求分析

    需求分析

    实现企业组织结构管理，实现部门的基本CRUD操作

    数据库表设计

    1. CREATE TABLE `co_department` (
    2.  `id` varchar(40) NOT NULL,
    3. `company_id` varchar(255) NOT NULL COMMENT '企业ID',
    4. `parent_id` varchar(255) DEFAULT NULL COMMENT '父级部门ID',
    5. `name` varchar(255) NOT NULL COMMENT '部门名称',
    6. `code` varchar(255) NOT NULL COMMENT '部门编码',
    7. `category` varchar(255) DEFAULT NULL COMMENT '部门类别',
    8. `manager_id` varchar(255) DEFAULT NULL COMMENT '负责人ID',
    9. `city` varchar(255) DEFAULT NULL COMMENT '城市',
    10. `introduce` text COMMENT '介绍',
    11. `create_time` datetime NOT NULL COMMENT '创建时间',
    12. `manager` varchar(40) DEFAULT NULL COMMENT '部门负责人',
    13.  PRIMARY KEY (`id`)
    14. ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4

    微服务实现

    抽取公共代码

    （1） 在公共controller

    ihrm_commoncom.模块下的 ihrm.common.controller 包下添加公共controller

    1. package com.ihrm.common.controller;
    2. import org.springframework.web.bind.annotation.ModelAttribute;
    3. import javax.servlet.http.HttpServletRequest;
    4. import javax.servlet.http.HttpServletResponse;
    5. /**
    6. * 公共controller
    7. *     获取request，response
    8. *     获取企业id，获取企业名称
    9. */
    10. public class BaseController {
    11.     protected HttpServletRequest request;
    12.     protected HttpServletResponse response;
    13.     @ModelAttribute
    14.     public void setReqAndResp(HttpServletRequest request, HttpServletResponse response) 
    15. {
    16.         this.request = request;
    17.         this.response = response;
    18.    }
    19.     //企业id，（暂时使用1,以后会动态获取）
    20.     public String parseCompanyId() {
    21.         return "1";
    22.    }
    23.     public String parseCompanyName() {
    24.         return "江苏传智播客教育股份有限公司";
    25.    }
    26. }

    骚戴理解：@ModelAttribute是Spring MVC中的一个注释，它的作用是将HTTP请求参数绑定到指定的ModelAttribute对象并添加到ModelAndView中。 通俗地讲，它可以在请求处理程序方法之前预处理模型属性，以便在请求处理程序方法中使用。在Spring MVC中，当从浏览器提交表单时，所有表单字段的名称和值都被收集到一个名为“请求参数”的数据结构中。 @ModelAttribute注释可以将此请求参数映射到Java对象的属性中。

    （2） 公共service

    ihrm_commoncom.模块下的 ihrm.common.service 包下添加公共BaseService

    1. public class BaseService<T> {
    2.     protected Specification<T> getSpecification(String companyId) {
    3.         return new Specification<T>() {
    4.             @Override
    5.             public Predicate toPredicate(Root<T> root, CriteriaQuery<?> criteriaQuery, CriteriaBuilder cb) {
    6.                 return cb.equal(root.get("companyId").as(String.class),companyId);
    7.            }
    8.        };
    9.    }
    10. }

    骚戴理解:在SpringData里面提供的findAll方法如果是没有任何参数就是获取所有的数据，如果需要查询所有符合条件的数据，那么将就需要传入一个参数Specification，Specification参数其实就是条件 ，这里的getSpecification方法是用来创建这个条件的，这里是抽出来了，这个条件的意思是查询companyId这个公司id下的所有部门（组织架构）

    criteriabuilder.equal(root.get("companyid").as(string.class), companyid)中的两个companyid指的是不同的变量。

    • 第一个companyid：表示root对象所代表的实体类中的属性名，该属性用于和后面传递进来的companyid进行比较。
    • 第二个companyid：表示方法参数中传递进来的某个值，用于与实体的companyid属性进行比较。

    简而言之，这个代码片段的作用是使用criteriabuilder构造一个查询条件，即根据传入的companyid值筛选出实体类中属性名为companyid的值等于该值的记录。

    public predicate topredicate(root root, criteriaquery criteriaquery, criteriabuilder cb) 是一个接口方法，用于创建 criteria api 中的查询谓语（predicate），它接收三个参数：

    • root root：代表查询的根节点，可以从中获取实体类的属性。
    • criteriaquery criteriaquery：代表将被执行的查询对象。
    • criteriabuilder cb：代表 criteria api 的工厂类，用于创建各种查询条件。

    该方法会返回一个 predicate 类型的查询条件，表示要在给定的查询中使用的过滤器或限制条件。predicate 是 criteria api 中与 boolean 表达式相关的基础接口，用于构造 where 子句中的条件表达式。

    这个方法是通用的，可以在不同的场景下使用。例如，在 spring data jpa 中，我们可以使用它来创建基于查询方法名的动态查询。具体而言，我们可以定义一个接口方法并使用 @query 注解，以便将该方法与特定的 jpql 查询一起使用。然后，我们可以在该方法中编写自定义查询逻辑，并使用 topredicate() 方法创建基于标准的查询谓词。

    （3）公共DeptListResult

    1. package com.ihrm.common.response;
    2.  
    3. import com.ihrm.domain.company.Company;
    4. import com.ihrm.domain.company.Department;
    5. import lombok.Getter;
    6. import lombok.NoArgsConstructor;
    7. import lombok.Setter;
    8. import java.util.List;
    9.  
    10. @Getter
    11. @Setter
    12. @NoArgsConstructor
    13. public class DeptListResult {
    14.     private String companyId;
    15.     private String companyName;
    16.     private String companyManage;
    17.     private List depts;
    18.  
    19.     public DeptListResult(Company company,List list) {
    20.         this.companyId = company.getId();
    21.         this.companyName = company.getName();
    22.         this.companyManage = company.getLegalRepresentative();
    23.         this.depts = list;
    24.     }
    25.  
    26. }

    骚戴理解：DeptListResult这个类的作用就是封装前端需要的企业下所有组织架构（部门）信息，因为前端展示的时候不但要一个企业下所有的部门列表信息，还要企业的相关信息，所以这里就封装成了DeptListResult类

    1.     /**
    2.      * 组织架构列表
    3.      */
    4.     @RequestMapping(value = "/departments", method = RequestMethod.GET)
    5.     public Result findAll() throws Exception {
    6.         Company company = companyService.findById(parseCompanyId());
    7.         List<Department> list = departmentService.findAll(parseCompanyId());
    8.         return  new Result(ResultCode.SUCCESS,new DeptListResult(company,list));
    9.    }

    实现基本CRUD操作

    （1）实体类

    在com.ihrm.domain.company包下创建Department实体类

    1. package com.ihrm.domain.company;
    2. import lombok.AllArgsConstructor;
    3. import lombok.Data;
    4. import lombok.NoArgsConstructor;
    5. import javax.persistence.Entity;
    6. import javax.persistence.Id;
    7. import javax.persistence.Table;
    8. import javax.persistence.Transient;
    9. import java.io.Serializable;
    10. import java.util.Date;
    11. import java.util.List;
    12. /**
    13. * (Department)实体类
    14. */
    15. @Entity
    16. @Table(name = "co_department")
    17. @Data
    18. @AllArgsConstructor
    19. @NoArgsConstructor
    20. public class Department implements Serializable {
    21.     private static final long serialVersionUID = -9084332495284489553L;
    22.     //ID
    23.     @Id
    24.     private String id;
    25.     /**
    26.      * 父级ID
    27.      */
    28.     private String parentId;
    29.     /**
    30.      * 企业ID
    31.      */
    32.     private String companyId;
    33.     /**
    34.      * 部门名称
    35.      */
    36.     private String name;
    37.     /**
    38.      * 部门编码，同级部门不可重复
    39.      */
    40.     private String code;
    41.     /**
    42.      * 负责人ID
    43.      */
    44.     private String managerId;
    45.     /**
    46.  * 负责人名称
    47.  */
    48.     private String manager;
    49.     /**
    50.      * 介绍
    51.      */
    52.     private String introduce;
    53.     /**
    54.      * 创建时间
    55.      */
    56.     private Date createTime;
    57. }

    （2）持久化层

    在 com.ihrm.company.dao 包下创建DepartmentDao

    1. package com.ihrm.company.dao;
    2. import com.ihrm.domain.company.Department;
    3. import org.springframework.data.jpa.repository.JpaRepository;
    4. import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
    5. /**
    6. * 部门操作持久层
    7. */
    8. public interface DepartmentDao extends JpaRepository<Department, String>, 
    9. JpaSpecificationExecutor<Department> {
    10. }

    （3）业务层

    在 com.ihrm.company.service 包下创建DepartmentService

    1. package com.ihrm.company.service;
    2. import com.ihrm.common.entity.ResultCode;
    3. import com.ihrm.common.exception.CommonException;
    4. import com.ihrm.common.service.BaseService;
    5. import com.ihrm.common.utils.IdWorker;
    6. import com.ihrm.company.dao.DepartmentDao;
    7. import com.ihrm.domain.company.Department;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.data.jpa.domain.Specification;
    10. import org.springframework.stereotype.Service;
    11. import javax.persistence.criteria.CriteriaBuilder;
    12. import javax.persistence.criteria.CriteriaQuery;
    13. import javax.persistence.criteria.Predicate;
    14. import javax.persistence.criteria.Root;
    15. import java.util.Date;
    16. import java.util.List;
    17. /**
    18. * 部门操作业务逻辑层
    19. */
    20. @Service
    21. public class DepartmentService extends BaseService {
    22.     @Autowired
    23.     private IdWorker idWorker;
    24.     @Autowired
    25.     private DepartmentDao departmentDao;
    26.     /**
    27.      * 添加部门
    28.      */
    29.     public void save(Department department) {
    30.         //填充其他参数
    31.         department.setId(idWorker.nextId() + "");
    32.         department.setCreateTime(new Date());
    33.         departmentDao.save(department);
    34.    }
    35.     /**
    36.      * 更新部门信息
    37.      */
    38.     public void update(Department department) {
    39.         Department sourceDepartment = departmentDao.findById(department.getId()).get();
    40.         sourceDepartment.setName(department.getName());
    41.         sourceDepartment.setPid(department.getPid());
    42.         sourceDepartment.setManagerId(department.getManagerId());
    43.         sourceDepartment.setIntroduce(department.getIntroduce());
    44.         sourceDepartment.setManager(department.getManager());
    45.         departmentDao.save(sourceDepartment);
    46.    }
    47.     /**
    48.      * 根据ID获取部门信息
    49.      *
    50.      * @param id 部门ID
    51.      * @return 部门信息
    52.      */
    53.     public Department findById(String id) {
    54.         return departmentDao.findById(id).get();
    55.    }
    56.     /**
    57.      * 删除部门
    58.      *
    59.      * @param id 部门ID
    60.      */
    61.     public void delete(String id) {
    62.         departmentDao.deleteById(id);
    63.    }
    64.     /**
    65.      * 获取部门列表
    66.      */
    67.     public List<Department> findAll(String companyId) {
    68.         return departmentDao.findAll(getSpecification(companyId));
    69.    }
    70. }

    骚戴理解：以前用mybatis的时候写的修改都是直接把新的对象穿给dao层，在dao层动态更新（动态SQL便签），这里由于用的是SpringData的API，看下面的接口可以发现这个框架并没有提供update方法，所以这里的修改都是通过save新增方法来实现的

    还要注意findById方法是有一个.get()后缀的，例如 departmentDao.findById(id).get()，容易忘/漏

    getSpecification方法是创建条件谓语，这个方法是来自于父类BaseService的方法

    （4）控制层

    在 ihrm.company.controller 创建控制器类DepartmentController

    1. package com.ihrm.company.controller;
    2. import com.ihrm.common.controller.BaseController;
    3. import com.ihrm.common.entity.Result;
    4. import com.ihrm.common.entity.ResultCode;
    5. import com.ihrm.company.service.CompanyService;
    6. import com.ihrm.company.service.DepartmentService;
    7. import com.ihrm.domain.company.Company;
    8. import com.ihrm.domain.company.Department;
    9. import com.ihrm.domain.company.response.DeptListResult;
    10. import org.springframework.beans.factory.annotation.Autowired;
    11. import org.springframework.util.StringUtils;
    12. import org.springframework.web.bind.annotation.*;
    13. import java.util.*;
    14. import java.util.stream.Collectors;
    15. /**
    16. * 控制器层
    17. */
    18. @CrossOrigin
    19. @RestController
    20. @RequestMapping("/company")
    21. public class DepartmentController extends BaseController{
    22.     @Autowired
    23.     private DepartmentService departmentService;
    24.     @Autowired
    25.     private CompanyService companyService;
    26.     /**
    27.      * 添加部门
    28.      */
    29.     @RequestMapping(value = "/departments", method = RequestMethod.POST)
    30.     public Result add(@RequestBody Department department) throws Exception {
    31.         department.setCompanyId(parseCompanyId());
    32.         departmentService.save(department);
    33.         return Result.SUCCESS();
    34.    }
    35.     /**
    36.      * 修改部门信息
    37.      */
    38.     @RequestMapping(value = "/departments/{id}", method = RequestMethod.PUT)
    39.     public Result update(@PathVariable(name = "id") String id, @RequestBody Department
    40. department) throws Exception {
    41.         department.setCompanyId(parseCompanyId());
    42.         department.setId(id);
    43.         departmentService.update(department);
    44.         return Result.SUCCESS();
    45.    }
    46.     /**
    47.      * 删除部门
    48.      */
    49.     @RequestMapping(value = "/departments/{id}", method = RequestMethod.DELETE)
    50.     public Result delete(@PathVariable(name = "id") String id) throws Exception {
    51.         departmentService.delete(id);
    52.         return Result.SUCCESS();
    53.    }
    54.     /**
    55.      * 根据id查询
    56.      */
    57.     @RequestMapping(value = "/departments/{id}", method = RequestMethod.GET)
    58.     public Result findById(@PathVariable(name = "id") String id) throws Exception {
    59.         Department department = departmentService.findById(id);
    60.         return new Result(ResultCode.SUCCESS,department);
    61.    }
    62.     /**
    63.      * 组织架构列表
    64.      */
    65.     @RequestMapping(value = "/departments", method = RequestMethod.GET)
    66.     public Result findAll() throws Exception {
    67.         Company company = companyService.findById(parseCompanyId());
    68.         List<Department> list = departmentService.findAll(parseCompanyId());
    69.         return  new Result(ResultCode.SUCCESS,new DeptListResult(company,list));
    70.    }
    71. }

    骚戴理解：控制器调用的parseCompanyId方法和parseCompanyName方法都是来自父类BaseController中

    前端实现

    创建模块

    • 使用命令行创建module-departments模块并引入到工程中
    • 在src/main.js中注册模块
    1. import departments from '@/module-departments/' // 组织机构管理
    2. Vue.use(departments, store)
    • 在/module-departments/router/index.js配置路由
    1. import Layout from '@/module-dashboard/pages/layout'
    2. const _import = require('@/router/import_' + process.env.NODE_ENV)
    3. export default [
    4.  {
    5.     root: true,
    6.     path: '/departments',
    7.     component: Layout,
    8.     redirect: 'noredirect',
    9.     name: 'departments',
    10.     meta: {
    11.       title: '组织架构管理',
    12.       icon: 'architecture'
    13.    },
    14.     children: [
    15.      {
    16.         path: 'index',
    17.         component: _import('departments/pages/index'),
    18.         name: 'organizations-index',
    19.         meta: {title: '组织架构', icon: 'architecture', noCache: true}
    20.      }
    21.    ]
    22.  }
    23. ]

    配置请求API

    在/src/api/base/创建departments.js作为组织机构管理的API公共接口方法

    1. import {createAPI} from '@/utils/request'
    2.  
    3. //查询部门列表
    4. export const list = data => createAPI('/company/department', 'get', data)
    5. //保存部门
    6. //data  {id：“”，name：“”}
    7. export const save = data => createAPI('/company/department', 'post', data)
    8. //根据id查询部门 {id：“”}
    9. export const find = data => createAPI(`/company/department/${data.id}`, 'get', data)
    10. //根据id删除部门 {id:""}
    11. export const deleteById = data => createAPI(`/company/department/${data.id}`, 'delete', data)
    12. //根据id更新部门 {id:"",name:"",code:""}
    13. export const update = data => createAPI(`/company/department/${data.id}`, 'put', data)
    14. //保存或更新的方法
    15. export const saveOrupdate = data => {return data.id?update(data):save(data)}
    16.

    骚戴理解： {return data.id?update(data):add(data)}的意思是判断data里面有没有id，如果有的话就调update方法，没有就调用add方法

    构造树形列表

    （1）构造页面样式

    1. <template>
    2.   <div class="dashboard-container">
    3.     <div class="app-container">
    4.       <el-card shadow="never">
    5.             <div class='organization-index'>
    6.               <div class='organization-index-top'>
    7.                 <div class='main-top-title'>
    8.                   <el-tabs v-model="activeName">
    9.                     <el-tab-pane label="组织结构" name="first"></el-tab-pane>
    10.                     <div class="el-tabs-report">
    11.                       <a class="el-button el-button--primary el-button--mini" title="导出" >导入</a>
    12.                       <a class="el-button el-button--primary el-button--mini" title="导出" >导出</a>
    13.                     </div>
    14.                   </el-tabs>
    15.                 </div>
    16.               </div>
    17.               <div style="overflow: scroll;white-space:nowrap"  class="treBox">
    18.                 <div class="treeCon clearfix">
    19.                     <span>
    20.                       <i class="fa fa-university" aria-hidden="true"></i>
    21.                       <span ><strong>{{departData.companyName}}</strong></span>
    22.                     </span>
    23.                     <div class="fr">
    24.                       <span class="treeRinfo">
    25.                         <div class="treeRinfo">
    26.                           <span>{{departData.companyManage}}</span>
    27.                           <span>在职  <em class="colGreen" title="在职人数">---</em>&nbsp;&nbsp;(<em class="colGreen" title="正式员工">---</em>&nbsp;/&nbsp;<em class="colRed" title="非正式员工">---</em>)</span>
    28.                         </div>
    29.                         <div class="treeRinfo">
    30.                           <el-dropdown class="item">
    31.                             <span class="el-dropdown-link">
    32.                               操作<i class="el-icon-arrow-down el-icon--right"></i>
    33.                             </span>
    34.                             <el-dropdown-menu slot="dropdown">
    35.                                 <el-dropdown-item>
    36.                                   <el-button type="text" @click="handlAdd('')">添加子部门</el-button>
    37.                                 </el-dropdown-item>
    38.                               <el-dropdown-item>
    39.                                 <el-button type="text" @click="handleList()">查看待分配员工</el-button>
    40.                               </el-dropdown-item>
    41.                             </el-dropdown-menu>
    42.                           </el-dropdown>
    43.                         </div>
    44.                       </span>  
    45.                     </div>
    46.                   </div>
    47.  
    48.                   <!-- 
    49.                     构造树形列表
    50.                       叶子 <i class="fa fa-male"></i>
    51.                       非叶子 
    52.                         展开 <i class="fa fa-minus-square-o">
    53.                         闭合 <i class="fa fa-plus-square-o">
    54.                     <div class="generalClass" slot-scope="{node,data}" style="width:99%">
    55.                   -->
    56.                   <el-tree :props="{label:'name'}" :data="depts" node-key="id" default-expand-all>
    57.                     <!--
    58.                       node : 是否展开，是否叶子节点
    59.                       data：部门对象
    60.                             id，name
    61.                      -->
    62.                     <div class="generalClass" slot-scope="{node,data}" style="width:99%">
    63.                         <span>
    64.                            <i v-if="node.isLeaf" class="fa fa-male"></i>
    65.                            <i v-else :class="node.expanded?'fa fa-minus-square-o':'fa fa-plus-square-o'"></i>
    66.                           <span>{{ node.label }}</span>
    67.                         </span>
    68.                          <div class="fr">
    69.                           <span class="treeRinfo">
    70.                             <div class="treeRinfo">
    71.                               <span>{{departData.companyManage}}</span>
    72.                               <span>在职  <em class="colGreen" title="在职人数">---</em>&nbsp;&nbsp;(<em class="colGreen" title="正式员工">---</em>&nbsp;/&nbsp;<em class="colRed" title="非正式员工">---</em>)</span>
    73.                             </div>
    74.                             <div class="treeRinfo">
    75.                               <el-dropdown class="item">
    76.                                 <span class="el-dropdown-link">
    77.                                   操作<i class="el-icon-arrow-down el-icon--right"></i>
    78.                                 </span>
    79.                                 <el-dropdown-menu slot="dropdown">
    80.                                     <el-dropdown-item>
    81.                                       <el-button type="text" @click="handlAdd(data.id)">添加子部门</el-button>
    82.                                     </el-dropdown-item>
    83.                                     <el-dropdown-item>
    84.                                       <el-button type="text" @click="handUpdate(data.id)">查看部门</el-button>
    85.                                     </el-dropdown-item>
    86.                                     <el-dropdown-item>
    87.                                       <el-button type="text" @click="handleList()">查看待分配员工</el-button>
    88.                                     </el-dropdown-item>
    89.                                     <el-dropdown-item>
    90.                                     <el-button type="text" @click="handleDelete(data.id)">删除部门</el-button>
    91.                                   </el-dropdown-item>
    92.                                 </el-dropdown-menu>
    93.                               </el-dropdown>
    94.                             </div>
    95.                           </span>  
    96.                         </div>
    97.                       </div>
    98.                   </el-tree>
    99.               </div>
    100.             </div>    
    101.       </el-card>
    102.     </div>
    103.     <!--:visible.sync 是否显示 -->
    104.     <!--引入组件-->
    105.     <component v-bind:is="deptAdd" ref="addDept"></component>
    106. </div>
    107. </template>
    108.  
    109. <!-- 引入组件 -->
    110. <script>
    111. //引入api
    112. import {list,saveOrupdate,find,deleteById} from "@/api/base/dept"
    113. import commonApi from '@/utils/common'
    114. import deptAdd from './../components/add'
    115. export default {
    116.   components:{deptAdd},
    117.   data() {
    118.     return {
    119.       deptAdd:'deptAdd',
    120.       activeName: 'first', 
    121.       departData:{},
    122.       depts:[]
    123.     }
    124.   },
    125.   methods: {
    126.       //添加部门
    127.     handlAdd(parentId) {
    128.       //父页面调用子组件中的内容
    129.       this.$refs.addDept.parentId = parentId;
    130.       this.$refs.addDept.dialogFormVisible = true
    131.     },
    132.     //查看部门
    133.     handUpdate(id) {
    134.       //根据id查询部门
    135.       find({id:id}).then(res => {
    136.          //数据绑定到dept对象中
    137.          this.$refs.addDept.dept = res.data.data;
    138.          this.$refs.addDept.dialogFormVisible = true
    139.       })
    140.     },
    141.   
    142.     handleDelete(id) {
    143.        this.$confirm('是否删除此条记录?', '提示', {
    144.           confirmButtonText: '确定',
    145.           cancelButtonText: '取消',
    146.           type: 'warning'
    147.         }).then(() => {
    148.                deleteById({id:id}).then(res=> {
    149.                 this.$message({
    150.                   message: res.data.message,
    151.                   type: res.data.success?'success':'error'
    152.                 });
    153.                 if(res.data.success) {
    154.                   location.reload();
    155.                 }
    156.               })
    157.         })
    158.     },
    159.  
    160.     //构造查询方法
    161.     getList() {
    162.       list().then(res => {
    163.        this.departData = res.data.data
    164.        //将普通的数据转化为父子接口
    165.        this.depts = commonApi.transformTozTreeFormat(res.data.data.depts);
    166.        console.log(this.depts)
    167.       })
    168.     }
    169.   },
    170.   created: function() {
    171.     this.getList();
    172.   },
    173. }
    174. </script>
    175. <style rel="stylesheet/scss" lang="scss">
    176. .el-dropdown {
    177.   color: #000000
    178. }
    179. .el-tree-node__content>.el-tree-node__expand-icon {
    180.   padding:0px;
    181. }
    182. .el-tree-node__expand-icon {
    183.   color:#ffffff
    184. }
    185. .generalClassNode {
    186.   padding-left: 20px;
    187. }
    188. .el-tree-node__content{
    189.   font-size: 16px;
    190.   line-height: 36px;
    191.   height:36px;
    192. }
    193. .custom-tree-node{
    194.   padding-left: 20px;
    195. }
    196. .objectTree {
    197.   overflow: auto;
    198.   z-index: 100;
    199.   width: 300px;
    200.   border: 1px solid #dcdfe6;
    201.   margin-top: 5px;
    202.   left: 70px;
    203. }
    204. .el-tabs__content {
    205.   overflow: initial;
    206. }
    207. .boxpad {
    208.   margin-left: -40px;
    209. }
    210. </style>
    211. <style  rel="stylesheet/scss" lang="scss" scoped>
    212. .el-tree-node__expand-icon{
    213.  
    214. }
    215. .el-icon-caret-right{}
    216. .el-tree-node__content{
    217.   font-size: 14px;
    218.   line-height: 36px;
    219. }
    220. .generalClass {
    221.   font-size: 14px;
    222.   line-height: 36px;
    223.   color:#000000
    224. }
    225. .all {
    226.   position: relative;
    227.   min-height: 100%;
    228.   padding-bottom: 200px;
    229. }
    230. .organization-main:after,
    231. .organization-index-top:after {
    232.   display: block;
    233.   clear: both;
    234.   content: '';
    235.   visibility: hidden;
    236.   height: 0;
    237. }
    238. .organization-main {
    239.   font-size: 14px;
    240.   font-size: 14px;
    241. }
    242.  
    243. .organization-index {
    244.   padding-bottom: 20px;
    245.   margin-left: 20px;
    246. }
    247. .main-top-title {
    248.   padding-left: 20px;
    249.   padding-top: 20px;
    250.   text-align: left;
    251. }
    252.  
    253. ::-webkit-scrollbar-thumb {
    254.   background-color: #018ee8;
    255.   height: 50px;
    256.   outline-offset: -2px;
    257.   outline: 8px solid #fff;
    258.   -webkit-border-radius: 4px;
    259. }
    260. ::-webkit-scrollbar-track-piece {
    261.   background-color: #fff;
    262.   -webkit-border-radius: 0;
    263. }
    264. ::-webkit-scrollbar {
    265.   width: 8px;
    266.   height: 8px;
    267. }
    268. ::-webkit-scrollbar-thumb:hover {
    269.   background-color: #fb4446;
    270.   height: 50px;
    271.   -webkit-border-radius: 4px;
    272. }
    273. .modal-total {
    274.   width: 100%;
    275.   height: 100%;
    276.   position: fixed;
    277.   top: 0;
    278.   left: 0;
    279.   background: #000;
    280.   z-index: 90;
    281.   opacity: 0.2;
    282. }
    283. .modal {
    284.   width: 400px;
    285.   height: 300px;
    286.   background-color: #ffffff;
    287.   z-index: 999;
    288.   position: absolute;
    289.   left: 45%;
    290.   top: 20%;
    291.   text-align: center;
    292. }
    293. .treBox {
    294.   padding: 30px 120px 0;
    295. }
    296. .organization-index-top {
    297.   position: relative;
    298.  
    299.   .el-tabs-report {
    300.     position: absolute;
    301.     top: -50px;
    302.     right: 15px;
    303.   }
    304. }
    305. .treeCon {
    306.   border-bottom: 1px solid #cfcfcf;
    307.   padding: 10px 0;
    308.   margin-bottom: 10px;
    309.   .el-dropdown {
    310.     color: #333;
    311.   }
    312. }
    313. .treeRinfo {
    314.   display: inline-block;
    315. }
    316. .treeRinfo span {
    317.   padding-left: 30px;
    318. }
    319. </style>

    （2）树形机构列表

    1.   <!-- 
    2.     构造树形列表
    3.       叶子 <i class="fa fa-male"></i>
    4.       非叶子 
    5.         展开 <i class="fa fa-minus-square-o">
    6.         闭合 <i class="fa fa-plus-square-o">
    7.     <div class="generalClass" slot-scope="{node,data}" style="width:99%">
    8.   -->
    9.   <el-tree :props="{label:'name'}" :data="depts" node-key="id" default-expand-all>
    10.     <!--
    11.       node : 是否展开，是否叶子节点
    12.       data：部门对象
    13.             id，name
    14.      -->
    15.     <div class="generalClass" slot-scope="{node,data}" style="width:99%">
    16.         <span>
    17.            <i v-if="node.isLeaf" class="fa fa-male"></i>
    18.            <i v-else :class="node.expanded?'fa fa-minus-square-o':'fa fa-plus-square-o'"></i>
    19.           <span>{{ node.label }}</span>
    20.         </span>
    21.          <div class="fr">
    22.           <span class="treeRinfo">
    23.             <div class="treeRinfo">
    24.               <span>{{departData.companyManage}}</span>
    25.               <span>在职  <em class="colGreen" title="在职人数">---</em>&nbsp;&nbsp;(<em class="colGreen" title="正式员工">---</em>&nbsp;/&nbsp;<em class="colRed" title="非正式员工">---</em>)</span>
    26.             </div>
    27.             <div class="treeRinfo">
    28.               <el-dropdown class="item">
    29.                 <span class="el-dropdown-link">
    30.                   操作<i class="el-icon-arrow-down el-icon--right"></i>
    31.                 </span>
    32.                 <el-dropdown-menu slot="dropdown">
    33.                     <el-dropdown-item>
    34.                       <el-button type="text" @click="handlAdd(data.id)">添加子部门</el-button>
    35.                     </el-dropdown-item>
    36.                     <el-dropdown-item>
    37.                       <el-button type="text" @click="handUpdate(data.id)">查看部门</el-button>
    38.                     </el-dropdown-item>
    39.                     <el-dropdown-item>
    40.                       <el-button type="text" @click="handleList()">查看待分配员工</el-button>
    41.                     </el-dropdown-item>
    42.                     <el-dropdown-item>
    43.                     <el-button type="text" @click="handleDelete(data.id)">删除部门</el-button>
    44.                   </el-dropdown-item>
    45.                 </el-dropdown-menu>
    46.               </el-dropdown>
    47.             </div>
    48.           </span>  
    49.         </div>
    50.       </div>
    51.   </el-tree>

    骚戴理解：

    解释

    这是vue.js中使用的一个el-tree组件，用于显示层次结构的树形数据。以下是对代码中每个属性的解释：

    • :props="{label:'name'}"：这个属性设置了要显示在树节点上的文本内容的属性名为“name”，即树节点将显示"data"数组中每个元素的"name"属性。 后面可以通过{{ node.label }}去获取name，也就是部门的名称
    • :data="depts"：这个属性设置了树形数据的来源为一个名为“depts”的数据数组，即树的每个节点由数组中的一个元素表示。
    • node-key="id"：这个属性设置了树节点的唯一标识符为"data"数组中每个元素的"id"属性，这将有助于在树中添加、删除或更新节点时进行准确定位。
    • default-expand-all：这个属性设置了默认情况下，所有树节点都将展开显示。

    解释 和

    • 如果 node.isleaf 为真(判断是不是叶子节点)，则渲染一个男性符号的图标 。
    • 否则，就渲染一个可以展开和折叠的矩形图标。该矩形图标的样式取决于 node.expanded 属性的值：
      • 如果 node.expanded 为 true（节点展开的话），则渲染带有减号的图标 。
      • 如果 node.expanded 为 false（节点关闭的话），则渲染带有加号的图标 `

    解释以下代码

     <span>在职  <em class="colGreen" title="在职人数">---</em>&nbsp;&nbsp;(<em class="colGreen" title="正式员工">---</em>&nbsp;/&nbsp;<em class="colRed" title="非正式员工">---</em>)</span>

    标签用于在文本中强调某些词语，使其在视觉上与其他文本内容区别开来。 表示空格，实现效果如下所示

    1. <el-dropdown class="item">
    2. <span class="el-dropdown-link">
    3.   操作<i class="el-icon-arrow-down el-icon--right"></i>
    4. </span>
    5. <el-dropdown-menu slot="dropdown">
    6.     <el-dropdown-item>
    7.       <el-button type="text" @click="handlAdd(data.id)">添加子部门</el-button>
    8.     </el-dropdown-item>
    9.     <el-dropdown-item>
    10.       <el-button type="text" @click="handUpdate(data.id)">查看部门</el-button>
    11.     </el-dropdown-item>
    12.     <el-dropdown-item>
    13.       <el-button type="text" @click="handleList()">查看待分配员工</el-button>
    14.     </el-dropdown-item>
    15.     <el-dropdown-item>
    16.     <el-button type="text" @click="handleDelete(data.id)">删除部门</el-button>
    17.   </el-dropdown-item>
    18. </el-dropdown-menu>
    19. </el-dropdown>

    通过以上代码实现以下效果

    （3） 构造数据

    2. <script>
    3. //引入api
    4. import {list,saveOrupdate,find,deleteById} from "@/api/base/dept"
    5. import commonApi from '@/utils/common'
    6. import deptAdd from './../components/add'
    7. export default {
    8.   components:{deptAdd},
    9.   data() {
    10.     return {
    11.       deptAdd:'deptAdd',
    12.       activeName: 'first', 
    13.       departData:{},
    14.       depts:[]
    15.     }
    16.   },
    17.   methods: {
    18.       //添加部门
    19.     handlAdd(parentId) {
    20.       //父页面调用子组件中的内容
    21.       this.$refs.addDept.parentId = parentId;
    22.       this.$refs.addDept.dialogFormVisible = true
    23.     },
    24.     //查看部门
    25.     handUpdate(id) {
    26.       //根据id查询部门
    27.       find({id:id}).then(res => {
    28.          //数据绑定到dept对象中
    29.          this.$refs.addDept.dept = res.data.data;
    30.          this.$refs.addDept.dialogFormVisible = true
    31.       })
    32.     },
    33.   
    34.     handleDelete(id) {
    35.        this.$confirm('是否删除此条记录?', '提示', {
    36.           confirmButtonText: '确定',
    37.           cancelButtonText: '取消',
    38.           type: 'warning'
    39.         }).then(() => {
    40.                deleteById({id:id}).then(res=> {
    41.                 this.$message({
    42.                   message: res.data.message,
    43.                   type: res.data.success?'success':'error'
    44.                 });
    45.                 if(res.data.success) {
    46.                   location.reload();
    47.                 }
    48.               })
    49.         })
    50.     },
    51.  
    52.     //构造查询方法
    53.     getList() {
    54.       list().then(res => {
    55.        this.departData = res.data.data
    56.        //将普通的数据转化为父子接口
    57.        this.depts = commonApi.transformTozTreeFormat(res.data.data.depts);
    58.        console.log(this.depts)
    59.       })
    60.     }
    61.   },
    62.   created: function() {
    63.     this.getList();
    64.   },
    65. }
    66. script>

    （4）树形组件

    1. export default {
    2.   timestampToTime: (timestamp) => {
    3.     let date = new Date(timestamp * 1000)
    4.     let Y = date.getFullYear() + '-'
    5.     let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    6.     let D = date.getDate() + ' '
    7.     let h = date.getHours() + ':'
    8.     let m = date.getMinutes() + ':'
    9.     let s = date.getSeconds()
    10.     return Y + M + D + h + m + s
    11.   },
    12.   transformTozTreeFormat: function (sNodes) {
    13.     var i, l;
    14.     var r = [];
    15.     var tmpMap = {};
    16.     for (i = 0, l = sNodes.length; i < l; i++) {
    17.       tmpMap[sNodes[i].id] = sNodes[i];
    18.     }
    19.     for (i = 0, l = sNodes.length; i < l; i++) {
    20.       var p = tmpMap[sNodes[i].parentId];
    21.       if (p && sNodes[i].id != sNodes[i].parentId) {
    22.         var children = this.nodeChildren(p);
    23.         if (!children) {
    24.           children = this.nodeChildren(p, []);
    25.         }
    26.         children.push(sNodes[i]);
    27.       } else {
    28.         r.push(sNodes[i]);
    29.       }
    30.     }
    31.     return r;
    32.   },
    33.   nodeChildren: function (node, newChildren) {
    34.     if (typeof newChildren !== 'undefined') {
    35.       node.children = newChildren;
    36.     }
    37.     return node.children;
    38.   }
    39. }

    骚戴理解：这是个好东西，可以把后端传过来的List集合解析成树状的数据结构

    组织机构的增删改查

    新增部门

    使用element-ui提供的dialog的弹出层构造弹出添加页面

    1. <el-dialog title="编辑部门" :visible.sync="dialogFormVisible">
    2.     <el-form ref="dataForm" :model="formData" label-width="120px">
    3.         <el-form-item label="部门名称">
    4.        <el-input v-model="formData.name" placeholder='请输入部门名称'></el-input>
    5.         </el-form-item>
    6.         <el-form-item label="部门编码">
    7.        <el-input v-model="formData.code" placeholder='请输入部门编码'></el-input>
    8.         </el-form-item>
    9.         <el-form-item label="部门负责人">
    10.        <el-input v-model="formData.manager" placeholder='请输入负责人'></el-input>
    11.         </el-form-item>
    12.         <el-form-item label="部门介绍">
    13.        <el-input v-model="formData.introduce" placeholder='请输入介绍'></el-input>
    14.         </el-form-item>
    15.     </el-form>
    16.     <div slot="footer" class="dialog-footer">
    17.         <el-button type="primary" @click="createData">确定</el-button>
    18.         <el-button @click="dialogFormVisible=false">取消</el-button>
    19.     </div>
    20. </el-dialog>

    配置保存方法

    1. <script>
    2. import {list,saveOrupdate,find,deleteById} from "@/api/base/dept"
    3. export default {
    4.  data () {
    5.      return {
    6.       //添加部门的模型
    7.       parentId:'',
    8.       dialogFormVisible:false,
    9.       dept:{}
    10.      }
    11.  },
    12.   methods: {
    13.     saveDept() {
    14.       this.dept.parentId = this.parentId
    15.       saveOrupdate(this.dept).then(res => {
    16.         this.$message({
    17.           message: res.data.message,
    18.           type: res.data.success?'success':'error'
    19.         });
    20.         //保存成功
    21.         if(res.data.success) {
    22.           //如果成功
    23.           location.reload();
    24.         }
    25.       })
    26.     }
    27.   }
    28. }
    29. </script>

    骚戴理解：新增有两个步骤，弹出新增框和点击保存。这里有两种类型的新增，分别是有父节点的新增和没有父节点的新增，只需要把父节点的id传过来即可， saveOrupdate(this.dept)这是其中的一个API，如果传过去的this.dept有id，那就是修改操作，没有id就是新增操作。这里可以发现this.dept模型是没有赋值id的，所以是新增操作，这样搞应该是为了让新增和修改都使用同一个组件，也就是都用这个对话框，res.data.success?'success':'error'的意思的res.data.success返回的是false就是error类型，如果返回的是true，那就是success类型。

    location.reload();刷新页面有很明显的迟钝，所以我还是用的getList方法 来获取新的数据，但是在组件中怎么引用父类Vue的方法呢？ this.$parent.getList();这样写就可以调父类的方法了

    修改部门

    根据id查询部门

    1.     //修改部门
    2.     handUpdate(id) {
    3.       //根据id查询部门
    4.       find({id:id}).then(res => {
    5.          //数据绑定到dept对象中
    6.          this.$refs.addDept.dept = res.data.data;
    7.          this.$refs.addDept.dialogFormVisible = true
    8.       })
    9.     }

    骚戴理解：新增和修改用的都是同一个弹窗，后面也抽离成为一个add.vue页面，新增和修改都是调用的saveOrupdate这个API，这个API可以根据是否有id值才判断调用save或update这两个API。

    在前端{id:id}就表示一个对象，只要是{}这样的格式就是对象，所以下面的update接口用的是data对象，而不是id！

    1. export const saveOrupdate = data => {return data.id?update(data):save(data)}
    2. export const update = data => createAPI(`/company/department/${data.id}`, 'put', data)

    这里我一开始搞不懂为什么前端只传了一个id，后端却可以接收到Department对象？其实是我搞混淆了，上面API的data其实对应的是后端的Department对象，然后后端的id是从url路径中获取的，前端传过去的id是从data中获取的

    删除部门

    1.    handleDelete(id) {
    2.        this.$confirm('是否删除此条记录?', '提示', {
    3.           confirmButtonText: '确定',
    4.           cancelButtonText: '取消',
    5.           type: 'warning'
    6.         }).then(() => {
    7.                deleteById({id:id}).then(res=> {
    8.                 this.$message({
    9.                   message: res.data.message,
    10.                   type: res.data.success?'success':'error'
    11.                 });
    12.                 if(res.data.success) {
    13.                   location.reload();
    14.                 }
    15.               })
    16.         })
    17.     },

    抽取组件

    组件（Component）是Vue.js 最强大的功能。可以通过将不同的业务拆分为不同的组件进行开发，让代码更加优雅提供可读性。当然页可以封装可重用的代码，通过传入对象的不同，实现组件的复用。

    （1）抽取新增/修改页面到 /module-departments/components/add.vue 中

    1. <template>
    2.     <el-dialog title="编辑部门" :visible.sync="dialogFormVisible">
    3.       <!-- model : 数据模型 -->
    4.       <el-form :model="dept" label-width="120px">
    5.         <el-form-item label="部门名称">
    6.           <el-input v-model="dept.name" autocomplete="off"></el-input>
    7.         </el-form-item>
    8.                 <el-form-item label="部门编码">
    9.           <el-input v-model="dept.code" autocomplete="off"></el-input>
    10.         </el-form-item>
    11.                 <el-form-item label="部门负责人">
    12.           <el-input v-model="dept.manager" autocomplete="off"></el-input>
    13.         </el-form-item>
    14.                 <el-form-item label="部门介绍">
    15.           <el-input v-model="dept.introduce" autocomplete="off"></el-input>
    16.         </el-form-item>
    17.       </el-form>
    18.       <div slot="footer" class="dialog-footer">
    19.         <el-button @click="dialogFormVisible = false">取 消</el-button>
    20.         <el-button type="primary" @click="saveDept">确 定</el-button>
    21.       </div>
    22.     </el-dialog>
    23. </template>
    24.  
    25. <script>
    26. import {list,saveOrupdate,find,deleteById} from "@/api/base/dept"
    27. export default {
    28.  data () {
    29.      return {
    30.       //添加部门的模型
    31.       parentId:'',
    32.       dialogFormVisible:false,
    33.       dept:{}
    34.      }
    35.  },
    36.   methods: {
    37.     saveDept() {
    38.       this.dept.parentId = this.parentId
    39.       saveOrupdate(this.dept).then(res => {
    40.         this.$message({
    41.           message: res.data.message,
    42.           type: res.data.success?'success':'error'
    43.         });
    44.         //保存成功
    45.         if(res.data.success) {
    46.           //如果成功
    47.           location.reload();
    48.         }
    49.       })
    50.     }
    51.   }
    52. }
    53. </script>
    54.  
    55. <style>
    56.  
    57. </style>

    （2） 在 /module-departments/page/index.vue 中引用组件

    • 导入组件
    1. import deptAdd from './../components/add'  //导入组件
    2. export default { 
    3.   
    4.   components: { deptAdd }, //声明组件
    5.   data() {
    6.     return {
    7.       deptAdd: 'deptAdd', //配置组件别名
    8.       activeName: 'first', 
    9.       departData:{},
    10.    }
    11.  },
    12.   ....
    13. }
    • 使用组件
    1. //v-bind:is （绑定的组件名称）
    2. //ref ： 引用子组件中内容的别名
    3. <component v-bind:is="deptAdd" ref="deptAdd"></component>
    • 改造新增修改方法
    1.     handlAdd(parentId) {
    2.       //对子组件中的属性复制
    3.       this.$refs.deptAdd.formData = {};
    4.       this.$refs.deptAdd.parentId = parentId
    5.       this.$refs.deptAdd.dialogFormVisible = true;
    6.    },
    7.     handleEdit(id) {
    8.       detail({id}).then( res=> {
    9.         this.$refs.deptAdd.formData = res.data.data
    10.         this.$refs.deptAdd.dialogFormVisible = true
    11.         this.$refs.deptAdd.parentId = res.data.data.parentId
    12.      })
    13.    },

    骚戴理解：this.$refs.deptAdd.formData这样写可以在父Vue中调用组件的属性formData

    RBAC模型

    什么是RBAC

    RBAC（全称：Role-Based Access Control）基于角色的权限访问控制，作为传统访问控制（自主访问，强制访问）的有前景的代替受到广泛的关注。在RBAC中，权限与角色相关联，用户通过成为适当角色的成员而得到这些 角色的权限。这就极大地简化了权限的管理。在一个组织中，角色是为了完成各种工作而创造，用户则依据它的责 任和资格来被指派相应的角色，用户可以很容易地从一个角色被指派到另一个角色。角色可依新的需求和系统的合 并而赋予新的权限，而权限也可根据需要而从某角色中回收。角色与角色的关系可以建立起来以囊括更广泛的客观情况。

    访问控制是针对越权使用资源的防御措施，目的是为了限制访问主体（如用户等） 对访问客体（如数据库资源等） 的访问权限。企业环境中的访问控制策略大部分都采用基于角色的访问控制（RBAC）模型，是目前公认的解决大型企业的统一资源访问控制的有效方法

    基于RBAC的设计思路

    基于角色的访问控制基本原理是在用户和访问权限之间加入角色这一层，实现用户和权限的分离，用户只有通过激 活角色才能获得访问权限。通过角色对权限分组，大大简化了用户权限分配表，间接地实现了对用户的分组，提高 了权限的分配效率。且加入角色层后，访问控制机制更接近真实世界中的职业分配，便于权限管理。

    在RBAC模型中，角色是系统根据管理中相对稳定的职权和责任来划分，每种角色可以完成一定的职能。用户通过 饰演不同的角色获得角色所拥有的权限，一旦某个用户成为某角色的成员，则此用户可以完成该角色所具有的职能。通过将权限指定给角色而不是用户，在权限分派上提供了极大的灵活性和极细的权限指定粒度。

    骚戴理解：RBAC模型其实就是给角色分配固定的权限，然后给用户去分配角色，这样用户就具有了这个角色有的所有权限，从而达到权限控制的目的，如果不这样的话，那就需要手动的为用户添加一个个的权限来实现权限管理

    表结构分析

    一个用户拥有若干角色，每一个角色拥有若干权限。这样，就构造成“用户-角色-权限”的授权模型。在这种模型中，用户与角色之间，角色与权限之间，一般者是多对多的关系。

    SAAS-HRM中的权限设计

    需求分析

    SAAS平台的基本元素

    SAAS平台管理员：负责平台的日常维护和管理，包括用户日志的管理、租户账号审核、租户状态管理、租户费用 的管理，要注意的是平台管理员不能对租户的具体业务进行管理

    企业租户：指访问SaaS平台的用户企业，在SaaS平台中各租户之间信息是独立的。

    租户管理员：为租户角色分配权限和相关系统管理、维护。

    租户角色：根据业务功能租户管理员进行角色划分，划分好角色后，租户管理员可以对相应的角色进行权限分配

    租户用户：需对租户用户进行角色分配，租户用户只能访问授权的模块信息。

    需求分析

    在应用系统中，权限是以什么样的形式展现出来的？对菜单的访问，页面上按钮的可见性，后端接口的控制，都要进行充分考虑

    前端

    前端菜单：根据是否有请求菜单权限进行动态加载按钮：根据是否具有此权限点进行显示/隐藏的控制

    后端

    前端发送请求到后端接口，有必要对接口的访问进行权限的验证

    权限设计

    针对这样的需求，在有些设计中可以将菜单，按钮，后端API请求等作为资源，这样就构成了基于RBAC的另一种授权模型（用户-角色-权限-资源）。在SAAS-HRM系统的权限设计中我们就是才用了此方案

    针对此种权限模型，其中权限究竟是属于菜单，按钮，还是API的权限呢？那就需要在设计数据库权限表的时候添加类型加以区分（如权限类型 1为菜单 2为功能 3为API）。

    表结构分析

    这里要注意的是，权限表与权限菜单表、页面元素表与API接口表都是一对一的关系，与传统的RBAC模型对比不难发现此种设计的好处：

    • 不需要区分哪些是操作，哪些是资源
    • 方便扩展，当系统要对新的东西进行权限控制时，我只需要建立一个新的资源表，并确定这类权限的权限类 型标识即可。

    骚戴理解：这里的权限可能是菜单，页面元素，API接口，具体这个权限是什么由权限表里的权限字段来控制，权限字段如果是1，那就是菜单，如果是2，那就是页面元素，如果是3，那就是API接口，然后再去对应的表中去查询这个权限有哪些菜单，有哪些页面元素，有哪些API接口，这里我一开始理解的是一对多得到关系，而它这里是其实是指的权限表和一套菜单，一套页面元素，一套API，所以是一对一关系

    用户管理

    需求分析

    用户其实就是saas企业访问的员工，对企业员工完成基本的CRUD操作表结构如下：

    1. CREATE TABLE `bs_user` (
    2. `id` varchar(40) NOT NULL COMMENT 'ID',
    3. `mobile` varchar(40) NOT NULL COMMENT '手机号码',
    4. `username` varchar(255) NOT NULL COMMENT '用户名称',
    5. `password` varchar(255) DEFAULT NULL COMMENT '密码',
    6. `enable_state` int(2) DEFAULT '1' COMMENT '启用状态 0是禁用，1是启用',
    7. `create_time` datetime DEFAULT NULL COMMENT '创建时间',
    8. `department_id` varchar(40) DEFAULT NULL COMMENT '部门ID',
    9. `time_of_entry` datetime DEFAULT NULL COMMENT '入职时间',
    10. `form_of_employment` int(1) DEFAULT NULL COMMENT '聘用形式',
    11. `work_number` varchar(20) DEFAULT NULL COMMENT '工号',
    12. `form_of_management` varchar(8) DEFAULT NULL COMMENT '管理形式',
    13. `working_city` varchar(16) DEFAULT NULL COMMENT '工作城市',
    14. `correction_time` datetime DEFAULT NULL COMMENT '转正时间',
    15. `in_service_status` int(1) DEFAULT NULL COMMENT '在职状态 1.在职	2.离职',
    16. `company_id` varchar(40) DEFAULT NULL COMMENT '企业ID',
    17. `company_name` varchar(40) DEFAULT NULL,
    18. `department_name` varchar(40) DEFAULT NULL, PRIMARY KEY (`id`),
    19. UNIQUE KEY `idx_user_phone` (`mobile`) USING BTREE
    20. ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4

    配置系统微服务

    • 搭建系统微服务模块（ihrm_system），pom引入依赖
    1.     <dependencies>
    2.         <dependency>
    3.             <groupId>org.springframework.boot</groupId>
    4.             <artifactId>spring-boot-starter-data-jpa</artifactId>
    5.         </dependency>
    6.         <dependency>
    7.             <groupId>mysql</groupId>
    8.             <artifactId>mysql-connector-java</artifactId>
    9.         </dependency>
    10.         <dependency>
    11.             <groupId>com.ihrm</groupId>
    12.             <artifactId>ihrm_common</artifactId>
    13.             <version>1.0-SNAPSHOT</version>
    14.         </dependency>
    15.     </dependencies>
    • 配置application.yml
    1. server:
    2.  port: 9002
    3. spring:
    4.  application:
    5.    name: ihrm-system #指定服务名
    6.  datasource:
    7.    driver-class-name: com.mysql.jdbc.Driver
    8.    url: jdbc:mysql://localhost:3306/ihrm?useUnicode=true&characterEncoding=utf8
    9.    username: root
    10.    password: 111111
    11.  jpa:
    12.    database: MySQL
    13.    show-sql: true
    14.    open-in-view: true
    • 配置启动类
    1. package com.ihrm.system;
    2. import com.ihrm.common.utils.IdWorker;
    3. import org.springframework.boot.SpringApplication;
    4. import org.springframework.boot.autoconfigure.SpringBootApplication;
    5. import org.springframework.boot.autoconfigure.domain.EntityScan;
    6. import org.springframework.context.annotation.Bean;
    7. @SpringBootApplication(scanBasePackages = "com.ihrm")
    8. @EntityScan("com.ihrm.domain.system")
    9. public class SystemApplication {
    10.     public static void main(String[] args) {
    11.         SpringApplication.run(SystemApplication.class, args);
    12.    }
    13.     @Bean
    14.     public IdWorker idWorkker() {
    15.         return new IdWorker(1, 1);
    16.    }
    17. }

    后端用户基本操作

    实体类

    1. package com.ihrm.domain.system;
    2.  
    3. import com.fasterxml.jackson.annotation.JsonIgnore;
    4. import lombok.Getter;
    5. import lombok.Setter;
    6.  
    7. import javax.persistence.*;
    8. import java.io.Serializable;
    9. import java.util.Date;
    10. import java.util.HashSet;
    11. import java.util.Set;
    12.  
    13. /**
    14.  * 用户实体类
    15.  */
    16. @Entity
    17. @Table(name = "bs_user")
    18. @Getter
    19. @Setter
    20. public class User implements Serializable {
    21.     private static final long serialVersionUID = 4297464181093070302L;
    22.     /**
    23.      * ID
    24.      */
    25.     @Id
    26.     private String id;
    27.     /**
    28.      * 手机号码
    29.      */
    30.     private String mobile;
    31.     /**
    32.      * 用户名称
    33.      */
    34.     private String username;
    35.     /**
    36.      * 密码
    37.      */
    38.     private String password;
    39.  
    40.     /**
    41.      * 启用状态 0为禁用 1为启用
    42.      */
    43.     private Integer enableState;
    44.     /**
    45.      * 创建时间
    46.      */
    47.     private Date createTime;
    48.  
    49.     private String companyId;
    50.  
    51.     private String companyName;
    52.  
    53.     /**
    54.      * 部门ID
    55.      */
    56.     private String departmentId;
    57.  
    58.     /**
    59.      * 入职时间
    60.      */
    61.     private Date timeOfEntry;
    62.  
    63.     /**
    64.      * 聘用形式
    65.      */
    66.     private Integer formOfEmployment;
    67.  
    68.     /**
    69.      * 工号
    70.      */
    71.     private String workNumber;
    72.  
    73.     /**
    74.      * 管理形式
    75.      */
    76.     private String formOfManagement;
    77.  
    78.     /**
    79.      * 工作城市
    80.      */
    81.     private String workingCity;
    82.  
    83.     /**
    84.      * 转正时间
    85.      */
    86.     private Date correctionTime;
    87.  
    88.     /**
    89.      * 在职状态 1.在职  2.离职
    90.      */
    91.     private Integer inServiceStatus;
    92.  
    93.     private String departmentName;
    94.  
    95.     /**
    96.      *  JsonIgnore
    97.      *     : 忽略json转化
    98.      */
    99.     @JsonIgnore
    100.     @ManyToMany
    101.     @JoinTable(name="pe_user_role",
    102.             joinColumns={@JoinColumn(name="user_id",referencedColumnName="id")},
    103.             inverseJoinColumns={@JoinColumn(name="role_id",referencedColumnName="id")}
    104.     )
    105.     private Set<Role> roles = new HashSet<Role>();//用户与角色   多对多
    106. }

    骚戴理解：

    • @jsonignore注解用于忽略指定的属性（字段），即在序列化/反序列化过程中不将该字段作为json数据的一部分。该注解通常用于保护敏感信息或避免无限循环引用等问题。这里是为了避免循环引用的情况，因为在User里private Set roles = new HashSet();而在Role里private Set users = new HashSet(0);所以循环依赖了，加这个注解就没事了
    • @manytomany注解表示多对多关系，即一个实体类（entity）实例可以关联到多个其他实体类例，同时一个实体类实例也可以被多个其他实体类实例所关联。在jpa中，多对多关系需要通过中间表来实现。
    • @jointable注解则用于定义多对多关系中的中间表的结构细节和关联方式。其中包括中间表的名称、关联字段、外键等信息。这些信息可以通过joincolumns和inversejoincolumns子注解进行详细配置。
      • name: 指定关联表（中间表）的名称，这里为pe_user_role。
      • joinColumns={@JoinColumn(name="user_id",referencedColumnName="id")}里的joinColumns表示关联当前类和中间表和外部表的字段的关系，name表示当前类所对应表的主键在关联表（中间表）中的字段名，referencedColumnName表示外部表的字段，也就是角色表中的id
      • inverseJoinColumns={@JoinColumn(name="role_id",referencedColumnName="id")}里的inverseJoinColumns表示关联外部表和当前类所对应的表和中间表的字段的关系，name表示外部表主键在关联表（中间表）中的字段名，referencedColumnName表示当前类所对应的表的字段，也就是用户表中的id

    持久化层

    1. package com.ihrm.system.dao;
    2. import com.ihrm.system.domain.User;
    3. import org.springframework.data.jpa.repository.JpaRepository;
    4. import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
    5. /**
    6.   * 企业数据访问接口
    7.   */
    8. public interface UserDao extends JpaRepository<User, String>, 
    9. JpaSpecificationExecutor<User> {
    10. }

    业务逻辑层

    1. package com.ihrm.system.service;
    2. import com.ihrm.common.utils.IdWorker;
    3. import com.ihrm.domain.system.Role;
    4. import com.ihrm.domain.system.User;
    5. import com.ihrm.system.dao.RoleDao;
    6. import com.ihrm.system.dao.UserDao;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.data.domain.Page;
    9. import org.springframework.data.domain.PageRequest;
    10. import org.springframework.data.jpa.domain.Specification;
    11. import org.springframework.stereotype.Service;
    12. import org.springframework.transaction.annotation.Transactional;
    13. import javax.persistence.criteria.CriteriaBuilder;
    14. import javax.persistence.criteria.CriteriaQuery;
    15. import javax.persistence.criteria.Predicate;
    16. import javax.persistence.criteria.Root;
    17. import java.util.*;
    18. /**
    19. * 部门操作业务逻辑层
    20. */
    21. @Service
    22. public class UserService {
    23.     @Autowired
    24.     private IdWorker idWorker;
    25.     @Autowired
    26.     private UserDao userDao;
    27.     @Autowired
    28.     private RoleDao roleDao;
    29.     public User findByMobileAndPassword(String mobile, String password) {
    30.         User user = userDao.findByMobile(mobile);
    31.         if (user != null && password.equals(user.getPassword())) {
    32.             return user;
    33.        } else {
    34.             return null;
    35.        }
    36.    }
    37.     /**
    38.      * 添加用户
    39.      */
    40.     public void save(User user) {
    41.         //填充其他参数
    42.         user.setId(idWorker.nextId() + "");
    43.         user.setCreateTime(new Date()); //创建时间
    44.         user.setPassword("123456");//设置默认登录密码
    45.         user.setEnableState(1);//状态
    46.         userDao.save(user);
    47.    }
    48.     /**
    49.      * 更新用户
    50.      */
    51.     public void update(User user) {
    52.         User targer = userDao.getOne(user.getId());
    53.         targer.setPassword(user.getPassword());
    54.         targer.setUsername(user.getUsername());
    55.         targer.setMobile(user.getMobile());
    56.         targer.setDepartmentId(user.getDepartmentId());
    57.         targer.setDepartmentName(user.getDepartmentName());
    58.         userDao.save(targer);
    59.    }
    60.     /**
    61.      * 根据ID查询用户
    62.      */
    63.     public User findById(String id) {
    64.         return userDao.findById(id).get();
    65.    }
    66.     /**
    67.      * 删除部门
    68.      *
    69.      * @param id 部门ID
    70.      */
    71.     public void delete(String id) {
    72.         userDao.deleteById(id);
    73.    }
    74.     public Page<User> findSearch(Map<String,Object> map, int page, int size) {
    75.         return userDao.findAll(createSpecification(map), PageRequest.of(page-1, size));
    76.    }
    77.     /**
    78.      * 调整部门
    79.      */
    80.     public void changeDept(String deptId,String deptName,List<String> ids) {
    81.         for (String id : ids) {
    82.             User user = userDao.findById(id).get();
    83.             user.setDepartmentName(deptName);
    84.             user.setDepartmentId(deptId);
    85.             userDao.save(user);
    86.        }
    87.    }
    88.     /**
    89.      * 分配角色
    90.      */
    91.     public void assignRoles(String userId,List<String> roleIds) {
    92.         User user = userDao.findById(userId).get();
    93.         Set<Role> roles = new HashSet<>();
    94.         for (String id : roleIds) {
    95.             Role role = roleDao.findById(id).get();
    96.             roles.add(role);
    97.        }
    98.         //设置用户和角色之间的关系
    99.         user.setRoles(roles);
    100.         userDao.save(user);
    101.    }
    102.     /**
    103.      * 动态条件构建
    104.      * @param searchMap
    105.      * @return
    106.      */
    107.     private Specification<User> createSpecification(Map searchMap) {
    108.         return new Specification<User>() {
    109.             @Override
    110.             public Predicate toPredicate(Root<User> root, CriteriaQuery<?> query, 
    111. CriteriaBuilder cb) {
    112.                 List<Predicate> predicateList = new ArrayList<Predicate>();
    113.                 // ID
    114.                 if (searchMap.get("id") !=null && !"".equals(searchMap.get("id"))) {
    115.                     predicateList.add(cb.equal(root.get("id").as(String.class), 
    116. (String)searchMap.get("id")));
    117.                }
    118.                 // 手机号码
    119.                 if (searchMap.get("mobile")!=null &&
    120. !"".equals(searchMap.get("mobile"))) {
    121.                     predicateList.add(cb.equal(root.get("mobile").as(String.class), 
    122. (String)searchMap.get("mobile")));
    123.                }
    124.                 // 用户ID
    125.                 if (searchMap.get("departmentId")!=null &&
    126. !"".equals(searchMap.get("departmentId"))) {
    127. predicateList.add(cb.like(root.get("departmentId").as(String.class), 
    128. (String)searchMap.get("departmentId")));
    129.                }
    130.                 // 标题
    131.                 if (searchMap.get("formOfEmployment")!=null &&
    132. !"".equals(searchMap.get("formOfEmployment"))) {
    133.                    
    134. predicateList.add(cb.like(root.get("formOfEmployment").as(String.class), 
    135. (String)searchMap.get("formOfEmployment")));
    136.                }
    137.                 if (searchMap.get("companyId")!=null &&
    138. !"".equals(searchMap.get("companyId"))) {
    139.                     predicateList.add(cb.like(root.get("companyId").as(String.class), 
    140. (String)searchMap.get("companyId")));
    141.                }
    142.                 if (searchMap.get("hasDept")!=null &&
    143. !"".equals(searchMap.get("hasDept"))) {
    144.                     if("0".equals((String)searchMap.get("hasDept"))) {
    145.                         predicateList.add(cb.isNull(root.get("departmentId")));
    146.                    }else{
    147.                         predicateList.add(cb.isNotNull(root.get("departmentId")));
    148.                    }
    149.                }
    150.                 return cb.and( predicateList.toArray(new
    151. Predicate[predicateList.size()]));
    152.            }
    153.        };
    154.    }
    155. }

    骚戴理解：在SpringData的JPA中save方法是保持数据，当实体中包含主键时，JPA的save方法会进行更新操作。这个系统的所有新增都是给了id的，所以新增其实都是修改操作。

    new PageRequest(page-1, size)中page-1是因为下标是从0开始的

    criteriabuilder.and(list.toarray(new predicate[list.size()])); 是一个java语言的代码片段，用于创建一个and条件的jpa查询。

    该代码的解释如下：

    • criteriabuilder代表一个criteriabuilder实例，它是jpa criteria api中的一个辅助类。criteriabuilder可以用于创建一些查询相关的对象，比如predicate（查询条件）。
    • list是一个list类型的集合，用于存放对某个字段的多个查询条件（例如：相等，大于，小于等），多个条件之间的关系是“且”的关系。
    • toarray()方法将predicate集合转换成数组类型。
    • new predicate[list.size()] 创建了一个长度为list.size()的predicate数组。
    • list.toarray(new predicate[list.size()])简单理解就是把list转化成predicate数组
    • criteriabuilder.and(...)表示将predicate数组中的所有条件使用“且”的关系连接在一起。

    因此，该代码片段的作用是在jpa查询中添加多个and条件

    控制器层

    1. package com.ihrm.system.controller;
    2.  
    3. import com.ihrm.common.controller.BaseController;
    4. import com.ihrm.common.entity.PageResult;
    5. import com.ihrm.common.entity.Result;
    6. import com.ihrm.common.entity.ResultCode;
    7.  
    8. import com.ihrm.domain.system.User;
    9. import com.ihrm.system.service.UserService;
    10. import org.springframework.beans.factory.annotation.Autowired;
    11. import org.springframework.data.domain.Page;
    12. import org.springframework.web.bind.annotation.*;
    13.  
    14. import javax.websocket.server.PathParam;
    15. import java.util.List;
    16. import java.util.Map;
    17.  
    18. //1.解决跨域
    19. @CrossOrigin
    20. //2.声明restContoller
    21. @RestController
    22. //3.设置父路径
    23. @RequestMapping(value="/sys")
    24. public class UserController extends BaseController {
    25.  
    26.     @Autowired
    27.     private UserService userService;
    28.  
    29.     /**
    30.      * 保存
    31.      */
    32.     @RequestMapping(value = "/user", method = RequestMethod.POST)
    33.     public Result save(@RequestBody User user) {
    34.         //1.设置保存的企业id
    35.         user.setCompanyId(parseCompanyId());
    36.         user.setCompanyName(parseCompanyName());
    37.         //2.调用service完成保存企业
    38.         userService.save(user);
    39.         //3.构造返回结果
    40.         return new Result(ResultCode.SUCCESS);
    41.     }
    42.  
    43.     /**
    44.      * 查询企业的用户列表
    45.      * 指定企业id
    46.      */
    47.     @RequestMapping(value = "/user", method = RequestMethod.GET)
    48.     public Result findAll(int page, int size, @RequestParam Map map) {
    49.         //1.获取当前的企业id
    50.         map.put("companyId",parseCompanyId());
    51.         //2.完成查询
    52.         Page<User> pageUser = userService.findAll(map,page,size);
    53.         //3.构造返回结果
    54.         PageResult pageResult = new PageResult(pageUser.getTotalElements(),pageUser.getContent());
    55.         return new Result(ResultCode.SUCCESS, pageResult);
    56.     }
    57.  
    58.     /**
    59.      * 根据ID查询user
    60.      */
    61.     @RequestMapping(value = "/user/{id}", method = RequestMethod.GET)
    62.     public Result findById(@PathVariable(value = "id") String id) {
    63.         User user = userService.findById(id);
    64.         return new Result(ResultCode.SUCCESS, user);
    65.     }
    66.  
    67.  
    68.     /**
    69.      * 修改User
    70.      */
    71.     @RequestMapping(value = "/user/{id}", method = RequestMethod.PUT)
    72.     public Result update(@PathVariable(value = "id") String id, @RequestBody User user) {
    73.         //1.设置修改的部门id
    74.         user.setId(id);
    75.         //2.调用service更新
    76.         userService.update(user);
    77.         return new Result(ResultCode.SUCCESS);
    78.     }
    79.  
    80.     /**
    81.      * 根据id删除
    82.      */
    83.     @RequestMapping(value = "/user/{id}", method = RequestMethod.DELETE)
    84.     public Result delete(@PathVariable(value = "id") String id) {
    85.         userService.deleteById(id);
    86.         return new Result(ResultCode.SUCCESS);
    87.     }
    88. }

    前端用户基本操作

    由于时间有限,本着不浪费时间的原则，页面部分的基本功能都是大致相似的。使用提供的基本模块代码构建模块信息。

    配置接口请求路径

    由于后端是微服务，每个工程的端口号都不一样，所以这里就需要用到vue提供的代理，修改config\dev.env.js

    1. 'use strict'
    2. const merge = require('webpack-merge')
    3. const prodEnv = require('./prod.env')
    4.  
    5. module.exports = merge(prodEnv, {
    6.   NODE_ENV: '"development"',
    7.   BASE_API: '"api"'
    8. })

    在config/index.js中通过proxyTable配置代理转发的请求后端地址

    1.    proxyTable: {
    2.       //企业信息请求的远程服务
    3.       '/api/company': {
    4.           target: 'http://localhost:9001/company/',
    5.           changeOrigin: true,
    6.           pathRewrite: {
    7.             '^/api/company': ''
    8.           }
    9.         },
    10.         //api/sys/     user
    11.        '/api/sys': {
    12.           target: 'http://localhost:9002/sys/',
    13.           changeOrigin: true,
    14.           pathRewrite: {
    15.             '^/api/sys': ''
    16.           }
    17.         }
    18.     },

    骚戴理解：上面这段代码是一个vue.js项目中的配置文件，用于将本地请求代理到对应的远程服务上，以解决跨域问题。其中，proxytable是一个对象，它包含了需要代理的不同路径及其对应的远程服务。

    例如，当有请求发起至'/api/company'时，在本地服务器上不能直接访问远程服务

    'http://localhost:9001/company/'，因此我们在这里通过配置proxytable将其代理到对应的远程服务上。changeorigin为true表示是否改变源，pathrewrite是一个映射规则，将请求的路径中的

    '/api/company'部分替换为''，即去除了/api/company的前缀。同样的方式适用于/api/sys的请求。

    导入员工模块

    注册模块

    1. import employees from '@/module-employees/' // 员工管理
    2. Vue.use(employees, store)

    在/src/api/base/下配置API（user.js）

    1. import {createAPI} from '@/utils/request'
    2. export const list = data => createAPI('/sys/user', 'get', data)
    3. export const simple = data => createAPI('/sys/user/simple', 'get', data)
    4. export const add = data => createAPI('/sys/user', 'post', data)
    5. export const update = data => createAPI(`/sys/user/${data.id}`, 'put', data)
    6. export const remove = data => createAPI(`/sys/user/${data.id}`, 'delete', data)
    7. export const detail = data => createAPI(`/sys/user/${data.id}`, 'get', data)

    用户列表展示

    页面代码

    1. <template>
    2.   <div class="dashboard-container">
    3.     <div class="app-container">
    4.       <el-card>
    5.         <span class="seleInfo">
    6.           <el-select v-model="requestParameters.stausInfo">
    7.             <el-option v-for="item in baseData.stausInfos" :key="item.value" :label="item.label" :value="item.value">
    8.             </el-option>
    9.           </el-select>
    10.         </span>
    11.         <span class="posInfo">
    12.           本月&nbsp;&nbsp;(--)&nbsp;&nbsp;
    13.           <span>在职：
    14.             <em>--</em>
    15.           </span>
    16.           <span>入职：
    17.             <em class="active">--</em>
    18.           </span>
    19.           <span>离职：
    20.             <em class="disabled">--</em>
    21.           </span>
    22.         </span>
    23.         <div class="fr">
    24.             <router-link :to="{'path':'/employees/import/',query: {name: '员工'}}" class="el-button el-button--primary el-button--mini" title="导入">导入</router-link>
    25.             <el-button type="primary" size="mini" title="设置">设置</el-button>
    26.             <router-link :to="{'path':'/employees/archiving/'}" class="el-button el-button--primary el-button--mini" title="历史归档">历史归档</router-link>
    27.             <router-link :to="{'path':'/employees/report/1'}" class="el-button el-button--primary el-button--mini" >1月份报表</router-link>
    28.             <el-button  type="primary" size="mini" icon="el-icon-plus" @click="handlAdd">新增员工</el-button>
    29.         </div>
    30.       </el-card>
    31.       <el-card shadow="never" class="boxMar">
    32.         <el-table :data="dataList" fit style="width: 100%;" border>
    33.           <el-table-column type="index" :index="1" label="序号" width="150"> </el-table-column>
    34.           <el-table-column sortable prop="username" label="姓名" width="150"></el-table-column>
    35.           <el-table-column sortable prop="mobile" label="手机号" width="150"></el-table-column>
    36.           <el-table-column sortable prop="workNumber" label="工号" width="120"></el-table-column>
    37.           <el-table-column sortable prop="formOfEmployment" label="聘用形势" width="200"></el-table-column>
    38.           <el-table-column sortable prop="departmentName" label="部门" width="200"></el-table-column>
    39.           <el-table-column sortable prop="timeOfEntry" label="入职时间" width="150"></el-table-column>
    40.           <el-table-column sortable label="状态" width="120">
    41.             <template slot-scope="scope">
    42.               <el-switch 
    43.               v-model="scope.row.accountStatus" 
    44.               active-color="#13ce66"
    45.               inactive-color="#ff4949"
    46.                @change="handleStatus(scope.row)">
    47.               </el-switch>
    48.             </template>
    49.           </el-table-column>
    50.           <el-table-column fixed="right" label="操作" align="center" width="220">
    51.             <template slot-scope="scope">
    52.               <router-link :to="{'path':'/employees/details/' + scope.row.id}" class="el-button el-button--text el-button--small">
    53.                 查看
    54.               </router-link>
    55.               <el-button @click="handleRole(scope.row)" type="text" size="small">分配角色</el-button>
    56.               <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
    57.             </template>
    58.           </el-table-column>
    59.         </el-table>
    60.         <!-- 分页 -->
    61.         <div class="pagination">
    62.           <PageTool :paginationPage="requestParameters.page" :paginationPagesize="requestParameters.size" :total="counts" @pageChange="handleCurrentChange" @pageSizeChange="handleSizeChange">
    63.           </PageTool>
    64.         </div>
    65.         <!-- end -->
    66.         <!-- 新增员工弹层 -->
    67.         <component v-bind:is="employeesAdd" ref="addUser" @doQuery="doQuery"></component>
    68.         <!--分配角色组件 -->
    69.  
    70.       </el-card>
    71.     </div>
    72.   </div>
    73. </template>
    74.

    js构造数据

    1. <script>
    2. import constantApi from '@/api/constant/employees'
    3. import {list,remove} from "@/api/base/users"
    4. import PageTool from './../../components/page/page-tool'
    5. import employeesAdd from './../components/add'
    6. export default {
    7.   name: 'employeesList',
    8.   components: {
    9.     PageTool,employeesAdd
    10.   },
    11.   data() {
    12.     return {
    13.       employeesAdd: 'employeesAdd',
    14.       baseData: constantApi,
    15.       dataList: [],
    16.       counts: '',
    17.       requestParameters:{
    18.         page: 1,
    19.         size: 10,
    20.       }    
    21.     }
    22.   },
    23.   methods: {
    24.     // 业务方法
    25.     doQuery(params) {
    26.         list(this.requestParameters)
    27.         .then(res => {
    28.           this.dataList = res.data.data.rows
    29.           this.counts = res.data.data.total
    30.         })
    31.     },
    32.     // 每页显示信息条数
    33.     handleSizeChange(size) {
    34.       this.requestParameters.size = size
    35.       if (this.requestParameters.page === 1) {
    36.         this.doQuery(this.requestParameters)
    37.       }
    38.     },
    39.     // 进入某一页
    40.     handleCurrentChange(val) {
    41.       this.requestParameters.page = val
    42.       this.doQuery()
    43.     },
    44.     // 添加新员工
    45.     handlAdd() {
    46.       this.$refs.addUser.dialogFormVisible=true
    47.     },
    48.     // 删除
    49.     handleDelete(item) {
    50.       this.$confirm(
    51.         `本次操作将删除${item.username}删除后账号将不可恢复，您确认删除吗？`,{
    52.          type: 'warning'
    53.         }
    54.       ).then(() => {
    55.           remove({ id: item.id })
    56.             .then(response => {
    57.               this.$message.success('删除成功' + '!')
    58.               this.doQuery();
    59.             })
    60.         })
    61.     }
    62.   },
    63.   // 创建完毕状态
    64.   created: function() {
    65.     this.doQuery()
    66.   },
    67. }
    68. </script>
    69.  
    70. <style rel="stylesheet/scss" lang="scss" scoped>
    71. .iconInfo {
    72.   .fa {
    73.     color: #999;
    74.     font-size: 14px;
    75.     cursor: pointer;
    76.   }
    77.   a {
    78.     padding: 0 5px;
    79.   }
    80. }
    81. .serachInput {
    82.   .el-input--medium {
    83.     width: 150px;
    84.     .el-input__inner {
    85.     }
    86.   }
    87. }
    88. .serachInput .el-input--medium .el-input__inner {
    89.   height: 26px;
    90.   line-height: 26px;
    91. }
    92. </style>

    用户详情

    配置路由

    1.      {
    2.         path: 'details/:id',
    3.         component: _import('employees/pages/employees-details'),
    4.         // hidden: true // 是否显示在左侧菜单
    5.         name: 'details',
    6.         meta: {
    7.           title: '详情'
    8.        }
    9.      }

    完成用户详情页面

    1. <template>
    2.   <div class="dashboard-container">
    3.     <div class="app-container">
    4.       <el-card :style="{minHeight:boxHeight}">
    5.           <el-tabs v-model="activeName" class="infoPosin">
    6.             <el-tab-pane name="first" class="rInfo">
    7.               <span slot="label">登录账户设置</span>
    8.               <component v-bind:is="accountInfo" :objId='objId' ref="user"></component>
    9.             </el-tab-pane>
    10.             <el-tab-pane name="two" class="rInfo">
    11.                 <span slot="label">个人详情</span>
    12.             </el-tab-pane>
    13.             <el-tab-pane name="third" class="rInfo">
    14.                 <span slot="label">岗位信息</span>
    15.             </el-tab-pane>
    16.         </el-tabs>
    17.       </el-card>
    18.     </div>
    19.   </div>
    20. </template>
    21. <script>
    22. import accountInfo from './../components/details-account-info'
    23. export default {
    24.   name: 'employeesDetails',
    25.   components: { accountInfo},
    26.   data() {
    27.     return {
    28.       accountInfo:'accountInfo',
    29.       activeName: 'first',
    30.       objId: this.$route.params.id,
    31.       dataList: []
    32.    }
    33.  }
    34. }
    35. </script>

    用户信息组件

    1. <template>
    2.   <div class="boxInfo">
    3.     <!-- 表单内容 -->
    4.     <div class="formInfo">
    5.       <div>
    6.         <!-- 头部信息  -->
    7.         <div class="userInfo">
    8.              <div class="headInfo clearfix">
    9.                <div class="headText">
    10.                  <el-form ref="formData" :model="formData" label-width="215px">
    11.                      <el-form-item label="姓名：">
    12.                        <el-input v-model="formData.username" placeholder="请输入"
    13. class="inputW"></el-input>
    14.                      </el-form-item>
    15.                      <el-form-item label="密码：">
    16.                        <el-input v-model="formData.password" placeholder="请输入"
    17. class="inputW"></el-input>
    18.                     </el-form-item>
    19.                     <el-form-item label="部门：">
    20.                         <el-input
    21.                           placeholder="请选择"
    22.                           v-model="formData.departmentName"
    23.                           icon="caret-bottom"
    24.                           class="inputW"
    25.                           @click.native="isShowSelect = !isShowSelect">
    26.                         </el-input>
    27.                         <input v-model="formData.departmentId" type="hidden" >
    28.                         <el-tree v-if="isShowSelect"
    29.                          :expand-on-click-node="false"
    30.                          :data="inspectionObjectOptions"
    31.                          :props="{label:'name'}"
    32.                           default-expand-all
    33.                          :filter-node-method="filterNode"
    34.                            @node-click="handleNodeClick"
    35.                           class="objectTree"
    36.                           ref="tree2">
    37.                         </el-tree>
    38.                     </el-form-item>
    39.                       <el-form-item>
    40.                         <el-button type="primary" @click="saveData">更新</el-button>
    41.                         <router-link :to="{'path':'/employees/index'}" class="el-button 
    42. el-button--text el-button--small">
    43.                           取消
    44.                         </router-link>
    45.                       </el-form-item>
    46.                  </el-form>
    47.                </div>
    48.              </div>
    49.         </div>
    50.       </div>
    51.     </div>
    52.     </div>
    53. </template>
    54. <script>
    55. import constantApi from '@/api/constant/employees'
    56. import {detail,update} from "@/api/base/users"
    57. import { organList } from '@/api/base/departments'
    58. export default {
    59.   name: 'accountInfo',
    60.   props: ['objId'],
    61.   data() {
    62.     return {
    63.       baseData: constantApi,
    64.       inspectionObjectOptions: [],
    65.       isShowSelect:false,
    66.       formData: {
    67.         id: this.objId,
    68.      }
    69.    }
    70.  },
    71.   methods: {
    72.     handleNodeClick(data) {
    73.       this.formData.departmentName = data.name
    74.       this.formData.departmentId = data.id
    75.       this.isShowSelect = false
    76.    },
    77.     // 获取详情
    78.     getObjInfo() {
    79.       detail({ id: this.objId }).then(res => {
    80.           this.formData = res.data.data
    81.      })
    82.    },
    83.     saveData(obj) {
    84.       update(this.formData)
    85.        .then(res => {
    86.           this.formData = res.data
    87.           this.$message.success('保存成功！')
    88.           this.getObjInfo()
    89.      })
    90.    },
    91.  },
    92.   // 创建完毕状态
    93.   created: function() {
    94.     this.getObjInfo()
    95.     organList().then(ret => {
    96.       this.inspectionObjectOptions.push(ret.data.data)
    97.    })
    98.  }
    99. }
    100. </script>

    用户的新增

    和组织机构的增删改查大同小异

    作业-角色管理

    需求分析

    完成角色的基本CRUD操作

    后端实现

    实体类

    1. package com.ihrm.domain.system;
    2. import com.fasterxml.jackson.annotation.JsonIgnore;
    3. import lombok.Getter;
    4. import lombok.Setter;
    5. import javax.persistence.*;
    6. import java.io.Serializable;
    7. import java.util.HashSet;
    8. import java.util.Set;
    9. @Entity
    10. @Table(name = "pe_role")
    11. @Getter
    12. @Setter
    13. public class Role implements Serializable {
    14.     private static final long serialVersionUID = 594829320797158219L;
    15.     @Id
    16.     private String id;
    17.     /**
    18.      * 角色名
    19.      */
    20.     private String name;
    21.     /**
    22.      * 说明
    23.      */
    24.     private String description;
    25.     /**
    26.      * 企业id
    27.      */
    28.     private String companyId;
    29.     @JsonIgnore
    30.     @ManyToMany(mappedBy="roles")
    31.     private Set<User> users = new HashSet<User>(0);//角色与用户   多对多
    32.     @JsonIgnore
    33.     @ManyToMany
    34.     @JoinTable(name="pe_role_permission",
    35.             joinColumns={@JoinColumn(name="role_id",referencedColumnName="id")},
    36.             inverseJoinColumns=
    37. {@JoinColumn(name="permission_id",referencedColumnName="id")})
    38.     private Set<Permission> permissions = new HashSet<Permission>(0);//角色与模块 多对多
    39. }

    持久化层

    1. package com.ihrm.system.dao;
    2. import com.ihrm.system.domain.Role;
    3. import org.springframework.data.jpa.repository.JpaRepository;
    4. import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
    5. /**
    6.   * 企业数据访问接口
    7.   */
    8. public interface RoleDao extends JpaRepository<Role, String>, 
    9. JpaSpecificationExecutor<Role> {
    10. }

    业务逻辑层

    1. package com.ihrm.system.service;
    2. import com.ihrm.common.utils.IdWorker;
    3. import com.ihrm.system.dao.CompanyDao;
    4. import com.ihrm.system.dao.RoleDao;
    5. import com.ihrm.system.dao.UserDao;
    6. import com.ihrm.system.domain.Company;
    7. import com.ihrm.system.domain.Role;
    8. import com.ihrm.system.domain.User;
    9. import org.springframework.beans.factory.annotation.Autowired;
    10. import org.springframework.data.domain.Page;
    11. import org.springframework.data.domain.PageRequest;
    12. import org.springframework.data.jpa.domain.Specification;
    13. import org.springframework.stereotype.Service;
    14. import javax.persistence.criteria.CriteriaBuilder;
    15. import javax.persistence.criteria.CriteriaQuery;
    16. import javax.persistence.criteria.Predicate;
    17. import javax.persistence.criteria.Root;
    18. import java.util.ArrayList;
    19. import java.util.HashMap;
    20. import java.util.List;
    21. import java.util.Map;
    22. /**
    23. * 角色操作业务逻辑层
    24. */
    25. @Service
    26. public class RoleService {
    27.     @Autowired
    28.     private IdWorker idWorker;
    29.     @Autowired
    30.     private RoleDao roleDao;
    31.     /**
    32.      * 添加角色
    33.      */
    34.     public void save(Role role) {
    35.         //填充其他参数
    36.         role.setId(idWorker.nextId() + "");
    37.         roleDao.save(role);
    38.    }
    39.     /**
    40.      * 更新角色
    41.      */
    42.     public void update(Role role) {
    43.         Role targer = roleDao.getOne(role.getId());
    44.         targer.setDescription(role.getDescription());
    45.         targer.setName(role.getName());
    46.         roleDao.save(targer);
    47.    }
    48.     /**
    49.      * 根据ID查询角色
    50.      */
    51.     public Role findById(String id) {
    52.         return roleDao.findById(id).get();
    53.    }
    54.     /**
    55.      * 删除角色
    56.      */
    57.     public void delete(String id) {
    58.         roleDao.deleteById(id);
    59.    }
    60.     public Page<Role> findSearch(String companyId, int page, int size) {
    61.         Specification<Role> specification = new Specification<Role>() {
    62.             @Override
    63.             public Predicate toPredicate(Root<Role> root, CriteriaQuery<?> query, 
    64. CriteriaBuilder cb) {
    65.                 return cb.equal(root.get("companyId").as(String.class),companyId);
    66.            }
    67.        };
    68.         return roleDao.findAll(specification, PageRequest.of(page-1, size));
    69.    }
    70. }

    控制器层

    1. package com.ihrm.system.controller;
    2. import com.ihrm.common.entity.PageResult;
    3. import com.ihrm.common.entity.Result;
    4. import com.ihrm.common.entity.ResultCode;
    5. import com.ihrm.system.domain.Role;
    6. import com.ihrm.system.domain.User;
    7. import com.ihrm.system.service.RoleService;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.data.domain.Page;
    10. import org.springframework.data.jpa.domain.Specification;
    11. import org.springframework.web.bind.annotation.*;
    12. import javax.persistence.criteria.CriteriaBuilder;
    13. import javax.persistence.criteria.CriteriaQuery;
    14. import javax.persistence.criteria.Predicate;
    15. import javax.persistence.criteria.Root;
    16. import java.util.HashMap;
    17. import java.util.Map;
    18. @RestController
    19. @RequestMapping("/sys")
    20. public class RoleController {
    21.     
    22.     @Autowired
    23.     private RoleService roleService;
    24.     //添加角色
    25.     @RequestMapping(value = "/role", method = RequestMethod.POST)
    26.     public Result add(@RequestBody Role role) throws Exception {
    27.         String companyId = "1";
    28.         role.setCompanyId(companyId);
    29.         roleService.save(role);
    30.         return Result.SUCCESS();
    31.    }
    32.     //更新角色
    33.     @RequestMapping(value = "/role/{id}", method = RequestMethod.PUT)
    34.     public Result update(@PathVariable(name = "id") String id, @RequestBody Role role) 
    35. throws Exception {
    36.         roleService.update(role);
    37.         return Result.SUCCESS();
    38.    }
    39.     //删除角色
    40.     @RequestMapping(value = "/role/{id}", method = RequestMethod.DELETE)
    41.     public Result delete(@PathVariable(name = "id") String id) throws Exception {
    42.         roleService.delete(id);
    43.         return Result.SUCCESS();
    44.    }
    45.     /**
    46.      * 根据ID获取角色信息
    47.      */
    48.     @RequestMapping(value = "/role/{id}", method = RequestMethod.GET)
    49.     public Result findById(@PathVariable(name = "id") String id) throws Exception {
    50.         Role role = roleService.findById(id);
    51.         return new Result(ResultCode.SUCCESS,role);
    52.    }
    53.     /**
    54.      * 分页查询角色
    55.      */
    56.     @RequestMapping(value = "/role", method = RequestMethod.GET)
    57.     public Result findByPage(int page,int pagesize,Role role) throws Exception {
    58.         String companyId = "1";
    59.         Page<Role> searchPage = roleService.findSearch(companyId, page, pagesize);
    60.         PageResult<Role> pr = new
    61. PageResult(searchPage.getTotalElements(),searchPage.getContent());
    62.         return new Result(ResultCode.SUCCESS,pr);
    63.    }
    64. }

    前端实现

    参考资料自行实现

  • 相关阅读:
    【一周安全资讯1014】交通运输部发布《公路工程设施支持自动驾驶技术指南》；多地网信办对违反数据安全法规企业作出行政处罚
    springcloud3 分布式事务解决方案seata之TCC模式6
    Linux(ubuntu)安装AppImage步骤
    expressDemo不能使用import
    SAP EWM-计划补货操作演示实例
    Vue2进阶之Vue2高级用法
    计算机操作系统重点概念整理-第一章 计算机系统概述【期末复习|考研复习】
    k8s集群内偶现无法访问外部域名怎么解？
    【无标题】
    控制瑞芯微平台GPIO（输入、输出、电平读取）
  • 原文地址：https://blog.csdn.net/qq_50954361/article/details/130250841