人力资源-后台管理项目

1.项目准备

公共统一样式一般在style

2.登录模块

1. @路径

设置@路径在vue.config.js中

注意：在css中使用@路径，前需要加~，例如background-image: url(“~@/assets/common/login_back.png”);

2.登录表单的校验（使用element的表单校验）

1. 校验规则
   
2. html结构
   el-form-item要设置prop熟悉，和上面的校验规则搭配。
   
3. 在数据前可以定义自定义校验函数，规则中使用validator来调用规则函数。
   

3.解决跨域问题

1. 开发环境跨域-配置代理服务器
   
2. 生产环境的跨域问题
   

4.登录有关的文件

1. 封装token有关的函数
   写在util中，例如设置token，删除token，并暴露出去。
2. 对api中发请求的函数书写，暴露。
3. store仓库，vuex中设置相关的登录，并将登录成功获取到的token永久化存储。调用token相关的函数。
4. 在登录页面中判断条件，调用发请求，获取token。

5.axios响应拦截器

在响应拦截器中对请求返回的结果做处理。
请求失败，抛出错误。

3. 首页模块

1.token权限拦截处理

注意: 有无token ，
有则判断跳转页面是否是登录，有token且要去登录页面直接跳转到主页。有token其他页面，则直接放行。
无token则，判断是否是白名单页面（比如登录，和404页面），是则直接放行，否则则调用dispatch发起登录请求。并且跳转到登录页。

2.获取用户信息

注意：没有携带，请求参数没有携带数据，但在请求拦截器中判断是否有token，如果有，则携带头信息。否则，则不携带。

3.头像数据与用户信息合并。

因为头像数据不在和用户信息同一个接口，所以合并起来。

4.利用自定义指令来解决图片异常

当图片异常时，使用自定义指令，调用onerror函数，把src转为默认头像。
参数dom为指令绑定的元素节点。options是一个对象，里面包含着绑定元素的一系列信息，value为src的值。


指令绑定的变量即为图片产生差错是默认图片。

5.退出登录

1. 删除token
2. 删除获取到的用户信息。
3. 删除vuex存的数据。

6.token失效

1. 主动介入（前端设置的超时时间）

   
   
   登录成功后，存储登录成功的时间。
   在请求拦截器中，判断有token之后，判断token是否过期。设置一个超时时间，利用发起请求的时间减去token创建的时间/1000和设定的超时时间比较。
   如果超时，则调用退出登录请求，删除token。回到登录页面。

2. token的被动处理（token后端写的超时）
   
   判断超时的错误码是否和后端设计的一致，超时则重复之前的行为（退出登录，删除token等）。

7.遇到的问题

1.
把getToken()写在请求拦截器之前，所以每次的获取的token都是上次的token，跟新登录获取的token不一样。所以获取用户信息报token超时错误。

解决方法：只需要把getToken()方法写在请求拦截器中即可。这样在发起请求的时候再获取token就不会出错了。

4.路由页面整理

1.搭建路由，设置每个路由的路由规则

二级路由的path不设置，则默认该路由为二级路由的默认路由。
meta中的title表示左侧导航栏的标题。icon则为图标。

2.动态路由暂时和静态路由合并（还没做权限管理）

临时合并所有路由。

3.左侧图标

左侧菜单的图标实际上读取的是meta属性的icon，这个icon需要我们提前放置在src/icons/svg目录下

5.组织架构模块

1.认识element树形结构

1. el-tree

data是需要的数据，props是显示data中属性的内容。

2.封装树形组件

slot-scope =“{data}”这里data是之前tree中data属性的每一行数据。再用treeNode接收到每一行的数据，传给子组件。

利用isRoot属性，来按需选择操作的功能，如果是根的话，只有添加操作。

3.获取组织部门数据

1. 封装接口。
2. 书写方法，发送请求。

4.处理部门数据

返回的数据没有区分父子。但可以通过pid可以区分。
这里使用递归算法，来处理数据。

5.删除部门功能实现

1. element的下拉菜单的@command函数触发，判断默认参数type是什么，来执行不同的操作。
   
   
   通过自定义事件，来获取拿到的每个参数。

6.新增功能与编辑功能

1. 封装一个对话框组件，新增和编辑都是使用此组件进行操作。

2.利用sync来实现对话框的显示与消失。

:mony.sync = “money” 代表这:mony=“money"以及绑定了一个自定义事件为update.money，当触发此自定义事件，则改变父组件的money值。

通过dialog的visible来实现显示与隐藏。

3.@close的触发条件

当对话框消失即触发该回调函数。

4.element表单的基本参数

