feat(admin): 为用户管理页面添加分页功能
This commit is contained in:
parent
00abe1da15
commit
724eef2b19
|
|
@ -4,7 +4,7 @@
|
|||
<h2>用户管理</h2>
|
||||
<el-button type="primary" @click="openDialog()">新增管理员</el-button>
|
||||
</div>
|
||||
<el-table :data="users" border>
|
||||
<el-table :data="users" v-loading="loading" border>
|
||||
<el-table-column prop="username" label="用户名" />
|
||||
<el-table-column prop="email" label="邮箱" />
|
||||
<el-table-column label="角色">
|
||||
|
|
@ -24,6 +24,15 @@
|
|||
<template #default="{ row }"><el-button size="small" @click="openDialog(row)">编辑</el-button></template>
|
||||
</el-table-column>
|
||||
</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-form :model="form" label-width="90px">
|
||||
|
|
@ -62,11 +71,31 @@ const orgs = ref([])
|
|||
const dialogVisible = ref(false)
|
||||
const editing = ref(null)
|
||||
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 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 }
|
||||
|
||||
function handlePageChange(newPage) {
|
||||
fetchUsers(newPage)
|
||||
}
|
||||
|
||||
function openDialog(user = null) {
|
||||
editing.value = user
|
||||
if (user) Object.assign(form, user)
|
||||
|
|
@ -81,7 +110,7 @@ async function save() {
|
|||
else await client.post('/auth/users/', form)
|
||||
ElMessage.success('保存成功')
|
||||
dialogVisible.value = false
|
||||
fetchUsers()
|
||||
fetchUsers(1)
|
||||
} catch { ElMessage.error('保存失败') } finally { saving.value = false }
|
||||
}
|
||||
onMounted(() => { fetchUsers(); fetchOrgs() })
|
||||
|
|
|
|||
Loading…
Reference in New Issue