feat(auth): 角色分配用户页面视图与列表入口按钮

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
augushong
2026-07-17 23:44:33 +08:00
parent 50cb069677
commit 1ca1f86150
5 changed files with 93 additions and 0 deletions

View File

@@ -8,4 +8,6 @@ var init = {
exportUrl: 'system.auth/export',
modifyUrl: 'system.auth/modify',
authorize_url: 'system.auth/authorize',
assignUsersUrl: 'system.auth/assignUsers',
toggleUserUrl: 'system.auth/toggleUser',
};

View File

@@ -0,0 +1,14 @@
<div class="layuimini-container">
<div class="layuimini-main">
<!-- 角色名只读展示,隐藏 roleId JS 读取(雪花 ID 作为字符串处理) -->
<div class="layui-form-item" style="margin: 10px 15px;">
<label class="layui-form-label">角色名称</label>
<div class="layui-input-block">
<input type="text" class="layui-input" readonly value="{$row.title|default=''}">
</div>
</div>
<input type="hidden" id="roleId" value="{$row.id}">
<!-- 用户表格switch 为即时切换,不包裹 form 提交 -->
<table id="currentTable" class="layui-table layui-hide" lay-filter="currentTable"></table>
</div>
</div>

View File

@@ -0,0 +1,68 @@
$(function () {
// 本页自有 init不复用 _common.jsindex 页用),指向 assignUsers 数据源与 toggleUser 切换接口
var init = {
tableElem: '#currentTable',
tableRenderId: 'assignUsersRenderId',
indexUrl: 'system.auth/assignUsers', // AJAX 数据源:后端 isAjax 时返回用户列表(每行带 has_role
toggleUserUrl: 'system.auth/toggleUser',
};
ua.table.render({
init: init,
// 把 role_id 带入分页请求,后端 assignUsers($id) 据此计算 FIND_IN_SET(has_role)
where: { id: $('#roleId').val() },
cols: [[
{ field: 'id', width: 80, title: 'ID' },
{ field: 'username', minWidth: 100, title: '登录账户' },
{ field: 'nickname', minWidth: 100, title: '姓名' },
{ field: 'phone', minWidth: 120, title: '手机' },
{
field: 'has_role',
width: 130,
title: '是否拥有此角色',
// 关键Metis M1filter:false 使 renderSwitch 不自动绑定到 modifyUrl
// modifyUrl 未配置亦无妨,显式 false 更稳妥,避免 listenSwitch 发送 field=value 而非 user_id/role_id
filter: false,
// 自定义 templet绝不能用 ua.table.switch它会把 id/field/value 发到 modifyUrl
templet: function (d) {
var checked = (d.has_role > 0) ? ' checked' : '';
return '<input type="checkbox" name="has_role" lay-skin="switch" lay-text="已分配|未分配" lay-filter="hasRoleSwitch" value="' + d.id + '"' + checked + '>';
}
}
]],
});
// 手动 switch 处理(因为 ua.table.switch / listenSwitch 会发 id/field/value 到 modifyUrl
// 而本场景需要发 user_id + role_id 到 toggleUser
layui.form.on('switch(hasRoleSwitch)', function (obj) {
var userId = this.value;
var roleId = $('#roleId').val();
var elem = this;
$.ajax({
// ulthon 风格相对 URL必须经 ua.url() 补 /admin/ 前缀
url: ua.url(init.toggleUserUrl),
type: 'POST',
dataType: 'json',
data: { user_id: userId, role_id: roleId },
success: function (res) {
// 框架 success() 默认 code=0见 JumpTraitBase::successerror() 默认 code=500
if (res.code === 0) {
layer.msg(res.msg || '操作成功', { icon: 1 });
} else {
// 业务失败:回滚开关状态
elem.checked = !elem.checked;
layui.form.render('checkbox');
layer.msg(res.msg || '操作失败', { icon: 2 });
}
},
error: function () {
// 网络错误:回滚开关状态
elem.checked = !elem.checked;
layui.form.render('checkbox');
layer.msg('网络错误', { icon: 2 });
}
});
});
ua.listen();
});

View File

@@ -5,6 +5,7 @@
data-auth-edit="{:auth('system.auth/edit')}"
data-auth-delete="{:auth('system.auth/delete')}"
data-auth-authorize="{:auth('system.auth/authorize')}"
data-auth-assignUsers="{:auth('system.auth/assignUsers')}"
data-auth-modify="{:auth('system.auth/modify')}"
lay-filter="currentTable">
</table>

View File

@@ -24,6 +24,14 @@ $(function () {
class: 'layui-btn layui-btn-normal layui-btn-xs',
extend: 'data-full="true"'
}],
[{
text: '分配用户',
url: init.assignUsersUrl,
method: 'open',
auth: 'assignUsers',
class: 'layui-btn layui-btn-warm layui-btn-xs',
extend: 'data-full="true"'
}],
'delete'
]
}