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。

相关文章

Spring Boot整合Redis注解实现增删改查功能(Redis注解使用)

Spring Boot整合Redis注解实现增删改查功能(Redis注解使用)

《SpringBoot整合Redis注解实现增删改查功能(Redis注解使用)》文章介绍了如何使用SpringBoot整合Redis注解实现增删改查功能,包括配置、实体类、Repository、Se... 目录配置Redis连接定义实体类创建Repository接口增删改查操作示例插入数据查询数据删除数据更
阅读更多...
使用python生成固定格式序号的方法详解

使用python生成固定格式序号的方法详解

《使用python生成固定格式序号的方法详解》这篇文章主要为大家详细介绍了如何使用python生成固定格式序号,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... 目录生成结果验证完整生成代码扩展说明1. 保存到文本文件2. 转换为jsON格式3. 处理特殊序号格式（如带圈数字）4
阅读更多...
Java使用Swing生成一个最大公约数计算器

Java使用Swing生成一个最大公约数计算器

《Java使用Swing生成一个最大公约数计算器》这篇文章主要为大家详细介绍了Java使用Swing生成一个最大公约数计算器的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下... 目录第一步：利用欧几里得算法计算最大公约数欧几里得算法的证明情形 1：b=0情形 2：b>0完成相关代码第二步：加
阅读更多...
Java中流式并行操作parallelStream的原理和使用方法

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流（parallelStream）的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS
阅读更多...
Linux join命令的使用及说明

Linux join命令的使用及说明

《Linuxjoin命令的使用及说明》`join`命令用于在Linux中按字段将两个文件进行连接,类似于SQL的JOIN,它需要两个文件按用于匹配的字段排序,并且第一个文件的换行符必须是LF,`jo... 目录一. 基本语法二. 数据准备三. 指定文件的连接key四.-a输出指定文件的所有行五.-o指定输出
阅读更多...
Linux jq命令的使用解读

Linux jq命令的使用解读

《Linuxjq命令的使用解读》jq是一个强大的命令行工具,用于处理JSON数据,它可以用来查看、过滤、修改、格式化JSON数据,通过使用各种选项和过滤器,可以实现复杂的JSON处理任务... 目录一. 简介二. 选项2.1.2.2-c2.3-r2.4-R三. 字段提取3.1 普通字段3.2 数组字段四.
阅读更多...
Linux kill正在执行的后台任务 kill进程组使用详解

Linux kill正在执行的后台任务 kill进程组使用详解

《Linuxkill正在执行的后台任务kill进程组使用详解》文章介绍了两个脚本的功能和区别,以及执行这些脚本时遇到的进程管理问题,通过查看进程树、使用`kill`命令和`lsof`命令,分析了子... 目录零. 用到的命令一. 待执行的脚本二. 执行含子进程的脚本，并kill2.1 进程查看2.2 遇到的
阅读更多...
详解SpringBoot+Ehcache使用示例

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储：配置灵活性：编码示例引入依赖：配置ehcache.XML文件：配置
阅读更多...
Java 虚拟线程的创建与使用深度解析

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程？1.2 为什么需要虚拟线程？二、虚拟线程与平台线程对比代码对比示例：三
阅读更多...
k8s按需创建PV和使用PVC详解

k8s按需创建PV和使用PVC详解

《k8s按需创建PV和使用PVC详解》Kubernetes中,PV和PVC用于管理持久存储,StorageClass实现动态PV分配,PVC声明存储需求并绑定PV,通过kubectl验证状态,注意回收... 目录1.按需创建 PV（使用 StorageClass）创建 StorageClass2.创建 PV
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2