SystemModal.tsx

import React, { FC } from 'react';
import { Modal, Form, Input, Button } from 'antd';

const { Item } = Form

interface systemProp {
  modalVisible: boolean
  onCreate: (values: any) => void
  onCancel: () => void
}

const SystemModal: FC<systemProp> = ({ modalVisible, onCreate, onCancel }) => {
  const [form] = Form.useForm()
  const onFinish = async () => {
    try {
      const validateRes = await form.validateFields()
      console.log('onFinish::', validateRes)
      if (validateRes.errorFields) return
      onCreate(validateRes)
      form.resetFields()
    } catch (error) {
      console.log(error)
    }
  }

  const onClose = () => {
    form.resetFields()
    onCancel()
  }

  return (
    <Modal
      title="创建系统"
      visible={modalVisible}
      destroyOnClose={true}
      onOk={onFinish}
      onCancel={onClose}
      footer={[
        <Button type="primary" key="submit" onClick={ onFinish }>
          确定
        </Button>,
      ]}
    >
      <Form
        name="systemForm"
        form={form}
        initialValues={{
          name: '',
          description: ''
        }}
      >
        <Item
          label="系统名称"
          name="name"
          rules={[{ required: true, message: 'Please input system name' }]}
        >
          <Input />
        </Item>
        <Item
          label="系统描述"
          name="description"
          rules={[{ required: true, message: 'Please input description' }]}
        >
          <Input />
        </Item>
      </Form>
    </Modal>
  )
}

export default SystemModal;