chore: 角色信息格式化查询和导出

packages/app/src/hooks/use-filter-group/index.tsx

@@ -18,17 +18,17 @@ export type FilterGroupMap<S extends Record<string, string>> = Map<string, MapVa
 
 export function useFieldGroup<S extends Record<string, string>>(
   data: string,
-  fixed: MapValue<S>[],
+  sourceMap: FilterGroupMap<S>,
   options: {
-    sourceMap: FilterGroupMap<S>;
-    values: Record<string, string>;
+    fixedMap: MapValue<S>[];
+    fields: Record<string, string>;
     onSearch: () => void;
     onChange?: (key: any) => (value: string | number) => void;
     dates?: RangeValue<Dayjs>;
     onDatesChange?: (dates: RangeValue<Dayjs>) => void;
   },
 ) {
-  const {onChange, values, dates, onDatesChange, sourceMap, onSearch} = options;
+  const {onChange, fields, dates, onDatesChange, fixedMap, onSearch} = options;
   const prevEls = useRef<MapValue<S>[]>([]);
 
   const list = useMemo<MapValue<S>[]>(
@@ -43,11 +43,11 @@ export function useFieldGroup<S extends Record<string, string>>(
         .filter(Boolean)
         .sort((a, b) => a.id - b.id);
 
-      const nextEls = [...fixed, ...els];
+      const nextEls = [...fixedMap, ...els];
 
       return nextEls;
     },
-    [data, fixed, sourceMap],
+    [data, fixedMap, sourceMap],
   );
 
   // onSearch可能会变更
@@ -103,7 +103,7 @@ export function useFieldGroup<S extends Record<string, string>>(
                 key={state.label}
                 name={state.value as string}
                 label={state.label}
-                value={values[state.value as string]}
+                value={fields[state.value as string]}
                 onChange={onChange?.(state.value)}
               />
             );
@@ -126,7 +126,7 @@ export function useFieldGroup<S extends Record<string, string>>(
                 selectKey={state.selectKey}
                 name={state.value as string}
                 label={state.label}
-                value={values[state.value as string]}
+                value={fields[state.value as string]}
                 onChange={onChange?.(state.value as string)}
               />
             );
@@ -134,6 +134,6 @@ export function useFieldGroup<S extends Record<string, string>>(
         }
       });
     },
-    [dates, list, onChange, onDatesChange, values],
+    [dates, list, onChange, onDatesChange, fields],
   );
 }

packages/app/src/hooks/use-table-search-event/index.ts

@@ -23,7 +23,7 @@ export function useTableSearchEvent<T>(
   return onSearch;
 }
 
