298 lines
12 KiB
HTML
298 lines
12 KiB
HTML
|
<main id="js-page-content" role="main" class="page-content">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-sm-12 col-xl-12">
|
|||
|
|
<h1 class="p-2 mb-0">帳號與權限管理</h1>
|
|||
|
|
<div class="row mt-5">
|
|||
|
|
<ul class="nav nav-tabs w-100" role="tablist">
|
|||
|
|
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab_borders_icons-1" role="tab"><i class="fal fa-user mr-1"></i> 帳號管理</a> </li>
|
|||
|
|
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-2" role="tab"><i class="fal fa-users mr-1"></i> 群組管理</a> </li>
|
|||
|
|
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-3" role="tab"><i class="fal fa-cog mr-1"></i> 群組權限</a> </li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="tab-content border border-top-0 p-3 w-100">
|
|||
|
|
<div class="tab-pane fade show active" id="tab_borders_icons-1" role="tabpanel">
|
|||
|
|
<div class="row mb-5 align-items-end">
|
|||
|
|
<div class="col-auto">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label" for="simpleinput">姓名</label>
|
|||
|
|
<input type="text" id="simpleinput" class="form-control">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-auto">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label" for="simpleinput">群組</label>
|
|||
|
|
<input type="text" id="simpleinput" class="form-control">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-auto">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label" for="example-select">狀態</label>
|
|||
|
|
<select class="form-control" id="example-select select2bs4">
|
|||
|
|
<option>啟用中</option>
|
|||
|
|
<option>停用</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-auto"> <a href="#" class="btn btn-info">搜尋</a> </div>
|
|||
|
|
</div>
|
|||
|
|
<div class="frame-wrap">
|
|||
|
|
<div class="mb-3"> <a href="#" class="btn btn-success" data-toggle="modal" data-target="#modal-center-add">+ 新增</a> </div>
|
|||
|
|
<table id="accManTable" class="table table-bordered table-striped text-center m-0 w-100">
|
|||
|
|
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane fade" id="tab_borders_icons-2" role="tabpanel">
|
|||
|
|
<div class="row mb-5 align-items-end">
|
|||
|
|
<div class="col-auto">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label" for="simpleinput">群組</label>
|
|||
|
|
<input type="text" id="simpleinput" class="form-control">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-auto"> <a href="#" class="btn btn-info">搜尋</a> </div>
|
|||
|
|
</div>
|
|||
|
|
<div class="frame-wrap">
|
|||
|
|
<div class="mb-3"> <a href="#" class="btn btn-success">+ 新增</a> </div>
|
|||
|
|
<table id="rolManTable" class="table table-bordered table-striped text-center m-0 w-100">
|
|||
|
|
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane fade" id="tab_borders_icons-3" role="tabpanel">
|
|||
|
|
<div class="row mb-5 align-items-end">
|
|||
|
|
<div class="col-auto">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label" for="roleSel">角色</label>
|
|||
|
|
<select class="form-control select2bs4" id="roleSel">
|
|||
|
|
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="frame-wrap">
|
|||
|
|
<div class="mb-3"> <a href="#" class="btn btn-success" data-toggle="modal" data-target="#modal-center-users">+ 加入可用功能</a> </div>
|
|||
|
|
<table id="rolAuthTable" class="table table-bordered table-striped text-center m-0 w-100">
|
|||
|
|
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var rolAuthTable = null;
|
|||
|
|
$(function () {
|
|||
|
|
getRoleSel();
|
|||
|
|
loadAccManTable();
|
|||
|
|
loadRolManTable();
|
|||
|
|
loadRolAuthTable();
|
|||
|
|
events();
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function loadAccManTable() {
|
|||
|
|
let ajaxObj = {
|
|||
|
|
url: baseApiUrl + "/User/UserManagerList",
|
|||
|
|
method: "POST",
|
|||
|
|
}
|
|||
|
|
let tag = "#accManTable";
|
|||
|
|
|
|||
|
|
let column_defs = [
|
|||
|
|
{ "targets": [0], "width": "6%", "sortable": true },
|
|||
|
|
{ "targets": [1], "width": "12%", "sortable": true },
|
|||
|
|
{ "targets": [2], "width": "14%", "sortable": true },
|
|||
|
|
{ "targets": [3], "width": "12%", "sortable": true },
|
|||
|
|
{ "targets": [4], "width": "14%", "sortable": true },
|
|||
|
|
{ "targets": [5], "width": "14%", "sortable": true },
|
|||
|
|
{ "targets": [6], "width": "14%", "sortable": true },
|
|||
|
|
{ "targets": [7], "width": "14%", "sortable": true },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let columns = [
|
|||
|
|
{
|
|||
|
|
"title": "#",
|
|||
|
|
"data": null,
|
|||
|
|
"render": function (data, type, row, meta) {
|
|||
|
|
return meta.row + 1;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "姓名",
|
|||
|
|
"data": "full_name",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "帳號",
|
|||
|
|
"data": "account",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "角色",
|
|||
|
|
"data": "role_full_name",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "email",
|
|||
|
|
"data": "email",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "手機號碼",
|
|||
|
|
"data": "phone",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "建立時間",
|
|||
|
|
"data": "created_at",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "功能",
|
|||
|
|
"data": "userinfo_guid",
|
|||
|
|
"render": function (data, type, row, meta) {
|
|||
|
|
|
|||
|
|
let btnDiv = creDiv(["row", "m-0","justify-content-center"], { "style": "gap:10px" });
|
|||
|
|
btnDiv.append(creBtnHtml("修改", "accManEdiBtn" + data, null, ["btn", "btn-info"]));
|
|||
|
|
btnDiv.append(creBtnHtml("刪除", "accManDelBtn" + data, null, ["btn", "btn-danger"]));
|
|||
|
|
return btnDiv.outerHtml();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let accManTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loadRolManTable() {
|
|||
|
|
let ajaxObj = {
|
|||
|
|
url: baseApiUrl + "/User/RoleManagerList",
|
|||
|
|
method: "POST",
|
|||
|
|
data: { post: 0 },
|
|||
|
|
}
|
|||
|
|
let tag = "#rolManTable";
|
|||
|
|
|
|||
|
|
let column_defs = [
|
|||
|
|
{ "targets": [0], "width": "15%", "sortable": true },
|
|||
|
|
{ "targets": [1], "width": "50%", "sortable": true },
|
|||
|
|
{ "targets": [2], "width": "20%", "sortable": true },
|
|||
|
|
{ "targets": [3], "width": "15%", "sortable": true },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let columns = [
|
|||
|
|
{
|
|||
|
|
"title": "編號",
|
|||
|
|
"data": null,
|
|||
|
|
"render": function (data, type, row, meta) {
|
|||
|
|
return meta.row + 1;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "名稱",
|
|||
|
|
"data": "full_name",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "建立時間",
|
|||
|
|
"data": "created_at",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "功能",
|
|||
|
|
"data": "layer",
|
|||
|
|
"render": function (data, type, row, meta) {
|
|||
|
|
let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
|
|||
|
|
btnDiv.append(creBtnHtml("修改", "rolManEdiBtn" + data, null, ["btn", "btn-info"]));
|
|||
|
|
btnDiv.append(creBtnHtml("刪除", "rolManDelBtn" + data, null, ["btn", "btn-danger"]));
|
|||
|
|
return btnDiv.outerHtml();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let rolManTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loadRolAuthTable() {
|
|||
|
|
let ajaxObj = {
|
|||
|
|
url: baseApiUrl + "/User/RoleAuthList",
|
|||
|
|
method: "POST",
|
|||
|
|
data: { SelectedRoleId :"882b7e2c-1205-4d7c-81dc-818b8d1c1b33"},
|
|||
|
|
}
|
|||
|
|
let tag = "#rolAuthTable";
|
|||
|
|
|
|||
|
|
let column_defs = [
|
|||
|
|
{ "targets": [0], "width": "6%", "sortable": true },
|
|||
|
|
{ "targets": [1], "width": "12%", "sortable": true },
|
|||
|
|
{ "targets": [2], "width": "14%", "sortable": true },
|
|||
|
|
{ "targets": [3], "width": "12%", "sortable": true },
|
|||
|
|
{ "targets": [4], "width": "14%", "sortable": true },
|
|||
|
|
{ "targets": [5], "width": "14%", "sortable": true },
|
|||
|
|
{ "targets": [6], "width": "14%", "sortable": true },
|
|||
|
|
{ "targets": [7], "width": "14%", "sortable": true },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let columns = [
|
|||
|
|
{
|
|||
|
|
"title": "編號",
|
|||
|
|
"data": null,
|
|||
|
|
"render": function (data, type, row, meta) {
|
|||
|
|
return meta.row + 1;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "角色",
|
|||
|
|
"data": "role_full_name",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "功能類型",
|
|||
|
|
"data": "authTypeText",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "區域",
|
|||
|
|
"data": "building_full_name",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "功能名稱",
|
|||
|
|
"data": "mainName",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "功能細項名稱",
|
|||
|
|
"data": "subName",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "建立時間",
|
|||
|
|
"data": "created_at",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"title": "功能",
|
|||
|
|
"data": "userinfo_guid",
|
|||
|
|
"render": function (data, type, row, meta) {
|
|||
|
|
let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
|
|||
|
|
btnDiv.append(creBtnHtml("刪除", "rolAuthDelBtn", null, ["btn", "btn-danger"]));
|
|||
|
|
return btnDiv.outerHtml();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
rolAuthTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getRoleSel() {
|
|||
|
|
|
|||
|
|
let url = baseApiUrl + "/User/RoleManagerList";
|
|||
|
|
let sendData = {
|
|||
|
|
post:1,
|
|||
|
|
};
|
|||
|
|
objSendData.Data = sendData;
|
|||
|
|
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
|
|||
|
|
if (!res || res.code != "0000" || !res.data) {
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
$("#roleSel").html();
|
|||
|
|
$.each(res.data, (index, roleObj) => {
|
|||
|
|
$("#roleSel").append(creOption(roleObj.full_name, roleObj.role_guid));
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}, null, "POST").send();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function events() {
|
|||
|
|
onEvent("change", "#roleSel", function () {
|
|||
|
|
let roleGuid = $(this).val();
|
|||
|
|
dtAjaxResetSendData(rolAuthTable, { SelectedRoleId: roleGuid })
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</script>
|