分布式预约挂号平台（九） | 郑医宝の整合 easyexcel技术 实现数据字典的 导入和导出功能

一、添加easyexcel依赖

在service_cmn的pom.xml文件中添加easyexcel依赖

<dependency>
   <groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
</dependency>

二、数据字典实体类修改

model/src/main/java/com/zhengyibao/yygh/model/cmn/Dict
Dict不再extends BaseEntity，因为此时id不再是自动增长的了，在导入时id是从表格中获取的，所以需要进行单独设置

package com.zhengyibao.yygh.model.cmn;

import com.baomidou.mybatisplus.annotation.*;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.zhengyibao.yygh.model.base.BaseEntity;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * @author wenmiao
 * @create 2021-10-03 18:20
 * @explain
 */
@Data  //lombok生成get、set方法
@ApiModel(description = "数据字典")
@TableName("dict")
public class Dict {   //Dict不extends BaseEntity，因为此时id不再是自动增长的了，所以进行单独设置

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value="id") //@ApiModelProperty用于对对model属性的说明或者数据操作更改 value
    //@TableId(type= IdType.AUTO)   //@TableId用于,主键策略,AUTO代表主键自动增长,Dict不需要设置自动增长，由于添加进去的id是excel表格中的数据
    private Long id;


    @ApiModelProperty(value="创建时间")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    @TableField("create_time")    //映射数据库中的名称
    private Date createTime;

    @ApiModelProperty(value="更新时间")
    @TableField("update_time")
    private Date updateTime;

    @ApiModelProperty(value="逻辑删除(1:已删除,0:未删除)")
    @TableLogic    //Mybatis-plus逻辑删除
    @TableField("is_deleted")
    private Integer isDeleted;

    @ApiModelProperty(value="其他参数")
    @TableField(exist = false) //表示当前属性不是数据库的字段,但在项目中必须使用
    private Map<String,Object> param=new HashMap<>();

    @ApiModelProperty(value="上级id")
    @TableField("parent_id")
    private Long parentId;

    @ApiModelProperty(value="名称")
    @TableField("name")
    private String name;

    @ApiModelProperty(value="值")
    @TableField("value")
    private Long value;

    @ApiModelProperty(value="编码")
    @TableField("dict_code")
    private String dictCode;

    @ApiModelProperty(value="是否包含子节点")
    @TableField(exist=false)   //数据表中没有这个字段也能正常运行
    private boolean hasChildren;   //为了在前端做层级显示使用的属性
}

三、数据字典对应导出表格实体类

model/src/main/java/com/zhengyibao/yygh/vo/cmn/DictEeVo

package com.zhengyibao.yygh.vo.cmn;

import com.alibaba.excel.annotation.ExcelProperty;
import lombok.Data;

/**
 * @author wenmiao
 * @create 2021-10-11 10:13
 * @explain
 */

@Data
public class DictEeVo {

    @ExcelProperty(value = "id",index=0)   //设置excel表格的表头内容
    private Long id;

    @ExcelProperty(value = "上级id",index=1)
    private Long parentId;

    @ExcelProperty(value = "名称",index=2)
    private String name;

    @ExcelProperty(value = "值",index=3)
    private Long value;

    @ExcelProperty(value = "编码",index=4)
    private String dictCode;
}

下面是设置后导出到表格后的表头效果

四、导出 导入 后端接口开发

数据字典导出到excel表格 与 excel表格导入到数据字典

1.修改Controller表示层

package com.zhengyibao.yygh.cmn.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.mysql.jdbc.StringUtils;
import com.zhengyibao.yygh.cmn.service.DictService;
import com.zhengyibao.yygh.common.result.Result;
import com.zhengyibao.yygh.model.cmn.Dict;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletResponse;
import java.util.List;

@Api(tags="数据字典接口")
@RestController
@RequestMapping("/admin/cmn/dict")
@CrossOrigin  //解决跨域问题
public class DictController {

    @Autowired
    private DictService dictService;
    
    //使用easyexcel技术导出数据字典内容到excel表格
    @ApiOperation(value = "导出数据字典内容到excel表格")
    @GetMapping("exportDictData")
    //由于只需要将数据导出（下载）到表格中，不需要返回数据，所以使用返回值类型为void
    public void exportDictData(HttpServletResponse response){   //为了让用户能自己选择路径，添加一个HttpServletResponse参数来响应用户
        System.out.println("sahdbnsahdbashdb");
        dictService.exportDictData(response);
    }
	
