// role.js // 页面加载时获取角色列表 document.addEventListener('DOMContentLoaded', function() { fetchRoles(); // 绑定创建角色按钮的点击事件 document.getElementById('createRoleButton').addEventListener('click', function() { createRole(); }); }); fetchRoles() function fetchRoles() { fetch('http://127.0.0.1:8080/api/admin/GetRoles', { method: 'POST', headers: { 'Authorization': `Bearer ${authToken}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ Name: " " }) // 发送空的 Name 参数 }) .then(response => response.json()) .then(data => { const roleContainer = document.getElementById('roles-container'); roleContainer.innerHTML = ''; // 清空之前的内容 const permissionMap = { 'generate_license': '生成许可证', 'upload_license': '上传许可证(废弃)', 'read_license': '读取许可证', 'read_license_record': '读取许可证分发记录', 'update_license': '修改许可证(废弃)', 'delete_license': '删除许可证(废弃)', 'dispat_license': '分发许可证', 'create_user': '创建用户', 'read_user': '读取用户', 'update_user': '更新用户', 'delete_user': '删除用户', 'create_role': '创建角色', 'delete_role': '删除角色', 'update_role': '更新角色', 'get_role': '获取角色' }; // 检查用户是否有 create_role 权限 const hasCreateRolePermission = currentUserPermissions.includes('create_role'); // 如果有权限则显示“创建角色”按钮 if (hasCreateRolePermission) { document.getElementById('createRoleButton').style.display = 'block'; } else { document.getElementById('createRoleButton').style.display = 'none'; } // 处理置顶角色和其他角色的渲染 const topRoles = ['admin', 'guest', 'supportRole']; topRoles.forEach(role => { if (data.data[role]) { renderRole(roleContainer, data.data[role], permissionMap, true); } }); Object.keys(data.data).forEach(role => { if (!topRoles.includes(role)) { renderRole(roleContainer, data.data[role], permissionMap, false); } }); }) .catch(error => { console.error('获取角色数据失败:', error); }); } function renderRole(container, roleInfo, permissionMap, isTopRole) { const roleDiv = document.createElement('div'); roleDiv.className = 'role-item'; if (isTopRole) { roleDiv.classList.add('top-role'); // 应用置顶角色的样式 } let permissions = roleInfo.Permissions.map(permission => permissionMap[permission] || permission); let permissionsHtml = permissions.join(','); // 使用逗号分隔并合并为一行 roleDiv.innerHTML = `
${permissionsHtml}
`; container.appendChild(roleDiv); // 添加事件监听器,处理点击和右键点击弹出菜单 roleDiv.addEventListener('click', function(event) { event.stopPropagation(); // 阻止事件冒泡 event.preventDefault(); // 阻止默认行为 showRoleActionMenu(event, roleInfo.Name); }); roleDiv.addEventListener('contextmenu', function(event) { event.preventDefault(); showRoleActionMenu(event, roleInfo.Name); }); } function showRoleActionMenu(event, roleName) { // 移除已有的菜单 const existingMenu = document.getElementById('role-action-menu'); if (existingMenu) { existingMenu.remove(); } const menu = document.createElement('div'); menu.id = 'role-action-menu'; menu.className = 'role-action-menu'; menu.style.top = `${event.clientY}px`; menu.style.left = `${event.clientX}px`; const topRoles = ['admin', 'guest', 'supportRole']; if (topRoles.includes(roleName)) { // 为置顶角色设置不可操作的提示 const disabledButton = document.createElement('button'); disabledButton.textContent = '不可操作'; disabledButton.className = 'role-info-button-disabled'; menu.appendChild(disabledButton); } else { // 检查用户是否有 update_role 和 delete_role 权限 const hasUpdateRolePermission = currentUserPermissions.includes('update_role'); const hasDeleteRolePermission = currentUserPermissions.includes('delete_role'); // 创建和添加修改角色按钮 if (hasUpdateRolePermission) { const modifyButton = document.createElement('button'); modifyButton.textContent = '修改角色'; modifyButton.className = 'role-info-button'; modifyButton.addEventListener('click', function () { modifyRole(roleName); menu.remove(); // 点击按钮后,关闭菜单栏 }); menu.appendChild(modifyButton); } // 创建和添加删除角色按钮 if (hasDeleteRolePermission) { const deleteButton = document.createElement('button'); deleteButton.textContent = '删除角色'; deleteButton.className = 'role-info-button role-info-button-delete'; deleteButton.addEventListener('click', function () { deleteRole(roleName); menu.remove(); // 点击按钮后,关闭菜单栏 }); menu.appendChild(deleteButton); } // 如果用户没有修改或删除权限,则显示没有可用操作 if (!hasUpdateRolePermission && !hasDeleteRolePermission) { const noOption = document.createElement('div'); noOption.textContent = '没有可用的操作'; noOption.style.textAlign = 'center'; noOption.style.color = '#999'; menu.appendChild(noOption); } } document.body.appendChild(menu); // 点击其他地方关闭菜单 document.addEventListener('click', function closeMenu(event) { if (!menu.contains(event.target)) { menu.remove(); document.removeEventListener('click', closeMenu); } }); } //修改角色信息 function modifyRole(roleName) { console.log(`modifyRole called with roleName: ${roleName}`); fetchRoleInfo(roleName, function(roleInfo) { console.log(`fetchRoleInfo returned:`, roleInfo); if (!roleInfo) { console.error('Role info is undefined or null'); return; } const extraInfoContent = document.getElementById('extraInfoContent'); if (!extraInfoContent) { console.error('Element with id "extraInfoContent" not found'); return; } extraInfoContent.innerHTML = `