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-dialog
    width="500px"
    title="员工导入"
    :visible="showExcelDialog"
    @close="$emit('update:showExcelDialog', false)"
  >
    <el-row type="flex" justify="center">
      <div class="upload-excel">
        <!--文本输入框的类型是file，可以接收的文件类型.xlsx或者.xls-->
        <input
          ref="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对象-->
    <input
      ref="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事件-->
<input
  ref="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类型，需要文件file
    const 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/552421.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

使用嘉立创EDA打开JSON格式的PCB及原理图

使用嘉立创EDA打开JSON格式的PCB及原理图

一、将PCB和原理图放同一文件夹 并打包成.zip文件 二、打开嘉立创EDA并导入.zip文件 文件 -> 导入 -> 嘉立创EDA标准版/专业版 三、选择.zip文件并选择 “导入文件并提取库” 四、自定义工程路径 完成导入并转换为.eprj文件 五、视频教学 bilibili_使用立创EDA打开JSO…
阅读更多...
香港科技大学广州｜数据科学与分析学域硕博招生宣讲会—华东师范大学专场

香港科技大学广州｜数据科学与分析学域硕博招生宣讲会—华东师范大学专场

时间&#xff1a;2024年4月25日&#xff08;星期四&#xff09;13:30 地点&#xff1a;华东师范大学普陀校区文附楼507 报名链接&#xff1a;https://www.wjx.top/vm/Q0cKTUI.aspx# 跨学科研究领域 *数据驱动的人工智能和机器学习 *统计学习和建模 工业和商业分析 *特定行业…
阅读更多...
float实现文字环绕效果

float实现文字环绕效果

实现效果如下&#xff1a; 一、问题分析 接到需求就是右侧显示图片&#xff0c;左侧显示一个标题和内容。第一时间没有想到其他的布局的好的实现方式&#xff0c;就想到了float布局。于是乎去查了下有关float的文档&#xff0c;float 是相当的好用。 float定义如下&#xf…
阅读更多...
kibana源码编译

kibana源码编译

一、安装nodejs16.14.2及yarn &#xff08;一&#xff09;nodejs 1、下载 https://cdn.npmmirror.com/binaries/node/v16.14.2/node-v16.14.2-linux-x64.tar.gz2、解压 tar -zxf node-v16.14.2-linux-x64.tar.gz -C /app cd /app mv node-v16.14.2-linux-x64 node3、配置环…
阅读更多...
在Linux系统中设定延迟任务

在Linux系统中设定延迟任务

一、在系统中设定延迟任务要求如下&#xff1a; 要求&#xff1a; 在系统中建立easylee用户&#xff0c;设定其密码为easylee 延迟任务由root用户建立 要求在5小时后备份系统中的用户信息文件到/backup中 确保延迟任务是使用非交互模式建立 确保系统中只有root用户和easylee用户…
阅读更多...
Matlab|基于改进遗传算法的配电网故障定位

Matlab|基于改进遗传算法的配电网故障定位

目录 1 主要内容 2 部分代码 3 部分程序结果 4 下载链接 1 主要内容 该程序复现文章《基于改进遗传算法的配电网故障定位》&#xff0c;将改进的遗传算法应用于配电网故障定位中, 并引入分级处理思想, 利用配电网呈辐射状的特点, 首先把整个配电网划分为主干支路和若干独立…
阅读更多...
2024年阿里云4核8G配置云服务器价格低性能高！

2024年阿里云4核8G配置云服务器价格低性能高！

阿里云4核8G服务器租用优惠价格700元1年&#xff0c;配置为ECS通用算力型u1实例&#xff08;ecs.u1-c1m2.xlarge&#xff09;4核8G配置、1M到3M带宽可选、ESSD Entry系统盘20G到40G可选&#xff0c;CPU采用Intel(R) Xeon(R) Platinum处理器&#xff0c;阿里云优惠 aliyunfuwuqi…
阅读更多...
【Python】高级进阶（专版提升3）

【Python】高级进阶（专版提升3）

Python 1 程序结构1.1 模块 Module1.1.1 定义1.1.2 作用1.1.3 导入1.1.3.1 import1.1.3.2 from import 1.1.4 模块变量1.1.5 加载过程1.1.6 分类 1.2 包package1.2.1 定义1.2.2 作用1.2.3 导入1.1.3.1 import1.1.3.2 from import 2 异常处理Error2.1 异常2.2 处理 3 迭代3.1 可…
阅读更多...
TinyEMU源码分析之访存处理

TinyEMU源码分析之访存处理

TinyEMU源码分析之访存处理 1 访存指令介绍2 指令译码3 地址转换3.1 VA与PA3.2 VA转PA 4 判断地址空间范围5 执行访存操作5.1 访问RAM内存5.2 访问非RAM&#xff08;设备&#xff09;内存 6 访存处理流程图 本文属于《 TinyEMU模拟器基础系列教程》之一&#xff0c;欢迎查看其…
阅读更多...
数据结构排序算法

