|
|
@@ -0,0 +1,359 @@
|
|
|
+// 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 = `
|
|
|
+ <h3>${roleInfo.Name}</h3>
|
|
|
+ <p>${permissionsHtml}</p>
|
|
|
+ `;
|
|
|
+ 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 = `
|
|
|
+ <h3>修改角色: ${roleInfo.Name}</h3>
|
|
|
+ <label for="roleName">角色名称:</label>
|
|
|
+ <input type="text" id="roleName" value="${roleInfo.Name}" required><br><br>
|
|
|
+ <label for="permissions">权限:</label><br>
|
|
|
+ <div id="permissions">
|
|
|
+ <div>
|
|
|
+ <input type="checkbox" id="license" name="permissions" value="license" onchange="toggleSubPermissions('license', this)">
|
|
|
+ <label for="license">许可证</label>
|
|
|
+ <div id="licenseSubPermissions" style="margin-left: 20px;">
|
|
|
+ <input type="checkbox" id="generate_license" name="permissions" value="generate_license">
|
|
|
+ <label for="generate_license">生成许可证</label><br>
|
|
|
+ <input type="checkbox" id="upload_license" name="permissions" value="upload_license">
|
|
|
+ <label for="upload_license">上传许可证</label><br>
|
|
|
+ <input type="checkbox" id="read_license" name="permissions" value="read_license">
|
|
|
+ <label for="read_license">读取许可证</label><br>
|
|
|
+ <input type="checkbox" id="update_license" name="permissions" value="update_license">
|
|
|
+ <label for="update_license">更新许可证</label><br>
|
|
|
+ <input type="checkbox" id="delete_license" name="permissions" value="delete_license">
|
|
|
+ <label for="delete_license">删除许可证</label><br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <input type="checkbox" id="user" name="permissions" value="user" onchange="toggleSubPermissions('user', this)">
|
|
|
+ <label for="user">用户</label>
|
|
|
+ <div id="userSubPermissions" style="margin-left: 20px;">
|
|
|
+ <input type="checkbox" id="create_user" name="permissions" value="create_user">
|
|
|
+ <label for="create_user">创建用户</label><br>
|
|
|
+ <input type="checkbox" id="read_user" name="permissions" value="read_user">
|
|
|
+ <label for="read_user">读取用户</label><br>
|
|
|
+ <input type="checkbox" id="update_user" name="permissions" value="update_user">
|
|
|
+ <label for="update_user">更新用户</label><br>
|
|
|
+ <input type="checkbox" id="delete_user" name="permissions" value="delete_user">
|
|
|
+ <label for="delete_user">删除用户</label><br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <input type="checkbox" id="role" name="permissions" value="role" onchange="toggleSubPermissions('role', this)">
|
|
|
+ <label for="role">角色</label>
|
|
|
+ <div id="roleSubPermissions" style="margin-left: 20px;">
|
|
|
+ <input type="checkbox" id="create_role" name="permissions" value="create_role">
|
|
|
+ <label for="create_role">创建角色</label><br>
|
|
|
+ <input type="checkbox" id="delete_role" name="permissions" value="delete_role">
|
|
|
+ <label for="delete_role">删除角色</label><br>
|
|
|
+ <input type="checkbox" id="update_role" name="permissions" value="update_role">
|
|
|
+ <label for="update_role">更新角色</label><br>
|
|
|
+ <input type="checkbox" id="get_role" name="permissions" value="get_role">
|
|
|
+ <label for="get_role">获取角色</label><br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div><br><br>
|
|
|
+ <button onclick="saveRoleChanges('${roleInfo.Id}')">保存</button>
|
|
|
+ `;
|
|
|
+
|
|
|
+ console.log('Form content added to extraInfoContent');
|
|
|
+
|
|
|
+ const checkboxes = document.querySelectorAll('#permissions input[type="checkbox"]');
|
|
|
+
|
|
|
+// 遍历所有复选框
|
|
|
+checkboxes.forEach(checkbox => {
|
|
|
+ if (roleInfo.Permissions.includes(checkbox.value)) {
|
|
|
+ checkbox.checked = true; // 如果当前权限在roleInfo.Permissions中，则勾选
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+ const extraInfoModal = document.getElementById('extraInfoModal');
|
|
|
+ if (!extraInfoModal) {
|
|
|
+ console.error('Element with id "extraInfoModal" not found');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ extraInfoModal.style.display = 'block'; // 强制显示模态框
|
|
|
+ console.log('Modal should be visible now');
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 示例的删除角色函数
|
|
|
+function deleteRole(roleName) {
|
|
|
+ if (confirm(`确定要删除角色：${roleName} 吗？`)) {
|
|
|
+ fetch('http://127.0.0.1:8080/api/admin/DeleteRole', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: {
|
|
|
+ 'Authorization': `Bearer ${authToken}`,
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ },
|
|
|
+ body: JSON.stringify({ Name: roleName })
|
|
|
+ })
|
|
|
+ .then(response => response.json())
|
|
|
+ .then(data => {
|
|
|
+ if (data.code === 200) {
|
|
|
+ alert('角色删除成功');
|
|
|
+ fetchRoles(); // 重新获取角色列表
|
|
|
+ } else {
|
|
|
+ alert(`删除失败：${data.message}`);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error('删除角色出错:', error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function showCreateRoleModal() {
|
|
|
+ const extraInfoContent = document.getElementById('extraInfoContent');
|
|
|
+ extraInfoContent.innerHTML = `
|
|
|
+ <h3>创建新角色</h3>
|
|
|
+ <label for="newRoleName">角色名称:</label>
|
|
|
+ <input type="text" id="newRoleName" required><br><br>
|
|
|
+ <label for="newPermissions">权限:</label><br>
|
|
|
+ <div id="newPermissions">
|
|
|
+ <div>
|
|
|
+ <input type="checkbox" id="license" name="permissions" value="license" onchange="toggleSubPermissions('license', this)">
|
|
|
+ <label for="license">许可证</label>
|
|
|
+ <div id="licenseSubPermissions" style="margin-left: 20px;">
|
|
|
+ <input type="checkbox" id="generate_license" name="permissions" value="generate_license">
|
|
|
+ <label for="generate_license">生成许可证</label><br>
|
|
|
+ <input type="checkbox" id="upload_license" name="permissions" value="upload_license">
|
|
|
+ <label for="upload_license">上传许可证(废弃)</label><br>
|
|
|
+ <input type="checkbox" id="read_license" name="permissions" value="read_license">
|
|
|
+ <label for="read_license">读取许可证</label><br>
|
|
|
+ <input type="checkbox" id="update_license" name="permissions" value="update_license">
|
|
|
+ <label for="update_license">更新许可证(废弃)</label><br>
|
|
|
+ <input type="checkbox" id="delete_license" name="permissions" value="delete_license">
|
|
|
+ <label for="delete_license">删除许可证(废弃)</label><br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <input type="checkbox" id="user" name="permissions" value="user" onchange="toggleSubPermissions('user', this)">
|
|
|
+ <label for="user">用户</label>
|
|
|
+ <div id="userSubPermissions" style="margin-left: 20px;">
|
|
|
+ <input type="checkbox" id="create_user" name="permissions" value="create_user">
|
|
|
+ <label for="create_user">创建用户</label><br>
|
|
|
+ <input type="checkbox" id="read_user" name="permissions" value="read_user">
|
|
|
+ <label for="read_user">读取用户</label><br>
|
|
|
+ <input type="checkbox" id="update_user" name="permissions" value="update_user">
|
|
|
+ <label for="update_user">更新用户</label><br>
|
|
|
+ <input type="checkbox" id="delete_user" name="permissions" value="delete_user">
|
|
|
+ <label for="delete_user">删除用户</label><br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <input type="checkbox" id="role" name="permissions" value="role" onchange="toggleSubPermissions('role', this)">
|
|
|
+ <label for="role">角色</label>
|
|
|
+ <div id="roleSubPermissions" style="margin-left: 20px;">
|
|
|
+ <input type="checkbox" id="create_role" name="permissions" value="create_role">
|
|
|
+ <label for="create_role">创建角色</label><br>
|
|
|
+ <input type="checkbox" id="delete_role" name="permissions" value="delete_role">
|
|
|
+ <label for="delete_role">删除角色</label><br>
|
|
|
+ <input type="checkbox" id="update_role" name="permissions" value="update_role">
|
|
|
+ <label for="update_role">更新角色</label><br>
|
|
|
+ <input type="checkbox" id="get_role" name="permissions" value="get_role">
|
|
|
+ <label for="get_role">获取角色</label><br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div><br><br>
|
|
|
+ <button onclick="createNewRole()">创建</button>
|
|
|
+ `;
|
|
|
+ document.getElementById('extraInfoModal').style.display = 'block';
|
|
|
+}
|
