feat(admin): 为用户管理页面添加分页功能

This commit is contained in:
TianyangZhang 2026-03-25 17:02:16 +08:00
parent 00abe1da15
commit 724eef2b19
1 changed files with 32 additions and 3 deletions

View File

@ -4,7 +4,7 @@
<h2>用户管理</h2> <h2>用户管理</h2>
<el-button type="primary" @click="openDialog()">新增管理员</el-button> <el-button type="primary" @click="openDialog()">新增管理员</el-button>
</div> </div>
<el-table :data="users" border> <el-table :data="users" v-loading="loading" border>
<el-table-column prop="username" label="用户名" /> <el-table-column prop="username" label="用户名" />
<el-table-column prop="email" label="邮箱" /> <el-table-column prop="email" label="邮箱" />
<el-table-column label="角色"> <el-table-column label="角色">
@ -24,6 +24,15 @@
<template #default="{ row }"><el-button size="small" @click="openDialog(row)">编辑</el-button></template> <template #default="{ row }"><el-button size="small" @click="openDialog(row)">编辑</el-button></template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div style="margin-top: 16px; text-align: right;">
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="total"
@current-change="handlePageChange"
layout="total, prev, pager, next, jumper"
/>
</div>
<el-dialog v-model="dialogVisible" :title="editing ? '编辑用户' : '新增管理员'" width="480px"> <el-dialog v-model="dialogVisible" :title="editing ? '编辑用户' : '新增管理员'" width="480px">
<el-form :model="form" label-width="90px"> <el-form :model="form" label-width="90px">
@ -62,11 +71,31 @@ const orgs = ref([])
const dialogVisible = ref(false) const dialogVisible = ref(false)
const editing = ref(null) const editing = ref(null)
const saving = ref(false) const saving = ref(false)
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const form = reactive({ username: '', email: '', phone: '', role: 'admin', organization: null, password: '', is_active: true }) const form = reactive({ username: '', email: '', phone: '', role: 'admin', organization: null, password: '', is_active: true })
const fetchUsers = async () => { const { data } = await client.get('/auth/users/'); users.value = data.results || data } const fetchUsers = async (page = 1) => {
loading.value = true
try {
const { data } = await client.get('/auth/users/', { params: { page } })
users.value = data.results
total.value = data.count
currentPage.value = page
} catch (error) {
ElMessage.error('加载用户列表失败,请重试')
} finally {
loading.value = false
}
}
const fetchOrgs = async () => { const { data } = await manageOrganizations(); orgs.value = data.results } const fetchOrgs = async () => { const { data } = await manageOrganizations(); orgs.value = data.results }
function handlePageChange(newPage) {
fetchUsers(newPage)
}
function openDialog(user = null) { function openDialog(user = null) {
editing.value = user editing.value = user
if (user) Object.assign(form, user) if (user) Object.assign(form, user)
@ -81,7 +110,7 @@ async function save() {
else await client.post('/auth/users/', form) else await client.post('/auth/users/', form)
ElMessage.success('保存成功') ElMessage.success('保存成功')
dialogVisible.value = false dialogVisible.value = false
fetchUsers() fetchUsers(1)
} catch { ElMessage.error('保存失败') } finally { saving.value = false } } catch { ElMessage.error('保存失败') } finally { saving.value = false }
} }
onMounted(() => { fetchUsers(); fetchOrgs() }) onMounted(() => { fetchUsers(); fetchOrgs() })