兼容性提示！

请注意，文中的代码并不是通用于所有的树组件，需要根据情况进行修改。

代码已知问题：
1.复杂：毫无疑问，有些功能你可能不需要，请自行简化
2.异步：onSelect中获取到的selectedKeys似乎存在异步情况，会拿到空值，导致树无法展开！你可以自行尝试在 onSelect 中加入一些延迟，以确保在数据加载完毕后再处理逻辑。

该功能仅为丸子练习时创造，这意味着此代码并不是问题最优解，仅供大家一起学习参考，如有建议/想法欢迎提出~

AI生成说明

丸子懒，所以你所看到的以下文章为AI生成~

优化泛微EC9树形组件交互体验：使用泛微ecode实现点击标题展开/收起功能

泛微EC9作为一款流行的企业级应用系统，其用户体验的优化一直是开发者关注的焦点。本文将介绍如何使用ecodeSDK来优化泛微EC9中树形组件的交互体验，具体实现点击文字标题以展开和收起下级树的功能。

背景

在泛微EC9系统中，树形组件广泛应用于各种层级数据的显示。传统的交互方式需要用户点击旁边的小图标才能展开或收起节点，这在某些情况下可能不够直观或高效。

解决方案

使用ecodeSDK的overwritePropsFnQueueMapSet方法，我们可以重写Tree组件的属性，从而实现更加人性化的交互方式。以下是实现这一功能的核心代码：

这里是第一版代码

ecodeSDK.overwritePropsFnQueueMapSet('Tree', {
  fn: (newProps) => {
    // 检查路径，这里路径自行更改，如果没有这个路径即为全系统生效，但不建议那么做
    if (!ecodeSDK.checkLPath('/wui/engine.html#/systemExpAndImp')) return;
    console.log("路径识别正确！");

    // 设置 autoExpandParent 为 true
    newProps.defaultExpandAll = false;
    newProps.autoExpandParent = true;

    // 保存原有的 onSelect 和 onExpand 回调函数
    const originalOnSelect = newProps.onSelect;
    const originalOnExpand = newProps.onExpand;

    // 重写 onSelect 回调函数
    newProps.onSelect = (selectedKeys, e) => {
      console.log('Tree onSelect:', selectedKeys, 'e is:', e);

      // 判断当前节点是否为叶子节点
      const isLeaf = e.node.props.isLeaf;

      // 判断当前节点是否已展开
      const isExpanded = newProps.expandedKeys.includes(selectedKeys[0]);
      console.log('isLeaf:', isLeaf, 'isExpanded:', isExpanded);

      // 如果不是叶子节点，则处理展开或收起逻辑
      if (!isLeaf) {
        let newExpandedKeys = [...newProps.expandedKeys];

        if (isExpanded) {
          // 如果节点已展开，则收起节点
          newExpandedKeys = newExpandedKeys.filter(key => key !== selectedKeys[0]);
        } else {
          // 如果节点未展开，则展开节点
          newExpandedKeys.push(selectedKeys[0]);
        }

        // 更新 expandedKeys
        newProps.expandedKeys = newExpandedKeys;

        // 手动调用原有的 onExpand 函数（如果有）
        if (typeof originalOnExpand === 'function') {
          originalOnExpand(newExpandedKeys, { node: e.node, expanded: !isExpanded });
        }
      }

      // 调用原有的 onSelect 函数（如果有）
      if (typeof originalOnSelect === 'function') {
        originalOnSelect(selectedKeys, e);
      }
    };

    return newProps;
  },
});

第二版代码（更新于2023年11月21日）

ecodeSDK.overwritePropsFnQueueMapSet('Tree', {
  fn: (newProps) => {
    // 路径检查，如果删除路经检查，则为全部组件均实现此功能
    if (!ecodeSDK.checkLPath('/wui/engine.html#/docengine/sec/doccategory')) return;
    console.log("路径识别正确！");

    // 设置 autoExpandParent 为 true
    // newProps.defaultExpandAll = false;//默认展开全部
    newProps.autoExpandParent = true;

    // 保存原有的 onSelect 和 onExpand 和 loadData回调函数
    const originalOnSelect = newProps.onSelect;
    const originalOnExpand = newProps.onExpand;
    const originalLoadData = newProps.loadData;

    // 重写 onSelect 回调函数
    newProps.onSelect = async (selectedKeys, e) => {
      console.log('Tree onSelect:', selectedKeys, 'e is:', e);

      // 判断当前节点是否为叶子节点
      const isLeaf = e.node.props.isLeaf;

      // 判断当前节点是否已展开
      const isExpanded = newProps.expandedKeys.includes(selectedKeys[0]);
      console.log('isLeaf:', isLeaf, 'isExpanded:', isExpanded);

      // 如果不是叶子节点，则处理展开或收起逻辑
      if (!isLeaf) {
        let newExpandedKeys = [...newProps.expandedKeys];

        if (isExpanded) {
          newExpandedKeys = newExpandedKeys.filter(key => key !== selectedKeys[0]);
        } else {
          // 如果节点未展开，则在展开前调用原来的 loadData
          await originalLoadData(e.node);
          newExpandedKeys.push(selectedKeys[0]);
        }

        // 更新 expandedKeys
        newProps.expandedKeys = newExpandedKeys;
        
        // 手动调用原有的 onExpand 函数（如果有）
        if (typeof originalOnExpand === 'function') {
          originalOnExpand(newExpandedKeys, { node: e.node, expanded: !isExpanded });
        }
      }

      // 调用原有的 onSelect 函数（如果有）
      if (typeof originalOnSelect === 'function') {
        originalOnSelect(selectedKeys, e);
      }
    };

    return newProps;
  },
});

第二版代码在第一版的基础上添加了一些新的功能，特别是在处理非叶子节点时加载数据的功能。这可以提高性能并允许在需要时动态加载数据

核心逻辑

路径检查：首先确保当前路径符合预期，这是为了只在特定页面上应用这些改动。
自动展开父节点：通过设置autoExpandParent为true，确保父节点在子节点被选中时自动展开。
保存原回调函数：保存原本的onSelect和onExpand回调函数，以便在新逻辑后还能保持原有功能。
重写onSelect回调函数：在这个函数中，我们根据节点的类型和当前状态来决定是展开还是收起节点，并手动调用原有的onExpand函数来更新视图。

优势

通过这种方式，我们不仅提高了用户交互的便捷性，还保留了原有的功能和扩展性。用户现在可以直接点击节点标题来展开或收起子节点，从而提供更流畅的体验。

结论

这个方法展示了如何通过ecodeSDK来优化泛微EC9中的树形组件。通过简单的代码改动，我们能显著提升用户的交互体验，这对于企业级应用系统来说尤为重要。

[泛微ecode]实现树形组件点击标题展开/收起功能 by https://oneszhang.com/archives/fw-ecode-treeok.html