From b375bc34bc80b613d09d319f94e5a400ed35bf88 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Tue, 21 May 2024 11:20:52 +0800
Subject: [PATCH] docs(base-select): add lazy tree demo

---
 .../slot-panel-composition-api.vue            | 75 +++++++++++++++++
 .../demos/pc/app/base-select/slot-panel.vue   | 81 ++++++++++++++++++-
 2 files changed, 153 insertions(+), 3 deletions(-)

diff --git a/examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue b/examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue
index 3ca74354a..4439babff 100644
--- a/examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue
@@ -66,6 +66,51 @@
       ></tiny-tree>
     </template>
   </tiny-base-select>
+  <div>场景4：下拉树懒加载（单选）</div>
+  <tiny-base-select v-model="value4">
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        lazy
+        :load="load"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        @node-click="
+          (data) => {
+            state.visible = false
+            updateModelValue(data.id)
+            nextTick(() => {
+              state.selectedLabel = data.label
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+  <div>场景5：下拉树懒加载（多选）</div>
+  <tiny-base-select v-model="value5" multiple>
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        lazy
+        :load="load"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :show-checkbox="true"
+        @check="
+          (data, { checkedKeys, checkedNodes }) => {
+            updateModelValue(checkedNodes.map((node) => node.id))
+            nextTick(() => {
+              state.selected = state.selected.map((item) => {
+                return {
+                  ...item,
+                  currentLabel: checkedNodes.find((node) => node.id === item.value).label
+                }
+              })
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
 </template>
 
 <script setup>
@@ -75,6 +120,8 @@ import { BaseSelect as TinyBaseSelect, Tree as TinyTree } from '@opentiny/vue'
 const value = ref()
 const value2 = ref([])
 const value3 = ref()
+const value4 = ref()
+const value5 = ref([])
 
 const treeRef = ref()
 
@@ -124,6 +171,34 @@ const filter = (value, data) => {
 
   return data.label.includes(value)
 }
+
+const load = (node, resolve) => {
+  if (node.level === 0) {
+    return resolve([
+      {
+        id: 3,
+        label: '一级 3'
+      }
+    ])
+  }
+  if (node.level > 1) return resolve([])
+
+  setTimeout(() => {
+    const data = [
+      {
+        id: 1,
+        label: '一级 1'
+      },
+      {
+        id: 2,
+        label: '一级 2',
+        isLeaf: true
+      }
+    ]
+
+    resolve(data)
+  }, 500)
+}
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/base-select/slot-panel.vue b/examples/sites/demos/pc/app/base-select/slot-panel.vue
index 6fc3f0c43..242535641 100644
--- a/examples/sites/demos/pc/app/base-select/slot-panel.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-panel.vue
@@ -11,7 +11,7 @@
           (data) => {
             state.visible = false
             updateModelValue(data.id)
-            nextTick(() => {
+            $nextTick(() => {
               state.selectedLabel = data.label
             })
           }
@@ -31,7 +31,7 @@
         @check="
           (data, { checkedKeys, checkedNodes }) => {
             updateModelValue(checkedNodes.map((node) => node.id))
-            nextTick(() => {
+            $nextTick(() => {
               state.selected = state.selected.map((item) => {
                 return {
                   ...item,
@@ -58,7 +58,7 @@
           (data) => {
             state.visible = false
             updateModelValue(data.id)
-            nextTick(() => {
+            $nextTick(() => {
               state.selectedLabel = data.label
             })
           }
@@ -66,6 +66,51 @@
       ></tiny-tree>
     </template>
   </tiny-base-select>
+  <div>场景4：下拉树懒加载（单选）</div>
+  <tiny-base-select v-model="value4">
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        lazy
+        :load="load"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        @node-click="
+          (data) => {
+            state.visible = false
+            updateModelValue(data.id)
+            $nextTick(() => {
+              state.selectedLabel = data.label
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+  <div>场景5：下拉树懒加载（多选）</div>
+  <tiny-base-select v-model="value5" multiple>
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        lazy
+        :load="load"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :show-checkbox="true"
+        @check="
+          (data, { checkedKeys, checkedNodes }) => {
+            updateModelValue(checkedNodes.map((node) => node.id))
+            $nextTick(() => {
+              state.selected = state.selected.map((item) => {
+                return {
+                  ...item,
+                  currentLabel: checkedNodes.find((node) => node.id === item.value).label
+                }
+              })
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
 </template>
 
 <script>
@@ -80,6 +125,9 @@ export default {
     return {
       value: '',
       value2: [],
+      value3: '',
+      value4: '',
+      value5: [],
       treeData: [
         {
           id: 1,
@@ -126,6 +174,33 @@ export default {
       if (!value) return true
 
       return data.label.includes(value)
+    },
+    load(node, resolve) {
+      if (node.level === 0) {
+        return resolve([
+          {
+            id: 3,
+            label: '一级 3'
+          }
+        ])
+      }
+      if (node.level > 1) return resolve([])
+
+      setTimeout(() => {
+        const data = [
+          {
+            id: 1,
+            label: '一级 1'
+          },
+          {
+            id: 2,
+            label: '一级 2',
+            isLeaf: true
+          }
+        ]
+
+        resolve(data)
+      }, 500)
     }
   }
 }