修复 src 结构

src/component/tree/TreeNode.vue

@@ -0,0 +1,158 @@
+<script lang="ts">
+export default {
+  name: "TreeNode",
+};
+</script>
+
+<script setup lang="ts">
+import { StringOrNumber } from "./tree.type";
+import { Nullable } from "../type";
+
+import LayIcon from "../icon";
+import LayCheckbox from "../checkbox";
+import { Ref } from "vue";
+import { Tree } from "./tree";
+
+type CustomKey = string | number;
+type CustomString = (() => string) | string;
+
+interface TreeData {
+  id: CustomKey;
+  title: CustomString;
+  children: TreeData[];
+  parentKey: Nullable<StringOrNumber>;
+  isRoot: boolean;
+  isChecked: Ref<boolean>;
+  isDisabled: Ref<boolean>;
+  isLeaf: Ref<boolean>;
+  hasNextSibling: boolean;
+  parentNode: Nullable<TreeData>;
+}
+
+interface TreeNodeProps {
+  tree: Tree;
+  nodeList: TreeData[];
+  showCheckbox: boolean;
+  showLine: boolean;
+  onlyIconControl: boolean;
+}
+
+interface TreeNodeEmits {
+  (e: "node-click", node: TreeData): void;
+}
+
+const props = defineProps<TreeNodeProps>();
+const emit = defineEmits<TreeNodeEmits>();
+
+function renderLineShort(node: TreeData) {
+  return (
+    !node.hasNextSibling &&
+    node.parentNode &&
+    // 外层最后一个
+    (!node.parentNode.hasNextSibling ||
+      //上一层父级有延伸线
+      (node.parentNode.hasNextSibling && !node.parentNode.children))
+  );
+}
+/**
+ * 展开收起 icon样式
+ * @param node
+ */
+const nodeIconType = (node: TreeData): string => {
+  if (!props.showLine) {
+    if (node.children.length > 0) {
+      return "layui-tree-iconArrow ";
+    }
+    return "";
+  }
+  if (node.children.length !== 0) {
+    return !node.isLeaf.value
+      ? "layui-icon-addition"
+      : "layui-icon-subtraction";
+  }
+  return "layui-icon-file";
+};
+
+function recursiveNodeClick(node: TreeData) {
+  emit("node-click", node);
+}
+
+function handleChange(checked: boolean, node: TreeData) {
+  props.tree.setCheckedKeys(checked, node);
+}
+
+function handleIconClick(node: TreeData) {
+  node.isLeaf.value = !node.isLeaf.value;
+}
+
+function handleTitleClick(node: TreeData) {
+  if (!props.onlyIconControl) {
+    handleIconClick(node);
+  }
+  emit("node-click", node);
+}
+</script>
+
+<template>
+  <div
+    v-for="(node, nodeIndex) in nodeList"
+    :key="nodeIndex"
+    :class="{
+      'layui-tree-set': true,
+      'layui-tree-setLineShort': renderLineShort(node),
+      'layui-tree-setHide': node.isRoot,
+    }"
+  >
+    <div class="layui-tree-entry">
+      <div class="layui-tree-main">
+        <span
+          :class="[
+            showLine && node.children.length > 0 ? 'layui-tree-icon' : '',
+            { 'layui-tree-iconClick': true },
+          ]"
+        >
+          <LayIcon :type="nodeIconType(node)" @click="handleIconClick(node)" />
+        </span>
+        <LayCheckbox
+          v-if="showCheckbox"
+          :modelValue="node.isChecked.value"
+          :disabled="node.isDisabled.value"
+          skin="primary"
+          label=""
+          @change="
+            (checked) => {
+              handleChange(checked, node);
+            }
+          "
+        />
+        <span
+          :class="{
+            'layui-tree-txt': true,
+            'layui-disabled': node.isDisabled.value,
+          }"
+          @click="handleTitleClick(node)"
+        >
+          {{ node.title }}
+        </span>
+      </div>
+    </div>
+    <transition name="move">
+      <div
+        v-if="node.isLeaf.value"
+        class="layui-tree-pack layui-tree-showLine"
+        style="display: block"
+      >
+        <TreeNode
+          :node-list="node.children"
+          :show-checkbox="showCheckbox"
+          :show-line="showLine"
+          :tree="tree"
+          :only-icon-control="onlyIconControl"
+          @node-click="recursiveNodeClick"
+        />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped></style>

