feat(admin): 为用户管理页面添加分页功能
This commit is contained in:
parent
00abe1da15
commit
724eef2b19
|
|
@ -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() })
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue