From f52cde33c049da3f140916eb46a0535bc4f3fb9d Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Mon, 18 Apr 2022 19:51:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(tree):=20=E5=A2=9E=E5=8A=A0checkStrategy?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E5=8B=BE=E9=80=89?=
 =?UTF-8?q?=E7=AD=96=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/tree/src/components/tree-node.tsx   |  7 ++-
 .../devui/tree/src/core/use-check.ts          | 22 +++++++---
 .../devui-vue/devui/tree/src/core/use-core.ts |  4 +-
 .../devui-vue/devui/tree/src/new-tree.tsx     | 14 ++++--
 .../devui-vue/docs/components/tree/index.md   | 44 +++++++++++++++++--
 5 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/packages/devui-vue/devui/tree/src/components/tree-node.tsx b/packages/devui-vue/devui/tree/src/components/tree-node.tsx
index c246f36f85..caf4c33efe 100644
--- a/packages/devui-vue/devui/tree/src/components/tree-node.tsx
+++ b/packages/devui-vue/devui/tree/src/components/tree-node.tsx
@@ -33,7 +33,12 @@ export default defineComponent({
     const halfChecked = computed(() => {
       const children = getChildren(data.value);
       const checkedChildren = children.filter((item: IInnerTreeNode) => item.checked);
-      return checkedChildren.length > 0 && checkedChildren.length < children.length;
+
+      if (['upward', 'both'].includes(check.value)) {
+        return checkedChildren.length > 0 && checkedChildren.length < children.length;
+      } else {
+        return false;
+      }
     });
 
     return () => {
diff --git a/packages/devui-vue/devui/tree/src/core/use-check.ts b/packages/devui-vue/devui/tree/src/core/use-check.ts
index f334a8f46c..3a0008dccf 100644
--- a/packages/devui-vue/devui/tree/src/core/use-check.ts
+++ b/packages/devui-vue/devui/tree/src/core/use-check.ts
@@ -1,9 +1,11 @@
-import { Ref } from 'vue';
+import { ref, Ref } from 'vue';
 import { CheckStrategy, IInnerTreeNode, IUseCore } from './use-tree-types';
 
-export default function(options?: {
+export default function(options?: Ref<{
   checkStrategy: CheckStrategy
-}) {
+}> = ref({
+  checkStrategy: 'both'
+})) {
   return function useCheck(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
     const { setNodeValue, getNode, getChildren, getParent } = core;
 
@@ -45,13 +47,21 @@ export default function(options?: {
     const toggleCheckNode = (node: IInnerTreeNode): void => {
       if (getNode(node).checked) {
         setNodeValue(node, 'checked', false);
-        getChildren(node).forEach(item => setNodeValue(item, 'checked', false));
+
+        if (['downward', 'both'].includes(options.value.checkStrategy)) {
+          getChildren(node).forEach(item => setNodeValue(item, 'checked', false));
+        }
       } else {
         setNodeValue(node, 'checked', true);
-        getChildren(node).forEach(item => setNodeValue(item, 'checked', true));
+
+        if (['downward', 'both'].includes(options.value.checkStrategy)) {
+          getChildren(node).forEach(item => setNodeValue(item, 'checked', true));
+        }
       }
 
-      controlParentNodeChecked(node);
+      if (['upward', 'both'].includes(options.value.checkStrategy)) {
+        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
index d43899c909..4dfd22119c 100644
--- a/packages/devui-vue/devui/tree/src/core/use-core.ts
+++ b/packages/devui-vue/devui/tree/src/core/use-core.ts
@@ -1,5 +1,5 @@
 import { computed, ComputedRef, Ref } from 'vue';
-import { IInnerTreeNode, IUseCore, valueof } from './use-tree-types';
+import { IInnerTreeNode, ITreeNode, IUseCore, valueof } from './use-tree-types';
 import { generateInnerTree } from './utils';
 
 export default function(options?){
@@ -66,7 +66,7 @@ export default function(options?){
       data.value[getIndex(node)][key] = value;
     }
 
-    const setTree = (newTree: IInnerTreeNode[]): void => {
+    const setTree = (newTree: ITreeNode[]): void => {
       data.value = generateInnerTree(newTree);
     }
 
diff --git a/packages/devui-vue/devui/tree/src/new-tree.tsx b/packages/devui-vue/devui/tree/src/new-tree.tsx
index fd368be3e1..6fa13305a8 100644
--- a/packages/devui-vue/devui/tree/src/new-tree.tsx
+++ b/packages/devui-vue/devui/tree/src/new-tree.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, provide, renderSlot, toRefs, useSlots, watch } from 'vue';
+import { defineComponent, provide, ref, renderSlot, toRefs, useSlots, watch } from 'vue';
 import DTreeNode from './components/tree-node';
 import DTreeNodeContent from './components/tree-node-content';
 import DTreeNodeToggle from './components/tree-node-toggle';
@@ -21,8 +21,16 @@ export default defineComponent({
       useOperate(),
     ];
 
-    if (check) {
-      userPlugins.push(useCheck());
+    const checkOptions = ref({
+      checkStrategy: check.value || 'both'
+    });
+
+    watch(check, (newVal) => {
+      checkOptions.value.checkStrategy = newVal;
+    })
+
+    if (check.value) {
+      userPlugins.push(useCheck(checkOptions));
     }
 
     const treeFactory = useTree(
diff --git a/packages/devui-vue/docs/components/tree/index.md b/packages/devui-vue/docs/components/tree/index.md
index 939351c774..f76032f766 100644
--- a/packages/devui-vue/docs/components/tree/index.md
+++ b/packages/devui-vue/docs/components/tree/index.md
@@ -51,14 +51,24 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-new-tree :data="data" check></d-new-tree>
+  <div class="flex flex-row" style="height: 28px;">
+    <label class="flex items-center mr-xl"><span class="inline-block mr-xs">开启勾选</span><d-switch v-model:checked="openCheck"></d-switch></label>
+    <d-radio-group v-if="openCheck" v-model="currentStrategy" direction="row">
+      <d-radio v-for="strategy of checkStrategy" :key="strategy" :value="strategy">{{ strategy }}</d-radio>
+    </d-radio-group>
+  </div>
+  <d-new-tree :data="data" :check="currentStrategy"></d-new-tree>
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 
 export default defineComponent({
   setup() {
+    const openCheck = ref(true);
+    const checkStrategy = ref(['both', 'downward', 'upward', 'none']);
+    const currentStrategy = ref('both');
+
     const data = ref([
       {
         label: 'Parent node 1',
@@ -75,9 +85,37 @@ export default defineComponent({
       },
       { label: 'Leaf node 2' }
     ]);
+
+    watch(openCheck, (newVal) => {
+      if (newVal === false) {
+        currentStrategy.value = false;
+      } else {
+        currentStrategy.value = 'both';
+
+        data.value = [
+          {
+            label: 'Parent node 1',
+            children: [
+              {
+                label: 'Parent node 1-1',
+                children: [
+                  { label: 'Leaf node 1-1-1' },
+                  { label: 'Leaf node 1-1-2' }
+                ]
+              },
+              { label: 'Leaf node 1-2' }
+            ]
+          },
+          { label: 'Leaf node 2' }
+        ];
+      }
+    });
     
     return {
-      data
+      data,
+      openCheck,
+      checkStrategy,
+      currentStrategy,
     }
   }
 })