src/component/tree/index.less

@@ -0,0 +1,180 @@
+
+.layui-tree {
+  line-height: 22px;
+}
+
+.layui-tree .layui-form-checkbox {
+  margin: 0 !important;
+}
+
+.layui-tree-set {
+  width: 100%;
+  position: relative;
+}
+
+.layui-tree-pack {
+  display: none;
+  padding-left: 20px;
+  position: relative;
+}
+
+.layui-tree-iconClick,
+.layui-tree-main {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.layui-tree-line .layui-tree-pack {
+  padding-left: 27px;
+}
+
+.layui-tree-line .layui-tree-set .layui-tree-set:after {
+  content: "";
+  position: absolute;
+  top: 14px;
+  left: -9px;
+  width: 17px;
+  height: 0;
+  border-top: 1px dotted #c0c4cc;
+}
+
+.layui-tree-entry {
+  position: relative;
+  padding: 3px 0;
+  height: 20px;
+  white-space: nowrap;
+}
+
+.layui-tree-entry:hover {
+  background-color: #eee;
+}
+
+.layui-tree-line .layui-tree-entry:hover {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.layui-tree-line .layui-tree-entry:hover .layui-tree-txt {
+  color: #999;
+  text-decoration: underline;
+  transition: 0.3s;
+}
+
+.layui-tree-main {
+  cursor: pointer;
+  padding-right: 10px;
+}
+
+.layui-tree-line .layui-tree-set:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -9px;
+  width: 0;
+  height: 100%;
+  border-left: 1px dotted #c0c4cc;
+}
+
+.layui-tree-line .layui-tree-set.layui-tree-setLineShort:before {
+  height: 13px;
+}
+
+.layui-tree-line .layui-tree-set.layui-tree-setHide:before {
+  height: 0;
+}
+
+.layui-tree-iconClick {
+  position: relative;
+  height: 20px;
+  line-height: 20px;
+  margin: 0 10px;
+  color: #c0c4cc;
+}
+
+.layui-tree-icon {
+  height: 12px;
+  line-height: 12px;
+  width: 12px;
+  text-align: center;
+  border: 1px solid #c0c4cc;
+}
+
+.layui-tree-iconClick .layui-icon {
+  font-size: 18px;
+}
+
+.layui-tree-icon .layui-icon {
+  font-size: 12px;
+  color: #666;
+}
+
+.layui-tree-iconArrow {
+  padding: 0 5px;
+}
+
+.layui-tree-iconArrow:after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 3px;
+  z-index: 100;
+  width: 0;
+  height: 0;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent transparent #c0c4cc;
+  transition: 0.5s;
+}
+
+.layui-tree-btnGroup,
+.layui-tree-editInput {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.layui-tree-spread
+> .layui-tree-entry
+> .layui-tree-iconClick
+> .layui-tree-iconArrow:after {
+  transform: rotate(90deg) translate(3px, 4px);
+}
+
+.layui-tree-txt {
+  display: inline-block;
+  vertical-align: middle;
+  color: #555;
+}
+
+.layui-tree-search {
+  margin-bottom: 15px;
+  color: #666;
+}
+
+.layui-tree-btnGroup .layui-icon {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0 2px;
+  cursor: pointer;
+}
+
+.layui-tree-btnGroup .layui-icon:hover {
+  color: #999;
+  transition: 0.3s;
+}
+
+.layui-tree-entry:hover .layui-tree-btnGroup {
+  visibility: visible;
+}
+
+.layui-tree-editInput {
+  height: 20px;
+  line-height: 20px;
+  padding: 0 3px;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.layui-tree-emptyText {
+  text-align: center;
+  color: #999;
+}

src/component/tree/index.ts

@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "LayTree", Component);
+};
+
+export default Component as IDefineComponent;

