xugu_license/static/role/role.js

// role.js

fetchRoles()

  // 处理修改用户按钮点击
  document.getElementById("createRoleButton").onclick = () => {
      
    ShowCreateRoleModal(); // 打开编辑用户模态框
};

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() {
    console.log('Creating role...');
    const createRoleButton = document.getElementById('createRoleButton');
    const roleActionMenu = document.getElementById('role-action-menu');

    createRoleButton.style.display = 'block'; // 显示创建角色按钮

    // 点击事件处理程序
    createRoleButton.addEventListener('click', handleCreateRoleButtonClick);

    function handleCreateRoleButtonClick() {
        openCreateRoleModal();
    }

    function openCreateRoleModal() {
        roleActionMenu.classList.add('show'); // 显示模态框
        roleActionMenu.innerHTML = `
            <div class="createRoleModal-content">
                <span class="close-button">&times;</span>
                <h3>创建角色</h3>
                <label for="roleName">角色名:</label>
                <input type="text" id="roleName" required>
                <h4>权限选择:</h4>
                ${generateCheckboxes()}
                <div class="createRole-buttons">
                    <button id="submitRoleButton">提交</button>
                </div>
            </div>
        `;

        // 关闭模态框
        roleActionMenu.querySelector('.close-button').onclick = function() {
            roleActionMenu.classList.remove('show');
        };

        document.getElementById('submitRoleButton').onclick = function() {
            // 处理角色创建逻辑
            console.log("角色名:", document.getElementById('roleName').value);
            roleActionMenu.classList.remove('show');
        };
    }

    function generateCheckboxes() {
        const permissions = {
            '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': '获取角色'
        };

        return Object.entries(permissions).map(([key, value]) => `
            <label>
                <input type="checkbox" name="${key}" value="${key}"> ${value}
            </label><br>
        `).join('');
    }
}