	//使用easyexcel技术导入excel表格到数据字典
    @ApiOperation(value = "导入excel表格到数据字典")
    @PostMapping("importDictData")   //由于get提交不能跟对象类参数，需要传MultipartFile对象，就需要使用post提交
    public Result importDictData(MultipartFile file){   //MultipartFile file用来获取上传的文件
        dictService.importDictData(file);
        return Result.ok();
    }
}

2.设置监听器

进行excel表格导入数据库操作时需要设置监听器

package com.zhengyibao.yygh.cmn.listener;

import com.alibaba.excel.context.AnalysisContext;
import com.alibaba.excel.event.AnalysisEventListener;
import com.zhengyibao.yygh.cmn.mapper.DictMapper;
import com.zhengyibao.yygh.model.cmn.Dict;
import com.zhengyibao.yygh.vo.cmn.DictEeVo;
import org.springframework.beans.BeanUtils;

/**
 * @author wenmiao
 * @create 2021-10-12 10:34
 * @explain 监听器，用来进行excel表格数据导入的
 */
public class DictListener extends AnalysisEventListener<DictEeVo>{

    //如果要将表格中读取的内容写入到数据库的话，就需要使用DictMapper类来调用相关的写入方法
    //方法一：可以在上面添加注解@Component，将整个监听器交给spring管理
    //方法二：构造器注入：使用私有属性,并生成监听器的有参构造来注入dictMapper
    private DictMapper dictMapper;
    public DictListener(DictMapper dictMapper) {
        this.dictMapper = dictMapper;
    }

    //一行一行的读取，dictEeVo就是每次读取的内容，把被褥直接加载到数据库中即可
    @Override
    public void invoke(DictEeVo dictEeVo, AnalysisContext analysisContext) {

        //调用方法添加数据到数据库
        Dict dict=new Dict();
        BeanUtils.copyProperties(dictEeVo,dict);   //要传入数据库了，需要将dictEeVo转化为dict
        dictMapper.insert(dict);
    }

    @Override
    public void doAfterAllAnalysed(AnalysisContext analysisContext) {

    }
}

3.修改Service持久层

在DictService下面加上以下方法

//使用easyexcel技术导出数据字典内容到excel表格
void exportDictData(HttpServletResponse response);
//使用easyexcel技术导入excel表格到数据字典
void importDictData(MultipartFile file);

在DictServiceImpl下面加上以下实现类

//使用easyexcel技术导出数据字典内容到excel表格
@Override
public void exportDictData(HttpServletResponse response) {

    //导出
    //设置下载信息
    response.setContentType("application/vnd.ms-excel");   //设置content类型为excel类型
    response.setCharacterEncoding("utf-8");     //设置编码格式
    String fileName="dict";  //英文文件名不需要加编码  //String fileNames= URLEncoder.encode("数据字典","UTF-8");  //中文文件名要加编码，防止中文乱码
    response.setHeader("Content-disposition","attachment;filename="+fileName+".xlsx"); //设置头信息，Content-disposition表示内容以下载方式打开，attachment;filename表示文件和文件名

    //查询数据库
    List<Dict> dictList=baseMapper.selectList(null);

    //将Dict转换为DictEeVo对象
    List<DictEeVo> dictEeVoList=new ArrayList<>(dictList.size());
    for(Dict dict:dictList){
        DictEeVo dictEeVo=new DictEeVo();
        BeanUtils.copyProperties(dict,dictEeVo);  //将dict复制到dictEeVo中
        dictEeVoList.add(dictEeVo);
    }

    //调用方法进行写操作
    //之前第一个参数传入的是路径，现在我们使用文件输出流response.getOutputStream()，
    try {
        //getOutputStream有异常，使用try catch捕获一下
        EasyExcel.write(response.getOutputStream(),DictEeVo.class).sheet("dict").doWrite(dictEeVoList);
    } catch (IOException e) {
        e.printStackTrace();
    }
    
    //----------------------------------------------------------------------------------------------
    
    //导入
	//使用easyexcel技术导入excel表格到数据字典
	@Override
	public void importDictData(MultipartFile file) {
	    try {
	        EasyExcel.read(file.getInputStream(),DictEeVo.class,new DictListener(baseMapper)).sheet().doRead();  //getInputStream文件输入流,new DictListener会调用监听器将一行一行读出的数据写入数据库中
	    } catch (IOException e) {
	        e.printStackTrace();
	    }
	}
}

五、数据字典导出到excel表格 与 excel表格导入到数据字典 前端页面开发

1.添加数据字典路由index.js

