feat: add status filter

2025-12-17 15:54:46 +08:00
parent 920bbc4c5a
commit a7eb2364d3
6 changed files with 56 additions and 34 deletions
--- a/frontend/superadmin/dist/index.html
+++ b/frontend/superadmin/dist/index.html
@@ -7,8 +7,8 @@
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Sakai Vue</title>
      <link href="https://fonts.cdnfonts.com/css/lato" rel="stylesheet">
-  <script type="module" crossorigin src="./assets/index-PcBKlZrK.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-BDK8BdlV.css">
+  <script type="module" crossorigin src="./assets/index-C3wBcLrK.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-Ba8sjR1v.css">
 </head>

 <body>
--- a/frontend/superadmin/src/components/SearchField.vue
+++ b/frontend/superadmin/src/components/SearchField.vue
@@ -10,12 +10,10 @@ const props = defineProps({
 <template>
    <div :class="props.colClass">
        <div class="flex items-center gap-3">
-            <label v-if="props.forId" :for="props.forId"
-                class="text-sm font-medium text-surface-900 dark:text-surface-0" :class="props.labelClass">
+            <label v-if="props.forId" :for="props.forId" class="text-sm font-medium text-surface-900 dark:text-surface-0" :class="props.labelClass">
                {{ props.label }}
            </label>
-            <span v-else class="text-sm font-medium text-surface-900 dark:text-surface-0" :class="props.labelClass">{{
-                props.label }}</span>
+            <span v-else class="text-sm font-medium text-surface-900 dark:text-surface-0" :class="props.labelClass">{{ props.label }}</span>
            <div class="flex-1 min-w-0">
                <slot />
            </div>
--- a/frontend/superadmin/src/service/UserService.js
+++ b/frontend/superadmin/src/service/UserService.js
@@ -7,8 +7,8 @@ function normalizeItems(items) {
 }

 export const UserService = {
-    async listUsers({ page, limit, tenantID, username, sortField, sortOrder } = {}) {
-        const query = { page, limit, tenantID, username };
+    async listUsers({ page, limit, tenantID, username, status, sortField, sortOrder } = {}) {
+        const query = { page, limit, tenantID, username, status };
        if (sortField && sortOrder) {
            if (sortOrder === 1) query.asc = sortField;
            if (sortOrder === -1) query.desc = sortField;
--- a/frontend/superadmin/src/views/superadmin/Users.vue
+++ b/frontend/superadmin/src/views/superadmin/Users.vue
@@ -16,6 +16,7 @@ const page = ref(1);
 const rows = ref(10);

 const username = ref('');
+const status = ref('');
 const sortField = ref('id');
 const sortOrder = ref(-1);

@@ -45,6 +46,7 @@ function getStatusSeverity(status) {

 const statusDialogVisible = ref(false);
 const statusLoading = ref(false);
+const statusOptionsLoading = ref(false);
 const statusOptions = ref([]);
 const statusUser = ref(null);
 const statusValue = ref(null);
@@ -102,13 +104,18 @@ async function loadStatistics() {

 async function ensureStatusOptionsLoaded() {
    if (statusOptions.value.length > 0) return;
-    const list = await UserService.getUserStatuses();
-    statusOptions.value = (list || [])
-        .map((kv) => ({
-            label: kv?.value ?? kv?.key ?? '-',
-            value: kv?.key ?? ''
-        }))
-        .filter((item) => item.value);
+    statusOptionsLoading.value = true;
+    try {
+        const list = await UserService.getUserStatuses();
+        statusOptions.value = (list || [])
+            .map((kv) => ({
+                label: kv?.value ?? kv?.key ?? '-',
+                value: kv?.key ?? ''
+            }))
+            .filter((item) => item.value);
+    } finally {
+        statusOptionsLoading.value = false;
+    }
 }

 async function openStatusDialog(user) {
@@ -116,13 +123,10 @@ async function openStatusDialog(user) {
    statusValue.value = user?.status ?? null;
    statusDialogVisible.value = true;

-    statusLoading.value = true;
    try {
        await ensureStatusOptionsLoaded();
    } catch (error) {
        toast.add({ severity: 'error', summary: '加载失败', detail: error?.message || '无法加载用户状态列表', life: 4000 });
-    } finally {
-        statusLoading.value = false;
    }
 }

@@ -151,6 +155,7 @@ async function loadUsers() {
            page: page.value,
            limit: rows.value,
            username: username.value,
+            status: status.value,
            sortField: sortField.value,
            sortOrder: sortOrder.value
        });
@@ -175,6 +180,7 @@ function onSearch() {

 function onReset() {
    username.value = '';
+    status.value = '';
    sortField.value = 'id';
    sortOrder.value = -1;
    page.value = 1;
@@ -197,6 +203,7 @@ function onSort(event) {
 onMounted(() => {
    loadUsers();
    loadStatistics();
+    ensureStatusOptionsLoaded().catch(() => {});
 });
 </script>

@@ -217,21 +224,37 @@ onMounted(() => {
                        <InputText v-model="username" placeholder="请输入" class="w-full" @keyup.enter="onSearch" />
                    </IconField>
                </SearchField>
+                <SearchField label="状态">
+                    <Select v-model="status" :options="statusOptions" optionLabel="label" optionValue="value" placeholder="请选择" :loading="statusOptionsLoading" class="w-full" />
+                </SearchField>
            </SearchPanel>

-            <DataTable :value="users" 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"
+            <DataTable
+                :value="users"
+                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} 条"
                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="username" header="用户名" sortable style="min-width: 14rem" />
                <Column field="status" header="状态" sortable style="min-width: 10rem">
                    <template #body="{ data }">
-                        <Tag :value="data.status_description || data.status || '-'"
-                            :severity="getStatusSeverity(data.status)" class="cursor-pointer"
-                            @click="openStatusDialog(data)" />
+                        <Tag :value="data.status_description || data.status || '-'" :severity="getStatusSeverity(data.status)" class="cursor-pointer" @click="openStatusDialog(data)" />
                    </template>
                </Column>
                <Column field="roles" header="角色" style="min-width: 16rem">
@@ -270,15 +293,12 @@ onMounted(() => {
            <div class="flex flex-col gap-4">
                <div>
                    <label class="block font-medium mb-2">用户状态</label>
-                    <Select v-model="statusValue" :options="statusOptions" optionLabel="label" optionValue="value"
-                        placeholder="选择状态" :disabled="statusLoading" fluid />
+                    <Select v-model="statusValue" :options="statusOptions" optionLabel="label" optionValue="value" placeholder="选择状态" :disabled="statusLoading" fluid />
                </div>
            </div>
            <template #footer>
-                <Button label="取消" icon="pi pi-times" text @click="statusDialogVisible = false"
-                    :disabled="statusLoading" />
-                <Button label="确认" icon="pi pi-check" @click="confirmUpdateStatus" :loading="statusLoading"
-                    :disabled="!statusValue" />
+                <Button label="取消" icon="pi pi-times" text @click="statusDialogVisible = false" :disabled="statusLoading" />
+                <Button label="确认" icon="pi pi-check" @click="confirmUpdateStatus" :loading="statusLoading" :disabled="!statusValue" />
            </template>
        </Dialog>
    </div>