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

综述: 优化账号权限分配页面的账号类型和操作类型功能

This commit is contained in:
linbin 2025-09-07 15:35:21 +08:00
parent e40537052e
commit 6438d63ded
1 changed files with 149 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
商家端web/1 权限管理/账号权限分配.html
View File

@ -72,6 +72,20 @@
background-color: #40a9ff; background-color: #40a9ff;
transform: translateY(-2px); transform: translateY(-2px);
} }
.tab-btn {
margin-right: 10px;
}
.tab-btn:not(.active) {
background-color: #f0f0f0;
color: #666;
}
.tab-btn:not(.active):hover {
background-color: #e0e0e0;
color: #333;
}
.btn-success { .btn-success {
background-color: #52c41a; background-color: #52c41a;
@ -310,9 +324,6 @@
<div class="header"> <div class="header">
<h1>账号权限分配</h1> <h1>账号权限分配</h1>
<div class="header-actions"> <div class="header-actions">
<button class="btn btn-warning" onclick="resetForm()">
<i class="fas fa-sync-alt"></i> 重置
</button>
</div> </div>
</div> </div>
@ -322,18 +333,45 @@
<div class="section"> <div class="section">
<h2 class="section-title">账号信息</h2> <h2 class="section-title">账号信息</h2>
<div class="account-form"> <div class="account-form">
<!-- Tab导航 -->
<div class="form-row"> <div class="form-row">
<div class="form-group"> <div class="form-group">
<label for="identitySelect">创建账号身份 *</label> <label>账号类型</label>
<select id="identitySelect" onchange="handleIdentityChange()"> <div class="tab-container">
<option value="">请选择账号身份</option> <button class="btn btn-primary tab-btn active" onclick="switchTab('sub_merchant')">子经营者</button>
<option value="sub_merchant">子经营者</option> <button class="btn btn-primary tab-btn" onclick="switchTab('merchant')">商户</button>
<option value="merchant">商户</option> </div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="typeSelect">操作类型 *</label>
<select id="typeSelect" onchange="handleTypeChange()">
<option value="">请选择操作类型</option>
<option value="create">创建新账号</option>
<option value="update">更新账号权限</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="phoneNumber">账号手机号 *</label> <label for="account">账号 *</label>
<input type="tel" id="phoneNumber" placeholder="请输入手机号" maxlength="11"> <input type="text" id="account" placeholder="请输入账号">
</div>
</div>
<!-- 初始密码字段 -->
<div class="form-row" id="passwordRow" style="display: none;">
<div class="form-group">
<label for="password">初始密码</label>
<span id="password" style="display: block; padding: 12px 15px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #fafafa;">123456</span>
</div>
</div>
<!-- 重置密码按钮 -->
<div class="form-row" id="resetPasswordBtnGroup" style="display: none;">
<div class="form-group">
<label>&nbsp;</label>
<button class="btn btn-warning" onclick="resetPassword()">重置为初始密码</button>
</div> </div>
</div> </div>
</div> </div>
@ -362,11 +400,17 @@
</div> </div>
<script> <script>
// 身份类型数据 // 账号类型数据
const identityTypes = [ const accountTypes = [
{ id: 1, name: '子经营者', code: 'sub_merchant' }, { id: 1, name: '子经营者', code: 'sub_merchant' },
{ id: 2, name: '商户', code: 'merchant' } { id: 2, name: '商户', code: 'merchant' }
]; ];
// 操作类型数据
const operationTypes = [
{ value: 'create', name: '创建新账号' },
{ value: 'update', name: '更新账号权限' }
];
// 权限数据（从权限编辑页面获取的示例数据） // 权限数据（从权限编辑页面获取的示例数据）
const permissions = [ const permissions = [
@ -420,7 +464,8 @@
} }
]; ];
let selectedIdentity = null; let selectedAccountType = null;
let selectedOperationType = null;
let selectedPermissions = new Set(); let selectedPermissions = new Set();
// 初始化页面 // 初始化页面
@ -428,30 +473,64 @@
initPermissionTree(); initPermissionTree();
bindEvents(); bindEvents();
}); });
// 初始化身份选项（已改为静态select，无需动态初始化） // Tab切换功能
function handleIdentityChange() { function switchTab(tabCode) {
const select = document.getElementById('identitySelect'); // 更新选中的账号类型
const selectedValue = select.value; selectedAccountType = accountTypes.find(type => type.code === tabCode);
if (selectedValue) { // 更新tab按钮样式
selectedIdentity = identityTypes.find(type => type.code === selectedValue); document.querySelectorAll('.tab-btn').forEach(btn => {
console.log('已选择身份:', selectedIdentity); btn.classList.remove('active');
// 这里可以根据身份类型推荐相应的权限 });
recommendPermissionsForIdentity(selectedIdentity); event.target.classList.add('active');
} else {
selectedIdentity = null; console.log('已切换到账号类型:', selectedAccountType);
// 根据操作类型推荐权限
if (selectedOperationType) {
recommendPermissionsForAccountType(selectedAccountType, selectedOperationType);
} }
} }
// 根据身份类型推荐权限 // 处理操作类型变化
function recommendPermissionsForIdentity(identity) { function handleTypeChange() {
// 根据不同身份推荐默认权限 const select = document.getElementById('typeSelect');
const selectedValue = select.value;
if (selectedValue) {
selectedOperationType = operationTypes.find(type => type.value === selectedValue);
console.log('已选择操作类型:', selectedOperationType);
// 显示/隐藏密码字段
const passwordRow = document.getElementById('passwordRow');
const resetPasswordBtnGroup = document.getElementById('resetPasswordBtnGroup');
if (selectedValue === 'create') {
passwordRow.style.display = 'flex';
resetPasswordBtnGroup.style.display = 'none';
} else if (selectedValue === 'update') {
passwordRow.style.display = 'none';
resetPasswordBtnGroup.style.display = 'block';
}
// 根据账号类型和操作类型推荐权限
if (selectedAccountType) {
recommendPermissionsForAccountType(selectedAccountType, selectedOperationType);
}
} else {
selectedOperationType = null;
}
}
// 根据账号类型和操作类型推荐权限
function recommendPermissionsForAccountType(accountType, operationType) {
// 根据不同账号类型和操作类型推荐默认权限
const recommendedPermissions = []; const recommendedPermissions = [];
if (identity.code === 'sub_merchant') { if (accountType.code === 'sub_merchant') {
// 子经营者推荐基础权限 // 子经营者推荐基础权限
recommendedPermissions.push('CONTENT'); recommendedPermissions.push('CONTENT');
} else if (identity.code === 'merchant') { } else if (accountType.code === 'merchant') {
// 商户推荐更多权限 // 商户推荐更多权限
recommendedPermissions.push('SYSTEM', 'CONTENT'); recommendedPermissions.push('SYSTEM', 'CONTENT');
} }
@ -467,6 +546,13 @@
}); });
} }
// 重置密码功能
function resetPassword() {
if (confirm('确定要将密码重置为初始密码123456吗？')) {
alert('密码已重置为初始密码123456！');
}
}
// 初始化权限树 // 初始化权限树
function initPermissionTree() { function initPermissionTree() {
const tree = buildPermissionTree(permissions); const tree = buildPermissionTree(permissions);
@ -676,25 +762,33 @@
// 绑定事件 // 绑定事件
function bindEvents() { function bindEvents() {
// 手机号输入验证 // 账号输入验证
document.getElementById('phoneNumber').addEventListener('input', function(e) { document.getElementById('account').addEventListener('input', function(e) {
let value = e.target.value.replace(/\D/g, ''); // 可以根据需要添加账号输入验证逻辑
if (value.length > 11) { // 目前保持账号输入不限制格式
value = value.slice(0, 11);
}
e.target.value = value;
}); });
} }
// 重置表单 // 重置表单
function resetForm() { function resetForm() {
if (confirm('确定要重置所有信息吗？')) { if (confirm('确定要重置所有信息吗？')) {
// 重置身份选择 // 重置账号类型选择（默认选择第一个tab）
selectedIdentity = null; selectedAccountType = accountTypes[0];
document.getElementById('identitySelect').value = ''; document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('active');
});
document.querySelector('.tab-btn').classList.add('active');
// 重置手机号 // 重置操作类型选择
document.getElementById('phoneNumber').value = ''; selectedOperationType = null;
document.getElementById('typeSelect').value = '';
// 重置账号
document.getElementById('account').value = '';
// 隐藏密码字段和重置密码按钮
document.getElementById('passwordRow').style.display = 'none';
document.getElementById('resetPasswordBtnGroup').style.display = 'none';
// 重置权限选择 // 重置权限选择
selectedPermissions.clear(); selectedPermissions.clear();
@ -719,21 +813,22 @@
// 保存权限分配 // 保存权限分配
function saveAssignment() { function saveAssignment() {
// 验证身份选择 // 验证账号类型选择
if (!selectedIdentity) { if (!selectedAccountType) {
alert('请选择账号身份！'); alert('请选择账号类型！');
return; return;
} }
// 验证手机号 // 验证操作类型选择
const phoneNumber = document.getElementById('phoneNumber').value.trim(); if (!selectedOperationType) {
if (!phoneNumber) { alert('请选择操作类型！');
alert('请输入手机号！');
return; return;
} }
if (!/^1[3-9]\d{9}$/.test(phoneNumber)) { // 验证账号
alert('请输入正确的手机号格式！'); const account = document.getElementById('account').value.trim();
if (!account) {
alert('请输入账号！');
return; return;
} }
@ -745,8 +840,9 @@
// 构建保存数据 // 构建保存数据
const assignmentData = { const assignmentData = {
identity: selectedIdentity, accountType: selectedAccountType,
phoneNumber: phoneNumber, operationType: selectedOperationType,
account: account,
permissions: Array.from(selectedPermissions) permissions: Array.from(selectedPermissions)
}; };