员工的导入
员工导入组件封装
2.安装xlsx插件：npm i xlsx
3.注册全局导入excel组件：install(Vue){ Vue.component('xxx',xxx)}
4.修改样式和布局（在最下面）
一，建立公共导入的页面路由
1.挂载路由
2.创建路由组件
二，分析excel导入代码，封装接口
对外通过props传入了两个方法：
props: {
beforeUpload: Function,
onSuccess: Function
},
1.结构中有带file属性的input标签，处于隐藏状态，并绑定了ref属性，其中accept属性只能传入.xlsx和.xls文件，并绑定了change事件
2.上传按钮绑定了点击事件，通过$refs调用了input标签的点击事件
3.当input标签传入文件时，通过事件参数e.target.files判断是否有该文件
4.如果有改文件，该组件中封装的方法会将文件中的数据读取解析成两个中文数组，其中一个为标题组成的数组header，另一个为数据对象组成数组results
5.当传入的onSuccess函数存在时，{header，results}两个数组会当做参数传入onSuccess函数
6.封装批量导入员工数据的接口，传入的参数必须为数组类型
三，实现excel导入
目标：将results 数组对象中的中文键值转化为英文，在导入接口渲染数据
1.在需导入页面中定义onSuccess( { header, results } )函数
2.定义results中中文键值和所对应英文的对应关系对象，例如：obj= {'中文': '英文'...}
3.将results数组通过map遍历出里面的对象，再将对象通过Object.keys(xxx)方法将其中的中文键给遍历出来，再遍历出obj中的英文和results 中的值，定义一个空对象arr，通过arr[英文] = results 中的值进行赋值，return arr，因map会新返回一个数组，声明一个新数组newArr接收
4.将封装好的批量导入员工数据的接口引入，并将newArr传入
5.数据导入之后，通过this.$router.back()和$router.back('/import')进行路由切换
四，解决导入时间问题
1.定义一个日期格式的转换方法
formatDate(numb, format) { const time = new Date((numb - 1) * 24 * 3600000 + 1) time.setYear(time.getFullYear() - 70) const year = time.getFullYear() + '' const month = time.getMonth() + 1 + '' const date = time.getDate() - 1 + '' if (format && format.length === 1) { return year + format + month + format + date } return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date) }
2.arr数组进行赋值时判断英文值是否为入职日期或转正日期
3.符合条件new Date(formatDate(值，‘/’))，只有new一个Date才能导入
员工的导出
excel导出参数的介绍和所需依赖和按需加载
1.安装依赖:
npm install xlsx file-saver -S
npm install script-loader -S -D
2.在 js-xlsx的基础上又封装了Export2Excel.js：https://github.com/PanJiaChen/vue-element-admin/blob/master/src/vendor/Export2Excel.js来方便导出数据
3.给导出按钮绑定点击事件
4.使用懒加载导入封装的Export2Excel.js(为promise对象)，通过.then引入数据中的export_json_to_excel方法，传入参数
5.传入的参数介绍
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| header (主要) | 导出数据的表头 | Array | / | [] |
| data (主要) | 导出的具体数据 | Array | / | [[]] |
| filename | 导出文件名 | String | / | excel-list |
| autoWidth (默认可不写) | 单元格是否要自适应宽度 | Boolean | true / false | true |
| bookType (默认可不写) | 导出文件类型 | String | xlsx, csv, txt, more | xlsx |
excel导出的基本结构
目标：将原数据结构[{ name: 'zs', age: '18'...}...] 转化为 [[zs,18...]...]，要求转出的标题是中文
1.和导入一样定义一个中英文对应的键值对对象headers{'姓名': 'username',....}
2.使用Object.keys(headers)将值传入参数header中
3.获取所有员工数据，将之前获取接口中传入page：1,和size：this.page.total总数，得到所有员工数据rows
4.封装一个数据结构转化的方法，将所有员工数据rows和headers当参数传入，方法中将rows.map遍历出{英文：数据}的对象，再将Object.keys(headers)通过map把对应的中文遍历出来，通过数组层层嵌套从而得到数据值，由于map方法会形成一个新的数据，用retun层层返回能够得到 [[zs,18...]...]的数据结构，最后将调用函数赋值给参数data
导出时间格式处理
1.引入原先filters过滤器文件夹中时间格式化方法
2.判断遍历出来的数据是否为入职日期和转正日期，如果是则将时间数据格式化
聘用形式格式化处理
目标：将聘用形式数据中的1或0转化为正式或非正式
1.引入枚举数据文件夹
2.判断遍历出来的数据是否为聘用形式
3.符合条件则利用find方法将枚举中的数据遍历，判断枚举数据中的id是否等于数据中的值，如果是则返回枚举数据中的value，否则返回未知
复杂表头的导出
vue-element-admin 提供的导出方法中有 multiHeader和merges 的参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| multiHeader | 复杂表头的部分 | Array | / | [[]] |
| merges | 需要合并的部分 | Array | / | [] |
1.multiHeader中的一行表头中的字段的个数需要和真正的列数相等，假设想要跨列，多余的空间需要定义成空串，它主要对应的是标准的表头
2.我们要实现其合并的效果， 需要设定merges选项，例如：[['A1:A2', 'B1:F1', 'G1:G2']]
修改的样式和布局:
<template> <div class="upload-excel"> <div class="btn-upload"> <el-button :loading="loading" size="mini" type="primary" @click="handleUpload"> 点击上传 </el-button> </div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"> <i class="el-icon-upload" /> <span>将文件拖到此处</span> </div> </div> </template>
<style scoped lang="scss"> .upload-excel { display: flex; justify-content: center; margin-top: 100px; .excel-upload-input{ display: none; z-index: -9999; } .btn-upload , .drop{ border: 1px dashed #bbb; width: 350px; height: 160px; text-align: center; line-height: 160px; } .drop{ line-height: 80px; color: #bbb; i { font-size: 60px; display: block; } } } </style>
1238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
