ant design pro 上传excel示例

  • 前言
    • TS
    • java
    • model
    • 前端展示

前言

大家好！ 最近在学习使用ant design pro ,本人是java后端,没有专业的学习过react,都是自己看文档一步一步弄出来的,有什么不对的或者更加高效的方式,可以在评论区留下您宝贵的意见,共同学习进步,谢谢大家。

TS

import React, {useRef, useState} from 'react';
import {Button, message, Modal} from 'antd';
import {ModalForm, ProFormUploadDragger} from '@ant-design/pro-form';
import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
import {getCoImportGoodsList, deleteImportGoods} from "@/services/oms/goods";
import {PlusOutlined} from "@ant-design/icons/lib";
import {PageContainer} from "@ant-design/pro-layout";
import {getCoNo} from "@/services/oms/common";const ImportGoodsView: React.FC = () => {const actionRef = useRef<ActionType>();const [uploadExcel, handleUploadExcel] = useState<boolean>(false);const [coNoList, setCoNoList] = useState<API.Select[]>([]);//所有公司const [file, setFile] = useState<any>();/*** 删除导入商品*/const deleteGoods=async (row: API.ckBase) => {const hide = message.loading('删除中...');try {await deleteImportGoods({// @ts-ignoreid: row?.id});hide();message.success("删除成功");// @ts-ignoreactionRef.current.reload();return true;} catch (error) {hide();message.error('删除失败，请重试！');return false;}};//按钮的oClick事件调用此函数const showDeleteConfirm = async (params?: API.ImportGoodsListItem) => {Modal.confirm({title: '提示:',content: '确认移除当前商品吗?',closable: true,onOk: () => {// @ts-ignoredeleteGoods(params)}});};const columns: ProColumns<API.ImportGoodsListItem>[] = [{title: 'ID',dataIndex: 'id',width: 180,// fixed: 'left',hideInTable: true, //在表格中隐藏tooltip: '唯一主键', //提示信息hideInSearch: true, //在搜索框中隐藏sorter: (a, b) => a.id - b.id,},{title: '所属公司',ellipsis: true,width: 180,dataIndex: 'coNo',valueType: 'select',editable: false,valueEnum: () => {const options = {};coNoList.forEach((item) => {options[item.value] = item.label});return options;},},{title: '商品编号',dataIndex: 'code',width: 180,hideInSearch: true, //在搜索框中隐藏},{title: '一级品类',dataIndex: 'categoryOne',width: 180,hideInSearch: true, //在搜索框中隐藏},{title: '二级品类',dataIndex: 'categoryTwo',width: 180,hideInSearch: true, //在搜索框中隐藏},{title: '商品名称',dataIndex: 'goodsName',width: 180,},{title: '商品规格',dataIndex: 'goodsSpec',width: 180,},{title: '销售单位①',dataIndex: 'saleUnit',width: 180,hideInSearch: true, //在搜索框中隐藏},{title: '销售单位②',dataIndex: 'saleUnitTwo',width: 180,hideInSearch: true, //在搜索框中隐藏}, {title: '转换值',dataIndex: 'conversionValue',width: 180,hideInSearch: true, //在搜索框中隐藏},{title: '销售价',dataIndex: 'price',width: 180,hideInSearch: true, //在搜索框中隐藏},{title: '税率',dataIndex: 'taxRate',width: 180,hideInSearch: true, //在搜索框中隐藏},{title: '供应商',dataIndex: 'gysName',width: 180,},{title: '采购方式',dataIndex: 'procurementMethod',width: 180,hideInSearch: true, //在搜索框中隐藏},{title: '⑥⑨码',dataIndex: 'barCode',width: 180,hideInSearch: true, //在搜索框中隐藏},{title: '操作',width: 180,key: 'option',valueType: 'option',render: (text, record) => [<Buttontype="primary"key="delete"onClick={() => {showDeleteConfirm(record)}}>移除</Button>,],},];return (<PageContainer><ProTable<API.GoodsListItem, API.PageParams>columns={columns}actionRef={actionRef}rowKey="id"search={{labelWidth: 120,}}scroll={{x: 1200, y: 500}}options={false}toolBarRender={() => [<Button type="primary" key="primary" onClick={() => {handleUploadExcel(true);}}><PlusOutlined/> 导入excel </Button>,]}// @ts-ignorerequest={getCoImportGoodsList} //调用接口headerTitle="已导入商品列表"onLoad={() => {getCoNo().then(value => {//获取公司数据// @ts-ignoresetCoNoList(value)});}}/><ModalFormtitle="导入Excel"visible={uploadExcel}//updateModalVisible为true时打开悬浮窗modalProps={{//引用ModalProps里面组件destroyOnClose:true,//取消时刷新弹窗值onCancel: () => {handleUploadExcel(false)},//点击取消生效}}submitter={{// 配置按钮文本searchConfig: {resetText: '重置',submitText: '导入商品',},resetButtonProps: {style: {display: 'none',},},submitButtonProps: {},}}onFinish={async () => {if (file == '') {message.error("请选择你要导入的商品档案文件")} else {const formData = new FormData();formData.append('file', file);fetch('/v5/coGoodsInfo/importGoods', {method: 'POST',// @ts-ignoreheaders: {'x-xianghaoxi-authtoken-ssl': window.sessionStorage.getItem('TOKEN'),},body: formData,}).then(res => res.json()).then(data => {if (data.result) {message.success(data.msg);handleUploadExcel(false);if (actionRef.current) {actionRef.current.reload();}} else {message.error(data.msg);}})}}}><ProFormUploadDraggermax={1}title="单击或拖动商品档案文件到此区域进行导入"description={<div>仅支持excel文件</div>}name="file"fieldProps={{beforeUpload(info: any) {setFile(info);return false;},onChange(info: any) {if (info.file.status == 'removed') { //移除文件时；setFile('');}},}}/></ModalForm></PageContainer>);
};
export default ImportGoodsView;

