逻辑升级，深度解析如何实现业务中的且或组件

export interface IFilterValue {  key: string;  level?: number; // 当前节点的层级，用于判断一些按钮的展示type?: number; // 当前节点的条件关系，1 | 2  rowValues?: T; // Form 节点的相关的信息(子节点无条件节点时才有)  children?: IFilterValue[]; // 子节点的信息(子节点存在条件节点时才有)}

 {    "key": "qTipLrlUt",    "level": 1,    "children": [        {            "key": "B6Jrbqcfof",            "type": 2,            "level": 2,            "children": [                {                    "rowValues": {                        "condition": 1,                        "rowPermission": ""                    },                    "key": "deg8x8UgZ",                    "level": 2                },                {                    "key": "_sczw_1h8H",                    "type": 1,                    "level": 3,                    "children": [                        {                            "key": "Z5UkUPJoA",                            "rowValues": {                                "condition": 1,                                "rowPermission": ""                            },                            "level": 3                        },                        {                            "key": "MbpJILqHGx",                            "rowValues": {                                "condition": 1,                                "rowPermission": ""                            },                            "level": 3                        }                    ]                }            ]        },        {            "rowValues": {                "condition": 1,                "rowPermission": ""            },            "key": "qx6bG0o5H",            "level": 1        }    ],    "type": 1}

interface IProps {  value?: IFilterValue;  disabled?: boolean;  maxLevel?: number;  initValues: T;  notEmpty?: { data: boolean; message?: string };  component: (props: IComponentProps) => React.ReactNode;  onChange?: (value: IFilterValue | undefined) => void;}

export const FilterRules = (props: IProps) => {  const {    component,    maxLevel = 5,    disabled = false,    notEmpty = { data: true, message: '必须有一条数据' },    value,    initValues,    onChange,  } = props;  // 查找当前操作的节点  const finRelationNode = (    parentData: IFilterValue,    targetKey: string,    needCurrent?: boolean,  ): IFilterValue | null | undefined => {};  const handleAddCondition = (keyObj: { key: string; isOut?: boolean }) => {};  // 增加新的数据，判断是在当前节点下新增或者新生成一个条件节点  const addCondition = (    treeNode: any,    keyObj: { key: string; isOut?: boolean },    initRowValue: T,  ) => {};  const handleDeleteCondition = (key: string) => {};  // 删除节点，删除当前节点下的一条数据或者是删除一个条件节点  const deleteCondition = (parentData: IFilterValue, key: string) => {};  // 删除一个条件节点时，更新当前数据的层级  const updateLevel = (node: IFilterValue) => {};  // 更改条件节点的条件  const handleChangeCondition = (    key: string,type: ROW_PERMISSION_RELATION,  ) => {};  // 改变节点的的数据  const handleChangeRowValues = (key: string, values: T) => {};  return (      maxLevel={maxLevel}      disabled={disabled}      value={value}      component={component}      onAddCondition={handleAddCondition}      onDeleteCondition={handleDeleteCondition}      onChangeCondition={handleChangeCondition}      onChangeRowValues={handleChangeRowValues}    />  );};

  'condition'}>      component={(props) => (      )}      maxLevel={MAX_LEVEL}      initValues={INIT_ROW_VALUES}    />;
// RowColumnConfig 实现，name 可能是 children[0].formValues<>  name={['condition', ...name, 'column']}  rules={[{ message: '请选择字段', required: true }]}  initialValue={column}>
        {item}      
;
// 最后通过 form.validateFields() 拿到的和上述的数据结构一致

// 修改 IFilterValue 的类型// 💭注意，如果当前节点是条件节点，children 内节点的状态和当前节点的 disabled 息息相关exportinterface IFilterValue {    key: string;    level?: number;                   // 当前节点的层级，用于判断一些按钮的展示type?: number;                    // 当前节点的条件关系，1 | 2  + disabled?: boolean;               // 当前节点的状态      rowValues?: T;                    // Form 节点的相关的信息(子节点无条件节点时才有)    children?: IFilterValue[];     // 子节点的信息(子节点存在条件节点时才有)}

const INIT_CHECK_DATA = {    key: shortid(),    level: 0,    type: 1,    children: [        {            rowValues: {                input: '',            },            disabled: true,            key: shortid(),            level: 1,        },        {            key: shortid(),            type: 1,            level: 2,            disabled: true,            children: [                {                    rowValues: {                        input: '',                    },                    key: shortid(),                    level: 2,                },                {                    key: shortid(),                    rowValues: {                        input: '',                    },                    level: 2,                },            ],        },        {            rowValues: {                input: '',            },            key: shortid(),            level: 1,        },        {            rowValues: {                input: '',            },            key: shortid(),            level: 1,        },    ],};

const calculateTreeItemHeight = (item, isEdit) => {  if (!item?.children)    return weakMap.set(item, {      height: ITEM_HEIGHT + MARGIN,      lineHeight: ITEM_HEIGHT,    });  item.children.map((child) => calculateTreeItemHeight(child, disabled));  const height = item.children.reduce(    (prev, curr) => prev + weakMap.get(curr).height,    ITEM_HEIGHT,  );  weakMap.set(item, { height });};

const calculateTreeItemHeight = (item: IFilterValue, disabled: boolean) => {  if (!item?.children)    return weakMap.set(item, {      height: ITEM_HEIGHT + MARGIN,      lineHeight: ITEM_HEIGHT,    });  item.children.map((child) => calculateTreeItemHeight(child, disabled));  const isLastCondition = !item.children.some(isCondition);  const firstNodeIsCondition = isCondition(item.children[0]);  const height = item.children.reduce(    (prev, curr) => prev + weakMap.get(curr).height,    ITEM_HEIGHT,  );  let lineHeight;  // 如果当前节点是最后的判断节点  if (isLastCondition) {    const firstNodeLineHeight = weakMap.get(item.children[0]).height - MARGIN;    const lastNodeHeight = ITEM_HEIGHT;    lineHeight = height - firstNodeLineHeight / 2 - lastNodeHeight / 2;  } else {    const firstNodeLineHeight = firstNodeIsCondition      ? weakMap.get(item.children[0]).lineHeight / 2 + ITEM_HEIGHT / 2      : ITEM_HEIGHT / 2 + MARGIN;    lineHeight =      firstNodeLineHeight +      item.children        ?.slice(1)        .reduce(          (prev, curr) => prev + weakMap.get(curr).height,          ITEM_HEIGHT / 2,        );  }  weakMap.set(item, { height, lineHeight });};

具体的高度图如下图所示：

对于上述这种情况，我们需要递归计算当前条件节点的第一个节点应该减去的高度和最后节点应该减去的高度（蓝色部分）。

const firstNodeLineHeight = firstNode.height - getNodeReduceHeight(item, true);const lastNodeLineHeight =  lastNode.height - MARGIN - getNodeReduceHeight(item, false);
// 如果是普通节点，返回值为 ITEM_HEIGHT / 2// 如果是条件节点，返回值 currentNode.lineHeight /2 + getNodeReduceHeight(currentNode, isFirst)。需要递归遍历对应的节点算出总共要减去的高度
const getNodeReduceHeight = (item: IFilterValue, isFirst) => {  const currentNode = isFirst    ? item?.children?.[0]    : item?.children?.[item?.children?.length - 1];  if (!currentNode) return ITEM_HEIGHT / 2;  const currentNodeIsCondition = isCondition(currentNode);  if (currentNodeIsCondition) {    return (      currentNode.lineHeight / 2 + getNodeReduceHeight(currentNode, isFirst)    );  }  return ITEM_HEIGHT / 2;};

会新增一个嵌套关系

// 根据点击的按钮，来获取相关的 Node，对于红色/黄色按钮来说获取当前层级 Nodeconst finRelationNode = (  parentData: IFilterValue,  targetKey: string,  needCurrent?: boolean,) => {  const parentDataTemp = parentData;  if (parentDataTemp.key === targetKey) return parentDataTemp;  if (!parentDataTemp.children?.length) return null;  for (let i = 0; i < parentDataTemp.children.length; i++) {    const current = parentDataTemp.children[i];    if (current.key === targetKey)      return needCurrent ? current : parentDataTemp;    const node: IFilterValue| null | undefined = finRelationNode(      current,      targetKey,      needCurrent,    );    if (node) return node;  }};
const handleAddCondition = (keyObj: { key: string; isOut?: boolean }) => {  const cloneData = clone(value);  const appendNode = finRelationNode(    cloneData as IFilterValue,    keyObj.key,    keyObj.isOut,  );  addCondition(appendNode, keyObj, initValues as T);  onChange?.(cloneData);};
const addCondition = (  treeNode: any,  keyObj: { key: string; isOut?: boolean },  initRowValue: T,) => {  const key = keyObj.key;  if (keyObj.isOut)    return treeNode.children.push(      Object.assign(        {},        { rowValues: initRowValue },        { key: shortId(), level: treeNode.level },      ),    );  const children = treeNode?.children;  if (!children) {    const newNode = {      key: treeNode.key,      level: treeNode.level + 1,      type: ROW_PERMISSION_RELATION.AND,      children: [        {          rowValues: treeNode.rowValues,          key: shortId(),          level: treeNode?.level + 1,        },        { rowValues: initRowValue, key: shortId(), level: treeNode?.level + 1 },      ],    };    delete treeNode.rowValues;    Object.assign(treeNode, newNode);    return;  }  for (let i = 0; i < children.length; i += 1) {    if (children[i].key !== key) continue;    if (treeNode?.level <= maxLevel) {      children[i] = {        key: children[i].key,        type: ROW_PERMISSION_RELATION.AND,        level: treeNode?.level + 1,        children: [          Object.assign({}, children[i], {            key: shortId(),            level: treeNode?.level + 1,          }),          Object.assign({            key: shortId(),            rowValues: initRowValue,            level: treeNode?.level + 1,          }),        ],      };    }  }};