-export function useTableToolEvents<T>(
+export function useTableSearclToolEvents<T>(
   context: Context<TableSearchContext<T>>,
   payload?: T,
   options: {callback?: () => void; resetCallback?: () => void} = {},

packages/app/src/models/request/role.ts

@@ -4,6 +4,8 @@ import {ListParams} from '.';
 export type GetRoleListParams = {
   /** 角色名称 */
   roleName: string;
+  /** 角色编号 */
+  roleCode: string;
 } & ListParams;
 
 /** 新增角色 */

packages/app/src/pages/role/context.ts

@@ -1,7 +1,7 @@
 import {createPageContext, createSearchContext, createTableSearchContext} from '@hooks';
 import {GetRoleListParams, OriginalListParams} from '@models';
 
-export const contextState: OriginalListParams<GetRoleListParams> = {roleName: ''};
+export const contextState: OriginalListParams<GetRoleListParams> = {roleName: '', roleCode: ''};
 export const context = createTableSearchContext(contextState);
 
 export const pageContext = createPageContext();

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

@@ -1,28 +1,28 @@
-import {FilterButtonGroup, FilterField, FilterFieldWrapper} from '@components';
+import {FilterButtonGroup, FilterFieldWrapper} from '@components';
 import {Card} from 'antd';
-import {FC, useState} from 'react';
-import {useContextSection, useTableExportEvent, useTableSearchEvent} from '@hooks';
-import {context, pageContext, searchContext} from '../context';
-import {exportRole} from '@apis';
+import {FC} from 'react';
+import {useContextSection, useFieldGroup, useFilterField, useTableSearclToolEvents} from '@hooks';
+import {context, searchContext} from '../context';
+import {sourceMap, fixedMap} from './state';
 
 const Filter: FC = function () {
-  const [value, onChange] = useState('');
-  const onSearch = useTableSearchEvent(context, {roleName: value});
-  const [isExporting, onExport] = useTableExportEvent({pageContext, context, fn: exportRole});
-  const {isSearching, refetch} = useContextSection(searchContext, state => state[0]);
+  const [fields, {onChange, resetState}] = useFilterField({roleName: '', roleCode: ''}, true);
+  const [, {onSearch, onReset}] = useTableSearclToolEvents(context, fields, {
+    resetCallback: resetState,
+  });
+  const FilterField = useFieldGroup('', sourceMap, {
+    onChange,
+    onSearch,
+    fixedMap,
+    fields,
+  });
+  const {isSearching} = useContextSection(searchContext, state => state[0]);
 
   return (
     <Card>
       <FilterFieldWrapper>
-        <FilterField name='roleName' label='角色名称' value={value} onChange={onChange} />
-        <FilterButtonGroup
-          isSearching={isSearching}
-          isExporting={isExporting}
-          onSearch={onSearch}
-          onExport={onExport}
-          onRefresh={refetch}
-          offset={12}
-        />
+        {FilterField}
+        <FilterButtonGroup isSearching={isSearching} onSearch={onSearch} onReset={onReset} />
       </FilterFieldWrapper>
     </Card>
   );

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

@@ -0,0 +1,9 @@
+import {FilterGroupMap, MapValue} from '@hooks';
+import {contextState} from '../context';
+
+export const sourceMap: FilterGroupMap<typeof contextState> = new Map();
+
+export const fixedMap: MapValue<typeof contextState>[] = [
+  {label: '角色编号', type: 'field', value: 'roleCode'},
+  {label: '角色名称', type: 'field', value: 'roleName'},
+];

packages/app/src/pages/role/table/index.tsx

@@ -6,12 +6,12 @@ import RoleModal from './modal';
 import TreeModal from './tree-modal';
 import {Table, TableTools} from '@components';
 import PdaMenuModal from './pda-modal';
-import {getRoleList} from '@apis';
-import {useContextSection, useQueryTableList} from '@hooks';
+import {exportRole, getRoleList} from '@apis';
+import {useContextSection, useQueryTableList, useTableExportEvent} from '@hooks';
 
 const TableList: FC = function () {
   const params = useContextSection(context, state => state[0]);
-  const [{data, count}, {refetch}] = useQueryTableList({
+  const [{data, count, isFetching}, {refetch}] = useQueryTableList({
     queryFn: getRoleList,
     params,
     pageContext,
@@ -21,11 +21,18 @@ const TableList: FC = function () {
     {columns, visible, editId, roleVisible, roleId, pdaId, pdaVisible},
     {onAdd, onClose, onRoleClose, onPdaClose},
   ] = useHandle(data, refetch);
+  const [isExporting, onExport] = useTableExportEvent({pageContext, context, fn: exportRole});
 
   return (
     <>
       <Card className='table-wrapper'>
-        <TableTools onClick={onAdd} />
+        <TableTools
+          onAdd={onAdd}
+          onRefresh={refetch}
+          onExport={onExport}
+          isExporting={isExporting}
+          isRefreshing={isFetching}
+        />
 
         <Table
           data-testid='role_table'

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

@@ -6,10 +6,10 @@ import {
   useFilterDB,
   useFilterField,
   useTableSearchState,
-  useTableToolEvents,
+  useTableSearclToolEvents,
 } from '@hooks';
 import {context, searchContext} from '../context';
-import {filterMap, fixedMap} from './state';
+import {sourceMap, fixedMap} from './state';
 
 const Filter: FC = function () {
   const [fields, {onChange, resetState}] = useFilterField(
@@ -25,7 +25,7 @@ const Filter: FC = function () {
     },
     true,
   );
-  const [visible, {onSearch, onShowModal, onCloseModal, onReset}] = useTableToolEvents(
+  const [visible, {onSearch, onShowModal, onCloseModal, onReset}] = useTableSearclToolEvents(
     context,
     fields,
     {
@@ -33,9 +33,9 @@ const Filter: FC = function () {
     },
   );
   const [filterList, {set}] = useFilterDB();
-  const FilterFields = useFieldGroup(filterList, fixedMap, {
-    sourceMap: filterMap,
-    values: fields,
+  const FilterFields = useFieldGroup(filterList, sourceMap, {
+    fields,
+    fixedMap,
     onChange,
     onSearch,
   });
@@ -58,7 +58,7 @@ const Filter: FC = function () {
       <FilterSelectorModal
         visible={visible}
         onClose={onCloseModal}
-        filtermap={filterMap}
+        filtermap={sourceMap}
         onConfirm={set}
         source={filterList}
       />

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

@@ -1,7 +1,7 @@
 import {FilterGroupMap, MapValue} from '@hooks';
 import {contextState} from '../context';
 
-export const filterMap: FilterGroupMap<typeof contextState> = new Map([
+export const sourceMap: FilterGroupMap<typeof contextState> = new Map([
   ['1', {label: '真实姓名', type: 'field', value: 'realName'}],
   ['2', {label: '所在部门', type: 'select', value: 'department', selectKey: '部门字典'}],
   ['3', {label: '角色名称', type: 'field', value: 'role'}],