src/component/tree/index.vue

@@ -0,0 +1,94 @@
+<script lang="ts">
+export default {
+  name: "LayTree",
+};
+
+// import { TreeEmits, TreeProps as Tp } from './tree.type'
+</script>
+<script lang="ts" setup>
+import TreeNode from "./TreeNode.vue";
+import { computed } from "vue";
+import { useTree } from "./useTree";
+import { TreeData } from "./tree";
+import "./index.less";
+
+type StringFn = () => string;
+type StringOrNumber = string | number;
+type KeysType = (number | string)[];
+type EditType = boolean | ("add" | "update" | "delete");
+
+interface OriginalTreeData {
+  title: StringFn | string;
+  id: StringOrNumber;
+  field: StringFn | string;
+  children?: OriginalTreeData[];
+  disabled?: boolean;
+}
+
+interface TreeProps {
+  checkedKeys?: KeysType;
+  data: OriginalTreeData;
+  showCheckbox?: boolean;
+  edit?: EditType;
+  accordion?: boolean;
+  onlyIconControl?: boolean;
+  showLine?: boolean;
+  disabled?: boolean;
+  replaceFields?: {
+    id?: string;
+    children?: string;
+    title?: string;
+  };
+}
+
+interface TreeEmits {
+  (e: "update:checkedKeys", keys: KeysType): void;
+  (e: "update:expandKeys", keys: KeysType): void;
+  (e: "node-click", node: OriginalTreeData): void;
+}
+
+const props = withDefaults(defineProps<TreeProps>(), {
+  showCheckbox: false,
+  edit: false,
+  accordion: false,
+  onlyIconControl: false,
+  disabled: false,
+  showLine: true,
+  replaceFields: () => {
+    return {
+      id: "id",
+      children: "children",
+      title: "title",
+    };
+  },
+});
+
+const emit = defineEmits<TreeEmits>();
+
+const className = computed(() => {
+  return {
+    "layui-tree": true,
+    "layui-form": props.showCheckbox,
+    "layui-tree-line": props.showLine,
+  };
+});
+
+const { tree, nodeList } = useTree(props, emit);
+
+function handleClick(node: TreeData) {
+  const originNode = tree.getOriginData(node.id);
+  emit("node-click", originNode);
+}
+</script>
+<template>
+  <div :class="className">
+    <tree-node
+      :tree="tree"
+      :node-list="nodeList"
+      :show-checkbox="showCheckbox"
+      :show-line="showLine"
+      :only-icon-control="onlyIconControl"
+      @node-click="handleClick"
+    />
+  </div>
+</template>

src/component/tree/tree.ts

