CopyModal.jsx

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

const AddConfig = (props) => {
  const {visible, handleClose, loading, update, modelId } = props;

  /* 关闭Modal */
  const closeModal = () => {
    form.resetFields()
    handleClose()
  }

  const copyModal = useRequest(fetchCopyModal, {
    manual: true,
    onSuccess: () => {
      update()
      closeModal()
    }
  })
  /**
   * @表单提交
   */
  const [form] = Form.useForm();
  const handleSubmit =  e => {
    e.preventDefault();
    form.validateFields().then(values => {
      copyModal.run({...values, id: modelId})
    }).catch((err) => {
      console.log(err)
    });
  };


  /**
   * @页面数据
   */
  const allFormData = [
    {label: '模型名称', name: 'name', type: 'input', require: true},
  ];
  const formTailLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 15 },
  };

  return (
    <Modal
      width={450}
      title='复制模型'
      visible={ visible }
      onCancel={ closeModal }
      centered
      footer={null}
      getContainer={false}
      loading={loading}
    >
      <Form form={form} {...formTailLayout} onFinish={ handleSubmit }>
        {allFormData?.length > 0 && allFormData.map(item => createSubmitForm(item))}
        <div style={{ marginTop: 32, textAlign: 'right' }}>
          <Button
            style={{ width: 70, height: 30, marginRight: 20 }}
            onClick={closeModal}
          >
            取消
          </Button>
          <Button
            style={{ width: 70, height: 30 }}
            type="primary"
            loading={copyModal.loading}
            onClick={handleSubmit}
          >
            保存
          </Button>
        </div>
      </Form>

    </Modal>
  );
};

export default AddConfig