451 lines
15 KiB
PHP
451 lines
15 KiB
PHP
<!-- 权限详情弹窗模板 -->
|
|
<div class="detail-container" style="padding: 20px;" data-user-id="{{d.userId}}">
|
|
<div class="layui-row layui-col-space15">
|
|
<!-- 左侧已授权包名列表 -->
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">
|
|
授权的包名列表
|
|
<div class="layui-inline" style="width: 200px; margin-left: 10px;">
|
|
<input type="text" id="searchAuthorized" placeholder="输入包名或应用名称搜索" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-card-body auth-table-container">
|
|
<table id="authorizedTable" lay-filter="authorizedTable"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧可授权包名列表 -->
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">
|
|
可授权的包名列表
|
|
<span class="layui-badge layui-bg-blue">仅显示启用状态的包名</span>
|
|
<div class="layui-inline" style="width: 200px; margin-left: 10px;">
|
|
<input type="text" id="searchPackage" placeholder="输入包名或应用名称搜索" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-card-body auth-table-container">
|
|
<table id="unauthorizedTable" lay-filter="unauthorizedTable"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部按钮 -->
|
|
<div class="layui-form-item text-center" style="margin-top:15px;">
|
|
<button class="layui-btn layui-btn-primary" onclick="closeAndRefresh()">关闭窗口</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 已授权表格工具栏 -->
|
|
<script type="text/html" id="authDetailAuthorizedToolbar">
|
|
<div class="layui-btn-container">
|
|
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchRemove" lay-tips="移除选中的包名权限">
|
|
<i class="layui-icon"></i> 批量移除
|
|
</button>
|
|
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="removeAll" lay-tips="移除该管理员的所有包名权限">
|
|
<i class="layui-icon"></i> 一键全部移除
|
|
</button>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- 未授权表格工具栏 -->
|
|
<script type="text/html" id="authDetailUnauthorizedToolbar">
|
|
<div class="layui-btn-container">
|
|
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="batchAuth" lay-tips="授权选中的包名">
|
|
<i class="layui-icon"></i> 批量授权
|
|
</button>
|
|
<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="authAll" lay-tips="授权所有未授权的包名">
|
|
<i class="layui-icon"></i> 一键全部授权
|
|
</button>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- 表格行工具条 -->
|
|
<script type="text/html" id="authDetailTableBar">
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">移除</a>
|
|
</script>
|
|
|
|
<script type="text/html" id="authDetailUnAuthTableBar">
|
|
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="auth">授权</a>
|
|
</script>
|
|
|
|
<!-- 表格初始化脚本 -->
|
|
<script>
|
|
window.initAuthDetailTables = function(userId) {
|
|
layui.use(['table', 'form'], function() {
|
|
let table = layui.table;
|
|
|
|
// 初始化已授权表格
|
|
table.render({
|
|
elem: '#authorizedTable',
|
|
url: '{:url("getAuthDetailData")}',
|
|
where: {
|
|
user_id: userId,
|
|
type: 'authorized'
|
|
},
|
|
toolbar: '#authDetailAuthorizedToolbar',
|
|
defaultToolbar: ['filter'],
|
|
page: true,
|
|
limit: 10,
|
|
limits: [10, 20, 50, 100],
|
|
cols: [[
|
|
{type: 'checkbox', width: 50},
|
|
{field: 'package_name', title: '包名', minWidth: 250},
|
|
{field: 'name', title: '名称', minWidth: 200},
|
|
{field: 'create_at', title: '授权时间', width: 160},
|
|
{title: '操作', toolbar: '#authDetailTableBar', width: 80, align: 'center', fixed: 'right'}
|
|
]]
|
|
});
|
|
|
|
// 初始化未授权表格
|
|
table.render({
|
|
elem: '#unauthorizedTable',
|
|
url: '{:url("getAuthDetailData")}',
|
|
where: {
|
|
user_id: userId,
|
|
type: 'unauthorized'
|
|
},
|
|
toolbar: '#authDetailUnauthorizedToolbar',
|
|
defaultToolbar: ['filter'],
|
|
page: true,
|
|
limit: 10,
|
|
limits: [10, 20, 50, 100],
|
|
cols: [[
|
|
{type: 'checkbox', width: 50},
|
|
{field: 'package_name', title: '包名', minWidth: 250},
|
|
{field: 'name', title: '名称', minWidth: 200},
|
|
{title: '操作', toolbar: '#authDetailUnAuthTableBar', width: 80, align: 'center', fixed: 'right'}
|
|
]]
|
|
});
|
|
|
|
// 绑定搜索事件
|
|
bindSearchEvents(table, userId);
|
|
// 绑定工具条事件
|
|
bindTableEvents(table, userId);
|
|
});
|
|
};
|
|
|
|
// 绑定搜索事件
|
|
function bindSearchEvents(table, userId) {
|
|
let searchTimeout;
|
|
$('#searchAuthorized').on('input', function() {
|
|
clearTimeout(searchTimeout);
|
|
let value = this.value;
|
|
searchTimeout = setTimeout(function() {
|
|
table.reload('authorizedTable', {
|
|
where: {
|
|
user_id: userId,
|
|
type: 'authorized',
|
|
keyword: value
|
|
},
|
|
page: {curr: 1}
|
|
});
|
|
}, 300);
|
|
});
|
|
|
|
$('#searchPackage').on('input', function() {
|
|
clearTimeout(searchTimeout);
|
|
let value = this.value;
|
|
searchTimeout = setTimeout(function() {
|
|
table.reload('unauthorizedTable', {
|
|
where: {
|
|
user_id: userId,
|
|
type: 'unauthorized',
|
|
keyword: value
|
|
},
|
|
page: {curr: 1}
|
|
});
|
|
}, 300);
|
|
});
|
|
}
|
|
|
|
// 绑定工具条事件
|
|
function bindTableEvents(table, userId) {
|
|
// 已授权表格工具条事件
|
|
table.on('toolbar(authorizedTable)', function(obj) {
|
|
if (obj.event === 'batchRemove') {
|
|
let checkStatus = table.checkStatus('authorizedTable');
|
|
if (checkStatus.data.length === 0) {
|
|
layer.msg('请选择要移除的包名', {icon: 2});
|
|
return;
|
|
}
|
|
|
|
layer.confirm('确定要移除选中的 ' + checkStatus.data.length + ' 个包名权限吗？', {
|
|
title: '批量移除确认',
|
|
btn: ['确定移除', '取消操作'],
|
|
skin: 'layer-danger'
|
|
}, function(index) {
|
|
let loadIndex = layer.load(2);
|
|
let packageIds = checkStatus.data.map(item => item.id);
|
|
$.post('{:url("batchRemoveAuth")}', {
|
|
user_id: userId,
|
|
package_ids: packageIds
|
|
}, function(res) {
|
|
layer.close(loadIndex);
|
|
layer.msg(res.info);
|
|
if (res.code === 1) {
|
|
// 刷新两个表格
|
|
table.reload('authorizedTable');
|
|
table.reload('unauthorizedTable');
|
|
}
|
|
});
|
|
layer.close(index);
|
|
});
|
|
} else if (obj.event === 'removeAll') {
|
|
layer.confirm('确定要移除该管理员的所有包名权限吗？<br>此操作不可恢复！', {
|
|
title: '危险操作',
|
|
btn: ['确定移除', '取消操作'],
|
|
icon: 2,
|
|
skin: 'layer-danger'
|
|
}, function(index) {
|
|
let loadIndex = layer.load(2);
|
|
$.post('{:url("clearAuth")}', {
|
|
user_ids: [userId]
|
|
}, function(res) {
|
|
layer.close(loadIndex);
|
|
layer.msg(res.info);
|
|
if (res.code === 1) {
|
|
// 刷新两个表格
|
|
table.reload('authorizedTable');
|
|
table.reload('unauthorizedTable');
|
|
}
|
|
});
|
|
layer.close(index);
|
|
});
|
|
}
|
|
});
|
|
|
|
// 未授权表格工具条事件
|
|
table.on('toolbar(unauthorizedTable)', function(obj) {
|
|
if (obj.event === 'batchAuth') {
|
|
let checkStatus = table.checkStatus('unauthorizedTable');
|
|
if (checkStatus.data.length === 0) {
|
|
layer.msg('请选择要授权的包名', {icon: 2});
|
|
return;
|
|
}
|
|
|
|
layer.confirm('确定要授权选中的 ' + checkStatus.data.length + ' 个包名吗？', {
|
|
title: '批量授权确认',
|
|
btn: ['确定授权', '取消操作']
|
|
}, function(index) {
|
|
let loadIndex = layer.load(2);
|
|
let packageIds = checkStatus.data.map(item => item.id);
|
|
$.post('{:url("addAuth")}', {
|
|
user_id: userId,
|
|
package_ids: packageIds
|
|
}, function(res) {
|
|
layer.close(loadIndex);
|
|
layer.msg(res.info);
|
|
if (res.code === 1) {
|
|
// 刷新两个表格
|
|
table.reload('authorizedTable');
|
|
table.reload('unauthorizedTable');
|
|
}
|
|
});
|
|
layer.close(index);
|
|
});
|
|
} else if (obj.event === 'authAll') {
|
|
layer.confirm('确定要授权所有可用的包名吗？', {
|
|
title: '一键全部授权',
|
|
btn: ['确定授权', '取消操作'],
|
|
icon: 3
|
|
}, function(index) {
|
|
let loadIndex = layer.load(2);
|
|
$.post('{:url("addAuth")}', {
|
|
user_id: userId,
|
|
is_all: 1
|
|
}, function(res) {
|
|
layer.close(loadIndex);
|
|
layer.msg(res.info);
|
|
if (res.code === 1) {
|
|
// 刷新两个表格
|
|
table.reload('authorizedTable');
|
|
table.reload('unauthorizedTable');
|
|
}
|
|
});
|
|
layer.close(index);
|
|
});
|
|
}
|
|
});
|
|
|
|
// 单个移除事件
|
|
table.on('tool(authorizedTable)', function(obj) {
|
|
if (obj.event === 'remove') {
|
|
layer.confirm('确定要移除此包名权限吗？', function(index) {
|
|
let loadIndex = layer.load(2);
|
|
$.post('{:url("removeAuth")}', {
|
|
user_id: userId,
|
|
package_id: obj.data.id
|
|
}, function(res) {
|
|
layer.close(loadIndex);
|
|
layer.msg(res.info);
|
|
if (res.code === 1) {
|
|
obj.del();
|
|
// 刷新未授权表格
|
|
table.reload('unauthorizedTable');
|
|
}
|
|
});
|
|
layer.close(index);
|
|
});
|
|
}
|
|
});
|
|
|
|
// 单个授权事件
|
|
table.on('tool(unauthorizedTable)', function(obj) {
|
|
if (obj.event === 'auth') {
|
|
let loadIndex = layer.load(2);
|
|
$.post('{:url("addAuth")}', {
|
|
user_id: userId,
|
|
package_ids: [obj.data.id]
|
|
}, function(res) {
|
|
layer.close(loadIndex);
|
|
layer.msg(res.info);
|
|
if (res.code === 1) {
|
|
// 刷新两个表格
|
|
table.reload('authorizedTable');
|
|
table.reload('unauthorizedTable');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 添加关闭并刷新的函数
|
|
function closeAndRefresh() {
|
|
// 关闭当前弹窗
|
|
layer.closeAll();
|
|
// 刷新父页面
|
|
parent.location.reload();
|
|
}
|
|
</script>
|
|
|
|
<!-- 弹窗专用样式 -->
|
|
<style>
|
|
.detail-container {
|
|
min-height: 600px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.detail-container .layui-row {
|
|
flex: 1;
|
|
}
|
|
|
|
.detail-container .layui-card {
|
|
margin-bottom: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.detail-container .layui-card-body {
|
|
flex: 1;
|
|
padding: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.auth-table-container {
|
|
min-height: 550px;
|
|
position: relative;
|
|
}
|
|
|
|
/* 搜索框样式 */
|
|
.detail-container .layui-inline {
|
|
margin: 0;
|
|
}
|
|
|
|
.detail-container .layui-input {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
/* 底部按钮样式 */
|
|
.detail-container .layui-form-item.text-center {
|
|
padding: 10px 0 0;
|
|
margin: 0;
|
|
border-top: 1px solid #f0f0f0;
|
|
}
|
|
|
|
/* 表格美化样式 */
|
|
.auth-table-container .layui-table-tool {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.auth-table-container .layui-table-page {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
/* 表格头部样式 */
|
|
.auth-table-container .layui-table-header {
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
/* 表格内容区域样式 */
|
|
.auth-table-container .layui-table-body {
|
|
background: #fff;
|
|
}
|
|
|
|
/* 工具栏按钮样式优化 */
|
|
.auth-table-container .layui-table-tool {
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.auth-table-container .layui-table-tool .layui-btn {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding: 0 15px;
|
|
font-size: 12px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.auth-table-container .layui-table-tool .layui-btn:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.auth-table-container .layui-table-tool .layui-btn .layui-icon {
|
|
font-size: 14px;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
/* 危险操作按钮样式 */
|
|
.auth-table-container .layui-table-tool .layui-btn-danger {
|
|
background-color: #FF5722;
|
|
}
|
|
|
|
.auth-table-container .layui-table-tool .layui-btn-danger:hover {
|
|
background-color: #ff4208;
|
|
}
|
|
|
|
/* 一键全部授权按钮样式 */
|
|
.auth-table-container .layui-table-tool .layui-btn-warm {
|
|
background-color: #FFB800;
|
|
}
|
|
|
|
.auth-table-container .layui-table-tool .layui-btn-warm:hover {
|
|
background-color: #ff9900;
|
|
}
|
|
|
|
/* 弹窗样式 */
|
|
.layer-danger .layui-layer-title {
|
|
background-color: #FF5722 !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.layer-danger .layui-layer-btn0 {
|
|
background-color: #FF5722 !important;
|
|
border-color: #FF5722 !important;
|
|
}
|
|
|
|
/* 确保弹窗控制按钮在正确位置 */
|
|
.layui-layer-page .layui-layer-setwin {
|
|
position: absolute !important;
|
|
right: 15px !important;
|
|
top: 16px !important;
|
|
}
|
|
</style> |