综述: 更新权限管理页面链接和内容
- 修改index.html中的菜单链接,将'账号权限分配'更改为'子经营者管理' - 新增子经营者管理.html页面文件
This commit is contained in:
		
							parent
							
								
									1becf930cc
								
							
						
					
					
						commit
						1daabdef6f
					
				|  | @ -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> </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> | ||||
|  | @ -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> | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue