增加权限编辑页面
This commit is contained in:
parent
a2aee4d64c
commit
b260f1236b
|
|
@ -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,25 +362,34 @@
|
||||||
// 更新内容区域的函数
|
// 更新内容区域的函数
|
||||||
function updateContent(title) {
|
function updateContent(title) {
|
||||||
const contentBody = document.querySelector('.content-body');
|
const contentBody = document.querySelector('.content-body');
|
||||||
contentBody.innerHTML = `
|
|
||||||
<div class="content-section">
|
// 如果是权限编辑，显示iframe
|
||||||
<h2>${title || '欢迎使用'}</h2>
|
if (title === '权限编辑') {
|
||||||
<p>您已选择"${title}"菜单项。在这里可以展示与该菜单项相关的详细内容。</p>
|
contentBody.innerHTML = `
|
||||||
<p>这是一个内容展示容器，您可以根据实际需求添加任何内容，包括文本、图片、表格等。</p>
|
<iframe class="content-iframe" src="权限管理/权限编辑.html"></iframe>
|
||||||
</div>
|
`;
|
||||||
<div class="content-section">
|
} else {
|
||||||
<h2>功能说明</h2>
|
// 其他菜单项显示默认内容
|
||||||
<p>此区域用于展示"${title}"相关的具体内容。</p>
|
contentBody.innerHTML = `
|
||||||
<p>您可以添加任何HTML内容，包括：</p>
|
<div class="content-section">
|
||||||
<ul>
|
<h2>${title || '欢迎使用'}</h2>
|
||||||
<li>文本段落</li>
|
<p>您已选择"${title}"菜单项。在这里可以展示与该菜单项相关的详细内容。</p>
|
||||||
<li>图片展示</li>
|
<p>这是一个内容展示容器，您可以根据实际需求添加任何内容，包括文本、图片、表格等。</p>
|
||||||
<li>数据表格</li>
|
</div>
|
||||||
<li>表单元素</li>
|
<div class="content-section">
|
||||||
<li>图表展示</li>
|
<h2>功能说明</h2>
|
||||||
</ul>
|
<p>此区域用于展示"${title}"相关的具体内容。</p>
|
||||||
</div>
|
<p>您可以添加任何HTML内容，包括：</p>
|
||||||
`;
|
<ul>
|
||||||
|
<li>文本段落</li>
|
||||||
|
<li>图片展示</li>
|
||||||
|
<li>数据表格</li>
|
||||||
|
<li>表单元素</li>
|
||||||
|
<li>图表展示</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -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,19 +703,58 @@
|
||||||
// 展开/收起子权限
|
// 展开/收起子权限
|
||||||
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);
|
||||||
nextRow.style.display = isExpanded ? 'none' : 'table-row';
|
|
||||||
|
// 切换相关子行的显示状态
|
||||||
|
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;
|
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) {
|
||||||
Loading…
Reference in New Issue