From 1cc2e69ecbd4e74041c3c1211161402704a49aad Mon Sep 17 00:00:00 2001
From: 1549469775 <1549469775@qq.com>
Date: Fri, 1 Jul 2022 17:30:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=BA=9B=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/tree/node.vue    |  8 +++-
 packages/components/tree/tree.vue    | 75 +++++++++++++++++++++---------------
 packages/playground/src/dev/tree.vue |  5 ++-
 packages/princess-ui/package.json    |  2 +-
 4 files changed, 55 insertions(+), 35 deletions(-)

diff --git a/packages/components/tree/node.vue b/packages/components/tree/node.vue
index 9f2cda1..ec3579b 100644
--- a/packages/components/tree/node.vue
+++ b/packages/components/tree/node.vue
@@ -40,6 +40,7 @@
                     @onDrop="(e: INiuTreeKey, s?: ENiuTreeStatus)=>emit('onDrop', e, s)"
                     @onDragover="(e: INiuTreeKey)=>emit('onDragover', e)"
                     @onDragleave="(e: INiuTreeKey)=>emit('onDragleave', e)"
+                    @expand="(e: INiuTreeData)=>emit('expand', e)"
                     @click="(e: INiuTreeData)=>emit('click', e)"
                     :data-source-key="dataSourceKey"
                     :data="item"
@@ -60,7 +61,7 @@
 
 <script lang="ts" setup>
 import node from './node.vue'
-import { inject, ref, provide, renderSlot, useSlots } from 'vue'
+import { inject, ref, provide, renderSlot, useSlots, watch } from 'vue'
 import { isChildOf } from './util'
 import renderNode from './renderNode'
 import type { INiuTreeData, INiuTreeKey  } from './type'
