feat: 新增账号管理功能,完善权限控制与用户信息同步

1.  新增用户管理后台接口与前端页面,支持管理员增删改查用户账号
2.  新增RBAC权限控制系统,按角色分配菜单与操作权限
3.  优化登录响应与用户信息接口,返回完整权限码与用户数据
4.  新增密码安全校验,提示纯数字密码风险
5.  移除废弃的注册接口,统一用户管理逻辑
6.  更新前端路由与侧边栏权限过滤逻辑
This commit is contained in:
SunYF
2026-09-02 14:54:54 +08:00
parent 8694162d94
commit 665ff257dc
9 changed files with 517 additions and 74 deletions
@@ -6,15 +6,28 @@ import {
HomeFilled, Download, Upload, Search, CircleCheck, List,
Box, Tickets, Monitor, EditPen, Fold, Expand, Location, Goods
} from '@element-plus/icons-vue'
import { getUser, logout } from '../utils/auth'
import { getUser, getToken, logout, setSession } from '../utils/auth'
import request from '../utils/request'
const route = useRoute()
const router = useRouter()
const user = getUser()
const userName = computed(() => user?.realName || user?.username || '未登录')
// 当前登录用户(含 permissionCodes),挂载时从 /user/info 刷新
const me = ref(getUser() || {})
const userName = computed(() => me.value?.realName || me.value?.username || '未登录')
const pageTitle = computed(() => route.meta?.title || '')
// 菜单按权限码过滤(与 MES 的 defaultMenus + permissionCodes 机制一致)
const permissionCodes = computed(() => me.value?.permissionCodes || [])
async function loadMe() {
try {
const u = await request.get('/user/info')
me.value = u
setSession(getToken(), u) // 刷新本地用户(含最新 permissionCodes/角色)
} catch { /* 用登录时写入的 user 兜底 */ }
}
// ===== 响应式侧边栏:桌面可折叠,移动端抽屉 =====
const isCollapse = ref(false) // 桌面端折叠(仅图标)
const isMobile = ref(false) // 移动端(≤767px
@@ -44,23 +57,30 @@ watch(() => route.path, () => {
onMounted(() => {
onScreenChange()
window.addEventListener('resize', onScreenChange)
loadMe()
})
onBeforeUnmount(() => window.removeEventListener('resize', onScreenChange))
const menus = [
{ path: '/', title: '工作台', icon: HomeFilled },
{ path: '/inbound', title: '入库管理', icon: Download },
{ path: '/outbound', title: '备料出库', icon: Upload },
{ path: '/inventory', title: '库存查询', icon: Search },
{ path: '/inspection', title: '质量检验', icon: CircleCheck },
{ path: '/stocktake', title: '库存盘点', icon: List },
{ path: '/semi', title: '半成品/成品', icon: Box },
{ path: '/package', title: '装箱管理', icon: Box },
{ path: '/ledger', title: '备料台账', icon: Tickets },
{ path: '/zone', title: '区域维护', icon: Location },
{ path: '/material', title: '物料档案', icon: Goods }
const defaultMenus = [
{ path: '/', title: '工作台', icon: HomeFilled, code: 'dashboard:view' },
{ path: '/inbound', title: '入库管理', icon: Download, code: 'inbound:view' },
{ path: '/outbound', title: '备料出库', icon: Upload, code: 'outbound:view' },
{ path: '/inventory', title: '库存查询', icon: Search, code: 'inventory:view' },
{ path: '/inspection', title: '质量检验', icon: CircleCheck, code: 'inspection:view' },
{ path: '/stocktake', title: '库存盘点', icon: List, code: 'stocktake:view' },
{ path: '/semi', title: '半成品/成品', icon: Box, code: 'semi:view' },
{ path: '/package', title: '装箱管理', icon: Box, code: 'package:view' },
{ path: '/ledger', title: '备料台账', icon: Tickets, code: 'ledger:view' },
{ path: '/zone', title: '区域维护', icon: Location, code: 'zone:view' },
{ path: '/material', title: '物料档案', icon: Goods, code: 'material:view' },
{ path: '/users', title: '账号管理', icon: EditPen, code: 'user:manage' }
]
// 按当前用户权限码过滤菜单(无 code 的常驻;user:manage 仅管理员可见)
const menus = computed(() =>
defaultMenus.filter((m) => !m.code || permissionCodes.value.includes(m.code))
)
// 打开当前页面帮助(各页面 PageHelp 监听 wms:open-page-help 事件弹出抽屉)
function openHelp() {
window.dispatchEvent(new CustomEvent('wms:open-page-help'))
@@ -11,6 +11,8 @@
<el-form-item label="新密码">
<el-input v-model="form.newPassword" type="password" show-password
placeholder="至少 6 位" />
<el-alert v-if="pwdAllNum" type="warning" :closable="false" style="margin-top:6px;width:100%"
title="密码为纯数字,安全性较低,建议包含字母与数字组合" />
</el-form-item>
<el-form-item label="确认新密码">
<el-input v-model="form.confirmPassword" type="password" show-password
@@ -25,7 +27,7 @@
</template>
<script setup>
import { reactive, ref } from 'vue'
import { computed, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { logout } from '../utils/auth'
@@ -34,6 +36,7 @@ import request from '../utils/request'
const router = useRouter()
const loading = ref(false)
const form = reactive({ oldPassword: '', newPassword: '', confirmPassword: '' })
const pwdAllNum = computed(() => form.newPassword.length > 0 && /^[\d]+$/.test(form.newPassword))
async function submit() {
if (!form.oldPassword || !form.newPassword) return ElMessage.warning('请填写旧密码和新密码')
@@ -0,0 +1,196 @@
<script setup>
import { onMounted, reactive, ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '../utils/request'
import { fmtTime } from '../utils/format'
const ROLE_LABELS = { admin: '管理员', operator: '库房操作员', inspector: '质检员' }
const roleOptions = [
{ value: 'admin', label: '管理员' },
{ value: 'operator', label: '库房操作员' },
{ value: 'inspector', label: '质检员' }
]
const list = ref([])
const total = ref(0)
const loading = ref(false)
const page = reactive({ current: 1, size: 10 })
async function loadUsers() {
loading.value = true
try {
const data = await request.get('/user/list')
list.value = data?.list || []
total.value = list.value.length
} finally {
loading.value = false
}
}
/* ---------- 新增 / 编辑 弹窗 ---------- */
const dialogVisible = ref(false)
const editingId = ref(0)
const saving = ref(false)
const form = reactive({ username: '', realName: '', role: 'operator', dept: '', password: '' })
const pwdAllNum = computed(() => /^[\d]+$/.test(form.password))
function resetForm() {
editingId.value = 0
Object.assign(form, { username: '', realName: '', role: 'operator', dept: '', password: '' })
}
function openCreate() {
resetForm()
dialogVisible.value = true
}
function openEdit(row) {
resetForm()
editingId.value = row.id
form.username = row.username
form.realName = row.realName || ''
form.role = row.role || 'operator'
form.dept = row.dept || ''
form.password = '' // 编辑时不填 = 不改密码
dialogVisible.value = true
}
async function save() {
if (!form.username.trim()) return ElMessage.warning('请输入用户名')
if (!editingId.value && !form.password) return ElMessage.warning('请输入初始密码')
if (form.password && form.password.length < 6) return ElMessage.warning('密码长度至少 6 位')
saving.value = true
try {
if (editingId.value) {
const payload = {
id: editingId.value,
realName: form.realName.trim() || undefined,
role: form.role,
dept: form.dept.trim() || undefined,
isActive: undefined
}
if (form.password) payload.password = form.password // 填写则重置密码
await request.post('/user/update', payload)
ElMessage.success('保存成功')
} else {
await request.post('/user/create', {
username: form.username.trim(),
realName: form.realName.trim() || undefined,
role: form.role,
dept: form.dept.trim() || undefined,
password: form.password
})
ElMessage.success('账号创建成功')
}
dialogVisible.value = false
await loadUsers()
} finally {
saving.value = false
}
}
async function toggleActive(row) {
try {
await request.post('/user/update', { id: row.id, isActive: !row.isActive })
ElMessage.success(row.isActive ? '已停用' : '已启用')
await loadUsers()
} catch { /* 拦截器已提示 */ }
}
async function removeUser(row) {
try {
await ElMessageBox.confirm(`确定删除账号「${row.username}」?该操作不可恢复。`, '删除确认', {
type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消'
})
} catch {
return
}
try {
await request.post('/user/delete', { id: row.id })
ElMessage.success('已删除')
await loadUsers()
} catch { /* 拦截器已提示 */ }
}
onMounted(loadUsers)
</script>
<template>
<div>
<el-card shadow="never" class="mb12">
<div style="display:flex;justify-content:space-between;align-items:center">
<div>
<b>账号管理</b>
<span style="margin-left:8px;color:#909399;font-size:12px">仅管理员可访问角色决定菜单与功能权限</span>
</div>
<el-button type="primary" :icon="'Plus'" @click="openCreate">新增账号</el-button>
</div>
</el-card>
<el-card shadow="never">
<el-table :data="list" border size="small" v-loading="loading" empty-text="暂无账号">
<el-table-column prop="id" label="ID" width="64" align="center" />
<el-table-column prop="username" label="用户名" min-width="120" />
<el-table-column prop="realName" label="姓名" min-width="110">
<template #default="{ row }">{{ row.realName || '-' }}</template>
</el-table-column>
<el-table-column label="角色" width="120" align="center">
<template #default="{ row }">
<el-tag :type="row.role === 'admin' ? 'danger' : row.role === 'inspector' ? 'warning' : 'primary'" size="small">
{{ ROLE_LABELS[row.role] || row.role }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="dept" label="部门" min-width="100">
<template #default="{ row }">{{ row.dept || '-' }}</template>
</el-table-column>
<el-table-column label="状态" width="90" align="center">
<template #default="{ row }">
<el-switch :model-value="row.isActive" @change="toggleActive(row)" />
</template>
</el-table-column>
<el-table-column label="最近登录" width="150" align="center">
<template #default="{ row }">{{ row.lastLoginAt ? fmtTime(row.lastLoginAt) : '从未' }}</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
<el-button link type="danger" size="small" @click="removeUser(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog v-model="dialogVisible" :title="editingId ? '编辑账号' : '新增账号'" width="520px"
append-to-body destroy-on-close @closed="resetForm">
<el-form label-width="90px">
<el-form-item label="用户名" required>
<el-input v-model="form.username" :disabled="!!editingId" placeholder="登录名(创建后不可改)" />
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="form.realName" placeholder="显示名(可空)" />
</el-form-item>
<el-form-item label="角色" required>
<el-select v-model="form.role" style="width:100%">
<el-option v-for="o in roleOptions" :key="o.value" :value="o.value" :label="o.label" />
</el-select>
</el-form-item>
<el-form-item label="部门">
<el-input v-model="form.dept" placeholder="部门(可空)" />
</el-form-item>
<el-form-item :label="editingId ? '重置密码' : '初始密码'" required>
<el-input v-model="form.password" type="password" show-password
:placeholder="editingId ? '不填则保持原密码(至少6位)' : '至少 6 位'" />
<el-alert v-if="pwdAllNum" type="warning" :closable="false" style="margin-top:6px"
title="密码为纯数字,安全性较低,建议包含字母与数字组合" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" :loading="saving" @click="save">保存</el-button>
</template>
</el-dialog>
</div>
</template>
<style scoped>
.mb12 { margin-bottom: 12px; }
</style>
@@ -20,7 +20,8 @@ const routes = [
{ path: 'ledger', name: 'Ledger', component: () => import('../pages/Ledger.vue'), meta: { title: '备料台账' } },
{ path: 'zone', name: 'Zone', component: () => import('../pages/BaseData.vue'), props: { mode: 'zone' }, meta: { title: '区域维护' } },
{ path: 'material', name: 'Material', component: () => import('../pages/BaseData.vue'), props: { mode: 'material' }, meta: { title: '物料档案' } },
{ path: 'change-password', name: 'ChangePassword', component: () => import('../pages/ChangePassword.vue'), meta: { title: '修改密码' } }
{ path: 'change-password', name: 'ChangePassword', component: () => import('../pages/ChangePassword.vue'), meta: { title: '修改密码' } },
{ path: 'users', name: 'UserManage', component: () => import('../pages/UserManage.vue'), meta: { title: '账号管理' } }
]
},
{ path: '/:pathMatch(.*)*', redirect: '/' }