yml/order_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后台用户管理界面ui--ok

Browse Source
This commit is contained in:
yml2213
2026-05-14 20:54:59 +08:00
parent a029da8c6d
commit a48fed16c7
3 changed files with 45 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/views/admin/AdminUsersView.vue
+38 -18
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
@@ -141,37 +142,48 @@ onMounted(loadUsers)
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
<el-card shadow="never" style="margin-top: 16px">
<el-table :data="items" stripe size="small" v-loading="loading" element-loading-text="用户列表加载中">
<el-table-column prop="userId" label="ID" width="70" align="center" />
<el-table-column prop="username" label="账号" width="140" />
<el-table-column label="角色" width="100">
<el-card shadow="never" class="users-table-card" style="margin-top: 16px">
<el-table :data="items" stripe size="small" v-loading="loading" element-loading-text="用户列表加载中" class="users-table" style="width: 100%">
<el-table-column prop="userId" label="ID" width="52" align="center" />
<el-table-column prop="username" label="账号" width="112" show-overflow-tooltip />
<el-table-column label="角色" width="82">
<template #default="{ row }">{{ formatRoleLabel(row.role) }}</template>
</el-table-column>
<el-table-column label="库存组" min-width="180">
<el-table-column label="库存组" width="112">
<template #default="{ row }">
<el-tag v-for="(code, i) in formatInventoryGroups(row)" :key="i" size="small" :type="(code === '未绑定' || code === '不限库存组') ? 'info' : undefined" style="margin-right: 4px; margin-bottom: 2px">{{ code }}</el-tag>
<div class="inventory-tags">
<el-tag v-for="(code, i) in formatInventoryGroups(row)" :key="i" size="small" :type="(code === '未绑定' || code === '不限库存组') ? 'info' : undefined">{{ code }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="状态" width="90">
<el-table-column label="状态" width="128">
<template #default="{ row }"><AdminStatusTag :status="row.status" /></template>
</el-table-column>
<el-table-column label="创建时间" width="180">
<template #default="{ row }">{{ formatAdminDateTime(row.createdAt) }}</template>
<el-table-column label="创建时间" width="154">
<template #default="{ row }"><span class="date-cell">{{ formatAdminDateTime(row.createdAt) }}</span></template>
</el-table-column>
<el-table-column label="更新时间" width="180">
<template #default="{ row }">{{ formatAdminDateTime(row.updatedAt) }}</template>
<el-table-column label="更新时间" width="154">
<template #default="{ row }"><span class="date-cell">{{ formatAdminDateTime(row.updatedAt) }}</span></template>
</el-table-column>
<el-table-column label="操作" min-width="300">
<el-table-column label="操作" min-width="356">
<template #default="{ row }">
<div class="action-stack">
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="updateRole(row, 'admin')">设为管理员</el-button>
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="updateRole(row, 'operator')">设为运营</el-button>
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="updateRole(row, 'support')">设为客服</el-button>
<el-dropdown trigger="click" :disabled="isCurrentUser(row.userId)" @command="(cmd: string) => updateRole(row, cmd as AdminRole)">
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)">
改角色<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="admin" :disabled="row.role === 'admin'">设为管理员</el-dropdown-item>
<el-dropdown-item command="operator" :disabled="row.role === 'operator'">设为运营</el-dropdown-item>
<el-dropdown-item command="support" :disabled="row.role === 'support'">设为客服</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="toggleStatus(row)">{{ row.status === 'active' ? '停用' : '启用' }}</el-button>
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="row.role !== 'support'" @click="promptUpdateInventoryGroups(row)">配库存组</el-button>
<el-button :loading="actionLoadingId === row.userId" size="small" type="primary" @click="promptResetPassword(row)">重置密码</el-button>
<el-tag v-if="isCurrentUser(row.userId)" size="small" type="info">当前登录账号</el-tag>
<el-tag v-if="isCurrentUser(row.userId)" size="small" type="info">当前账号</el-tag>
</div>
</template>
</el-table-column>
@@ -194,5 +206,13 @@ onMounted(loadUsers)
<style scoped>
.users-page { display: grid; gap: 0; }
.filter-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.action-stack { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.users-table-card { overflow: visible; }
.users-table { width: 100%; }
.inventory-tags { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.inventory-tags :deep(.el-tag) { flex: 0 0 auto; }
.date-cell { display: inline-block; white-space: nowrap; font-size: var(--text-xs); }
.action-stack { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; white-space: nowrap; }
.action-stack :deep(.el-button) { flex: 0 0 auto; margin-left: 0; padding: 5px 8px; }
.action-stack :deep(.el-tag) { flex: 0 0 auto; padding: 0 7px; }
.action-stack :deep(.el-icon--right) { margin-left: 4px; }
</style>