人力资源项目逐字稿

一、登录

我们做的人资系统是个后台管理系统, 不是人人都能访问, 于是需要登录系统.
整个登录流程大概分为三个部分
首先是使用 ElementUI 组件进行登录表单的布局
接着在这个表单当中, 用组件自带的校验功能配置好用户输入的格式校验, 包括手机号格式, 密码长度
一旦用户输入完毕, 点击登录, 其实就开始发送请求, 这里咱们将登录逻辑封装在了 vuex 里面, 不是直接调用接口, 反而是调用 vuex 的actions, 拿到token 存在 vuex 的 state 里面, 然后进行页面跳转即可
一些细节是, 刷新数据会丢失, 所以咱们用了本地储存进行数据持久化

二、角色管理页-公司设置

我们的后台管理系统中有个公司设置页面里面显示公司信息和角色管理表格
其中公司信息比较简单, 只是进入页面发送请求, 绑定到 表单中就可以, 不用做任何修改
但是角色管理就复杂一些, 是后台系统中常见的增删查改业务,
首先是进入页面获取数据并且用 element ui 的表格和分页组件实现渲染的功能
新增用的是 elment ui 的 dialog 弹窗, 每当点击新增按钮的时候弹出, 里面有个表单, 带有数据的绑定和表单验证, 当用户输入完毕所有数据, 点击确定的时候, 发送请求即可, 当然为了用户的体验, 在请求前后, 做了表单校验, 用户提醒, 页面的数据更新等等优化, 如果用户点击了取消, 咱们会清理表单数据和校验再关闭, 并且这个操作不知取消按钮需要, 表单 close 事件也需要, 为的是照顾点击右上方 X 按钮操作.
编辑时其实是复用了新增弹窗, 区别在于, 会在点击时带上被点击角色 id, 向后端获取详情回填到表单上再弹起弹窗,还有就是会在用户点击确定时, 根据表单有没有 id 存在决定是新增还是编辑请求.
删除时最简单的功能, 点击时带上id, 发送请求即可, 当然为了用户体验, 删除前后, 加上了二次询问, 提示用户和更新页面的操作。

三、组织架构(部门页)

我们在人力资源管理系统当中, 有一个部门管理页面, 主要是用来添加删除编辑部门的数据
这个页面比较复杂
进入页面时是普通的数据查询获取到后台部门列表, 进行渲染即可
这里有两个问题, 第一是树形组件需要递归数据, 第二树形渲染需要自定义样式, 我们封装了一个函数, 对后台传出来的数据进行了转换, 把原本通过 pid 进行上下级关联的数据转成 elment ui 要求的 children 嵌套, 另外使用作用域插槽自定义了树形组件渲染, 这个逻辑比较复杂, 我们封装在了一个树形组件 tree-tools 当中
查询完成之后, 咱们做了新增和编辑删除的功能, 因为新增和编辑功能比较复杂, 也是封装了一个组件作为弹窗, 里面有一个表单, 供用户输入部门数据, 点击确定后就能发送请求进行数据处理
这个页面最难的点在于, 树形子组件+父页面+弹窗子组件之间的交互, 因为点击树形子组件时需要将弹窗弹起来, 并且弹窗也需要知道到底是哪个部门触发了新增和编辑, 解决方案是, 通过父页面作为桥梁, 间接实现树形和弹窗通讯, 逻辑是,每当树形被点击, 将事件和被点击的id往父页面传, 父页面存储到 data 以后再传给 弹窗组件即可
这里面还做了一个附加的校验功能, 部门名称在同一个父部门下不能重名, 部门编码, 在整个公司都不能重复, 这里使用到了element ui 表单中的自定义校验函数, 每当输入框失去焦点就会触发校验函数, 在里面我们拿到整个公司的部门列表, 根据需要跟用户, 如果有重复就报错, 最终实现发送请求之前完成重名校验
删除时最简单的, 就是带上 id 发个请求即可, 后续有提醒用户, 更新页面数据等体验上的操作

四、员工管理

