<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" data-id="accMan"> <div class="row mb-5 align-items-end"> <div class="col-auto"> <div class="form-group"> <label class="form-label" for="seaAccManName">姓名</label> <input type="text" id="seaAccManName" class="form-control"> </div> </div> <div class="col-auto"> <div class="form-group"> <label class="form-label" for="seaAccManRolName">角色</label> <input type="text" id="seaAccManRolName" 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" id="acc_searchBtn">搜尋</a> </div> </div> <div class="frame-wrap"> <div class="mb-3"> <a href="#" class="btn btn-success" data-toggle="modal" data-target="#accManModal">+ 新增</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" data-id="rolMan"> <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" data-toggle="modal" data-target="#groupModal">+ 新增</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" data-id="rolAuth"> <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> <!-- Modal center Add --> <div class="modal fade" id="accManModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"> 人員基本資料新增 / 修改 </h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"><i class="fal fa-times"></i></span> </button> </div> <form id="accManForm"> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label" for="inpEmail">Email</label> <input type="email" id="inpEmail" name="inpEmail" class="form-control" placeholder="Email"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label" for="inpName">姓名</label> <input type="text" id="inpName" name="inpName" class="form-control"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label" for="inpAcc">帳號</label> <input type="text" id="inpAcc" name="inpAcc" class="form-control"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label" for="selRolAuth">角色權限</label> <select class="form-control" id="selRolAuth" name="selRolAuth"> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label" for="inpPhone">電話</label> <input type="text" id="inpPhone" name="inpPhone" class="form-control"> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" id="accManCanBtn" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" id="accManSendBtn" e-prevent>儲存</button> </div> </form> </div> </div> </div> <!-- Modal group Add --> <div class="modal fade" id="groupModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"> 群組基本資料新增 / 修改 </h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"><i class="fal fa-times"></i></span> </button> </div> <form id="accManForm"> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label" for="groupName">名稱</label> <input type="text" id="groupName" name="groupName" class="form-control"> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" id="" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" id="" e-prevent>儲存</button> </div> </form> </div> </div> </div> <!-- Modal center 設備權限 --> <div class="modal fade" id="modal-center-cog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"> 王小明 </h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"><i class="fal fa-times"></i></span> </button> </div> <div class="modal-body"> <table class="table table-bordered table-striped text-center m-0"> <thead class="thead-themed"> <tr> <th>類別代號</th> <th>類別名稱</th> <th>存取權限</th> </tr> </thead> <tbody> <tr> <td>0220100010</td> <td>電錶</td> <td> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="defaultUnchecked"> <label class="custom-control-label" for="defaultUnchecked">啟用</label> </div> </td> </tr> <tr> <td>0220100010</td> <td>照明設備</td> <td> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="defaultUnchecked"> <label class="custom-control-label" for="defaultUnchecked">啟用</label> </div> </td> </tr> <tr> <td>0220100010</td> <td>環境感測</td> <td> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="defaultUnchecked"> <label class="custom-control-label" for="defaultUnchecked">啟用</label> </div> </td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">儲存</button> </div> </div> </div> </div> <!-- Modal center 設備權限 --> <div class="modal fade" id="modal-center-users" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"> 選擇功能 </h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"><i class="fal fa-times"></i></span> </button> </div> <div class="modal-body"> <table class="table table-bordered table-striped text-center m-0"> <thead class="thead-themed"> <tr> <th>選擇</th> <th>編號</th> <th>功能名稱</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>1</td> <td>系統監控</td> </tr> <tr> <td><input type="checkbox"></td> <td>2</td> <td>歷史資料</td> </tr> <tr> <td><input type="checkbox"></td> <td>3</td> <td>異常記錄</td> </tr> <tr> <td><input type="checkbox"></td> <td>4</td> <td>即時告警</td> </tr> <tr> <td><input type="checkbox"></td> <td>5</td> <td>運維管理</td> </tr> <tr> <td><input type="checkbox"></td> <td>6</td> <td>圖資管理</td> </tr> <tr> <td><input type="checkbox"></td> <td>7</td> <td>帳號管理</td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">儲存</button> </div> </div> </div> </div> <!-- delete modal --> <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-footer"> <h4 class="mr-auto">確定刪除?</h4> <button type="button" class="btn btn-primary" id="confirmDelBtn" aria-label="OK" e-prevent> 確定 </button> <button type="button" class="btn btn-danger" id="closeDelBtn" data-dismiss="modal" aria-label="No"> 取消 </button> </div> </div> </div> </div> <script> var rolAuthTable = null; $(function () { clearPagSes(); getRoleSel(); loadAccManTable(); loadRolManTable(); loadRolAuthTable(); events(); }) function loadAccManTable() { let ajaxObj = { url: baseApiUrl + "/User/UserManagerList", method: "POST", } let tag = "#accManTable"; let sendData = {}; if (pageAct.accManName != null) sendData.Full_name = pageAct.accManName; if (pageAct.accRolName != null) sendData.Role_full_name = pageAct.accRolName; ajaxObj.data = sendData; 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"], { "toggle": "modal", "target": "#accManModal" })); btnDiv.append(creBtnHtml("刪除", "accManDelBtn" + data, null, ["btn", "btn-danger"], { "toggle": "modal", "target": "#delModal" })); 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"], { "toggle": "modal", "target": "#groupModal" })); btnDiv.append(creBtnHtml("刪除", "rolManDelBtn" + data, null, ["btn", "btn-danger"], { "toggle": "modal", "target": "#delModal" })); 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"], { "toggle": "modal", "target": "#delModal" })); 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(); $("#selRolAuth").html(); $.each(res.data, (index, roleObj) => { $("#roleSel").append(creOption(roleObj.full_name, roleObj.role_guid)); $("#selRolAuth").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 }) }) onEvent("click", "[data-target*=accManModal]", function () { pageAct.accManId = $(this).prop('id').split('Btn')[1] $("#inpAcc").val(''); $("#inpName").val(''); $("#inpEmail").val(''); $("#inpPhone").val(''); $("#selRolAuth").val($($('#selRolAuth option')[0]).val()); if ($(this).prop('id') !== undefined) { let url = baseApiUrl + "/User/GetOneUser"; let sendData = { Id: $(this).prop('id').split('Btn')[1], }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { $("#inpAcc").val(res.data.account); $("#inpName").val(res.data.full_name); $("#inpEmail").val(res.data.email); $("#inpPhone").val(res.data.phone); $("#selRolAuth").val(res.data.role_guid); } }, null, "POST").send(); } }); onEvent("click", "[data-target*=delModal]", function () { pageAct.accManId = $(this).prop('id').split('Btn')[1] }); onEvent("click", "#accManSendBtn", function () { let form = $("#accManForm"); $(form).validate({ rules: { inpEmail: { required: true, email: true }, inpName: { required: true, minlength: 2, dbLimit: 50 }, inpAcc: { required: true, dbLimit: 50 }, selRolAuth: { required: true }, inpPhone: { phone: true }, } }); if ($(form).valid()) { let url = baseApiUrl + "/User/SaveUser"; let sendData = { Id: pageAct.accManId ?? "0", Account: $("#inpAcc").val(), Name: $("#inpName").val(), Email: $("#inpEmail").val(), Phone: $("#inpPhone").val(), RoleId: $("#selRolAuth").val(), }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.msg) { } else { toast_ok(pageAct.accManId == null ? common.AddSuc : common.EditSuc); //$("#accManModal").modal("hide"); $("#accManCanBtn").click(); pageAct.accManId = null; loadAccManTable(); } }, null, "POST").send(); } }) onEvent("change", "#seaAccManName", function () { pageAct.accManName = $(this).val() || null; }); onEvent("change", "#seaAccManRolName", function () { pageAct.accRolName = $(this).val() || null; }); onEvent("click", "#acc_searchBtn", function () { let acc_table = $('div.tab-pane.fade.show.active').data('id'); if (acc_table == "accMan") loadAccManTable(); else if (acc_table == "rolMan") loadRolManTable(); else if (acc_table == "rolAuth") loadRolAuthTable(); }); onEvent("change", ".tab-pane.fade", function () { console.log('aaa'); }); onEvent("click", "#confirmDelBtn", function () { let url = baseApiUrl + "/User/DeleteOneUser"; let sendData = { Id: pageAct.accManId, }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.msg) { } else { toast_ok(common.DelSuc); //$("#accManModal").modal("hide"); $("#closeDelBtn").click(); pageAct.accManId = null; loadAccManTable(); } }, null, "POST").send(); }) } function clearPagSes() { pageAct.accManId = null; pageAct.accManName = null; pageAct.accRolName = null; } </script>