增加权限编辑页面
This commit is contained in:
parent
a2aee4d64c
commit
b260f1236b
|
|
@ -144,6 +144,15 @@
|
|||
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) {
|
||||
.sidebar {
|
||||
|
|
@ -187,13 +196,13 @@
|
|||
<li class="menu-item">
|
||||
<a>
|
||||
<i>📊</i>
|
||||
<span>数据分析</span>
|
||||
<span>权限管理</span>
|
||||
</a>
|
||||
<ul class="submenu">
|
||||
<li class="submenu-item">
|
||||
<a>
|
||||
<i>📈</i>
|
||||
<span>销售报表</span>
|
||||
<span>权限编辑</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="submenu-item">
|
||||
|
|
@ -353,25 +362,34 @@
|
|||
// 更新内容区域的函数
|
||||
function updateContent(title) {
|
||||
const contentBody = document.querySelector('.content-body');
|
||||
contentBody.innerHTML = `
|
||||
<div class="content-section">
|
||||
<h2>${title || '欢迎使用'}</h2>
|
||||
<p>您已选择"${title}"菜单项。在这里可以展示与该菜单项相关的详细内容。</p>
|
||||
<p>这是一个内容展示容器，您可以根据实际需求添加任何内容，包括文本、图片、表格等。</p>
|
||||
</div>
|
||||
<div class="content-section">
|
||||
<h2>功能说明</h2>
|
||||
<p>此区域用于展示"${title}"相关的具体内容。</p>
|
||||
<p>您可以添加任何HTML内容，包括：</p>
|
||||
<ul>
|
||||
<li>文本段落</li>
|
||||
<li>图片展示</li>
|
||||
<li>数据表格</li>
|
||||
<li>表单元素</li>
|
||||
<li>图表展示</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 如果是权限编辑，显示iframe
|
||||
if (title === '权限编辑') {
|
||||
contentBody.innerHTML = `
|
||||
<iframe class="content-iframe" src="权限管理/权限编辑.html"></iframe>
|
||||
`;
|
||||
} else {
|
||||
// 其他菜单项显示默认内容
|
||||
contentBody.innerHTML = `
|
||||
<div class="content-section">
|
||||
<h2>${title || '欢迎使用'}</h2>
|
||||
<p>您已选择"${title}"菜单项。在这里可以展示与该菜单项相关的详细内容。</p>
|
||||
<p>这是一个内容展示容器，您可以根据实际需求添加任何内容，包括文本、图片、表格等。</p>
|
||||
</div>
|
||||
<div class="content-section">
|
||||
<h2>功能说明</h2>
|
||||
<p>此区域用于展示"${title}"相关的具体内容。</p>
|
||||
<p>您可以添加任何HTML内容，包括：</p>
|
||||
<ul>
|
||||
<li>文本段落</li>
|
||||
<li>图片展示</li>
|
||||
<li>数据表格</li>
|
||||
<li>表单元素</li>
|
||||
<li>图表展示</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>权限管理系统</title>
|
||||
<title>权限编辑</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
|
|
@ -170,15 +170,39 @@
|
|||
background-color: #fafbfc;
|
||||
}
|
||||
|
||||
.permission-row.child-row td:first-child {
|
||||
padding-left: 45px;
|
||||
.permission-row.level-1 td:first-child {
|
||||
padding-left: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.permission-row.child-row td:first-child::before {
|
||||
.permission-row.level-1 td:first-child::before {
|
||||
content: "└─";
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -428,7 +452,7 @@
|
|||
<div class="container">
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<h1>权限管理系统</h1>
|
||||
<h1>权限编辑</h1>
|
||||
<div class="header-actions">
|
||||
<button class="btn btn-success" onclick="openAddModal()">
|
||||
➕ 新增权限
|
||||
|
|
@ -638,10 +662,16 @@
|
|||
function renderPermissionRow(item, level) {
|
||||
const hasChildren = item.children && item.children.length > 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 = `
|
||||
<tr class="permission-row ${parentClass}"
|
||||
<tr class="${rowClass}"
|
||||
data-id="${item.id}"
|
||||
data-code="${item.code}"
|
||||
oncontextmenu="showContextMenu(event, this)">
|
||||
|
|
@ -673,20 +703,59 @@
|
|||
// 展开/收起子权限
|
||||
function toggleChildren(btn) {
|
||||
const row = btn.closest('tr');
|
||||
const code = row.dataset.code;
|
||||
const parentCode = row.dataset.code;
|
||||
let nextRow = row.nextElementSibling;
|
||||
|
||||
const isExpanded = btn.textContent === '▼';
|
||||
btn.textContent = isExpanded ? '▶' : '▼';
|
||||
btn.classList.toggle('collapsed', isExpanded);
|
||||
|
||||
// 切换所有子行的显示状态
|
||||
while (nextRow && nextRow.classList.contains('child-row')) {
|
||||
nextRow.style.display = isExpanded ? 'none' : 'table-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';
|
||||
} else if (!isChildOfAny(nextRowCode, childCodes)) {
|
||||
// 如果不是子权限，说明已到达同级或上级权限，停止处理
|
||||
break;
|
||||
}
|
||||
|
||||
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) {
|
||||
event.preventDefault();
|
||||
Loading…
Reference in New Issue