perf: 优化筛选功能 支持请求options

packages/app/src/components/filter-fields/Tool.tsx

@@ -22,15 +22,14 @@ export type FilterField<S extends Record<string, unknown>> =
     options: {label: string; value: string}[];
     multiple?: boolean;
     hideClear?: boolean;
+    loading?: boolean;
   };
 
-export type FilterGroupMap<S extends Record<string, unknown>> = Map<
-string,
-FilterField<S>
->;
+export type FilterFieldObject<S extends Record<string, unknown>>
+= Record<string, FilterField<S>>;
 
 type Props<S extends Record<string, string | string[]>> = {
-  fieldsMap?: FilterGroupMap<S>;
+  fieldsObject?: FilterFieldObject<S>;
   fixedFields: FilterField<S>[];
   fields: Record<string, string | string[]>;
   isSearching: boolean;
@@ -56,7 +55,7 @@ function LDFilterTool<S extends Record<string, string | string[]>>(
     onDatesChange,
     fixedFields,
     onSearch,
-    fieldsMap,
+    fieldsObject,
     onScreen,
     onReset,
     isSearching,
@@ -78,16 +77,16 @@ function LDFilterTool<S extends Record<string, string | string[]>>(
 
   const list = useMemo<FilterField<S>[]>(
     function() {
-      if (!conditions || !fieldsMap) return fixedFields;
+      if (!conditions || !fieldsObject) return fixedFields;
 
       const arr = conditions.split(',').filter(Boolean);
 
       const els = arr
         .map(function(id) {
-          if (!fieldsMap.has(id))
+          if (!fieldsObject[id])
             return;
 
-          return {...fieldsMap.get(id)!, id: Number(id)};
+          return {...fieldsObject[id]!, id: Number(id)};
         })
         .filter(Boolean)
         .sort((a, b) => a.id - b.id);
@@ -96,7 +95,7 @@ function LDFilterTool<S extends Record<string, string | string[]>>(
 
       return nextEls;
     },
-    [conditions, fixedFields, fieldsMap],
+    [conditions, fixedFields, fieldsObject],
   );
 
   const onSearchFn = useLatest(onSearch);
@@ -178,6 +177,7 @@ function LDFilterTool<S extends Record<string, string | string[]>>(
                   options={state.options}
                   hideClear={state.hideClear}
                   multiple={state.multiple}
+                  loading={state.loading}
                 />
               );
             }
@@ -194,7 +194,7 @@ function LDFilterTool<S extends Record<string, string | string[]>>(
       {onScreen && <LDFilterSelectorModal
         visible={modalVisible!}
         onClose={onCloseModal!}
-        filtermap={fieldsMap!}
+        filtermap={fieldsObject!}
         source={conditions}
         onConfirm={onScreenConfirm}
       />}

packages/app/src/components/filter-selector-modal/hooks.ts

@@ -1,4 +1,4 @@
-import {FilterGroupMap} from '@components';
+import type {FilterFieldObject} from '@components';
 import {FormEventHandler, useEffect, useMemo, useState} from 'react';
 
 function paraseData(data: string) {
@@ -6,7 +6,7 @@ function paraseData(data: string) {
 }
 
 export function useTransfer(
-  map: FilterGroupMap<any>,
+  source: FilterFieldObject<any>,
   data: string,
   options: {
     onConfirm: (val: string) => void,
@@ -29,13 +29,12 @@ export function useTransfer(
     function() {
       const data: {id: string; label: string}[] = [];
 
-      map.forEach(function({label}, id) {
+      for (const [id, {label}] of Object.entries(source))
         data.push({id: String(id), label});
-      });
 
       return data;
     },
-    [map],
+    [source],
   );
 
   const onSubmit: FormEventHandler<HTMLFormElement> = function(e) {

packages/app/src/components/filter-selector-modal/index.tsx

@@ -1,4 +1,4 @@
-import {LDModal, type FilterGroupMap} from '@components';
+import {LDModal, type FilterFieldObject} from '@components';
 import {Transfer} from 'antd';
 import {FC} from 'react';
 import {useTransfer} from './hooks';
@@ -7,7 +7,7 @@ import icon from '@assets/images/dialog/filter.svg';
 type Props = {
   visible: boolean;
   onClose: () => void;
-  filtermap: FilterGroupMap<any>;
+  filtermap: FilterFieldObject<any>;
   onConfirm: (value: string) => void;
   source: string;
 };

packages/app/src/pages/user/filter/hooks.ts

@@ -0,0 +1,44 @@
+import {getAllRoleList} from '@apis';
+import {useQuery} from '@tanstack/react-query';
+import {useMemo} from 'react';
+import {searchState, settingContext} from '../context';
+import {FilterFieldObject} from '@components';
+import {useContextSection} from '@hooks';
+
+export function useFilterObject() {
+  const filterData = useContextSection(
+    settingContext,
+    state => state[0].conditions,
+  );
+
+  const {data, isFetching} = useQuery({
+    queryKey: [getAllRoleList.name],
+    async queryFn({signal}) {
+      const data = await getAllRoleList(signal);
+
+      if (data.msg === '200') {
+        return data.data.map(function(val) {
+          return {label: val.roleName, value: String(val.id)};
+        });
+      }
+
+      return [];
+    },
+    initialData: [],
+    enabled: filterData.includes('1'),
+  });
+
+  return useMemo<FilterFieldObject<typeof searchState>>(function() {
+    return {
+      1: {
+        value: 'role',
+        label: '角色名称',
+        type: 'select',
+        options: data,
+        loading: isFetching,
+      },
+      2: {value: 'email', label: '用户邮箱', type: 'input'},
+      3: {value: 'phone', label: '手机号', type: 'input'},
+    };
+  }, [data, isFetching]);
+}

packages/app/src/pages/user/filter/index.tsx

@@ -7,7 +7,8 @@ import {
   settingContext,
 } from '../context';
 import {LDFilterTool} from '@components';
-import {fieldsMap, fixedFields} from './state';
+import {fixedFields} from './state';
+import {useFilterObject} from './hooks';
 
 const UserFilter: FC = function() {
   const [
@@ -28,6 +29,7 @@ const UserFilter: FC = function() {
     searchContext,
     state => state[0].isSearching,
   );
+  const fieldsObject = useFilterObject();
 
   return (
     <LDFilterTool
@@ -39,7 +41,7 @@ const UserFilter: FC = function() {
       fields={fields}
       isSearching={isSearching}
       fixedFields={fixedFields}
-      fieldsMap={fieldsMap}
+      fieldsObject={fieldsObject}
       modalVisible={visible}
       onCloseModal={onCloseModal}
     />

packages/app/src/pages/user/filter/state.ts

@@ -1,13 +1,7 @@
-import {FilterField, FilterGroupMap} from '@components';
+import type {FilterField} from '@components';
 import {searchState} from '../context';
 
 export const fixedFields: FilterField<typeof searchState>[] = [
   {value: 'userName', label: '用户名称', type: 'input'},
   {value: 'realName', label: '真实姓名', type: 'input'},
 ];
-
-export const fieldsMap: FilterGroupMap<typeof searchState> = new Map([
-  ['1', {value: 'role', label: '角色名称', type: 'input'}],
-  ['2', {value: 'email', label: '用户邮箱', type: 'input'}],
-  ['3', {value: 'phone', label: '手机号', type: 'input'}],
-]);