Form.List实现多层嵌套动态添加表格antd+hooks+ts

功能如下

1.默认无数据，点击绿色新增按钮，会动态添加条件组
2.新增的动态条件组中都有新增子组件的按钮，可以在组中，在动态添加子组件
数据结构如下：

 "inGroups": [
        {
            "conGroup": [
                {
                    "xxx": null,
                    "yyy": 1,
                    "zzz": 1,
                },
                {
                    "xxx": 1,
                    "yyy": 2,
                    "zzz": null,
                }
            ]
        },
        {
            "conGroup": [
                {
                    "xxx": null,
                    "yyy": 1,
                    "zzz": 1,
                },
                {
                    "xxx": 1,
                    "yyy": 2,
                    "zzz": null,
                }
            ]
        }
    ]

代码

import React, { useEffect, useState } from 'react';
import { Modal, Form, Select, Space, Input, DatePicker } from 'antd';
import moment from 'moment';

import styles from './index.less';

const INTENTION_VAR = {};
const { RangePicker } = DatePicker;

interface IModalProps {
  store: any;
}

const typeName = {
  1: 'aaa',
  2: 'bbb',
  3: 'ccc'
}

const FormModal: React.FC<IModalProps> = ({
  store,
}) => {
  const [form] = Form.useForm();

  useEffect(() => {
   //准备数据
  }, []);

  useEffect(() => {
    if (!store.modalVisible) {
        // 关闭重置
      form.resetFields();
    } else {
      if (store.current) {
        form.setFieldsValue({
          ...store.current,
        });
      }
    }
  }, [store.modalVisible]);

  const handleSelectChange = (value: any, name: any) => {
    //   获取当前选择数据
    const currentInfo = store.dataInfo?.find(v => v.id === value.value) || {};
    const inGroups = form.getFieldValue('inGroups');
    inGroups[name[0]].conGroup[name[1]] = {
      chooseId: value.value,
      // 可以加入选择值以外的其他属性
      xxx: currentInfo?.xxx,
      yyy: currentInfo?.yyy,
    };
    form.setFieldsValue({
      inGroups,
    });
  };


//   动态更新form表单，可以根据type类型显示不同控件
  const handleTypeChange = (value: any, name: any) => {
    const inGroups = form.getFieldValue('inGroups');
    inGroups[name[0]].conGroup[name[1]] = {
      ...inGroups[name[0]].conGroup[name[1]], // 合并之前的值，在更新
      type: value.value,
    };
    form.setFieldsValue({
      inGroups,
    });
  };

//   动态判断显示时间控件
  const handleTimeChange = (value: any, name: any) => {
    const inGroups = form.getFieldValue('inGroups');
    inGroups[name[0]].conGroup[name[1]] = {
      ...inGroups[name[0]].conGroup[name[1]],
      startDateTimeValue: value,
    };
    form.setFieldsValue({
      inGroups,
    });
  };

//   动态判断显示时间区间控件
  const handleTimeRangeChange = (value: any, name: any) => {
    const inGroups = form.getFieldValue('inGroups');
    inGroups[name[0]].conGroup[name[1]] = {
      ...inGroups[name[0]].conGroup[name[1]],
      startDateTimeValue: value?.[0],
      endDateTimeValue: value?.[1],
    };
    form.setFieldsValue({
      inGroups,
    });
  };

//   提交
  const handleFormSumbit = (values: any) => {
    const params = {
      ...values,
    }
    if (store.current) {
      params.id = store.current?.id;
    }
    // 提交接口
  };

  const handleShowType = (conditionType: any, anyType: any) => {
    let typeInfo = 1;
 //判断类型
    return typeInfo
  };

  const handleCancel = () => {
    //关闭弹窗，清除数据
  };



  return (
    <Modal
      width={1000}
      visible={modalVisible}
      title="新建多层嵌套组Form"
      onOk={form.submit}
      onCancel={handleCancel}
      confirmLoading={store.loading}
    >
      <Form form={form} onFinish={handleFormSumbit}>
        <Form.Item label="多层嵌套组Form">
          <Form.List name="inGroups">
            {(fields, { add, remove }) => (
              <div className={styles.form__item__rules}>
                {fields.length > 0 && <div className={styles.form__or}>或</div>}
                {fields.map((field, index) => (
                  <div className={styles.form__item__children} key={field.key}>
                    <Form.Item noStyle shouldUpdate>
                      {() => (
                        <>
                          <Form.Item
                            {...field}
                            noStyle
                            name={[field.name, 'name']}
                            fieldKey={[field.fieldKey, 'name']}
                          >
                            <Form.List name={[field.name, 'conGroup']}>
                              {(fieldsInside, { add: addInside, remove: removeInside }) => (
                                <div className={styles.form__children__rules__container}>
                                  {fieldsInside.length > 0 && (
                                    <div className={styles.form__or}>且</div>
                                  )}

                                  {fieldsInside.map(fieldInside => (
                                    <div
                                      className={styles.form__children__rules}
                                      key={fieldInside.key}
                                    >
                                      <Form.Item noStyle shouldUpdate>
                                        {() => (
                                          <Space>
                                            <Form.Item
                                              {...fieldInside}
                                              name={[fieldInside.name, 'chooseId']}
                                              fieldKey={[fieldInside.fieldKey, 'chooseId']}
                                              rules={[{ required: true, message: '请选择' }]}
                                            >
                                              <Select
                                                placeholder="请选择"
                                                showSearch
                                                optionFilterProp="label"
                                                onChange={(_e, item) =>
                                                  handleSelectChange(item, [
                                                    field.name,
                                                    fieldInside.name,
                                                  ])
                                                }
                                                style={{ width: '200px' }}
                                              >
                                                {store.dataInfo?.map((item: any) => (
                                                  <Select.Option
                                                    type={item.type}
                                                    label={item.name}
                                                    value={item.id}
                                                    key={item.id}
                                                  >
                                                    {item.name}
                                                  </Select.Option>
                                                ))}
                                              </Select>
                                            </Form.Item>
                                            <Form.Item
                                              {...fieldInside}
                                              name={[fieldInside.name, 'type']}
                                              fieldKey={[fieldInside.fieldKey, 'type']}
                                              rules={[
                                                { required: true, message: '请选择' },
                                              ]}
                                            >
                                              <Select
                                                showSearch
                                                optionFilterProp="label"
                                                placeholder="请选择"
                                                style={{ width: '100px' }}
                                                onChange={(_e, item) =>
                                                  handleTypeChange(item, [
                                                    field.name,
                                                    fieldInside.name,
                                                  ])
                                                }
                                              >
                                                {
                                                  (
                                                    INTENTION_VAR[
                                                    handleShowType(
                                                      store.mapData[form.getFieldValue('inGroups')[field.name]
                                                        ?.conGroup[fieldInside.name]?.chooseId]?.type,
                                                      store.mapData[form.getFieldValue('inGroups')[field.name]
                                                        ?.conGroup[fieldInside.name]?.chooseId]?.anyType
                                                    )
                                                    ] || []
                                                  ).map((item: { key: string; value: string }) => (
                                                    <Select.Option
                                                      key={item.key}
                                                      label={item.value}
                                                      value={item.key}
                                                    >
                                                      {item.value}
                                                    </Select.Option>
                                                  ))}
                                              </Select>
                                            </Form.Item>
                                            {/* 时间区间 */}
                                            {
                                             (form.getFieldValue('inGroups')[field.name]
                                             ?.conGroup[fieldInside.name]?.type === '条件类型') 
                                              && (
                                                <Form.Item
                                                  {...fieldInside}
                                                  name={[fieldInside.name, 'startDateTime']}
                                                  fieldKey={[fieldInside.fieldKey, 'startDateTime']}
                                                  rules={[
                                                    { required: true, message: '请选择时间' },
                                                  ]}
                                                initialValue={[moment(form.getFieldValue('inGroups')[field.name]
                                                ?.conGroup[fieldInside.name]?.startDateTimeValue, 'YYYY-MM-DD'), moment(form.getFieldValue('inGroups')[field.name]
                                                ?.conGroup[fieldInside.name]?.endDateTimeValue, 'YYYY-MM-DD')]}
                                                >
                                                  <RangePicker
                                                    format={'YYYY-MM-DD'}
                                                    onChange={(_e, item) =>
                                                      handleTimeRangeChange(item, [
                                                        field.name,
                                                        fieldInside.name,
                                                      ])
                                                    }
                                                  />
                                                </Form.Item>
                                              )}
                                            {/* 时间大于小于 */}
                                            {
                                              (
                                                (form.getFieldValue('inGroups')[field.name]
                                                  ?.conGroup[fieldInside.name]?.type === '条件类型') 
                                              )
                                              && (
                                                <Form.Item
                                                  {...fieldInside}
                                                  name={[fieldInside.name, 'startDateTime']}
                                                  fieldKey={[fieldInside.fieldKey, 'startDateTime']}
                                                  rules={[
                                                    { required: true, message: '请选择时间' },
                                                  ]}
                                                initialValue={moment(form.getFieldValue('inGroups')[field.name]
                                                ?.conGroup[fieldInside.name]?.startDateTimeValue || '', 'YYYY-MM-DD')}
                                                >
                                                  <DatePicker
                                                    format={'YYYY-MM-DD'}
                                                    onChange={(_e, item) =>
                                                      handleTimeChange(item, [
                                                        field.name,
                                                        fieldInside.name,
                                                      ])
                                                    }
                                                  />
                                                </Form.Item>
                                              )}
                                            {
                                             (form.getFieldValue('inGroups')[field.name]
                                             ?.conGroup[fieldInside.name]?.type === '条件类型') 
                                              && (
                                                <Form.Item
                                                  {...fieldInside}
                                                  name={[fieldInside.name, 'selectedValue']}
                                                  fieldKey={[fieldInside.fieldKey, 'selectedValue']}
                                                  rules={[
                                                    { required: true, message: '请选择' },
                                                  ]}
                                                >
                                                  <Select
                                                    showSearch
                                                    optionFilterProp="label"
                                                    placeholder="请选择"
                                                  >
                                                    {store.mapData[
                                                      form.getFieldValue('inGroups')[field.name]
                                                        ?.conGroup[fieldInside.name]?.chooseId
                                                    ]?.tagValueDTOS?.map(item => (
                                                      <Select.Option
                                                        label={item.tagValue}
                                                        value={item.id}
                                                        key={item.id}
                                                      >
                                                        {item.tagValue}
                                                      </Select.Option>
                                                    ))}
                                                  </Select>
                                                </Form.Item>
                                              )}
                                              {/* 动态判断 */}
                                            {(
                                             (form.getFieldValue('inGroups')[field.name]
                                             ?.conGroup[fieldInside.name]?.type === '条件类型') 
                                            ) && (
                                                <Form.Item
                                                  {...fieldInside}
                                                  name={[fieldInside.name, 'textValue']}
                                                  fieldKey={[fieldInside.fieldKey, 'textValue']}
                                                  rules={[
                                                    { required: true, message: '请输入' },
                                                  ]}
                                                >
                                                  <Input placeholder="请输入" />
                                                </Form.Item>
                                              )}
                                          </Space>
                                        )}
                                      </Form.Item>
                                      <div className={styles.form__var__close}>
                                        <img
                                          onClick={() => removeInside(fieldInside.name)}
                                          src={icon_del}
                                          alt=""
                                        />
                                      </div>
                                    </div>
                                  ))}
                                  {(!form.getFieldValue('inGroups')[field.name]?.conGroup
                                    ?.length ||
                                    form.getFieldValue('inGroups')[field.name]?.conGroup
                                      ?.length < 10) && (
                                      <div className={styles.form__item__tool}>
                                        <a
                                          className={styles.form__item__add}
                                          onClick={() => addInside()}
                                        >
                                          <img src={ICON.icon_add_blue} />
                                          新增子条件
                                        </a>
                                        <a
                                          className={styles.variable__del}
                                          onClick={() => remove(index)}
                                        >
                                          删除
                                        </a>
                                      </div>
                                    )}
                                </div>
                              )}
                            </Form.List>
                          </Form.Item>
                        </>
                      )}
                    </Form.Item>
                  </div>
                ))}
                {
                 <div className={styles.form__btn} onClick={() => add()}>
                    <img src={ICON.icon_add_green} />
                    新增条件
                  </div>
                }
              </div>
            )}
          </Form.List>
        </Form.Item>
       
      </Form>
    </Modal>
  );
};

export default FormModal;