AddTopology.tsx

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

import {fetchAddSystemTree} from '@/services/device'

type AddTopologyProps = {
  visible: boolean;
  handleClose: () => void;
  type?: 'add' | 'edit';
  editInfo: API.Store;
  systemId: number;
  parentId?: string | number;
  onRefresh?: () => void;
  level?: 'eq' | 'child';
  selectId?: number | string
}

const formTailLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 15 },
};

const AddTopology: React.FC<AddTopologyProps> = (props) => {
  const { visible, handleClose, type, systemId, parentId, editInfo, onRefresh, level, selectId} = props;

  const seleId = typeof selectId === 'string' ? 0 : selectId
  /**
   * @表单提交
   */

  const systemNodePatch = useRequest(fetchAddSystemTree, {
    manual: true,
    onSuccess: () => {
      handleClose();
      onRefresh && onRefresh()
    }
  })

  const [form] = Form.useForm();
  const handleSubmit = (e: any) => {
    e.preventDefault();
    form.validateFields().then(values => {
      const payload = {...values, systemId, parentId: level === 'eq' ? parentId : seleId};
      if(type === 'edit') payload.id = selectId
      console.log(payload)
      systemNodePatch.run(payload)
    }).catch((err) => {
      console.log(err)
    });
  };
  /* 关闭Modal */
  const closeModal = () => {
    handleClose();
    form.resetFields()
  }

  /**
   * @页面数据
   */

  const allFormData = [
    {label: '节点名称', name: 'name', type: 'input', require: true},
  ];


  useEffect(() => {
    if (visible && type === 'edit') {
      form.setFieldsValue({
        name: editInfo?.name
      })
    }else {
      form.resetFields()
    }
  }, [visible])

  return (
    <div>
      <Modal
        width={450}
        title={type === 'add' ? '添加节点' : '编辑节点'}
        visible={ visible }
        onCancel={ closeModal }
        centered
        footer={null}
        getContainer={false}
        // forceRender
      >
        <Form form={form} {...formTailLayout} onFinish={ handleSubmit }>
          {allFormData?.length > 0 && allFormData.map(item => createSubmitForm(item, 'topology'))}
          <div style={{ marginTop: 32, textAlign: 'right' }}>
            <Button style={{marginRight: 8 }} onClick={closeModal}>
              取消
            </Button>
            <Button type="primary" loading={systemNodePatch.loading} onClick={handleSubmit}>
              保存
            </Button>
          </div>
        </Form>
      </Modal>
    </div>
  );
};

export default AddTopology