1.model为数据获取之后放在哪里。
2.label-width要和label-position一起使用，position是左右对其。
3.rules是验证规则
4. prop是获取参数提交到表单的model的。
5.rules规则的属性要和model的属性名对应。

5.表单的自定义校验

1.写在data的return之前，函数有三个参数，value，为输入的值，callback为验证之后执行的回调。
如果不符合校验规则，直接调用callback里面传个error错误。

6.表单的提交

1. 给表单打个ref，通过ref获取到表单。
   2.通过表单的validate函数
   3.参数valid为表单的参数是否满足校验规则，是一个Boolean类型。
   4.如果为true在执行逻辑。
   

7.判断编辑还是新增

通过判断表单数据是否有id，
因为点编辑的时候，数据直接赋值到form参数上，渲染到表单上。发请求获取到的详情信息有id，
而新增的是没有id的。
编辑和新增因为有id的区别，他们以下需要修改：

1. 验证规则。
2. 点击确定，发起的请求。
3. 对话框的title，通过计算属性来改变。

8.清空数据。

1.清空表单

直接赋值为空对象即可。

2.清空验证规则

@close对话框一消失即调用。要注意数据此时请求是否以及发送。不然数据清空，发请求会出现问题。

9.element进度条

v-loading指令，发请求的时候设置为true，请求结束，设置为false。

6.公司角色模块

1.由于异步微任务和@close触发的时机问题，出现请求的问题。

之前把窗口设置为隐藏放在了valid函数的外面，这样其实是先执行@close这个函数的，因为同步任务比异步微任务先执行。
而当执行请求的时候，此时表单数据已经被@close函数给清空了。
所以发生了一系列的错误。

7.员工模块

1.封装一个通用的工具栏

左边的图标使用icon，用一个大盒子包裹。
左侧的文字说明则是使用具名插槽。
这样在不同的地方使用该组件时，可以替换不同的内容。

2.员工列表页面

主要使用表格。

注意：表格中利用作用域插槽，来获取每一行的数据。

3.对表格的数据进行格式化。

1. 对聘用形式进行格式化。
   使用了element表格的formatter函数进行格式化。
   
   
   formatter回调定义在methods中。

2. 处理时间我使用了filter和dayjs
   
   

3. 使用element的开关处理账户状态，判断是否为1，为1则开。
   

4.删除员工

调用接口，删除员工。成功提示消息，失败提示消息。

5.新增员工

1.新建员工弹层组件

利用el-dialog搭配sync来控制弹层的显示和消失。

2.加载部门使用树形控件

1.使用一个input框和tree组件共同组成
2.当input触发focus事件时，获取部门数据。
3.设置一个showtree来控制tree组件的显示与消失。
4.当点击树形控件的数据时，调用selectNode方法，获取到选中的数据的值，把值写入到要提交的数据中。
5.并把showtree改变为false。

6.excel导入功能

https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/UploadExcel/index.vue

1.创建新动态路由，当点击excel导入跳转到excel导入页面。
2.类似功能vue-admin-template已经提供，只需修改即可。
3.导入功能需要xlsx插件
4.安装xlsx。

5.复制的upload组件不需要修改。直接使用即可（导入xlsx方式需要修改一下）
6只需要修改on-success的函数。

7.因为excel的表头是中文，所以需要一系列操作对数据进行操作。需要把键名通过以下方法进行转为英文。
8.并通过dayjs对时间进行格式化。

9.发起请求，添加员工。（中间还可做一些数据处理，比如手机号唯一等等）。

7.excel导出

1. 安装所需依赖
   

2. 基于js-xlsx封装了Export2Excel。
   Export2Excel.js

3. 首先获取所有员工的数据。

4. 再调用formatJson函数来获取导入数据的格式。

5. 

6. 设置是否选择复杂表头，进行合并单元格等操作。
   

7. 再把header，data数据，文件名，复杂表头，单元格合并选项写在excel的export_json_to_excel函数的对象中。

8.员工详情页

利用el-tabs标签页实现该效果。
点击查看按钮时，传用户id过来。到用户详情页。

1. 登录账户设置

在created钩子中，获取数据，回显到表单中。通过校验规则进行更新。

2.个人详情页

封装成一个组件。并在created时调用数据，回显数据。校验数据。点击更新按钮，判断是否符合校验规则，通过则更新数据，发送修改请求。重新调用数据请求，回显。

3.岗位详情

同理。

4.利用对象存储cos来存放我们的图片资源。

配置腾讯云Cos

5.封装上传图片组件

1.利用el-upload（照片墙）上传来实现。
2.利用照片墙的http-request属性覆盖默认的上传行为，自定义上传。

6.上传函数

7.上传图片进度条

利用element进度条。首先设置一个变量percent，并设置v-show。

