69 lines
1.4 KiB
TypeScript
69 lines
1.4 KiB
TypeScript
import { UploadOutlined } from '@ant-design/icons';
|
|
import { Button, Modal, Upload, UploadFile, UploadProps } from 'antd';
|
|
import React, { useState } from 'react';
|
|
|
|
const ImportModal: React.FC<{
|
|
visible: boolean;
|
|
close: () => void;
|
|
doImpt: (file: any) => Promise<void>;
|
|
accept: string;
|
|
}> = ({ visible, close, doImpt, accept }) => {
|
|
const [fileList, setFileList] = useState<UploadFile[]>([]);
|
|
const [uploading, setUploading] = useState(false);
|
|
|
|
const handleUpload = async () => {
|
|
const file = fileList[0];
|
|
if (!file || uploading) {
|
|
return;
|
|
}
|
|
|
|
setUploading(true);
|
|
|
|
try {
|
|
await doImpt(file);
|
|
close();
|
|
} catch (e) {
|
|
console.log(e)
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
};
|
|
|
|
|
|
if (!visible) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
title="数据导入"
|
|
open
|
|
okButtonProps={{
|
|
disabled: fileList.length === 0,
|
|
loading: uploading
|
|
}}
|
|
onOk={handleUpload}
|
|
onCancel={() => close()}
|
|
>
|
|
<Upload
|
|
multiple={false}
|
|
beforeUpload={file => {
|
|
setFileList([file]);
|
|
return false;
|
|
}}
|
|
onRemove={() => {
|
|
setFileList([]);
|
|
}}
|
|
accept={accept}
|
|
maxCount={1}
|
|
onChange={(info) => {
|
|
console.log(info);
|
|
}}
|
|
>
|
|
<Button icon={<UploadOutlined />}>选择文件</Button>
|
|
</Upload>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default ImportModal |