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);
        });
    }
}


// 修改后的 ShowCreateRoleModal 方法
function ShowCreateRoleModal() {
    // 获取模态框
    var modal = document.getElementById("CreateRoleModa");

    // 获取按钮
    var btn = document.getElementById("createRoleButton");

    // 获取关闭按钮
    var span = document.getElementsByClassName("CreateRoleModal-close")[0];

    // 权限数据
    const permissionMap = {
        'license': '许可证',
        'user': '用户',
        'role': '角色'
    };

    const subPermissions = {
        'license': [
            { id: 'generate_license', label: '生成许可证' },
            { id: 'upload_license', label: '上传许可证(废弃)' },
            { id: 'read_license', label: '读取许可证' },
            { id: 'read_license_record', label: '读取许可证分发记录' },
            { id: 'update_license', label: '修改许可证(废弃)' },
            { id: 'delete_license', label: '删除许可证(废弃)' },
            { id: 'dispat_license', label: '分发许可证' }
        ],
        'user': [
            { id: 'create_user', label: '创建用户' },
            { id: 'read_user', label: '读取用户' },
            { id: 'update_user', label: '更新用户' },
            { id: 'delete_user', label: '删除用户' }
        ],
        'role': [
            { id: 'create_role', label: '创建角色' },
            { id: 'delete_role', label: '删除角色' },
            { id: 'update_role', label: '更新角色' },
            { id: 'get_role', label: '获取角色' }
        ]
    };

    // 填充复选框
    var container = document.getElementById("permissionsContainer");
    container.innerHTML = ''; // 清空之前的内容

    for (const [key, value] of Object.entries(permissionMap)) {
        // 创建主权限复选框
        var mainCheckbox = document.createElement("input");
        mainCheckbox.type = "checkbox";
        mainCheckbox.id = key;
        mainCheckbox.value = key;
        mainCheckbox.name = "permissions";
        mainCheckbox.onchange = function() {
            toggleSubPermissions(key, this);
        };

        var mainLabel = document.createElement("label");
        mainLabel.htmlFor = key;
        mainLabel.textContent = value;

        container.appendChild(mainCheckbox);
        container.appendChild(mainLabel);
        container.appendChild(document.createElement("br")); // 换行

        // 创建子权限容器
        var subContainer = document.createElement("div");
        subContainer.id = `${key}SubPermissions`;
        subContainer.style.marginLeft = "20px";
        subContainer.style.display = "none"; // 默认隐藏

        // 创建子权限复选框
        subPermissions[key].forEach(sub => {
            var subCheckbox = document.createElement("input");
            subCheckbox.type = "checkbox";
            subCheckbox.id = sub.id;
            subCheckbox.value = sub.id;
            subCheckbox.name = "permissions";

            var subLabel = document.createElement("label");
            subLabel.htmlFor = sub.id;
            subLabel.textContent = sub.label;

            subContainer.appendChild(subCheckbox);
            subContainer.appendChild(subLabel);
            subContainer.appendChild(document.createElement("br")); // 换行
        });

        container.appendChild(subContainer);
    }

    // 当用户点击按钮时，打开模态框
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // 当用户点击关闭按钮时，关闭模态框
    span.onclick = function() {
        modal.style.display = "none";
    }

    // 当用户在模态框外点击时，关闭模态框
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
}

/**
 * 切换子权限的显示与隐藏
 * @param {string} key 主权限的键
 * @param {HTMLElement} checkbox 主权限的复选框
 */
function toggleSubPermissions(key, checkbox) {
    var subContainer = document.getElementById(`${key}SubPermissions`);
    if (checkbox.checked) {
        subContainer.style.display = "block";
    } else {
        subContainer.style.display = "none";
        // 取消所有子权限的选中状态
        var subCheckboxes = subContainer.querySelectorAll('input[type="checkbox"]');
        subCheckboxes.forEach(sub => {
            sub.checked = false;
        });
    }
}