后台用户管理界面ui--ok
This commit is contained in:
yml2213
Vendored
+6
@@ -21,6 +21,7 @@ declare module 'vue' {
|
||||
AdminStatusTag: typeof import('./components/admin/AdminStatusTag.vue')['default']
|
||||
ElAlert: typeof import('element-plus/es')['ElAlert']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
@@ -31,6 +32,9 @@ declare module 'vue' {
|
||||
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
||||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
||||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
||||
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
@@ -40,6 +44,7 @@ declare module 'vue' {
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
@@ -47,6 +52,7 @@ declare module 'vue' {
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
|
||||
ElStatistic: typeof import('element-plus/es')['ElStatistic']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
|
||||
@@ -2,6 +2,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { ElMessageBoxOptions, MessageOptions } from 'element-plus'
|
||||
|
||||
import 'element-plus/theme-chalk/el-message.css'
|
||||
import 'element-plus/theme-chalk/el-overlay.css'
|
||||
import 'element-plus/theme-chalk/el-message-box.css'
|
||||
|
||||
const baseMessageOptions: Partial<MessageOptions> = {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user