From 500752997ca1b40a768724414f3445c08cad24fe Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Thu, 26 Dec 2024 19:23:59 +0800
Subject: [PATCH] chore: add apiSelect remote search demo (#5246)

---
 playground/src/views/examples/form/basic.vue | 52 +++++++++++++++++++-
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue
index da292b2bb7f..927ab0dabc9 100644
--- a/playground/src/views/examples/form/basic.vue
+++ b/playground/src/views/examples/form/basic.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { h, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
-import { Button, Card, message, TabPane, Tabs } from 'ant-design-vue';
+import { useDebounceFn } from '@vueuse/core';
+import { Button, Card, message, Spin, TabPane, Tabs } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
 import { useVbenForm } from '#/adapter/form';
@@ -12,6 +13,22 @@ import { getAllMenusApi } from '#/api';
 import DocButton from '../doc-button.vue';
 
 const activeTab = ref('basic');
+const keyword = ref('');
+const fetching = ref(false);
+// 模拟远程获取数据
+function fetchRemoteOptions({ keyword = '选项' }: Record<string, any>) {
+  fetching.value = true;
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const options = Array.from({ length: 10 }).map((_, index) => ({
+        label: `${keyword}-${index}`,
+        value: `${keyword}-${index}`,
+      }));
+      resolve(options);
+      fetching.value = false;
+    }, 1000);
+  });
+}
 
 const [BaseForm, baseFormApi] = useVbenForm({
   // 所有表单项共用，可单独在表单内覆盖
@@ -64,6 +81,37 @@ const [BaseForm, baseFormApi] = useVbenForm({
       // 界面显示的label
       label: 'ApiSelect',
     },
+    {
+      component: 'ApiSelect',
+      // 对应组件的参数
+      componentProps: () => {
+        return {
+          api: fetchRemoteOptions,
+          // 禁止本地过滤
+          filterOption: false,
+          // 如果正在获取数据，使用插槽显示一个loading
+          notFoundContent: fetching.value ? undefined : null,
+          // 搜索词变化时记录下来， 使用useDebounceFn防抖。
+          onSearch: useDebounceFn((value: string) => {
+            keyword.value = value;
+          }, 300),
+          // 远程搜索参数。当搜索词变化时，params也会更新
+          params: {
+            keyword: keyword.value || undefined,
+          },
+          showSearch: true,
+        };
+      },
+      // 字段名
+      fieldName: 'remoteSearch',
+      // 界面显示的label
+      label: '远程搜索',
+      renderComponentContent: () => {
+        return {
+          notFoundContent: fetching.value ? h(Spin) : undefined,
+        };
+      },
+    },
     {
       component: 'ApiTreeSelect',
       // 对应组件的参数