人力资源-后台管理项目
1.项目准备
公共统一样式一般在style
2.登录模块
1. @路径
设置@路径在vue.config.js中
注意：在css中使用@路径，前需要加~，例如background-image: url(“~@/assets/common/login_back.png”);
2.登录表单的校验（使用element的表单校验）
- 校验规则
- html结构
el-form-item要设置prop熟悉，和上面的校验规则搭配。
- 在数据前可以定义自定义校验函数，规则中使用validator来调用规则函数。
3.解决跨域问题
- 开发环境跨域-配置代理服务器
- 生产环境的跨域问题
4.登录有关的文件
- 封装token有关的函数
写在util中，例如设置token，删除token，并暴露出去。 - 对api中发请求的函数书写，暴露。
- store仓库，vuex中设置相关的登录，并将登录成功获取到的token永久化存储。调用token相关的函数。
- 在登录页面中判断条件，调用发请求，获取token。
5.axios响应拦截器
在响应拦截器中对请求返回的结果做处理。
请求失败，抛出错误。
3. 首页模块
1.token权限拦截处理
注意: 有无token ，
有则判断跳转页面是否是登录，有token且要去登录页面直接跳转到主页。有token其他页面，则直接放行。
无token则，判断是否是白名单页面（比如登录，和404页面），是则直接放行，否则则调用dispatch发起登录请求。并且跳转到登录页。
2.获取用户信息
注意：没有携带，请求参数没有携带数据，但在请求拦截器中判断是否有token，如果有，则携带头信息。否则，则不携带。
3.头像数据与用户信息合并。
因为头像数据不在和用户信息同一个接口，所以合并起来。
4.利用自定义指令来解决图片异常
当图片异常时，使用自定义指令，调用onerror函数，把src转为默认头像。
参数dom为指令绑定的元素节点。options是一个对象，里面包含着绑定元素的一系列信息，value为src的值。
指令绑定的变量即为图片产生差错是默认图片。
5.退出登录
- 删除token
- 删除获取到的用户信息。
- 删除vuex存的数据。
6.token失效
-
主动介入（前端设置的超时时间）
登录成功后，存储登录成功的时间。
在请求拦截器中，判断有token之后，判断token是否过期。设置一个超时时间，利用发起请求的时间减去token创建的时间/1000和设定的超时时间比较。
如果超时，则调用退出登录请求，删除token。回到登录页面。 -
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树形结构
- el-tree
data是需要的数据，props是显示data中属性的内容。
2.封装树形组件
slot-scope =“{data}”这里data是之前tree中data属性的每一行数据。再用treeNode接收到每一行的数据，传给子组件。
利用isRoot属性，来按需选择操作的功能，如果是根的话，只有添加操作。
3.获取组织部门数据
- 封装接口。
- 书写方法，发送请求。
4.处理部门数据
返回的数据没有区分父子。但可以通过pid可以区分。
这里使用递归算法，来处理数据。
5.删除部门功能实现
- 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.表单的提交
- 给表单打个ref，通过ref获取到表单。
2.通过表单的validate函数
3.参数valid为表单的参数是否满足校验规则，是一个Boolean类型。
4.如果为true在执行逻辑。
7.判断编辑还是新增
通过判断表单数据是否有id，
因为点编辑的时候，数据直接赋值到form参数上，渲染到表单上。发请求获取到的详情信息有id，
而新增的是没有id的。
编辑和新增因为有id的区别，他们以下需要修改：
- 验证规则。
- 点击确定，发起的请求。
- 对话框的title，通过计算属性来改变。
8.清空数据。
1.清空表单
直接赋值为空对象即可。
2.清空验证规则
@close对话框一消失即调用。要注意数据此时请求是否以及发送。不然数据清空，发请求会出现问题。
9.element进度条
v-loading指令，发请求的时候设置为true，请求结束，设置为false。
6.公司角色模块
1.由于异步微任务和@close触发的时机问题，出现请求的问题。
之前把窗口设置为隐藏放在了valid函数的外面，这样其实是先执行@close这个函数的，因为同步任务比异步微任务先执行。
而当执行请求的时候，此时表单数据已经被@close函数给清空了。
所以发生了一系列的错误。
7.员工模块
1.封装一个通用的工具栏
左边的图标使用icon，用一个大盒子包裹。
左侧的文字说明则是使用具名插槽。
这样在不同的地方使用该组件时，可以替换不同的内容。
2.员工列表页面
主要使用表格。
注意：表格中利用作用域插槽，来获取每一行的数据。
3.对表格的数据进行格式化。
-
对聘用形式进行格式化。
使用了element表格的formatter函数进行格式化。
formatter回调定义在methods中。 -
处理时间我使用了filter和dayjs
-
使用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导出
-
安装所需依赖
-
基于js-xlsx封装了Export2Excel。
Export2Excel.js -
首先获取所有员工的数据。
-
再调用formatJson函数来获取导入数据的格式。
-
-
设置是否选择复杂表头，进行合并单元格等操作。
-
再把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的已知缺陷
- 不要忘记，把router里的路由改成只有静态路由。
- 退出登录的时候，需要把路由清空。
不仅要清空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实现
- 安装依赖
2.引入element的英文包和中文包。
引入自定义中文包，
自定义英文包。
lang/index.js
main.js
- 在左侧菜单中应用。
11.多页签
1.使用开发好的子组件tagsview
2.使用全局注册
3.vuex中使用tagsview.js
4.
