/* * @Description: * @Author: leizhe * @Date: 2022-04-11 18:12:39 * @LastEditTime: 2022-05-19 17:28:25 * @LastEditors: leizhe */ import React, { useEffect, useState } from 'react'; import { Modal, Form, Input, notification, message, Button, Col, Row, Upload } from 'antd'; import { Import } from '@/services/drawBoardManage/api'; const ImportModal = props => { const { visible, onCancel, callBackSubmit = () => {} } = props; const [addForm] = Form.useForm(); const [file, setFile] = useState(''); const [load, setLoad] = useState(false); // 提交加载 useEffect(() => { setLoad(false); addForm.resetFields(); }, [visible]); const aa = { beforeUpload: file => { console.log(file); addForm.setFieldsValue({ ModelFile: file.name, }); setFile(file); return false; }, }; const importData = () => { addForm.validateFields().then(validate => { if (validate) { setLoad(true); const formData = new FormData(); formData.append('file', file); Import(formData).then(res => { setLoad(false); if (res.code === 0) { callBackSubmit(); addForm.resetFields(); notification.success({ message: '提示', duration: 3, description: res.msg, }); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); } }); }; return ( <Modal title="导入数据" visible={visible} onCancel={onCancel} destroyOnClose onOk={importData} confirmLoading={load} afterClose={() => { addForm.resetFields(); }} maskClosable={false} okText="确认" cancelText="取消" > <Form form={addForm} labelCol={{ span: 5 }}> <Row> <Col span={17}> <Form.Item label="模型文件" name="ModelFile" labelCol={{ span: 7 }} rules={[ { required: true, message: '请选择压缩文件', }, ]} > <Input placeholder="请选择压缩文件" /> </Form.Item> </Col> <Col span={7}> <Form.Item> <Upload {...aa} accept=".zip"> <Button style={{ width: '130px' }}>上传文件</Button> </Upload> </Form.Item> </Col> </Row> </Form> </Modal> ); }; export default ImportModal;