DevCloudFE · kagol · Apr 18, 2022 · Apr 18, 2022
diff --git a/packages/devui-vue/devui/tree/src/components/tree-node.tsx b/packages/devui-vue/devui/tree/src/components/tree-node.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, inject, PropType, renderSlot, toRefs, useSlots } from 'vue';
+import { computed, defineComponent, inject, PropType, renderSlot, toRefs, useSlots } from 'vue';
 import { NODE_HEIGHT, USE_TREE_TOKEN } from '../const';
 import { IInnerTreeNode } from '../core/use-tree-types';
 import DTreeNodeToggle from './tree-node-toggle';
@@ -19,7 +19,7 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const { data, check } = toRefs(props);
-    const { toggleSelectNode, toggleCheckNode, toggleNode } = inject(USE_TREE_TOKEN);
+    const { toggleSelectNode, toggleCheckNode, toggleNode, getChildren } = inject(USE_TREE_TOKEN);
 
     const {
       nodeClass,
@@ -30,6 +30,12 @@ export default defineComponent({
       nodeHLineClass,
     } = useTreeNode(data);
 
+    const halfChecked = computed(() => {
+      const children = getChildren(data.value);
+      const checkedChildren = children.filter((item: IInnerTreeNode) => item.checked);
+      return checkedChildren.length > 0 && checkedChildren.length < children.length;
+    });
+
     return () => {
       return (
         <div class={nodeClass.value} style={nodeStyle.value}>
@@ -42,13 +48,17 @@ export default defineComponent({
               : <DTreeNodeToggle data={data.value} />
             }
             <div class="devui-tree-node__content--value-wrapper" style={{ height: `${NODE_HEIGHT}px`}}>
-              { check.value && <Checkbox
-                key={data.value?.id}
-                disabled={data.value?.disableCheck}
-                modelValue={data.value?.checked}
-                onUpdate:modelValue={() => { toggleCheckNode(data.value); }}
-                onClick={(event: MouseEvent) => { event.stopPropagation(); }}
-              /> }
+              {
+                check.value &&
+                <Checkbox
+                  key={data.value?.id}
+                  disabled={data.value?.disableCheck}
+                  halfchecked={halfChecked.value}
+                  modelValue={data.value.checked}
+                  onUpdate:modelValue={() => { toggleCheckNode(data.value); }}
+                  onClick={(event: MouseEvent) => { event.stopPropagation(); }}
+                />
+              }
               {
                 slots.default
                 ? renderSlot(useSlots(), 'default', { nodeData: data })

diff --git a/packages/devui-vue/devui/tree/src/components/use-tree-node.ts b/packages/devui-vue/devui/tree/src/components/use-tree-node.ts
@@ -15,7 +15,7 @@ export default function useTreeNode(data: ComputedRef<IInnerTreeNode>) {
     !data.value?.isLeaf && data.value?.expanded && 'devui-tree-node__vline',
   ]);
   const nodeVLineStyle = computed(() => {return {
-    height: `${NODE_HEIGHT * (getChildren(data.value, true).length - 1) + NODE_HEIGHT / 2 + 1}px`,
+    height: `${NODE_HEIGHT * (getChildren(data.value, { expanded: true }).length - 1) + NODE_HEIGHT / 2 + 1}px`,
     left: `${NODE_INDENT * (data.value?.level - 1) + 9}px`,
     top: `${NODE_HEIGHT}px`,
   }});

diff --git a/packages/devui-vue/devui/tree/src/core/use-check.ts b/packages/devui-vue/devui/tree/src/core/use-check.ts
@@ -5,7 +5,7 @@ export default function(options?: {
   checkStrategy: CheckStrategy
 }) {
   return function useCheck(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
-    const { setNodeValue, getNode } = core;
+    const { setNodeValue, getNode, getChildren, getParent } = core;
 
     const checkNode = (node: IInnerTreeNode): void => {
       setNodeValue(node, 'checked', true);
@@ -15,12 +15,43 @@ export default function(options?: {
       setNodeValue(node, 'checked', false);
     }
 
+    const controlParentNodeChecked = (node: IInnerTreeNode): void => {
+      const parentNode = getParent(node);
+      if (!parentNode) {
+        return;
+      }
+      const siblingNodes = getChildren(parentNode, { recursive: false });
+      const checkedSiblingNodes = siblingNodes.filter(item => item.checked);
+
+      // 根据子节点的勾选情况，动态设置父节点的 checked 属性
+      const toggleParentChecked = () => {
+        if (checkedSiblingNodes.length === 0) {
+          setNodeValue(parentNode, 'checked', false);
+        } else if (checkedSiblingNodes.length === siblingNodes.length) {
+          setNodeValue(parentNode, 'checked', true);
+        }
+      }
+
+      if (parentNode.parentId) {
+        toggleParentChecked();
+
+        // 递归往上设置父节点的 checked 属性
+        controlParentNodeChecked(parentNode);
+      } else {
+        toggleParentChecked();
+      }
+    }
+
     const toggleCheckNode = (node: IInnerTreeNode): void => {
       if (getNode(node).checked) {
         setNodeValue(node, 'checked', false);
+        getChildren(node).forEach(item => setNodeValue(item, 'checked', false));
       } else {
         setNodeValue(node, 'checked', true);
+        getChildren(node).forEach(item => setNodeValue(item, 'checked', true));
       }
+
+      controlParentNodeChecked(node);
     }
 
     return {

diff --git a/packages/devui-vue/devui/tree/src/core/use-core.ts b/packages/devui-vue/devui/tree/src/core/use-core.ts
@@ -1,25 +1,36 @@
 import { computed, ComputedRef, Ref } from 'vue';
-import { IInnerTreeNode, ITreeNode, IUseCore, valueof } from './use-tree-types';
+import { IInnerTreeNode, IUseCore, valueof } from './use-tree-types';
 import { generateInnerTree } from './utils';
 
 export default function(options?){
   return function useCore(data: Ref<IInnerTreeNode[]>): IUseCore {
-    const getLevel = (node: ITreeNode): number => {
+    const getLevel = (node: IInnerTreeNode): number => {
       return data.value.find((item) => item.id === node.id).level;
     }
 
-    const getChildren = (node: ITreeNode, expanded = false): IInnerTreeNode[] => {
+    const getChildren = (node: IInnerTreeNode, config = {
+      expanded: false,
+      recursive: true,
+    }): IInnerTreeNode[] => {
       let result = [];
-      const treeData = expanded ? getExpendedTree() : data;
+      const treeData = config.expanded ? getExpendedTree() : data;
       const startIndex = treeData.value.findIndex((item) => item.id === node.id);
 
       for (let i = startIndex + 1; i < treeData.value.length && getLevel(node) < treeData.value[i].level; i++) {
-        result.push(treeData.value[i]);
+        if (config.recursive) {
+          result.push(treeData.value[i]);
+        } else if (getLevel(node) === treeData.value[i].level - 1) {
+          result.push(treeData.value[i]);
+        }
       }
 
       return result;
     }
 
+    const getParent = (node: IInnerTreeNode): IInnerTreeNode => {
+      return data.value.find((item) => item.id === node.parentId);
+    }
+
     const getExpendedTree = (): ComputedRef<IInnerTreeNode[]> => {
       return computed(() => {
         let excludeNodes: IInnerTreeNode[] = [];
@@ -43,25 +54,26 @@ export default function(options?){
       });
     }
 
-    const getIndex = (node: ITreeNode): number => {
+    const getIndex = (node: IInnerTreeNode): number => {
       return data.value.findIndex((item) => item.id === node.id);
     }
 
-    const getNode = (node: ITreeNode): IInnerTreeNode => {
+    const getNode = (node: IInnerTreeNode): IInnerTreeNode => {
       return data.value.find((item) => item.id === node.id);
     }
 
     const setNodeValue = (node: IInnerTreeNode, key: keyof IInnerTreeNode, value: valueof<IInnerTreeNode>): void => {
       data.value[getIndex(node)][key] = value;
     }
 
-    const setTree = (newTree: ITreeNode[]): void => {
+    const setTree = (newTree: IInnerTreeNode[]): void => {
       data.value = generateInnerTree(newTree);
     }
 
     return {
       getLevel,
       getChildren,
+      getParent,
       getExpendedTree,
       getIndex,
       getNode,

diff --git a/packages/devui-vue/devui/tree/src/core/use-tree-types.ts b/packages/devui-vue/devui/tree/src/core/use-tree-types.ts
@@ -26,13 +26,17 @@ export interface IInnerTreeNode extends ITreeNode {
 export type valueof<T> = T[keyof T];
 
 export interface IUseCore {
-  getLevel: (node: ITreeNode) => number;
-  getChildren: (node: ITreeNode, expanded: boolean) => IInnerTreeNode[];
+  getLevel: (node: IInnerTreeNode) => number;
+  getChildren: (node: IInnerTreeNode, config: {
+    expanded: boolean;
+    recursive: boolean;
+  }) => IInnerTreeNode[];
+  getParent: (node: IInnerTreeNode) => IInnerTreeNode;
   getExpendedTree: () => ComputedRef<IInnerTreeNode[]>;
-  getIndex: (node: ITreeNode) => number;
-  getNode: (node: ITreeNode) => IInnerTreeNode;
+  getIndex: (node: IInnerTreeNode) => number;
+  getNode: (node: IInnerTreeNode) => IInnerTreeNode;
   setNodeValue: (node: IInnerTreeNode, key: keyof IInnerTreeNode, value: valueof<IInnerTreeNode>) => void;
-  setTree: (newTree: ITreeNode[]) => void;
+  setTree: (newTree: IInnerTreeNode[]) => void;
 }
 
 export interface IUseCheck {

diff --git a/packages/devui-vue/docs/components/tree/index.md b/packages/devui-vue/docs/components/tree/index.md
@@ -66,7 +66,8 @@ export default defineComponent({
           {
             label: 'Parent node 1-1',
             children: [
-              { label: 'Leaf node 1-1-1' }
+              { label: 'Leaf node 1-1-1' },
+              { label: 'Leaf node 1-1-2' }
             ]
           },
           { label: 'Leaf node 1-2' }