5.2 iHRM人力资源 - 员工管理 - 使用文件导入导出员工

2024-04-18 02:52
文章标签 使用 管理 导出 导入 员工 人力资源 5.2 ihrm

本文主要是介绍5.2 iHRM人力资源 - 员工管理 - 使用文件导入导出员工，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

iHRM人力资源 - 员工管理 - 导入导出员工

文章目录

  • iHRM人力资源 - 员工管理 - 导入导出员工
  • 一、员工导出Excel
  • 二、员工导入Excel
    • 2.1 Excel导入组件封装
    • 2.2 下载导入模板
    • 2.3 Excel 导入功能
  • 三、删除员工

一、员工导出Excel

这个地方涉及一个接口二进制流blob

image-20240408204202305

就是下面这一大片乱七八糟的玩意（二进制文件流），接收完流后通过下载的方式将文件下载下载（图片左下方）

image-20240408204336372

总结步骤

image-20240408205238034

  1. api方法
/*** 导出员工的Excel*/
export function exportEmployee() {return request({url: '/sys/user/export',// 接收二进制流类型的数据需要改变axios的接收数据类型// 使用blob接收二进制文件流responseType: 'blob'})
}
  1. 点击事件
<el-button size="mini" @click="exportEmployee">excel导出</el-button>

// 导出员工的Excel
async exportEmployee() {await exportEmployee()
}
  1. 修改响应拦截器

因为返回的不是JSON数据了，所以我们要处理一下

image-20240408210135899

// 创建响应拦截器,并且两个参数都是回调函数
service.interceptors.response.use(// 请求成功时响应,此时的响应默认包裹了一层data，即response.data才是后台服务返回的内容(response) => {// 首先判断响应的数据是JSON格式数据还是blob二进制文件流if (response.data instanceof Blob) {// 我们认为此时接口返回的是文件return response.data}// 一次性解析出response.data中的三个属性const { data, message, success } = response.data // 默认是JSON数据，假如不是JSON数据的话就会报错if (success) {// 此时响应正常return data} else {Message({ type: 'error', message: message })return Promise.reject(new Error(message))}},// 请求失败时响应async(error) => {if (error.response.status === 401) {Message({ type: 'warning', message: 'token 超时了，请重新登录' })// token超时,调用action退出登录(删除用户信息)// dispatch返回的是一个promise，这里会等dispatch执行完再执行路由跳转await store.dispatch('user/logout')// 主动跳转到登录页router.push('/login')return Promise.reject(error)}// this.$message.warning 不能这么使用，因为此时的this不是组件实例对象Message({ type: 'error', message: error.message })// 默认支持promise的,下面语句相当于终止了当前promise的执行return Promise.reject(error)}
)
  1. 用blob接收后就需要保存文件或者说下载文件

首先执行命令下载工具包

npm i file-saver

image-20240408210825522

导入包

import FileSaver from 'file-saver'

修改方法

// 导出员工的Excel
async exportEmployee() {const result = await exportEmployee()// 使用一个npm包，将blob文件下载到本地 执行命令 npm i file-saver// 使用下面这个另存为的方法// 参数1：blob对象，参数2：文件名称FileSaver.saveAs(result, '员工信息表.xlsx') // 下载二进制文件到浏览器
}

二、员工导入Excel

如下图所示，用户需要按照模板样式上传Excel表格

image-20240408213914913

模板内容如下图所示

image-20240408214022575

流程如下图所示

image-20240408214206465

2.1 Excel导入组件封装

创建组件

image-20240408214332654

  1. 组件内的基本架构
<template><!--弹层部分--><!--visible 控制是否显示--><el-dialogwidth="500px"title="员工导入":visible="showExcelDialog"@close="$emit('update:showExcelDialog', false)"><el-row type="flex" justify="center"><div class="upload-excel"><!--文本输入框的类型是file，可以接收的文件类型.xlsx或者.xls--><inputref="excel-upload-input"class="excel-upload-input"type="file"accept=".xlsx, .xls"><div class="drop"><i class="el-icon-upload"/><el-button type="text">下载导入模板</el-button><span>将文件拖到此处或<el-button type="text">点击上传</el-button></span></div></div></el-row><el-row type="flex" justify="end"><!--取消按钮中有一个点击事件，后面是update:props属性名,值  这是直接修改.sync修饰符的属性值--><!-- update:props属性名，值 直接修改 .sync修饰符的属性值 --><el-button size="mini" type="primary" @click="$emit('update:showExcelDialog', false)">取消</el-button></el-row></el-dialog>
</template>
<script>export default {props: {// 控制弹层是否展示showExcelDialog: {type: Boolean,default: false}},methods: {}
}
</script><style scoped lang="scss">
.upload-excel {display: flex;justify-content: center;margin: 20px;width: 360px;height: 180px;align-items: center;color: #697086;.excel-upload-input {display: none;z-index: -9999;}.btn-upload,.drop {border: 1px dashed #dcdfe6;width: 100%;height: 100%;text-align: center;line-height: 160px;border-radius: 8px;display: flex;flex-direction: column;justify-content: center;}.drop {line-height: 40px;color: #bbb;i {font-size: 60px;display: block;color: #c0c4cc;}}
}
</style>
  1. 在index.vue文件中引入组件
// 引入自定义的组件
import ImportExcel from '@/views/employee/import-excel.vue'
export default {name: 'Employee',components: {ImportExcel},......
}

<!--放置导入Excel组件--> 
<import-excel></import-excel>
  1. 控制自定义组件的显示和隐藏
<!--放置导入Excel组件-->
<!--sync修饰符，我们点击关闭弹层或者取消的时候，会自然的把父组件的值改掉-->
<import-excel :show-excel-dialog.sync="showExcelDialog"></import-excel>

数据

      // 控制Excel弹层的显示和隐藏showExcelDialog: false

此时弹框的取消和关闭是管用的

image-20240408230640601

  1. 点击按钮弹出弹层
<el-button size="mini" @click="showExcelDialog=true">excel导入</el-button>

2.2 下载导入模板

如下图所示的按钮，点击下载一个Excel模板

image-20240408231002314

这个地方和“导出员工Excel”差不多的形式

image-20240409113511140

  1. api请求
/*** 下载员工的导入模板*/
export function getExportTemplate() {return request({url: '/sys/user/import/template',// 接收二进制流类型的数据需要改变axios的接收数据类型// 使用blob接收二进制文件流responseType: 'blob'})
}

  1. 在我们封装的组件里填写点击“下载导入模板”后，下载模板

    image-20240409144354041

<div class="drop"><i class="el-icon-upload"/><el-button type="text" @click="getTemplate">下载导入模板</el-button><span>将文件拖到此处或<el-button type="text">点击上传</el-button></span>
</div>

方法

import FileSaver from 'file-saver'

  methods: {// 下载导入模板async getTemplate() {const result = await getExportTemplate()// console.log(result) // 使用一个npm包 直接将blob文件下载到本地 file-saver// FileSaver.saveAs(blob对象,文件名称)FileSaver.saveAs(result, '员工导入模板.xlsx') // 下载文件(另存为)}}

  1. 效果

    挺完美的

image-20240409144740165

2.3 Excel 导入功能

下面将实现这个功能

image-20240409145125735

流程如下图所示

为什么要清空？

因为我们使用了一个input框，所以关闭或者上传后要清空内容

image-20240409145422610

  1. 点击上传按钮，弹出文件选择器
<el-row type="flex" justify="center"><div class="upload-excel"><!--文本输入框的类型是file，可以接收的文件类型.xlsx或者.xls--><!--当我们点击“点击上传”按钮后，下面的input框就应该弹出来--><!--有了ref，我们就能获取input框中的DOM对象--><inputref="excel-upload-input"class="excel-upload-input"type="file"accept=".xlsx, .xls"><div class="drop"><i class="el-icon-upload"/><el-button type="text" @click="getTemplate">下载导入模板</el-button><span>将文件拖到此处或<el-button type="text" @click="handleUpload">点击上传</el-button></span></div></div>
</el-row>

方法

// 弹出文件选择器 - 只有一种方式，通过input框中的file属性
handleUpload() {// input框只要触发了点击事件，就会弹出文件选择器this.$refs['excel-upload-input'].click() // 这种写法和this.$refs.属性名是一样的
}

效果

image-20240409150429074

  1. 将文件进行上传

    请求参数如下所示

    现在的参数不是JSON了，而是form-data

image-20240409151519249

api方法

/*** 上传Excel接口*/
export function uploadExcel(data) {return request({url: '/sys/user/import/template',method: 'post',// 此处的data是form-data类型，因为要上传文件，不是JSON类型data: data})
}

按钮

<!--文本输入框的类型是file，可以接收的文件类型.xlsx或者.xls-->
<!--当我们点击“点击上传”按钮后，下面的input框就应该弹出来-->
<!--有了ref，我们就能获取input框中的DOM对象-->
<!--当我们选择上传文件后，就会触发@change事件-->
<inputref="excel-upload-input"class="excel-upload-input"type="file"accept=".xlsx, .xls"@change="uploadChange"
>

方法

// 当触发@change事件的时候，会传过来一个event
// event.target是事件源，也就是我们的input
// 在event.target对象中，有一个files数组，数组中的每一个对象都是一个file对象
async uploadChange(event) {const files = event.target.files // input的文件列表// 判断文件的长度，没有的话就不上传了if (files.length > 0) {// 调用上传接口// 参数是form-data类型，需要文件fileconst data = new FormData()// files[0] 文件data.append('file', files[0]) // 将文件的参数加入到form-data中try {await uploadExcel(data)// 此时一定是响应成功的，成功之后要重新加载数据(重新加载index页面的数据，并不是这个组件的)this.$emit('uploadSuccess')// 通知父组件，上传成功// 关闭弹层this.$emit('update:showExcelDialog', false)// 清空文件选择器// this.$refs['excel-upload-input'].value = ''} catch (error) {// 捕获失败// 清空文件选择器// this.$refs['excel-upload-input'].value = ''} finally {// 清空文件选择器this.$refs['excel-upload-input'].value = ''}}
}

image-20240409190321436

index页面中的组件

<!--放置导入Excel组件-->
<!--sync修饰符，我们点击关闭弹层或者取消的时候，会自然的把父组件的值改掉-->
<!--@uploadSuccess 表示监听子组件的uploadSuccess,监听到就重新加载页面数据-->
<import-excel :show-excel-dialog.sync="showExcelDialog" @uploadSuccess="getEmployeeList"></import-excel>

三、删除员工

image-20240409203535656

如下图所示

image-20240409193027926

流程如下所示

image-20240409203507745

  1. 按钮
<el-table-column label="操作" width="280px"><!--插槽--><template v-slot="{row}"><!--type="text"表示按钮是链接的形式--><el-button size="mini" type="text">查看</el-button><el-button size="mini" type="text">角色</el-button><!--气泡确认框--><!--点击确认后会执行 @onConfirm--><el-popconfirm title="这段内容确定要删除吗?" @onConfirm="confirmDel(row.id)"><el-button slot="reference" style="margin-left: 10px" size="mini" type="text">删除</el-button></el-popconfirm></template>
</el-table-column>
  1. api方法
/*** 删除员工的接口*/
export function delEmployee(id) {return request({url: `/sys/user/${id}`,method: 'delete'})
}
  1. 方法
async confirmDel(id) {await delEmployee(id)// 判断是不是当前页的最后一个if (this.list.length === 1 && this.queryParams.page > 1) {this.queryParams.page--}// 重新获取部门数据getEmployeeList()this.$message.success('删除用户成功')
}
argin-left: 10px" size="mini" type="text">删除</el-button></el-popconfirm></template>
</el-table-column>

这篇关于5.2 iHRM人力资源 - 员工管理 - 使用文件导入导出员工的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/913579。

相关文章

Python中模块graphviz使用入门

Python中模块graphviz使用入门

《Python中模块graphviz使用入门》graphviz是一个用于创建和操作图形的Python库,本文主要介绍了Python中模块graphviz使用入门,具有一定的参考价值,感兴趣的可以了解一... 目录1.安装2. 基本用法2.1 输出图像格式2.2 图像style设置2.3 属性2.4 子图和聚
阅读更多...
windows和Linux使用命令行计算文件的MD5值

windows和Linux使用命令行计算文件的MD5值

《windows和Linux使用命令行计算文件的MD5值》在Windows和Linux系统中,您可以使用命令行（终端或命令提示符）来计算文件的MD5值,文章介绍了在Windows和Linux/macO... 目录在Windows上：在linux或MACOS上：总结在Windows上：可以使用certuti
阅读更多...
CentOS和Ubuntu系统使用shell脚本创建用户和设置密码

CentOS和Ubuntu系统使用shell脚本创建用户和设置密码

《CentOS和Ubuntu系统使用shell脚本创建用户和设置密码》在Linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设置密码,本文写了一个shell... 在linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设
阅读更多...
Python使用Matplotlib绘制3D曲面图详解

Python使用Matplotlib绘制3D曲面图详解

《Python使用Matplotlib绘制3D曲面图详解》：本文主要介绍Python使用Matplotlib绘制3D曲面图,在Python中,使用Matplotlib库绘制3D曲面图可以通过mpl... 目录准备工作绘制简单的 3D 曲面图绘制 3D 曲面图添加线框和透明度控制图形视角Matplotlib
阅读更多...
Pandas中统计汇总可视化函数plot()的使用

Pandas中统计汇总可视化函数plot()的使用

《Pandas中统计汇总可视化函数plot()的使用》Pandas提供了许多强大的数据处理和分析功能,其中plot()函数就是其可视化功能的一个重要组成部分,本文主要介绍了Pandas中统计汇总可视化... 目录一、plot()函数简介二、plot()函数的基本用法三、plot()函数的参数详解四、使用pl
阅读更多...
gradle第三方Jar包依赖统一管理方式

gradle第三方Jar包依赖统一管理方式

《gradle第三方Jar包依赖统一管理方式》：本文主要介绍gradle第三方Jar包依赖统一管理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景实现1.顶层模块build.gradle添加依赖管理插件2.顶层模块build.gradle添加所有管理依赖包
阅读更多...
使用Python实现IP地址和端口状态检测与监控

使用Python实现IP地址和端口状态检测与监控

《使用Python实现IP地址和端口状态检测与监控》在网络运维和服务器管理中,IP地址和端口的可用性监控是保障业务连续性的基础需求,本文将带你用Python从零打造一个高可用IP监控系统,感兴趣的小伙... 目录概述：为什么需要IP监控系统使用步骤说明1. 环境准备2. 系统部署3. 核心功能配置系统效果展
阅读更多...
基于Python打造一个智能单词管理神器

基于Python打造一个智能单词管理神器

《基于Python打造一个智能单词管理神器》这篇文章主要为大家详细介绍了如何使用Python打造一个智能单词管理神器,从查询到导出的一站式解决,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 项目概述：为什么需要这个工具2. 环境搭建与快速入门2.1 环境要求2.2 首次运行配置3. 核心功能使用指
阅读更多...
使用Java将各种数据写入Excel表格的操作示例

使用Java将各种数据写入Excel表格的操作示例

《使用Java将各种数据写入Excel表格的操作示例》在数据处理与管理领域,Excel凭借其强大的功能和广泛的应用,成为了数据存储与展示的重要工具,在Java开发过程中,常常需要将不同类型的数据,本文... 目录前言安装免费Java库1. 写入文本、或数值到 Excel单元格2. 写入数组到 Excel表格
阅读更多...
redis中使用lua脚本的原理与基本使用详解

redis中使用lua脚本的原理与基本使用详解

《redis中使用lua脚本的原理与基本使用详解》在Redis中使用Lua脚本可以实现原子性操作、减少网络开销以及提高执行效率,下面小编就来和大家详细介绍一下在redis中使用lua脚本的原理... 目录Redis 执行 Lua 脚本的原理基本使用方法使用EVAL命令执行 Lua 脚本使用EVALSHA命令
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2