前端自定义左树右表中的树

在 oinone 平台中，提供了默认的左树右表的视图，用户可以通过界面设计器配置，默认的树视图不一定满足所有需求，尤其当需要自定义功能或复杂的交互时，我们可以通过自定义视图来实现更灵活的展现。

本文将带你一步步了解如何自定义左树右表视图中的树组件。

自定义树视图

1. 使用界面设计器配置视图

首先，我们需要通过界面设计器生成基础的左树右表视图。界面设计器允许用户根据不同需求进行拖拽配置，快速创建可视化界面。

配置完视图之后，我们可以重写左侧的树组件。Oinone 的默认树组件是 TableSearchTreeWidget，通过自定义的方式，我们可以实现更高级的功能。

2. 重写 TableSearchTreeWidget

import { BaseElementWidget, SPI, TableSearchTreeWidget, ViewType } from '@kunlun/dependencies';
import CustomTableSearchTree from './CustomTableSearchTree.vue';

@SPI.ClassFactory(
  BaseElementWidget.Token({
    viewType: [ViewType.Table, ViewType.Form],
    widget: 'tree',
    model: 'resource.k2.Model0000000100' // 改成自己的模型
  })
)
export class CustomTableSearchTreeWidget extends TableSearchTreeWidget {
  public initialize(props) {
    super.initialize(props);
    this.setComponent(CustomTableSearchTree);
    return this;
  }
}

3. 定义 Vue 树组件

接下来，我们来实现 CustomTableSearchTree.vue 组件。这个组件将处理树的数据加载、节点选中等逻辑。你可以根据项目的需要修改其中的交互逻辑或 UI 设计。

<template>
  <a-tree :load-data="onLoadData" :tree-data="treeData" @select="onSelected" />
</template>
<script lang="ts">
import { OioTreeNode, TreeUtils } from '@kunlun/dependencies';
import { computed, defineComponent } from 'vue';

export default defineComponent({
  props: {
    rootNode: {
      type: Object
    },
    loadData: {
      type: Function,
      required: true
    },
    onSelected: {
      type: Function,
      required: true
    }
  },
  setup(props) {
    // // 计算树的数据源，使用 TreeUtils 处理
    const treeData = computed(() => {
      return TreeUtils.fillLoadMoreAction([...(props.rootNode?.children || [])]);
    });

    // 异步加载子节点
    const onLoadData = async (node) => {
      return await props.loadData(node.dataRef);
    };

    // 处理节点选中事件
    const onSelected = (
      selectedKeys: string[],
      e: { nativeEvent: PointerEvent; node: { dataRef: OioTreeNode }; selected: boolean }
    ) => {
      props.onSelected?.(e.node.dataRef, e.selected);
    };

    return {
      treeData,

      onLoadData,
      onSelected
    };
  }
});
</script>

4. 自定义 UI

如果你希望修改树组件的 UI，比如调整样式或交互方式，可以在 CustomTableSearchTree.vue 文件中根据需要进行调整。通过这个自定义组件，你可以灵活地控制树的外观和行为，满足具体的业务需求。

默认选择第一条数据

有时在使用树结构时，我们希望页面加载后默认选中第一条数据。为此，我们可以监听 treeData 的变化，并在数据加载完成时，自动触发选中第一条记录的操作。

const stop = watch(
  () => treeData.value.length,
  async (len) => {
    if (!len) {
      return;
    }

    // 选中树中的第一条记录
    selectedKeys.value = [treeData.value[0].key];
    props.onSelected?.(treeData.value[0].value.metadata, true);
    stop(); // 停止监听
  },
  {
    immediate: true
  }
);

表格的新建按钮，获取选中的树节点

在树组件中，我们希望右侧的表格的上方的 新建按钮 点击的时候，可以获取当前树的 ID 作为条件传递给后端。那么这个时候，我们需要通过自定义 action 的方式来实现。

可以参考这篇文章