131 lines
4.1 KiB
Vue
131 lines
4.1 KiB
Vue
<script setup>
|
|
import { Plus, Search } from '@element-plus/icons-vue'
|
|
import { roleData } from '@/data/roles'
|
|
import { useAdminUsers } from '@/views/userManagement/composables/useAdminUsers'
|
|
import PageHeading from '@/views/components/PageHeading.vue'
|
|
|
|
const {
|
|
keyword,
|
|
roleFilter,
|
|
currentPage,
|
|
pageSize,
|
|
dialogVisible,
|
|
form,
|
|
filtered,
|
|
paginated,
|
|
queryUsers,
|
|
toggleStatus,
|
|
addUser
|
|
} = useAdminUsers()
|
|
</script>
|
|
|
|
<template>
|
|
<PageHeading
|
|
eyebrow="后台管理"
|
|
title="管理员用户列表"
|
|
description="查询和维护后台管理员账号及权限角色。"
|
|
/>
|
|
|
|
<section class="panel admin-users-panel">
|
|
<div class="admin-user-toolbar">
|
|
<el-input
|
|
v-model="keyword"
|
|
:prefix-icon="Search"
|
|
clearable
|
|
placeholder="搜索用户ID或用户名"
|
|
@keyup.enter="queryUsers"
|
|
@clear="queryUsers"
|
|
/>
|
|
<el-select v-model="roleFilter" clearable placeholder="搜索权限角色" @change="queryUsers">
|
|
<el-option
|
|
v-for="role in roleData"
|
|
:key="role.name"
|
|
:label="role.name"
|
|
:value="role.name"
|
|
/>
|
|
</el-select>
|
|
<el-button type="primary" @click="queryUsers">查询</el-button>
|
|
<el-button type="primary" @click="dialogVisible = true">
|
|
<el-icon><Plus /></el-icon>
|
|
添加用户
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-table
|
|
:data="paginated"
|
|
row-key="id"
|
|
border
|
|
class="drama-el-table admin-users-table"
|
|
empty-text="没有符合条件的管理员"
|
|
>
|
|
<el-table-column
|
|
type="index"
|
|
label="序号"
|
|
width="75"
|
|
:index="(currentPage - 1) * pageSize + 1"
|
|
/>
|
|
<el-table-column prop="id" label="ID" width="90" />
|
|
<el-table-column prop="username" label="用户名" min-width="140" />
|
|
<el-table-column prop="name" label="姓名" min-width="130" />
|
|
<el-table-column prop="roleId" label="权限ID" width="110" />
|
|
<el-table-column prop="role" label="权限角色" min-width="150" />
|
|
<el-table-column prop="ipWhitelist" label="IP白名单" min-width="140" />
|
|
<el-table-column label="状态" width="110">
|
|
<template #default="{ row }">
|
|
<el-button link type="primary" @click="toggleStatus(row)">
|
|
{{ row.status }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="2FA状态" width="120">
|
|
<template #default="{ row }">
|
|
<el-tag type="info" effect="plain">{{ row.twoFactor }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createdAt" label="创建时间" min-width="185" />
|
|
<el-table-column prop="lastLogin" label="最后登录" min-width="185" />
|
|
</el-table>
|
|
|
|
<div class="pagination">
|
|
<el-pagination
|
|
v-model:current-page="currentPage"
|
|
v-model:page-size="pageSize"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:total="filtered.length"
|
|
layout="total, prev, pager, next, sizes, jumper"
|
|
background
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<el-dialog v-model="dialogVisible" title="添加管理员" width="520px">
|
|
<el-form label-position="top">
|
|
<div class="form-row">
|
|
<el-form-item label="用户名" required>
|
|
<el-input v-model="form.username" />
|
|
</el-form-item>
|
|
<el-form-item label="姓名" required>
|
|
<el-input v-model="form.name" />
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item label="权限角色" required>
|
|
<el-select v-model="form.role" placeholder="请选择角色">
|
|
<el-option
|
|
v-for="role in roleData"
|
|
:key="role.name"
|
|
:label="role.name"
|
|
:value="role.name"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="IP白名单">
|
|
<el-input v-model="form.ipWhitelist" placeholder="选填，多个 IP 用逗号分隔" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="addUser">确认添加</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|