若依框架excel表格数据导入功能

该文详细介绍了如何在Vue项目中使用JS编写导入模板和文件上传功能,包括调用后端接口、处理上传进度、成功回调等步骤,并展示了相关Vue组件和方法的实现。同时,文章提及了Service层和Controller层的接口设计,确保数据的导入和更新操作。
摘要由CSDN通过智能技术生成

1.在js文件中编写importTemplate()方法用于下载模板

// 下载导入模板
export function importTemplate() {
  return request({
    url: '/militia/militiaorg/importTemplate',
    method: 'get'
  })
}

这里url要换成自己后端接口的路径

 

 

2.在vue文件中引入刚刚写的方法和相关方法

import { getToken } from '@/utils/auth'

3.在vue文件中 编写相关方法

    /* 导入按钮操作 */
    handleImport() {
      this.upload.title = "民兵连基本信息导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then(response => {
        this.download(response.msg);
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }

 4.在vue文件中编写导入按钮的代码

这边v-hasPermi里面的 militia:militiaorg 也要换成自己的部分

<el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-bottom-right"
          size="mini"
          @click="handleImport"
          v-hasPermi="['militia:militiaorg:import']"
        >导入</el-button>
      </el-col>

5.在vue文件中添加用户导入参数

//用户导入参数
      upload: {
        // 是否显示弹出层(用户导入)
        open: false,
        // 弹出层标题(用户导入)
        title: "导入民兵连基础信息",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/militia/militiaorg/importData"
      },

 这边url地址要换成自己后端的地址

6.在vue文件中编写导入对话框

<!-- 民兵连导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px">
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处,或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“xls”或“xlsx”格式文件!</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

7.Service(接口)层编写importData方法

 public String importData(List<MilitiaOrgInfo> dataManagementList, Boolean isUpdateSupport);

8.Serviceimpl开头添加log以及实现Service接口的方法

​private static final Logger log = LoggerFactory.getLogger(MilitiaBaseInfosServiceImpl.class);
​

 

 实现Service接口的方法

 /**
     * 导入信息
     * @param dataManagementList 数据列表
     * @param isUpdateSupport 是否更新支持,如果已存在,则进行更新数据
     * @return
     */
    @Override
    public String importData(List<MilitiaOrgInfo> dataManagementList, Boolean isUpdateSupport)
    {
        if (StringUtils.isNull(dataManagementList) || dataManagementList.size() == 0)
        {
            throw new CustomException("导入数据不能为空!");
        }
        int successNum = 0;
        int failureNum = 0;
        StringBuilder successMsg = new StringBuilder();
        StringBuilder failureMsg = new StringBuilder();
        List<MilitiaOrgInfo> existList = selectMilitiaOrgInfoList(null);
        for (MilitiaOrgInfo importData : dataManagementList)
        {
            try {
                //验证是否存在这个信息
                boolean userFlag = false;
                for (MilitiaOrgInfo entry : existList) {
                    if (entry.getMbOrgId().equals(importData.getMbOrgId()) || entry.getMilitiaName().equals(importData.getMilitiaName())) {
                        userFlag = true;
                        break;
                    }
                }
                if (!userFlag) {
                    importData.setMbOrgId(militiaOrgInfoMapper.getMbOrgId(importData.getMilitiaName()));
                    insertMilitiaOrgInfo(importData);
                    successNum++;
                    successMsg.append("<br/>" + successNum + "、数据 " + importData.getMilitiaName() + " 导入成功");
                } else if (isUpdateSupport) {
                    updateMilitiaOrgInfo(importData);
                    successNum++;
                    successMsg.append("<br/>" + successNum + "、数据 " + importData.getMilitiaName() + " 更新成功");
                } else {
                    failureNum++;
                    failureMsg.append("<br/>" + failureNum + "、数据 " + importData.getMilitiaName() + " 已存在");
                }
            }catch (Exception e)
            {
                failureNum++;
                String msg = "<br/>" + failureNum + "、数据 " + importData.getMilitiaName() + " 导入失败:";
                failureMsg.append(msg + e.getMessage());
                log.error(msg, e);
            }
        }
        if (failureNum > 0)
        {
            failureMsg.insert(0, "很抱歉,导入失败!共 " + failureNum + " 条数据格式不正确,错误如下:");
            throw new CustomException(failureMsg.toString());
        }
        else
        {
            successMsg.insert(0, "恭喜您,数据已全部导入成功!共 " + successNum + " 条,数据如下:");
        }
        return successMsg.toString();
    }

注意更换实体类以及方法

 

9.编写接口

/**
     * 导入民兵基础信息列表
     */
    @Log(title = "用户管理", businessType = BusinessType.IMPORT)
    @PostMapping("/importData")
    public AjaxResult importData(MultipartFile file, boolean updateSupport) throws Exception
    {
        ExcelUtil<MilitiaOrgInfo> util = new ExcelUtil<MilitiaOrgInfo>(MilitiaOrgInfo.class);
        List<MilitiaOrgInfo> userList = util.importExcel(file.getInputStream());
//        LoginUser loginUser = tokenService.getLoginUser(ServletUtils.getRequest());
//        String operName = loginUser.getUsername();
        String message = militiaOrgInfoService.importData(userList, updateSupport);
        return AjaxResult.success(message);
    }

    @GetMapping("/importTemplate")
    public AjaxResult importTemplate()
    {
        ExcelUtil<MilitiaOrgInfo> util = new ExcelUtil<MilitiaOrgInfo>(MilitiaOrgInfo.class);
        return util.importTemplateExcel("民兵连基础信息数据");
    }

注意将实体类,以及注入的Service换成自己的

大功告成!

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值