perf: tenant list tenant configuration use scroll select

@@ -10,6 +10,7 @@ import {
 } from './tenantInfo';
 import { defHttp } from '/@/utils/http/axios';
 import { BasicPageParams } from '/@/api/model/baseModel';
+import { PaginationResult } from '/#/axios';
 export type QueryTenantProfilesParam = BasicPageParams & OtherParams;
 export type DeleteTenantProfilesParam = OtherParams;
 export type OtherParams = {
@@ -47,7 +48,7 @@ export async function deleteTenantProfileApi(ids: string) {
 }
 
 export const getTableTenantProfileApi = (params?: QueryTenantProfilesParam) => {
-  return defHttp.get({
+  return defHttp.get<PaginationResult>({
     url: Api.getTenantProfile,
     params,
   });
@@ -67,12 +68,12 @@ export const setTenantProfileIsDefaultApi = (id: string, v, params?: {}) => {
 };
 
 export const selectTenantProfileApi = async (params?: QueryTenantProfilesParam) => {
-  const { items } = await getTableTenantProfileApi(params);
+  const { items, total } = await getTableTenantProfileApi(params);
   items.forEach((item) => {
     item.label = item.name;
     item.value = item.id.id;
   });
-  return Promise.resolve<any[]>(items);
+  return { items, total };
 };
 
 export async function saveTenantProfileApi(params: tenantProfileDTO) {

@@ -37,6 +37,7 @@ import ApiUpload from './components/ApiUpload.vue';
 import ApiSearchSelect from './components/ApiSearchSelect.vue';
 import CustomMinMaxInput from './externalCompns/components/CustomMinMaxInput.vue';
 import StructForm from './externalCompns/components/StructForm/StructForm.vue';
+import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -81,6 +82,7 @@ componentMap.set('ApiUpload', ApiUpload);
 componentMap.set('ApiSearchSelect', ApiSearchSelect);
 componentMap.set('CustomMinMaxInput', CustomMinMaxInput);
 componentMap.set('StructForm', StructForm);
+componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

+<script lang="ts">
+  export default {
+    inheritAttrs: true,
+  };
+</script>
+<script lang="ts" setup>
+  import { ref, watchEffect, computed, unref, watch, reactive } from 'vue';
+  import { Select, Spin } from 'ant-design-vue';
+  import { isFunction } from '/@/utils/is';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { get, omit } from 'lodash-es';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { PaginationResult } from '/#/axios';
+  import { useDebounceFn } from '@vueuse/core';
+
+  type OptionsItem = { label: string; value: string; disabled?: boolean };
+
+  type Pagination = Record<'page' | 'pageSize', number>;
+
+  const emit = defineEmits(['options-change', 'change']);
+  const props = withDefaults(
+    defineProps<{
+      value?: Recordable | number | string;
+      numberToString?: boolean;
+      api?: (arg?: Recordable) => Promise<PaginationResult<OptionsItem>>;
+      params?: Recordable;
+      resultField?: string;
+      labelField?: string;
+      valueField?: string;
+      immediate?: boolean;
+      pagenation?: Pagination;
+      queryEmptyDataAgin?: boolean;
+    }>(),
+    {
+      resultField: '',
+      labelField: 'label',
+      valueField: 'value',
+      immediate: true,
+      queryEmptyDataAgin: true,
+      pagenation: () => ({ page: 1, pageSize: 10 }),
+    }
+  );
+
+  const OptionsItem = (_, { attrs }: { attrs: { vNode: any } }) => attrs.vNode;
+
+  const options = ref<OptionsItem[]>([]);
+  const pagination = reactive(Object.assign({ total: 0, page: 1, pageSize: 10 }, props.pagenation));
+  const scrollLoading = ref(false);
+  const lock = ref(false);
+  const loading = ref(false);
+  const isFirstLoad = ref(true);
+  const emitData = ref<any[]>([]);
+  const attrs = useAttrs();
+  const { t } = useI18n();
+
+  // Embedded in the form, just use the hook binding to perform form verification
+  const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+
+  const getOptions = computed(() => {
+    const { labelField, valueField, numberToString } = props;
+
+    return unref(options).reduce((prev, next: Recordable) => {
+      if (next) {
+        const value = get(next, valueField);
+        prev.push({
+          label: next[labelField],
+          value: numberToString ? `${value}` : value,
+          ...omit(next, [labelField, valueField]),
+        });
+      }
+      return prev;
+    }, [] as OptionsItem[]);
+  });
+
+  watchEffect(() => {
+    props.immediate && isFirstLoad.value && fetch();
+  });
+
+  watch(
+    () => props.params,
+    () => {
+      !unref(isFirstLoad) && fetch();
+    },
+    { deep: true }
+  );
+
+  async function fetch() {
+    const api = props.api;
+    if (!api || !isFunction(api)) return;
+    try {
+      !unref(getOptions).length ? (loading.value = true) : (scrollLoading.value = true);
+      lock.value = true;
+      const { total, items } = await api({
+        ...props.params,
+        page: pagination.page,
+        pageSize: pagination.pageSize,
+      });
+
+      pagination.total = total;
+      if (Array.isArray(items)) {
+        options.value = [...options.value, ...items];
+        emitChange();
+        return;
+      }
+      if (props.resultField) {
+        options.value = [...options.value, ...(get(items, props.resultField) || [])];
+      }
+      emitChange();
+    } catch (error) {
+      pagination.page = Math.ceil(unref(getOptions).length / pagination.pageSize);
+      console.warn(error);
+    } finally {
+      isFirstLoad.value = false;
+      loading.value = false;
+      scrollLoading.value = false;
+      lock.value = false;
+    }
+  }
+
+  async function handleFetch() {
+    if (!props.immediate && unref(isFirstLoad)) {
+      await fetch();
+      isFirstLoad.value = false;
+    }
+  }
+
+  function emitChange() {
+    emit('options-change', unref(getOptions));
+  }
+
+  function handleChange(_, ...args) {
+    emitData.value = args;
+  }
+
+  async function handlePopupScroll(event: MouseEvent) {
+    const { scrollHeight, scrollTop, clientHeight } = event.target as HTMLDivElement;
+    if (scrollTop + clientHeight >= scrollHeight) {
+      if (unref(getOptions).length < pagination.total && !unref(lock)) {
+        pagination.page = pagination.page + 1;
+        await fetch();
+      }
+    }
+  }
+
+  const debounceHandlePopupScroll = useDebounceFn(handlePopupScroll, 100);
+</script>
+
+<template>
+  <Select
+    @dropdownVisibleChange="handleFetch"
+    v-bind="attrs"
+    @change="handleChange"
+    :options="getOptions"
+    v-model:value="state"
+    @popup-scroll="debounceHandlePopupScroll"
+  >
+    <template #[item]="data" v-for="item in Object.keys($slots)">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+    <template #suffixIcon v-if="loading">
+      <LoadingOutlined spin />
+    </template>
+    <template #notFoundContent v-if="loading">
+      <span>
+        <LoadingOutlined spin class="mr-1" />
+        {{ t('component.form.apiSelectNotFound') }}
+      </span>
+    </template>
+    <template #dropdownRender="{ menuNode }">
+      <OptionsItem :vNode="menuNode" />
+      <div v-show="scrollLoading" class="flex justify-center">
+        <Spin size="small" />
+      </div>
+    </template>
+  </Select>
+</template>

@@ -118,4 +118,5 @@ export type ComponentType =
   | 'IconDrawer'
   | 'ApiUpload'
   | 'ApiSearchSelect'
-  | 'StructForm';
+  | 'StructForm'
+  | 'ApiSelectScrollLoad';

 import { BasicColumn } from '/@/components/Table/src/types/table';
 import { FormSchema } from '/@/components/Form';
 import { getAllRoleList } from '/@/api/system/system';
-import { selectTenantProfileApi } from '/@/api/tenant/tenantApi';
+import { getTableTenantProfileApi, QueryTenantProfilesParam } from '/@/api/tenant/tenantApi';
 import { RoleEnum } from '/@/enums/roleEnum';
 
 export function getBasicColumns(): BasicColumn[] {
@@ -123,16 +123,26 @@ export const tenantFormSchema: FormSchema[] = [
   {
     field: 'tenantProfileId',
     label: '租户配置',
-    component: 'ApiSelect',
+    component: 'ApiSelectScrollLoad',
     required: true,
-    defaultValue: 'Default',
-    componentProps: {
-      api: selectTenantProfileApi,
-      showSearch: true,
-      params: {
-        page: 1,
-        pageSize: 100,
-      },
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        api: async (params: QueryTenantProfilesParam) => {
+          const { items, total } = await getTableTenantProfileApi(params);
+          const firstRecord = items.at(0);
+          if (firstRecord) {
+            setFieldsValue({ tenantProfileId: firstRecord.id.id });
+          }
+          return { items, total };
+        },
+        showSearch: true,
+        labelField: 'name',
+        valueField: 'id.id',
+        filterOption: (inputValue: string, options: Record<'label' | 'value', string>) => {
+          return options.label.toLowerCase().includes(inputValue.toLowerCase());
+        },
+      };
     },
   },
   {