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'; 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> <Popconfirm title={ <span> 导入操作会覆盖所有菜单配置并且使 <br /> 角色菜单权限失效是否继续导入? </span> } onConfirm={() => handleUpload(1)} onVisibleChange={() => console.log('visible change')} > <Button type="primary" style={{ marginLeft: '10px', display: nodeObj ? 'none' : 'block', }} > 覆盖导入 </Button> </Popconfirm> <Button type="primary" onClick={() => handleUpload(2)} loading={uploading} style={{ marginLeft: '10px', display: nodeObj ? 'none' : 'block', }} > 增量导入 </Button> <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;