zy-react-library/components/SelectTree/Basic/index.js

import { TreeSelect } from "antd";
import { useEffect } from "react";
import { arrayObjectDeduplication, getDataType, getTreeNodePaths, processTreeDataByLevel, processTreeDataForOnlyLastLevel } from "../../../utils";

/**
 * 基础下拉树组件（不建议直接使用此组件，二次继承使用）
 */
function BasicSelectTree(props) {
  const {
    onGetData,
    onChange,
    onGetLabel,
    onGetNodePaths,
    onGetNodePathsIsIncludeOneself = true,
    placeholder = "",
    treeData = [],
    nameKey = "name",
    idKey = "id",
    childrenKey = "children",
    level,
    onlyLastLevel = false,
    ...restProps
  } = props;

  // 根据 level 处理树数据
  let processedTreeData = level
    ? processTreeDataByLevel({
        data: treeData,
        level,
        childrenKey,
        currentLevel: 1,
      })
    : treeData;

  // 根据 onlyLastLevel 处理树数据
  processedTreeData = processTreeDataForOnlyLastLevel({ data: processedTreeData, childrenKey, onlyLastLevel });

  const handleChange = (value, label, extra) => {
    if (value) {
      if (getDataType(value) === "Array") {
        const parentNodes = [];
        for (let i = 0; i < value.length; i++) {
          const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value[i].value : value[i];
          const currentParentNodes = getTreeNodePaths({
            data: treeData,
            targetId,
            idKey,
            childrenKey,
            isIncludeOneself: onGetNodePathsIsIncludeOneself,
          });
          parentNodes.push(...currentParentNodes);
        }
        const deduplicationParentNodes = arrayObjectDeduplication(parentNodes, idKey);
        onGetNodePaths?.(deduplicationParentNodes);
        onGetLabel?.((restProps.labelInValue || restProps.treeCheckStrictly) ? value.map(item => item.label) : label);
      }
      else {
        const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value.value : value;
        const parentNodes = getTreeNodePaths({
          data: treeData,
          targetId,
          idKey,
          childrenKey,
          isIncludeOneself: onGetNodePathsIsIncludeOneself,
        });
        onGetNodePaths?.(parentNodes);
        onGetLabel?.(parentNodes[parentNodes.length - 1][nameKey]);
      }
    }
    else {
      onGetNodePaths?.([]);
      onGetLabel?.("");
    }
    onChange?.((restProps.labelInValue || restProps.treeCheckStrictly) ? value.map(item => item.value) : value, label, extra);
  };

  useEffect(() => {
    onGetData?.(treeData, processedTreeData);
  }, [treeData, processedTreeData]);

  return (
    <TreeSelect
      showSearch
      style={{ width: "100%" }}
      styles={{
        popup: { root: { maxHeight: 400, overflow: "auto" } },
      }}
      placeholder={`请选择${placeholder}`}
      onChange={handleChange}
      allowClear
      treeData={processedTreeData}
      fieldNames={{ label: nameKey, value: idKey, children: childrenKey }}
      treeNodeFilterProp={nameKey}
      showCheckedStrategy={TreeSelect.SHOW_ALL}
      {...restProps}
    />
  );
}

BasicSelectTree.displayName = "BasicSelectTree";

export default BasicSelectTree;