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。

相关文章

Android Paging 分页加载库使用实践

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.
阅读更多...
python使用try函数详解

python使用try函数详解

《python使用try函数详解》Pythontry语句用于异常处理,支持捕获特定/多种异常、else/final子句确保资源释放,结合with语句自动清理,可自定义异常及嵌套结构,灵活应对错误场景... 目录try 函数的基本语法捕获特定异常捕获多个异常使用 else 子句使用 finally 子句捕获所
阅读更多...
C++11右值引用与Lambda表达式的使用

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发；同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符
阅读更多...
Python对接支付宝支付之使用AliPay实现的详细操作指南

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali
阅读更多...
C#中lock关键字的使用小结

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中，lock关键字用于确保当一个线程位于给定实例的代码块中时
阅读更多...
MySQL 强制使用特定索引的操作

MySQL 强制使用特定索引的操作

《MySQL强制使用特定索引的操作》MySQL可通过FORCEINDEX、USEINDEX等语法强制查询使用特定索引,但优化器可能不采纳,需结合EXPLAIN分析执行计划,避免性能下降,注意版本差异... 目录1. 使用FORCE INDEX语法2. 使用USE INDEX语法3. 使用IGNORE IND
阅读更多...
C# $字符串插值的使用

C# $字符串插值的使用

《C#$字符串插值的使用》本文介绍了C#中的字符串插值功能,详细介绍了使用$符号的实现方式,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录$ 字符使用方式创建内插字符串包含不同的数据类型控制内插表达式的格式控制内插表达式的对齐方式内插表达式中使用转义序列内插表达式中使用
阅读更多...
flask库中sessions.py的使用小结

flask库中sessions.py的使用小结

《flask库中sessions.py的使用小结》在Flask中Session是一种用于在不同请求之间存储用户数据的机制,Session默认是基于客户端Cookie的,但数据会经过加密签名,防止篡改,... 目录1. Flask Session 的基本使用(1) 启用 Session(2) 存储和读取 Se
阅读更多...
Java Thread中join方法使用举例详解

Java Thread中join方法使用举例详解

《JavaThread中join方法使用举例详解》JavaThread中join()方法主要是让调用改方法的thread完成run方法里面的东西后,在执行join()方法后面的代码,这篇文章主要介绍... 目录前言1.join()方法的定义和作用2.join()方法的三个重载版本3.join()方法的工作原
阅读更多...
在macOS上安装jenv管理JDK版本的详细步骤

在macOS上安装jenv管理JDK版本的详细步骤

《在macOS上安装jenv管理JDK版本的详细步骤》jEnv是一个命令行工具,正如它的官网所宣称的那样,它是来让你忘记怎么配置JAVA_HOME环境变量的神队友,：本文主要介绍在macOS上安装... 目录前言安装 jenv添加 JDK 版本到 jenv切换 JDK 版本总结前言China编程在开发 Java
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2