@@ -0,0 +1,202 @@
+import { OriginalTreeData, StringOrNumber } from "./tree.type";
+import { Nullable } from "../type";
+import { Ref, ref } from "vue";
+
+type CustomKey = string | number;
+type CustomString = (() => string) | string;
+
+export interface TreeData {
+  id: CustomKey;
+  title: CustomString;
+  children: TreeData[];
+  parentKey: Nullable<StringOrNumber>;
+  isRoot: boolean;
+  isChecked: Ref<boolean>;
+  isDisabled: Ref<boolean>;
+  isLeaf: Ref<boolean>;
+  hasNextSibling: boolean;
+  parentNode: Nullable<TreeData>;
+}
+
+interface ReplaceFields {
+  id: string;
+  title: string;
+  children: string;
+}
+
+interface TreeConfig {
+  showCheckbox: boolean;
+  checkedKeys: StringOrNumber[];
+  expandKeys: StringOrNumber[];
+  nodeMap: Map<StringOrNumber, TreeData>;
+  originMap: Map<StringOrNumber, OriginalTreeData>;
+  replaceFields: ReplaceFields;
+}
+
+class Tree {
+  protected config: TreeConfig;
+  protected treeData: TreeData[];
+
+  constructor(
+    config: TreeConfig,
+    origin: OriginalTreeData | OriginalTreeData[]
+  ) {
+    this.config = config;
+    this.treeData = [];
+    this.init(origin);
+  }
+
+  init(origin: OriginalTreeData | OriginalTreeData[]): void {
+    const tree = this.createTree(origin);
+    this.treeData = tree;
+  }
+
+  createTree(
+    origin: OriginalTreeData | OriginalTreeData[],
+    parentKey: StringOrNumber = ""
+  ): TreeData[] {
+    let data;
+    if (!Array.isArray(origin)) {
+      data = Array.of(Object.assign({}, origin));
+    } else {
+      data = origin;
+    }
+    const nodeList: TreeData[] = [];
+    const { children } = this.config.replaceFields;
+
+    const len = data.length;
+    for (let i = 0; i < len; i++) {
+      const node = this.getNode(data[i], parentKey, i < len - 1);
+      const nodeChildren = Reflect.get(node, children);
+      const nodeHasChildren = !!Reflect.get(node, children);
+
+      if (nodeHasChildren) {
+        Reflect.set(node, children, this.createTree(nodeChildren, node.id));
+      }
+
+      nodeList.push(node);
+    }
+    return nodeList;
+  }
+
+  getNode(
+    origin: OriginalTreeData,
+    parentKey: StringOrNumber,
+    hasNextSibling: boolean
+  ): TreeData {
+    const {
+      nodeMap,
+      originMap,
+      checkedKeys,
+      expandKeys,
+      replaceFields: { children, id, title },
+    } = this.config;
+
+    const nodeKey = Reflect.get(origin, id);
+    const nodeTitle = Reflect.get(origin, title);
+    const nodeChildren = Reflect.get(origin, children);
+    const nodeDisabled = !!Reflect.get(origin, "disabled");
+    const nodeIsLeaf = !!Reflect.get(origin, "spread");
+
+    const parentNode = nodeMap.get(parentKey);
+
+    const node = Object.assign({}, origin, {
+      id: nodeKey,
+      title: nodeTitle,
+      children: nodeChildren ? nodeChildren : [],
+      parentKey: parentKey,
+      isRoot: parentKey === "",
+      isDisabled: ref(false),
+      isChecked: ref(false),
+      isLeaf: ref(false),
+      hasNextSibling: hasNextSibling,
+      parentNode: parentNode || null,
+    });
+
+    node.isDisabled.value = nodeDisabled;
+    node.isChecked.value = parentNode
+      ? parentNode.isChecked.value
+      : checkedKeys.includes(nodeKey);
+    node.isLeaf.value = parentNode
+      ? parentNode.isLeaf.value
+      : expandKeys.includes(nodeKey);
+    node.isLeaf.value = nodeIsLeaf;
+
+    if (!nodeMap.has(nodeKey)) {
+      nodeMap.set(nodeKey, node);
+    }
+    if (!originMap.has(nodeKey)) {
+      originMap.set(nodeKey, origin);
+    }
+
+    return node;
+  }
+
+  setChildrenChecked(checked: boolean, nodes: TreeData[]) {
+    const len = nodes.length;
+    for (let i = 0; i < len; i++) {
+      console.log(nodes[i], checked);
+      nodes[i].isChecked.value = checked;
+      nodes[i].children &&
+        nodes[i].children.length > 0 &&
+        this.setChildrenChecked(checked, nodes[i].children);
+    }
+  }
+
+  setParentChecked(checked: boolean, parent: TreeData) {
+    if (!parent) {
+      return;
+    }
+    parent.isChecked.value = checked;
+    const pChild = parent.children;
+    const pChildChecked = pChild.some((c) => c.isChecked.value);
+    if (pChildChecked) {
+      parent.isChecked.value = true;
+    }
+    if (parent.parentNode) {
+      this.setParentChecked(checked, parent.parentNode);
+    }
+  }
+
+  setCheckedKeys(checked: boolean, node: TreeData) {
+    node.isChecked.value = checked;
+    // 处理上级
+    if (node.parentNode) {
+      this.setParentChecked(checked, node.parentNode);
+    }
+    // 处理下级
+    if (node.children) {
+      this.setChildrenChecked(checked, node.children);
+    }
+    console.log(this.getData());
+  }
+
+  getData() {
+    return this.treeData;
+  }
+
+  getKeys() {
+    const checkedKeys = [];
+    const expandKeys = [];
+    const iterator = this.config.nodeMap[Symbol.iterator]();
+    let next = iterator.next();
+    while (!next.done) {
+      const [, node] = next.value;
+      const id = Reflect.get(node, this.config.replaceFields.id);
+      if (node.isChecked.value) {
+        checkedKeys.push(id);
+      }
+      if (node.isLeaf.value) {
+        expandKeys.push(id);
+      }
+      next = iterator.next();
+    }
+    return { checkedKeys, expandKeys };
+  }
+
+  getOriginData(key: StringOrNumber): OriginalTreeData {
+    return this.config.originMap.get(key)!;
+  }
+}
+
+export { Tree };

