feat: 1.ApiSelect增加远程搜索功能 2.ApiSelect设定懒加载时允许控制空搜索时不查询 3.增加下拉远程搜索Json版本demo (#3992)

* feat: 1.ApiSelect增加远程搜索功能 2.ApiSelect设定懒加载时允许控制空搜索时不查询

* feat: 增加下拉远程搜索Json版本demo

src/components/Form/src/components/ApiSelect.vue

@@ -3,6 +3,7 @@
     @dropdown-visible-change="handleFetch"
     v-bind="$attrs"
     @change="handleChange"
+    @search="debounceSearchFn"
     :options="getOptions"
     v-model:value="state"
   >
@@ -20,26 +21,41 @@
     </template>
   </Select>
 </template>
+
 <script lang="ts" setup>
-  import { PropType, ref, computed, unref, watch } from 'vue';
+  import { computed, PropType, ref, unref, watch } from 'vue';
   import { Select } from 'ant-design-vue';
   import type { SelectValue } from 'ant-design-vue/es/select';
-  import { isFunction } from '@/utils/is';
+  import { isEmpty, isFunction } from '@/utils/is';
   import { useRuleFormItem } from '@/hooks/component/useFormItem';
-  import { get, omit, isEqual } from 'lodash-es';
+  import { assignIn, get, isEqual, omit } from 'lodash-es';
   import { LoadingOutlined } from '@ant-design/icons-vue';
   import { useI18n } from '@/hooks/web/useI18n';
   import { propTypes } from '@/utils/propTypes';
+  import { useDebounceFn } from '@vueuse/core';
 
   type OptionsItem = { label?: string; value?: string; disabled?: boolean; [name: string]: any };
 
+  type ApiSearchOption = {
+    // 展示搜索
+    show?: boolean;
+    // 待搜索字段名
+    searchName?: string;
+    // 是否允许空搜索
+    emptySearch?: boolean;
+    // 搜索前置方法
+    beforeFetch?: (value?: string) => Promise<string>;
+    // 拦截方法
+    interceptFetch?: (value?: string) => Promise<boolean>;
+  };
+
   defineOptions({ name: 'ApiSelect', inheritAttrs: false });
 
   const props = defineProps({
     value: { type: [Array, Object, String, Number] as PropType<SelectValue> },
     numberToString: propTypes.bool,
     api: {
-      type: Function as PropType<(arg?: any) => Promise<OptionsItem[] | Recordable<any>>>,
+      type: Function as PropType<(arg?: any) => Promise<OptionsItem[] | Recordable>>,
       default: null,
     },
     // api params
@@ -54,6 +70,10 @@
       type: Array<OptionsItem>,
       default: [],
     },
+    apiSearch: {
+      type: Object as PropType<ApiSearchOption>,
+      default: () => null,
+    },
     beforeFetch: {
       type: Function as PropType<Fn>,
       default: null,
@@ -72,6 +92,7 @@
   // 首次是否加载过了
   const isFirstLoaded = ref(false);
   const emitData = ref<OptionsItem[]>([]);
+  const searchParams = ref<any>({});
   const { t } = useI18n();
 
   // Embedded in the form, just use the hook binding to perform form verification
@@ -110,16 +131,29 @@
     { deep: true, immediate: props.immediate },
   );
 
+  watch(
+    () => searchParams.value,
+    (value, oldValue) => {
+      if (isEmpty(value) || isEqual(value, oldValue)) return;
+      (async () => {
+        await fetch();
+        searchParams.value = {};
+      })();
+    },
+    { deep: true, immediate: props.immediate },
+  );
+
   async function fetch() {
     let { api, beforeFetch, afterFetch, params, resultField } = props;
     if (!api || !isFunction(api) || loading.value) return;
     optionsRef.value = [];
     try {
       loading.value = true;
+      let apiParams = assignIn({}, params, searchParams.value);
       if (beforeFetch && isFunction(beforeFetch)) {
-        params = (await beforeFetch(params)) || params;
+        apiParams = (await beforeFetch(apiParams)) || apiParams;
       }
-      let res = await api(params);
+      let res = await api(apiParams);
       if (afterFetch && isFunction(afterFetch)) {
         res = (await afterFetch(res)) || res;
       }
@@ -147,11 +181,43 @@
       if (props.alwaysLoad) {
         await fetch();
       } else if (!props.immediate && !unref(isFirstLoaded)) {
-        await fetch();
+        // 动态搜索查询时，允许控制初始不加载数据
+        if (!(!!props.apiSearch && !!props.apiSearch.show && !props.apiSearch.emptySearch)) {
+          await fetch();
+        } else {
+          optionsRef.value = [];
+          emitChange();
+        }
       }
     }
   }
 
+  let debounceSearchFn = useDebounceFn(handleSearch, 500);
+
+  async function handleSearch(value: any) {
+    if (!props.apiSearch) {
+      return;
+    }
+    const { show, searchName, beforeFetch, interceptFetch } = props.apiSearch;
+    if (!show || !searchName) {
+      return;
+    }
+
+    value = value || undefined;
+    if (beforeFetch && isFunction(beforeFetch)) {
+      value = (await beforeFetch(value)) || value;
+    }
+
+    if (interceptFetch && isFunction(interceptFetch)) {
+      if (!(await interceptFetch(value))) {
+        return;
+      }
+    }
+    searchParams.value = {
+      [searchName]: value,
+    };
+  }
+
   function emitChange() {
     emit('options-change', unref(getOptions));
   }

src/views/demo/form/index.vue

@@ -57,8 +57,8 @@
 </template>
 <script lang="ts" setup>
   import { type Recordable } from '@vben/types';
-  import { computed, unref, ref } from 'vue';
-  import { BasicForm, ApiSelect, FormSchema } from '@/components/Form';
+  import { computed, ref, unref } from 'vue';
+  import { ApiSelect, BasicForm, FormSchema } from '@/components/Form';
   import { CollapseContainer } from '@/components/Container';
   import { useMessage } from '@/hooks/web/useMessage';
   import { PageWrapper } from '@/components/Page';
@@ -472,7 +472,7 @@
       },
     },
     {
-      field: 'field32',
+      field: 'field32-1',
       label: '下拉远程搜索',
       helpMessage: ['ApiSelect组件', '将关键词发送到接口进行远程搜索'],
       required: true,
@@ -482,6 +482,35 @@
       },
       defaultValue: '0',
     },
+    {
+      field: 'field32-2',
+      label: '下拉远程搜索',
+      component: 'ApiSelect',
+      helpMessage: ['ApiSelect组件', '将关键词发送到接口进行远程搜索'],
+      componentProps: {
+        api: optionsListApi,
+        showSearch: true,
+        apiSearch: {
+          show: true,
+          searchName: 'name',
+        },
+        resultField: 'list',
+        labelField: 'name',
+        valueField: 'id',
+        immediate: true,
+        onChange: (e, v) => {
+          console.log('ApiSelect====>:', e, v);
+        },
+        onOptionsChange: (options) => {
+          console.log('get options', options.length, options);
+        },
+      },
+      required: true,
+      colProps: {
+        span: 8,
+      },
+      defaultValue: '0',
+    },
     {
       field: 'field33',
       component: 'ApiTreeSelect',