数据结构排序算法

排序也称排序算法(SortAlgorithm)&#xff0c;排序是将一组数据&#xff0c;依指定的顺序进行排列的过程。 分类 内部排序【使用内存】 指将需要处理的所有数据都加载到内部存储器中进行排序插入排序 直接插入排序希尔排序 选择排序 简单选择排序堆排序 交换排序 冒泡排序快速…
阅读更多...
两阶段提交进阶

两阶段提交进阶

两阶段提交之进阶 上一节我们讲了&#xff0c;两阶段提交逻辑上的表现&#xff0c;其实较为肤浅&#xff0c;并且偏向理论&#xff0c;可能大家都能看懂&#xff0c;但是如果放入实际的mysql应用中并联系事务和日志进行分析&#xff0c;又会怎么样呢&#xff1f; 这次就专门分…
阅读更多...
Unity类银河恶魔城学习记录13-1 p142 Save system源代码

Unity类银河恶魔城学习记录13-1 p142 Save system源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili FileDataHandler.cs using System; using System.IO; using UnityEngine; p…
阅读更多...
软考133-上午题-【软件工程】-软件项目估算

软考133-上午题-【软件工程】-软件项目估算

一、COCOMO 估算模型 COCOMO 模型是一种精确的、易于使用的成本估算模型。 COCOMO 模型按其详细程度分为&#xff1a;基本 COCOMO 模型、中级 COCOMO 模型和详细 COCOMO 模型。 1&#xff09;基本 COCOMO 模型 基本 COCOMO 模型是一个静态单变量模型&#xff0c;用于对整个软…
阅读更多...
内衣裤洗衣机如何选购？掌握这六个挑选技巧，轻松选购！

内衣裤洗衣机如何选购？掌握这六个挑选技巧，轻松选购！

这两年内衣裤洗衣机可以称得上较火的小电器&#xff0c;小小的身躯却有大大的能力&#xff0c;一键可以同时启动洗、漂、脱三种全自动为一体化功能&#xff0c;在多功能和性能的提升上&#xff0c;还可以解放我们双手的同时将衣物给清洗干净&#xff0c;让越来越多小伙伴选择一…
阅读更多...
node基础 第二篇

node基础 第二篇

01 ffmpeg开源跨平台多媒体处理工具&#xff0c;处理音视频&#xff0c;剪辑&#xff0c;合并&#xff0c;转码等 FFmpeg 的主要功能和特性:1.格式转换:FFmpeg 可以将一个媒体文件从一种格式转换为另一种格式&#xff0c;支持几乎所有常见的音频和视频格式&#xff0c;包括 MP…
阅读更多...
Node Version Manager（nvm）：轻松管理 Node.js 版本的利器

Node Version Manager（nvm）：轻松管理 Node.js 版本的利器

文章目录 前言一、名词解释1、node.js是什么&#xff1f;2、nvm是什么&#xff1f; 二、安装1.在 Linux/macOS 上安装2.在 Windows 上安装 二、使用1.查看可安装的node版本2.安装node3. 查看已安装node4.切换node版本5.其它 总结 前言 Node.js 是现代 Web 开发中不可或缺的一部…
阅读更多...
docker-compose 安装MongoDB续创建用户及赋权

docker-compose 安装MongoDB续创建用户及赋权

文章目录 1. 问题描述2. 分析2.1 admin2.2 config2.3 local 3. 如何连接3.解决 1. 问题描述 在这一篇使用docker-compose创建MongoDB环境的笔记里&#xff0c;我们创建了数据库&#xff0c;但是似乎没有办法使用如Robo 3T这样的工具去连接数据库。连接的时候会返回这样的错误&…
阅读更多...
c语言，单链表的实现----------有全代码!!!!

c语言，单链表的实现----------有全代码!!!!

1.单链表的定义和结构 单链表是一种链式的数据结构&#xff0c;它用一组不连续的储存单元存反线性表中的数据元素。链表中的数据是以节点的形式来表示的&#xff0c;节点和节点之间相互连接 一般来说节点有两部分组成 1.数据域 &#xff1a;数据域用来存储各种类型的数据&…
阅读更多...
基于SpringBoot+Vue的疾病防控系统设计与实现（源码+文档+包运行）

基于SpringBoot+Vue的疾病防控系统设计与实现（源码+文档+包运行）

一.系统概述 在如今社会上&#xff0c;关于信息上面的处理&#xff0c;没有任何一个企业或者个人会忽视&#xff0c;如何让信息急速传递&#xff0c;并且归档储存查询&#xff0c;采用之前的纸张记录模式已经不符合当前使用要求了。所以&#xff0c;对疾病防控信息管理的提升&a…
阅读更多...
windows 如何安装 perl ?

windows 如何安装 perl ?

链接&#xff1a;https://strawberryperl.com/ 我们选择安装 “草莓 perl” 下载后根据引导安装就行了
阅读更多...
最新文章

Copyright @ 2022~2023