feat: add status filter

This commit is contained in:
2025-12-17 15:54:46 +08:00
parent 920bbc4c5a
commit a7eb2364d3
6 changed files with 56 additions and 34 deletions

View File

@@ -10,9 +10,9 @@ type UserPageFilter struct {
requests.Pagination requests.Pagination
requests.SortQueryFilter requests.SortQueryFilter
Username *string `query:"username"` Username *string `query:"username"`
Status *string `query:"status"` Status *consts.UserStatus `query:"status"`
TenantID *int64 `query:"tenant_id"` TenantID *int64 `query:"tenant_id"`
} }
type UserItem struct { type UserItem struct {

View File

@@ -70,6 +70,10 @@ func (t *user) Page(ctx context.Context, filter *dto.UserPageFilter) (*requests.
conds = append(conds, tuTbl.TenantID.Eq(*filter.TenantID)) conds = append(conds, tuTbl.TenantID.Eq(*filter.TenantID))
} }
if filter.Status != nil {
conds = append(conds, tbl.Status.Eq(*filter.Status))
}
filter.Pagination.Format() filter.Pagination.Format()
users, total, err := query.Where(conds...).Order(tbl.ID.Desc()).FindByPage(int(filter.Offset()), int(filter.Limit)) users, total, err := query.Where(conds...).Order(tbl.ID.Desc()).FindByPage(int(filter.Offset()), int(filter.Limit))
if err != nil { if err != nil {

View File

@@ -7,8 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sakai Vue</title> <title>Sakai Vue</title>
<link href="https://fonts.cdnfonts.com/css/lato" rel="stylesheet"> <link href="https://fonts.cdnfonts.com/css/lato" rel="stylesheet">
<script type="module" crossorigin src="./assets/index-PcBKlZrK.js"></script> <script type="module" crossorigin src="./assets/index-C3wBcLrK.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BDK8BdlV.css"> <link rel="stylesheet" crossorigin href="./assets/index-Ba8sjR1v.css">
</head> </head>
<body> <body>

View File

@@ -10,12 +10,10 @@ const props = defineProps({
<template> <template>
<div :class="props.colClass"> <div :class="props.colClass">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<label v-if="props.forId" :for="props.forId" <label v-if="props.forId" :for="props.forId" class="text-sm font-medium text-surface-900 dark:text-surface-0" :class="props.labelClass">
class="text-sm font-medium text-surface-900 dark:text-surface-0" :class="props.labelClass">
{{ props.label }} {{ props.label }}
</label> </label>
<span v-else class="text-sm font-medium text-surface-900 dark:text-surface-0" :class="props.labelClass">{{ <span v-else class="text-sm font-medium text-surface-900 dark:text-surface-0" :class="props.labelClass">{{ props.label }}</span>
props.label }}</span>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<slot /> <slot />
</div> </div>

View File

@@ -7,8 +7,8 @@ function normalizeItems(items) {
} }
export const UserService = { export const UserService = {
async listUsers({ page, limit, tenantID, username, sortField, sortOrder } = {}) { async listUsers({ page, limit, tenantID, username, status, sortField, sortOrder } = {}) {
const query = { page, limit, tenantID, username }; const query = { page, limit, tenantID, username, status };
if (sortField && sortOrder) { if (sortField && sortOrder) {
if (sortOrder === 1) query.asc = sortField; if (sortOrder === 1) query.asc = sortField;
if (sortOrder === -1) query.desc = sortField; if (sortOrder === -1) query.desc = sortField;

View File

@@ -16,6 +16,7 @@ const page = ref(1);
const rows = ref(10); const rows = ref(10);
const username = ref(''); const username = ref('');
const status = ref('');
const sortField = ref('id'); const sortField = ref('id');
const sortOrder = ref(-1); const sortOrder = ref(-1);
@@ -45,6 +46,7 @@ function getStatusSeverity(status) {
const statusDialogVisible = ref(false); const statusDialogVisible = ref(false);
const statusLoading = ref(false); const statusLoading = ref(false);
const statusOptionsLoading = ref(false);
const statusOptions = ref([]); const statusOptions = ref([]);
const statusUser = ref(null); const statusUser = ref(null);
const statusValue = ref(null); const statusValue = ref(null);
@@ -102,13 +104,18 @@ async function loadStatistics() {
async function ensureStatusOptionsLoaded() { async function ensureStatusOptionsLoaded() {
if (statusOptions.value.length > 0) return; if (statusOptions.value.length > 0) return;
const list = await UserService.getUserStatuses(); statusOptionsLoading.value = true;
statusOptions.value = (list || []) try {
.map((kv) => ({ const list = await UserService.getUserStatuses();
label: kv?.value ?? kv?.key ?? '-', statusOptions.value = (list || [])
value: kv?.key ?? '' .map((kv) => ({
})) label: kv?.value ?? kv?.key ?? '-',
.filter((item) => item.value); value: kv?.key ?? ''
}))
.filter((item) => item.value);
} finally {
statusOptionsLoading.value = false;
}
} }
async function openStatusDialog(user) { async function openStatusDialog(user) {
@@ -116,13 +123,10 @@ async function openStatusDialog(user) {
statusValue.value = user?.status ?? null; statusValue.value = user?.status ?? null;
statusDialogVisible.value = true; statusDialogVisible.value = true;
statusLoading.value = true;
try { try {
await ensureStatusOptionsLoaded(); await ensureStatusOptionsLoaded();
} catch (error) { } catch (error) {
toast.add({ severity: 'error', summary: '加载失败', detail: error?.message || '无法加载用户状态列表', life: 4000 }); toast.add({ severity: 'error', summary: '加载失败', detail: error?.message || '无法加载用户状态列表', life: 4000 });
} finally {
statusLoading.value = false;
} }
} }
@@ -151,6 +155,7 @@ async function loadUsers() {
page: page.value, page: page.value,
limit: rows.value, limit: rows.value,
username: username.value, username: username.value,
status: status.value,
sortField: sortField.value, sortField: sortField.value,
sortOrder: sortOrder.value sortOrder: sortOrder.value
}); });
@@ -175,6 +180,7 @@ function onSearch() {
function onReset() { function onReset() {
username.value = ''; username.value = '';
status.value = '';
sortField.value = 'id'; sortField.value = 'id';
sortOrder.value = -1; sortOrder.value = -1;
page.value = 1; page.value = 1;
@@ -197,6 +203,7 @@ function onSort(event) {
onMounted(() => { onMounted(() => {
loadUsers(); loadUsers();
loadStatistics(); loadStatistics();
ensureStatusOptionsLoaded().catch(() => {});
}); });
</script> </script>
@@ -217,21 +224,37 @@ onMounted(() => {
<InputText v-model="username" placeholder="请输入" class="w-full" @keyup.enter="onSearch" /> <InputText v-model="username" placeholder="请输入" class="w-full" @keyup.enter="onSearch" />
</IconField> </IconField>
</SearchField> </SearchField>
<SearchField label="状态">
<Select v-model="status" :options="statusOptions" optionLabel="label" optionValue="value" placeholder="请选择" :loading="statusOptionsLoading" class="w-full" />
</SearchField>
</SearchPanel> </SearchPanel>
<DataTable :value="users" dataKey="id" :loading="loading" lazy :paginator="true" :rows="rows" <DataTable
:totalRecords="totalRecords" :first="(page - 1) * rows" :rowsPerPageOptions="[10, 20, 50, 100]" :value="users"
sortMode="single" :sortField="sortField" :sortOrder="sortOrder" @page="onPage" @sort="onSort" dataKey="id"
:loading="loading"
lazy
:paginator="true"
:rows="rows"
:totalRecords="totalRecords"
:first="(page - 1) * rows"
:rowsPerPageOptions="[10, 20, 50, 100]"
sortMode="single"
:sortField="sortField"
:sortOrder="sortOrder"
@page="onPage"
@sort="onSort"
currentPageReportTemplate="显示第 {first} - {last} 条,共 {totalRecords} 条" currentPageReportTemplate="显示第 {first} - {last} 条,共 {totalRecords} 条"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
scrollable scrollHeight="flex" responsiveLayout="scroll"> scrollable
scrollHeight="flex"
responsiveLayout="scroll"
>
<Column field="id" header="ID" sortable style="min-width: 6rem" /> <Column field="id" header="ID" sortable style="min-width: 6rem" />
<Column field="username" header="用户名" sortable style="min-width: 14rem" /> <Column field="username" header="用户名" sortable style="min-width: 14rem" />
<Column field="status" header="状态" sortable style="min-width: 10rem"> <Column field="status" header="状态" sortable style="min-width: 10rem">
<template #body="{ data }"> <template #body="{ data }">
<Tag :value="data.status_description || data.status || '-'" <Tag :value="data.status_description || data.status || '-'" :severity="getStatusSeverity(data.status)" class="cursor-pointer" @click="openStatusDialog(data)" />
:severity="getStatusSeverity(data.status)" class="cursor-pointer"
@click="openStatusDialog(data)" />
</template> </template>
</Column> </Column>
<Column field="roles" header="角色" style="min-width: 16rem"> <Column field="roles" header="角色" style="min-width: 16rem">
@@ -270,15 +293,12 @@ onMounted(() => {
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div> <div>
<label class="block font-medium mb-2">用户状态</label> <label class="block font-medium mb-2">用户状态</label>
<Select v-model="statusValue" :options="statusOptions" optionLabel="label" optionValue="value" <Select v-model="statusValue" :options="statusOptions" optionLabel="label" optionValue="value" placeholder="选择状态" :disabled="statusLoading" fluid />
placeholder="选择状态" :disabled="statusLoading" fluid />
</div> </div>
</div> </div>
<template #footer> <template #footer>
<Button label="取消" icon="pi pi-times" text @click="statusDialogVisible = false" <Button label="取消" icon="pi pi-times" text @click="statusDialogVisible = false" :disabled="statusLoading" />
:disabled="statusLoading" /> <Button label="确认" icon="pi pi-check" @click="confirmUpdateStatus" :loading="statusLoading" :disabled="!statusValue" />
<Button label="确认" icon="pi pi-check" @click="confirmUpdateStatus" :loading="statusLoading"
:disabled="!statusValue" />
</template> </template>
</Dialog> </Dialog>
</div> </div>