xugu_license/static/role/role.js

// role.js

fetchRoles()

//   // 处理修改用户按钮点击
document.getElementById("createRoleButton").onclick = () => {
    // 调用函数以设置模态框
    ShowCreateRoleModal();
};

// 绑定表单提交事件 创建角色
document.getElementById('CreateRoleModa').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    createRole(); // 调用创建角色的函数
});



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

    roleDiv.addEventListener('contextmenu', function(event) {
        event.preventDefault();
        showRoleActionMenu(event, roleInfo.Name,roleInfo);
    });
}

function showRoleActionMenu(event, roleName,roleInfo) {
    // 移除已有的菜单
    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', 'support'];

    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 () {
                ShowModifyRoleModal(roleInfo);
                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 toggleModifyChildCheckboxes(key, isChecked) {
    const subContainer = document.getElementById("modify_" + key + "SubPermissions");
    if (subContainer) {
        const childCheckboxes = subContainer.querySelectorAll('input[type="checkbox"]');
        childCheckboxes.forEach(checkbox => {
            checkbox.checked = isChecked;
        });
    }
}

// 打开修改角色模态框
function ShowModifyRoleModal(roleInfo) {
    console.log("打开修改角色模态框", roleInfo);

    // 获取模态框
    var modal = document.getElementById("ModifyRoleModal");

    // 填充角色名称
    var roleNameInput = document.getElementById("modifyRoleName");
    roleNameInput.value = roleInfo.Name;

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

    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: '获取角色' }
        ]
    };

    // 生成复选框
    for (const [key, value] of Object.entries(permissionMap)) {
        var parentDiv = document.createElement("div");
        parentDiv.classList.add('parent-permission');

        var mainCheckbox = document.createElement("input");
        mainCheckbox.type = "checkbox";
        mainCheckbox.id = "modify_" + key;
        mainCheckbox.value = key;
        mainCheckbox.name = "permissions";

        // 当角色拥有该权限时勾选
        if (roleInfo.Permissions.includes(key)) {
            mainCheckbox.checked = true;
        }

        // 当父选项框改变时，联动子选项框
        mainCheckbox.addEventListener('change', function() {
            toggleModifyChildCheckboxes(key, this.checked);
        });

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

        parentDiv.appendChild(mainCheckbox);
        parentDiv.appendChild(mainLabel);
        parentDiv.appendChild(document.createElement("br"));

        var subContainer = document.createElement("div");
        subContainer.id = "modify_" + key + "SubPermissions";
        subContainer.classList.add('role-sub-permissions');
        subContainer.style.display = "block";

        subPermissions[key].forEach(sub => {
            var subCheckbox = document.createElement("input");
            subCheckbox.type = "checkbox";
            subCheckbox.id = "modify_" + sub.id;
            subCheckbox.value = sub.id;
            subCheckbox.name = "permissions";

            if (roleInfo.Permissions.includes(sub.id)) {
                subCheckbox.checked = true;
            }

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

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

        parentDiv.appendChild(subContainer);
        container.appendChild(parentDiv);
    }

    // 显示模态框
    modal.style.display = "block";

    // 绑定表单提交事件
    document.getElementById('ModifyRoleForm').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止默认提交行为

        const roleId = roleInfo.Id; // 获取当前角色ID
        modifyRole(roleId);  // 调用修改角色的函数
    });

    // 关闭按钮的事件处理
    var closeModalButton = modal.querySelector(".CreateRoleModal-close");
    closeModalButton.onclick = function() {
        modal.style.display = "none";
    };

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

