【Vue2项目】人力资源后台管理项目（三）

目录

二、项目实现

2.5 角色管理

2.5.1 角色管理-搭建页面结构

2.5.2 角色管理-获取数据

2.5.3 角色管理-表格自定义结构

2.5.4 角色管理-分页功能

2.5.5 角色管理-新增功能弹层

2.5.6 角色管理-表单数据校验

2.5.7 角色管理-新增角色-确定取消

2.6 左树右表

2.6.1 角色管理-编辑角色-进入行内编辑

2.6.2 角色管理-行内编辑-数据缓存

2.6.3 角色管理-编辑角色-确定取消

2.6.4 角色管理-删除角色

2.6.5 员工管理-页面结构

2.6.6 员工管理-左侧树的加载

2.6.7 员工管理-选中首个节点

2.6.8 员工管理-员工列表结构

2.6.9 员工管理-获取员工数据

2.6.10 员工管理-头像和聘用形式的处理

2.6.11 员工管理-员工分页处理

2.6.12 员工管理-员工模糊搜索

二、项目实现

2.5 角色管理

2.5.1 角色管理-搭建页面结构

---

• 搭建角色管理的页面结构-代码位置(src/views/role/index.vue)

提交代码：

2.5.2 角色管理-获取数据

---

• 封装获取角色API-代码位置(src/api/role.js)

【API封装参数传递】params 与 API 封装https://blog.csdn.net/weixin_52047874/article/details/156953314

• 在初始化时调用API-赋值给数据-代码位置(src/views/role/index.vue)

• 绑定表格属性-代码位置(src/views/role/index.vue)

提交代码：

2.5.3 角色管理-表格自定义结构

---

• 自定义启用列和操作列的结构-代码位置(src/views/role/index.vue)

• 自定义操作列结构-代码位置(src/views/role/index.vue)

提交代码：

2.5.4 角色管理-分页功能

分页功能

• 展示页码

• 切换分页获取数据

分页组件属性

• 当前页码

• 每页条数

• 总数

---

• 定义分页信息-代码位置(src/views/role/index.vue)

• 绑定分页信息-代码位置(src/views/role/index.vue)

• 初始化时将总数赋值-代码位置(src/views/role/index.vue)

• 切换分页时，获取对应页码的数据-代码位置(src/views/role/index.vue)

提交代码：

2.5.5 角色管理-新增功能弹层

---

• 声明变量控制弹层显示-代码位置(src/views/role/index.vue)

• 点击按钮弹出层-代码位置(src/views/role/index.vue)

提问：为啥组织架构要新增和编辑要单独封装一个组件，而角色管理不用呢?这里面有什么原因和讲究吗？

答：其实在企业开发过程中，封装组件并不是必须的，当一个业务或者需求明确，并且会有复用的场景下，封装组件会更佳规范一些，而有的企业为了提升开发效率，速度优先, 不封装组件的情况也是很常见的。

• 放置弹层组件-代码位置(src/views/role/index.vue)