支持form提交的modal

import React, {useEffect, forwardRef, useImperativeHandle} from "react";
import {Modal, Form} from 'antd';
import {ModalProps} from 'antd/lib/modal';

interface TmpModalProps extends Omit<ModalProps, 'onOk' | 'form'> {
  width?: number | string;
  title?: React.ReactNode;
  open: boolean;
  onCancel: () => void;
  onOk: (values: any) => void;
  initialValues?: {
    [key: string]: any;
  };
  content: React.ReactNode;
  formConfig?: object;
}

const TmpModal: React.FC<TmpModalProps> = forwardRef(({
width,
title,
open,
onCancel,
onOk,
initialValues,
content,
formConfig,
...modalProps
},ref) => {

  const [form] = Form.useForm();

  const handleOk = () => {
    form
      .validateFields()
      .then((values) => {
        onOk(values);
        onCancel();
      })
      .catch((info) => {
        console.log('Validate Failed:', info);
      });
  };

useEffect(() => {
    if (initialValues) {
      form.setFieldsValue(initialValues);
    }
  }, [initialValues, form]);

  useImperativeHandle(ref,()=>({
      ...form
  }))

  return (
    <Modal
      width={width || 400}
      title={title || "Form Modal"}
      open={open}
      onCancel={onCancel}
      onOk={handleOk}
      okText="确定"
      cancelText="取消"
      destroyOnClose
      afterClose={() => {
        form.resetFields();
      }}
      {...modalProps}
    >
      <Form form={form} layout="vertical" {...formConfig}>
        {content}
      </Form>
    </Modal>
  );
});

export default TmpModal;