<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="#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"> <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> <!-- Modal center Add --> <div class="modal fade" id="accManModal" tabindex="-1" role="dialog" aria-hidden="true"> <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 class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="inpSameEmail" name="inpSameEmail" /> <label class="custom-control-label text-white" for="inpSameEmail">與email相同</label> </div> </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" data-dismiss="modal">關閉</button> <button type="submit" class="btn btn-primary" id="accManSendBtn" 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"> <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"> <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> <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(); $("#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", "#accManSendBtn", function () { let form = $("#accManForm"); $(form).validate({ rules: { inpEmail: { required: true, email: true }, inpName: { required: true, minlength: 2, dbLimit: 50 }, inpAcc: { required: true, email: true, dbLimit: 50 }, selRolAuth: { required: true }, inpPhone: { phone: true }, } }); if ($(form).valid()) { let url = baseApiUrl + "/User/SaveUser"; let sendData = { Id: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.data) { } else { toast_ok(common.AddSuc); $("#accManModal").modal("hide"); } }, null, "POST").send(); } }) } </script>