AddSystem.jsx

import React, {useEffect} from 'react';
import { connect } from 'umi';
import { dispatchHandle } from '@/utils/publicHandle';
import {Form, Modal, Button, Input} from 'antd'
import {createSubmitForm} from "@/utils/createForm";

const AddSystem = (props) => {
  const {visible, handleClose, loading, type, onSubmit} = props;

  /**
   * @表单提交
   */
  const [form] = Form.useForm();
  const handleSubmit =  e => {
    e.preventDefault();
    form.validateFields().then(values => {
      onSubmit(values)
    }).catch((err) => {
      console.log(err)
    });
  };
  /* 关闭Modal */
  const closeModal = () => {
    handleClose()
  }

  /**
   * @页面数据
   */
  const formTailLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };

  useEffect(() => {
    if (visible === true) {
      if (type === 'add') {
        form.resetFields()
      }else {
        form.setFieldsValue({
          name: props.editName
        })
      }
    }
    console.log('visible', visible)
  }, [visible])


  return (
    <Modal
      width={450}
      title="创建新系统"
      visible={ visible }
      onCancel={ closeModal }
      centered
      footer={null}
      getContainer={false}
      loading={loading}
    >
      <Form form={form} {...formTailLayout} onFinish={ handleSubmit }>
        <Form.Item name="name" label="系统名称">
          <Input style={{width: '100%'}}/>
        </Form.Item>
        <div style={{ marginTop: 32, textAlign: 'right' }}>
          <Button
            style={{marginRight: 8 }}
            onClick={closeModal}
          >
            取消
          </Button>
          <Button
            type="primary"
            loading={loading}
            onClick={handleSubmit}
          >
            保存
          </Button>
        </div>
      </Form>

    </Modal>
  );
};

export default connect(({ opsDevice, loading }) => ({
  opsDevice,
  loading: loading.effects['opsDevice/device_service_system_patch'],
}))(AddSystem);