1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/*
* @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;