@@ -79,11 +80,16 @@ const props = withDefaults(
 const slots = useSlots()
 const aa = (fuck: any)=>renderSlot(slots, "default", fuck)
 
+watch(()=>props.data.isExpand, ()=>{
+    emit("expand", props.data)
+})
+
 const opts = inject("tree:opts", {
     justOpen: false
 })
 const emit = defineEmits<{
     (e: 'click', data: INiuTreeData): void
+    (e: 'expand', data: INiuTreeData): void
     (e: 'onDragstart', key: INiuTreeKey): void
     (e: 'onDragend', key: INiuTreeKey): void
     (e: 'onDrop', key: INiuTreeKey, status?: ENiuTreeStatus): void
diff --git a/packages/components/tree/tree.vue b/packages/components/tree/tree.vue
index 1c63be6..f792ceb 100644
--- a/packages/components/tree/tree.vue
+++ b/packages/components/tree/tree.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="ps-tree component">
         <template v-for="(item, index) in list" :key="item.key">
-            <node @onDragstart="onDragstart" @onDragEnd="onDragEnd" @onDrop="onDrop" :data-source-key="dataSourceKey"
+            <node @onDragstart="onDragstart" @expand="onExpand" @onDragEnd="onDragEnd" @onDrop="onDrop" :data-source-key="dataSourceKey"
                 :data="item" :list="list" :level="level" @click="(item) => clickNode(item)">
                 <template
                     #default="{ data, deep, dataSourceKey, status }: { data: INiuTreeData, deep: number, dataSourceKey: INiuTreeKey, status: ENiuTreeStatus }">
@@ -45,6 +45,10 @@ const slot = useSlots()
 
 provide("tree:opts", props)
 
+function onExpand(item: INiuTreeData) {
+    emit("expand", item)
+}
+
 function clickNode(item: INiuTreeData) {
     if (props.justOpenOne) {
         forEachTree(props.list, (node: INiuTreeData) => {
@@ -60,6 +64,7 @@ function clickNode(item: INiuTreeData) {
 
 const emit = defineEmits<{
     (e: 'change'): void
+    (e: 'expand', data: INiuTreeData): void
     (e: 'itemDragstart'): void
 }>()
 
@@ -78,17 +83,17 @@ async function onDrop(key: INiuTreeKey, status?: ENiuTreeStatus) {
     let targetData = findByKey(key, props.list)
     const sourceKey = dataSourceKey.value;
     dataSourceKey.value = undefined
-    const isSuccess = (await props.dropFn?.(status, data, targetData))
-    if (isSuccess == undefined || isSuccess) {
-        switch (status) {
-            case ENiuTreeStatus.DragIn:
-                if (
-                    data &&
-                    targetData &&
-                    sourceKey != key &&
-                    !isChildOf(key, sourceKey, props.list) &&
-                    targetData.children
-                ) {
+    switch (status) {
+        case ENiuTreeStatus.DragIn:
+            if (
+                data &&
+                targetData &&
+                sourceKey != key &&
+                !isChildOf(key, sourceKey, props.list) &&
+                targetData.children
+            ) {
+                const isSuccess = (await props.dropFn?.(status, data, targetData))
+                if (isSuccess == undefined || isSuccess) {
                     removeByKey(sourceKey, props.list)
                     targetData.children.push(data)
                     if (props.autoExpand) {
@@ -96,34 +101,40 @@ async function onDrop(key: INiuTreeKey, status?: ENiuTreeStatus) {
                     }
                     emit("change")
                 }
-                break
-            case ENiuTreeStatus.DragDown:
-                // 按索引往列表添加节点
-                if (
-                    data &&
-                    targetData &&
-                    sourceKey != key &&
-                    !isChildOf(key, sourceKey, props.list)
-                ) {
+            }
+            break
+        case ENiuTreeStatus.DragDown:
+            // 按索引往列表添加节点
+            if (
+                data &&
+                targetData &&
+                sourceKey != key &&
+                !isChildOf(key, sourceKey, props.list)
+            ) {
+                const isSuccess = (await props.dropFn?.(status, data, targetData))
+                if (isSuccess == undefined || isSuccess) {
                     removeByKey(sourceKey, props.list)
                     insertAfterByKey(key, data, props.list)
                     emit("change")
                 }
-                break
-            case ENiuTreeStatus.DragUp:
-                // 按索引往列表添加节点
-                if (
-                    data &&
-                    targetData &&
-                    sourceKey != key &&
-                    !isChildOf(key, sourceKey, props.list)
-                ) {
+            }
+            break
+        case ENiuTreeStatus.DragUp:
+            // 按索引往列表添加节点
+            if (
+                data &&
+                targetData &&
+                sourceKey != key &&
+                !isChildOf(key, sourceKey, props.list)
+            ) {
+                const isSuccess = (await props.dropFn?.(status, data, targetData))
+                if (isSuccess == undefined || isSuccess) {
                     removeByKey(sourceKey, props.list)
                     insertBeforeByKey(key, data, props.list)
                     emit("change")
                 }
-                break
-        }
+            }
+            break
     }
 }
 </script>
diff --git a/packages/playground/src/dev/tree.vue b/packages/playground/src/dev/tree.vue
index 28bfde8..8fbe6f7 100644
--- a/packages/playground/src/dev/tree.vue
+++ b/packages/playground/src/dev/tree.vue
@@ -24,7 +24,10 @@ const list = ref(convertTreeData([
         title: "3"
     },
 ]))
+function onExpand(node: INiuTreeData) {
+    console.log(node);
 
+}
 const dropFn = (status: ENiuTreeStatus, data: INiuTreeData<any>, targetData: INiuTreeData<any>): Promise<boolean> => {
     return new Promise((resolve) => {
         setTimeout(() => {
@@ -49,7 +52,7 @@ const dropFn = (status: ENiuTreeStatus, data: INiuTreeData<any>, targetData: INi
         </ps-tree>
     </Panel>
     <Panel name="Tree" desc="延迟2000ms执行操作">
-        <ps-tree :dropFn="dropFn" :list="list">
+        <ps-tree @expand="onExpand" :dropFn="dropFn" :list="list" auto-expand>
             <template #default="{ data, deep }">
                 <div :style="{
                     marginLeft: deep * 10 + 'px',
diff --git a/packages/princess-ui/package.json b/packages/princess-ui/package.json
index 6c6c138..d69c6b3 100644
--- a/packages/princess-ui/package.json
+++ b/packages/princess-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "princess-ui",
-  "version": "0.0.8-beta",
+  "version": "0.0.8-beta.2",
   "description": "a vue3 ui, just for personal use",
   "scripts": {
       "build": "tsc ./PrincessResolver.ts --skipLibCheck --esModuleInterop"