TMS/plg-tms-std-web-vue/public/jq/pages/usercenter/roleList.html

<!-- 角色管理 -->
<style>
  #rolemanager_grid_01>div { margin-top: 0px;}
  #rolemanager_grid_sub .layui-tab { margin-top: 0px;}
</style>

<div class="plg-tab-container">
  <div class="layui-carousel" id="rolemanager_grid" style="margin-bottom: -15px;">
    <div carousel-item>
        <div id="rolemanager_grid_01" class="grid-container-full"></div>
        <div id="rolemanager_grid_01_edit" class="grid-container-full" style="min-height: 550px;">
            <div class="layui-row">
                <div class="layui-col-lg12">
                    <div class="tc-title">
                        <a href="#" id="rolemanager_btn_back" class="back-link"><i class="layui-icon layui-icon-return"></i></a>
                        <span id="rolemanager_span_title"></span>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space15" style="margin: 20px;">
                <div class="layui-col-lg12 tc-panel" style="min-height: 300px;">
                    <div id="rolemanager_grid_sub" style="min-height: 450px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<script type="text/javascript">
/**
 * jiw
 * 2018.10.30
 * 角色、角色组管理界面
 */

(function () {
    var grid = null, grid1 = null, grid2 = null, grid3 = null;
    var form1 = null, tabs1;
    var grid_wnd_0 = null, tmp_gridrow_id = 0, tmp_gridrowdata = null, stepindex = 0;
    var m = $(document.body).height();
    var param = { "pageNum": 1, "pageSize": 10 };

    gridInit(0);

    //滑屏
    var carousel = layui.carousel;
    var car = carousel.render({
        elem: "#rolemanager_grid",
        autoplay: false,
        index: 0,
        arrow: "none",
        indicator: "none",
        anim: "fade",
        width: "100%",
        height: "100%"
    });

    function changePanel(name) {
        car.slide(name);
    }

    //返回主页面
    $("#rolemanager_btn_back").click(function () {
        changePanel("rolemanager_grid_01");
        return false;
    });

    function gridInit(type) {
        if (type === 0) {
            var gridOpts = {
                skin: "terrace",
                rowId: "p_id",
                columns: [
                    { id: "p_id", name: "id", type: "ro", hidden: true },
                    { id: "p_name", name: "角色名称", type: "ro" },
                    { id: "p_description", name: "描述", type: "ro" },
                    { id: "p_systemid", name: "系统编号", type: "ro" },
                    { id: "p_companyid", name: "公司编号", type: "ro" },
                    {
                        id: "op", name: "操作", type: 'button', align: "center", width: 240, render: function () {
                            return "修改^res_roleManage_editClick,删除^res_roleManage_delClick,分配权限^res_roleManage_edit1Click,分配用户^res_roleManage_edit2Click";
                        }
                    }
                ],
                multiselect: false,
                toolbar: [
                    { type: "input", name: "name", label: "角色名称:", placeholder: "", offsetLeft: 10 }, { type: "newcolumn" },
                    { type: "button", name: "btn_search", width: 50, value: "查询" },
                    { type: "newcolumn" },
                    { type: "newcolumn" },
                    {
                        type: "button",
                        name: "btn_add",
                        className: "plg-toolbar-right",
                        width: 80,
                        offsetLeft: 20,
                        value: "<i class='layui-icon layui-icon-add-1'></i>新增"
                    }, { type: "newcolumn" }
                ],
                imagePath: "/prologui/assets/PlgGrid",
                url: "/api/service-users/role/getPlgFxRolePage/v1.0",
                type: "post",
                params: param,
                contentType: "application/x-www-form-urlencoded",
                page: true,
                totalCount: "totalCount"
            };
            grid = new PlgGrid(gridOpts);
            grid.renderTo("rolemanager_grid_01");
            grid.loadData();

            //工具栏按钮事件
            grid.attachToolBarEvent("onButtonClick", function (name) {
                // 查询
                if (name === "btn_search") {
                    grid.setParams(grid.getToolBarForm().getFormData());
                    grid.reload();
                }
                // 新增
                else if (name === "btn_add") {
                    addrole();
                }
            });

            // 双击行编辑
            grid.on("onRowDblClicked", function () {
                show_info(grid.getSelectedRowData());
            });
        }
    }

    //添加角色
    function addrole() {
        stepindex = 0;
        var str = `<div class="layui-col-lg12 tc-15-step" id="rolemanager_grid_roleadd_main">
                <ol>
                    <li class="succeed">
                        <div class="tc-15-step-name"><span class="tc-15-step-num">1</span>填写角色信息</div>
                        <div class="tc-15-step-arrow"></div>
                    </li>
                    <li class="disabled">
                        <div class="tc-15-step-name"><span class="tc-15-step-num">2</span>分配权限</div>
                        <div class="tc-15-step-arrow"></div>
                    </li>
                    <li class="disabled">
                        <div class="tc-15-step-name"><span class="tc-15-step-num">3</span>分配用户</div>
                        <div class="tc-15-step-arrow"></div>
                    </li>
                    <li class="disabled">
                        <div class="tc-15-step-name"><span class="tc-15-step-num">4</span>完成</div>
                        <div class="tc-15-step-arrow"></div>
                    </li>
                </ol>
            </div>
            <div class="layui-col-lg12" style="min-height: 280px;">
                <div id="rolemanager_grid_roleadd_content"></div>
            </div>
            <div class="layui-col-lg12 button-ft">
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="roleadd_btn_next">下一步</button>
            </div>`;
        $("#rolemanager_grid_sub").html(str);
        $("#roleadd_btn_next").show();

        $("ol li").each(function () {
            if ($(this).index() === 0) {
                $(this).removeClass("disabled");
                $(this).addClass("succeed");
            }
            else {
                $(this).removeClass("succeed");
                $(this).addClass("disabled");
            }
        });

        roleFormInit(0, {});

        changePanel("rolemanager_grid_01_edit");

        $("#rolemanager_grid_roleadd_content").height((m > 530) ? m - 400 : m);
        $("#rolemanager_grid_sub").width("100%");
        $("#rolemanager_grid_01_edit .tc-panel").attr("style", "min-height: 400px;");

        $("#roleadd_btn_next").click(function () {
            if (stepindex === 0) {
                var b = form1.validate();
                if (!b) return;

                var fd = form1.getFormData();
                var rdata = save_roleinfo(grid, "/api/service-users/role/insertPlgFxRole/v1.0", "post", "application/x-www-form-urlencoded", fd);

                if (rdata === null) {
                    layer.msg("获取角色信息失败!");
                    return;
                }

                tmp_gridrow_id = rdata.p_id;
                $("#rolemanager_grid_roleadd_content").html("");
                roleauthInit(0, rdata);
            }
            else if (stepindex === 1) {
                $("#rolemanager_grid_roleadd_content").html("");
                roleUsersInit(0, rdata);
            }
            else if (stepindex === 2) {
                //var b = save_users(0);
                //if (b) {
                $("#rolemanager_grid_roleadd_content").html("<h1>角色新增成功,3秒后返回!</h1>");
                grid.reload();
                $("#roleadd_btn_next").hide();
                setTimeout(function () { changePanel("rolemanager_grid_01"); }, 3000);
                //}
                ////console.log(b);
            }

            stepindex++;
            $("ol li").each(function () {
                if (stepindex === $(this).index()) {
                    $(this).removeClass("disabled");
                    $(this).addClass("succeed");
                }
            });
        });
    }

    //角色表单
    function roleFormInit(ntype, rdata) {
        var tit = "新增角色";
        var rediv = "rolemanager_grid_roleadd_content";
        if (ntype === 1) {
            tit = "角色 [" + rdata.p_name + "] 信息修改";
            rediv = "rolemanager_grid_sub";
        }
        $("#rolemanager_span_title").html(tit);
        $("#" + rediv).html("");
        var formcfg = {
            renderer: rediv,
            items: [
                { type: "settings", inputWidth: 140, width: 550, labelWidth: 80, position: "label-left", labelAlign: "left" },
                {
                    type: "settings",
                    inputWidth: 140,
                    width: 550,
                    labelWidth: 80,
                    position: "label-left",
                    labelAlign: "left"
                },
                {
                    type: "block", width: 520,
                    list: [
                        { type: "input", name: "p_name", label: "角色名称:", validate: "NotEmpty", required: true, editable: false },
                        { type: "newcolumn", offset: 40 },
                        { type: "input", name: "p_description", label: "描述:", validate: "NotEmpty", required: true }]
                },
                {
                    type: "block", width: 520,
                    list: [
                        { type: "input", name: "p_companyid", label: "公司编号:" }, { type: "hidden", name: "p_id" },
                        { type: "newcolumn", offset: 40 },
                        { type: "input", name: "p_systemid", label: "系统编号:" }]
                },
                {
                    type: "block", width: 520, list: [
                        { type: "button", name: "btn_save_roleinfo", offsetLeft: 80, value: "保存", hidden: (ntype != 1) }
                    ]
                }
            ]
        };
        form1 = new PlgForm(formcfg);
        form1.setFormData(rdata);

        if (ntype === 1) {
            form1.getDForm().disableItem("p_name");
        }

        form1.attachEvent("onButtonClick", function (name) {
            if (name === "btn_save_roleinfo") {
                var fd = form1.getFormData();
                save_roleinfo(grid, "/api/service-users/role/updatePlgFxRole/v1.0", "put", "application/x-www-form-urlencoded", fd);
            }
        });
    }

    //角色信息保存
    function save_roleinfo(grid, url, type, contentType, formData) {
        var rep = null;
        Prolog.ajax({
            url: url,
            type: type,
            contentType: contentType,
            data: formData,
            async: false,
            success: function (data) {
                if (data.success) {
                    if (type === "put")
                        layer.msg("保存成功！");
                    grid.reload();
                    rep = data.data;
                }
                else {
                    layer.msg(data.message);
                }
            },
            error: function () {
            }
        });
        return rep;
    }

    //分配权限
    function roleauthInit(ntype, rdata) {
        var rediv = "rolemanager_grid_roleadd_content";
        param.type = 0;
        var tbar = [
            {
                type: "input",
                name: "search",
                label: "查询条件:",
                placeholder: "名称",
                offsetLeft: 10
            }, { type: "newcolumn" },
            {
                type: "combo",
                name: "type",
                label: "状态:",
                offsetLeft: 10,
                width: 130,
                options: [{ text: "未分配", value: "0" }, { text: "已分配", value: "1" }],
                hidden: (ntype === 0)
            }, { type: "newcolumn" },
            { type: "button", name: "btn_search", offsetLeft: 20, value: "查询" }, { type: "newcolumn" },
            { type: "button", name: "btn_save", offsetLeft: 10, value: "保存" }
        ];

        if (ntype === 1) {
            rediv = "rolemanager_grid_sub";
            //param.type = 1;
        }

        $("#" + rediv).html("");

        var gridopt = {
            skin: "terrace",
            rowId: "p_id",
            columns: [
                { id: "p_id", name: "id", type: "ro", hidden: true },
                { id: "p_name", name: "名称", type: "ro" }
            ],
            toolbar: tbar,
            multiselect: true,
            imagePath: "/prologui/assets/PlgGrid",
            url: "/api/service-users/role/getRoleAuth/v1.0",
            type: "post",
            contentType: "application/x-www-form-urlencoded",
            params: param,
            page: true,
            totalCount: "totalCount"
        };

        param.roleid = rdata.p_id;
        grid_wnd_0 = new PlgGrid(gridopt);
        grid_wnd_0.renderTo(rediv);
        grid_wnd_0.loadData();
        $("#" + rediv).height(m - 300);
        if (ntype === 1) {
            grid_wnd_0.attachToolBarEvent("onButtonClick", function (name) {
                // 查询
                if (name === "btn_search") {
                    var p = grid_wnd_0.getToolBarForm().getFormData();
                    p.pageNum = 1;
                    p.pageSize = 10;
                    p.roleid = rdata.p_id;
                    grid_wnd_0.setParams(p);
                    grid_wnd_0.reload();
                }
                else if (name === "btn_save") {
                    var par, type;
                    type = grid_wnd_0.getToolBarForm().getFormData().type;
                    if (type === "0") {
                        par = { "type": "1", "roleid": tmp_gridrow_id, "authids": grid_wnd_0.getCheckedIds() };
                    }
                    else if (type === "1") {
                        par = { "type": "0", "roleid": tmp_gridrow_id, "authids": grid_wnd_0.getCheckedIds() };
                    }
                    utilAjaxGJ("/api/service-users/role/allotRoleAuth/v1.0", "post", JSON.stringify(par), function (data) {
                        layer.msg(data.message);
                        grid_wnd_0.reload();
                    }, "application/json");
                }
            });
            grid_wnd_0.getToolBarForm().getCombo("type").attachEvent("onChange", function (v, t) {
                var p = grid_wnd_0.getToolBarForm().getFormData();
                p.pageNum = 1;
                p.pageSize = 10;
                p.roleid = rdata.p_id;
                grid_wnd_0.setParams(p);
                grid_wnd_0.reload();
            });
        }
    }

    //分配用户
    function roleUsersInit(ntype, rdata) {
        var rediv = "rolemanager_grid_roleadd_content";
        param.type = 0;
        var tbar = [
            {
                type: "input",
                name: "search",
                label: "查询条件:",
                placeholder: "名称",
                offsetLeft: 10
            }, { type: "newcolumn" },
            {
                type: "combo",
                name: "type",
                label: "状态:",
                offsetLeft: 10,
                width: 130,
                options: [{ text: "未分配", value: "0" }, { text: "已分配", value: "1" }],
                hidden: (ntype === 0)
            }, { type: "newcolumn" },
            { type: "button", name: "btn_search", offsetLeft: 20, value: "查询" }, { type: "newcolumn" },
            { type: "button", name: "btn_save", offsetLeft: 10, value: "保存" }
        ];

        if (ntype === 1) {
            rediv = "rolemanager_grid_sub";
            //param.type = 1;
        }

        $("#" + rediv).html("");
        var tabcfg = {
            renderer: rediv,
            indexActive: 0,
            skin: "card",
            content: [{
                title: "用户分配",
                id: "role_user_wnd_tab1",
                template: '<div id="rolemanager_grid_usser_01" style=""></div>'
            }, {
                title: "用户组分配",
                id: "role_user_wnd_tab2",
                template: '<div id="rolemanager_grid_usser_02" style=""></div>'
            }]
        };
        var gridopt;
        var tabDiv;
        tabs1 = new PlgTabs(tabcfg).on(function (ele) {
            if (ele.index === 0) {
                tabDiv = "rolemanager_grid_usser_01";
                gridopt = {
                    skin: "terrace",
                    rowId: "p_id",
                    columns: [
                        { id: "p_id", name: "id", type: "ro", hidden: true },
                        { id: "p_nickname", name: "用户名称", type: "ro" },
                        { id: "p_workernumber", name: "工号", type: "ro" }
                    ],
                    toolbar: tbar,
                    multiselect: true,
                    imagePath: "/prologui/assets/PlgGrid",
                    url: "/api/service-users/role/getUserRole/v1.0",
                    type: "post",
                    contentType: "application/x-www-form-urlencoded",
                    params: param,
                    page: true,
                    totalCount: "totalCount"
                };
            }
            if (ele.index === 1) {
                tabDiv = "rolemanager_grid_usser_02";
                gridopt = {
                    skin: "terrace",
                    rowId: "p_id",
                    columns: [
                        { id: "p_id", name: "id", type: "ro", hidden: true },
                        { id: "p_name", name: "名称", type: "ro" },
                        { id: "p_description", name: "描述", type: "ro" }
                    ],
                    toolbar: tbar,
                    multiselect: true,
                    imagePath: "/prologui/assets/PlgGrid",
                    url: "/api/service-users/role/getUserRoleGroup/v1.0",
                    type: "post",
                    contentType: "application/x-www-form-urlencoded",
                    params: param,
                    page: true,
                    totalCount: "totalCount"
                };
            }
            tabcfg.indexActive = ele.index;

            $("#" + tabDiv).html("");
            param.roleid = rdata.p_id;
            grid_wnd_0 = new PlgGrid(gridopt);
            grid_wnd_0.renderTo(tabDiv);
            grid_wnd_0.loadData();
            $("#" + tabDiv).height(m - 300);

            if (ntype === 1) {
                grid_wnd_0.attachToolBarEvent("onButtonClick", function (name) {
                    // 查询
                    if (name === "btn_search") {
                        var p = grid_wnd_0.getToolBarForm().getFormData();
                        p.pageNum = 1;
                        p.pageSize = 10;
                        p.roleid = rdata.p_id;
                        grid_wnd_0.setParams(p);
                        grid_wnd_0.reload();
                    }
                    else if (name === "btn_save") {
                        save_users(1, ele.index);
                    }
                });
                grid_wnd_0.getToolBarForm().getCombo("type").attachEvent("onChange", function (v, t) {
                    var p = grid_wnd_0.getToolBarForm().getFormData();
                    p.pageNum = 1;
                    p.pageSize = 10;
                    p.roleid = rdata.p_id;
                    grid_wnd_0.setParams(p);
                    grid_wnd_0.reload();
                });
            }
        });

        tabs1.changeTabs("role_user_wnd_tab1");

    }

    //分配保存
    function save_users(ntype, stype) {
        var par, type, rsp = null, url;
        if (stype == 0) {
            url = "/api/service-users/role/allotUserRole/v1.0";
            (ntype === 0) ? type = "0" : type = grid_wnd_0.getToolBarForm().getFormData().type;
            if (type === "0") {
                par = { "type": "1", "roleid": tmp_gridrow_id, "userids": grid_wnd_0.getCheckedIds() };
            }
            else if (type === "1") {
                par = { "type": "0", "roleid": tmp_gridrow_id, "userids": grid_wnd_0.getCheckedIds() };
            }
        }
        else if (stype == 1) {
            url = "/api/service-users/role/allotUserRoleGroup/v1.0";
            (ntype === 0) ? type = "0" : type = grid_wnd_0.getToolBarForm().getFormData().type;
            if (type === "0") {
                par = { "type": "1", "roleid": tmp_gridrow_id, "usergroupids": grid_wnd_0.getCheckedIds() };
            }
            else if (type === "1") {
                par = { "type": "0", "roleid": tmp_gridrow_id, "usergroupids": grid_wnd_0.getCheckedIds() };
            }
        }
        else if (stype == 2) {
            url = "/api/service-users/role/allotUserRoleGroup/v1.0";
            (ntype === 0) ? type = "0" : type = grid_wnd_0.getToolBarForm().getFormData().type;
            if (type === "0") {
                par = { "type": "1", "roleid": tmp_gridrow_id, "usergroupids": grid_wnd_0.getCheckedIds() };
            }
            else if (type === "1") {
                par = { "type": "0", "roleid": tmp_gridrow_id, "usergroupids": grid_wnd_0.getCheckedIds() };
            }
        }

        if (grid_wnd_0.getCheckedIds() === "") return rsp;

        layer.msg("数据处理中...");
        Prolog.ajax({
            url: url,
            type: "post",
            contentType: "application/json",
            data: JSON.stringify(par),
            async: false,
            success: function (data) {
                if (typeof data != "object") data = JSON.parse(data);
                if (data.success) {
                    layer.closeAll();
                    if (ntype === 1) {
                        grid_wnd_0.reload();
                        grid.reload();
                    }
                    rsp = data;
                }
                else {
                    layer.open({
                        type: 1, offset: "auto", id: 'layerError', title: "错误提示"
                        , area: ["500px"], content: '<div style="padding: 10px;">' + data.message + '</div>'
                        , btn: '关闭', btnAlign: 'r', shade: 0
                        , yes: function () {
                            layer.closeAll();
                        }
                    });
                    rsp = null;
                }
            },
            error: function () {
            }
        });

        return rsp;
    }

    //查看详细
    function show_info(rdata) {
        $("#roledmanager_span_title").html("角色 [" + rdata.p_name + "] 信息查看");

        var str = `<ul>
                <li><span class='span-item-tit'>名称</span>
                <span class='span-item-txt'>` + ((rdata.p_name === null) ? "" : rdata.p_name) + `</sapn></li>
                <li><span class='span-item-tit'>描述</span>
                <span class='span-item-txt'>` + ((rdata.p_description === null) ? "" : rdata.p_description) + `</span></li>
                <li><span class='span-item-tit'>公司编号</span>
                <span class='span-item-txt'>` + ((rdata.p_companyid === null) ? "" : rdata.p_companyid) + `</span></li>
                <li><span class='span-item-tit'>系统编号</span>
                <span class='span-item-txt'>` + ((rdata.p_systemid === null) ? "" : rdata.p_systemid) + `</span></li>
                </ul>`;
        $("#rolemanager_grid_sub").html(str);

        changePanel("rolemanager_grid_01_edit");
    }



    window.res_roleManage_delClick = function (rid, rdata) {
        Prolog.delGridRowData(grid, "/api/service-users/role/deletePlgFxRoleById/v1.0", "", "", { "id": rid }, false);
        return false;
    };
    window.res_roleManage_editClick = function (rid, rdata) {
        grid.selectRowById(rid);

        roleFormInit(1, rdata);
        changePanel("usermanager_grid_01_edit");
        return false;
    };
    window.res_roleManage_edit1Click = function (rid, rdata) {
        grid.selectRowById(rid);
        tmp_gridrow_id = rid;

        $("#rolemanager_span_title").html("角色 [" + rdata.p_name + "] 分配权限");
        roleauthInit(1, rdata);
        changePanel("rolemanager_grid_01_edit");
        $("#rolemanager_grid_sub").width("100%");

        return false;
    };
    window.res_roleManage_edit2Click = function (rid, rdata) {
        grid.selectRowById(rid);
        tmp_gridrow_id = rid;

        $("#rolemanager_span_title").html("角色 [" + rdata.p_name + "] 分配用户");
        roleUsersInit(1, rdata);
        changePanel("rolemanager_grid_01_edit");
        $("#rolemanager_grid_sub").width("100%");
        $("#rolemanager_grid_01_edit .tc-panel").attr("style", "padding:0;margin:0;min-height: 300px;");

        return false;
    };
})();
	
</script>