[帳號管理] 頁面建置 | 帳號權限管理列表 角色權限 角色管理 列表建置 | 圖檔復歸建置 | 樓層sendData增加小類tag
This commit is contained in:
parent
040295429d
commit
c5416dbd7c
297
Frontend/_accountManagement.html
Normal file
297
Frontend/_accountManagement.html
Normal 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>
|
||||
@ -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);
|
||||
});
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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");
|
||||
})
|
||||
|
||||
@ -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);
|
||||
}
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user