// 修改角色信息
function modifyRole(roleId) {
    const roleNameInput = document.getElementById('modifyRoleName');
    const roleName = roleNameInput.value.trim();

    if (!roleName) {
        alert('请输入角色名称。');
        return;
    }

    // 获取所有被选中的子权限复选框
    const permissionCheckboxes = document.querySelectorAll('#modifyPermissionsContainer .role-sub-permissions input[type="checkbox"]:checked');
    const permissions = Array.from(permissionCheckboxes).map(checkbox => checkbox.value);

    // 构造请求体
    const requestBody = {
        id: roleId,  // 使用角色ID来修改角色信息
        name: roleName,
        permissions: permissions // 仅添加子权限的值
    };

    // 发送修改请求
    fetch('http://127.0.0.1:8080/api/admin/UpdateRole', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${authToken}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestBody)
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(errorData => {
                throw new Error(errorData.message || '修改角色失败');
            });
        }
        return response.json();
    })
    .then(data => {
        alert('角色修改成功！');
        document.getElementById('ModifyRoleModal').style.display = 'none';
        fetchRoles(); // 刷新角色列表
    })
    .catch(error => {
        console.error('修改角色失败:', error);
        alert(`修改角色失败: ${error.message}`);
    });
}



// 示例的删除角色函数
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.success === true) {
                alert('角色删除成功');
                fetchRoles(); // 重新获取角色列表
            } else {
                alert(`删除失败：${data.message}`);
            }
        })
        .catch(error => {
            console.error('删除角色出错:', error);
        });
    }
}








/**
 * 显示创建角色模态框并初始化内容
 */
function ShowCreateRoleModal() {
    console.log("模态框调用");
    // 获取模态框
    var modal = document.getElementById("CreateRoleModa");

    // 获取关闭按钮
    var span = modal.querySelector(".CreateRoleModal-close");

    // 权限数据
    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 parentDiv = document.createElement("div");
        parentDiv.classList.add('parent-permission');

        // 创建主权限复选框
        var mainCheckbox = document.createElement("input");
        mainCheckbox.type = "checkbox";
        mainCheckbox.id = key;
        mainCheckbox.value = key;
        mainCheckbox.name = "permissions";

        // 添加 change 事件监听器，当父复选框状态变化时，自动勾选或取消所有子复选框
        mainCheckbox.addEventListener('change', function() {
            toggleChildCheckboxes(key, this.checked);
        });

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

        parentDiv.appendChild(mainCheckbox);
        parentDiv.appendChild(mainLabel);
        parentDiv.appendChild(document.createElement("br"));

        // 创建子权限容器
        var subContainer = document.createElement("div");
        subContainer.id = `${key}SubPermissions`;
        subContainer.classList.add('role-sub-permissions');
        subContainer.style.display = "block"; // 始终显示

        // 创建子权限复选框
        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"));
        });

        parentDiv.appendChild(subContainer);
        container.appendChild(parentDiv);
    }

    // 显示模态框
    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 {boolean} isChecked 主权限复选框是否选中
 */
function toggleChildCheckboxes(key, isChecked) {
    var subContainer = document.getElementById(`${key}SubPermissions`);
    if (subContainer) {
        var childCheckboxes = subContainer.querySelectorAll('input[type="checkbox"]');
        childCheckboxes.forEach(checkbox => {
            checkbox.checked = isChecked;
        });
    }
}

// 添加创建角色的函数
function createRole() {
    console.log("创建角色");
    const roleNameInput = document.getElementById('roleName');
    const roleName = roleNameInput.value.trim();

    if (!roleName) {
        alert('请输入角色名称。');
        return;
    }

    // 仅选择 role-sub-permissions 类中的复选框
    const permissionCheckboxes = document.querySelectorAll('#permissionsContainer .role-sub-permissions input[type="checkbox"]:checked');
    const permissions = Array.from(permissionCheckboxes).map(checkbox => checkbox.value);

    const requestBody = {
        name: roleName,
        permissions: permissions
    };
    console.log("requestBody", requestBody);

    fetch('http://127.0.0.1:8080/api/admin/CreateRole', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${authToken}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestBody)
    })
    .then(response => {
        console.log("创建角色响应", response);
        if (!response.ok) {
            return response.json().then(errorData => {
                throw new Error(errorData.message || '创建角色失败');
            });
        }
        return response.json();
    })
    .then(data => {
        alert('角色创建成功！');
        document.getElementById('CreateRoleModa').style.display = 'none';
        fetchRoles();
    })
    .catch(error => {
        console.error('创建角色失败:', error);
        alert(`创建角色失败: ${error.message}`);
    });
}