jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[帳號管理] 頁面建置 | 帳號權限管理列表 角色權限 角色管理 列表建置 | 圖檔復歸建置 | 樓層sendData增加小類tag

Browse Source
This commit is contained in:
dev01 2022-11-18 17:12:45 +08:00
parent 040295429d
commit c5416dbd7c
6 changed files with 389 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
Frontend/_accountManagement.html Normal file
View File

@ -0,0 +1,297 @@
<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>

21
Frontend/_sysMonFloor.html
View File

@ -4,6 +4,9 @@
}
</style>
<div class="row m-0 mb-3">
<button id="resChartZoom" class="btn btn-info">圖檔重置</button>
</div>
<div class="row">
<div id="floChart" style="height : 80vh!important;width:100%"></div>
</div>
@ -21,6 +24,16 @@
getFloData();
})
onEvent("click", "#resChartZoom", function () {
floChart.setOption({
geo: {
center: null,
zoom: 1.2,
},
});
resetData();
})
function getFloData() {
let url = baseApiUrl + "/api/Device/GetDeviceList";
let sendData = {
@ -337,7 +350,6 @@
// console.log(params)
// })
floChart.on('georoam', function (params) {
var zoom = floChart.getOption().geo[0].zoom;
if (zoom <= 2.5) {
@ -562,13 +574,6 @@
obj.itemStyle = { 'color': item.device_color };
if (item.selected) {
obj.symbolSize = 60
}
console.log(item.zoom)
if (item.zoom > zoomToggle) {
obj.symbolSize = 10
}
res.push(obj);
});

2
Frontend/_systemMonitor.html
View File

@ -41,7 +41,7 @@
function getFloList() {
let url = baseApiUrl + "/api/Device/GetFloor";
let sendData = { building_tag: pageAct.buiTag };
let sendData = { building_tag: pageAct.buiTag, sub_system_tag: pageAct.sysSubTag };
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {

7
Frontend/index.html
View File

@ -1162,12 +1162,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</a>
</div>
<div class="btn-group mx-4">
<a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a href="javascript:;" class="no-arrow text-center">
<i class="fal fa-image fa-2x"></i><br>圖資管理
</a>
</div>
<div class="btn-group mx-4">
<a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a href="javascript:;" name="topFunBtn" class="no-arrow text-center" data-page="accountManagement">
<i class="fal fa-user fa-2x"></i><br>帳號管理
</a>
</div>
@ -2079,7 +2079,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
$(function () {
getSysMonBtnList();
getBuiList();
/*setBuiAct();*/
})
@ -2098,7 +2097,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
if (actEle) {
pageAct.sysMainTag = $(actEle).data("maintag");
pageAct.sysSubTag = $(actEle).prop("id").split("subSysBtn")[1];
pageAct.sysMainName = $(actEle).text();
pageAct.sysSubName = $(actEle).text();
}
$(this).trigger("change");
})

62
Frontend/js/site.js
View File

@ -12,6 +12,12 @@ $.fn.droSetItem = function () {
setDropdownItem(this);
return this;
}
/**
* fn 定義 | 輸出含原元素 html
*/
$.fn.outerHtml = function () {
return $(this).prop("outerHTML");
}
/**
* 設置 bootstrap dropdown 為下拉選單
@ -44,6 +50,58 @@ function defDev(obj) {
obj.src = defSrc;
}
function creEle(ele,text) {
return $(`<${ele}>${text}</${ele}>`);
function dtAjaxResetSendData(table,sendData) {
table.context[0].ajax.data = function (d) {
d = sendData;
return JSON.stringify(d)
}
}
/**
* element 建造
* @param {any} text
* @param {any} id
* @param {any} name
* @param {any} cls
* @param {any} data
* @param {any} attr
*/
function eleBuild(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
cls = cls ?? [], data = data ?? {}, attr = attr ?? {};
id = id ? `id="${id}"` : "";
name = name ? `name="${name}"` : "";
cls = cls.length != 0 ? `class="${cls.join(' ')}"` : "";
data = data.length != 0 ? `${Object.keys(data).map(x => `data-${x}="${data[x]}"`).join(" ")}` : "";
attr = attr ? `${Object.keys(attr).map(x => `${x}="${attr[x]}"`).join(" ")}` : "";
let attrArr = [], attrText = "";
attrArr = [id, name, cls, data, attr];
attrText = attrArr.filter(x => x != "").join(" ");
text = text === null ? "" : text;
return { attrText: attrText, text: text };
}
function creEle(ele, text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
let comp = eleBuild(text, id, name, cls, data, attr);
return $(`<${ele} ${comp.attrText}>${comp.text}</${ele}>`);
}
function creDiv(cls = [], attr = {}, id = null, name = null, data = {}, text = null) {
return creEle("div", text, id, name, cls, data, attr);
}
function creBtn(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
return creEle("button", text, id, name, cls, data, attr);
}
function creBtnHtml(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
return creEle("button", text, id, name, cls, data, attr).prop("outerHTML");
}
function creSelect(id = null, cls = [], name = null, data = {}, attr = {}, text = null) {
return creEle("select", text, id, name, cls, data, attr);
}
function creOption(text = null, value = null, data = {}, attr = {}, cls = [], name = null, id = null) {
attr = value != null ? attr.value = value : attr;
return creEle("option", text, id, name, cls, data, attr);
}

19
Frontend/js/yourteam/yourteam.jquery.datatables.js
View File

@ -161,16 +161,27 @@ function fnInitJqDataTablesAjax(apiUrl, tag, sendData = null, columns, columns_d
}
let table = null;
let token = localStorage.getItem("JWT-Authorization");
let ajaxMethod = "GET";
let ajaxSendData = null;
if (typeof apiUrl == "object") {
ajaxMethod = apiUrl.method;
ajaxSendData = apiUrl.data;
apiUrl = apiUrl.url;
}
try {
let oTable = {
"ajax": {
method: "GET",
method: ajaxMethod,
data: function (d) {
d = ajaxSendData;
return JSON.stringify(d)
},
url: apiUrl,
/* beforeSend: beforeSend,*/
headers: {
"Authorization": "Bearer " + token,
},
contentType: "application/json",
cache: true,
async:false,
dataSrc: sendData,
@ -198,8 +209,8 @@ function fnInitJqDataTablesAjax(apiUrl, tag, sendData = null, columns, columns_d
"EmptyTable": true,
"destroy": true,
"processing": false,
"sDom":'<"toolbar">frtipl',
"pagingType": "simple",
"sDom":'<"toolbar">tipl',
"pagingType": "full_numbers",
//"responsive": true,
"autoWidth": true,
"aoColumns": columns,