//2.为数据字典模块添加路由
{
  path: '/cmn',  //第一层的路径 views下面的cmn
  component: Layout,
  redirect: '/cmn/list',
  name: '数据管理',
  alwaysShow:true,  //总是显示，如果下面只有一个层级，如果想显示数据管理需要加上这个属性
  meta: { title: '数据管理', icon: 'el-icon-s-help' },    //icon是列表前面显示的图标
  children: [
    {
      path: 'list',   //第二层的路径,列表功能
      name: '数据字典',
      component: () => import('@/views/dict/list'),   //2.设置跳转页面的路径   import是引入页面路径
      meta: { title: '数据字典', icon: 'table' }
    }
  ]
},

2.创建数据字典管理列表跳转页面 list.vue 实现导入和导出

导出使用超链接
导入使用 element-ui的Dialog对话框 和 upload上传

<!-- 默认模板输入快捷键：default -->
<template>
    <div class="app-container">
        <!-- 添加导入和导出按钮 -->
        <div class="el-toolbar">
            <div class="el-toolbar-body" style="justify-content:flex-start;">
                <!-- 在新的标签页打开下面这个超链接 -->
                <a href="http://localhost:8203/admin/cmn/dict/exportDictData" target="_blank">
                    <el-button type="text">  <!-- 把按钮上的@click="exportDictData"点击事件去掉-->
                        <i class="fa fa-plus"/>导出  <!-- 直接调用导出接口直接进行数据字典下载到excel表格中 -->
                    </el-button>
                </a> 
                 <el-button type="text"  @click="importDictData">  
                    <i class="fa fa-plus"/>导入
                </el-button>
            </div>
        </div>
        <!-- 封装了3个属性，:data查出来用于懒加载的数据，:load是一个递归操作，显示下一层级的内容，:tree-props判断dictList中的属性值是true还是false来显示 -->
        <el-table :data="dictList" :load="getChildrens" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%;" row-key="id"  border lazy>
            <el-table-column label="名称" width="230" align="left">
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column label="编码" width="220">
                <template slot-scope="{row}">
                    {{row.dictCode}}
                </template>
            </el-table-column>
            <el-table-column label="值" width="230" align="left">
                <template slot-scope="scope">
                    <span>{{scope.row.value}}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.createTime}}</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- element-ui的Dialog对话框，用来在导入数据时弹出对话框 -->
        <!-- dialogImportVisible:初始默认是false，弹框就不弹出来，若点了导入按钮，值是true，弹框就弹出来 -->
        <el-dialog title="导入" :visible.sync="dialogImportVisible" width="30%" >
            <el-form label-position="right" label-width="170px">
                <el-form-item label="文件">
                    <!-- element-ui的upload上传 -->
                    <!-- :multiple="false"是否支持传入多个文件，false是不支持，:on-success="onUploadSuccess"表示上传成功后调用onUploadSuccess方法，action是后端接口的路径 -->
                    <el-upload class="upload-demo" action="http://localhost:8203/admin/cmn/dict/importDictData" :on-success="onUploadSuccess" :multiple="false">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- 当点击取消按钮后，弹框消失 -->
                <el-button @click="dialogImportCisible=false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

//引入对应的api
import { findDictList } from '@/api/dict.js'

export default {
    data(){
        return{
            dictList:[],   //数据字典列表数组
            dialogImportVisible:false //设置弹框是否弹出，默认false，弹框就不弹出来，若是true，弹框就弹出来
        }
    },
    created(){
        this.getDictList(1)
    },
    methods:{
        //获得数据字典列表
        getDictList(id){
            findDictList(id)
                .then(response =>{
                    this.dictList=response.data
                })
        },
        //做递归查询，显示数据列表下一层级
        getChildrens(tree,treeNode,resolve){
            findDictList(tree.id)
                .then(response =>{
                    resolve(response.data)
                })
        },
        //导出数据字典的数据，上面使用超链接跳转了，将@click时间去掉，不需要调用此方法了
        // exportDictData(){
        //     //直接调用导出接口直接进行数据字典下载到excel表格中
        //     windows.href="http://localhost:8203/admin/cmn/dict/exportDictData"
        // }

        //导入数据字典
        importDictData(){
            this.dialogImportVisible=true //当点了导入按钮后，值变为true，就会弹出弹框
        },
        //上传xls文件成功后，调用的方法
        onUploadSuccess(){
            //关闭弹框
            this.dialogImportVisible=false
            //刷新页面,重新查一次数组
            this.getDictList(1)
        }
    }
}
</script>

3.测试