java

 /*** 导入商品*/@AuthTag@SSLTag@ApiOperation(value = "[SSL]导入商品", notes = "导入商品", response = BooleanResultModel.class)@RequestMapping(value = "/importGoods", method = RequestMethod.POST)@ResponseBodypublic ResponseEntity<?> importGoods(@RequestParam(value = "file") MultipartFile file) throws IOException {BooleanResultModel resultModel=new BooleanResultModel();InputStream is = file.getInputStream();String coNo = AuthManager.getCurrentAuthData().getCoNo();try {Workbook wb = new XSSFWorkbook(is);if(StringUtils.isEmpty(coNo)){resultModel.setResult(false);resultModel.setMsg("不能使用平台账号导入商品");}else {resultModel= coImportGoodsBiz.importGoods(wb, coNo);}} catch (Exception e) {resultModel.setResult(false);resultModel.setMsg("文件格式错误,请导入正确格式的文件");}return  new ResponseEntity<>(resultModel, HttpStatus.OK);}

  /*** 导入excel到 co_import_goods表** @param wb* @param coNo* @return* @throws Exception*/public BooleanResultModel importGoods(Workbook wb, String coNo) throws Exception {BooleanResultModel resultModel = new BooleanResultModel();int xmlTitleIndex = 0;Class<?> clz = Class.forName("com.sunyuki.ec.agms.base.model.co.CoImportGoodsModel");// 查询 title 的 fiedlNameField[] fields = clz.getDeclaredFields();Map map = new HashMap();for (Field field : fields) {boolean fieldHasAnno = field.isAnnotationPresent(CoImportGoodsModel.ExcelTitle.class);if (fieldHasAnno) {CoImportGoodsModel.ExcelTitle fieldAnno = field.getAnnotation(CoImportGoodsModel.ExcelTitle.class);// 输出注解属性String value = fieldAnno.value();map.put(value, new CoImportGoodsBiz.ExcelTileIndexTable(-1, value, field.getName()));}}List<CoImportGoodsModel> sheetList = new ArrayList<CoImportGoodsModel>();int sheetSize = wb.getNumberOfSheets();for (int i = 0; i < sheetSize; i++) {// 遍历sheet页Sheet sheet = wb.getSheetAt(i);int rowSize = sheet.getLastRowNum() + 1;for (int j = 0; j < rowSize; j++) {// 遍历行Row row = sheet.getRow(j);if (row == null) {// 略过空行continue;}int cellSize = row.getLastCellNum();// 行中有多少个单元格，也就是有多少列if (j == xmlTitleIndex) {// 根据 title 获取 exlce里面的 indexList<String> rowList = new ArrayList<String>();// 对应一个数据行for (int k = 0; k < cellSize; k++) {Cell cell = row.getCell(k);String value = null;if (cell != null) {value = cell.toString();CoImportGoodsBiz.ExcelTileIndexTable excelTileIndexTable = (CoImportGoodsBiz.ExcelTileIndexTable) map.get(value);if (excelTileIndexTable != null && excelTileIndexTable.getIndex() == -1) {excelTileIndexTable.setIndex(k);}}rowList.add(value);}// 根据获取的 title 、fieldName、index} else if (j > xmlTitleIndex) {// 获取excel里面对应的数据CoImportGoodsModel templateDtlModel = new CoImportGoodsModel();// 设置共有属性Class model = templateDtlModel.getClass();for (Object k : map.keySet()) {CoImportGoodsBiz.ExcelTileIndexTable et = (CoImportGoodsBiz.ExcelTileIndexTable) map.get(k);Field f = model.getDeclaredField(et.getFileName());f.setAccessible(true);Cell cell = null;cell = row.getCell(et.getIndex());String value = null;if (cell != null) {// 日期特殊处理if (cell.getCellTypeEnum()== CellType.NUMERIC && HSSFDateUtil.isCellDateFormatted(cell)) {Date d = cell.getDateCellValue();value = "";// 科学计数法特殊处理} else if ("mobile".equals(f.getName())) {DecimalFormat df = new DecimalFormat("0");value = df.format(cell.getNumericCellValue());} else if ("productNumber".equals(f.getName())) {if (cell.getCellTypeEnum()== CellType.NUMERIC) {DecimalFormat df = new DecimalFormat("0");value = df.format(cell.getNumericCellValue());} else {value = cell.getStringCellValue();}} else {value = cell.toString();}String type = f.getType().toString();// 得到此属性的类型if (type.endsWith("int") || type.endsWith("Integer")) {Integer v = new Double(value).intValue();f.set(templateDtlModel, v); // 给属性设值} else if (type.endsWith("BigDecimal")) {if (value == null || value == "") {String j1 = "";}f.set(templateDtlModel, new BigDecimal(value));} else {f.set(templateDtlModel, value);}}}sheetList.add(templateDtlModel);}}}String goodsName = "";boolean result = true;for (CoImportGoodsModel coImportGoodsModel : sheetList) {if (StringUtils.isEmpty(coImportGoodsModel.getCostPrice())) {coImportGoodsModel.setCostPrice("0");}if (StringUtils.isEmpty(coImportGoodsModel.getPrice())) {coImportGoodsModel.setPrice("0");}if(StringUtils.isEmpty(coImportGoodsModel.getGoodsSpec())){coImportGoodsModel.setGoodsSpec("无");}if (StringUtils.isEmpty(coImportGoodsModel.getGoodsName())|| StringUtils.isEmpty(coImportGoodsModel.getCategoryOne())|| StringUtils.isEmpty(coImportGoodsModel.getSaleUnit())|| StringUtils.isEmpty(coImportGoodsModel.getGysName())|| StringUtils.isEmpty(coImportGoodsModel.getProcurementMethod())) {result = false;}}if (result) {resultModel.setResult(true);for (CoImportGoodsModel coImportGoodsModel : sheetList) {CoImportGoodsModel coImportGoodsModel1 = coImportGoodsDao.getCoImportGoodsModelByCoNoAndGoodsNameAndGoodsSpec(coNo, coImportGoodsModel.getGoodsName(), coImportGoodsModel.getGoodsSpec());if (coImportGoodsModel1 != null) {goodsName += coImportGoodsModel.getGoodsName() + ",";} else {coImportGoodsModel.setCoNo(coNo);coImportGoodsDao.insert(coImportGoodsModel);}}if (!StringUtils.isEmpty(goodsName)) {resultModel.setMsg("导入部分商品," + goodsName + "等商品已经存在无须重复导入");} else {resultModel.setMsg("导入所有商品成功");}} else {resultModel.setResult(false);resultModel.setMsg("导入失败," +"请检查导入的excel中是否存在商品名称、一级品类、销售单位、供应商、采购方式为空");}return resultModel;}

model

 package com.sunyuki.ec.agms.base.model.co;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;/*** @author xxx* @title: CoImportGoodsModel* @projectName public-client-site* @description: 导入商品实体* @date 2021/11/1214:42*/
public class CoImportGoodsModel {private Integer id;//主键IDprivate String coNo;//所属公司private String coName;@ExcelTitle("商品编号")private String code;//商品编号@ExcelTitle("一级品类")private String categoryOne;//一级品类@ExcelTitle("二级品类")private String categoryTwo;//二级品类@ExcelTitle("商品名称")private String goodsName;//商品名称@ExcelTitle("规格")private String goodsSpec;//商品规格@ExcelTitle("销售单位")private String saleUnit;//销售单位@ExcelTitle("二级单位")private String saleUnitTwo;//二级销售单位@ExcelTitle("转换值")private String conversionValue;//转换值@ExcelTitle("销售价")private String price;//价格@ExcelTitle("成本价")private String costPrice;//成本@ExcelTitle("税率")private String taxRate;//税率@ExcelTitle("供应商")private String gysName;//供应商@ExcelTitle("采购方式")private String procurementMethod;//采购方式@ExcelTitle("69码")private String barCode;//69码/*** excel title名称*/@Target({ElementType.METHOD, ElementType.FIELD})@Retention(RetentionPolicy.RUNTIME)public @interface ExcelTitle {String value() default "";}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getCoNo() {return coNo;}public void setCoNo(String coNo) {this.coNo = coNo;}public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getCategoryOne() {return categoryOne;}public void setCategoryOne(String categoryOne) {this.categoryOne = categoryOne;}public String getCategoryTwo() {return categoryTwo;}public void setCategoryTwo(String categoryTwo) {this.categoryTwo = categoryTwo;}public String getGoodsName() {return goodsName;}public void setGoodsName(String goodsName) {this.goodsName = goodsName;}public String getGoodsSpec() {return goodsSpec;}public void setGoodsSpec(String goodsSpec) {this.goodsSpec = goodsSpec;}public String getSaleUnit() {return saleUnit;}public void setSaleUnit(String saleUnit) {this.saleUnit = saleUnit;}public String getSaleUnitTwo() {return saleUnitTwo;}public void setSaleUnitTwo(String saleUnitTwo) {this.saleUnitTwo = saleUnitTwo;}public String getConversionValue() {return conversionValue;}public void setConversionValue(String conversionValue) {this.conversionValue = conversionValue;}public String getPrice() {return price;}public void setPrice(String price) {this.price = price;}public String getCostPrice() {return costPrice;}public void setCostPrice(String costPrice) {this.costPrice = costPrice;}public String getTaxRate() {return taxRate;}public void setTaxRate(String taxRate) {this.taxRate = taxRate;}public String getGysName() {return gysName;}public void setGysName(String gysName) {this.gysName = gysName;}public String getProcurementMethod() {return procurementMethod;}public void setProcurementMethod(String procurementMethod) {this.procurementMethod = procurementMethod;}public String getCoName() {return coName;}public void setCoName(String coName) {this.coName = coName;}public String getBarCode() {return barCode;}public void setBarCode(String barCode) {this.barCode = barCode;}
}

前端展示


ant design pro 上传excel示例相关推荐

  1. ant react 上传_React实战之Ant Design—Upload上传_附件上传

    React实战之Ant Design-Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...

  2. Ant Design Vue上传文件

    ant design因为使用的人比较多,成为了主推,但是坑很多.做了一个上传导入附加参数的导入功能,话不多说,上代码: 链接API : https://vue.ant.design/component ...

  3. php上传查询excel到mysql_PHP上传Excel文件导入数据到MySQL数据库示例

    PHP上传Excel文件导入数据到MySQL数据库示例2020-06-20 00:34:11 最近在做Excel文件导入数据到数据库.网站如果想支持批量插入数据,可以制作一个上传Excel文件,导入里 ...

  4. 前端初学者的Ant Design Pro V6总结（上）

    前端初学者的Ant Design Pro V6总结(上) 一.UI组件开发流程 () => {} 通用(异步)函数 useEmotionCss 定义CSS useModel获取全局状态 useC ...

  5. Web项目，网页上传excel文件并解析实战示例

    最近写了一个基于poi解析excel文件的工具类,所以想在web项目中测试一下,就做了这个简单的项目.本项目主要使用了 SpringMVC+RESTful+Maven的风格.适合有一定基础的人员. 源 ...

  6. php 上传excel到mysql_PHP上传Excel文件导入数据到MySQL数据库示例

    最近在做Excel文件导入数据到数据库.网站如果想支持批量插入数据,可以制作一个上传Excel文件,导入里面的数据内容到MySQL数据库的小程序. 要用到的工具: ThinkPHP:轻量级国产PHP开 ...

  7. 一、Ant Design Pro 与 Amis 结合

    文章目录 Amis Amis 安装 新增页面 关于amis样式 最终呈现界面 自由的左边栏菜单,本地Json保存菜单数据 从服务器加载 menu 菜单项保存在本地Json 进一步优化 修改app.ts ...

  8. Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器，桌面安装运行

    学习参考: electron-api-demos 我以下的方式,其实并把Ant Design Pro文件打包到生成的安装包里,所以,安装包=Ant Design Pro+Electron环境 ant- ...

  9. 使用ant design Pro开发项目的小结

    一.关于上手. 1. 关于ant design Pro的介绍,自己看官网,大致上可以理解为ant design(组件库) ant design Pro (完整的项目) dva(路由 数据流管理)的组合 ...

最新文章

  1. twitter 监控登陆活动
  2. h5页面生成图片分享到微信js_html2canvas 动态生成微信分享海报的优质js库
  3. android用java写文本框_Android 使用TextView实现验证码输入框
  4. 网络拓扑Visio式的定制
  5. 20190820 On Java8 第十章 接口
  6. 拒绝访问(Access Denied)错误的快捷诊断方法
  7. python零基础教学plc_编程零基础应当如何开始学习 Python？
  8. 董明珠这一年：格力造芯与银隆困局
  9. 离散数学关于等价关系的证明
  10. 牛顿迭代法求解开根号、泰勒展开式求解arctan及cordic的原理
  11. 小程序https本地服务器,微信小程序搭建自己的Https服务器
  12. 服务器英文系统怎么切中文,云服务器怎么把英文改成中文
  13. 机器人酷跑电脑版下载地址_机器人酷跑游戏
  14. 苹果在线商店开售官方翻新Retina MacBook Pro
  15. 中国人民解放军郑州计算机学院官网,解放军信息工程大学录取分数线2021
  16. SVD分解图像压缩应用英语论文
  17. 软件测试的前景还是很广阔的，你怎么看？
  18. 嵌入式实时操作系统4——任务调度
  19. python右键idel消失问题
  20. android 电脑浏览器,这5种轻量级的国内Android浏览器，都有自己的“专有秘密”...

热门文章

  1. 赵小楼《天道》《遥远的救世主》深度解析（53）欧阳雪为什么把20万担保金也买成股票？
  2. C语言中的FILE结构体
  3. pythonexit(0)什么意思_python使用sys.exit抛错是什么原因
  4. 终端安全管理防护的措施之一
  5. STM32F429 VCAP12电容错误死机
  6. 大分子葡聚糖-牛血清蛋白抗原偶联物(Dextran-BSA)|多糖-蛋白偶联物
  7. C语言之#define用法入门详解
  8. 纯CSS实现的非常酷的卡通肖像和眨眼动效
  9. 程序员辞职理由_我成为程序员的5大理由
  10. 携手应对全球医疗呼吸机短缺