[暂存]: 暂存工作区

src/module/tree/TreeEntity.vue

@@ -0,0 +1,107 @@
+<script lang="ts">
+export default {
+  name: 'LayTreeEntity',
+}
+</script>
+<script setup lang="ts">
+import { computed, unref, VNode, VNodeChild } from 'vue'
+import LayIcon from '../icon'
+
+interface TreeData {
+  /**
+   * 节点唯一索引值，用于对指定节点进行各类操作
+   */
+  id: string | number
+  /**
+   * 节点标题
+   */
+  title: string | (() => string)
+  /**
+   * 节点字段名
+   */
+  field: string | (() => string)
+  /**
+   * 子节点。支持设定选项同父节点
+   */
+  children: TreeData[]
+  /**
+   * 点击节点弹出新窗口对应的 url。需开启 isJump 参数
+   * 废弃，通过 on-click事件用户控制
+   */
+  href: string | URL
+  /**
+   * 节点是否初始展开，默认 false
+   * 废弃：设置 v-model:spreadKeys
+   */
+  spread: boolean
+  /**
+   * 节点是否初始为选中状态（如果开启复选框的话），默认 false
+   * 废弃：设置 v-model:checkedKeys
+   */
+  checked: boolean
+  /**
+   * 节点是否为禁用状态。默认 false
+   */
+  disabled: boolean
+}
+
+interface TreeEntityProps {
+  node: TreeData
+  id: string | number
+}
+
+const props = defineProps<TreeEntityProps>()
+</script>
+<template>
+  <template v-if="node.children && node.children.length > 0">
+    <div
+      class="layui-tree-set"
+      :class="{
+        // 'layui-tree-setLineShort': (index + 1) === data.length,
+        'layui-tree-setLineShort': false,
+        'layui-tree-setHide': node._isRoot,
+      }"
+    >
+      <!--    {{index}}, {{ data.length }}-->
+      <div class="layui-tree-entry">
+        <div class="layui-tree-main">
+          <span
+            class="layui-tree-iconClick layui-tree-icon"
+          >
+            <LayIcon
+              type="layui-icon-subtraction"
+            ></LayIcon>
+          </span>
+          <span class="layui-tree-txt">{{ node.title }}---{{node._hasChild}}</span>
+        </div>
+      </div>
+      <div
+        class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
+        style="display: block"
+      >
+        <LayTreeEntity
+          v-for="(item, index) in node.children"
+          :key="index"
+          :node="item"
+          :id="item.id"
+        ></LayTreeEntity>
+      </div>
+    </div>
+  </template>
+  <template v-else>
+    <div class="layui-tree-set" :class="{'layui-tree-setLineShort': false}"><!-- :class="{'layui-tree-setLineShort': isLast}"-->
+      <div class="layui-tree-entry">
+        <div class="layui-tree-main">
+          <span
+            class="layui-tree-iconClick">
+            <LayIcon
+              type="layui-icon-file"
+            ></LayIcon>
+          </span>
+          <span class="layui-tree-txt">{{ node.title }}, {{node._hasChild}},{{node._parentExtend}}</span>
+        </div>
+      </div>
+    </div>
+  </template>
+</template>
+<style scoped lang="less"></style>

