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

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

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