/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-25 11:36:07
|
* @LastEditTime: 2022-02-25 15:41:47
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 批量导入组件
|
*/
|
import React, { useState } from 'react';
|
import PropTypes from 'prop-types';
|
import { Button, Modal, Upload } from 'antd';
|
import './index.less';
|
|
/*
|
* visible, // 显示 or 隐藏
|
* title, // 标题
|
* handleCancel, // 取消
|
*/
|
const BatchImport = ({ visible, title, handleCancel }) => {
|
const [fileVisible, setFileVisible] = useState(false); // 是否已上传文件
|
|
// 文件上传的变化
|
function handleChangeFile({ file, fileList, event }) {
|
let visible = fileList.length > 0 ? true : false;
|
setFileVisible(visible);
|
}
|
|
return (
|
<Modal
|
visible={visible}
|
title={title}
|
footer={[
|
<Button key="1" onClick={handleCancel}>
|
取消
|
</Button>,
|
<Button key="2" type="primary" disabled={!fileVisible}>
|
立即导入
|
</Button>,
|
]}
|
onCancel={handleCancel}
|
>
|
<div className="batchImport-item">
|
<div className="batchImport-item-num">1</div>
|
<div>
|
<h4>下载导入的模板</h4>
|
<p className="batchImport-item-p">可以下载"导入模板"并按照模板填写后再上传。</p>
|
<Button>下载模板</Button>
|
</div>
|
</div>
|
<div className="batchImport-item">
|
<div className="batchImport-item-num">2</div>
|
<div>
|
<h4>导入文件</h4>
|
<p className="batchImport-item-p">支持文件类型: xlsx, xls。</p>
|
<Upload
|
maxCount={1}
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
listType="picture"
|
accept=".xlsx,.xls"
|
onChange={handleChangeFile}
|
>
|
{!fileVisible && <Button>上传文件</Button>}
|
</Upload>
|
</div>
|
</div>
|
</Modal>
|
);
|
};
|
|
BatchImport.propTypes = {
|
visible: PropTypes.bool,
|
title: PropTypes.string,
|
};
|
|
export default BatchImport;
|
