ImportOrExport.jsx 4.51 KB
Newer Older
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
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(() => {
    console.log(subSystemValue);
    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;