Skip to content

Commit f40f0fa

Browse files
LZS911LZS911
authored
Merge pull request #786 from actiontech/feature/issue-564-2
[feature](UserCenter): Support more filtering items
2 parents 6886827 + 0c1ecf7 commit f40f0fa

File tree

8 files changed

+551
-20
lines changed

8 files changed

+551
-20
lines changed

‎packages/base/src/locale/zh-CN/dmsUserCenter.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ export default {
1515
platformRoles: '平台角色',
1616
projects: '所属项目',
1717
projectsCount: '+{{count}}个项目'
18-
}
18+
},
19+
normal: '正常',
20+
disabled: '被禁用',
21+
searchPlaceholder: '输入ID/用户名/邮箱/手机号关键字搜索'
1922
},
2023
userForm: {
2124
username: '用户名',

‎packages/base/src/page/UserCenter/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 156 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,14 +124,16 @@ exports[`base/UserCenter should hidden action when user is not admin 1`] = `
124124
>
125125
<div
126126
class="ant-space-item"
127+
style="margin-right: 12px;"
127128
>
128129
<span
129130
class="ant-input-affix-wrapper basic-input-wrapper actiontech-table-search-input-namespace css-1f6svkh ant-input-affix-wrapper-sm"
131+
style="width: 300px;"
130132
>
131133
<input
132134
class="ant-input ant-input-sm"
133135
id="actiontech-table-search-input"
134-
placeholder="输入关键字搜索"
136+
placeholder="输入ID/用户名/邮箱/手机号关键字搜索"
135137
type="text"
136138
value=""
137139
/>
@@ -170,6 +172,42 @@ exports[`base/UserCenter should hidden action when user is not admin 1`] = `
170172
</span>
171173
</span>
172174
</div>
175+
<div
176+
class="ant-space-item"
177+
>
178+
<button
179+
class="ant-btn ant-btn-default ant-btn-sm ant-btn-two-chinese-chars actiontech-filter-button-namespace basic-button-wrapper css-lfzis8"
180+
style="padding: 0px 6px 0px 10px;"
181+
type="button"
182+
>
183+
<div
184+
class="ant-space ant-space-horizontal ant-space-align-center css-1nt49ug"
185+
>
186+
<div
187+
class="ant-space-item"
188+
style="margin-right: 2px;"
189+
>
190+
筛选
191+
</div>
192+
<div
193+
class="ant-space-item"
194+
>
195+
<svg
196+
color="currentColor"
197+
height="14"
198+
viewBox="0 0 16 16"
199+
width="14"
200+
xmlns="http://www.w3.org/2000/svg"
201+
>
202+
<path
203+
d="m8 8.781 3.3-3.3.943.943L8 10.667 3.757 6.424l.943-.943z"
204+
fill="currentColor"
205+
/>
206+
</svg>
207+
</div>
208+
</div>
209+
</button>
210+
</div>
173211
</div>
174212
</div>
175213
<div
@@ -1587,14 +1625,16 @@ exports[`base/UserCenter should render user list when it first entered the user
15871625
>
15881626
<div
15891627
class="ant-space-item"
1628+
style="margin-right: 12px;"
15901629
>
15911630
<span
15921631
class="ant-input-affix-wrapper basic-input-wrapper actiontech-table-search-input-namespace css-1f6svkh ant-input-affix-wrapper-sm"
1632+
style="width: 300px;"
15931633
>
15941634
<input
15951635
class="ant-input ant-input-sm"
15961636
id="actiontech-table-search-input"
1597-
placeholder="输入关键字搜索"
1637+
placeholder="输入ID/用户名/邮箱/手机号关键字搜索"
15981638
type="text"
15991639
value=""
16001640
/>
@@ -1633,6 +1673,42 @@ exports[`base/UserCenter should render user list when it first entered the user
16331673
</span>
16341674
</span>
16351675
</div>
1676+
<div
1677+
class="ant-space-item"
1678+
>
1679+
<button
1680+
class="ant-btn ant-btn-default ant-btn-sm ant-btn-two-chinese-chars actiontech-filter-button-namespace basic-button-wrapper css-lfzis8"
1681+
style="padding: 0px 6px 0px 10px;"
1682+
type="button"
1683+
>
1684+
<div
1685+
class="ant-space ant-space-horizontal ant-space-align-center css-1nt49ug"
1686+
>
1687+
<div
1688+
class="ant-space-item"
1689+
style="margin-right: 2px;"
1690+
>
1691+
筛选
1692+
</div>
1693+
<div
1694+
class="ant-space-item"
1695+
>
1696+
<svg
1697+
color="currentColor"
1698+
height="14"
1699+
viewBox="0 0 16 16"
1700+
width="14"
1701+
xmlns="http://www.w3.org/2000/svg"
1702+
>
1703+
<path
1704+
d="m8 8.781 3.3-3.3.943.943L8 10.667 3.757 6.424l.943-.943z"
1705+
fill="currentColor"
1706+
/>
1707+
</svg>
1708+
</div>
1709+
</div>
1710+
</button>
1711+
</div>
16361712
</div>
16371713
</div>
16381714
<div
@@ -3202,14 +3278,16 @@ exports[`base/UserCenter switch to operate permission list 1`] = `
32023278
>
32033279
<div
32043280
class="ant-space-item"
3281+
style="margin-right: 12px;"
32053282
>
32063283
<span
32073284
class="ant-input-affix-wrapper basic-input-wrapper actiontech-table-search-input-namespace css-1f6svkh ant-input-affix-wrapper-sm"
3285+
style="width: 300px;"
32083286
>
32093287
<input
32103288
class="ant-input ant-input-sm"
32113289
id="actiontech-table-search-input"
3212-
placeholder="输入关键字搜索"
3290+
placeholder="输入ID/用户名/邮箱/手机号关键字搜索"
32133291
type="text"
32143292
value=""
32153293
/>
@@ -3248,6 +3326,42 @@ exports[`base/UserCenter switch to operate permission list 1`] = `
32483326
</span>
32493327
</span>
32503328
</div>
3329+
<div
3330+
class="ant-space-item"
3331+
>
3332+
<button
3333+
class="ant-btn ant-btn-default ant-btn-sm ant-btn-two-chinese-chars actiontech-filter-button-namespace basic-button-wrapper css-lfzis8"
3334+
style="padding: 0px 6px 0px 10px;"
3335+
type="button"
3336+
>
3337+
<div
3338+
class="ant-space ant-space-horizontal ant-space-align-center css-1nt49ug"
3339+
>
3340+
<div
3341+
class="ant-space-item"
3342+
style="margin-right: 2px;"
3343+
>
3344+
筛选
3345+
</div>
3346+
<div
3347+
class="ant-space-item"
3348+
>
3349+
<svg
3350+
color="currentColor"
3351+
height="14"
3352+
viewBox="0 0 16 16"
3353+
width="14"
3354+
xmlns="http://www.w3.org/2000/svg"
3355+
>
3356+
<path
3357+
d="m8 8.781 3.3-3.3.943.943L8 10.667 3.757 6.424l.943-.943z"
3358+
fill="currentColor"
3359+
/>
3360+
</svg>
3361+
</div>
3362+
</div>
3363+
</button>
3364+
</div>
32513365
</div>
32523366
</div>
32533367
<div
@@ -5121,14 +5235,16 @@ exports[`base/UserCenter switch to role list 1`] = `
51215235
>
51225236
<div
51235237
class="ant-space-item"
5238+
style="margin-right: 12px;"
51245239
>
51255240
<span
51265241
class="ant-input-affix-wrapper basic-input-wrapper actiontech-table-search-input-namespace css-1f6svkh ant-input-affix-wrapper-sm"
5242+
style="width: 300px;"
51275243
>
51285244
<input
51295245
class="ant-input ant-input-sm"
51305246
id="actiontech-table-search-input"
5131-
placeholder="输入关键字搜索"
5247+
placeholder="输入ID/用户名/邮箱/手机号关键字搜索"
51325248
type="text"
51335249
value=""
51345250
/>
@@ -5167,6 +5283,42 @@ exports[`base/UserCenter switch to role list 1`] = `
51675283
</span>
51685284
</span>
51695285
</div>
5286+
<div
5287+
class="ant-space-item"
5288+
>
5289+
<button
5290+
class="ant-btn ant-btn-default ant-btn-sm ant-btn-two-chinese-chars actiontech-filter-button-namespace basic-button-wrapper css-lfzis8"
5291+
style="padding: 0px 6px 0px 10px;"
5292+
type="button"
5293+
>
5294+
<div
5295+
class="ant-space ant-space-horizontal ant-space-align-center css-1nt49ug"
5296+
>
5297+
<div
5298+
class="ant-space-item"
5299+
style="margin-right: 2px;"
5300+
>
5301+
筛选
5302+
</div>
5303+
<div
5304+
class="ant-space-item"
5305+
>
5306+
<svg
5307+
color="currentColor"
5308+
height="14"
5309+
viewBox="0 0 16 16"
5310+
width="14"
5311+
xmlns="http://www.w3.org/2000/svg"
5312+
>
5313+
<path
5314+
d="m8 8.781 3.3-3.3.943.943L8 10.667 3.757 6.424l.943-.943z"
5315+
fill="currentColor"
5316+
/>
5317+
</svg>
5318+
</div>
5319+
</div>
5320+
</button>
5321+
</div>
51705322
</div>
51715323
</div>
51725324
<div

‎packages/base/src/page/UserCenter/components/UserList/List.tsx‎

Lines changed: 69 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ import {
88
useTableRequestError,
99
useTableRequestParams,
1010
TableToolbar,
11-
ColumnsSettingProps
11+
ColumnsSettingProps,
12+
FilterCustomProps,
13+
useTableFilterContainer,
14+
TableFilterContainer
1215
} from '@actiontech/dms-kit/es/components/ActiontechTable';
1316
import { ResponseCode } from '@actiontech/dms-kit';
1417
import { IListUser } from '@actiontech/shared/lib/api/base/service/common';
@@ -25,6 +28,10 @@ import EventEmitter from '../../../../utils/EventEmitter';
2528
import EmitterKey from '../../../../data/EmitterKey';
2629
import { useCurrentUser, usePermission } from '@actiontech/shared/lib/features';
2730
import { UserListActions } from './action';
31+
import {
32+
ListUsersFilterByStatEnum,
33+
ListUsersFilterByAuthenticationTypeEnum
34+
} from '@actiontech/shared/lib/api/base/service/User/index.enum';
2835

2936
const UserList: React.FC<{ activePage: UserCenterListEnum }> = ({
3037
activePage
@@ -44,7 +51,9 @@ const UserList: React.FC<{ activePage: UserCenterListEnum }> = ({
4451
tableChange,
4552
searchKeyword,
4653
setSearchKeyword,
47-
refreshBySearchKeyword
54+
refreshBySearchKeyword,
55+
updateTableFilterInfo,
56+
tableFilterInfo
4857
} = useTableRequestParams<IListUser, IListUsersParams>();
4958

5059
const { username } = useCurrentUser();
@@ -57,12 +66,13 @@ const UserList: React.FC<{ activePage: UserCenterListEnum }> = ({
5766
() => {
5867
const params: IListUsersParams = {
5968
...pagination,
69+
...tableFilterInfo,
6070
fuzzy_keyword: searchKeyword
6171
};
6272
return handleTableRequestError(User.ListUsers(params));
6373
},
6474
{
65-
refreshDeps: [pagination, activePage],
75+
refreshDeps: [pagination, activePage, tableFilterInfo],
6676
ready: UserCenterListEnum.user_list === activePage
6777
}
6878
);
@@ -114,6 +124,47 @@ const UserList: React.FC<{ activePage: UserCenterListEnum }> = ({
114124
[username]
115125
);
116126

127+
const columns = useMemo(() => {
128+
return UserListColumns();
129+
}, []);
130+
131+
const filterCustomProps = useMemo(() => {
132+
return new Map<keyof IListUser, FilterCustomProps>([
133+
[
134+
'stat',
135+
{
136+
options: [
137+
{
138+
label: t('dmsUserCenter.user.userList.normal'),
139+
value: ListUsersFilterByStatEnum.Normal
140+
},
141+
{
142+
label: t('dmsUserCenter.user.userList.disabled'),
143+
value: ListUsersFilterByStatEnum.Disabled
144+
}
145+
]
146+
}
147+
],
148+
[
149+
'authentication_type',
150+
{
151+
options: Object.keys(ListUsersFilterByAuthenticationTypeEnum).map(
152+
(key) => ({
153+
label: key,
154+
value: key
155+
})
156+
)
157+
}
158+
]
159+
]);
160+
}, [t]);
161+
162+
const { filterButtonMeta, filterContainerMeta, updateAllSelectedFilterItem } =
163+
useTableFilterContainer<IListUser, IListUsersParams>(
164+
columns,
165+
updateTableFilterInfo
166+
);
167+
117168
useEffect(() => {
118169
const { unsubscribe } = EventEmitter.subscribe(
119170
EmitterKey.DMS_Refresh_User_Center_List,
@@ -131,9 +182,23 @@ const UserList: React.FC<{ activePage: UserCenterListEnum }> = ({
131182
onChange: setSearchKeyword,
132183
onSearch: () => {
133184
refreshBySearchKeyword();
185+
},
186+
placeholder: t('dmsUserCenter.user.userList.searchPlaceholder'),
187+
style: {
188+
width: '300px'
134189
}
135190
}}
136191
setting={tableSetting}
192+
filterButton={{
193+
filterButtonMeta,
194+
updateAllSelectedFilterItem
195+
}}
196+
/>
197+
<TableFilterContainer
198+
filterContainerMeta={filterContainerMeta}
199+
updateTableFilterInfo={updateTableFilterInfo}
200+
disabled={loading}
201+
filterCustomProps={filterCustomProps}
137202
/>
138203
<ActiontechTable
139204
rowKey="uid"
@@ -143,7 +208,7 @@ const UserList: React.FC<{ activePage: UserCenterListEnum }> = ({
143208
total: userList?.total ?? 0
144209
}}
145210
loading={loading}
146-
columns={UserListColumns()}
211+
columns={columns}
147212
errorMessage={requestErrorMessage}
148213
onChange={tableChange}
149214
actions={actions}

0 commit comments

Comments
 (0)