task-41(账号/权限页面): 定义用户列表与分页 DTO
新增纯模块 users-dto.ts：UserListParams/UserPageResult/UserListQuery 契约与 Java AdminUserController 对齐(page/page_size/username/items/total)； normalizeUserPageParams 页码下限1、页大小夹取、空关键字去抖；toUserListQuery 按 snake_case 序列化；UsersPage 改用 AdminUser/UserPageResult 类型。8 用例全过。
This commit is contained in:
@@ -0,0 +1,76 @@
|
||||
/** 用户管理列表/分页 DTO（任务 41）：纯逻辑，无框架依赖，与 Java AdminUserController 对齐。 */
|
||||
import type { AdminUser } from '../types/admin'
|
||||
|
||||
export const USER_PAGE_DEFAULT_SIZE = 15
|
||||
export const USER_PAGE_MIN_PAGE = 1
|
||||
export const USER_PAGE_MAX_SIZE = 200
|
||||
|
||||
/** 前端用户列表筛选/分页状态（页面局部，不入 Pinia）。 */
|
||||
export interface UserListParams {
|
||||
page: number
|
||||
pageSize: number
|
||||
/** 用户名模糊关键字（对应后端 username|search 的 kw）。 */
|
||||
keyword?: string
|
||||
createdById?: number | null
|
||||
adminId?: number | null
|
||||
}
|
||||
|
||||
/** 序列化到 GET /api/admin/users 的查询参数（Java snake_case）。 */
|
||||
export interface UserListQuery {
|
||||
page: number
|
||||
page_size: number
|
||||
username?: string
|
||||
search?: string
|
||||
created_by_id?: number
|
||||
admin_id?: number
|
||||
}
|
||||
|
||||
/** 用户列表项即 AdminUser（与 Java AdminUserItemVo 字段对齐）。 */
|
||||
export type AdminUserItem = AdminUser
|
||||
|
||||
/** 分页结果：与 Java AdminUserListVo.items/total/page/page_size 归一后的前端 DTO。 */
|
||||
export interface UserPageResult {
|
||||
items: AdminUserItem[]
|
||||
total: number
|
||||
page: number
|
||||
pageSize: number
|
||||
currentUserId?: number | null
|
||||
currentUserUsername?: string
|
||||
admins?: Array<{ id: number; username: string }>
|
||||
}
|
||||
|
||||
function finiteInt(value: unknown): number | null {
|
||||
return typeof value === 'number' && Number.isFinite(value) ? Math.floor(value) : null
|
||||
}
|
||||
|
||||
/** 归一化分页/筛选参数：页码下限 1、页大小 1..上限，空关键字视为无过滤。 */
|
||||
export function normalizeUserPageParams(raw: Partial<UserListParams>): UserListParams {
|
||||
const page = Math.max(finiteInt(raw.page) ?? USER_PAGE_MIN_PAGE, USER_PAGE_MIN_PAGE)
|
||||
const rawSize = finiteInt(raw.pageSize)
|
||||
const pageSize =
|
||||
rawSize === null || rawSize < USER_PAGE_MIN_PAGE
|
||||
? USER_PAGE_DEFAULT_SIZE
|
||||
: Math.min(rawSize, USER_PAGE_MAX_SIZE)
|
||||
const keyword = typeof raw.keyword === 'string' ? raw.keyword.trim() || undefined : undefined
|
||||
return {
|
||||
page,
|
||||
pageSize,
|
||||
keyword,
|
||||
createdById: typeof raw.createdById === 'number' ? raw.createdById : null,
|
||||
adminId: typeof raw.adminId === 'number' ? raw.adminId : null,
|
||||
}
|
||||
}
|
||||
|
||||
/** 把前端分页/筛选状态转成 Java 查询参数（缺省字段不下发）。 */
|
||||
export function toUserListQuery(params: UserListParams): UserListQuery {
|
||||
const query: UserListQuery = { page: params.page, page_size: params.pageSize }
|
||||
if (params.keyword) query.username = params.keyword
|
||||
if (params.createdById != null) query.created_by_id = params.createdById
|
||||
if (params.adminId != null) query.admin_id = params.adminId
|
||||
return query
|
||||
}
|
||||
|
||||
/** 无数据分页结果缺省值（首屏/加载前占位）。 */
|
||||
export function emptyUserPageResult(): UserPageResult {
|
||||
return { items: [], total: 0, page: USER_PAGE_MIN_PAGE, pageSize: USER_PAGE_DEFAULT_SIZE }
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { http, unwrap } from '@/api/http'
|
||||
import type { AdminUser } from '@/types/admin'
|
||||
import type { UserPageResult } from '@/api/users-dto'
|
||||
|
||||
const loading = ref(false)
|
||||
const rows = ref<AdminUser[]>([])
|
||||
const total = ref(0)
|
||||
const form = reactive({ username: '', page: 1, pageSize: 15 })
|
||||
|
||||
async function loadUsers() {
|
||||
loading.value = true
|
||||
try {
|
||||
const { data } = await http.get('/api/admin/users', { params: { username: form.username || undefined, page: form.page, page_size: form.pageSize } })
|
||||
const result = unwrap<UserPageResult | { data?: UserPageResult }>(data)
|
||||
const value: UserPageResult = 'data' in result && result.data ? result.data : result as UserPageResult
|
||||
rows.value = value.items || []
|
||||
total.value = Number(value.total || 0)
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '用户列表加载失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function removeUser(row: AdminUser) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定删除用户“${row.username}”吗？`, '删除确认', { type: 'warning' })
|
||||
await http.delete(`/api/admin/user/${row.id}`)
|
||||
ElMessage.success('删除成功')
|
||||
await loadUsers()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel' && error !== 'close') ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
function changePage(page: number) {
|
||||
form.page = page
|
||||
void loadUsers()
|
||||
}
|
||||
|
||||
onMounted(loadUsers)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-stack">
|
||||
<div class="page-heading">
|
||||
<div>
|
||||
<h2>用户管理</h2>
|
||||
<p>管理后台账号、角色和创建关系。</p>
|
||||
</div>
|
||||
<el-button type="primary">新建用户</el-button>
|
||||
</div>
|
||||
<el-card shadow="never">
|
||||
<el-form inline @submit.prevent="loadUsers">
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="form.username" clearable placeholder="模糊搜索" @keyup.enter="loadUsers" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="loadUsers">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="never">
|
||||
<el-table v-loading="loading" :data="rows" stripe>
|
||||
<el-table-column prop="id" label="ID" width="90" />
|
||||
<el-table-column prop="username" label="用户名" min-width="180" />
|
||||
<el-table-column prop="role" label="角色" width="140" />
|
||||
<el-table-column prop="creatorUsername" label="所属管理员" width="160" />
|
||||
<el-table-column prop="createdAt" label="创建时间" width="180" />
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="danger" @click="removeUser(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="table-footer">
|
||||
<span>共 {{ total }} 条</span>
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:page-size="form.pageSize"
|
||||
:current-page="form.page"
|
||||
:total="total"
|
||||
@current-change="changePage"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user