「趣学前端」今日祝福不限量，批量导入在路上

作者：叶一一

2022 年 9 月 09 日
北京
本文字数：3504 字
阅读完需：约 11 分钟

工作分享两不误

假期在即，事情反而变多了。既要完成业务需求，又要不断提升自己，想明年的技术规划。虽然事情比较多，但是有了好的想法或者功能，我还是忍不住想分享出来。

这不最近的需求里有一个批量导入的功能，我翻了一下项目代码，大部分批量导入功能都是直接加到页面里的，没有做模块化处理，于是我结合对业务的理解以及未来可扩展的大致预测，把批量导入封装成为一个业务组件。

项目基于 React 框架开发的，所以代码写法是 JSX 语法，组件开发使用的 hooks 函数式组件，UI 框架使用的是 antd。

灵感源于快乐

把流水的业务需求，改变成主动的寻找开发灵感，每次有新的开发收获，我就会给自己一朵小红花，谁会嫌小红花多呢。

多个批量导入功能的流程

我梳理的流程图如下：

组件封装

业务场景的思考

有时候同一个产品，对于相同的功能，设计成不同的交互。我们系统里的批量导入有两种，一种是弹窗交互的方式进行文件导入，一种是页面直接展示导入按钮组。

弹窗交互方式

页面上直接展示导入按钮组

上面无论哪种，选择文件功能和导入确定功能是一样的。但是交互方式不一样，前端进行布局处理也会不一样。所以我在产品同事评审需求的时候会提前沟通交互方式。另外对于公司内部的后台管理系统，我个人更倾向简约设计，相似功能不推荐交互方式做的五花八门。所以目前我们系统里的批量导入功能只有这两种交互方式。今天分享的是页面上直接操作上传导入的这种方式的业务功能组件化处理。

功能的可拓展

批量导入的功能相对简单，目前可拓展的有以下几个点

导入按钮支持单个或者多个；
下载模板按钮支持单个或者多个；
支持多个导入只需要一个下载模板按钮的存在。

功能实现

选择文件功能使用 antd 提供的上传组件；
导入按钮使用的是数组对象，通过 map 方法直接循环渲染；
根据产品的需求，导入和模板是分开的，所以前端布局也就分开，不过数据和导入是同一个数组对象。
正如上面流程图的设计，当页面存在多个导入按钮的时候，会进行按钮操作的控制。每个导入按钮设置了可操作开关，一次导入操作中只有一个按钮是可以操作的。

公共业务组件-批量上传

