SaaS |
您所在的位置：网站首页 › 多系统统一权限管理系统有哪些 › SaaS |
SaaS
|
1、RBAC模型
1.1 什么是RBAC模型
RBAC（全称：Role-Based Access Control）基于角色的权限访问控制，作为传统访问控制（自主访问，强制访问）的有前景的代替受到广泛的关注。在RBAC中，权限与角色相关联，用户通过成为适当角色的成员而得到这些角色的权限。这就极大地简化了权限的管理。在一个组织中，角色是为了完成各种工作而创造，用户则依据它的责任和资格来被指派相应的角色，用户可以很容易地从一个角色被指派到另一个角色。角色可依新的需求和系统的合并而赋予新的权限，而权限也可根据需要而从某角色中回收。角色与角色的关系可以建立起来以囊括更广泛的客观情况。 访问控制是针对越权使用资源的防御措施，目的是为了限制访问主体（如用户等） 对访问客体（如数据库资源等）的访问权限。企业环境中的访问控制策略大部分都采用基于角色的访问控制（RBAC）模型，是目前公认的解决大型企业的统一资源访问控制的有效方法 1.2 基于RBAC的设计思路基于角色的访问控制基本原理：在用户和访问权限之间加入角色这一层，实现用户和权限的分离，用户只有通过激活角色才能获得访问权限。 通过角色对权限分组，大大简化了用户权限分配表，间接地实现了对用户的分组，提高了权限的分配效率。且加入角色层后，访问控制机制更接近真实世界中的职业分配，便于权限管理。原理图如下：
在RBAC模型中，角色是系统根据管理中相对稳定的职权和责任来划分，每种角色可以完成一定的职能。用户通过饰演不同的角色获得角色所拥有的权限，一旦某个用户成为某角色的成员，则此用户可以完成该角色所具有的职能。通过将权限指定给角色而不是用户，在权限分派上提供了极大的灵活性和极细的权限指定粒度。 1.3 RBAC的表结构
一个用户拥有若干角色，每一个角色拥有若干权限。这样，就构造成“用户-角色-权限”的授权模型。在这种模型中，用户与角色之间，角色与权限之间，一般者是多对多的关系。 2、SAAS-HRM中的权限设计 2.1 需求分析 2.1.1 SAAS平台的基本元素
SAAS平台管理员 ：负责平台的日常维护和管理，包括用户日志的管理、租户账号审核、租户状态管理、租户费用的管理，要注意的是平台管理员不能对租户的具体业务进行管理 企业租户 ：指访问SaaS平台的用户企业，在SaaS平台中各租户之间信息是独立的。 租户管理员 ：为租户角色分配权限和相关系统管理、维护。 租户角色 ：根据业务功能租户管理员进行角色划分，划分好角色后，租户管理员可以对相应的角色进行权限分配 租户用户 ：需对租户用户进行角色分配，租户用户只能访问授权的模块信息。 2.1.2 需求分析在应用系统中，权限是以什么样的形式展现出来的？对菜单的访问，页面上按钮的可见性，后端接口的控制，都要进行充分考虑 前端 前端菜单：根据是否有请求菜单权限进行动态加载 按钮：根据是否具有此权限点进行显示/隐藏的控制 后端 前端发送请求到后端接口，有必要对接口的访问进行权限的验证 2.2 权限设计针对这样的需求，在有些设计中可以将菜单，按钮，后端API请求等作为资源，这样就构成了基于RBAC的另一种授权模型（用户-角色-权限-资源）。在SAAS-HRM系统的权限设计中我们就是才用了此方案，方案原理图：
针对此种权限模型，其中权限究竟是属于菜单，按钮，还是API的权限呢？那就需要在设计数据库权限表的时候添加类型加以区分（如权限类型 1为菜单 2为功能 3为API）。 2.3 表结构分析
这里要注意的是，权限表与权限菜单表、页面元素表与API接口表都是一对一的关系 与传统的RBAC模型对比不难发现此种设计的好处： 1. 不需要区分哪些是操作，哪些是资源 2. 方便扩展，当系统要对新的东西进行权限控制时，我只需要建立一个新的资源表，并确定这类权限的权限类型标识即可。 3、权限管理之用户管理 3.1 需求分析用户其实就是saas企业访问的员工，对企业员工完成基本的CRUD操作 为了进行用户管理的时候不报错，我们需要把所有的权限相关的表都创建好，下面开始创建： 用户表 bs_user 表结构如下： CREATE TABLE `bs_user` ( `id` VARCHAR(40) NOT NULL COMMENT 'ID', `mobile` VARCHAR(40) NOT NULL COMMENT '手机号码', `username` VARCHAR(255) NOT NULL COMMENT '用户名称', `password` VARCHAR(255) DEFAULT NULL COMMENT '密码', `enable_state` INT(2) DEFAULT '1' COMMENT '启用状态 0是禁用，1是启用', `create_time` DATETIME DEFAULT NULL COMMENT '创建时间', `department_id` VARCHAR(40) DEFAULT NULL COMMENT '部门ID', `time_of_entry` DATETIME DEFAULT NULL COMMENT '入职时间', `form_of_employment` INT(1) DEFAULT NULL COMMENT '聘用形式', `work_number` VARCHAR(20) DEFAULT NULL COMMENT '工号', `form_of_management` VARCHAR(8) DEFAULT NULL COMMENT '管理形式', `working_city` VARCHAR(16) DEFAULT NULL COMMENT '工作城市', `correction_time` DATETIME DEFAULT NULL COMMENT '转正时间', `in_service_status` INT(1) DEFAULT NULL COMMENT '在职状态 1.在职 2.离职', `company_id` VARCHAR(40) DEFAULT NULL COMMENT '企业ID', `company_name` VARCHAR(40) DEFAULT NULL, `department_name` VARCHAR(40) DEFAULT NULL, PRIMARY KEY (`id`), UNIQUE KEY `idx_user_phone` (`mobile`) USING BTREE ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4注意：用户表中有company_id、company_name用来关联企业，有department_id、department_name来关联部门。 角色表 pe_role 表结构如下： CREATE TABLE pe_role( id VARCHAR(40) NOT NULL COMMENT 'ID', NAME VARCHAR(200) NOT NULL COMMENT '角色名称', description VARCHAR(500) COMMENT '说明', company_id VARCHAR(40) COMMENT '企业ID', PRIMARY KEY (`id`) ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4用户和角色关联表 pe_user_role 表结构如下： CREATE TABLE pe_user_role( user_id VARCHAR(40) NOT NULL COMMENT '用户ID', role_id VARCHAR(200) NOT NULL COMMENT '角色ID' ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4权限表 pe_permission 结构如下： CREATE TABLE pe_permission( id VARCHAR(40) NOT NULL COMMENT 'ID', NAME VARCHAR(40) NOT NULL COMMENT '权限名称（菜单名称，按钮名称，api名称）', TYPE INT NOT NULL COMMENT '权限类型 1为菜单 2为功能 3为API', CODE VARCHAR(40) NOT NULL COMMENT '权限编码,权限控制根据这个值来判断', description VARCHAR(500) COMMENT '权限描述', pid VARCHAR(40) COMMENT '父id，比如菜单就是按钮的父', en_visible INT COMMENT '是否可见,1可见，0不可见（表示不让企业看到）', PRIMARY KEY (`id`) ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4角色和权限关系表 pe_role_permission 结构如下： CREATE TABLE pe_role_permission( role_id VARCHAR(40) NOT NULL COMMENT '角色ID', permission_id VARCHAR(40) NOT NULL COMMENT '权限ID' ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4菜单资源表：pe_permission_menu CREATE TABLE pe_permission_menu( id VARCHAR(40) NOT NULL COMMENT 'ID', menu_icon VARCHAR(200) COMMENT '菜单图标', menu_order VARCHAR(10) COMMENT '排序号', PRIMARY KEY (`id`) ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4按钮（页面元素）资源表：pe_permission_point CREATE TABLE pe_permission_point( id VARCHAR(40) NOT NULL COMMENT 'ID', point_class VARCHAR(200) COMMENT '菜单图标', point_icon VARCHAR(200) COMMENT '排序号', point_status VARCHAR(20) COMMENT '状态', PRIMARY KEY (`id`) ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4API资源表： CREATE TABLE pe_permission_api( id VARCHAR(40) NOT NULL COMMENT 'ID', api_url VARCHAR(500) COMMENT '请求链接', api_method VARCHAR(10) COMMENT '请求类型', api_level VARCHAR(50) COMMENT '权限等级，1为通用接口权限，2为需校验接口权限', PRIMARY KEY (`id`) ) ENGINE=INNODB DEFAULT CHARSET=utf8mb43.2 创建系统微服务 我们在父工程下创建一个新的module，名称是ihrm_system微服务，里面包括了用户，角色，权限和资源的相关操作，导入对象的maven依赖坐标： 3.2.1 pom.xml ihrm_parent com.zdw.ihrm 1.0-SNAPSHOT 4.0.0 com.zdw.ihrm ihrm_system org.springframework.boot spring-boot-starter-data-jpa mysql mysql-connector-java com.zdw.ihrm ihrm-common 1.0-SNAPSHOT com.zdw.ihrm ihrm_common_model 1.0-SNAPSHOT 3.2.2 application.yml在ihrm_system的resources目录下面创建application.yml资源文件： #服务配置 server: port: 9002 #spring配置 spring: #1.应用配置 application: name: ihrm-system #指定服务名 #2.数据库连接池 datasource: driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/ihrm?useUnicode=true&characterEncoding=utf8 username: root password: 123 #3.JPA jpa: database: MySQL show-sql: true open-in-view: true 3.2.3 启动类SystemApplication首先在ihrm_common_model模块下面创建包：com.zdw.ihrm.domain.system，接下来我们系统权限相关的实体都放置在这个包下面： package com.zdw.ihrm.system; import com.ihrm.common.utils.IdWorker; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.boot.autoconfigure.domain.EntityScan; import org.springframework.context.annotation.Bean; @SpringBootApplication(scanBasePackages = "com.zdw.ihrm")//配置SpringBoot的包扫描 @EntityScan("com.zdw.ihrm.domain.system")//配置jpa注解的包扫描 public class SystemApplication { public static void main(String[] args) { SpringApplication.run(SystemApplication.class,args); } @Bean //把我们的ID生成器的工具类IdWorker交给spring管理 public IdWorker idWorker(){ return new IdWorker(1,1); } } 3.3 创建权限相关实体类为了进行用户管理的时候不报错，我们需要把所有的权限相关的实体类都创建好，下面开始创建： 在模块ihrm_common_model的包com.zdw.ihrm.domain.system下面创建实体类User： package com.zdw.ihrm.domain.system; import com.fasterxml.jackson.annotation.JsonIgnore; import lombok.Getter; import lombok.NoArgsConstructor; import lombok.Setter; import javax.persistence.*; import java.io.Serializable; import java.util.Date; import java.util.HashSet; import java.util.Set; /** * 用户实体类 */ @Entity @Table(name="bs_user") @Setter @Getter public class User implements Serializable { private static final long serialVersionUID = -9081174821948625789L; @Id private String id;//id private String mobile;//手机号码 private String username;//用户名称 private String password;//密码 private Integer enableState;//启用状态 0为禁用 1为启用 private Date createTime;//创建时间 private String companyId;//公司id private String companyName;//公司名称 private String departmentId;//部门ID private Date timeOfEntry;//入职时间 private Integer formOfEmployment;//聘用形式 private String workNumber;//工号 private String formOfManagement;//管理形式 private String workingCity;//工作城市 private Date correctionTime;//转正时间 private Integer inServiceStatus;//在职状态 1.在职 2.离职 private String departmentName;//部门名称 /** * JsonIgnore * : 忽略json转化 */ @JsonIgnore @ManyToMany @JoinTable(name="pe_user_role",joinColumns={@JoinColumn(name="user_id",referencedColumnName="id")}, inverseJoinColumns={@JoinColumn(name="role_id",referencedColumnName="id")} ) private Set roles = new HashSet();//用户与角色 多对多 }在模块ihrm_common_model的包com.zdw.ihrm.domain.system下面创建实体类Role： package com.zdw.ihrm.domain.system; import com.fasterxml.jackson.annotation.JsonIgnore; import lombok.Getter; import lombok.Setter; import javax.persistence.*; import java.io.Serializable; import java.util.HashSet; import java.util.Set; @Entity @Table(name = "pe_role") @Setter @Getter public class Role implements Serializable { private static final long serialVersionUID = 6713592245887087629L; @Id private String id;//id private String name;//角色名 private String description;//说明 private String companyId;//企业id @JsonIgnore @ManyToMany(mappedBy="roles") private Set users = new HashSet(0);//角色与用户 多对多 @JsonIgnore @ManyToMany @JoinTable(name="pe_role_permission", joinColumns={@JoinColumn(name="role_id",referencedColumnName="id")}, inverseJoinColumns={@JoinColumn(name="permission_id",referencedColumnName="id")}) private Set permissions = new HashSet(0);//角色与模块 多对多 }在模块ihrm_common_model的包com.zdw.ihrm.domain.system下面创建实体类Permission： package com.zdw.ihrm.domain.system; import lombok.Getter; import lombok.NoArgsConstructor; import lombok.Setter; import org.hibernate.annotations.DynamicInsert; import org.hibernate.annotations.DynamicUpdate; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.Table; import java.io.Serializable; @Entity @Table(name = "pe_permission") @Getter @Setter @NoArgsConstructor @DynamicInsert(true) @DynamicUpdate(true) public class Permission implements Serializable { private static final long serialVersionUID = 401339996505164073L; @Id private String id;//主键id private String name;//权限名称 private Integer type;//权限类型 1为菜单 2为功能 3为API private String code;//权限编码，后面的权限控制根据这个值来判断 private String description;//权限描述 private String pid;//父id，比如菜单就是按钮的父 private Integer enVisible;//是否可见 public Permission(String name, Integer type, String code, String description) { this.name = name; this.type = type; this.code = code; this.description = description; } }在模块ihrm_common_model的包com.zdw.ihrm.domain.system下面创建实体类PermissionMenu： package com.zdw.ihrm.domain.system; import lombok.Getter; import lombok.Setter; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.Table; import java.io.Serializable; /** * Description: 菜单权限实体类 */ @Entity @Table(name = "pe_permission_menu") @Getter @Setter public class PermissionMenu implements Serializable { private static final long serialVersionUID = -1002411490113957485L; @Id private String id;//主键 //展示图标 private String menuIcon; //排序号 private String menuOrder; }在模块ihrm_common_model的包com.zdw.ihrm.domain.system下面创建实体类PermissionPoint： package com.zdw.ihrm.domain.system; import lombok.Getter; import lombok.Setter; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.Table; import java.io.Serializable; /** * Description: 按钮权限实体类 */ @Entity @Table(name = "pe_permission_point") @Getter @Setter public class PermissionPoint implements Serializable { private static final long serialVersionUID = -1002411490113957485L; @Id private String id;//主键 private String pointClass;//样式 private String pointIcon;//小图标 private String pointStatus;//状态 }在模块ihrm_common_model的包com.zdw.ihrm.domain.system下面创建实体类PermissionApi： package com.zdw.ihrm.domain.system; import lombok.Getter; import lombok.Setter; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.Table; import java.io.Serializable; /** */ @Entity @Table(name = "pe_permission_api") @Getter @Setter public class PermissionApi implements Serializable { private static final long serialVersionUID = -1803315043290784820L; @Id private String id;//主键 private String apiUrl;//链接 private String apiMethod;//请求类型 private String apiLevel;//权限等级，1为通用接口权限，2为需校验接口权限 } 3.4 用户管理后端基本操作 3.4.1 Dao层在ihrm_system的包com.zdw.ihrm.system.dao下面创建UserDao接口： package com.zdw.ihrm.system.dao; import com.zdw.ihrm.domain.system.User; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaSpecificationExecutor; public interface UserDao extends JpaRepository,JpaSpecificationExecutor { } 3.4.2 业务层service在ihrm_system的包com.zdw.ihrm.system.service下面创建UserService： package com.zdw.ihrm.system.service; import com.ihrm.common.entity.Result; import com.ihrm.common.utils.IdWorker; import com.zdw.ihrm.domain.system.User; import com.zdw.ihrm.system.dao.UserDao; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.jpa.domain.Specification; import org.springframework.stereotype.Service; import org.springframework.util.StringUtils; import javax.persistence.criteria.CriteriaBuilder; import javax.persistence.criteria.CriteriaQuery; import javax.persistence.criteria.Predicate; import javax.persistence.criteria.Root; import java.util.ArrayList; import java.util.List; import java.util.Map; @Service public class UserService { @Autowired private UserDao userDao; @Autowired private IdWorker idWorker; //保存用户 public void save(User user){ String id = idWorker.nextId()+""; user.setId(id); user.setPassword("123456");//设置初始密码 user.setEnableState(1); user.setCreateTime(new Date());//设置创建时间 userDao.save(user);//保存操作 } //更新用户 public void update(User user){ //1.根据id查询部门 User target = userDao.findById(user.getId()).get(); //2.设置部门属性 target.setUsername(user.getUsername()); target.setPassword(user.getPassword()); target.setDepartmentId(user.getDepartmentId()); target.setDepartmentName(user.getDepartmentName()); //3.更新部门 userDao.save(target); } /** * 4.分页查询全部用户列表 * 参数：map集合的形式 * hasDept 是否分配了部门：0未分配 1 已分配 * departmentId * companyId * */ public Page findAll(Map map,int page, int size){ //构造查询条件对象 Specification specification = new Specification() { /** * 动态拼装查询条件 * @return */ @Override public Predicate toPredicate(Root root, CriteriaQuery criteriaQuery, CriteriaBuilder criteriaBuilder) { List list = new ArrayList(); //根据请求的companyId是否为空构造查询条件 if(!StringUtils.isEmpty(map.get("companyId"))){//companyId不为空 list.add(criteriaBuilder.equal(root.get("companyId").as(String.class),(String)map.get("companyId"))); } //根据请求的departmentId是否为空构造查询条件 if(!StringUtils.isEmpty(map.get("departmentId"))){//departmentId不为空 list.add(criteriaBuilder.equal(root.get("departmentId").as(String.class),(String)map.get("departmentId"))); } if(!StringUtils.isEmpty(map.get("hasDept"))) {//如果传了这个参数，才做条件查询 //根据请求的hasDept判断 是否分配部门 0未分配（departmentId = null），1 已分配 （departmentId ！= null） if("0".equals((String) map.get("hasDept"))) { list.add(criteriaBuilder.isNull(root.get("departmentId"))); }else { list.add(criteriaBuilder.isNotNull(root.get("departmentId"))); } } return criteriaBuilder.and(list.toArray(new Predicate[list.size()])); } }; //分页 PageRequest pageRequest = new PageRequest(page-1,size); Page userPage = userDao.findAll(specification, pageRequest); return userPage; } //根据id查询用户 public User findtById(String id){ return userDao.findById(id).get(); } //根据id删除用户 public void deleteById(String id){ userDao.deleteById(id); } } 3.4.3 控制层controller在ihrm_system的包com.zdw.ihrm.system.controller下面创建UserController： package com.zdw.ihrm.system.controller; import com.ihrm.common.controller.BaseController; import com.ihrm.common.entity.PageResult; import com.ihrm.common.entity.Result; import com.ihrm.common.entity.ResultCode; import com.zdw.ihrm.domain.system.User; import com.zdw.ihrm.system.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.web.bind.annotation.*; import java.util.Map; @CrossOrigin//解决跨域问题 @RestController @RequestMapping("sys") public class UserController extends BaseController { @Autowired private UserService userService; //保存用户 @RequestMapping(value = "/user", method = RequestMethod.POST) public Result save(@RequestBody User user){ //1.设置保存的企业id user.setCompanyId(parseCompanyId()); user.setCompanyName(parseCompanyName()); //2.调用service完成保存企业 userService.save(user); //3.构造返回结果 return new Result(ResultCode.SUCCESS); } //更新用户 @RequestMapping(value = "/user/{id}", method = RequestMethod.PUT) public Result update(@PathVariable("id") String id,@RequestBody User user){ //1.设置修改的部门id user.setId(id); //2.调用service更新 userService.update(user); return new Result(ResultCode.SUCCESS); } //根据id查询用户 @RequestMapping(value = "/user/{id}", method = RequestMethod.GET) public Result findById(@PathVariable("id") String id){ User user = userService.findtById(id); return new Result(ResultCode.SUCCESS,user); } //查询用户列表，根据条件分页 /** * 查询企业的部门列表 * 指定企业id */ @RequestMapping(value = "/user", method = RequestMethod.GET) public Result findAll(@RequestParam Map map,int page,int size){ //1.获取当前的企业id map.put("companyId",parseCompanyId()); //2.完成查询 Page pageUser = userService.findAll(map,page,size); //3.构造返回结果 PageResult pageResult = new PageResult(pageUser.getTotalElements(),pageUser.getContent()); return new Result(ResultCode.SUCCESS, pageResult); } //根据id删除用户 public Result deleteById(String id){ userService.deleteById(id); return new Result(ResultCode.SUCCESS); } } 3.5 用户管理前端在前端项目的src目录下，创建模块：module-employees
在main.js中注册刚才创建的用户模块： /* * 注册 - 业务模块 */ import dashboard from '@/module-dashboard/' // 面板 import demo from '@/module-demo/' // 面板 import saasClients from '@/module-saas-clients/' // 把企业模块注册到项目中 import departments from '@/module-departments/' // 把企业的组织部门模块注册到项目中 import employees from '@/module-employees/' // 把用户管理模块注册到项目中 import tools from './utils/common.js' Vue.prototype.$tools = tools Vue.use(tools) Vue.use(dashboard, store) Vue.use(demo, store) Vue.use(saasClients, store) // 把企业模块注册到项目中 Vue.use(departments, store) // 把企业的组织部门模块注册到项目中 Vue.use(employees, store) // 把用户管理模块注册到项目中 3.5.2 api方法在 /src/api/base/ 下配置API（users.js） import {createAPI} from '@/utils/request' export const list = data => createAPI('/sys/user', 'get', data) export const simple = data => createAPI('/sys/user/simple', 'get', data) export const add = data => createAPI('/sys/user', 'post', data) export const update = data => createAPI(`/sys/user/${data.id}`, 'put', data) export const remove = data => createAPI(`/sys/user/${data.id}`, 'delete', data) export const detail = data => createAPI(`/sys/user/${data.id}`, 'get', data) export const assignRoles = data => createAPI(`/sys/user/assignRoles`, 'put', data) 3.5.3 配置接口请求路径现在我们的后台有两个微服务，企业微服务和系统微服务，而我们前端就需要分别取获取这两个微服务来获取数据，所以我们需要在config/index.js里面配置，如下： module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '', proxyTable: { //企业信息请求的远程服务 '/api/company': { target: 'http://localhost:9001/company/', changeOrigin: true, pathRewrite: { '^/api/company': '' } }, //系统服务请求的远程服务 '/api/sys': { target: 'http://localhost:9002/sys/', changeOrigin: true, pathRewrite: { '^/api/sys': '' } } } //这里省略了其他的配置没有贴出来 }同时我们需要config/dev.env.js： 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', //BASE_API: '"http://localhost:9001/"' 这是之前的配置 BASE_API: '"api"' }) 3.5.4 导入权限相关的数据字典相关js在src下面创建constant目录，constant目录下载地址：https://download.csdn.net/download/zengdongwen/11999416 3.5 前端相关代码 3.5.1 路由配置 module-employees目录的router目录下的index.js 文件配置了用户模块的路由信息： import Layout from '@/module-dashboard/pages/layout' const _import = require('@/router/import_' + process.env.NODE_ENV) export default [ { root: true, path: '/employees', component: Layout, name: 'employees', meta: { title: 'employees', icon: 'people' }, children: [ // 列表 { path: 'index', component: _import('employees/pages/index'), name: 'employees-index', meta: { title: '员工管理', icon: 'people', noCache: true } }, // 详情 { path: 'details/:id', component: _import('employees/pages/details'), // hidden: true // 是否显示在左侧菜单 name: 'details', meta: { title: '员工详情' } } ] } ] 3.5.2 index.vue员工列表页面 本月;;(--);; 在职： -- 入职： -- 离职： -- 导入 设置 历史归档 1月份报表 新增员工 查看 分配角色 删除 import constantApi from '@/api/constant/employees' import {list,remove} from "@/api/base/users" import PageTool from './../../components/page/page-tool' import employeesAdd from './../components/add' export default { name: 'employeesList', components: { PageTool,employeesAdd }, data() { return { employeesAdd: 'employeesAdd', baseData: constantApi, dataList: [], counts: '', requestParameters:{ page: 1, size: 10, } } }, methods: { // 业务方法 doQuery(params) { list(this.requestParameters) .then(res => { this.dataList = res.data.data.rows this.counts = res.data.data.total }) }, // 每页显示信息条数 handleSizeChange(size) { this.requestParameters.size = size if (this.requestParameters.page === 1) { this.doQuery(this.requestParameters) } }, // 进入某一页 handleCurrentChange(val) { this.requestParameters.page = val this.doQuery() }, // 添加新员工 handlAdd() { this.$refs.addUser.dialogFormVisible=true }, // 删除 handleDelete(item) { this.$confirm( `本次操作将删除${item.username}删除后账号将不可恢复，您确认删除吗？`,{ type: 'warning' } ).then(() => { remove({ id: item.id }).then(response => { this.$message.success('删除成功' + '!') this.doQuery(); }) }) } }, // 创建完毕状态 created: function() { this.doQuery() }, } .iconInfo { .fa { color: #999; font-size: 14px; cursor: pointer; } a { padding: 0 5px; } } .serachInput { .el-input--medium { width: 150px; .el-input__inner { } } } .serachInput .el-input--medium .el-input__inner { height: 26px; line-height: 26px; } 3.5.3 index.vue中引用的组件employeesAdd在index.vue中，添加用户对话框是引用的组件： !-- 新增员工弹层 -->而在index.vue中也导入了该组件：import employeesAdd from './../components/add' 所以查看componets目录下的add.vue组件代码： 提交 取消 import { add, jobnumber } from '@/api/base/users' import * as deptApi from '@/api/base/dept' import employeesData from '@/api/constant/employees' import commonApi from '@/utils/common' var _this = null export default { name: 'add', data() { return { formBase:{}, dialogFormVisible: false, isShowSelect: false, depts: [], employeesData : employeesData.hireType, } }, methods: { createData() { add(this.formBase).then(res => { this.$message({message:res.data.message,type:res.data.success?"success":"error"}); if(res.data.success) { this.dialogFormVisible = false this.$emit('doQuery', {}) } }) }, handleNodeClick(data) { this.formBase.departmentName = data.name this.formBase.departmentId = data.id this.isShowSelect = false }, }, // 创建完毕状态 created: function() { deptApi.list().then(ret => { this.depts = commonApi.transformTozTreeFormat(ret.data.data.depts) }) } } .inputText { width: 400px; height: 32px; resize: none; line-height: 22px; overflow: hidden; font-size: 12px; border: 1px solid #dddee1; padding: 4px 7px; border-radius: 5px; } .objectTree{ position: absolute; width:300px; z-index:999; border: 1px solid #dddee1; left: 0; border-radius: 5px; }上面相关的就是前端代码了，其他还没用到的代码是关联角色的时候要使用的，后续要介绍。 |
【本文地址】