员工管理页面，主要是实现员工的增删改查，批量导入导出员工功能。
首页进入页面是需要接口获取到员工列表数据，然后配置elementUI组件进行渲染。
新增员工主要用到dialog组件和表单组件配置新增接口实现新增功能。
编辑员工，主要是员工详情信息比较多，所以是配置了一个独立的路由页面来实现功能的，首先是获取到员工id，然后根据员工id进行数据回显，然后再调用编辑接口实现员工信息的修改，这里涉及到腾讯云cos（对象存储）的使用，因为所有的员工头像都是上传到腾讯云cos中的，腾讯云cos使用的注意点就是需要添加允许跨域的配置，其他只需要按照文档实现即可，这里我们也专门封装了一个功能上传图片的组件出来。
删除员工，只需要点击删除按钮的时候获取到该员工的id，然后调用删除接口实现删除功能，这里我们也考虑到了误删的情况，因此点击删除按钮的时候会先显示“是否确认删除”的询问框，当用户再次确认的时候才实现真正的删除。
批量导入导出功能，这个功能主要是利用xlsx插件实现导入导出功能，这里的难点是导出的时候，需要把请求到的数据转换为xlsx要求的格式才能导出成功；实现批量导入功能的时候，也需要把通过xlsx插件解析好的Excel表格数据转换为接口需要的数据格式。
比如：批量导入数据时，因为获取到的Excel表格数据字段都是中文名的，但是后端接口需要的是英文名，因此我们把数据通过接口传递给后端之前需要先把数据转换为后端规定的格式，我们的做法是先准备好一个中英文字段对照字典表，然后再根据字典表把Excel表格的中文字段名替换成英文字段名，从而实现数据转换。（注意：这一段如果面试官 没有问题具体数据是怎么转换的，不需要跟面试官讲，如果问到了可以这样回答）

五、权限设置

人资项目中有一个权限设置页面，这个页面主要是用来实现权限数据的增删改查。
首先进入页面通过接口获取到全选数据，然后配置elementUI的表格组件进行渲染。因为权限分为页面访问权限和按钮操作权限因此渲染的时候需要把数据渲染成一个表格的树形结构，因此我们获取到数据后首先通过一个递归函数把数据转为树形结构，然后再配合表格组件的用法渲染成一个表格树形结构的。
然后是新增权限功能，新增权限功能要注意的是需要区分新增的是按钮操作权限还是页面访问权限，如果是页面访问权限的话必须要传递固定的2个参数给后端，pid为0，type为1，以此表示此刻用户添加的是页面访问权限，当添加的是按钮操作权限的时候，传递pid为页面访问权限的id，type为固定值2，以此表示用户此刻添加的是按钮操作权限。
编辑权限功能直接复用新增功能的结构样式，编辑权限的时候首先要获取到点击的那个权限的id并通过该id获取权限详情数据最后进行数据回显，然后调用编辑权限接口，传入新的数据从而实现编辑功能。
删除功能相对比较简单，只需要点击删除按钮的时候获取到该权限的id，然后调用删除接口实现删除功能，这里我们也考虑到了误删的情况，因此点击删除按钮的时候会先显示“是否确认删除”的询问框，当用户再次确认的时候才实现真正的删除。

六、RBAC权限设计

人资项目权限设计用到的是现在比较流行的一种设计模，叫RBAC的权限设计模式，这个模式主要有3个部分构成，员工，角色以及权限，我们要做的就是先完成员工，角色，以及权限的增删改查，然后给员工添加角色，给角色添加权限，这样员工就具有对应的权限了，我们这里的权限主要是两个方面的权限，一个页面访问权限，一个是按钮操作权限。
当我们在系统中完成了权限配置之后，员工登录系统可以通过一个接口获取到该员工的“页面访问权限点”和“按钮操作权限点”。那么我们可以根据获取到的这些权限点来分别动态设置页面的访问权限和按钮操作权限。
页面访问权限，先通过获取到的“页面访问权限点”筛选出来具有权限的路由对象，然后是通过路由的一个addRoutes方法实现动态路由权限的添加，。
按钮操作权限主要是通过mixin混入一个全局函数，在函数中通过“按钮操作权限点”查找某个按钮是否具有操作权限，有权限则返回true，否则返回false，最后配置v-if指令实现按钮显示隐藏，从而实现设置按钮操作权限。

七、主页

主页部分主要实现展示日历，流程申请，公告，等信息。
其中日历我们是利用elementUI的组件进行了二次封装，并且对日历的内容进行自定义的显示，比如周末可以在日历中显示一个“休”字（自定义内容主要是因为日历组件提供了作用域插槽给我们使用，才能够实现自定义内容的功能）。
流程申请主要是可以进行“加班离职”，“请假调休”等等的申请，我们直接使用elementUI的dialog组件配合表单组件来实现申请的布局，然后通过调用相应的接口实现申请功能。
公告主要是通过接口获取公司发布的一些公告信息进行展示。