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

<!-- 用户组管理 -->
<div id="roleGroupList" class="plg-tab-container">
  <div class="layui-carousel" id="usergroupmanager_grid" style="margin-bottom: -15px;">
    <div carousel-item>
      <div id="usergroupmanager_grid_01" class="grid-container-full"></div>
      <div id="usergroupmanager_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="usergroupmanager_btn_back" class="back-link"><i class="layui-icon layui-icon-return"></i></a>
                      <span id="usergroupmanager_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="usergroupmanager_grid_sub" style="min-height: 450px;"></div>
              </div>
          </div>
      </div>
  </div>
</div>
</div>	
<style>
  #usergroupmanager_grid>div .layui-tab { margin-top: 0px;}
  #usergroupmanager_grid td {word-wrap:break-word;word-break:break-all;white-space:pre-wrap;}
</style>

<script type="text/javascript">
/**
 * jiw
 * 2018.11.19
 * 用户组管理界面
 */

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

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

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

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

    gridInit(1);

    //主页面Grid
    function gridInit(type) {
        //用户组
        if (type === 1) {
            var gridOpts = {
                skin: "terrace",
                rowId: "p_id",
                columns: [
                    { id: "p_id", name: "id", type: "ro", hidden: true },
                    { id: "p_name", name: "名称", type: "ro", width:100 },
                    { id: "p_description", name: "名称", type: "ro", width:100 },
                    { id: "p_userlist", name: "用户列表", type: "ro", width: "*",className:"grid-td-word" },
                    {
                        id: "op", name: "操作", type: 'button', align: "center", width: 160, render: function () {
                            return "修改^res_userGroupManage_edit1Click,删除^res_userGroupManage_del1Click,分配用户^res_userGroupManage_edit2Click";
                        }
                    }
                ],
                multiselect: false,
                toolbar: [
                    {
                        type: "input",
                        name: "search",
                        label: "查询条件:",
                        placeholder: "用户组名称",
                        offsetLeft: 10
                    }, { type: "newcolumn" },
                    { type: "button", name: "btn_search", value: "查询" },
                    { type: "newcolumn" },
                    { type: "newcolumn" },
                    {
                        type: "button",
                        name: "btn_add",
                        className: "plg-toolbar-right",
                        offsetLeft: 20,
                        value: "<i class='layui-icon layui-icon-add-1'></i>新增"
                    }, { type: "newcolumn" }
                ],
                imagePath: "/prologui/assets/PlgGrid",
                url: '/api/service-users/usergroup/getPlgFxUsergroupPage/v1.0',
                type: "post",
                params: param,
                contentType: "application/x-www-form-urlencoded",
                page: true,
                totalCount: "totalCount"
            };
            grid4 = new PlgGrid(gridOpts);
            grid4.renderTo("usergroupmanager_grid_01");
            grid4.loadData();

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

            // 双击行
            grid4.on("onRowDblClicked", function () {
                show_usergroupinfo(grid4.getSelectedRowId(), grid4.getSelectedRowData());
            });

        }
    }

    //添加用户组
    function addusergroup() {
        stepindex = 0;
        var str = `<div class="layui-col-lg12 tc-15-step" id="usergroupmanager_grid_useradd_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>
            </ol>
        </div>
        <div class="layui-col-lg12" style="min-height: 280px;">
            <div id="usergroupmanager_grid_useradd_content"></div>
        </div>
        <div class="layui-col-lg12 button-ft">
            <button class="layui-btn layui-btn-sm layui-btn-normal" id="usergroupadd_btn_next">下一步</button>
        </div>`;
        $("#usergroupmanager_grid_sub").html(str);
        $("#usergroupadd_btn_next").show();

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

        usergroupFormInit(0, {});

        changePanel("usergroupmanager_grid_01_edit");

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

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

                var fd = form1.getFormData();
                var rdata = save_usergroupinfo(grid4, "/api/service-users/usergroup/insertPlgFxUsergroup/v1.0", "post", "application/x-www-form-urlencoded", fd);

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

                tmp_gridrow_id = rdata.p_id;
                $("#usergroupmanager_grid_useradd_content").html("");
                usergroupInit(0, rdata);
            }
            else if (stepindex === 1) {
                //var b = save_usergroup(0);
                //if (b) {
                $("#usergroupmanager_grid_useradd_content").html("<h1>用户组新增成功,3秒后返回!</h1>");
                grid4.reload();
                $("#usergroupadd_btn_next").hide();
                setTimeout(function () { changePanel("usergroupmanager_grid_01"); }, 3000);
                //}
            }

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

    //用户组表单
    function usergroupFormInit(ntype, rdata) {
        var tit = "新增用户组";
        var rediv = "usergroupmanager_grid_useradd_content";
        if (ntype === 1) {
            rediv = "usergroupmanager_grid_sub";
            tit = "用户组 [" + rdata.p_name + "] 信息修改";
        }
        $("#" + rediv).html("");
        $("#usergroupmanager_span_title").html(tit);

        var formcfg = {
            renderer: rediv,
            items: [
                { type: "settings", inputWidth: 340, width: 550, labelWidth: 80, position: "label-left", labelAlign: "left" },
                { type: "input", name: "p_name", label: "用户组名称:", editable: false, validate: "NotEmpty", required: true },
                { type: "input", name: "p_description", label: "用户组描述:", validate: "NotEmpty", required: true, rows: 5 },
                { type: "button", name: "btn_save_userinfo", offsetLeft: 80, value: "保存", hidden: (ntype != 1) },
                { type: "hidden", name: "p_id" }
            ]
        };
        form1 = new PlgForm(formcfg);
        form1.setFormData(rdata);

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

        form1.attachEvent("onButtonClick", function (name) {
            if (name === "btn_save_userinfo") {
                var fd = form1.getFormData();
                save_usergroupinfo(grid4, "/api/service-users/usergroup/updatePlgFxUsergroup/v1.0", "put", "application/x-www-form-urlencoded", fd);
            }
        });
    }

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

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

        }

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

        param.usergroupid = rdata.p_id;
        var gridopt = {
            skin: "terrace",
            rowId: "p_id",
            columns: [
                { id: "p_id", name: "id", type: "ro", hidden: true },
                { id: "p_nickname", name: "用户名称", type: "ro" },
                { id: "p_username", name: "用户账号", type: "ro" }
            ],
            toolbar: tbar,
            multiselect: true,
            imagePath: "/prologui/assets/PlgGrid",
            url: "/api/service-users/usergroup/getAllocatedUser/v1.0",
            type: "post",
            contentType: "application/x-www-form-urlencoded",
            params: param,
            page: true,
            totalCount: "totalCount"
        };

        grid_wnd_0 = new PlgGrid(gridopt);
        grid_wnd_0.renderTo(rediv);
        grid_wnd_0.loadData();

        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.usergroupid = rdata.p_id;
                    grid_wnd_0.setParams(p);
                    grid_wnd_0.reload();
                }
                else if (name === "btn_save") {
                    save_usergroup(1);
                }
            });
            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.usergroupid = rdata.p_id;
                grid_wnd_0.setParams(p);
                grid_wnd_0.reload();
            });
        }
    }

    //用户组信息保存
    function save_usergroupinfo(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 save_usergroup(ntype) {
        var par, type, rsp = null;
        (ntype === 0) ? type = "0" : type = grid_wnd_0.getToolBarForm().getFormData().type;
        if (type === "0") {
            par = { "type": "1", "usergroupid": tmp_gridrow_id, "userids": grid_wnd_0.getCheckedIds() };
        }
        else if (type === "1") {
            par = { "type": "0", "usergroupid": tmp_gridrow_id, "userids": grid_wnd_0.getCheckedIds() };
        }

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

        layer.msg("数据处理中...");
        Prolog.ajax({
            url: "/api/service-users/usergroup/allotUserGroup/v1.0",
            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();
                        grid4.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_usergroupinfo(rid, rdata) {
        grid4.selectRowById(rid);

        $("#usergroupmanager_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_userlist === null) ? "" : rdata.p_userlist) + `</span></li>
        </ul>`;
        $("#usergroupmanager_grid_sub").html(str);

        changePanel("usergroupmanager_grid_01_edit");
    }

    window.res_userGroupManage_del1Click = function (rid, rdata) {
        Prolog.delGridRowData(grid4, "/api/service-users/usergroup/deletePlgFxUsergroupById/v1.0", "", "", { "id": rid }, false);
        return false;
    };
    window.res_userGroupManage_edit1Click = function (rid, rdata) {
        grid4.selectRowById(rid);
        usergroupFormInit(1, rdata);
        changePanel("usergroupmanager_grid_01_edit");
        $("#usergroupmanager_grid_sub").width("100%");
        $("#usergroupmanager_grid_sub").height((m > 530) ? m - 260 : m);
        return false;
    };
    window.res_userGroupManage_edit2Click = function (rid, rdata) {
        grid4.selectRowById(rid);
        tmp_gridrow_id = rid;
        usergroupInit(1, rdata);
        changePanel("usergroupmanager_grid_01_edit");
        $("#usergroupmanager_grid_sub").width("100%");
        $("#usergroupmanager_grid_sub").height((m > 530) ? m - 260 : m);

        return false;
    };

})();


</script>