plain-design 1.0.0-beta.8 → 1.0.0-beta.80

package/src/packages/components/TreeCore/createTreeCore.tsx

@@ -1,360 +1,364 @@
-import {computed, ComputedRef, reactive, useModel, useRefs, watchEffect} from "plain-design-composition";
-import {iTreeNodeComputedData, iTreeProps, iTreeState} from "./TreeCore.type";
-import {createTreeUtils} from "./createTreeUtils";
-import {formatNodeData2TreeNode} from "./fromatNodeData";
-import {iTreeNode} from "./createTreeNode";
-import {iTreeEvent} from "./createTreeProps";
-import {createTreeMethods} from "./createTreeMethods";
-import {createTreeHooks} from "./createTreeHooks";
-import {CheckboxStatus} from "../../utils/constant";
-import {createTreeDraggier} from "./createTreeDraggier";
-import {VirtualList} from "../VirtualList";
-import {Scroll} from "../Scroll";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {toArray} from "plain-utils/utils/toArray";
-
-export function createTreeCore(
-  {
-    props,
-    event: { emit },
-    ignoreEmpty,
-    draggable
-  }: {
-    props: iTreeProps,
-    event: iTreeEvent,
-    ignoreEmpty?: boolean,
-    draggable?: {
-      rowClass: string,
-      contentClass: string,
-    }
-  },
-) {
-
-  const { refs, onRef } = useRefs({ list: VirtualList, scroll: Scroll, });
-
-  const { effects } = createEffects();
-
-  /**
-   * 工具函数
-   * @author  韦胜健
-   * @date    2022/9/21 10:46
-   */
-  const utils = createTreeUtils({
-    props,
-    getTreeNodeComputedData: () => treeNodeComputedData.value,
-    setCheckModel: (key) => {
-      if (key == null) {checkModel.value = null;}
-      checkModel.value = Array.isArray(key) ? key.map(i => utils.getTreeNode(i)?.data) : utils.getTreeNode(key)?.data;
-    }
-  });
-
-  /**
-   * 内部钩子函数
-   * @author  韦胜健
-   * @date    2022/9/21 15:54
-   */
-  const hooks = createTreeHooks();
-
-  /**
-   * 内部状态
-   * @author  韦胜健
-   * @date    2022/9/21 10:46
-   */
-  const innerState = reactive({
-    loading: {} as Record<string, boolean | undefined>,
-    loaded: {} as Record<string, boolean>,
-  });
-
-  /**
-   * data数据绑定值
-   * @author  韦胜健
-   * @date    2022/9/22 14:18
-   */
-  const dataModel = useModel(() => props.data, emit.onUpdateData);
-
-  /**
-   * 绑定选中节点数据，单选绑定单条数据，多选绑定数据数组
-   * @author  韦胜健
-   * @date    2022/9/21 10:46
-   */
-  const checkModel = useModel(() => props.modelValue, emit.onUpdateModelValue);
-
-  /**
-   * 绑定展开节点的key字符串或者key数组
-   * @author  韦胜健
-   * @date    2022/9/21 10:46
-   */
-  const expandModel = useModel(() => props.expand, emit.onUpdateExpand);
-
-  /**
-   * 当前选中行
-   * @author  韦胜健
-   * @date    2022/9/21 14:45
-   */
-  const currentModel = useModel(() => props.current, emit.onUpdateCurrent);
-
-  /**
-   * 状态
-   * @author  韦胜健
-   * @date    2022/9/21 10:49
-   */
-  const state = reactive({
-    /*选中的key2boolean映射*/
-    checkedMap: computed(() => {
-      if (checkModel.value == null) {return {};}
-      return toArray(checkModel.value).reduce((prev, item) => {
-        prev[utils.getNodeDataKey(item)] = true;
-        return prev;
-      }, {} as Record<string, boolean | undefined>);
-    }),
-    /*展开的key2boolean映射*/
-    expandedMap: computed(() => (expandModel.value || []).reduce((prev, key) => {
-      prev[key] = true;
-      return prev;
-    }, {} as Record<string, boolean>)),
-    /*加载中的key2boolean映射*/
-    loadingMap: computed(() => innerState.loading),
-    /*已经懒加载完毕的key2boolean映射*/
-    loadedMap: computed(() => innerState.loaded),
-    /*当前选中行*/
-    current: computed({
-      get: () => currentModel.value,
-      set: val => currentModel.value = val
-    }),
-    /*设置节点的加载状态*/
-    setLoading: ((treeNode, flag) => {
-      if (flag) {
-        state.loadingMap[treeNode.key] = flag;
-      } else {
-        delete state.loadingMap[treeNode.key];
-      }
-    }) as iTreeState["setLoading"],
-    /*设置节点的懒加载状态*/
-    setLoaded: ((treeNode, flag) => {
-      if (flag) {
-        state.loadedMap[treeNode.key] = flag;
-      } else {
-        delete state.loadedMap[treeNode.key];
-      }
-    }) as iTreeState["setLoaded"],
-    /**
-     * 绑定单值：checkLast=false，singleValueType=last
-     * 绑定多值，只能选叶子节点：checkLast=true，singleValueType=all；
-     * 绑定多值，选择任意节点：checkLast=false，singleValueTyp=all；
-     * @author  韦胜健
-     * @date    2022/10/27 11:32
-     */
-    singleCheckType: computed(() => {
-      /*默认情况下，绑定值为全节点*/
-      const singleValueType = props.singleValueType || 'all';
-      /*如果没有限制checkLast，如果绑定值为全节点，则默认只能选叶子节点，如果绑定值为单一节点，则可以选择任意节点*/
-      const checkLast = props.checkLast != null ? props.checkLast : (props.multiple ? false : singleValueType === 'all');
-      return { singleValueType, checkLast };
-    }),
-  });
-
-  /**
-   * 开启整个组件的loading状态
-   * @author  韦胜健
-   * @date    2022/9/22 14:20
-   */
-  const isLoading = (() => {
-    const state = reactive({ value: false });
-    const value = computed(() => props.loading || state.value);
-    return reactive({
-      isLoading: value,
-      setLoading: (flag: boolean) => state.value = flag
-    });
-  })();
-
-  /**
-   * 方法
-   * @author  韦胜健
-   * @date    2022/9/21 14:31
-   */
-  const methods = createTreeMethods({ utils, props, state, checkModel, expandModel });
-
-  /**
-   * 递归的属性节点数据
-   * @author  韦胜健
-   * @date    2022/9/21 10:48
-   */
-  const treeNodeComputedData: ComputedRef<iTreeNodeComputedData> = (() => {
-    /*每次执行计算属性，都缓存下当时的treeNode*/
-    let cacheNodeId2treeNode = {} as Record<string, iTreeNode | undefined>;
-    return computed(() => {
-
-      /*格式化nodeDataList为treeNodeList*/
-      const treeNodeList = !!dataModel.value ? formatNodeData2TreeNode({
-        nodeDataList: dataModel.value || [],
-        parent: null,
-        level: 0,
-        props,
-        state,
-        utils,
-        cacheNodeId2treeNode,
-        getCheckStatus: () => key2checkStatus.value,
-        ignoreEmpty,
-      }) : [];
-
-      let newNodeId2treeNode = {} as Record<string, iTreeNode | undefined>;
-      utils.iterate({
-        treeNodeList: treeNodeList,
-        handler: treeNode => {newNodeId2treeNode[treeNode.id] = treeNode;}
-      });
-      /*保存本次计算中所有的treeNode，用于下一次执行计算属性的时候直接取缓存，取缓存的相同对象有利于减少依赖更新的变化*/
-      /*将newNodeId2treeNode中的值保存到cacheNodeId2treeNode，之所以不直接赋值newNodeId2treeNode给cacheNodeId2treeNode，是因为，*/
-      /*treeNodeComputedData是不一定一直会重新计算的，但是iTreeNode在执行children()函数的时候会一直执行formatNodeData2TreeNode函数，会一直使用这个cacheNodeId2treeNode对象*/
-      /*所以要保存这个对象的引用不变*/
-      /*本次执行计算属性，记住当前的treeNode*/
-      Object.keys(cacheNodeId2treeNode).concat(Object.keys(newNodeId2treeNode)).forEach(key => {
-        if (newNodeId2treeNode[key]) {
-          cacheNodeId2treeNode[key] = newNodeId2treeNode[key];
-        } else {
-          delete cacheNodeId2treeNode[key];
-        }
-      });
-      const key2treeNode = Object.values(newNodeId2treeNode).reduce((prev, treeNode) => {
-        prev[treeNode!.key] = treeNode!;
-        return prev;
-      }, {} as Record<string, iTreeNode>);
-      return { treeNodeList, key2treeNode, data: dataModel.value };
-    });
-  })();
-
-  /**
-   * key映射选中状态
-   * @author  韦胜健
-   * @date    2022.9.21 22:00
-   */
-  const key2checkStatus = (() => {
-    const innerState = reactive({ value: {} as Record<string, typeof CheckboxStatus.TYPE> });
-    effects.push(
-      watchEffect(() => {
-        const map: Record<string, typeof CheckboxStatus.TYPE> = {};
-        utils.iterate({
-          isIterateChildrenFirst: () => true,
-          treeNodeList: treeNodeComputedData.value.treeNodeList,
-          handler: (treeNode) => {
-            const isChecked = !!state.checkedMap[treeNode.key];
-            if (props.multiple) {
-              /**
-               * 如果是叶子节点或者启用严格的选中模式，则节点只有选中以及非选中两个状态，没有半选状态
-               * @author  韦胜健
-               * @date    2022.10.4 13:26
-               */
-              if (treeNode.isLeaf() || props.checkStrictly) {
-                /*如果是叶子节点，则是否选中由checkModel是否有这个key来判断*/
-                map[treeNode.key] = isChecked ? CheckboxStatus.check : CheckboxStatus.uncheck;
-              } else {
-                /*不是叶子节点*/
-                if (isChecked && treeNode.children()!.filter(i => !i.empty).every(i => map[i.key] === CheckboxStatus.check)) {
-                  /*如果自己被选中并且所有的子节点都是选中状态，则自己为选中状态*/
-                  map[treeNode.key] = CheckboxStatus.check;
-                } else if (!isChecked && treeNode.children()!.filter(i => !i.empty).every(i => map[i.key] === CheckboxStatus.uncheck)) {
-                  /*如果自己没有选中并且每个子节点都是数据未选中状态，则自己为未选中状态*/
-                  map[treeNode.key] = CheckboxStatus.uncheck;
-                } else {
-                  map[treeNode.key] = CheckboxStatus.minus;
-                }
-              }
-            } else {
-              map[treeNode.key] = isChecked ? CheckboxStatus.check : CheckboxStatus.uncheck;
-            }
-          }
-        });
-        const currentValue = { ...innerState.value };
-        if (Object.keys(map).some(key => currentValue[key] !== map[key])) {
-          innerState.value = map;
-        }
-      })
-    );
-    return innerState;
-  })();
-
-  /**
-   * 根据展开信息拍平的节点数据
-   * @author  韦胜健
-   * @date    2022/9/21 10:48
-   */
-  const flatNodeComputedData = computed(() => {
-    let list: (iTreeNode)[] = [];
-    utils.iterate({
-      treeNodeList: treeNodeComputedData.value.treeNodeList,
-      /*如果节点没有展开，则不需要遍历子节点*/
-      isIterateChildren: treeNode => treeNode.isExpanded(),
-      handler: (treeNode) => treeNode.isPassFilter() && list.push(treeNode)
-    });
-    list.forEach((treeNode, index) => treeNode.flatIndex = index);
-    return list;
-  });
-
-  /**
-   * 无数据
-   * @author  韦胜健
-   * @date    2022/10/26 15:11
-   */
-  const isNoData = computed(() => dataModel.value == null || dataModel.value.length === 0);
-
-  /**
-   * 无匹配搜索的数据
-   * @author  韦胜健
-   * @date    2022/10/26 15:11
-   */
-  const isNoMatch = computed(() => !isNoData.value && flatNodeComputedData.value.length === 0);
-
-  /**
-   * 拖拽
-   * @author  韦胜健
-   * @date    2022/9/27 11:58
-   */
-  const draggier = computed(() => {
-    if (!props.draggable) {
-      return null;
-    } else {
-      return createTreeDraggier({
-        utils,
-        rowClass: draggable?.rowClass || 'no-draggable-row-class',
-        contentClass: draggable?.contentClass || 'no-draggable-content-class',
-        getScroll: () => refs.list?.refs.scroll || refs.scroll,
-        methods,
-        hooks,
-      });
-    }
-  });
-
-  effects.push(
-    hooks.onClickExpandIcon.use(({ treeNode }) => {methods.toggleExpand(treeNode);})
-  );
-  effects.push(
-    hooks.onClickNodeContent.use(({ treeNode }) => {methods.singleSelect(treeNode);})
-  );
-  effects.push(
-    hooks.onClickCheckbox.use(({ treeNode }) => {
-      if (!props.multiple) {return;}
-      if (state.singleCheckType.checkLast && !treeNode.isLeaf()) {return;}
-      methods.toggleCheck(treeNode);
-    })
-  );
-  effects.push(
-    hooks.onDragChange.use((data) => {
-      emit.onDragChange(data);
-    })
-  );
-  effects.push(hooks.onMounted.use(async () => {
-    if (props.lazy) {
-      isLoading.setLoading(true);
-      try {
-        dataModel.value = await props.getChildrenData!(null);
-      } finally {
-        isLoading.setLoading(false);
-      }
-    }
-  }));
-
-  const dispose = () => effects.clear();
-
-  return { props, utils, state, methods, treeNodeComputedData, flatNodeComputedData, hooks, dispose, dataModel, isLoading, refs, onRef, draggier, isNoData, isNoMatch };
-}
-
-export type iTreeCore = ReturnType<typeof createTreeCore>
+import {computed, ComputedRef, reactive, useModel, useRefs, watchEffect} from "plain-design-composition";
+import {iTreeNodeComputedData, iTreeProps, iTreeState} from "./TreeCore.type";
+import {createTreeUtils} from "./createTreeUtils";
+import {formatNodeData2TreeNode} from "./fromatNodeData";
+import {iTreeNode} from "./createTreeNode";
+import {iTreeEvent} from "./createTreeProps";
+import {createTreeMethods} from "./createTreeMethods";
+import {createTreeHooks} from "./createTreeHooks";
+import {CheckboxStatus} from "../../utils/constant";
+import {createTreeDraggier} from "./createTreeDraggier";
+import {VirtualList} from "../VirtualList";
+import {Scroll} from "../Scroll";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {toArray} from "plain-utils/utils/toArray";
+
+export function createTreeCore(
+  {
+    props,
+    event: { emit },
+    ignoreEmpty,
+    draggable
+  }: {
+    props: iTreeProps,
+    event: iTreeEvent,
+    ignoreEmpty?: boolean,
+    draggable?: {
+      rowClass: string,
+      contentClass: string,
+    }
+  },
+) {
+
+  const { refs, onRef } = useRefs({ list: VirtualList, scroll: Scroll, });
+
+  const { effects } = createEffects();
+
+  /**
+   * 工具函数
+   * @author  韦胜健
+   * @date    2022/9/21 10:46
+   */
+  const utils = createTreeUtils({
+    props,
+    getTreeNodeComputedData: () => treeNodeComputedData.value,
+    setCheckModel: (key) => {
+      if (key == null) {checkModel.value = null;}
+      checkModel.value = Array.isArray(key) ? key.map(i => utils.getTreeNode(i)?.data) : utils.getTreeNode(key)?.data;
+    }
+  });
+
+  /**
+   * 内部钩子函数
+   * @author  韦胜健
+   * @date    2022/9/21 15:54
+   */
+  const hooks = createTreeHooks();
+
+  /**
+   * 内部状态
+   * @author  韦胜健
+   * @date    2022/9/21 10:46
+   */
+  const innerState = reactive({
+    loading: {} as Record<string, boolean | undefined>,
+    loaded: {} as Record<string, boolean>,
+  });
+
+  /**
+   * data数据绑定值
+   * @author  韦胜健
+   * @date    2022/9/22 14:18
+   */
+  const dataModel = useModel(() => props.data, emit.onUpdateData);
+
+  /**
+   * 绑定选中节点数据，单选绑定单条数据，多选绑定数据数组
+   * @author  韦胜健
+   * @date    2022/9/21 10:46
+   */
+  const checkModel = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+  /**
+   * 绑定展开节点的key字符串或者key数组
+   * @author  韦胜健
+   * @date    2022/9/21 10:46
+   */
+  const expandModel = useModel(() => props.expand, emit.onUpdateExpand);
+
+  /**
+   * 当前选中行
+   * @author  韦胜健
+   * @date    2022/9/21 14:45
+   */
+  const currentModel = useModel(() => props.current, emit.onUpdateCurrent);
+
+  /**
+   * 状态
+   * @author  韦胜健
+   * @date    2022/9/21 10:49
+   */
+  const state = reactive({
+    /*选中的key2boolean映射*/
+    checkedMap: computed(() => {
+      if (checkModel.value == null) {return {};}
+      return toArray(checkModel.value).reduce((prev, item) => {
+        prev[utils.getNodeDataKey(item)] = true;
+        return prev;
+      }, {} as Record<string, boolean | undefined>);
+    }),
+    /*展开的key2boolean映射*/
+    expandedMap: computed(() => (expandModel.value || []).reduce((prev, key) => {
+      prev[key] = true;
+      return prev;
+    }, {} as Record<string, boolean>)),
+    /*加载中的key2boolean映射*/
+    loadingMap: computed(() => innerState.loading),
+    /*已经懒加载完毕的key2boolean映射*/
+    loadedMap: computed(() => innerState.loaded),
+    /*当前选中行*/
+    current: computed({
+      get: () => currentModel.value,
+      set: val => currentModel.value = val
+    }),
+    /*设置节点的加载状态*/
+    setLoading: ((treeNode, flag) => {
+      if (flag) {
+        state.loadingMap[treeNode.key] = flag;
+      } else {
+        delete state.loadingMap[treeNode.key];
+      }
+    }) as iTreeState["setLoading"],
+    /*设置节点的懒加载状态*/
+    setLoaded: ((treeNode, flag) => {
+      if (flag) {
+        state.loadedMap[treeNode.key] = flag;
+      } else {
+        delete state.loadedMap[treeNode.key];
+      }
+    }) as iTreeState["setLoaded"],
+    /**
+     * 绑定单值：checkLast=false，singleValueType=last
+     * 绑定多值，只能选叶子节点：checkLast=true，singleValueType=all；
+     * 绑定多值，选择任意节点：checkLast=false，singleValueTyp=all；
+     * @author  韦胜健
+     * @date    2022/10/27 11:32
+     */
+    singleCheckType: computed(() => {
+      /*默认情况下，绑定值为全节点*/
+      const singleValueType = props.singleValueType || 'all';
+      /*如果没有限制checkLast，如果绑定值为全节点，则默认只能选叶子节点，如果绑定值为单一节点，则可以选择任意节点*/
+      const checkLast = props.checkLast != null ? props.checkLast : (props.multiple ? false : singleValueType === 'all');
+      return { singleValueType, checkLast };
+    }),
+  });
+
+  /**
+   * 开启整个组件的loading状态
+   * @author  韦胜健
+   * @date    2022/9/22 14:20
+   */
+  const isLoading = (() => {
+    const state = reactive({ value: false });
+    const value = computed(() => props.loading || state.value);
+    return reactive({
+      isLoading: value,
+      setLoading: (flag: boolean) => state.value = flag
+    });
+  })();
+
+  /**
+   * 方法
+   * @author  韦胜健
+   * @date    2022/9/21 14:31
+   */
+  const methods = createTreeMethods({ utils, props, state, checkModel, expandModel });
+
+  /**
+   * 递归的属性节点数据
+   * @author  韦胜健
+   * @date    2022/9/21 10:48
+   */
+  const treeNodeComputedData: ComputedRef<iTreeNodeComputedData> = (() => {
+    /*每次执行计算属性，都缓存下当时的treeNode*/
+    let cacheNodeId2treeNode = {} as Record<string, iTreeNode | undefined>;
+    return computed(() => {
+
+      /*格式化nodeDataList为treeNodeList*/
+      const treeNodeList = !!dataModel.value ? formatNodeData2TreeNode({
+        nodeDataList: dataModel.value || [],
+        parent: null,
+        level: 0,
+        props,
+        state,
+        utils,
+        cacheNodeId2treeNode,
+        getCheckStatus: () => key2checkStatus.value,
+        ignoreEmpty,
+      }) : [];
+
+      let newNodeId2treeNode = {} as Record<string, iTreeNode | undefined>;
+      utils.iterate({
+        treeNodeList: treeNodeList,
+        handler: treeNode => {newNodeId2treeNode[treeNode.id] = treeNode;}
+      });
+      /*保存本次计算中所有的treeNode，用于下一次执行计算属性的时候直接取缓存，取缓存的相同对象有利于减少依赖更新的变化*/
+      /*将newNodeId2treeNode中的值保存到cacheNodeId2treeNode，之所以不直接赋值newNodeId2treeNode给cacheNodeId2treeNode，是因为，*/
+      /*treeNodeComputedData是不一定一直会重新计算的，但是iTreeNode在执行children()函数的时候会一直执行formatNodeData2TreeNode函数，会一直使用这个cacheNodeId2treeNode对象*/
+      /*所以要保存这个对象的引用不变*/
+      /*本次执行计算属性，记住当前的treeNode*/
+      Object.keys(cacheNodeId2treeNode).concat(Object.keys(newNodeId2treeNode)).forEach(key => {
+        if (newNodeId2treeNode[key]) {
+          cacheNodeId2treeNode[key] = newNodeId2treeNode[key];
+        } else {
+          delete cacheNodeId2treeNode[key];
+        }
+      });
+      const key2treeNode = Object.values(newNodeId2treeNode).reduce((prev, treeNode) => {
+        prev[treeNode!.key] = treeNode!;
+        return prev;
+      }, {} as Record<string, iTreeNode>);
+      return { treeNodeList, key2treeNode, data: dataModel.value };
+    });
+  })();
+
+  /**
+   * key映射选中状态
+   * @author  韦胜健
+   * @date    2022.9.21 22:00
+   */
+  const key2checkStatus = (() => {
+    const innerState = reactive({ value: {} as Record<string, typeof CheckboxStatus.TYPE> });
+    effects.push(
+      watchEffect(() => {
+        const map: Record<string, typeof CheckboxStatus.TYPE> = {};
+        utils.iterate({
+          isIterateChildrenFirst: () => true,
+          treeNodeList: treeNodeComputedData.value.treeNodeList,
+          handler: (treeNode) => {
+            const isChecked = !!state.checkedMap[treeNode.key];
+            if (props.multiple) {
+              /**
+               * 如果是叶子节点或者启用严格的选中模式，则节点只有选中以及非选中两个状态，没有半选状态
+               * @author  韦胜健
+               * @date    2022.10.4 13:26
+               */
+              if (treeNode.isLeaf() || props.checkStrictly) {
+                /*如果是叶子节点，则是否选中由checkModel是否有这个key来判断*/
+                map[treeNode.key] = isChecked ? CheckboxStatus.check : CheckboxStatus.uncheck;
+              } else {
+                /*不是叶子节点*/
+                if (isChecked && treeNode.children()!.filter(i => !i.empty).every(i => map[i.key] === CheckboxStatus.check)) {
+                  /*如果自己被选中并且所有的子节点都是选中状态，则自己为选中状态*/
+                  map[treeNode.key] = CheckboxStatus.check;
+                } else if (!isChecked && treeNode.children()!.filter(i => !i.empty).every(i => map[i.key] === CheckboxStatus.uncheck)) {
+                  /*如果自己没有选中并且每个子节点都是数据未选中状态，则自己为未选中状态*/
+                  map[treeNode.key] = CheckboxStatus.uncheck;
+                } else {
+                  map[treeNode.key] = CheckboxStatus.minus;
+                }
+              }
+            } else {
+              map[treeNode.key] = isChecked ? CheckboxStatus.check : CheckboxStatus.uncheck;
+            }
+          }
+        });
+        const currentValue = { ...innerState.value };
+        if (Object.keys(map).some(key => currentValue[key] !== map[key])) {
+          innerState.value = map;
+        }
+      })
+    );
+    return innerState;
+  })();
+
+  /**
+   * 根据展开信息拍平的节点数据
+   * @author  韦胜健
+   * @date    2022/9/21 10:48
+   */
+  const flatNodeComputedData = computed(() => {
+    let list: (iTreeNode)[] = [];
+    utils.iterate({
+      treeNodeList: treeNodeComputedData.value.treeNodeList,
+      /*如果节点没有展开，则不需要遍历子节点*/
+      isIterateChildren: treeNode => treeNode.isExpanded(),
+      handler: (treeNode) => treeNode.isPassFilter() && list.push(treeNode)
+    });
+    list.forEach((treeNode, index) => treeNode.flatIndex = index);
+    return list;
+  });
+
+  /**
+   * 无数据
+   * @author  韦胜健
+   * @date    2022/10/26 15:11
+   */
+  const isNoData = computed(() => dataModel.value == null || dataModel.value.length === 0);
+
+  /**
+   * 无匹配搜索的数据
+   * @author  韦胜健
+   * @date    2022/10/26 15:11
+   */
+  const isNoMatch = computed(() => !isNoData.value && flatNodeComputedData.value.length === 0);
+
+  /**
+   * 拖拽
+   * @author  韦胜健
+   * @date    2022/9/27 11:58
+   */
+  const draggier = computed(() => {
+    if (!props.draggable) {
+      return null;
+    } else {
+      return createTreeDraggier({
+        utils,
+        rowClass: draggable?.rowClass || 'no-draggable-row-class',
+        contentClass: draggable?.contentClass || 'no-draggable-content-class',
+        getScroll: () => refs.list?.refs.scroll || refs.scroll,
+        methods,
+        hooks,
+      });
+    }
+  });
+
+  effects.push(
+    hooks.onClickExpandIcon.use(({ treeNode }) => {methods.toggleExpand(treeNode);})
+  );
+  effects.push(
+    hooks.onClickNodeContent.use(({ treeNode }) => {
+      methods.singleSelect(treeNode);
+      if (props.expandOnClickNode) {methods.toggleExpand(treeNode);}
+      if (props.checkOnClickNode) {methods.toggleCheck(treeNode);}
+    })
+  );
+  effects.push(
+    hooks.onClickCheckbox.use(({ treeNode }) => {
+      if (!props.multiple) {return;}
+      if (state.singleCheckType.checkLast && !treeNode.isLeaf()) {return;}
+      methods.toggleCheck(treeNode);
+    })
+  );
+  effects.push(
+    hooks.onDragChange.use((data) => {
+      emit.onDragChange(data);
+    })
+  );
+  effects.push(hooks.onMounted.use(async () => {
+    if (props.lazy) {
+      isLoading.setLoading(true);
+      try {
+        dataModel.value = await props.getChildrenData!(null);
+      } finally {
+        isLoading.setLoading(false);
+      }
+    }
+  }));
+
+  const dispose = () => effects.clear();
+
+  return { props, utils, state, methods, treeNodeComputedData, flatNodeComputedData, hooks, dispose, dataModel, isLoading, refs, onRef, draggier, isNoData, isNoMatch };
+}
+
+export type iTreeCore = ReturnType<typeof createTreeCore>