From d7abf780c4d6dcffd87f72ac7f7f11545c280aff Mon Sep 17 00:00:00 2001
From: gxuud <igaoxian@foxmail.com>
Date: Mon, 18 Oct 2021 01:16:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=AF=E5=8B=BE=E9=80=89=E6=A0=91?=
 =?UTF-8?q?=E3=80=81=E6=8E=A7=E5=88=B6=E7=88=B6=E5=AD=90check=E5=85=B3?=
 =?UTF-8?q?=E7=B3=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/tree/src/config.ts      |   9 ++
 devui/tree/src/tree-types.ts  |  19 +++
 devui/tree/src/tree.tsx       | 119 -----------------
 docs/components/tree/index.md | 233 ++++++++++++++++++++++++++++++++++
 4 files changed, 261 insertions(+), 119 deletions(-)
 create mode 100644 devui/tree/src/config.ts
 delete mode 100644 devui/tree/src/tree.tsx

diff --git a/devui/tree/src/config.ts b/devui/tree/src/config.ts
new file mode 100644
index 00000000..dbd834d3
--- /dev/null
+++ b/devui/tree/src/config.ts
@@ -0,0 +1,9 @@
+export const CHECK_CONFIG = {
+  none: {},
+  half: {
+    halfchecked: true
+  },
+  select: {
+    checked: true,
+  },
+}
diff --git a/devui/tree/src/tree-types.ts b/devui/tree/src/tree-types.ts
index cec8a0d9..93a5c120 100644
--- a/devui/tree/src/tree-types.ts
+++ b/devui/tree/src/tree-types.ts
@@ -9,14 +9,33 @@ export interface TreeItem {
   children?: TreeData
   [key: string]: any
 }
+export interface SelectType {
+  [key: string]: 'none' | 'half' | 'select'
+}
+
+export interface ReverseTree {
+  id?: string
+  children?: string[]
+  parent?: ReverseTree 
+}
 
 export type TreeData = Array<TreeItem>
 
+export type CheckableRelationType = 'upward' | 'downward' | 'both' | 'none'
+
 export const treeProps = {
   data: {
     type: Array as PropType<TreeData>,
     required: true,
     default: () => [],
+  },
+  checkable: {
+    type: Boolean,
+    default: false
+  },
+  checkableRelation: {
+    type: String as () => CheckableRelationType,
+    default: 'none',
   }
 } as const
 
