feat(adminuser): 优化用户管理筛选并展示筛选人数

- 免押额度与号主类型改为下拉筛选,支持有/无和优质/普通
- 新增用户成长等级筛选
- 列表上方固定展示筛选结果人数,补充组合筛选测试
This commit is contained in:
yml2213
2026-11-06 19:09:39 +08:00
parent 87d252bbee
commit d39f45621b
7 changed files with 259 additions and 29 deletions
@@ -57,16 +57,21 @@ export interface AdminGrowthLevelAdjustPayload {
export interface AdminUserQuery {
keyword?: string
status?: '' | UserStatus
has_deposit_free_quota?: boolean
quality_owner_only?: boolean
/** has=有免押额度,none=无免押额度,空=全部 */
deposit_free_quota?: '' | 'has' | 'none'
/** quality=优质号主,normal=普通用户,空=全部 */
owner_type?: '' | 'quality' | 'normal'
/** 成长等级 code,空=全部 */
growth_level?: string
}
export async function fetchAdminUsers(page = 1, pageSize = 20, query: AdminUserQuery = {}) {
const params: Record<string, unknown> = { page, page_size: pageSize }
if (query.keyword) params.keyword = query.keyword
if (query.status) params.status = query.status
if (query.has_deposit_free_quota) params.has_deposit_free_quota = true
if (query.quality_owner_only) params.quality_owner_only = true
if (query.deposit_free_quota) params.deposit_free_quota = query.deposit_free_quota
if (query.owner_type) params.owner_type = query.owner_type
if (query.growth_level) params.growth_level = query.growth_level
const { data } = await apiClient.get<ApiResponse<PaginatedResult<AdminUserItem>>>(
'/admin/users',
{
@@ -9,6 +9,26 @@
margin-bottom: 16px;
}
.user-filter-summary {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0 0 10px 4px;
font-size: 13px;
color: #64748b;
}
.user-filter-summary strong {
font-size: 18px;
color: #0f172a;
font-variant-numeric: tabular-nums;
}
.user-filter-summary-hint {
font-size: 12px;
color: #94a3b8;
}
.balance-available {
color: #0f172a;
font-variant-numeric: tabular-nums;
@@ -75,8 +75,9 @@ const walletForm = reactive({
const filters = reactive<AdminUserQuery>({
keyword: '',
status: '',
has_deposit_free_quota: false,
quality_owner_only: false,
deposit_free_quota: '',
owner_type: '',
growth_level: '',
})
const {
@@ -98,8 +99,9 @@ function queryUsers() {
function resetFilters() {
filters.keyword = ''
filters.status = ''
filters.has_deposit_free_quota = false
filters.quality_owner_only = false
filters.deposit_free_quota = ''
filters.owner_type = ''
filters.growth_level = ''
queryUsers()
}
@@ -455,14 +457,44 @@ function moneyCent(value: number | string | undefined) {
</el-select>
</el-form-item>
<el-form-item label="免押额度">
<el-checkbox v-model="filters.has_deposit_free_quota" @change="queryUsers">
仅看有额度
</el-checkbox>
<el-select
v-model="filters.deposit_free_quota"
clearable
placeholder="全部免押额度"
style="width: 150px"
@change="queryUsers"
>
<el-option label="有免押额度" value="has" />
<el-option label="无免押额度" value="none" />
</el-select>
</el-form-item>
<el-form-item label="号主类型">
<el-checkbox v-model="filters.quality_owner_only" @change="queryUsers">
仅看优质号主
</el-checkbox>
<el-select
v-model="filters.owner_type"
clearable
placeholder="全部号主类型"
style="width: 150px"
@change="queryUsers"
>
<el-option label="优质号主" value="quality" />
<el-option label="普通用户" value="normal" />
</el-select>
</el-form-item>
<el-form-item label="用户等级">
<el-select
v-model="filters.growth_level"
clearable
placeholder="全部等级"
style="width: 130px"
@change="queryUsers"
>
<el-option
v-for="level in growthLevelOptions"
:key="level.code"
:label="level.name"
:value="level.code"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" :loading="loading" @click="queryUsers"
@@ -473,6 +505,13 @@ function moneyCent(value: number | string | undefined) {
</el-form>
</div>
<div class="user-filter-summary">
<span
>筛选结果 <strong>{{ loading ? '...' : total }}</strong> 人</span
>
<span v-if="loading" class="user-filter-summary-hint">正在统计</span>
</div>
<el-table v-loading="loading" class="table-panel" :data="users" empty-text="未找到匹配的用户">
<el-table-column prop="id" label="用户ID" width="80" />
<el-table-column prop="nickname" label="昵称" min-width="120" />