AttrMap.jsx

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


const AttrMap = (props) => {
  const { visible, loading, mapId, dispatch,
    handleClose, onSubmit
  } = props
  const [form] = Form.useForm();

  const handleSubmit =  e => {
    e.preventDefault();
    form.validateFields().then(values => {
      onSubmit(values)
    }).catch((err) => {
      console.log(err)
    });
  };
  const closeModal = () => {
    handleClose()
  }

  const allFormData = [
    {label: '原值', name: 'value', type: 'input', require: true},
    {label: '映射值', name: 'mappingValue', type: 'input', require: true},
  ];
  const formTailLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 15 },
  };

  useEffect(() => {
    if (visible && mapId) {
      dispatchHandle(dispatch,
        'opsGather/device_service_meter_attr_value_mapping_id_get',
        {id: mapId},
        (data) => {
          form.setFieldsValue(data)
        },
      );
    }
  }, [visible, mapId])
  return (
    <Modal
      width={450}
      title='添加属性'
      visible={ visible }
      onCancel={ closeModal }
      centered
      footer={null}
      forceRender
      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={{marginRight: 20 }} onClick={closeModal}>
            取消
          </Button>
          <Button type="primary" loading={loading} onClick={handleSubmit}>
            保存
          </Button>
        </div>
      </Form>

    </Modal>
  );
};

export default connect(({ opsGather, loading }) => ({
  opsGather,
  loading: loading.models.opsGather,
}))(AttrMap);