492 lines
14 KiB
Vue
492 lines
14 KiB
Vue
<script setup lang="ts">
|
||
import { formatDateTime } from '@/utils/datetime'
|
||
/** 用户管理页 · 像素复刻旧版 admin.html panel-users（自绘：panel-box + 页头按钮 + 筛选 form-row + 旧式表格/分页 + 原生 confirm 删除）。
|
||
* script 逻辑沿用现有 Vue 实现；创建/编辑弹窗保留现有组件（含用户菜单权限树）。 */
|
||
import { computed, onMounted, reactive, ref } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import type { AdminUser } from '@/types/admin'
|
||
import { roleLabel } from '@/types/admin'
|
||
import { useAdminSessionStore } from '@/stores/admin-session'
|
||
import { deleteUser, fetchUserList } from '@/api/users'
|
||
import { createUserFilterState, toUserListParams, type UserFilterState } from './users-filter'
|
||
import { totalPageCount } from './user-pagination'
|
||
import { deleteBlockReason, deleteConfirmMessage } from './user-delete-model'
|
||
import { listPhaseOf, userListEmptyHint } from './user-list-state'
|
||
import { isEditableUser } from './user-edit-model'
|
||
import CreateUserDialog from './CreateUserDialog.vue'
|
||
import EditUserDialog from './EditUserDialog.vue'
|
||
|
||
const session = useAdminSessionStore()
|
||
const loading = ref(false)
|
||
const loadError = ref('')
|
||
const rows = ref<AdminUser[]>([])
|
||
const total = ref(0)
|
||
/** 所属管理员候选（来自列表响应的 admins），供超管筛选下拉使用。 */
|
||
const admins = ref<Array<{ id: number; username: string }>>([])
|
||
const filters = reactive<UserFilterState>(createUserFilterState())
|
||
const isSuperAdmin = computed(() => session.isSuperAdmin)
|
||
const currentUserId = computed(() => session.user?.id ?? null)
|
||
const statePhase = computed(() => listPhaseOf({ loading: loading.value, error: loadError.value, items: rows.value, total: total.value }))
|
||
const jumpPage = ref('')
|
||
const totalPages = computed(() => Math.max(1, totalPageCount(total.value, filters.pageSize)))
|
||
|
||
const createVisible = ref(false)
|
||
const editVisible = ref(false)
|
||
const editUser = ref<AdminUser | null>(null)
|
||
|
||
function openCreate(): void {
|
||
createVisible.value = true
|
||
}
|
||
|
||
function openEdit(row: AdminUser): void {
|
||
if (!isEditableUser(row.role)) return
|
||
editUser.value = row
|
||
editVisible.value = true
|
||
}
|
||
|
||
function editableOf(row: AdminUser): boolean {
|
||
return isEditableUser(row.role)
|
||
}
|
||
|
||
async function loadUsers() {
|
||
loading.value = true
|
||
loadError.value = ''
|
||
try {
|
||
const page = await fetchUserList(toUserListParams(filters))
|
||
rows.value = page.items
|
||
total.value = page.total
|
||
if (Array.isArray(page.admins)) admins.value = page.admins
|
||
// 数据被删/筛选后总页数收缩：页码越界时回钳到末页并重新加载一次。
|
||
const last = totalPageCount(page.total, filters.pageSize)
|
||
if (last > 0 && filters.page > last) {
|
||
filters.page = last
|
||
const retried = await fetchUserList(toUserListParams(filters))
|
||
rows.value = retried.items
|
||
total.value = retried.total
|
||
}
|
||
} catch (error) {
|
||
loadError.value = error instanceof Error ? error.message : '用户列表加载失败'
|
||
ElMessage.error(loadError.value)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
/** 错误态重试：重新拉取当前筛选列表。 */
|
||
function retry() {
|
||
void loadUsers()
|
||
}
|
||
|
||
/** 提交新筛选条件：重置回第一页再查询。 */
|
||
function search() {
|
||
filters.page = 1
|
||
void loadUsers()
|
||
}
|
||
|
||
async function removeUser(row: AdminUser) {
|
||
const reason = deleteBlockReason(row, currentUserId.value)
|
||
if (reason) {
|
||
ElMessage.warning(reason)
|
||
return
|
||
}
|
||
// 对齐旧版：浏览器原生 confirm 确认后删除。
|
||
if (!window.confirm(deleteConfirmMessage(row))) return
|
||
try {
|
||
await deleteUser(row.id)
|
||
ElMessage.success('删除成功')
|
||
await loadUsers()
|
||
} catch (error) {
|
||
ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
||
}
|
||
}
|
||
|
||
function changePage(page: number) {
|
||
filters.page = page
|
||
void loadUsers()
|
||
}
|
||
|
||
function changeSize(size: number) {
|
||
filters.pageSize = size
|
||
filters.page = 1
|
||
void loadUsers()
|
||
}
|
||
|
||
function goJump() {
|
||
const n = Number.parseInt(jumpPage.value, 10)
|
||
if (Number.isNaN(n)) {
|
||
ElMessage.warning('请输入页码')
|
||
return
|
||
}
|
||
changePage(Math.min(Math.max(n, 1), totalPages.value))
|
||
}
|
||
|
||
onMounted(loadUsers)
|
||
</script>
|
||
|
||
<template>
|
||
<div class="users-view">
|
||
<section class="panel-box">
|
||
<div class="users-head">
|
||
<h3>用户列表</h3>
|
||
<button class="btn" type="button" @click="openCreate">新建用户</button>
|
||
</div>
|
||
<p class="users-desc">当前没有开放注册入口，仅管理员可在此创建用户。层级关系：超级管理员 -> 管理员 -> 普通账号。</p>
|
||
|
||
<div class="form-row users-filter-row">
|
||
<div class="form-group" style="min-width: 180px">
|
||
<label>用户名（模糊搜索）</label>
|
||
<input v-model="filters.keyword" type="text" placeholder="输入用户名关键字" @keyup.enter="search" />
|
||
</div>
|
||
<div v-if="isSuperAdmin" class="form-group" style="min-width: 160px">
|
||
<label>所属管理员</label>
|
||
<el-select v-model="filters.createdByAdminId" class="admin-filter" filterable clearable placeholder="全部" @change="search">
|
||
<el-option v-for="admin in admins" :key="admin.id" :label="admin.username" :value="admin.id" />
|
||
</el-select>
|
||
</div>
|
||
<div class="form-group" style="min-width: 140px">
|
||
<label>角色</label>
|
||
<el-select v-model="filters.role" class="admin-filter" filterable clearable placeholder="全部角色" @change="search">
|
||
<el-option label="超级管理员" value="super_admin" />
|
||
<el-option label="管理员" value="admin" />
|
||
<el-option label="普通账号" value="normal" />
|
||
</el-select>
|
||
</div>
|
||
<button class="btn" type="button" @click="search">查询</button>
|
||
</div>
|
||
|
||
<div v-if="statePhase === 'error' && loadError" class="msg err">
|
||
<span>加载失败: {{ loadError }}</span>
|
||
<button class="btn btn-sm btn-secondary" type="button" @click="retry">重试</button>
|
||
</div>
|
||
|
||
<div class="table-scroll user-table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 70px">ID</th>
|
||
<th style="width: 180px">用户名</th>
|
||
<th style="width: 140px">角色</th>
|
||
<th style="width: 160px">所属管理员</th>
|
||
<th style="width: 180px">创建时间</th>
|
||
<th style="width: 160px">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<template v-if="rows.length">
|
||
<tr v-for="row in rows" :key="row.id">
|
||
<td>{{ row.id }}</td>
|
||
<td>{{ row.username }}</td>
|
||
<td>{{ roleLabel(row.role) }}</td>
|
||
<td>{{ row.creatorUsername || '-' }}</td>
|
||
<td>{{ formatDateTime(row.createdAt) }}</td>
|
||
<td class="ops-cell">
|
||
<button
|
||
class="btn btn-sm"
|
||
type="button"
|
||
:disabled="!editableOf(row)"
|
||
:title="!editableOf(row) ? '该账号不可编辑' : undefined"
|
||
@click="openEdit(row)"
|
||
>
|
||
编辑
|
||
</button>
|
||
<button
|
||
class="btn btn-sm btn-danger"
|
||
type="button"
|
||
:disabled="deleteBlockReason(row, currentUserId) !== undefined"
|
||
:title="deleteBlockReason(row, currentUserId) || undefined"
|
||
@click="removeUser(row)"
|
||
>
|
||
删除
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</template>
|
||
<tr v-else-if="loading">
|
||
<td colspan="6" class="empty-tip">加载中...</td>
|
||
</tr>
|
||
<tr v-else>
|
||
<td colspan="6" class="empty-tip">{{ userListEmptyHint() }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="pagination">
|
||
<span class="page-total">共 {{ total }} 条</span>
|
||
<select v-model="filters.pageSize" class="page-size-select" @change="changeSize(Number(filters.pageSize))">
|
||
<option :value="10">10条/页</option>
|
||
<option :value="20">20条/页</option>
|
||
<option :value="50">50条/页</option>
|
||
<option :value="100">100条/页</option>
|
||
</select>
|
||
<button type="button" :disabled="filters.page <= 1" @click="changePage(filters.page - 1)">上一页</button>
|
||
<span class="page-cur">第 {{ filters.page }} / {{ totalPages }} 页</span>
|
||
<button type="button" :disabled="filters.page >= totalPages" @click="changePage(filters.page + 1)">下一页</button>
|
||
<span class="page-jump">
|
||
跳至
|
||
<input v-model="jumpPage" type="text" inputmode="numeric" @keyup.enter="goJump" />
|
||
页
|
||
<button type="button" @click="goJump">跳转</button>
|
||
</span>
|
||
</div>
|
||
</section>
|
||
|
||
<CreateUserDialog v-model="createVisible" :operator-super="isSuperAdmin" :admin-options="admins" @created="loadUsers" />
|
||
<EditUserDialog v-model="editVisible" :user="editUser" :operator-super="isSuperAdmin" @updated="loadUsers" />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 像素复刻旧版 admin.html panel-users（蓝白末层）。 */
|
||
.users-view {
|
||
font-family: inherit;
|
||
color: #24384d;
|
||
}
|
||
.panel-box {
|
||
width: 100%;
|
||
min-width: 0;
|
||
padding: 20px 22px 24px;
|
||
border: 1px solid #d8e3ee;
|
||
border-radius: 14px;
|
||
background: linear-gradient(145deg, #ffffff, #f9fbfd);
|
||
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
||
}
|
||
h3 {
|
||
margin: 0;
|
||
font-size: 15px;
|
||
font-weight: 650;
|
||
color: #24384d;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
.users-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
.users-desc {
|
||
margin: 10px 0 16px;
|
||
font-size: 13px;
|
||
color: #5b6f83;
|
||
}
|
||
.form-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-end;
|
||
gap: 14px 18px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 7px;
|
||
margin-bottom: 0;
|
||
}
|
||
.form-group label {
|
||
color: #5b6f83;
|
||
font-size: 12.5px;
|
||
font-weight: 600;
|
||
}
|
||
.form-group input,
|
||
.form-group select {
|
||
min-width: 0;
|
||
min-height: 42px;
|
||
padding: 8px 12px;
|
||
border: 1px solid #cbd9e6;
|
||
border-radius: 9px;
|
||
background: #f8fbfd;
|
||
color: #24384d;
|
||
font-size: 13.5px;
|
||
font-family: inherit;
|
||
color-scheme: light;
|
||
outline: none;
|
||
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||
}
|
||
.form-group input:hover,
|
||
.form-group select:hover {
|
||
border-color: #9fb7cd;
|
||
}
|
||
.form-group input:focus,
|
||
.form-group select:focus {
|
||
background: #ffffff;
|
||
border-color: #5f85ad;
|
||
box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
|
||
}
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
min-height: 42px;
|
||
padding: 9px 18px;
|
||
border: 1px solid #4f78a5;
|
||
border-radius: 9px;
|
||
background: linear-gradient(135deg, #5f85ad, #4f78a5);
|
||
color: #ffffff;
|
||
font-family: inherit;
|
||
font-size: 13.5px;
|
||
cursor: pointer;
|
||
box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
|
||
transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
|
||
}
|
||
.btn:hover:not(:disabled) {
|
||
background: linear-gradient(135deg, #7094ba, #5d83ac);
|
||
box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
|
||
}
|
||
.btn:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.55;
|
||
}
|
||
.btn-secondary {
|
||
background: #ffffff;
|
||
color: #5b6f83;
|
||
border-color: #c7d7e5;
|
||
}
|
||
.btn-secondary:hover:not(:disabled) {
|
||
color: #2f5d8b;
|
||
border-color: #95b1cb;
|
||
background: #edf5fb;
|
||
}
|
||
.btn-danger {
|
||
background: linear-gradient(135deg, #c06d77, #b35f6a);
|
||
border-color: #b35f6a;
|
||
}
|
||
.btn-danger:hover:not(:disabled) {
|
||
background: linear-gradient(135deg, #cb7c84, #b96570);
|
||
}
|
||
.btn-sm {
|
||
min-height: 36px;
|
||
padding: 7px 12px;
|
||
}
|
||
.msg {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 14px;
|
||
padding: 10px 12px;
|
||
border: 1px solid;
|
||
border-radius: 9px;
|
||
font-size: 13px;
|
||
}
|
||
.msg.err {
|
||
color: #91474f;
|
||
background: #f8ebeb;
|
||
border-color: #e4c2c5;
|
||
}
|
||
.table-scroll {
|
||
width: 100%;
|
||
min-width: 0;
|
||
overflow-x: auto;
|
||
border: 1px solid #dbe5ee;
|
||
border-radius: 10px;
|
||
background: #ffffff;
|
||
}
|
||
.table-scroll table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
}
|
||
.user-table-scroll > table {
|
||
min-width: 860px;
|
||
}
|
||
.table-scroll th,
|
||
.table-scroll td {
|
||
padding: 10px 12px;
|
||
text-align: left;
|
||
font-size: 13.5px;
|
||
line-height: 1.5;
|
||
border-bottom: 1px solid #e0e8ef;
|
||
vertical-align: middle;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.table-scroll th {
|
||
background: #edf4fa;
|
||
color: #4e6479;
|
||
border-bottom-color: #d5e1eb;
|
||
font-size: 12.5px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.4px;
|
||
}
|
||
.table-scroll tbody tr:hover td {
|
||
background: #f1f7fb;
|
||
}
|
||
.table-scroll tbody tr:last-child td {
|
||
border-bottom: 0;
|
||
}
|
||
.ops-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.empty-tip {
|
||
padding: 44px 24px;
|
||
text-align: center;
|
||
color: #8293a5;
|
||
font-size: 13.5px;
|
||
}
|
||
.pagination {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-top: 18px;
|
||
color: #5b6f83;
|
||
font-size: 13px;
|
||
}
|
||
.pagination button {
|
||
min-height: 30px;
|
||
padding: 4px 12px;
|
||
border: 1px solid #c7d7e5;
|
||
border-radius: 8px;
|
||
background: #ffffff;
|
||
color: #5b6f83;
|
||
font-family: inherit;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
}
|
||
.pagination button:hover:not(:disabled) {
|
||
background: #edf5fb;
|
||
border-color: #95b1cb;
|
||
color: #2f5d8b;
|
||
}
|
||
.pagination button:disabled {
|
||
background: #eef3f7;
|
||
color: #9baaba;
|
||
cursor: not-allowed;
|
||
}
|
||
.page-size-select {
|
||
min-height: 30px;
|
||
padding: 3px 8px;
|
||
border: 1px solid #cbd9e6;
|
||
border-radius: 8px;
|
||
background: #f8fbfd;
|
||
color: #24384d;
|
||
font-size: 13px;
|
||
font-family: inherit;
|
||
}
|
||
.page-total {
|
||
margin-right: 4px;
|
||
}
|
||
.page-jump {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.page-jump input {
|
||
width: 56px;
|
||
min-height: 30px;
|
||
padding: 4px 8px;
|
||
border: 1px solid #cbd9e6;
|
||
border-radius: 8px;
|
||
background: #f8fbfd;
|
||
color: #24384d;
|
||
font-size: 13px;
|
||
font-family: inherit;
|
||
}
|
||
</style>
|