综述: 更新权限管理页面链接和内容

- 修改index.html中的菜单链接,将'账号权限分配'更改为'子经营者管理'
- 新增子经营者管理.html页面文件
This commit is contained in:
linbin 2025-09-09 19:12:52 +08:00
parent 1becf930cc
commit 1daabdef6f
2 changed files with 751 additions and 2 deletions

View File

@ -0,0 +1,749 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子经营者账号管理</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
margin: 0;
background-color: #fff;
border-radius: 0;
box-shadow: none;
overflow-y: auto;
}
.header {
background-color: rgb(9, 84, 43);
color: #fff;
padding: 20px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
font-size: 1.8rem;
font-weight: 600;
}
.header-actions {
display: flex;
gap: 10px;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 5px;
}
.btn-primary {
background-color: #1890ff;
color: #fff;
}
.btn-primary:hover {
background-color: #40a9ff;
transform: translateY(-2px);
}
.btn-success {
background-color: #52c41a;
color: #fff;
}
.btn-success:hover {
background-color: #73d13d;
}
.btn-warning {
background-color: #faad14;
color: #fff;
}
.btn-warning:hover {
background-color: #ffc53d;
}
/* 内容区域 */
.content {
padding: 30px;
}
.section {
margin-bottom: 40px;
}
.section-title {
font-size: 1.4rem;
font-weight: 600;
color: #333;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
}
/* 账号管理区域 */
.account-form {
background-color: #fafafa;
padding: 25px;
border-radius: 8px;
border: 1px solid #e8e8e8;
}
.form-row {
display: flex;
gap: 20px;
align-items: end;
margin-bottom: 20px;
}
.form-group {
flex: 1;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
}
.form-group input,
.form-group select {
width: 100%;
padding: 12px 15px;
border: 1px solid #d9d9d9;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s ease;
background-color: #fff;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #1890ff;
box-shadow: 0 0 5px rgba(24, 144, 255, 0.3);
}
.password-hint {
display: block;
padding: 12px 15px;
border: 1px solid #d9d9d9;
border-radius: 4px;
background-color: #f6ffed;
color: #52c41a;
font-weight: 500;
border-color: #b7eb8f;
}
/* 权限分配区域 */
.permissions-container {
background-color: #fafafa;
padding: 25px;
border-radius: 8px;
border: 1px solid #e8e8e8;
max-height: 500px;
overflow-y: auto;
}
.permission-tree {
list-style: none;
}
.permission-item {
margin-bottom: 8px;
}
.permission-node {
display: flex;
align-items: center;
padding: 12px 15px;
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
background-color: #fff;
border: 1px solid #e8e8e8;
margin-bottom: 5px;
}
.permission-node:hover {
background-color: #f5f5f5;
border-color: #1890ff;
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
}
.permission-node.selected {
background-color: #e6f7ff;
border-color: #1890ff;
}
.permission-checkbox {
margin-right: 12px;
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #1890ff;
}
.expand-btn {
background: #1890ff;
border: none;
cursor: pointer;
padding: 2px 8px;
margin-right: 12px;
color: #fff;
font-size: 14px;
transition: all 0.3s ease;
min-width: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.expand-btn.collapsed {
transform: rotate(-90deg);
}
.permission-label {
font-size: 14px;
color: #333;
user-select: none;
flex: 1;
font-weight: 500;
}
.permission-children {
margin-left: 35px;
margin-top: 8px;
border-left: 2px solid #1890ff;
padding-left: 20px;
display: none;
position: relative;
}
.permission-children::before {
content: '';
position: absolute;
left: 0;
top: -8px;
height: calc(100% + 16px);
width: 2px;
background-color: #1890ff;
}
.permission-children.expanded {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
.permission-item.parent > .permission-node {
background-color: #f0f9ff;
border-color: #d9f3ff;
font-weight: 600;
}
.permission-item.child .permission-node {
margin-left: 15px;
background-color: #fafafa;
}
/* 操作区域 */
.actions {
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 20px;
border-top: 1px solid #e8e8e8;
margin-top: 30px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
margin: 0;
border-radius: 0;
}
.header {
padding: 15px 20px;
flex-direction: column;
gap: 15px;
}
.content {
padding: 20px;
}
.form-row {
flex-direction: column;
gap: 0;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="header">
<h1>子经营者账号管理</h1>
<div class="header-actions">
</div>
</div>
<!-- 内容区域 -->
<div class="content">
<!-- 账号管理区域 -->
<div class="section">
<h2 class="section-title">账号管理</h2>
<div class="account-form">
<div class="form-row">
<div class="form-group">
<label for="operationType">操作类型 *</label>
<select id="operationType" onchange="handleOperationChange()">
<option value="">请选择操作类型</option>
<option value="create">创建新账号</option>
<option value="update">更新旧账号</option>
</select>
</div>
</div>
<!-- 创建新账号区域 -->
<div id="createAccountSection" style="display: none;">
<div class="form-row">
<div class="form-group">
<label for="newAccount">账号 *</label>
<input type="text" id="newAccount" placeholder="请输入账号">
</div>
<div class="form-group">
<label>初始密码</label>
<span class="password-hint">123456</span>
</div>
</div>
</div>
<!-- 更新旧账号区域 -->
<div id="updateAccountSection" style="display: none;">
<div class="form-row">
<div class="form-group">
<label for="existingAccount">选择账号 *</label>
<select id="existingAccount">
<option value="">请选择要更新的账号</option>
<option value="subuser001">subuser001</option>
<option value="subuser002">subuser002</option>
<option value="subuser003">subuser003</option>
</select>
</div>
<div class="form-group">
<label>&nbsp;</label>
<button class="btn btn-warning" onclick="resetPassword()">重置为初始密码</button>
</div>
</div>
</div>
</div>
</div>
<!-- 权限分配区域 -->
<div class="section">
<h2 class="section-title">权限分配</h2>
<div class="permissions-container">
<ul id="permissionTree" class="permission-tree">
<!-- 权限树将通过JavaScript动态生成 -->
</ul>
</div>
</div>
<!-- 操作按钮 -->
<div class="actions">
<button class="btn btn-warning" onclick="cancelOperation()">
<i class="fas fa-times"></i> 取消
</button>
<button class="btn btn-success" onclick="saveOperation()">
<i class="fas fa-save"></i> 保存
</button>
</div>
</div>
</div>
<script>
// 权限数据
const permissions = [
{
id: 1,
code: 'SYSTEM',
name: '系统管理',
description: '系统管理模块',
parentCode: '',
type: 'menu'
},
{
id: 2,
code: 'SYSTEM_USER',
name: '用户管理',
description: '用户管理功能',
parentCode: 'SYSTEM',
type: 'menu'
},
{
id: 3,
code: 'SYSTEM_USER_ADD',
name: '添加用户',
description: '添加新用户按钮',
parentCode: 'SYSTEM_USER',
type: 'button'
},
{
id: 4,
code: 'SYSTEM_USER_EDIT',
name: '编辑用户',
description: '编辑用户信息按钮',
parentCode: 'SYSTEM_USER',
type: 'button'
},
{
id: 5,
code: 'SYSTEM_ROLE',
name: '角色管理',
description: '角色管理功能',
parentCode: 'SYSTEM',
type: 'menu'
},
{
id: 6,
code: 'CONTENT',
name: '内容管理',
description: '内容管理模块',
parentCode: '',
type: 'menu'
}
];
let selectedOperationType = null;
let selectedPermissions = new Set();
// 初始化页面
document.addEventListener('DOMContentLoaded', function() {
initPermissionTree();
});
// 处理操作类型变化
function handleOperationChange() {
const select = document.getElementById('operationType');
const selectedValue = select.value;
const createSection = document.getElementById('createAccountSection');
const updateSection = document.getElementById('updateAccountSection');
// 隐藏所有区域
createSection.style.display = 'none';
updateSection.style.display = 'none';
if (selectedValue === 'create') {
createSection.style.display = 'block';
selectedOperationType = 'create';
} else if (selectedValue === 'update') {
updateSection.style.display = 'block';
selectedOperationType = 'update';
} else {
selectedOperationType = null;
}
}
// 重置密码功能
function resetPassword() {
if (confirm('确定要将密码重置为初始密码123456吗')) {
alert('密码已重置为初始密码123456');
}
}
// 初始化权限树
function initPermissionTree() {
const tree = buildPermissionTree(permissions);
const treeContainer = document.getElementById('permissionTree');
treeContainer.innerHTML = '';
tree.forEach(item => {
treeContainer.appendChild(createPermissionNode(item));
});
}
// 构建权限树
function buildPermissionTree(data) {
const map = {};
const roots = [];
// 创建映射
data.forEach(item => {
map[item.code] = { ...item, children: [] };
});
// 构建树结构
data.forEach(item => {
if (item.parentCode && map[item.parentCode]) {
map[item.parentCode].children.push(map[item.code]);
} else {
roots.push(map[item.code]);
}
});
return roots;
}
// 创建权限节点
function createPermissionNode(item) {
const li = document.createElement('li');
li.className = 'permission-item ' + (item.children.length > 0 ? 'parent' : 'child');
const nodeDiv = document.createElement('div');
nodeDiv.className = 'permission-node';
// 展开/收起按钮
if (item.children.length > 0) {
const expandBtn = document.createElement('button');
expandBtn.className = 'expand-btn';
expandBtn.textContent = '▼';
expandBtn.onclick = (e) => {
e.stopPropagation();
togglePermissionChildren(expandBtn, li);
};
nodeDiv.appendChild(expandBtn);
} else {
// 占位符保持对齐
const placeholder = document.createElement('span');
placeholder.style.width = '28px';
placeholder.style.display = 'inline-block';
nodeDiv.appendChild(placeholder);
}
// 复选框
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.className = 'permission-checkbox';
checkbox.dataset.permissionCode = item.code;
checkbox.onchange = (e) => handlePermissionChange(e, item);
nodeDiv.appendChild(checkbox);
// 权限标签
const label = document.createElement('span');
label.className = 'permission-label';
label.textContent = `${item.name}${item.description || item.code}`;
label.onclick = () => checkbox.click();
nodeDiv.appendChild(label);
li.appendChild(nodeDiv);
// 子权限
if (item.children.length > 0) {
const childrenContainer = document.createElement('ul');
childrenContainer.className = 'permission-children';
item.children.forEach(child => {
childrenContainer.appendChild(createPermissionNode(child));
});
li.appendChild(childrenContainer);
}
return li;
}
// 切换权限子节点显示
function togglePermissionChildren(btn, li) {
const children = li.querySelector('.permission-children');
if (!children) return;
const isExpanded = children.classList.contains('expanded');
children.classList.toggle('expanded');
btn.textContent = isExpanded ? '▶' : '▼';
btn.classList.toggle('collapsed', isExpanded);
}
// 处理权限选择变化
function handlePermissionChange(event, permission) {
const checkbox = event.target;
const isChecked = checkbox.checked;
const permissionCode = permission.code;
const node = checkbox.closest('.permission-node');
// 更新节点选中样式
if (node) {
if (isChecked) {
node.classList.add('selected');
} else {
node.classList.remove('selected');
}
}
if (isChecked) {
selectedPermissions.add(permissionCode);
// 选中子级权限时,自动选中所有父级权限
selectParentPermissions(permission);
// 如果是父权限,自动选中所有子权限
if (permission.children && permission.children.length > 0) {
selectChildrenPermissions(permission, true);
}
} else {
selectedPermissions.delete(permissionCode);
// 如果是父权限,自动取消所有子权限
if (permission.children && permission.children.length > 0) {
selectChildrenPermissions(permission, false);
}
// 如果是子权限,检查是否需要取消父权限
uncheckParentIfNeeded(permission);
}
console.log('已选择权限:', Array.from(selectedPermissions));
}
// 选择所有父级权限
function selectParentPermissions(permission) {
if (!permission.parentCode) return;
// 查找父权限
const parent = permissions.find(p => p.code === permission.parentCode);
if (!parent) return;
// 选中父权限
const parentCheckbox = document.querySelector(`[data-permission-code="${parent.code}"]`);
if (parentCheckbox && !parentCheckbox.checked) {
parentCheckbox.checked = true;
selectedPermissions.add(parent.code);
}
// 递归选中上级父权限
selectParentPermissions(parent);
}
// 选择/取消子权限
function selectChildrenPermissions(parent, select) {
if (!parent.children) return;
parent.children.forEach(child => {
const childCheckbox = document.querySelector(`[data-permission-code="${child.code}"]`);
if (childCheckbox) {
childCheckbox.checked = select;
if (select) {
selectedPermissions.add(child.code);
} else {
selectedPermissions.delete(child.code);
}
// 递归处理子权限
selectChildrenPermissions(child, select);
}
});
}
// 检查是否需要取消父权限选择
function uncheckParentIfNeeded(permission) {
if (!permission.parentCode) return;
// 查找父权限
const parent = permissions.find(p => p.code === permission.parentCode);
if (!parent) return;
// 检查父权限的所有子权限是否都未选中
const siblings = permissions.filter(p => p.parentCode === parent.code);
const hasSelectedSibling = siblings.some(sibling => selectedPermissions.has(sibling.code));
if (!hasSelectedSibling) {
const parentCheckbox = document.querySelector(`[data-permission-code="${parent.code}"]`);
if (parentCheckbox) {
parentCheckbox.checked = false;
selectedPermissions.delete(parent.code);
// 递归检查上级父权限
uncheckParentIfNeeded(parent);
}
}
}
// 取消操作
function cancelOperation() {
if (confirm('确定要取消操作吗?未保存的更改将丢失。')) {
window.location.reload();
}
}
// 保存操作
function saveOperation() {
// 验证操作类型
if (!selectedOperationType) {
alert('请选择操作类型!');
return;
}
let account = '';
// 根据操作类型验证账号
if (selectedOperationType === 'create') {
account = document.getElementById('newAccount').value.trim();
if (!account) {
alert('请输入账号!');
return;
}
} else if (selectedOperationType === 'update') {
account = document.getElementById('existingAccount').value;
if (!account) {
alert('请选择要更新的账号!');
return;
}
}
// 验证权限选择
if (selectedPermissions.size === 0) {
alert('请至少选择一个权限!');
return;
}
// 构建保存数据
const operationData = {
operationType: selectedOperationType,
account: account,
permissions: Array.from(selectedPermissions)
};
console.log('保存操作数据:', operationData);
// 这里应该调用API保存数据
if (selectedOperationType === 'create') {
alert('子经营者账号创建成功!');
} else {
alert('子经营者账号权限更新成功!');
}
}
</script>
</body>
</html>

View File

@ -296,9 +296,9 @@
</span>
</div>
<div class="submenu">
<a href="#" class="submenu-link" onclick="loadContent('./1 权限管理/账号权限分配.html')">
<a href="#" class="submenu-link" onclick="loadContent('./1 权限管理/子经营者管理.html')">
<span class="submenu-icon"></span>
账号权限分配
子经营者管理
</a>
</div>
</li>