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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
import React, { useEffect, useState } from 'react';
import { Modal, Upload, Button, Form, Input, message, Popconfirm } from 'antd';
import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
import { UpLoadWebModuleTree, DownLoadWebModuleTree } from '@/services/webConfig/api';
import icon from '@/assets/images/common/警告.png';
import styles from './ImportOrExport.less';
const ImportOrExport = props => {
const { visible, onFinish, onCancel, nodeObj, subSystemValue } = props;
const [form] = Form.useForm();
const [uploading, setUploading] = useState(false); // 文件是否上传成功
const [file, setFile] = useState(); // 上传文件信息
useEffect(() => {
if (visible) {
form.setFieldsValue({ fileName: '' });
}
}, [visible]);
// 本地上传文件
const beforeUpload = val => {
console.log(val);
form.setFieldsValue({ fileName: val.name });
setFile(val);
return false;
};
// 导出菜单
const hadelExport = () => {
window.location.href = DownLoadWebModuleTree({
nodeId: nodeObj ? nodeObj.menuID : '-1',
sysName: subSystemValue,
});
};
// 提交上传文件
const handleUpload = type => {
if (!form.getFieldValue('fileName')) {
message.info('请上传文件');
return;
}
const formData = new FormData();
formData.append('_files', file);
formData.append('type', type);
formData.append('nodeId', nodeObj ? nodeObj.menuID : '-1');
formData.append('visible', subSystemValue);
UpLoadWebModuleTree(formData)
.then(res => {
console.log(res);
if (res.code === 0) {
message.success('上传成功');
onCancel();
} else {
message.error(res.msg);
}
})
.catch(() => {
message.error('网络异常，请稍后再试');
});
};
return (
<>
<Modal
title="菜单组导入导出"
visible={visible}
onOk={onFinish}
width="550px"
onCancel={onCancel}
maskClosable={false}
destroyOnClose
centered
footer={null}
>
<div style={{ paddingBottom: '15px' }}>
<Form name="form" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} form={form}>
<Form.Item label="本地导出">
<Button type="primary" onClick={hadelExport} icon={<DownloadOutlined />}>
导出菜单配置
</Button>
</Form.Item>
<Form.Item label="本地导入">
<div style={{ display: 'flex' }}>
<Form.Item name="fileName" style={{ marginBottom: '0' }}>
<Input disabled />
</Form.Item>
<Upload beforeUpload={beforeUpload} showUploadList={false} accept=".json">
<Button
type="primary"
style={{ marginLeft: '10px' }}
icon={<UploadOutlined />}
shape="circle"
/>
</Upload>
<Button
type="primary"
onClick={() => handleUpload(2)}
loading={uploading}
style={{
marginLeft: '10px',
display: nodeObj ? 'none' : 'block',
}}
>
增量导入
</Button>
<Popconfirm
overlayClassName={styles.ImportOrExport}
title={
<span style={{ color: 'red' }}>
覆盖导入操作会覆盖所有菜单配置并使
<br />
角色菜单权限失效！！！是否继续导入？
</span>
}
icon={
<img
src={icon}
alt=""
width="18px"
height="18px"
style={{ marginTop: '3px' }}
/>
}
onConfirm={() => handleUpload(1)}
onVisibleChange={() => console.log('visible change')}
>
<Button
type="primary"
style={{
marginLeft: '10px',
display: nodeObj ? 'none' : 'block',
backgroundColor: '#ff8f18',
borderColor: '#ff8f18',
}}
>
覆盖导入
</Button>
</Popconfirm>
<Button
type="primary"
onClick={() => handleUpload(2)}
loading={uploading}
style={{
marginLeft: '10px',
display: nodeObj ? 'block' : 'none',
}}
>
开始导入
</Button>
</div>
</Form.Item>
</Form>
</div>
</Modal>
</>
);
};
export default ImportOrExport;