diff --git a/devui/tree/src/tree.tsx b/devui/tree/src/tree.tsx
deleted file mode 100644
index 0ea203d1..00000000
--- a/devui/tree/src/tree.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { defineComponent, toRefs, provide } from 'vue'
-import { treeProps, TreeProps, TreeItem, TreeRootType } from './tree-types'
-import { flatten, precheckTree } from './util'
-import Loading from '../../loading/src/service'
-import useToggle from './composables/use-toggle'
-import useMergeNode from './composables/use-merge-node'
-import useHighlightNode from './composables/use-highlight'
-import useLazy from './composables/use-lazy'
-import IconOpen from './assets/open.svg'
-import IconClose from './assets/close.svg'
-import NodeContent from './tree-node-content'
-import './tree.scss'
-
-export default defineComponent({
-  name: 'DTree',
-  props: treeProps,
-  emits: [],
-  setup(props: TreeProps, ctx) {
-    const { data } = toRefs({ ...props, data: precheckTree(props.data) })
-    const flatData = flatten(data.value)
-
-    const { mergeData } = useMergeNode(data.value)
-    const { openedData, toggle } = useToggle(mergeData.value)
-    const { nodeClassNameReflect, handleInitNodeClassNameReflect, handleClickOnNode } = useHighlightNode()
-    const { lazyNodesReflect, handleInitLazyNodeReflect, getLazyData } = useLazy()
-
-    provide<TreeRootType>('treeRoot', { ctx, props });
-    const Indent = () => {
-      return <span style="display: inline-block; width: 16px; height: 16px;"></span>
-    }
-    const renderNode = (item: TreeItem) => {
-      const { id = '', label, disabled, open, isParent, level, children } = item
-      handleInitNodeClassNameReflect(disabled, id)
-      handleInitLazyNodeReflect(item, {
-        id,
-        onGetNodeData: async () => {
-          return new Promise((resolve) => {
-            setTimeout(() => {
-              resolve([
-                {
-                  id: `It is a test Node-1 ID = ${id}`,
-                  label: `It is a test Node-1 ID = ${id}`,
-                  level: item.level + 1
-                }, {
-                  id: `It is a test Node-2 ID = ${id}`,
-                  label: `It is a test Node-2 ID = ${id}`,
-                  level: item.level + 1
-                }
-              ])
-            }, 4000)
-          })
-        },
-        renderLoading: (id) => {
-          return Loading.open({
-            target: document.getElementById(id),
-            message: '加载中...',
-            positionType: 'relative',
-            zIndex: 1,
-          })
-        }
-      })
-      const renderNodeWithIcon = (item: TreeItem) => {
-        const handleClick = async (target: MouseEvent) => {
-          if (item.isParent) {
-            item.children = await getLazyData(id)  // item 按引用传递
-          }
-          return toggle(target, item)
-        }
-        return (
-          isParent || children
-          ? open
-            ? <IconOpen class="mr-xs" onClick={handleClick} />
-            : <IconClose class="mr-xs" onClick={handleClick} />
-          : <Indent />
-        )
-      }
-      return (
-        <div
-          class={['devui-tree-node', open && 'devui-tree-node__open']}
-          style={{ paddingLeft: `${24 * (level - 1)}px` }}
-        >
-          <div
-            class={`devui-tree-node__content ${nodeClassNameReflect.value[id]}`}
-            onClick={() => handleClickOnNode(id)}
-          >
-            <div class="devui-tree-node__content--value-wrapper">
-              {renderNodeWithIcon(item)}
-              <NodeContent node={item}/>
-              {item.isParent && <div class='devui-tree-node_loading' id={lazyNodesReflect.value[id].loadingTargetId} />}
-            </div>
-          </div>
-        </div>
-      )
-    }
-
-    const renderTree = (tree) => {
-      return tree.map(item => {
-        if (!item.children) {
-          return renderNode(item)
-        } else {
-          return (
-            <>
-              {renderNode(item)}
-              {renderTree(item.children)}
-            </>
-          )
-        }
-      })
-    }
-    return () => {
-      return (
-        <div class="devui-tree">
-          {/* { renderTree(data.value) } */}
-          { openedData.value.map(item => renderNode(item)) }
-        </div>
-      )
-    }
-  }
-})
diff --git a/docs/components/tree/index.md b/docs/components/tree/index.md
index 3599119a..3251f147 100644
--- a/docs/components/tree/index.md
+++ b/docs/components/tree/index.md
@@ -304,6 +304,7 @@ export default defineComponent({
     </div>
     <d-tree :data="data">
       <template #default="{ node }">
+        <span class="my-icon-next"></span>
         <span :class="[node?.data?.type && 'my-icon', node?.data?.type]" ></span>
         <span class="op-title">{{ node.label }}</span>
         <span class="op-status"></span>
@@ -455,6 +456,9 @@ export default defineComponent({
   background-color: #aaaaaa;
   border: 1px #999999 solid;
 }
+.my-icon-next {
+  margin-left: 8px;
+}
 
 .op-title {
   display: flex;
@@ -506,3 +510,232 @@ export default defineComponent({
 </style>
 ```
 :::
+
+### 可勾选树
+
+:::demo 可以进行勾选的树。
+
+```vue
+<template>
+  <d-tree :data="data" :checkable="true" ></d-tree>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const data = ref([
+      {
+        label: "parent node 1",
+      },
+      {
+        label: "parent node 2",
+        open: true,
+        children: [
+          {
+            label: "leaf node 2-1",
+            children: [
+              {
+                label: "leaf node 2-1-1",
+              },
+              {
+                label: "leaf node 2-1-2",
+              },
+            ],
+          },
+          {
+            label: "leaf node 2-2",
+            open: true,
+            children: [
+              {
+                label: "leaf node 2-2-1",
+                disabled: true,
+                isChecked: true,
+              },
+              {
+                label: "leaf node 2-2-2",
+                disableSelect: true,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "parent node 3",
+        disableToggle: true,
+        children: [
+          {
+            label: "leaf node 3-1",
+          },
+          {
+            label: "leaf node 3-2",
+          },
+        ],
+      },
+      {
+        label: "parent node 4",
+        children: [
+          {
+            label: "leaf node 4-1",
+          },
+          {
+            label: "leaf node 4-2",
+          },
+        ],
+      },
+      {
+        label: "parent node 5",
+        children: [
+          {
+            label: "leaf node 5-1",
+          },
+          {
+            label: "leaf node 5-2",
+          },
+        ],
+      },
+    ]);
+    
+    return {
+      data,
+    }
+  }
+})
+</script>
+```
+:::
+
+### 控制父子check关系
+
+:::demo 通过 checkableRelation 控制check时父子节点的表现。
+
+```vue
+<template>
+  <h6><p>checkableRelation = "both"</p></h6>
+  <d-tree :data="data" :checkable="true" checkableRelation="both" ></d-tree>
+  <h6><p>checkableRelation = "upward"</p></h6>
+  <d-tree :data="data" :checkable="true" checkableRelation="upward" ></d-tree>
+  <h6><p>checkableRelation = "downward"</p></h6>
+  <d-tree :data="data" :checkable="true" checkableRelation="downward" ></d-tree>
+  <h6><p>checkableRelation = "none"</p></h6>
+  <d-tree :data="data" :checkable="true" checkableRelation="none" ></d-tree>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const data = ref([
+      {
+        label: 'parent node 1 - expanded',
+        open: true,
+        children: [
+          {
+            label: 'parent node 11 - folded',
+            children: [
+              {
+                label: 'leaf node 111',
+              },
+              {
+                label: 'leaf node 112',
+              },
+              {
+                label: 'leaf node 113',
+              },
+              {
+                label: 'leaf node 114',
+              },
+            ],
+          },
+          {
+            label: 'parent node 12 - folded',
+            children: [
+              {
+                label: 'leaf node 121',
+              },
+              {
+                label: 'leaf node 122',
+              },
+              {
+                label: 'leaf node 123',
+              },
+              {
+                label: 'leaf node 124',
+              },
+            ],
+          },
+          {
+            label: 'parent node 13 - without children',
+            isparent: true,
+          },
+        ],
+      },
+      {
+        label: 'parent node 2 - folded',
+        children: [
+          {
+            label: 'parent node 21 - expanded',
+            open: true,
+            children: [
+              {
+                label: 'leaf node 211',
+              },
+              {
+                label: 'leaf node 212',
+              },
+              {
+                label: 'leaf node 213',
+              },
+              {
+                label: 'leaf node 214',
+              },
+            ],
+          },
+          {
+            label: 'parent node 22 - folded',
+            children: [
+              {
+                label: 'leaf node 221',
+              },
+              {
+                label: 'leaf node 222',
+              },
+              {
+                label: 'leaf node 223',
+              },
+              {
+                label: 'leaf node 224',
+              },
+            ],
+          },
+          {
+            label: 'parent node 23 - folded',
+            children: [
+              {
+                label: 'leaf node 231',
+              },
+              {
+                label: 'leaf node 232',
+              },
+              {
+                label: 'leaf node 233',
+              },
+              {
+                label: 'leaf node 234',
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+    
+    return {
+      data,
+    }
+  }
+})
+</script>
+```
+:::
\ No newline at end of file
-- 
Gitee