当上传失败或者上传成功后，1秒后percent变回0；

8.把上传图片更新，回显到照片墙上。

回显：
判断数据的图片是是否是多张的，是多张的通过split以逗号为分隔成为函数，即通过ref来获取上传图片组件的filelist设置为此函数。

保存：
判断照片墙组件的filelist是否每一项的status都是成功。
如果都是成功，则把每一项的图片拿出来连接为一个以逗号分隔的字符串。

9.优化自定义指令v-imagerror

如果图片为空，直接把图片的src设置为defaultImg。

10.qrCode生产二维码

点击图片，弹框出现。
设置showAvr为true，此时dom还没有进行渲染。
使用$nextTick(()=>{})钩子，等到下一次dom渲染完毕时，才能使用ref获取到弹框。使用QrCode的toCanvas改变为二维码。

11.打印功能

使用 vue-print-nb插件

用法：import Print from ‘vue-print-nb’
Vue.use(Print);

使用方法：v-print=“id值”

即点击打印按钮，把id为printMe的dom全部打印。
而这里我设置id为printMe的dom节点为整个页面。

8.权限模块-RABC的权限设计思想

即给角色分配权限，而给用户赋予不同的角色，来给予权限。

1.页面访问权限
2. 按钮访问权限
3. API访问权限

1.分配员工角色

1.点击角色，弹出对话框
2.发起请求，获取所有角色。
3.通过id来获取用户所拥有的角色。
4.修改拥有的角色。点击确定发起更改角色的api，修改成功。

2.权限点管理页面

1.发起api请求，获取所有权限点信息，
2.拿到数据，使用formatTree把数据转换为树形数据。
3.点击不同的添加权限，把id传入，权限添加在此id权限的子权限中。
4.编辑，删除权限，通过id传入api进行编辑删除。

3.分配权限

1.点击分配权限，首先获取所有的权限点。
2.通过传入的id获取到该角色已经拥有的权限。
3.通过element的tree型组件，渲染权限点。
4.点击确定，完成角色的权限点的分配。

4.页面访问权限。

1.当有token，跳转其他页面时，发起请求获取用户信息权限标识。
2.拿到权限标识，发起action，把所有的动态路由和获取的标识进行比对。动态产生动态路由。

3.在mutations中合并静态路由和动态路由。

4.使用router的addRoutes(array)进行动态路由的添加。

5.注意：这里必须把404路由加在动态路由的最后一个。如果加在静态路由里，当重新刷新时，原有的权限也会消失。
因为每次刷新，动态路由还没有添加进去，先执行了404.
6.这里有个非常容易出问题的位置，当我们判断用户是否已经添加路由的前后，不能都是用next()，
// 在添加路由之后应该使用 next(to.path)， 否则会使刷新页面之后 权限消失，这属于一个vue-router的已知缺陷

7. 不要忘记，把router里的路由改成只有静态路由。
8. 退出登录的时候，需要把路由清空。
   不仅要清空vuex的路由。也要使用resetRouter()方法进行重置路由。
   

注意：本来应该拥有权限的页面出现了404，这是因为404的匹配权限放在了静态路由，而动态路由在没有addRoutes之前，找不到对应的地址，就会显示404，所以我们需要将404放置到动态路由的最后

5.功能权限应用

通过用户信息的points。用户信息的points其实就是权限点时设置的权限标识。

1.只需要判断哪些points没有，其对应的功能就禁用。反之，则可以操作。

9.首页的页面结构

1.工作日历组件封装

1.对element的calendar进行二次封装
2.使用样式穿透对不需要的效果进行修改，比如下月。

3.使用两个select来进行选择年份和月份。 created钩子中，使用获取当前时间。令他们选中的是当前的年份和时间。
4.使用for循环对数据进行初始化。

5.利用slot-scope，element的calendar的参数。

6.对选中的日期添加样式。
7.对星期日和星期天的日期添加样式。使用日期的getDay()进行判断。

2.雷达图组件封装

1.首先安装依赖

2.在组件中建一个节点div，打上ref。
3.按需引入-参照官网的文档

4.写一个函数，用于构建图标。并在mounted钩子函数中调用该函数。
5.设置option，在函数中进行初始化。可以参照文档进行书写。echarts官网。

10.国际化

1.使用vue-i18n实现

1. 安装依赖
   
   2.引入element的英文包和中文包。
   引入自定义中文包，
   自定义英文包。
   lang/index.js
   

main.js

3. 在左侧菜单中应用。

11.多页签

1.使用开发好的子组件tagsview
2.使用全局注册
3.vuex中使用tagsview.js
4.

12.打包上线

1.使用node，express或koa跨架进行部署到本地上线。