[Snow Team] inventory-users-refactor: auto-commit work
This commit is contained in:
yml2213
@@ -0,0 +1,127 @@
|
||||
<script setup lang="ts">
|
||||
import type { AdminRole } from '@/types/admin'
|
||||
import { adminUserRoleOptions, adminUserStatusOptions } from '@/utils/admin-options'
|
||||
|
||||
const username = defineModel<string>('username', { required: true })
|
||||
const role = defineModel<string>('role', { required: true })
|
||||
const status = defineModel<string>('status', { required: true })
|
||||
const createUsername = defineModel<string>('createUsername', { required: true })
|
||||
const createPassword = defineModel<string>('createPassword', { required: true })
|
||||
const createRole = defineModel<AdminRole>('createRole', { required: true })
|
||||
|
||||
defineProps<{
|
||||
creating: boolean
|
||||
loadUsers: (page?: number) => Promise<void>
|
||||
submitCreate: () => Promise<void>
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="users-tools">
|
||||
<div class="filter-row">
|
||||
<el-input
|
||||
v-model="username"
|
||||
class="filter-control filter-control--username"
|
||||
placeholder="账号筛选"
|
||||
clearable
|
||||
@keyup.enter="loadUsers(1)"
|
||||
/>
|
||||
<el-select
|
||||
v-model="role"
|
||||
class="filter-control filter-control--role"
|
||||
placeholder="角色"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in adminUserRoleOptions"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="status"
|
||||
class="filter-control filter-control--status"
|
||||
placeholder="状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in adminUserStatusOptions"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button round type="primary" @click="loadUsers(1)">查询列表</el-button>
|
||||
</div>
|
||||
<div class="create-row">
|
||||
<el-input
|
||||
v-model="createUsername"
|
||||
class="filter-control filter-control--username"
|
||||
placeholder="新账号"
|
||||
/>
|
||||
<el-input
|
||||
v-model="createPassword"
|
||||
class="filter-control filter-control--password"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="新密码，至少 8 位"
|
||||
/>
|
||||
<el-select v-model="createRole" class="filter-control filter-control--role">
|
||||
<el-option value="operator" label="普通运营" />
|
||||
<el-option value="support" label="客服" />
|
||||
<el-option value="admin" label="管理员" />
|
||||
</el-select>
|
||||
<el-button round :loading="creating" type="primary" @click="submitCreate"
|
||||
>新增用户</el-button
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.users-tools {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.filter-row,
|
||||
.create-row {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.create-row {
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid rgba(86, 108, 138, 0.12);
|
||||
}
|
||||
.filter-control {
|
||||
min-width: 0;
|
||||
}
|
||||
.filter-control--username {
|
||||
width: 150px;
|
||||
}
|
||||
.filter-control--role,
|
||||
.filter-control--status {
|
||||
width: 128px;
|
||||
}
|
||||
.filter-control--password {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.filter-control,
|
||||
.filter-control--username,
|
||||
.filter-control--role,
|
||||
.filter-control--status,
|
||||
.filter-control--password {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-row :deep(.el-button),
|
||||
.create-row :deep(.el-button) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,199 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||
import type { AdminRole, AdminUserListItem } from '@/types/admin'
|
||||
|
||||
defineProps<{
|
||||
loading: boolean
|
||||
items: AdminUserListItem[]
|
||||
pagination: { page: number; pageSize: number; total: number }
|
||||
actionLoadingId: number | null
|
||||
loadUsers: (page?: number) => Promise<void>
|
||||
isCurrentUser: (userId: number) => boolean
|
||||
updateRole: (item: AdminUserListItem, nextRole: AdminRole) => Promise<void>
|
||||
toggleStatus: (item: AdminUserListItem) => Promise<void>
|
||||
promptResetPassword: (item: AdminUserListItem) => Promise<void>
|
||||
promptUpdateInventoryGroups: (item: AdminUserListItem) => Promise<void>
|
||||
formatRoleLabel: (role: AdminRole) => string
|
||||
formatInventoryGroups: (item: AdminUserListItem) => string[]
|
||||
formatAdminDateTime: (value: string) => string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never" class="section-card">
|
||||
<div class="users-table-toolbar table-toolbar">
|
||||
<strong>用户列表</strong>
|
||||
<span>共 {{ pagination.total }} 个账号</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="items"
|
||||
stripe
|
||||
size="small"
|
||||
v-loading="loading"
|
||||
element-loading-text="用户列表加载中"
|
||||
class="users-table data-table w-full"
|
||||
>
|
||||
<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="库存组" width="112">
|
||||
<template #default="{ row }">
|
||||
<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="128">
|
||||
<template #default="{ row }"><AdminStatusTag :status="row.status" /></template>
|
||||
</el-table-column>
|
||||
<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="154">
|
||||
<template #default="{ row }"
|
||||
><span class="date-cell">{{ formatAdminDateTime(row.updatedAt) }}</span></template
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="356">
|
||||
<template #default="{ row }">
|
||||
<div class="action-stack">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty><el-empty :image-size="60" description="暂无用户" /></template>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-if="pagination.total > 0"
|
||||
v-model:current-page="pagination.page"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
layout="total, prev, pager, next"
|
||||
class="pagination-center"
|
||||
@current-change="loadUsers"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.users-table-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.users-table-toolbar strong {
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
.users-table-toolbar span {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
.users-table {
|
||||
background: rgba(255, 255, 255, 0.36);
|
||||
}
|
||||
.users-table :deep(td.el-table__cell) {
|
||||
height: 44px;
|
||||
background: rgba(255, 255, 255, 0.46);
|
||||
}
|
||||
.users-table :deep(.el-table__row--striped td.el-table__cell) {
|
||||
background: rgba(255, 255, 255, 0.62);
|
||||
}
|
||||
.users-table :deep(.el-table__body tr:hover > td.el-table__cell) {
|
||||
background: var(--el-table-row-hover-bg-color);
|
||||
}
|
||||
.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