ibms-dome/Frontend/_accountManagement.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" 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="seaRolName">角色</label>
                                    <input type="text" id="seaRolName" class="form-control">
                                </div>
                            </div>
                            <div class="col-auto"> <a href="#" class="btn btn-info" id="rol_searchBtn">搜尋</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="#authPageModal">+ 加入可用功能</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="accRolCanBtn" data-dismiss="modal">關閉</button>
                    <button type="button" class="btn btn-primary" id="accRolSavBtn" e-prevent>儲存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal center 設備權限 -->
<div class="modal fade" id="accManSysModal" 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 w-100">
                    <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 id="accManSysRolSavBtn" type="button" class="btn btn-primary">儲存</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal center 頁面權限 -->
<div class="modal fade" id="authPageModal" 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 id="accAuthPageTable" class="table table-bordered table-striped text-center m-0 w-100">
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
                <button type="button" id="authPageSavBtn" 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();
        loadAuthPageTable();
        loadRolAuthTable();
        setAuthPage();
        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": "10%", "sortable": true },
            { "targets": [2], "width": "14%", "sortable": true },
            { "targets": [3], "width": "10%", "sortable": true },
            { "targets": [4], "width": "14%", "sortable": true },
            { "targets": [5], "width": "10%", "sortable": true },
            { "targets": [6], "width": "14%", "sortable": true },
            { "targets": [7], "width": "22%", "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("設備權限", "accManSysRolEdiBtn" + data, null, ["btn", "btn-info"], { "toggle": "modal", "target": "#accManSysModal" }));
                    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",
        }

        let sendData = {};
        sendData.Layer = 0;
        if (pageAct.rolName != null)
            sendData.Full_name = pageAct.rolName;

        ajaxObj.data = sendData;
        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", "name": row.full_name, "id": row.role_guid }));
                    btnDiv.append(creBtnHtml("刪除", "rolManDelBtn" + data, null, ["btn", "btn-danger"], { "toggle": "modal", "target": "#delModal", "id": row.role_guid }));
                    return btnDiv.outerHtml();
                }
            },
        ];

        let rolManTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
    }

    function loadRolAuthTable() {
        pageAct.authCode = [];
		
        let ajaxObj = {
            url: baseApiUrl + "/User/RoleAuthList",
            method: "POST",
            data: { SelectedRoleId: pageAct.selRolAuth },
        }
        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": "authCode",
                "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": "role_guid",
                "render": function (data, type, row, meta) {
                    let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
                    btnDiv.append(creBtnHtml("刪除", "rolAuthDelBtn" + data, null, ["btn", "btn-danger"], { "toggle": "modal", "target": "#delModal", "id": data, "authcode": row.authCode }));
                    return btnDiv.outerHtml();
                }
            },
        ];

        rolAuthTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
    }

    function loadAuthPageTable() {
        let ajaxObj = {
            url: baseApiUrl + "/User/AuthPageList",
            method: "POST"
        }

        let tag = "#accAuthPageTable";

        let column_defs = [
            { "targets": [0], "width": "33%", "sortable": true },
            { "targets": [1], "width": "33%", "sortable": true },
            { "targets": [2], "width": "33%", "sortable": true },
        ];

        let columns = [
            {
                "title": "選擇",
                "data": 'authCode',
                "render": function (data, type, row, meta) {
                    return `<td><input id='${data}' type="checkbox"></td>`
                }
            },
            {
                "title": "編號",
                "data": null,
                "render": function (data, type, row, meta) {
                    return meta.row + 1;
                }
            },
            {
                "title": "功能名稱",
                "data": "subName",
            }
        ];

        accAuthPageTable = 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));

                    if (index == 0)
                        pageAct.selRolAuth = 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", "[id*=accManDelBtn]", 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("change", "#seaRolName", function () {
            pageAct.rolName = $(this).val() || null;
        });

        onEvent("click", "#acc_searchBtn, #rol_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();
                setAuthPage();
			}
        });

        onEvent("click", "li.nav-item", function () {
            pageAct.rolManId = null;
            pageAct.accManId = null;
            $('#roleSel').html('');
            $("#selRolAuth").html('');
            getRoleSel();
        });

        onEvent("click", "#confirmDelBtn", function () {
            let url = baseApiUrl + "/User/" + (pageAct.accManId != null ? "DeleteOneUser" : (pageAct.rolManId != null ? "DeleteOneRole" : (pageAct.authUsrId != null ? "DeleteOneRoleAuth" : null)));
            let sendData = {
                Id: pageAct.accManId ?? pageAct.rolManId ?? pageAct.authUsrId,
            };

            if (pageAct.authUsrId != null)
                sendData.AuthCode = pageAct.authCode;

            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();
                    if (pageAct.accManId) {
                        pageAct.accManId = null;
                        loadAccManTable();
                    }
                    else if (pageAct.rolManId) {
                        pageAct.rolManId = null;
                        loadRolManTable();
                    }
                    else if (pageAct.authUsrId) {
                        pageAct.authUsrId = null;
                        pageAct.authCode = null;
                        loadRolAuthTable();
                        setAuthPage();
                    }
                }
            }, null, "POST").send();
        })

        onEvent("click", "[id*=rolManEdiBtn]", function () {
            pageAct.rolManId = $(this).data('id');
            $('#groupName').val($(this).data('name'));
        })

        onEvent("click", "[id*=rolManDelBtn]", function () {
            pageAct.rolManId = $(this).data('id');
        })

        onEvent("click", "#accRolSavBtn", function () {
            let url = baseApiUrl + "/User/SaveRole";
            let sendData = {
                Name: $('#groupName').val(),
            };

            sendData.Id = pageAct.rolManId ?? "0";

            objSendData.Data = sendData;
            ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
                if (!res || res.code != "0000" || !res.msg) {

                } else {
                    toast_ok(common.DelSuc);
                    //$("#groupModal").modal("hide");
                    $('#accRolCanBtn').click();
                    pageAct.rolManId = null;
                    loadRolManTable();
                }
            }, null, "POST").send();
        });

        onEvent("change", "#roleSel", function () {
            pageAct.selRolAuth = $(this).val();
            loadRolAuthTable();
			setAuthPage();
        });

        onEvent("click", "[id*=rolAuthDelBtn]", function () {
            pageAct.authCode = $(this).data('authcode');
            pageAct.authUsrId = $(this).data('id');
        });

        onEvent("click", "#authPageSavBtn", function () {
            pageAct.authCode = [];
            pageAct.authCode = $(`#accAuthPageTable input[type=checkbox]:checked:not(:disabled)`).map(function (i, v) { return $(v).prop('id').toString(); }).toArray();

            let url = baseApiUrl + "/User/SaveRoleAuth";
            let sendData = {
                SelectedRoleId: $('#roleSel option:selected').val(),
                SaveCheckAuth: pageAct.authCode,
            };

            objSendData.Data = sendData;
            ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
                if (!res || res.code != "0000" || !res.msg) {

                } else {
                    toast_ok(common.EditSuc);
                    $("#authPageModal").modal("hide");
                    pageAct.authCode = [];
                    loadRolAuthTable();
                    setAuthPage();
                }
            }, null, "POST").send();
        });
    }

    function clearPagSes() {
        pageAct.accManId = null;
        pageAct.accManName = null;
        pageAct.accRolName = null;
        pageAct.rolName = null;
        pageAct.rolManId = null;
        pageAct.selRolAuth = null;
        pageAct.authCode = [];
    }

    function setAuthPage() {
        pageAct.authCode = $('[id*=rolAuthDelBtn]').map(function (i, v) { return $(v).data('authcode'); }).toArray();

        $(`#accAuthPageTable input[type=checkbox]`).prop('disabled', false);
        $.each($(`#accAuthPageTable input[type=checkbox]:checked`), function (i, v) {
            $(v).click();
        });

		pageAct.authCode = pageAct.authCode.filter(function (elem, index, self) {
			return index === self.indexOf(elem);
        });

        $.each(pageAct.authCode, function (i, v) {
			$(`#accAuthPageTable input[id=${v}]`).click();
            $(`#accAuthPageTable input[id=${v}]`).attr('disabled', true);
        });
    }
</script>