feat: add status filter
This commit is contained in:
@@ -11,7 +11,7 @@ type UserPageFilter struct {
|
|||||||
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"`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
4
frontend/superadmin/dist/index.html
vendored
4
frontend/superadmin/dist/index.html
vendored
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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,6 +104,8 @@ async function loadStatistics() {
|
|||||||
|
|
||||||
async function ensureStatusOptionsLoaded() {
|
async function ensureStatusOptionsLoaded() {
|
||||||
if (statusOptions.value.length > 0) return;
|
if (statusOptions.value.length > 0) return;
|
||||||
|
statusOptionsLoading.value = true;
|
||||||
|
try {
|
||||||
const list = await UserService.getUserStatuses();
|
const list = await UserService.getUserStatuses();
|
||||||
statusOptions.value = (list || [])
|
statusOptions.value = (list || [])
|
||||||
.map((kv) => ({
|
.map((kv) => ({
|
||||||
@@ -109,6 +113,9 @@ async function ensureStatusOptionsLoaded() {
|
|||||||
value: kv?.key ?? ''
|
value: kv?.key ?? ''
|
||||||
}))
|
}))
|
||||||
.filter((item) => item.value);
|
.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>
|
||||||
|
|||||||
Reference in New Issue
Block a user