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

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

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

constlistQuery= () => {
list.query();
};