既然有员工资料导出需求,当然也就有导入需求。对前端而言,员工资料导入就是文件上传,对后端而言,则是获取上传的文件进行解析,并把解析出来的数据保存到数据库中。
后端接口实现
后端主要是获取前端上传文件的流,然后进行解析,代码如下:
代码解释:
• 首先根据上传文件的流获取一个HSSFWorkbook对象,然后获取workbook中表单的个数,进行遍历。
• 对于每一个表单,首先获取行数,然后进行遍历,第一行是标题行,跳过,如果该行没有数据也跳过,如果该行数据正常,就获取该行的单元格个数进行遍历。
• 本案例中,单元格的格式主要分为三种,即日期、数字以及普通文本,因此在不同的switch分支中进进行处理。
• 最后将遍历得到的员工数据集合返回。
在数据导入接口中调用importEmp2List方法,获取员工数据集合后,插入数据库中即可,代码如下:
前端实现
前端主要是一个Excel表格的上传,这里直接采用Element的文件上传控件,代码如下
代码解释:
• accept表示接收的上传文件类型。
• action表示上传接口。
• :on-success表示上传成功时的回调。
• :on-error表示上传失败时的回调。
• :disabled表示当fileUploadBtnText属性的值为“正在导入”时禁用上传控件。这个配置主要考虑到上传是一个耗时操作,在一个文件上传的过程中,其他文件暂时不能上传。
• :before-upload表示文件上传前的回调。
• el-button中的:loading="fileUploadBtnText==‘正在导入’"表示当fileUploadBtnText的文本为“正在导入”时,显示一个Loading加载。相关回调方法如下:
代码解释:
• 在文件上传之前,首先设置fileUploadBtnText的文本为“正在导入”,这样上传按钮上的文本就会变为“正在导入”,同时上传按钮的状态变为禁用,并且在上传按钮上多了一个Loading。
• 在上传成功时,给用户以提示,然后重新加载员工数据,并将fileUploadBtnText的文本设置为“导入数据”。
• 上传出错时,给用户以提示,同时将fileUploadBtnText的文本设置为“导入数据”。
所有配置完成后,单击“导入数据”,选择16.8节导出的用户数据进行导入,如图