refactor(tree): 树形组件重构优化暂存

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

@@ -114,7 +114,7 @@ export default {
 
 :::
 
-::: field tab attributes 
+::: field tab attributes
 
 :::
 
@@ -124,11 +124,11 @@ export default {
 | type    | 主题样式 | --             |
 | allow-close | 允许关闭 | `true` `false` |
 
-::: field tab events  
+::: field tab events
 
 :::
 
 | Name   | Description | Accepted Params  |
-| -------- | ---- | ----------------------- | 
-| change       | 选中切换 | --  | 
-| close     | 关闭事件 | --  | 
+| -------- | ---- | ----------------------- |
+| change       | 选中切换 | --  |
+| close     | 关闭事件 | --  |

src/module/checkbox/index.vue

@@ -9,7 +9,7 @@
       }"
       :lay-skin="skin"
     >
-      <span><slot /></span>
+      <span v-if="$slots?.default"><slot /></span>
       <i class="layui-icon layui-icon-ok" />
     </div>
   </span>

src/module/tree/new-tree/TreeNode.vue

@@ -44,7 +44,7 @@ const emit = defineEmits<TreeNodeEmits>()
 function renderLineShort(node: TreeData) {
   return (
     !node.hasNextSibling &&
-    node.parentKey &&
+    node.parentNode &&
     // 外层最后一个
     (!node.parentNode.hasNextSibling ||
       //上一层父级有延伸线
@@ -84,30 +84,31 @@ function setChildrenChecked (checked: boolean, nodes: TreeData[]) {
   }
 }
 
-async function setParentChecked (checked: boolean, parent: TreeData) {
+function 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) {
-    await setParentChecked(checked, parent.parentNode)
-    // todo
-    await nextTick()
-    const pChild = parent.children
-    const pChildChecked = pChild.some(c => c.isChecked.value)
-    console.log(pChildChecked)
-    if (pChildChecked) {
-      parent.isChecked.value = true
-    }
+    setParentChecked(checked, parent.parentNode)
   }
 }
 
 function handleChange(checked: boolean, node: TreeData) {
   node.isChecked.value = checked
+  // 处理上级
+  if (node.parentNode) {
+    setParentChecked(checked, node.parentNode)
+  }
+  // 处理下级
   if (node.children) {
     setChildrenChecked(checked, node.children)
   }
-  setParentChecked(checked, node.parentNode)
 }
 
 function handleIconClick (node: TreeData) {
@@ -141,11 +142,17 @@ function handleIconClick (node: TreeData) {
         <LayCheckbox
           v-if="showCheckbox"
           v-model:checked="node.isChecked.value"
+          :disabled="node.isDisabled.value"
           skin="primary"
           @change="({ checked }) => { handleChange(checked, node) }"
         >
         </LayCheckbox>
-        <span class="layui-tree-txt">
+        <span
+          :class="{
+            'layui-tree-txt': true,
+            'layui-disabled': node.isDisabled.value,
+          }"
+        >
           {{ node.title }}
         </span>
       </div>

src/module/tree/new-tree/tree.ts

@@ -1,9 +1,3 @@
-/*
- * @Date: 2021-10-16 02:50:17
- * @LastEditors: 落小梅
- * @LastEditTime: 2021-10-16 13:07:14
- * @FilePath: \layui-vue\src\module\tree\new-tree\tree.ts
- */
 import {
   OriginalTreeData,
   StringOrNumber,
@@ -61,7 +55,10 @@ function getNode(
   const nodeDisabled = !!Reflect.get(origin, 'disabled')
   const nodeIsLeaf = !!Reflect.get(origin, 'spread')
 
-  // const parent = nodeMap.get(parentKey)
+  const parent = nodeMap.get(parentKey)
+  if (parent) {
+    console.log(parent.isChecked.value);
+  }
 
   // console.log((parent && parent.isChecked.value) || checkedKeys.includes(nodeKey))