src/module/tree/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { VNode, VNodeChild } from 'vue'
+import { computed, unref, VNode, VNodeChild } from 'vue'
+import TreeEntity from './TreeEntity.vue'
 
 interface TreeData {
   /**
@@ -20,14 +21,17 @@ interface TreeData {
   children: TreeData[]
   /**
    * 点击节点弹出新窗口对应的 url。需开启 isJump 参数
+   * 废弃，通过 on-click事件用户控制
    */
   href: string | URL
   /**
    * 节点是否初始展开，默认 false
+   * 废弃：设置 v-model:spreadKeys
    */
   spread: boolean
   /**
    * 节点是否初始为选中状态（如果开启复选框的话），默认 false
+   * 废弃：设置 v-model:checkedKeys
    */
   checked: boolean
   /**
@@ -41,6 +45,18 @@ type EditAction = 'add' | 'update' | 'del'
 type EditType = boolean | EditAction[]
 
 interface TreeProps {
+  /**
+   * 指定唯一的id
+   */
+  id?: string
+  /**
+   * 选中的节点
+   */
+  checkedKeys?: any[]
+  /**
+   * 展开的节点
+   */
+  spreadKeys?: any[]
   /**
    * 数据源
    */
@@ -66,6 +82,7 @@ interface TreeProps {
   onlyIconControl?: boolean
   /**
    * 是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 link 参数（值为 url 格式
+   * 废弃：能过事件用户自行控制
    */
   isJump?: boolean
   /**
@@ -121,9 +138,10 @@ interface TreeEmits {
    * @param treeNode
    */
   (e: 'on-operate', treeNode: TreeNode): void
+  (e: 'update:checkedKeys', keys: any[]): void
+  (e: 'update:spreadKeys', keys: any[]): void
 }
 
-
 const props = withDefaults(defineProps<TreeProps>(), {
   showCheckbox: false,
   accordion: false,
@@ -133,7 +151,44 @@ const props = withDefaults(defineProps<TreeProps>(), {
   edit: true,
 })
 
-console.log(props)
+// tree wrapper style
+const treeWrapperClass = computed(() => {
+  const { showCheckbox, showLine } = unref(props)
+  return {
+    'layui-tree': true,
+    'layui-form': showCheckbox,
+    'layui-tree-line': showLine,
+  }
+})
+
+/**
+ * 按 layui的思路，这里改变数据
+ * @param data
+ * @param isRootNode
+ */
+function transformTreeData (data: TreeData[], parentExtend = false, isRootNode = true) {
+  data.forEach((item, index) => {
+    item._parentExtend = !parentExtend ? (index + 1) !== data.length: parentExtend
+    if(isRootNode) {
+      item._isRoot = true
+    }
+    if (item.children) {
+      item._hasChild = true
+      transformTreeData(item.children, item._parentExtend, false)
+    } else {
+      item._hasChild = false
+    }
+  })
+}
+
+const renderData = computed(() => {
+  const { data } = unref(props)
+  transformTreeData(data)
+  console.log(data)
+  return data
+})
+
+console.log(renderData)
 
 </script>
 <script lang="ts">
@@ -142,7 +197,15 @@ export default {
 }
 </script>
 <template>
-  <div id="test1" class="demo-tree demo-tree-box">
+  <div :class="treeWrapperClass">
+    <TreeEntity
+      v-for="(node) in renderData"
+      :key="node.id"
+      :id="node.id"
+      :node="node"
+    ></TreeEntity>
+  </div>
+  <hr />
   <div class="layui-tree layui-tree-line" lay-filter="LAY-tree-2">
     <div
       data-id="1"
@@ -180,10 +243,7 @@ export default {
                 </div>
               </div>
             </div>
-              <div
+            <div data-id="10002" class="layui-tree-set layui-tree-setLineShort">
-                data-id="10002"
-                class="layui-tree-set layui-tree-setLineShort"
-              >
               <div class="layui-tree-entry">
                 <div class="layui-tree-main">
                   <span class="layui-tree-iconClick"
@@ -251,16 +311,16 @@ export default {
     </div>
     <div
       data-id="3"
-        class="layui-tree-set layui-tree-setHide layui-tree-setLineShort"
+      class="layui-tree-set layui-tree-setHide layui-tree-setLineShort layui-tree-spread"
     >
       <div class="layui-tree-entry">
         <div class="layui-tree-main">
           <span class="layui-tree-iconClick layui-tree-icon"
-              ><i class="layui-icon layui-icon-addition"></i></span
+            ><i class="layui-icon layui-icon-subtraction"></i></span
           ><span class="layui-tree-txt">陕西</span>
         </div>
       </div>
-        <div class="layui-tree-pack layui-tree-lineExtend">
+      <div class="layui-tree-pack layui-tree-lineExtend" style="display: block">
         <div data-id="3000" class="layui-tree-set">
           <div class="layui-tree-entry">
             <div class="layui-tree-main">
@@ -282,6 +342,5 @@ export default {
       </div>
     </div>
   </div>
-  </div>
 </template>
 <style scoped></style>