fix(admin): 修复表格批量操作和搜索功能问题
1. 恢复账号管理批量操作栏缺失的功能按钮 - 添加"本页全选"按钮支持批量选择当前页所有账号 - 添加"清除已选"按钮快速清空已选账号列表 - 在重构拆分组件时遗漏,现已恢复 2. 修复分组管理搜索功能仅搜索当前页的问题 - 前端:移除本地过滤逻辑,改用后端搜索 - 后端:添加 search 参数支持,搜索名称和描述字段 - 支持不区分大小写的模糊匹配 - 统一所有管理页面的搜索体验
This commit is contained in:
@@ -16,7 +16,7 @@ import type {
|
||||
* List all groups with pagination
|
||||
* @param page - Page number (default: 1)
|
||||
* @param pageSize - Items per page (default: 20)
|
||||
* @param filters - Optional filters (platform, status, is_exclusive)
|
||||
* @param filters - Optional filters (platform, status, is_exclusive, search)
|
||||
* @returns Paginated list of groups
|
||||
*/
|
||||
export async function list(
|
||||
@@ -26,6 +26,7 @@ export async function list(
|
||||
platform?: GroupPlatform
|
||||
status?: 'active' | 'inactive'
|
||||
is_exclusive?: boolean
|
||||
search?: string
|
||||
},
|
||||
options?: {
|
||||
signal?: AbortSignal
|
||||
|
||||
@@ -1,6 +1,23 @@
|
||||
<template>
|
||||
<div v-if="selectedIds.length > 0" class="mb-4 flex items-center justify-between p-3 bg-primary-50 rounded-lg">
|
||||
<span class="text-sm font-medium">{{ t('admin.accounts.bulkActions.selected', { count: selectedIds.length }) }}</span>
|
||||
<div v-if="selectedIds.length > 0" class="mb-4 flex items-center justify-between p-3 bg-primary-50 rounded-lg dark:bg-primary-900/20">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="text-sm font-medium text-primary-900 dark:text-primary-100">
|
||||
{{ t('admin.accounts.bulkActions.selected', { count: selectedIds.length }) }}
|
||||
</span>
|
||||
<button
|
||||
@click="$emit('select-page')"
|
||||
class="text-xs font-medium text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
|
||||
>
|
||||
{{ t('admin.accounts.bulkActions.selectCurrentPage') }}
|
||||
</button>
|
||||
<span class="text-gray-300 dark:text-primary-800">•</span>
|
||||
<button
|
||||
@click="$emit('clear')"
|
||||
class="text-xs font-medium text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
|
||||
>
|
||||
{{ t('admin.accounts.bulkActions.clear') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button @click="$emit('delete')" class="btn btn-danger btn-sm">{{ t('admin.accounts.bulkActions.delete') }}</button>
|
||||
<button @click="$emit('edit')" class="btn btn-primary btn-sm">{{ t('admin.accounts.bulkActions.edit') }}</button>
|
||||
@@ -10,5 +27,5 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
defineProps(['selectedIds']); defineEmits(['delete', 'edit']); const { t } = useI18n()
|
||||
defineProps(['selectedIds']); defineEmits(['delete', 'edit', 'clear', 'select-page']); const { t } = useI18n()
|
||||
</script>
|
||||
@@ -16,6 +16,7 @@
|
||||
type="text"
|
||||
:placeholder="t('admin.groups.searchGroups')"
|
||||
class="input pl-10"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
<Select
|
||||
@@ -64,7 +65,7 @@
|
||||
</template>
|
||||
|
||||
<template #table>
|
||||
<DataTable :columns="columns" :data="displayedGroups" :loading="loading">
|
||||
<DataTable :columns="columns" :data="groups" :loading="loading">
|
||||
<template #cell-name="{ value }">
|
||||
<span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
|
||||
</template>
|
||||
@@ -932,16 +933,6 @@ const pagination = reactive({
|
||||
|
||||
let abortController: AbortController | null = null
|
||||
|
||||
const displayedGroups = computed(() => {
|
||||
const q = searchQuery.value.trim().toLowerCase()
|
||||
if (!q) return groups.value
|
||||
return groups.value.filter((group) => {
|
||||
const name = group.name?.toLowerCase?.() ?? ''
|
||||
const description = group.description?.toLowerCase?.() ?? ''
|
||||
return name.includes(q) || description.includes(q)
|
||||
})
|
||||
})
|
||||
|
||||
const showCreateModal = ref(false)
|
||||
const showEditModal = ref(false)
|
||||
const showDeleteDialog = ref(false)
|
||||
@@ -1011,7 +1002,8 @@ const loadGroups = async () => {
|
||||
const response = await adminAPI.groups.list(pagination.page, pagination.page_size, {
|
||||
platform: (filters.platform as GroupPlatform) || undefined,
|
||||
status: filters.status as any,
|
||||
is_exclusive: filters.is_exclusive ? filters.is_exclusive === 'true' : undefined
|
||||
is_exclusive: filters.is_exclusive ? filters.is_exclusive === 'true' : undefined,
|
||||
search: searchQuery.value.trim() || undefined
|
||||
}, { signal })
|
||||
if (signal.aborted) return
|
||||
groups.value = response.items
|
||||
@@ -1030,6 +1022,15 @@ const loadGroups = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
let searchTimeout: ReturnType<typeof setTimeout>
|
||||
const handleSearch = () => {
|
||||
clearTimeout(searchTimeout)
|
||||
searchTimeout = setTimeout(() => {
|
||||
pagination.page = 1
|
||||
loadGroups()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
pagination.page = page
|
||||
loadGroups()
|
||||
|
||||
Reference in New Issue
Block a user