linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加权限编辑页面

This commit is contained in:
linbin 2025-09-05 17:01:44 +08:00
parent a2aee4d64c
commit b260f1236b
2 changed files with 120 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
平台web/index.html
View File

@ -144,6 +144,15 @@
color: #555; color: #555;
} }
/* iframe样式 */
.content-iframe {
width: 100%;
height: calc(100vh - 140px);
border: none;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 768px) { @media (max-width: 768px) {
.sidebar { .sidebar {
@ -187,13 +196,13 @@
<li class="menu-item"> <li class="menu-item">
<a> <a>
<i>📊</i> <i>📊</i>
<span>数据分析</span> <span>权限管理</span>
</a> </a>
<ul class="submenu"> <ul class="submenu">
<li class="submenu-item"> <li class="submenu-item">
<a> <a>
<i>📈</i> <i>📈</i>
<span>销售报表</span> <span>权限编辑</span>
</a> </a>
</li> </li>
<li class="submenu-item"> <li class="submenu-item">
@ -353,6 +362,14 @@
// 更新内容区域的函数 // 更新内容区域的函数
function updateContent(title) { function updateContent(title) {
const contentBody = document.querySelector('.content-body'); const contentBody = document.querySelector('.content-body');
// 如果是权限编辑，显示iframe
if (title === '权限编辑') {
contentBody.innerHTML = `
<iframe class="content-iframe" src="权限管理/权限编辑.html"></iframe>
`;
} else {
// 其他菜单项显示默认内容
contentBody.innerHTML = ` contentBody.innerHTML = `
<div class="content-section"> <div class="content-section">
<h2>${title || '欢迎使用'}</h2> <h2>${title || '欢迎使用'}</h2>
@ -373,6 +390,7 @@
</div> </div>
`; `;
} }
}
}); });
</script> </script>
</body> </body>

91
平台web/permission-manager.html → 平台web/权限管理/权限编辑.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权限管理系统</title> <title>权限编辑</title>
<style> <style>
* { * {
margin: 0; margin: 0;
@ -170,15 +170,39 @@
background-color: #fafbfc; background-color: #fafbfc;
} }
.permission-row.child-row td:first-child { .permission-row.level-1 td:first-child {
padding-left: 45px; padding-left: 60px;
position: relative; position: relative;
} }
.permission-row.child-row td:first-child::before { .permission-row.level-1 td:first-child::before {
content: "└─"; content: "└─";
position: absolute; position: absolute;
left: 25px; left: 35px;
color: #bdc3c7;
}
.permission-row.level-2 td:first-child {
padding-left: 100px;
position: relative;
}
.permission-row.level-2 td:first-child::before {
content: "└─";
position: absolute;
left: 75px;
color: #bdc3c7;
}
.permission-row.level-3 td:first-child {
padding-left: 140px;
position: relative;
}
.permission-row.level-3 td:first-child::before {
content: "└─";
position: absolute;
left: 115px;
color: #bdc3c7; color: #bdc3c7;
} }
@ -428,7 +452,7 @@
<div class="container"> <div class="container">
<!-- 头部 --> <!-- 头部 -->
<div class="header"> <div class="header">
<h1>权限管理系统</h1> <h1>权限编辑</h1>
<div class="header-actions"> <div class="header-actions">
<button class="btn btn-success" onclick="openAddModal()"> <button class="btn btn-success" onclick="openAddModal()">
➕ 新增权限 ➕ 新增权限
@ -638,10 +662,16 @@
function renderPermissionRow(item, level) { function renderPermissionRow(item, level) {
const hasChildren = item.children && item.children.length > 0; const hasChildren = item.children && item.children.length > 0;
const isParent = level === 0; const isParent = level === 0;
const parentClass = isParent ? 'parent-row' : 'child-row'; let rowClass = 'permission-row';
if (isParent) {
rowClass += ' parent-row';
} else {
rowClass += ' child-row level-' + level;
}
let html = ` let html = `
<tr class="permission-row ${parentClass}" <tr class="${rowClass}"
data-id="${item.id}" data-id="${item.id}"
data-code="${item.code}" data-code="${item.code}"
oncontextmenu="showContextMenu(event, this)"> oncontextmenu="showContextMenu(event, this)">
@ -673,20 +703,59 @@
// 展开/收起子权限 // 展开/收起子权限
function toggleChildren(btn) { function toggleChildren(btn) {
const row = btn.closest('tr'); const row = btn.closest('tr');
const code = row.dataset.code; const parentCode = row.dataset.code;
let nextRow = row.nextElementSibling; let nextRow = row.nextElementSibling;
const isExpanded = btn.textContent === '▼'; const isExpanded = btn.textContent === '▼';
btn.textContent = isExpanded ? '▶' : '▼'; btn.textContent = isExpanded ? '▶' : '▼';
btn.classList.toggle('collapsed', isExpanded); btn.classList.toggle('collapsed', isExpanded);
// 切换所有子行的显示状态 // 找到这个权限的所有直接和间接子权限
while (nextRow && nextRow.classList.contains('child-row')) { const childCodes = getChildPermissionCodes(parentCode);
// 切换相关子行的显示状态
while (nextRow) {
const nextRowCode = nextRow.dataset.code;
const nextRowParent = permissions.find(p => p.code === nextRowCode)?.parentCode;
// 如果当前行是目标权限的子权限（直接或间接）
if (childCodes.includes(nextRowCode)) {
nextRow.style.display = isExpanded ? 'none' : 'table-row'; nextRow.style.display = isExpanded ? 'none' : 'table-row';
} else if (!isChildOfAny(nextRowCode, childCodes)) {
// 如果不是子权限，说明已到达同级或上级权限，停止处理
break;
}
nextRow = nextRow.nextElementSibling; nextRow = nextRow.nextElementSibling;
} }
} }
// 获取某个权限的所有子权限编码（递归）
function getChildPermissionCodes(parentCode) {
const children = [];
function findChildren(code) {
permissions.forEach(p => {
if (p.parentCode === code) {
children.push(p.code);
findChildren(p.code); // 递归查找子权限
}
});
}
findChildren(parentCode);
return children;
}
// 检查某个权限是否为指定权限列表中任一权限的子权限
function isChildOfAny(code, parentCodes) {
const permission = permissions.find(p => p.code === code);
if (!permission) return false;
return parentCodes.includes(permission.parentCode) ||
(permission.parentCode && isChildOfAny(permission.parentCode, parentCodes));
}
// 显示右键菜单 // 显示右键菜单
function showContextMenu(event, row) { function showContextMenu(event, row) {
event.preventDefault(); event.preventDefault();