ImportModal.jsx 2.63 KB
/*
 * @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;