/** * @description 公共业务组件-批量上传 目前多个批量上传操作 */import React, { useState, Fragment } from 'react';import { useHistory } from 'react-router-dom';import PropTypes from 'prop-types';import _ from 'lodash';import axios from 'axios';import { Button, Row, Col, Upload, Space, message } from 'antd';import { UploadOutlined } from '@ant-design/icons';import style from './style';
const CommonMultipleBatchImport = ({ ...props }) => {  const { importList, callback } = props;  const history = useHistory();  const [fileList, setFileList] = useState([]);  const [file, setFile] = useState(null);  const [importListInit, setImportListInit] = useState(_.cloneDeep(importList));
  /**   * 上传前事件   * @param {Object} file 上传的文件对象   * @return {void} 无   */  const beforeUpload = file => {    setFile(file);    setFileList([file]);    return false;  };
  /**   * 上传事件   * @param {Object} item 当前操作的上传对象   * @return {void} 无   */  const upload = (item, index) => {    if (!file) {      return message.error('请选择文件');    }    message.info('祝福上传中，请稍后');    let list = _.cloneDeep(importListInit);    list.map((itm, inx) => {      // 上传操作项加载和不可点击的处理      itm.loading = inx === index ? true : false;      itm.disabled = true;    });    setImportListInit(list);    const formData = new FormData();    formData.append('file', file);    axios      .post(item.httpMethod, formData, { nobody: true })      .then(() => {        message.success('祝福批量导入成功，您的家人朋友不久便能收到~');      })      .finally(() => {        let listFinally = _.cloneDeep(importListInit);        listFinally.map(itm => {          itm.loading = false;          itm.disabled = false;        });        setImportListInit(listFinally);        setFileList([]);        setFile(null);        callback && callback(true);      });  };
  /**   * 文件移除事件   * @param {void} 无   * @return {void} 无   */  const onRemove = () => {    setFile(null);    setFileList([]);  };
  /**   * 下载模板   * @param {Object} item 当前操作的上传对象   * @return {void} 无   */  const downTemplate = item => {    location.href = item.downUrl;  };
  return (    <Row align='middle' className={style['multiple-datch-import']}>      <Col className='file-col mr10'>        <Upload accept='.xlsx,.xls' onRemove={onRemove} fileList={fileList} beforeUpload={beforeUpload}>          <Button icon={<UploadOutlined />}>选择文件</Button>        </Upload>      </Col>
      <Col span={6}>        <Space>          {/* 操作按钮 */}          {importListInit.map((item, index) => {            return (              <Button key={item.key} type='primary' onClick={() => upload(item, index)} loading={item.loading} disabled={item.disabled || !file}>                {item.name}              </Button>            );          })}          {/* 下载模板 */}          {importListInit.map(item => {            return (              <Fragment key={item.key}>                {item.downUrl ? (                  <Button type='primary' onClick={() => downTemplate(item)}>                    {item.downName}                  </Button>                ) : null}              </Fragment>            );          })}        </Space>      </Col>    </Row>  );};
CommonMultipleBatchImport.propTypes = {  importList: PropTypes.array.isRequired, // 上传内容的数组对象  callback: PropTypes.func, // 操作的回调};
CommonMultipleBatchImport.defaultProps = {  importList: [],};
export default CommonMultipleBatchImport;

复制代码

样式

:local(.multiple-datch-import) {  margin-bottom: 10px;
  .ant-row {    margin-bottom: 15px;  }
  .file-col {    margin-right: 10px;
    > span {      display: flex;    }  }}

复制代码

组件使用

组件引入

我们的业务组件都放到了/bundleComponents 下，所以引入的时候也会找对应的文件位置。

页面使用

// 组件引入import { CommonMultipleBatchImport } from '@/bundleComponents';
// 页面使用<CommonMultipleBatchImport callback={listQuery} importList={importList} />;

复制代码

组件通信

props 传参

下载模板：值可以为空，当它的值为空时，页面不展示下载模板按钮；
导入接口请求地址：我们的导入处理，是直接拿到文件流通过接口传给后端，后端再对文件数据做处理。不同的公司可能有不同的处理方式，此处可以根据实际情况重新处理。

页面使用

 // 导入 操作数组对象const importList = [  {    key: 'fuqi', // 导入 操作key值    name: '批量导入福气', // 导入 操作按钮名称    downName: '下载模版', // 下载模板按钮名称    downUrl: '实际的下载模板链接', // 下载模板打开链接    httpMethod: '实际的接口请求地址', // 导入接口请求地址  },  {    key: 'zhufu',    name: '批量导入祝福',    downName: '下载删除模版',    downUrl: '', // 下载模板打开链接 值为空的按钮不展示    httpMethod: '实际的接口请求地址',  },]

复制代码

回调函数

因为数据导入成功之后需要更新当前页面，所以在导入成功的逻辑里做了回调处理，回调后会进行列表页面的刷新。

const listQuery = () => {  list.query();};

复制代码

总结

批量导入的功能，不是很复杂，尤其把操作梳理清楚，每一种情况都模拟清楚，其实代码量是很少的。

重要的是，遇到相似的业务功能，可以先做功能设计，再敲代码。有些功能虽然展示内容不一样，但是流程和核心功能是一致的，就可以考虑功能模块化封装。这样的好处是，既能在业务开发中得到技术提升，又能提高效率，看似复杂的功能，其实我们早就做成组件了，页面直接引入使用，几行代码就能搞定。

恭喜，自己又得到了一朵小红花。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/663e14d19d4f89cf15feac158】。文章转载请联系作者。

叶一一

关注

苍生涂涂，天下缭燎，诸子百家，唯我纵横。 2022.09.01 加入

非职业传道受业解惑前端程序媛，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。

发布

暂无评论

创作场景

「趣学前端」今日祝福不限量，批量导入在路上

工作分享两不误

灵感源于快乐

多个批量导入功能的流程

组件封装

业务场景的思考

功能的可拓展

功能实现

组件使用

组件引入

组件通信

总结

叶一一

评论