src/component/tree/tree.type.ts

@@ -0,0 +1,34 @@
+export type StringFn = () => string;
+export type StringOrNumber = string | number;
+export type KeysType = (number | string)[];
+export type EditType = boolean | ("add" | "update" | "delete");
+
+export interface OriginalTreeData {
+  title: StringFn | string;
+  id: StringOrNumber;
+  field: StringFn | string;
+  children?: OriginalTreeData[];
+  disabled?: boolean;
+}
+
+export interface TreeProps {
+  checkedKeys?: KeysType;
+  expandKeys?: KeysType;
+  data: OriginalTreeData;
+  showCheckbox?: boolean;
+  edit?: EditType;
+  accordion?: boolean;
+  onlyIconControl?: boolean;
+  showLine?: boolean;
+  replaceFields?: {
+    id?: string;
+    children?: string;
+    title?: string;
+  };
+}
+
+export interface TreeEmits {
+  (e: "update:checkedKeys", keys: KeysType): void;
+  (e: "update:expandKeys", keys: KeysType): void;
+  (e: "node-click", node: OriginalTreeData, event: Event): void;
+}

src/component/tree/useTree.ts

@@ -0,0 +1,50 @@
+import { TreeEmits, TreeProps } from "./tree.type";
+import { computed, ComputedRef, watch } from "vue";
+import { Tree, TreeData } from "./tree";
+
+export declare type UseTree = (
+  props: TreeProps,
+  emit: TreeEmits
+) => {
+  tree: Tree;
+  nodeList: ComputedRef<TreeData[]>;
+};
+
+export const useTree: UseTree = (props: TreeProps, emit: TreeEmits) => {
+  const tree = new Tree(
+    {
+      nodeMap: new Map(),
+      originMap: new Map(),
+      replaceFields: {
+        id: "id",
+        title: "title",
+        children: "children",
+      },
+      showCheckbox: props.showCheckbox ?? false,
+      checkedKeys: props.checkedKeys ?? [],
+      expandKeys: props.expandKeys ?? [],
+    },
+    props.data
+  );
+
+  const nodeList = computed(() => {
+    const nodes = tree.getData();
+    console.log(nodes);
+    return nodes;
+  });
+
+  watch(
+    () => nodeList,
+    (list) => {
+      const { checkedKeys, expandKeys } = tree.getKeys();
+      emit("update:checkedKeys", checkedKeys);
+      // emit('update:expandKeys', expandKeys)
+    },
+    { deep: true }
+  );
+
+  return {
+    tree,
+    nodeList,
+  };
+};