|
|
@@ -5,7 +5,9 @@ fetchRoles()
|
|
|
// 处理修改用户按钮点击
|
|
|
document.getElementById("createRoleButton").onclick = () => {
|
|
|
|
|
|
- ShowCreateRoleModal(); // 打开编辑用户模态框
|
|
|
+ // 调用函数以设置模态框
|
|
|
+ShowCreateRoleModal();
|
|
|
+
|
|
|
};
|
|
|
|
|
|
function fetchRoles() {
|
|
|
@@ -44,7 +46,7 @@ function fetchRoles() {
|
|
|
// 检查用户是否有 create_role 权限
|
|
|
const hasCreateRolePermission = currentUserPermissions.includes('create_role');
|
|
|
|
|
|
- // 如果有权限则显示“创建角色”按钮
|
|
|
+ // 如果有权限则显示"创建角色"按钮
|
|
|
if (hasCreateRolePermission) {
|
|
|
document.getElementById('createRoleButton').style.display = 'block';
|
|
|
} else {
|
|
|
@@ -294,72 +296,131 @@ function deleteRole(roleName) {
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
+// 修改后的 ShowCreateRoleModal 方法
|
|
|
function ShowCreateRoleModal() {
|
|
|
- console.log('Creating role...');
|
|
|
- const createRoleButton = document.getElementById('createRoleButton');
|
|
|
- const roleActionMenu = document.getElementById('role-action-menu');
|
|
|
-
|
|
|
- createRoleButton.style.display = 'block'; // 显示创建角色按钮
|
|
|
+ // 获取模态框
|
|
|
+ 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);
|
|
|
+ };
|
|
|
|
|
|
- // 点击事件处理程序
|
|
|
- createRoleButton.addEventListener('click', handleCreateRoleButtonClick);
|
|
|
+ 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")); // 换行
|
|
|
+ });
|
|
|
|
|
|
- function handleCreateRoleButtonClick() {
|
|
|
- openCreateRoleModal();
|
|
|
+ container.appendChild(subContainer);
|
|
|
}
|
|
|
|
|
|
- function openCreateRoleModal() {
|
|
|
- roleActionMenu.classList.add('show'); // 显示模态框
|
|
|
- roleActionMenu.innerHTML = `
|
|
|
- <div class="createRoleModal-content">
|
|
|
- <span class="close-button">×</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');
|
|
|
- };
|
|
|
+ // 当用户点击按钮时，打开模态框
|
|
|
+ btn.onclick = function() {
|
|
|
+ modal.style.display = "block";
|
|
|
+ }
|
|
|
|
|
|
- document.getElementById('submitRoleButton').onclick = function() {
|
|
|
- // 处理角色创建逻辑
|
|
|
- console.log("角色名:", document.getElementById('roleName').value);
|
|
|
- roleActionMenu.classList.remove('show');
|
|
|
- };
|
|
|
+ // 当用户点击关闭按钮时，关闭模态框
|
|
|
+ span.onclick = function() {
|
|
|
+ modal.style.display = "none";
|
|
|
}
|
|
|
|
|
|
- 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': '获取角色'
|
|
|
- };
|
|
|
+ // 当用户在模态框外点击时，关闭模态框
|
|
|
+ window.onclick = function(event) {
|
|
|
+ if (event.target == modal) {
|
|
|
+ modal.style.display = "none";
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- return Object.entries(permissions).map(([key, value]) => `
|
|
|
- <label>
|
|
|
- <input type="checkbox" name="${key}" value="${key}"> ${value}
|
|
|
- </label><br>
|
|
|
- `).join('');
|
|
|
+/**
|
|
|
+ * 切换子权限的显示与隐藏
|
|
|
+ * @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;
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
+
|
