Vue 人资实战篇七员工管理上封装通用的组件、formatter属性、过滤器的使用、树形结构、建立公共导入的页面路由、excel的导入和导出、

1.0 封装一个通用的工具栏

目标：封装一个通用的工具栏供大家使用

1.1 通用工具栏的组件结构

在后续的业务开发中，经常会用到一个类似下图的工具栏，作为公共组件，进行一下封装

组件 src/components/PageTools/index.vue

<template><el-card class="page-tools"><el-row type="flex" justify="space-between" align="middle"><el-col><div  v-if="showBefore" class="before"><i class="el-icon-info" /><!-- 定义前面得插槽 --><slot name="before" /></div></el-col><el-col><el-row type="flex" justify="end"><!-- 定义后面的插槽 --><slot name="after" /></el-row></el-col></el-row></el-card>
</template><script>
export default {props: {showBefore: {type: Boolean,default: false}}
}
</script><style lang='scss'>.page-tools {margin: 10px 0;.before {line-height: 34px;i {margin-right: 5px;color: #409eff;}display: inline-block;padding: 0px 10px;border-radius: 3px;border: 1px solid rgba(145, 213, 255, 1);background: rgba(230, 247, 255, 1);}}
</style>

1.2 组件统一注册

为了方便所有的页面都可以不用引用该组件，可以进行全局注册

提供注册入口 src/componets/index.js

// 该文件负责所有的公共的组件的全局注册   Vue.use
import PageTools from './PageTools'
export default {install(Vue) {//  注册全局的通用栏组件对象Vue.component('PageTools', PageTools)}
}

在入口处进行注册 src/main.js

import Component from '@/components'
Vue.use(Component) // 注册自己的插件

2.0 员工列表页面的基本布局和结构

目标：实现员工列表页面的基本布局和结构

结构代码 src/employees/index.vue

<template><div class="dashboard-container"><div class="app-container"><page-tools :show-before="true"><span slot="before">共166条记录</span><template slot="after"><el-button size="small" type="warning">导入</el-button><el-button size="small" type="danger">导出</el-button><el-button size="small" type="primary">新增员工</el-button></template></page-tools><!-- 放置表格和分页 --><el-card><el-table border><el-table-column label="序号" sortable="" /><el-table-column label="姓名" sortable="" /><el-table-column label="工号" sortable="" /><el-table-column label="聘用形式" sortable="" /><el-table-column label="部门" sortable="" /><el-table-column label="入职时间" sortable="" /><el-table-column label="账户状态" sortable="" /><el-table-column label="操作" sortable="" fixed="right" width="280"><template><el-button type="text" size="small">查看</el-button><el-button type="text" size="small">转正</el-button><el-button type="text" size="small">调岗</el-button><el-button type="text" size="small">离职</el-button><el-button type="text" size="small">角色</el-button><el-button type="text" size="small">删除</el-button></template></el-table-column></el-table><!-- 分页组件 --><el-row type="flex" justify="center" align="middle" style="height: 60px"><el-pagination layout="prev, pager, next" /></el-row></el-card></div></div>
</template>

3.0 员工列表数据请求和分页加载

**目标**实现员工数据的加载和分页请求

首先，封装员工的加载请求 src/api/employees.js

/*** 获取员工的综合列表数据* ***/
export function getEmployeeList(params) {return request({url: '/sys/user',params})
}

然后，实现加载数据和分页的逻辑

import { getEmployeeList } from '@/api/employees'
export default {data() {return {loading: false,list: [], // 接数据的page: {page: 1, // 当前页码size: 10,total: 0 // 总数}}},created() {this.getEmployeeList()},methods: {changePage(newPage) {this.page.page = newPagethis.getEmployeeList()},async getEmployeeList() {this.loading = trueconst { total, rows } = await getEmployeeList(this.page)this.page.total = totalthis.list = rowsthis.loading = false}}
}

绑定表格

      <el-card v-loading="loading"><el-table border :data="list"><el-table-column label="序号" sortable="" type="index" /><el-table-column label="姓名" sortable="" prop="username" /><el-table-column label="工号" sortable="" prop="workNumber" /><el-table-column label="聘用形式" sortable="" prop="formOfEmployment" /><el-table-column label="部门" sortable="" prop="departmentName" /><el-table-column label="入职时间" sortable="" prop="timeOfEntry" /><el-table-column label="账户状态" sortable="" prop="enableState" /><el-table-column label="操作" sortable="" fixed="right" width="280"><template><el-button type="text" size="small">查看</el-button><el-button type="text" size="small">转正</el-button><el-button type="text" size="small">调岗</el-button><el-button type="text" size="small">离职</el-button><el-button type="text" size="small">角色</el-button><el-button type="text" size="small">删除</el-button></template></el-table-column></el-table><!-- 分页组件 --><el-row type="flex" justify="center" align="middle" style="height: 60px"><el-paginationlayout="prev, pager, next":page-size="page.size":current-page="page.page":total="page.total"@current-change="changePage"/></el-row></el-card>

4.0 员工列表中的数据进行格式化

目标：将列表中的内容进行格式化

4.1 利用列格式化属性处理聘用形式

上小节中，列表中的聘用形式/入职时间和账户状态需要进行显示内容的处理

那么聘用形式中1代表什么含义，这实际上是我们需要的枚举数据，该数据的存放文件位于我们提供的**资源/枚举中，可以将枚举下的文件夹放于src/api**文件夹下

针对聘用形式，可以使用el-table-column的formatter属性进行设置

  import    EmployeeEnum from '@/api/constant/employees'<!-- 格式化聘用形式 --><el-table-column label="聘用形式" sortable :formatter="formatEmployment" />// 格式化聘用形式formatEmployment(row, column, cellValue, index) {// 要去找 1所对应的值const obj = EmployeeEnum.hireType.find(item => item.id === cellValue)return obj ? obj.value : '未知'}

4.2 过滤器解决时间格式的处理

针对入职时间，我们可以采用作用域插槽进行处理

 <el-table-column label="入职时间" sortable prop="timeOfEntry"><template slot-scope="obj">{{obj.row.timeOfEntry | 过滤器}}</template></el-table-column>

在**资源/过滤器中，我们提供了若干工具方法，我们可以将其转化成过滤器，首先将其拷贝到src**
在**main.js**中将工具方法转化成过滤器

import * as filters from '@/filters' // 引入工具类
// 注册全局的过滤器
Object.keys(filters).forEach(key => {// 注册过滤器Vue.filter(key, filters[key])
})

现在可以愉快的用过滤器的方式使用工具类的方法了

       <el-table-column label="入职时间" sortable="" align="center"><!-- 作用域插槽 --><template slot-scope="{ row }">{{ row.timeOfEntry | formatDate }}</template></el-table-column>

最后一项，账户状态，可以用开关组件switch进行显示

 <el-table-column label="账户状态" align="center" sortable="" prop="enableState"><template slot-scope="{ row }"><!-- 根据当前状态来确定 是否打开开关 --><el-switch :value="row.enableState === 1" /></template></el-table-column>

5.0 删除员工功能

**目标**实现删除员工的功能

首先封装删除员工的请求

/*** 删除员工接口* ****/export function delEmployee(id) {return request({url: `/sys/user/${id}`,method: 'delete'})
}

删除功能

 <template slot-scope="{ row }"><el-button type="text" size="small">查看</el-button><el-button type="text" size="small">转正</el-button><el-button type="text" size="small">调岗</el-button><el-button type="text" size="small">离职</el-button><el-button type="text" size="small">角色</el-button><el-button type="text" size="small" @click="deleteEmployee(row.id)">删除</el-button></template> // 删除员工async deleteEmployee(id) {try {await this.$confirm('您确定删除该员工吗')await delEmployee(id)this.getEmployeeList()this.$message.success('删
除员工成功')} catch (error) {console.log(error)}}

6.0 新增员工功能-弹层-校验-部门

目标：实现新增员工的功能

6.1 新建员工弹层组件

当我们点击新增员工时，我们需要一个类似的弹层

类似**组织架构**的组件，同样新建一个弹层组件 src/views/employees/components/add-employee.vue

<template><el-dialog title="新增员工" :visible="showDialog"><!-- 表单 --><el-form label-width="120px"><el-form-item label="姓名"><el-input style="width:50%" placeholder="请输入姓名" /></el-form-item><el-form-item label="手机"><el-input style="width:50%" placeholder="请输入手机号" /></el-form-item><el-form-item label="入职时间"><el-date-picker style="width:50%" placeholder="请选择入职时间" /></el-form-item><el-form-item label="聘用形式"><el-select style="width:50%" placeholder="请选择" /></el-form-item><el-form-item label="工号"><el-input style="width:50%" placeholder="请输入工号" /></el-form-item><el-form-item label="部门"><el-input style="width:50%" placeholder="请选择部门" /></el-form-item><el-form-item label="转正时间"><el-date-picker style="width:50%" placeholder="请选择转正时间" /></el-form-item></el-form><!-- footer插槽 --><template v-slot:footer><el-row type="flex" justify="center"><el-col :span="6"><el-button size="small">取消</el-button><el-button type="primary" size="small">确定</el-button></el-col></el-row></template></el-dialog>
</template><script>
export default {props: {showDialog: {type: Boolean,default: false}}
}
</script><style></style>

6.2 引用弹出层，点击弹出

父组件中引用，弹出层

import AddEmployee from './components/add-employee'

<!-- 放置新增组件 --><add-employee :show-dialog.sync="showDialog" /><el-button icon="plus" type="primary" size="small" @click="showDialog = true">新增员工</el-button>

6.3 新增员工的表单校验

封装新增员工api src/api/employees.js

/** ***  新增员工的接口* **/
export function addEmployee(data) {return request({method: 'post',url: '/sys/user',data})
}

针对员工属性，添加校验规则

import EmployeeEnum from '@/api/constant/employees'data() {return {EmployeeEnum, // 在data中定义数据// 表单数据treeData: [], // 定义数组接收树形数据showTree: false, // 控制树形的显示或者隐藏loading: false, // 控制树的显示或者隐藏进度条formData: {username: '',mobile: '',formOfEmployment: '',workNumber: '',departmentName: '',timeOfEntry: '',correctionTime: ''},rules: {username: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }, {min: 1, max: 4, message: '用户姓名为1-4位'}],mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }, {pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}],formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: 'blur' }],workNumber: [{ required: true, message: '工号不能为空', trigger: 'blur' }],departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],timeOfEntry: [{ required: true, message: '入职时间', trigger: 'blur' }]}}}

绑定数据和规则校验

    <el-form :model="formData" :rules="rules" label-width="120px"><el-form-item label="姓名" prop="username"><el-input v-model="formData.username" style="width:50%" placeholder="请输入姓名" /></el-form-item><el-form-item label="手机" prop="mobile"><el-input v-model="formData.mobile" style="width:50%" placeholder="请输入手机号" /></el-form-item><el-form-item label="入职时间" prop="timeOfEntry"><el-date-picker v-model="formData.timeOfEntry" style="width:50%" placeholder="请选择日期" /></el-form-item><el-form-item label="聘用形式" prop="formOfEmployment"><el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="请选择" /></el-form-item><el-form-item label="工号" prop="workNumber"><el-input v-model="formData.workNumber" style="width:50%" placeholder="请输入工号" /></el-form-item><el-form-item label="部门" prop="departmentName"><el-input v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" /></el-form-item><el-form-item label="转正时间" prop="correctionTime"><el-date-picker v-model="formData.correctionTime" style="width:50%" placeholder="请选择日期" /></el-form-item></el-form>

6.4 加载部门数据转化树形

聘用形式和选择部门的处理

员工的部门是从树形部门中选择一个部门

获取部门数据，转化树形

import { getDepartments } from '@/api/departments'
import { transListToTreeData } from '@/utils'data () {return {// 表单数据treeData: [], // 定义数组接收树形数据showTree: false, // 控制树形的显示或者隐藏loading: false, // 控制树的显示或者隐藏进度条}},methods: {async getDepartments() {this.showTree = truethis.loading = trueconst { depts } = await getDepartments()// depts是数组 但不是树形this.treeData = transListToTreeData(depts, '')this.loading = false},}

6.5 点击部门赋值表单数据

选择部门，赋值表单数据

<el-form-item label="部门" prop="departmentName"><el-input v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" @focus="getDepartments" /><!-- 放置一个tree组件 --><el-treev-if="showTree"v-loading="loading":data="treeData"default-expand-all="":props="{ label: 'name' }"@node-click="selectNode"/></el-form-item>

点击部门时触发

    selectNode(node) {this.formData.departmentName = node.namethis.showTree = false}

聘用形式

    <el-form-item label="聘用形式" prop="formOfEmployment"><el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="请选择"><!-- 遍历只能遍历组件的数据 --><el-option v-for="item in EmployeeEnum.hireType" :key="item.id" :label="item.value" :value="item.id" /></el-select></el-form-item>

7.0 新增员工功能-确定-取消

本节任务 新增员工功能和弹层

调用新增接口

    // 点击确定时 校验整个表单async btnOK() {try {await this.$refs.addEmployee.validate()// 调用新增接口await addEmployee(this.formData) // 新增员工// 告诉父组件更新数据// this.$parent 可以直接调用到父组件的实例 实际上就是父组件this// this.$emitthis.$parent.getEmployeeList()this.$parent.showDialog = false} catch (error) {console.log(error)}},btnCancel() {// 重置原来的数据this.formData = {username: '',mobile: '',formOfEmployment: '',workNumber: '',departmentName: '',timeOfEntry: '',correctionTime: ''}this.$refs.addEmployee.resetFields() // 重置校验结果this.$emit('update:showDialog', false)}

8.0 员工导入组件封装

目标：封装一个导入excel数据的文件

首先封装一个类似的组件，首先需要注意的是，类似功能，vue-element-admin已经提供了，我们只需要改造即可代码地址

类似功能性的组件，我们只需要会使用和封装即可

excel导入功能需要使用npm包**xlsx，所以需要安装xlsx**插件

npm i xlsx

将vue-element-admin提供的导入功能新建一个组件，位置： src/components/UploadExcel

注册全局的导入excel组件

import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
export default {install(Vue) {Vue.component('PageTools', PageTools) // 注册工具栏组件Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件}
}

修改样式和布局

<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>

9.0 员工的导入

目标：实现员工的导入

9.1 建立公共导入的页面路由

新建一个公共的导入页面，挂载路由 src/router/index.js

{path: '/import',component: Layout,hidden: true, // 隐藏在左侧菜单中children: [{path: '', // 二级路由path什么都不写 表示二级默认路由component: () => import('@/views/import')}]},

创建import路由组件 src/views/import/index.vue

<template><!-- 公共导入组件 --> <upload-excel :on-success="success" />
</template>

9.2 分析excel导入代码，封装接口

封装导入员工的api接口

/** **  封装一个导入员工的接口** ***/export function importEmployee(data) {return request({url: '/sys/user/batch',method: 'post',data})
}

9.3 实现excel导入

获取导入的excel数据, 导入excel接口

    async  success({ header, results }) {// 如果是导入员工const userRelations = {'入职日期': 'timeOfEntry','手机号': 'mobile','姓名': 'username','转正日期': 'correctionTime','工号': 'workNumber'}const arr = []results.forEach(item => {const userInfo = {}Object.keys(item).forEach(key => {userInfo[userRelations[key]] = item[key]})arr.push(userInfo) })await importEmployee(arr) // 调用导入接口this.$router.back()}

为了让这个页面可以服务更多的导入功能，我们可以在页面中用参数来判断，是否是导入员工

data() {return {type: this.$route.query.type}},

当excel中有日期格式的时候，实际转化的值为一个数字，我们需要一个方法进行转化

    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)}

需要注意，导入的手机号不能和之前的存在的手机号重复

逻辑判断

 async  success({ header, results }) {if (this.type === 'user') {const userRelations = {'入职日期': 'timeOfEntry','手机号': 'mobile','姓名': 'username','转正日期': 'correctionTime','工号': 'workNumber'}const arr = []// 遍历所有的数组results.forEach(item => {// 需要将每一个条数据里面的中文都换成英文const userInfo = {}Object.keys(item).forEach(key => {// key是当前的中文名 找到对应的英文名if (userRelations[key] === 'timeOfEntry' || userRelations[key] === 'correctionTime') {userInfo[userRelations[key]] = new Date(this.formatDate(item[key], '/')) // 只有这样, 才能入库return}userInfo[userRelations[key]] = item[key]})// 最终userInfo变成了全是英文arr.push(userInfo)})await importEmployee(arr)this.$message.success('导入成功')}this.$router.back() // 回到上一页},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)}

员工页面跳转

<el-button type="warning" size="small" @click="$router.push('/import?type=user')">导入</el-button>

10.0 员工导出excel功能

目标：实现将员工数据导出功能

日常业务中，我们经常遇到excel导出功能，怎么使用呢

Excel 的导入导出都是依赖于js-xlsx来实现的。

在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。

10.1 安装excel所需依赖和按需加载

由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。

所以你先需要安装如下命令：

npm install xlsx file-saver -S
npm install script-loader -S -D

由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。使用方法如下：

import('@/vendor/Export2Excel').then(excel => {excel.export_json_to_excel({header: tHeader, //表头 必填data, //具体数据 必填filename: 'excel-list', //非必填autoWidth: true, //非必填bookType: 'xlsx' //非必填})
})

excel导出参数的介绍

vue-element-admin提供了导出的功能模块，在课程资源/excel导出目录下，放置到src目录下
参数

参数	说明	类型	可选值	默认值
header	导出数据的表头	Array	/	[]
data	导出的具体数据	Array	/	[[]]
filename	导出文件名	String	/	excel-list
autoWidth	单元格是否要自适应宽度	Boolean	true / false	true
bookType	导出文件类型	String	xlsx, csv, txt, more	xlsx

10.2 excel导出基本的结构

我们最重要的一件事，就是把表头和数据进行相应的对应

因为数据中的key是英文，想要导出的表头是中文的话，需要将中文和英文做对应

   const headers = {'手机号': 'mobile','姓名': 'username','入职日期': 'timeOfEntry','聘用形式': 'formOfEmployment','转正日期': 'correctionTime','工号': 'workNumber','部门': 'departmentName'}

然后，完成导出代码

  在 src中添加 vendor 文件夹以及文件
import { formatDate } from '@/filters'// 导出excel数据exportData() {//  做操作// 表头对应关系const headers = {'姓名': 'username','手机号': 'mobile','入职日期': 'timeOfEntry','聘用形式': 'formOfEmployment','转正日期': 'correctionTime','工号': 'workNumber','部门': 'departmentName'}// 懒加载import('@/vendor/Export2Excel').then(async excel => {const { rows } = await getEmployeeList({ page: 1, size: this.page.total })const data = this.formatJson(headers, rows)excel.export_json_to_excel({header: Object.keys(headers),data,filename: '员工信息表',autoWidth: true,bookType: 'xlsx'})// 获取所有的数据// excel.export_json_to_excel({//   header: ['姓名', '薪资'],//   data: [['张三', 12000], ['李四', 5000]],//   filename: '员工薪资表',//   autoWidth: true,//   bookType: 'csv'// })})},// 该方法负责将数组转化成二维数组formatJson(headers, rows) {// 首先遍历数组// [{ username: '张三'},{},{}]  => [[’张三'],[],[]]return rows.map(item => {return Object.keys(headers).map(key => {if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') {return formatDate(item[headers[key]]) // 返回格式化之前的时间} else if (headers[key] === 'formOfEmployment') {var en = EmployeeEnum.hireType.find(obj => obj.id === item[headers[key]])return en ? en.value : '未知'}return item[headers[key]]}) // => ["张三", "13811"，"2018","1", "2018", "10002"]})// return data// return rows.map(item => {//   // item是对象  => 转化成只有值的数组 => 数组值的顺序依赖headers  {username: '张三'  }//   // Object.keys(headers)  => ["姓名", "手机号",...]//   return Object.keys(headers).map(key => {//     return item[headers[key]]//   }) // /  得到 ['张三'，’129‘，’dd‘,'dd']// })}

10.3 导出时间格式的处理

    formatJson(headers, rows) {return rows.map(item => {// item是一个对象  { mobile: 132111,username: '张三'  }// ["手机号", "姓名", "入职日期" 。。]return Object.keys(headers).map(key => {// 需要判断 字段if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') {// 格式化日期return formatDate(item[headers[key]])} else if (headers[key] === 'formOfEmployment') {const obj = EmployeeEnum.hireType.find(obj => obj.id === item[headers[key]])return obj ? obj.value : '未知'}return item[headers[key]]})// ["132", '张三’， ‘’，‘’，‘’d]})// return rows.map(item => Object.keys(headers).map(key => item[headers[key]]))// 需要处理时间格式问题}

10.4 `扩展` 复杂表头的导出

当需要导出复杂表头的时候，vue-element-admin同样支持该类操作

vue-element-admin 提供的导出方法中有 multiHeader和merges 的参数

参数	说明	类型	可选值	默认值
multiHeader	复杂表头的部分	Array	/	[[]]
merges	需要合并的部分	Array	/	[]

multiHeader里面是一个二维数组，里面的一个元素是一行表头，

mutiHeader应该这样定义

const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]

multiHeader中的一行表头中的字段的个数需要和真正的列数相等，假设想要跨列，多余的空间需要定义成空串
它主要对应的是标准的表头

const header = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']

如果，我们要实现其合并的效果，需要设定merges选项

const merges = ['A1:A2', 'B1:F1', 'G1:G2']

merges的顺序是没关系的，只要配置这两个属性，就可以导出复杂表头的excel了

  exportData() {const headers = {'姓名': 'username','手机号': 'mobile','入职日期': 'timeOfEntry','聘用形式': 'formOfEmployment','转正日期': 'correctionTime','工号': 'workNumber','部门': 'departmentName'}// 导出excelimport('@/vendor/Export2Excel').then(async excel => {//  excel是引入文件的导出对象// 导出  header从哪里来// data从哪里来// 现在没有一个接口获取所有的数据// 获取员工的接口 页码 每页条数    100   1 10000const { rows } = await getEmployeeList({ page: 1, size: this.page.total })const data = this.formatJson(headers, rows) // 返回的data就是 要导出的结构const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]const merges = ['A1:A2', 'B1:F1', 'G1:G2']excel.export_json_to_excel({header: Object.keys(headers),data,filename: '员工资料表',multiHeader, // 复杂表头merges // 合并选项})// excel.export_json_to_excel({//   header: ['姓名', '工资'],//   data: [['张三', 3000], ['李四', 5000]],//   filename: '员工工资表'// })// [{ username: '张三',mobile: 13112345678 }]  => [[]]// 要转化 数据结构 还要和表头的顺序对应上// 要求转出的标题是中文})},// 将表头数据和数据进行对应// [{}]  =>   [[]]formatJson(headers, rows) {return rows.map(item => {// item是一个对象  { mobile: 132111,username: '张三'  }// ["手机号", "姓名", "入职日期" 。。]return Object.keys(headers).map(key => {// 需要判断 字段if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') {// 格式化日期return formatDate(item[headers[key]])} else if (headers[key] === 'formOfEmployment') {const obj = EmployeeEnum.hireType.find(obj => obj.id === item[headers[key]])return obj ? obj.value : '未知'}return item[headers[key]]})// ["132", '张三’， ‘’，‘’，‘’d]})// return rows.map(item => Object.keys(headers).map(key => item[headers[key]]))// 需要处理时间格式问题}

11.0员工详情页创建和布局

目标：创建员工详情的主要布局页面和基本布局

11.1 详情页的基本布局和路由

建立详情页路由

{path: 'detail/:id', // query传参 动态路由传参component: () => import('@/views/employees/detail'),hidden: true, // 不在左侧菜单显示meta: {title: '员工详情' // 标记当前路由规则的中文名称 后续在做左侧菜单时 使用}}

建立基本架构

<div class="dashboard-container"><div class="app-container"><el-card><el-tabs><el-tab-pane label="登录账户设置"><!-- 放置表单 --><el-form label-width="120px" style="margin-left: 120px; margin-top:30px"><el-form-item label="姓名:"><el-input style="width:300px" /></el-form-item><el-form-item label="密码:"><el-input style="width:300px" type="password" /></el-form-item><el-form-item><el-button type="primary">更新</el-button></el-form-item></el-form></el-tab-pane><el-tab-pane label="个人详情" /><el-tab-pane label="岗位信息" /></el-tabs></el-card></div></div>

列表跳转到详情

<el-button type="text" size="small" @click="$router.push(`/employees/detail/${obj.row.id}`)">查看</el-button>

11.2 读取和保存用户信息的接口

加载个人基本信息 > 该接口已经在之前提供过了 src/api/user.js

/** **  获取某个用户的基本信息** ***/
export function getUserDetailById(id) {return request({url: `/sys/user/${id}`})
}

保存个人基本信息 src/api/employees.js

/** *** 保存员工的基本信息* **/
export function saveUserDetailById(data) {return request({url: `/sys/user/${data.id}`,method: 'put',data})
}

实现用户名和密码的修改
注意：这里有个缺陷，接口中读取的是后端的密文，我们并不能解密，所以当我们没有任何修改就保存时，会校验失败，因为密文超过了规定的12位长度，为了真的修改密码，我们设定了一个临时的字段 password2，用它来存储我们的修改值，最后保存的时候，把password2传给password
用户名和密码的修改 src/views/employees/detail.vue

import { getUserDetailById } from '@/api/user'
import { saveUserDetailById } from '@/api/employees'
export default {data() {return {userId: this.$route.params.id, // 这样可以后面直接通过 this.userId进行获取数据userInfo: {//   专门存放基本信息username: '',password2: ''},rules: {username: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],password2: [{ required: true, message: '密码不能为空', trigger: 'blur' },{ min: 6, max: 9, message: '密码长度6-9位', trigger: 'blur' }]}}},created() {this.getUserDetailById()},methods: {async getUserDetailById() {this.userInfo = await getUserDetailById(this.userId)},async saveUser() {try {// 校验await this.$refs.userForm.validate()await saveUserDetailById({ ...this.userInfo, password: this.userInfo.password2 }) // 将新密码的值替换原密码的值this.$message.success('保存成功')} catch (error) {console.log(error)}}}
}

绑定表单数据

 <!-- 放置表单 --><el-form ref="userForm" :model="userInfo" :rules="rules" label-width="120px" style="margin-left: 120px; margin-top:30px"><el-form-item label="姓名:" prop="username"><el-input v-model="userInfo.username" style="width:300px" /></el-form-item><el-form-item label="新密码:" prop="password2"><el-input v-model="userInfo.password2" style="width:300px" type="password" /></el-form-item><el-form-item><el-button type="primary" @click="saveUser">更新</el-button></el-form-item></el-form>

12.0 个人组件和岗位组件封装

12.1 封装个人详情组件

我们将员工个人信息分为三部分，账户，个人，岗位，这个小节我们对个人组件和岗位组件进行封装
封装个人组件 src/views/employees/components/user-info.vue

<template><div class="user-info"><!-- 个人信息 --><el-form label-width="220px"><!-- 工号 入职时间 --><el-row class="inline-info"><el-col :span="12"><el-form-item label="工号"><el-input v-model="userInfo.workNumber" class="inputW" /></el-form-item></el-col><el-col :span="12"><el-form-item label="入职时间"><el-date-pickerv-model="userInfo.timeOfEntry"type="date"class="inputW"value-format="YYYY-MM-DD"/></el-form-item></el-col></el-row><!-- 姓名 部门 --><el-row class="inline-info"><el-col :span="12"><el-form-item label="姓名"><el-input v-model="userInfo.username" class="inputW" /></el-form-item></el-col><el-col :span="12"><el-form-item label="部门"><el-input v-model="userInfo.departmentName" class="inputW" /></el-form-item></el-col></el-row><!--手机 聘用形式  --><el-row class="inline-info"><el-col :span="12"><el-form-item label="手机"><el-input v-model="userInfo.mobile" /></el-form-item></el-col><el-col :span="12"><el-form-item label="聘用形式"><el-select v-model="userInfo.formOfEmployment" class="inputW"><el-optionv-for="item in EmployeeEnum.hireType":key="item.id":label="item.value":value="item.id"/></el-select></el-form-item></el-col></el-row><!-- 员工照片 --><el-row class="inline-info"><el-col :span="12"><el-form-item label="员工头像"><!-- 放置上传图片 --></el-form-item></el-col></el-row><!-- 保存个人信息 --><el-row class="inline-info" type="flex" justify="center"><el-col :span="12"><el-button type="primary" @click="saveUser">保存更新</el-button><el-button @click="$router.back()">返回</el-button></el-col></el-row></el-form><!-- 基础信息 --><el-form label-width="220px"><div class="block"><div class="title">基础信息</div><el-form-item label="最高学历"><el-select v-model="formData.theHighestDegreeOfEducation" class="inputW2"><el-optionv-for="item in EmployeeEnum.highestDegree":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><!-- 个人头像 --><!-- 员工照片 --><el-form-item label="员工照片"><!-- 放置上传图片 --></el-form-item><el-form-item label="国家/地区"><el-select v-model="formData.nationalArea" class="inputW2"><el-optionv-for="item in EmployeeEnum.isOverseas":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item label="护照号"><el-input v-model="formData.passportNo" placeholder="正规护照格式" class="inputW" /></el-form-item><el-form-item label="身份证号"><el-input v-model="formData.idNumber" placeholder="正规身份证格式" class="inputW" /></el-form-item><el-form-item label="籍贯"><el-input v-model="formData.nativePlace" placeholder="籍贯地址" class="inputW5" /></el-form-item><el-form-item label="民族"><el-input v-model="formData.nation" placeholder="请输入民族" class="inputW2" /></el-form-item><el-form-item label="婚姻状况"><el-select v-model="formData.maritalStatus" class="inputW2"><el-optionv-for="item in EmployeeEnum.maritaStatus":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item label="生日"><el-input v-model="formData.birthday" placeholder="示例 0323" class="inputW" /></el-form-item><el-form-item label="年龄"><el-input v-model="formData.age" type="number" class="inputW2" /></el-form-item><el-form-item label="星座"><el-select v-model="formData.constellation" class="inputW2"><el-optionv-for="item in EmployeeEnum.constellation":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item label="血型"><el-select v-model="formData.bloodType" class="inputW2"><el-optionv-for="item in EmployeeEnum.bloodType":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item label="户籍所在地"><el-input v-model="formData.domicile" class="inputW5" /></el-form-item><el-form-item label="政治面貌"><el-input v-model="formData.politicalOutlook" class="inputW2" /></el-form-item><el-form-item label="入党时间"><el-date-pickerv-model="formData.timeToJoinTheParty"type="date"placeholder="选择日期"class="inputW"value-format="yyyy-MM-dd"/></el-form-item><el-form-item label="存档机构"><el-input v-model="formData.archivingOrganization" placeholder="请输入" /></el-form-item><el-form-item label="子女状态"><el-input v-model="formData.stateOfChildren" placeholder="请输入" /></el-form-item><el-form-item label="子女有无商业险"><el-radio-group v-model="formData.doChildrenHaveCommercialInsurance"><el-radio label="1">有</el-radio><el-radio label="2">无</el-radio></el-radio-group></el-form-item><el-form-item label="有无违法违纪状态"><el-input v-model="formData.isThereAnyViolationOfLawOrDiscipline" placeholder="请输入" /></el-form-item><el-form-item label="有无重大病史"><el-input v-model="formData.areThereAnyMajorMedicalHistories" placeholder="请输入" /></el-form-item></div><!-- 通讯信息 --><div class="block"><div class="title">通讯信息</div><el-form-item label="QQ"><el-input v-model="formData.qq" placeholder="请输入" class="inputW" /></el-form-item><el-form-item label="微信"><el-input v-model="formData.wechat" placeholder="请输入" class="inputW" /></el-form-item><el-form-item label="现居住地"><el-input v-model="formData.placeOfResidence" placeholder="请输入" /></el-form-item><el-form-item label="通讯地址"><el-input v-model="formData.postalAddress" placeholder="请输入" /></el-form-item><el-form-item label="联系手机"><el-input v-model="formData.contactTheMobilePhone" placeholder="11位字符" maxlength="11" class="inputW" @change.native="handlePhone(2)" /></el-form-item><el-form-item label="个人邮箱"><el-input v-model="formData.personalMailbox" placeholder="请输入" type="mail" class="inputW" /></el-form-item><el-form-item label="紧急联系人"><el-input v-model="formData.emergencyContact" placeholder="请输入" class="inputW" /></el-form-item><el-form-item label="紧急联系电话"><el-input v-model="formData.emergencyContactNumber" placeholder="11位字符" class="inputW" /></el-form-item></div><!-- 账号信息 --><div class="block"><div class="title">账号信息</div><el-form-item label="社保电脑号"><el-input v-model="formData.socialSecurityComputerNumber" placeholder="请输入" class="inputW" /></el-form-item><el-form-item label="公积金账号"><el-input v-model="formData.providentFundAccount" placeholder="请输入" class="inputW" /></el-form-item><el-form-item label="银行卡号"><el-input v-model="formData.bankCardNumber" placeholder="请输入" class="inputW" /></el-form-item><el-form-item label="开户行"><el-input v-model="formData.openingBank" placeholder="请输入" class="inputW" /></el-form-item></div><!-- 教育信息 --><div class="block"><div class="title">教育信息</div><el-form-item label="学历类型"><el-select v-model="formData.educationalType" placeholder="请选择"><el-optionv-for="item in EmployeeEnum.educationType":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item label="毕业学校"><el-input v-model="formData.graduateSchool" placeholder="请输入" class="inputW2" /></el-form-item><el-form-item label="入学时间"><el-date-picker v-model="formData.enrolmentTime" type="data" placeholder="请输入时间" class="inputW" value-format="yyyy-MM-dd" /></el-form-item><el-form-item label="毕业时间"><el-date-picker v-model="formData.graduationTime" type="data" placeholder="请输入时间" class="inputW" value-format="yyyy-MM-dd" /></el-form-item><el-form-item label="专业"><el-input v-model="formData.major" placeholder="请输入" class="inputW" /></el-form-item></div><!-- 从业信息 --><div class="block"><div class="title">从业信息</div><el-form-item label="上家公司"><el-input v-model="formData.homeCompany" placeholder="请输入" class="inputW" /></el-form-item><el-form-item label="职称"><el-input v-model="formData.title" placeholder="请输入" class="inputW" /></el-form-item><el-form-item label="有无竞业限制"><el-input v-model="formData.isThereAnyCompetitionRestriction" placeholder="请输入" style="width:80%" /></el-form-item><el-form-item label="备注"><el-input v-model="formData.remarks" type="textarea" placeholder="请输入备注" style="width:80%" /></el-form-item><!-- 保存员工信息 --><el-row class="inline-info" type="flex" justify="center"><el-col :span="12"><el-button type="primary" @click="savePersonal">保存更新</el-button><el-button @click="$router.back()">返回</el-button></el-col></el-row></div></el-form></div></template>

定义user-info的数据

import EmployeeEnum from '@/api/constant/employees'export default {data() {return {userId: this.$route.params.id,EmployeeEnum, // 员工枚举数据userInfo: {},formData: {userId: '',username: '', // 用户名sex: '', // 性别mobile: '', // 手机companyId: '', // 公司iddepartmentName: '', // 部门名称//  onTheJobStatus: '', // 在职状态 nodateOfBirth: '', // 出生日期timeOfEntry: '', // 入职时间theHighestDegreeOfEducation: '', // 最高学历nationalArea: '', // 国家passportNo: '', // 护照号idNumber: '', // 身份证号idCardPhotoPositive: '', // 身份证照正idCardPhotoBack: '', // 身份证照正nativePlace: '', // 籍贯nation: '', // 民族englishName: '', // 英文名字maritalStatus: '', // 婚姻状况staffPhoto: '', // 员工照片birthday: '', // 生日zodiac: '', // 属相age: '', // 年龄constellation: '', // 星座bloodType: '', // 血型domicile: '', // 户籍所在地politicalOutlook: '', // 政治面貌timeToJoinTheParty: '', // 入党时间archivingOrganization: '', // 存档机构stateOfChildren: '', // 子女状态doChildrenHaveCommercialInsurance: '1', // 保险状态isThereAnyViolationOfLawOrDiscipline: '', // 违法违纪状态areThereAnyMajorMedicalHistories: '', // 重大病史qq: '', // QQwechat: '', // 微信residenceCardCity: '', // 居住证城市dateOfResidencePermit: '', // 居住证办理日期residencePermitDeadline: '', // 居住证截止日期placeOfResidence: '', // 现居住地postalAddress: '', // 通讯地址contactTheMobilePhone: '', // 联系手机personalMailbox: '', // 个人邮箱emergencyContact: '', // 紧急联系人emergencyContactNumber: '', // 紧急联系电话socialSecurityComputerNumber: '', // 社保电脑号providentFundAccount: '', // 公积金账号bankCardNumber: '', // 银行卡号openingBank: '', // 开户行educationalType: '', // 学历类型graduateSchool: '', // 毕业学校enrolmentTime: '', // 入学时间graduationTime: '', // 毕业时间major: '', // 专业graduationCertificate: '', // 毕业证书certificateOfAcademicDegree: '', // 学位证书homeCompany: '', // 上家公司title: '', // 职称resume: '', // 简历isThereAnyCompetitionRestriction: '', // 有无竞业限制proofOfDepartureOfFormerCompany: '', // 前公司离职证明remarks: '' // 备注}}}
}

在detail.vue组件中，注册并使用

 <el-tab-pane label="个人详情"><!-- 放置个人详情 --><component :is="userComponent" /><!-- <user-info /> --></el-tab-pane>userComponent: 'user-info',

在以上代码中，我们使用了动态组件component，它通过 **is属性来绑定需要显示在该位置的组件，is属性可以直接为注册组件**的组件名称即可

12.2 封装岗位组件

同理，封装岗位组件

封装岗位组件 src/views/employee/components/job-info.vue

<template>
<div class="job-info"><!-- 基础信息 --><el-form label-width="220px"><div class="block"><div class="title">基础信息</div><el-form-item label="岗位"><el-input v-model="formData.post" placeholder="请输入" class="inputW" /></el-form-item><!-- <el-form-item label="转正日期"><el-date-pickerv-model="formData.dateOfCorrection"type="date"placeholder="选择日期"value-format="yyyy-MM-dd"/></el-form-item> --><el-form-item label="转正状态"><el-select v-model="formData.stateOfCorrection" placeholder="请选择" disabled><el-optionv-for="item in EmployeeEnum.stateOfCorrection":key="item.value":value="item.value"/></el-select></el-form-item><el-form-item label="职级"><el-input v-model="formData.rank" class="inputW" /></el-form-item><el-form-item label="转正评价"><el-input v-model="formData.correctionEvaluation" type="textarea" placeholder="1-300位字符" /></el-form-item><el-form-item label="汇报对象"><el-select v-model="formData.reportId" filterable placeholder="请选择" class="inputW"><el-option v-for="item in depts" :key="item.id" :label="item.username" :value="item.id" /></el-select></el-form-item><el-form-item label="HRBP"><el-select v-model="formData.hrbp" filterable placeholder="请选择" class="inputW"><el-option v-for="item in depts" :key="item.id" :label="item.username" :value="item.id" class="inputW" /></el-select></el-form-item><el-form-item class="formInfo" label="调整司龄(天)："><el-input v-model="formData.adjustmentAgedays" type="number" placeholder="请输入" class="inputW" /></el-form-item><el-form-item label="首次参加工作时间"><el-date-pickerv-model="formData.workingTimeForTheFirstTime"type="date"placeholder="选择日期"value-format="yyyy-MM-dd"/></el-form-item><el-form-item label="调整工龄"><el-input v-model="formData.adjustmentOfLengthOfService" placeholder="0.00年" class="inputW" disabled /></el-form-item></div><!-- 合同信息 --><div class="block"><div class="title">合同信息</div><el-form-item class="formInfo" label="首次合同开始时间："><el-date-pickerv-model="formData.initialContractStartTime"type="date"placeholder="选择日期"value-format="yyyy-MM-dd"/></el-form-item><el-form-item label="首次合同结束时间"><el-date-pickerv-model="formData.firstContractTerminationTime"type="date"placeholder="选择日期"value-format="yyyy-MM-dd"/></el-form-item><el-form-item label="现合同开始时间"><el-date-pickerv-model="formData.currentContractStartTime"type="date"placeholder="选择日期"value-format="yyyy-MM-dd"/></el-form-item><el-form-item label="现合同结束时间"><el-date-pickerv-model="formData.closingTimeOfCurrentContract   "type="date"placeholder="选择日期"value-format="yyyy-MM-dd"/></el-form-item><el-form-item label="合同期限"><el-select v-model="formData.contractPeriod" class="filter-item"><el-optionv-for="item in EmployeeEnum.contractPeriod":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item label="续签次数"><el-select v-model="formData.renewalNumber" class="filter-item"><el-optionv-for="item in EmployeeEnum.renewalCount":key="item.id":label="item.value":value="item.id"/></el-select></el-form-item></div><!-- 招聘信息 --><div class="block"><div class="title">招聘信息</div><el-form-item label="其他招聘渠道"><el-select v-model="formData.otherRecruitmentChannels" placeholder="请选择"><el-optionv-for="item in EmployeeEnum.resumeSource":key="item.id":label="item.value":value="item.value"/></el-select></el-form-item><el-form-item label="招聘渠道"><el-select v-model="formData.recruitmentChannels" placeholder="请选择"><el-optionv-for="item in EmployeeEnum.resumeSource":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item label="社招/校招"><el-select v-model="formData.socialRecruitment" placeholder="请选择"><el-optionv-for="item in EmployeeEnum.hireSourceType":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item label="推荐企业/人"><el-input v-model="formData.recommenderBusinessPeople" placeholder="请输入" class="infoPosition inputW" /></el-form-item></div><!-- 从业信息 --><el-form-item><el-button type="primary" @click="saveJob">保存更新</el-button><el-button @click="$router.back()">返回</el-button></el-form-item></el-form></div></template>

定义岗位数据

import EmployeeEnum from '@/api/constant/employees'export default {data() {return {userId: this.$route.params.id,depts: [],EmployeeEnum,formData: {adjustmentAgedays: '', // 调整司龄天adjustmentOfLengthOfService: '', // 调整工龄天closingTimeOfCurrentContract: '', // 现合同结束时间companyId: '', // 公司IDcontractDocuments: '', // 合同文件contractPeriod: '', // 合同期限correctionEvaluation: '', //  转正评价currentContractStartTime: '', // 现合同开始时间firstContractTerminationTime: '', // 首次合同结束时间hrbp: '', // HRBPinitialContractStartTime: '', // 首次合同开始时间otherRecruitmentChannels: '', // 其他招聘渠道post: '', // 岗位rank: null, // 职级recommenderBusinessPeople: '', // 推荐企业人recruitmentChannels: '', // 招聘渠道renewalNumber: '', // 续签次数reportId: '', // 汇报对象reportName: null, // 汇报对象socialRecruitment: '', // 社招校招stateOfCorrection: '', // 转正状态taxableCity: '', // 纳税城市userId: '', // 员工IDworkMailbox: '', // 工作邮箱workingCity: '', // 工作城市workingTimeForTheFirstTime: '' // 首次参加工作时间}}}
}

在detail.vue组件中，注册并使用

 <el-tab-pane label="岗位详情"><!-- 放置岗位详情 --><component :is="JobInfo" /></el-tab-pane>

13.0 员工个人信息和岗位信息-读取-保存

目标：实现个人信息的岗位信息的读取和校验，保存

13.1 读取个人保存个人信息

这个环节里面大部分都是繁杂的属性和重复的过程，所以该环节直接将过程代码拷贝到项目中即可

封装 读取个人信息 保存个人信息 读取岗位信息 保存岗位信息

/** **  读取用户详情的基础信息* **/
export function getPersonalDetail(id) {return request({url: `/employees/${id}/personalInfo`})
}/** **  更新用户详情的基础信息* **/
export function updatePersonal(data) {return request({url: `/employees/${data.userId}/personalInfo`,method: 'put',data})
}/** *** 获取用户的岗位信息** ****/
export function getJobDetail(id) {return request({url: `/employees/${id}/jobs`})
}/*** 保存岗位信息* ****/
export function updateJob(data) {return request({url: `/employees/${data.userId}/jobs`,method: 'put',data})
}

读取，保存个人信息** user-info 需要注意：这里的保存实际上分成了两个接口，这是接口的设计，我们只能遵守

import { getPersonalDetail, updatePersonal, saveUserDetailById } from '@/api/employees'
import { getUserDetailById } from '@/api/user'created() {this.getPersonalDetail()this.getUserDetailById()},methods: {async getPersonalDetail() {this.formData = await getPersonalDetail(this.userId) // 获取员工数据},async savePersonal() {await updatePersonal({ ...this.formData, id: this.userId })this.$message.success('保存成功')},async saveUser() {//  调用父组件await saveUserDetailById(this.userInfo)this.$message.success('保存成功')},async getUserDetailById() {this.userInfo = await getUserDetailById(this.userId)}}

13.2 读取保存岗位信息

读取，保存岗位信息** job-info

  import { getEmployeeSimple, updateJob, getJobDetail } from '@/api/employees'created() {this.getJobDetail()this.getEmployeeSimple()},methods: {async getJobDetail() {this.formData = await getJobDetail(this.userId)},// 获取员工列表async getEmployeeSimple() {this.depts = await getEmployeeSimple()},// 保存岗位信息async saveJob() {await updateJob(this.formData)this.$message.success('保存岗位信息成功')}}