SystemModal.tsx

import React, { FC } from 'react';
import { Modal, Form, Input, Button, message as $message } from 'antd';
import { createSystem } from "../../api/system.api";

const { Item } = Form

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

const SystemModal: FC<systemProp> = ({ modalVisible, onCreate, onCancel }) => {
  const [form] = Form.useForm()

  const createCallBack = async (formInfo: any) => {
    try {
      const createResult = await createSystem(formInfo) as any
      const { code, message } = createResult
      if (code === 200) {
        $message.success('创建成功!')
        onCreate(true)
        form.resetFields()
      } else {
        $message.error('创建失败!' + message)
      }
    } catch (error) {
      $message.error(error)
      console.log(error)
    }
  }

  const onFinish = async () => {
    try {
      const validateRes = await form.validateFields()
      if (validateRes.errorFields) return
      createCallBack(validateRes)
    } 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: '请输入系统名称' }]}
        >
          <Input />
        </Item>
        <Item
          label="系统描述"
          name="description"
          rules={[{ required: true, message: '请输入系统描述' }]}
        >
          <Input />
        </Item>
      </Form>
    </Modal>
  )
}

export default SystemModal;