feat(tree): add showChecked and wip workspace

docs/docs/zh-CN/components/tree.md

@@ -5,10 +5,15 @@
     :data="data"
     :onlyIconControl="iconCtrl"
     :showLine="showLine"
+    :showCheckbox="showCheckbox"
     @node-click="handleClick"
   >
   </lay-tree>
   <br/>
+  是否可开启选择框：
+  <br/>
+  <lay-switch v-model="showCheckbox"></lay-switch>
+  <br/>
   只能通过节点左侧图标来展开收缩：
   <br/>
   <lay-switch v-model="iconCtrl"></lay-switch>
@@ -25,7 +30,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref } from 'vue';
 
 const data = ref([
   {
@@ -215,11 +220,12 @@ const data = ref([
       },
     ],
   },
-])
+]);
 
-const iconCtrl = ref(false)
-const showLine = ref(true)
-const clickNode = ref(null)
+const iconCtrl = ref(false);
+const showLine = ref(true);
+const clickNode = ref(null);
+const showCheckbox = ref(true);
 
 function handleClick(node) {
  clickNode.value = node

src/module/tree/TreeEntity.vue

@@ -5,19 +5,23 @@ export default {
 </script>
 <script setup lang="ts">
 import LayIcon from '../icon'
+import LayCheckbox from '../checkbox'
 import { TreeNode } from '/@src/module/tree/tree.type'
 
 type EventType = 'icon' | 'node'
 
 interface TreeEntityProps {
   node: TreeNode
+  showCheckbox?: boolean
 }
 
 interface EmitEvent {
   (e: 'node-click', node: TreeNode, type: EventType): void
 }
 
-const props = defineProps<TreeEntityProps>()
+const props = withDefaults(defineProps<TreeEntityProps>(), {
+  showCheckbox: false,
+})
 const emit = defineEmits<EmitEvent>()
 
 /**
@@ -45,7 +49,7 @@ const nodeIconType = (node: TreeNode): string => {
 }
 
 /**
- * Node Icon Click
+ * 节点Icon点击
  * @param node
  */
 function handleIconClick(node: TreeNode) {
@@ -53,7 +57,7 @@ function handleIconClick(node: TreeNode) {
 }
 
 /**
- * Node Font Click
+ * 节点点击
  * @param node
  */
 function handleNodeClick(node: TreeNode) {
@@ -61,12 +65,15 @@ function handleNodeClick(node: TreeNode) {
 }
 
 /**
- * 递归事件
+ * 递归emit事件
  * @param node
+ * @param type
  */
 function innerClick(node: TreeNode, type: EventType) {
   emit('node-click', node, type)
 }
+
+console.log(props.showCheckbox)
 </script>
 <template>
   <template v-if="node.children && node.children.length > 0">
@@ -85,11 +92,22 @@ function innerClick(node: TreeNode, type: EventType) {
               @click.prevent.stop="handleIconClick(node, 'icon')"
             />
           </span>
+          <LayCheckbox
+            v-if="showCheckbox"
+            name="name"
+            skin="primary"
+            label="1"
+            :checked="true"
+          >
+            {{ node.title }}
+          </LayCheckbox>
           <span
+            v-else
             class="layui-tree-txt"
             @click.prevent.stop="handleNodeClick(node, 'node')"
-            >{{ node.title }}</span
           >
+            {{ node.title }}
+          </span>
         </div>
       </div>
       <div
@@ -102,6 +120,7 @@ function innerClick(node: TreeNode, type: EventType) {
           :key="index"
           :node="item"
           @node-click="innerClick"
+          :showCheckbox="showCheckbox"
         />
       </div>
     </div>
@@ -121,11 +140,22 @@ function innerClick(node: TreeNode, type: EventType) {
               @click.prevent.stop="handleIconClick(node, 'icon')"
             />
           </span>
+          <LayCheckbox
+            v-if="showCheckbox"
+            name="name"
+            skin="primary"
+            label="1"
+            :checked="true"
+          >
+            {{ node.title }}
+          </LayCheckbox>
           <span
+            v-else
             class="layui-tree-txt"
             @click.prevent.stop="handleNodeClick(node, 'node')"
-            >{{ node.title }}</span
           >
+            {{ node.title }}
+          </span>
         </div>
       </div>
     </div>

src/module/tree/index.vue

@@ -57,7 +57,7 @@ interface TreeProps {
    * 选中的节点
    */
   // eslint-disable-next-line vue/require-default-prop
-  checkedKeys?: (string | number)[]
+  checkedKeys?: NonNullable<(string | number)[]>
   /**
    * 展开的节点
    */
@@ -148,7 +148,8 @@ interface TreeEmits {
   //  * @param treeNode
   //  */
   // (e: 'node-operate', treeNode: EmitData): void
-  (e: 'update:spreadKeys', spreadKeys: string[]): void
+  (e: 'update:spreadKeys', spreadKeys: (string | number)[]): void
+  (e: 'update:checkedKeys', checkedKeys: (string | number)[]): void
 }
 
 const props = withDefaults(defineProps<TreeProps>(), {
@@ -176,7 +177,7 @@ function handleNodeClick(node: TreeNode, type: 'node' | 'icon') {
   }
   // icon 点击不emit出事件
   const emitNode = getEmitNode(props.data!, node)
-  type !== 'icon' &&  emit('node-click', { data: emitNode! })
+  type !== 'icon' && emit('node-click', { data: emitNode! })
 }
 </script>
 <script lang="ts">
@@ -191,6 +192,7 @@ export default {
       :key="node.id || index"
       :node="node"
       @node-click="handleNodeClick"
+      :showCheckbox="showCheckbox"
     />
   </div>
 </template>

src/module/tree/tree.type.ts

@@ -63,7 +63,7 @@ export declare interface TreeProps {
   /**
    * 选中的节点
    */
-  checkedKeys?: (string | number)[]
+  checkedKeys?: NonNullable<(string | number)[]>
   /**
    * 展开的节点
    */
@@ -155,6 +155,7 @@ export declare interface TreeEmits {
    * @param spreadKeys
    */
   (e: 'update:spreadKeys', spreadKeys: (string | number)[]): void
+  (e: 'update:checkedKeys', checkedKeys: (string | number)[]): void
 }
 
 export interface TreeExpose {
@@ -182,7 +183,8 @@ export type UseTreeData = (
   props: TreeProps,
   emit: TreeEmits
 ) => {
-  innerTreeData: Ref<UnwrapRef<TreeData[]>>
+  innerTreeData: Ref<UnwrapRef<TreeNode[]>>
+  checkedKeys: WritableComputedRef<(string | number)[]>
   spreadKeys: WritableComputedRef<(string | number)[]>
   treeWrapperClass: ComputedRef<Recordable>
   updateInnerTreeData: (treeData: TreeData[], node: TreeData) => void

src/module/tree/treeHelper.ts

@@ -1,14 +1,17 @@
 import { TreeData, TreeNode } from '/@src/module/tree/tree.type'
 import { Nullable } from '/@src/module/type'
+import { WritableComputedRef } from 'vue'
 
 /**
  * 添加父级parentId
  * @param data
  * @param parentId
+ * @param checkedKeys
  */
 export const generatorTreeData = (
   data: TreeData[] | TreeNode[],
-  parentId: TreeNode['parentId'] = ''
+  parentId: TreeNode['parentId'] = '',
+  checkedKeys: WritableComputedRef<(string | number)[]>
 ): TreeNode[] => {
   const innerTreeData: TreeNode[] = []
   const len = data.length
@@ -20,7 +23,7 @@ export const generatorTreeData = (
       spread: item.spread || false,
     }
     if (item.children && item.children.length > 0) {
-      inner.children = generatorTreeData(item.children, item.id)
+      inner.children = generatorTreeData(item.children, item.id, checkedKeys)
     }
     innerTreeData.push(inner as TreeNode)
   }
@@ -62,9 +65,13 @@ export const setParentNode = (
 /**
  * 初始化内部tree结构
  * @param data
+ * @param checkedKeys
  */
-export const initialTreeData = (data: TreeData[]): TreeNode[] => {
-  const innerTree = generatorTreeData(data)
+export const initialTreeData = (
+  data: TreeData[],
+  checkedKeys: WritableComputedRef<(string | number)[]>
+): TreeNode[] => {
+  const innerTree = generatorTreeData(data, '', checkedKeys)
   setNextSiblings(innerTree)
   setParentNode(innerTree)
   return innerTree

src/module/tree/useTreeData.ts

@@ -1,4 +1,4 @@
-import { TreeData, UseTreeData } from '/@src/module/tree/tree.type'
+import { TreeData, TreeNode, UseTreeData } from '/@src/module/tree/tree.type'
 import { computed, ref, unref, watch } from 'vue'
 import {
   getTreeSpreadKeys,
@@ -20,15 +20,24 @@ export const useTreeData: UseTreeData = (props, emit) => {
     },
   })
 
+  const checkedKeys = computed({
+    get: () => {
+      return props.checkedKeys!
+    },
+    set: (value: (string | number)[]) => {
+      emit('update:checkedKeys', value)
+    },
+  })
+
   /**
    * 渲染的data
    */
-  const innerTreeData = ref<TreeData[]>([])
+  const innerTreeData = ref<TreeNode[]>([])
   watch(
     () => props.data,
     (treeData) => {
       if (treeData) {
-        innerTreeData.value = initialTreeData(treeData)
+        innerTreeData.value = initialTreeData(treeData, checkedKeys)
       }
     },
     { immediate: true, deep: true }
@@ -60,6 +69,7 @@ export const useTreeData: UseTreeData = (props, emit) => {
 
   return {
     spreadKeys,
+    checkedKeys,
     innerTreeData,
     updateInnerTreeData,
     treeWrapperClass,