580 lines
20 KiB
Vue
580 lines
20 KiB
Vue
<template>
|
||
<div class="permission-container">
|
||
<el-row :gutter="20">
|
||
<!-- 左侧：用户列表 -->
|
||
<el-col :span="8">
|
||
<el-card class="user-card">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="card-title">用户列表</span>
|
||
<el-tag type="success" size="small" style="margin-left: 10px;">
|
||
用户专属权限
|
||
</el-tag>
|
||
</div>
|
||
</template>
|
||
|
||
<el-table
|
||
:data="paginatedUserList"
|
||
highlight-current-row
|
||
@current-change="handleUserChange"
|
||
v-loading="userLoading"
|
||
style="width: 100%"
|
||
max-height="500"
|
||
>
|
||
<el-table-column prop="name" label="用户名称" width="120" />
|
||
<el-table-column prop="mobile" label="手机号" />
|
||
<el-table-column prop="roleId" label="角色ID" width="80" />
|
||
</el-table>
|
||
|
||
<!-- 分页器 -->
|
||
<div style="margin-top: 15px; text-align: center">
|
||
<el-pagination
|
||
v-model:current-page="pagination.currentPage"
|
||
v-model:page-size="pagination.pageSize"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:total="userList.length"
|
||
layout="total, sizes, prev, pager, next"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<!-- 右侧：菜单权限分配 -->
|
||
<el-col :span="16">
|
||
<el-card class="permission-card">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="card-title">
|
||
{{ currentUser ? `${currentUser.name} - 菜单访问权限` : '请选择用户' }}
|
||
</span>
|
||
<el-tag v-if="currentUser" type="success" size="small" style="margin-right: 10px">
|
||
用户ID: {{ currentUser.id }}
|
||
</el-tag>
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
@click="handleSaveMenuPermissions"
|
||
:disabled="!currentUser"
|
||
:loading="saveLoading"
|
||
>
|
||
保存菜单权限
|
||
</el-button>
|
||
<el-button
|
||
type="success"
|
||
size="small"
|
||
@click="handleQuickAssignAll"
|
||
:disabled="!currentUser"
|
||
:loading="quickAssignLoading"
|
||
style="margin-left: 10px"
|
||
>
|
||
一键分配全部菜单权限
|
||
</el-button>
|
||
<el-button
|
||
type="danger"
|
||
size="small"
|
||
@click="handleClearUserPermissions"
|
||
:disabled="!currentUser"
|
||
:loading="clearLoading"
|
||
style="margin-left: 10px"
|
||
>
|
||
清空用户权限
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<div v-if="currentUser" v-loading="permissionLoading">
|
||
<el-alert
|
||
title="用户专属菜单权限管理"
|
||
type="info"
|
||
:closable="false"
|
||
style="margin-bottom: 20px"
|
||
>
|
||
<template #default>
|
||
<div>
|
||
<p><strong>当前系统使用基于用户的菜单权限管理</strong></p>
|
||
<p>• 修改菜单权限只影响当前选择的用户</p>
|
||
<p>• 当前用户: <strong>{{ currentUser.name }}</strong> (ID: {{ currentUser.id }})</p>
|
||
<p>• 角色ID: <strong>{{ currentUser.roleId }}</strong></p>
|
||
<p>• 勾选菜单后，该用户可以访问相应的菜单页面</p>
|
||
<p>• 按钮权限请在"操作权限管理"页面中设置</p>
|
||
</div>
|
||
</template>
|
||
</el-alert>
|
||
|
||
<el-tree
|
||
ref="menuTreeRef"
|
||
:data="menuTree"
|
||
show-checkbox
|
||
node-key="id"
|
||
:default-expand-all="true"
|
||
:props="treeProps"
|
||
:check-strictly="false"
|
||
:default-checked-keys="checkedMenuIds"
|
||
>
|
||
<template #default="{ node, data }">
|
||
<span class="tree-node">
|
||
<el-icon v-if="data.icon" style="margin-right: 5px">
|
||
<component :is="data.icon" />
|
||
</el-icon>
|
||
<span>{{ node.label }}</span>
|
||
<el-tag
|
||
v-if="data.type === 1"
|
||
type="success"
|
||
size="small"
|
||
style="margin-left: 10px"
|
||
>
|
||
菜单
|
||
</el-tag>
|
||
<el-tag
|
||
v-if="data.type === 2"
|
||
type="warning"
|
||
size="small"
|
||
style="margin-left: 10px"
|
||
>
|
||
按钮
|
||
</el-tag>
|
||
<span
|
||
v-if="data.authority"
|
||
style="margin-left: 10px; color: #999; font-size: 12px"
|
||
>
|
||
{{ data.authority }}
|
||
</span>
|
||
</span>
|
||
</template>
|
||
</el-tree>
|
||
</div>
|
||
|
||
<el-empty
|
||
v-else
|
||
description="请从左侧选择一个角色，为其分配菜单访问权限"
|
||
:image-size="100"
|
||
/>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, nextTick, computed } from 'vue';
|
||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||
import {
|
||
getUserList,
|
||
getMenuTree,
|
||
getUserMenuIds,
|
||
assignUserMenus,
|
||
clearUserMenus,
|
||
getMenuList,
|
||
} from '@/api/permission.js';
|
||
import usePermissionStore from '@/store/permission.js';
|
||
|
||
// 用户相关数据
|
||
const userLoading = ref(false);
|
||
const userList = ref([]);
|
||
const currentUser = ref(null);
|
||
|
||
// 分页数据
|
||
const pagination = reactive({
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
});
|
||
|
||
// 计算分页后的用户列表
|
||
const paginatedUserList = computed(() => {
|
||
const start = (pagination.currentPage - 1) * pagination.pageSize;
|
||
const end = start + pagination.pageSize;
|
||
return userList.value.slice(start, end);
|
||
});
|
||
|
||
// 权限相关数据
|
||
const permissionLoading = ref(false);
|
||
const saveLoading = ref(false);
|
||
const quickAssignLoading = ref(false);
|
||
const clearLoading = ref(false);
|
||
const menuTree = ref([]);
|
||
const menuTreeRef = ref(null);
|
||
const checkedMenuIds = ref([]);
|
||
const treeProps = {
|
||
children: 'children',
|
||
label: 'label',
|
||
};
|
||
|
||
// 初始化
|
||
onMounted(() => {
|
||
loadUserList();
|
||
});
|
||
|
||
// 加载用户列表
|
||
const loadUserList = async () => {
|
||
userLoading.value = true;
|
||
try {
|
||
const res = await getUserList();
|
||
if (res.code === 200) {
|
||
userList.value = res.data || [];
|
||
}
|
||
} catch (error) {
|
||
console.error('加载用户列表失败:', error);
|
||
ElMessage.error('加载用户列表失败');
|
||
} finally {
|
||
userLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 用户选择改变
|
||
const handleUserChange = async (row) => {
|
||
if (!row) return;
|
||
|
||
console.log('=== 菜单权限管理 - 用户选择改变 ===');
|
||
console.log('选择的用户:', row);
|
||
console.log('用户ID:', row.id);
|
||
|
||
currentUser.value = row;
|
||
await loadMenuTree();
|
||
await loadUserMenus(row.id);
|
||
};
|
||
|
||
// 加载菜单树（只显示菜单，不显示按钮）
|
||
const loadMenuTree = async () => {
|
||
permissionLoading.value = true;
|
||
try {
|
||
const res = await getMenuTree();
|
||
if (res.code === 200) {
|
||
// 过滤掉按钮权限（type=2），只保留菜单（type=0,1）
|
||
const filteredTree = filterMenuTree(res.data || []);
|
||
menuTree.value = filteredTree;
|
||
console.log('=== 菜单权限管理 - 过滤后的菜单树 ===', filteredTree);
|
||
}
|
||
} catch (error) {
|
||
console.error('加载菜单树失败:', error);
|
||
ElMessage.error('加载菜单树失败');
|
||
} finally {
|
||
permissionLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 过滤菜单树，只保留菜单项（type=0,1），移除按钮（type=2）
|
||
const filterMenuTree = (tree) => {
|
||
return tree.map(node => {
|
||
const filteredNode = { ...node };
|
||
|
||
// 如果当前节点是按钮（type=2），返回null（会被过滤掉）
|
||
if (node.type === 2) {
|
||
return null;
|
||
}
|
||
|
||
// 如果有子节点，递归过滤
|
||
if (node.children && node.children.length > 0) {
|
||
const filteredChildren = filterMenuTree(node.children).filter(child => child !== null);
|
||
filteredNode.children = filteredChildren;
|
||
}
|
||
|
||
return filteredNode;
|
||
}).filter(node => node !== null);
|
||
};
|
||
|
||
// 加载用户已分配的菜单（只加载菜单权限，不加载按钮权限）
|
||
const loadUserMenus = async (userId) => {
|
||
try {
|
||
const res = await getUserMenuIds(userId);
|
||
if (res.code === 200) {
|
||
const allMenuIds = res.data || [];
|
||
|
||
// 过滤掉按钮权限，只保留菜单权限
|
||
const menuOnlyIds = await filterMenuOnlyIds(allMenuIds);
|
||
checkedMenuIds.value = menuOnlyIds;
|
||
|
||
console.log('=== 菜单权限管理 - 过滤后的菜单权限 ===', {
|
||
userId: userId,
|
||
allMenuIds: allMenuIds,
|
||
menuOnlyIds: menuOnlyIds
|
||
});
|
||
|
||
await nextTick();
|
||
if (menuTreeRef.value) {
|
||
menuTreeRef.value.setCheckedKeys(checkedMenuIds.value);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('加载用户菜单失败:', error);
|
||
ElMessage.error('加载用户菜单失败');
|
||
}
|
||
};
|
||
|
||
// 过滤菜单ID列表，只保留菜单项（type=0,1），移除按钮（type=2）
|
||
const filterMenuOnlyIds = async (menuIds) => {
|
||
try {
|
||
// 获取所有菜单信息
|
||
const menuListRes = await getMenuList();
|
||
if (menuListRes.code !== 200) {
|
||
return menuIds; // 如果获取失败，返回原始列表
|
||
}
|
||
|
||
const allMenus = menuListRes.data || [];
|
||
const menuMap = new Map(allMenus.map(menu => [menu.id, menu]));
|
||
|
||
// 过滤掉按钮权限
|
||
const menuOnlyIds = menuIds.filter(id => {
|
||
const menu = menuMap.get(id);
|
||
return menu && menu.type !== 2; // 只保留菜单项（type=0,1）
|
||
});
|
||
|
||
return menuOnlyIds;
|
||
} catch (error) {
|
||
console.error('过滤菜单权限失败:', error);
|
||
return menuIds; // 如果过滤失败，返回原始列表
|
||
}
|
||
};
|
||
|
||
// 分页处理
|
||
const handleSizeChange = (size) => {
|
||
pagination.pageSize = size;
|
||
pagination.currentPage = 1;
|
||
};
|
||
|
||
const handleCurrentChange = (page) => {
|
||
pagination.currentPage = page;
|
||
};
|
||
|
||
// 保存菜单权限（只保存菜单权限，不保存按钮权限）
|
||
const handleSaveMenuPermissions = async () => {
|
||
if (!currentUser.value) {
|
||
ElMessage.warning('请先选择用户');
|
||
return;
|
||
}
|
||
|
||
// 确认对话框，让用户明确知道影响范围
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
`您即将为用户 ${currentUser.value.name} (ID: ${currentUser.value.id}) 设置菜单权限。\n\n这将只影响当前选择的用户。\n\n确定要继续吗？`,
|
||
'确认菜单权限修改',
|
||
{
|
||
confirmButtonText: '确定修改',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
dangerouslyUseHTMLString: false
|
||
}
|
||
);
|
||
} catch {
|
||
// 用户取消操作
|
||
return;
|
||
}
|
||
|
||
// 获取选中的节点（包括半选中的父节点）
|
||
const checkedKeys = menuTreeRef.value.getCheckedKeys();
|
||
const halfCheckedKeys = menuTreeRef.value.getHalfCheckedKeys();
|
||
const allKeys = [...checkedKeys, ...halfCheckedKeys];
|
||
|
||
// 过滤掉按钮权限，只保留菜单权限
|
||
const menuOnlyIds = await filterMenuOnlyIds(allKeys);
|
||
|
||
console.log('=== 保存菜单权限 ===', {
|
||
user: currentUser.value,
|
||
allKeys: allKeys,
|
||
menuOnlyIds: menuOnlyIds
|
||
});
|
||
|
||
saveLoading.value = true;
|
||
try {
|
||
const res = await assignUserMenus({
|
||
userId: currentUser.value.id,
|
||
menuIds: menuOnlyIds, // 只保存菜单权限
|
||
});
|
||
|
||
if (res.code === 200) {
|
||
ElMessage.success(`用户 ${currentUser.value.name} 的菜单权限保存成功，共保存 ${menuOnlyIds.length} 个菜单权限。`);
|
||
|
||
// 权限保存成功后，刷新权限数据
|
||
try {
|
||
const permissionStore = usePermissionStore();
|
||
await permissionStore.refreshPermissions();
|
||
ElMessage.success('权限已保存并刷新成功！');
|
||
console.log('权限数据已刷新');
|
||
} catch (error) {
|
||
console.error('刷新权限失败:', error);
|
||
ElMessage.warning('权限已保存，但刷新失败，请手动刷新页面');
|
||
}
|
||
} else {
|
||
ElMessage.error(res.msg || '保存失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('保存菜单权限失败:', error);
|
||
ElMessage.error('保存失败');
|
||
} finally {
|
||
saveLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 一键分配全部菜单权限（只分配菜单权限，不分配按钮权限）
|
||
const handleQuickAssignAll = async () => {
|
||
if (!currentUser.value) {
|
||
ElMessage.warning('请先选择用户');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 确认操作
|
||
const confirmed = await ElMessageBox.confirm(
|
||
`您即将为用户 ${currentUser.value.name} (ID: ${currentUser.value.id}) 分配所有菜单权限。\n\n这将只影响当前选择的用户。\n\n注意：此操作只分配菜单权限，按钮权限请在"操作权限管理"页面中设置。`,
|
||
'确认分配菜单权限',
|
||
{
|
||
confirmButtonText: '确定分配',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}
|
||
);
|
||
|
||
if (!confirmed) {
|
||
return;
|
||
}
|
||
|
||
quickAssignLoading.value = true;
|
||
|
||
// 获取所有菜单
|
||
const menuListRes = await getMenuList();
|
||
if (menuListRes.code !== 200) {
|
||
throw new Error('获取菜单列表失败');
|
||
}
|
||
|
||
const allMenus = menuListRes.data || [];
|
||
|
||
// 过滤掉按钮权限，只保留菜单权限
|
||
const menuOnlyMenus = allMenus.filter(menu => menu.type !== 2);
|
||
const menuOnlyIds = menuOnlyMenus.map(menu => menu.id);
|
||
|
||
console.log('=== 一键分配全部菜单权限 ===', {
|
||
user: currentUser.value,
|
||
totalMenus: allMenus.length,
|
||
menuOnlyMenus: menuOnlyMenus.length,
|
||
menuOnlyIds: menuOnlyIds
|
||
});
|
||
|
||
// 分配所有菜单权限
|
||
const res = await assignUserMenus({
|
||
userId: currentUser.value.id,
|
||
menuIds: menuOnlyIds,
|
||
});
|
||
|
||
if (res.code === 200) {
|
||
ElMessage.success(`成功为用户 ${currentUser.value.name} 分配了 ${menuOnlyIds.length} 个菜单权限。`);
|
||
|
||
// 重新加载权限显示
|
||
await loadUserMenus(currentUser.value.id);
|
||
|
||
// 权限保存成功后，刷新权限数据
|
||
try {
|
||
const permissionStore = usePermissionStore();
|
||
await permissionStore.refreshPermissions();
|
||
ElMessage.success('权限已保存并刷新成功！');
|
||
console.log('权限数据已刷新');
|
||
} catch (error) {
|
||
console.error('刷新权限失败:', error);
|
||
ElMessage.warning('权限已保存，但刷新失败，请手动刷新页面');
|
||
}
|
||
} else {
|
||
ElMessage.error(res.msg || '分配失败');
|
||
}
|
||
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
console.error('一键分配菜单权限失败:', error);
|
||
ElMessage.error(`分配失败: ${error.message || error}`);
|
||
}
|
||
} finally {
|
||
quickAssignLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 清空用户权限
|
||
const handleClearUserPermissions = async () => {
|
||
if (!currentUser.value) {
|
||
ElMessage.warning('请先选择用户');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 确认操作
|
||
const confirmed = await ElMessageBox.confirm(
|
||
`您即将清空用户 ${currentUser.value.name} (ID: ${currentUser.value.id}) 的所有权限。\n\n清空后，该用户将无法访问任何菜单。\n\n确定要继续吗？`,
|
||
'确认清空用户权限',
|
||
{
|
||
confirmButtonText: '确定清空',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}
|
||
);
|
||
|
||
if (!confirmed) {
|
||
return;
|
||
}
|
||
|
||
clearLoading.value = true;
|
||
|
||
// 清空用户权限
|
||
const res = await clearUserMenus(currentUser.value.id);
|
||
|
||
if (res.code === 200) {
|
||
ElMessage.success(`用户 ${currentUser.value.name} 的权限已清空！`);
|
||
|
||
// 重新加载权限显示
|
||
await loadUserMenus(currentUser.value.id);
|
||
|
||
// 权限清空后，刷新权限数据
|
||
try {
|
||
const permissionStore = usePermissionStore();
|
||
await permissionStore.refreshPermissions();
|
||
ElMessage.success('权限已清空并刷新成功！');
|
||
console.log('权限数据已刷新');
|
||
} catch (error) {
|
||
console.error('刷新权限失败:', error);
|
||
ElMessage.warning('权限已清空，但刷新失败，请手动刷新页面');
|
||
}
|
||
} else {
|
||
ElMessage.error(res.msg || '清空失败');
|
||
}
|
||
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
console.error('清空用户权限失败:', error);
|
||
ElMessage.error(`清空失败: ${error.message || error}`);
|
||
}
|
||
} finally {
|
||
clearLoading.value = false;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.permission-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.user-card,
|
||
.permission-card {
|
||
border-radius: 8px;
|
||
min-height: 600px;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tree-node {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
:deep(.el-tree-node__content) {
|
||
height: 36px;
|
||
}
|
||
</style>
|