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

<!-- 用户管理页面 -->
<div id="userList" class="plg-tab-container">
  <style>
      #usermanager_grid>div .layui-tab { margin-top: 0px;}
  </style>
  
  <div class="layui-carousel" id="usermanager_grid" style="margin-bottom: -15px;">
      <div carousel-item>
          <div id="usermanager_grid_01" class="grid-container-full"></div>
          <div id="usermanager_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="usermanager_btn_back" class="back-link"><i class="layui-icon layui-icon-return"></i></a>
                          <span id="usermanager_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="usermanager_grid_sub" style="min-height: 450px;"></div>
                  </div>
              </div>
          </div>
      </div>
  
      <div id="usermanager_treeContent" class="usermanager_treeContent" style="display:none; position: absolute; background-color: #fff; border: 1px #ddd solid; z-index: 99999999; height: auto; min-height: 100px; max-height: 300px; overflow: auto">
          <ul id="usermanager_treeC" name="usermanager_treeC" style="margin-top:0; width:200px;"></ul>
      </div>
     
      
  </div>
</div>

<script>
/**
 * jiw
 * 2018.10.29
 * 用户管理界面
 */

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

    gridInit(0);

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

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

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

    //主页面Grid
    function gridInit(type) {
        //用户管理
        if (type === 0) {
            var gridOpts = {
                skin: "terrace",
                rowId: "p_id",
                columns: [
                    { id: "p_id", name: "id", type: "ro", width: 100, hidden: true },
                    { id: "p_workernumber", name: "员工号", type: "ro", width: 100 },
                    { id: "p_username", name: "用户账号", type: "ro", width: 100 },
                    { id: "p_nickname", name: "用户名称", type: "ro", width: 100 },
                    { id: "p_phone", name: "电话号码", type: "ro", width: 100 },
                    { id: "p_email", name: "电子邮件", type: "ro", width: "*" },
                    { id: "p_frozen", name: "冻结状态", type: "ch", width: 80 },
                    {
                        id: "op", name: "操作", type: "button", align: "center", width: 280, render: function () {
                            return "重置密码^res_userManage_restClick,修改^res_userManage_editClick,删除^res_userManage_delClick,分配系统^res_userManage_edit1Click";
                        }
                    }
                ],
                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_add2",
                        className: "plg-toolbar-right",
                        value: "<i class='layui-icon layui-icon-add-1'></i>批量新增"
                    }, { 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/user/getPlgFxUserPage/v1.0',
                type: "post",
                params: param,
                contentType: "application/x-www-form-urlencoded",
                page: true,
                totalCount: "totalCount"
            };
            grid = new PlgGrid(gridOpts);
            grid.renderTo("usermanager_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") {
                    adduser();
                }
                else if (name === "btn_add2") {
                    addUser();
                }
            });

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

        }
    }

    //批量新增用户信息
    function addUser() {
        var gridopt = {
            skin: "terrace",
            rowId: "p_id",
            columns: [
                { id: "p_id", name: "id", type: "ro", hidden: true },
                { id: "p_nickname", name: "用户名称", type: "ed" },
                { id: "p_username", name: "用户账号", type: "ed" },
                { id: "p_email", name: "Email", type: "ed" },
                { id: "p_phone", name: "电话号码", type: "ed" }
            ],
            multiselect: false,
            imagePath: "/prologui/assets/PlgGrid",
            // url: "/api/service-users/",
            url: "/api/service-users/user/usergroup/allotUserGroup/v1.0",
            type: "post",
            contentType: "Application/json",
            params: {},
            page: false
        };
        var wnd_opt = {
            title: "批量新增用户",
            shadeClose: true,
            area: ['950px', '550px'],
            btn: '保存',
            btnAlign: 'r',
            content: '<div id="usermanager_grid_02_1" style="height:420px"></div>',
            yes: function (index) {
                param = [];
                for (var i = 0; i < grid3.getGrid().getRowsNum(); i++) {
                    if (grid3.getCellVaule2(i, 2).length > 1 && grid3.getCellVaule2(i, 3).length > 1) {
                        param.push({
                            "p_nickname": grid3.getCellVaule((i + 1), 2),
                            "p_username": grid3.getCellVaule((i + 1), 3),
                            "p_email": grid3.getCellVaule((i + 1), 4),
                            "p_phone": grid3.getCellVaule((i + 1), 5),
                            "p_enable": 1
                        });
                    }
                }

                if (param.length < 1) return false;

                layer.msg("数据处理中...");
            

                Prolog.ajax({
                    url: "/api/service-users/user/batchInsertPlgFxUser/v1.0",
                    type: "post",
                    contentType: "Application/json",
                    data: JSON.stringify(param),
                    success: function (data) {
                        if (typeof data != "object") data = JSON.parse(data);
                        if (data.success) {
                            layer.closeAll();
                        }
                        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();
                                }
                            });
                        }
                    },
                    error: function () {
                    }
                });
            },
            success: function () {
                grid3 = new PlgGrid(gridopt);
                grid3.renderTo("usermanager_grid_02_1");
                grid3.loadData({
                    "success": true, "message": "成功", "code": "200", "data":
                    {
                        "list":
                            [{ "p_id": 1, "p_enable": 1 }, { "p_id": 2, "p_enable": 1 }, {
                                "p_id": 3,
                                "p_enable": 1
                            }, { "p_id": 4, "p_enable": 1 }, { "p_id": 5, "p_enable": 1 },
                            { "p_id": 6, "p_enable": 1 }, { "p_id": 7, "p_enable": 1 }, {
                                "p_id": 8,
                                "p_enable": 1
                            }, { "p_id": 9, "p_enable": 1 }, { "p_id": 10, "p_enable": 1 }]
                    }
                });

            }
        };

        PlgDialog.open(wnd_opt);
    }

    //组织机构
    var rsp_tree = [], treeDown;
    Prolog.ajax({
        // url: '/api/service-users/user/getPlgFxUserPage/v1.0',
        url: "/api/service-users/organization/getPlgFxOrganizationById/v1.0",
        type: "post",
        contentType: "application/x-www-form-urlencoded",
        data: {},
        success: function (data) {
            if (data.success) {
                for (var i = 0; i < data.data.length; i++) {
                    rsp_tree.push({
                        id: data.data[i].p_organizationid,
                        name: data.data[i].p_name,
                        menuId: data.data[i].p_organizationid,
                        parentMenuId: (data.data[i].p_fatherid === null) ? "0" : data.data[i].p_fatherid
                    });
                }
                var treecfg = {
                    renderer: "usermanager_treeC",
                    setData: rsp_tree,
                    skin: "menu-tree",
                    toolBar: false,
                    delMenu: null,
                    setting: {
                        callback: {
                            //单击事件的回调
                            onClick: function (event, treeId, treeNode) {
                                if (!treeNode.isParent) {
                                    form1.getDForm().setItemValue("p_cname", treeNode.name);
                                    form1.getDForm().setItemValue("p_companyid", treeNode.id);
                                    $("#usermanager_treeContent").fadeOut("fast");
                                }
                            }
                        }

                    }
                }
                treeDown = new PlgZtree(treecfg);
                treeDown.treeObj.expandAll(true);
            }
        },
        error: function () {
        }
    });
    $("body").bind("mousedown", function (event) {
        if (!(event.target.name == "p_cname" || event.target.id == "usermanager_treeContent" || $(event.target).parents("#usermanager_treeContent").length > 0)) {
            $("#usermanager_treeContent").fadeOut("fast");
        }
    });

    //添加用户
    function adduser() {
        stepindex = 0;
        var str = `<div class="layui-col-lg12 tc-15-step" id="usermanager_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="usermanager_grid_useradd_content"></div>
        </div>
        <div class="layui-col-lg12 button-ft">
            <button class="layui-btn layui-btn-sm layui-btn-normal" id="useradd_btn_next">下一步</button>
        </div>`;
        $("#usermanager_grid_sub").html(str);
        $("#useradd_btn_next").show();

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

        userFormInit(0, {});

        changePanel("usermanager_grid_01_edit");

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

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

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

                if (rdata.success === false) {
                    layer.msg(rdata.message);
                    return;
                }

                tmp_gridrow_id = rdata.p_id;
                $("#usermanager_grid_useradd_content").html("");
                userSystemInit(0, rdata);
            }
            else if (stepindex === 1) {
                //var b = save_system(0);
                //if (b) {
                $("#usermanager_grid_useradd_content").html("<h1>用户新增成功,3秒后返回!</h1>");
                grid.reload();
                $("#useradd_btn_next").hide();
                //layer.msg("用户新增成功,3秒后返回!");
                setTimeout(function () { changePanel("usermanager_grid_01"); }, 3000);
                //}
                ////console.log(b);
            }

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

    //用户表单
    function userFormInit(ntype, rdata) {
        var tit = "新增用户";
        var rediv = "usermanager_grid_useradd_content";
        if (ntype === 1) {
            tit = "用户 [" + rdata.p_nickname + "] 信息修改";
            rediv = "usermanager_grid_sub";
        }
        $("#usermanager_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: "block", width: 520,
                    list: [
                        { type: "input", name: "p_username", label: "用户账号:", editable: false, validate: "NotEmpty", required: true },
                        { type: "newcolumn", offset: 40 },
                        { type: "input", name: "p_nickname", label: "用户姓名:", validate: "NotEmpty", required: true }]
                },
                {
                    type: "block", width: 520,
                    list: [
                        { type: "input", name: "p_workernumber", label: "员工号:", editable: false },
                        { type: "newcolumn", offset: 40 },
                        { type: "input", name: "p_cname", label: "所属机构:", readonly: true }]
                },
                {
                    type: "block", width: 520,
                    list: [
                        { type: "input", name: "p_phone", label: "联系电话:" },
                        { type: "newcolumn", offset: 40 },
                        { type: "input", name: "p_email", label: "Email:" }]
                },
                {
                    type: "block", width: 520,
                    list: [{ type: "checkbox", name: "p_frozen", label: "冻结状态:" }, { type: "hidden", name: "p_enable", value: 1 }, { type: "hidden", name: "p_id" }, { type: "hidden", name: "p_companyid" }]
                },
                {
                    type: "block", width: 520, list: [
                        { type: "button", name: "btn_save_userinfo", offsetLeft: 80, value: "保存", hidden: (ntype != 1) }
                    ]
                }
            ]
        };
        form1 = new PlgForm(formcfg);
        form1.setFormData(rdata);

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

            var node = treeDown.treeObj.getNodeByParam("id", rdata.p_companyid);
            if (node != null) {
                $(form1.getDForm().getInput("p_cname")).val(node.name);
                treeDown.treeObj.selectNode(node);
            }
        }

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

        form1.attachEvent("onFocus", function (name) {
            if (name === "p_cname") {
                var inputOffset = $(form1.getDForm().getInput("p_cname")).offset();
                $("#usermanager_treeContent").css({
                    left: (inputOffset.left - 230) + "px",
                    top: (inputOffset.top - 60) + "px"
                }).slideDown("fast");
            }
        });
    }

    //用户分配系统
    function userSystemInit(ntype, rdata) {
        var rediv = "usermanager_grid_useradd_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 = "usermanager_grid_sub";
            //param.type = 1;
        }

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

        param.userid = rdata.p_id;
        var gridopt = {
            skin: "terrace",
            rowId: "p_id",
            columns: [
                { id: "p_id", name: "id", type: "ro", hidden: true },
                { id: "p_systemid", name: "编号", type: "ro", width: 200 },
                { id: "p_systemname", name: "名称", type: "ro", width: "*" }
            ],
            toolbar: tbar,
            multiselect: true,
            imagePath: "/prologui/assets/PlgGrid",
            url: "/api/service-users/user/getAllocatedSystem/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.userid = rdata.p_id;
                    grid_wnd_0.setParams(p);
                    grid_wnd_0.reload();
                }
                else if (name === "btn_save") {
                    save_system(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.userid = rdata.p_id;
                grid_wnd_0.setParams(p);
                grid_wnd_0.reload();
            });
        }
    }

    //用户信息保存
    function save_userinfo(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 {
                    rep = data;
                }
            },
            error: function () {
            }
        });
        return rep;
    }

    //分配系统保存
    function save_system(ntype) {
        var par, type, rsp = null;
        (ntype === 0) ? type = "0" : type = grid_wnd_0.getToolBarForm().getFormData().type;
        if (type === "0") {
            par = { "type": "1", "userid": tmp_gridrow_id, "systemids": grid_wnd_0.getCheckedIds() };
        }
        else if (type === "1") {
            par = { "type": "0", "userid": tmp_gridrow_id, "systemids": grid_wnd_0.getCheckedIds() };
        }

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

        layer.msg("数据处理中...");
        Prolog.ajax({
            url: "/api/service-users/user/allotSystem/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();
                        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_userinfo(rid, rdata) {
        grid.selectRowById(rid);

        $("#usermanager_span_title").html("用户 [" + rdata.p_nickname + "] 信息查看");

        var str = `<ul>
        <li><span class='span-item-tit'>姓名</span>
        <span class='span-item-txt'>` + ((rdata.p_nickname === null) ? "" : rdata.p_nickname) + `</sapn></li>
        <li><span class='span-item-tit'>用户名</span>
        <span class='span-item-txt'>` + ((rdata.p_username === null) ? "" : rdata.p_username) + `</span></li>
        <li><span class='span-item-tit'>员工号</span>
        <span class='span-item-txt'>` + ((rdata.p_workernumber === null) ? "" : rdata.p_workernumber) + `</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_phone === null) ? "" : rdata.p_phone) + `</span></li>
        <li><span class='span-item-tit'>邮箱</span>
        <span class='span-item-txt'>` + ((rdata.p_email === null) ? "" : rdata.p_email) + `</span></li>
        <li><span class='span-item-tit'>是否在线</span>
        <span class='span-item-txt'>` + ((rdata.p_online === 0) ? "离线" : "在线") + `</span></li>
        <li><span class='span-item-tit'>是否冻结</span>
        <span class='span-item-txt'>` + ((rdata.p_frozen === 0) ? "正常" : "已冻结") + `</span></li>
        <li><span class='span-item-tit'>是否启用</span>
        <span class='span-item-txt'>` + ((rdata.p_enable === 0) ? "启用" : "停用") + `</span></li>
        <li><span class='span-item-tit'>创建人</span>
        <span class='span-item-txt'>` + ((rdata.p_creatorname === null) ? "" : rdata.p_creatorname) + `</span></li>
        <li><span class='span-item-tit'>创建时间</span>
        <span class='span-item-txt'>` + ((rdata.p_createtime === null) ? "" : rdata.p_createtime) + `</span></li>
        <li><span class='span-item-tit'>修改人</span>
        <span class='span-item-txt'>` + ((rdata.p_modifiername === null) ? "" : rdata.p_modifiername) + `</span></li>
        <li><span class='span-item-tit'>修改时间</span>
        <span class='span-item-txt'>` + ((rdata.p_lastmodifytime === null) ? "" : rdata.p_lastmodifytime) + `</span></li>
        </ul>`;
        $("#usermanager_grid_sub").html(str);

        changePanel("usermanager_grid_01_edit");
    }

    window.res_userManage_restClick = function (rid, rdata) {
        if (rid === null) {
            PlgDialog.msg("请选择行!");
            return;
        }
        Prolog.ajax({
            url: "/api/service-users/user/resetPassword/v1.0",
            type: "post",
            contentType: "application/x-www-form-urlencoded",
            data: { "id": rid, "username": rdata.p_username },
            success: function (data) {
                if (typeof data != "object") data = JSON.parse(data);
                if (data.success) {
                    layer.closeAll();
                    PlgDialog.msg("密码已重置!");
                }
                else {
                    layer.open({
                        type: 1
                        , offset: "auto"
                        , id: 'layerDemo'
                        , title: "错误提示"
                        , content: '<div style="padding: 10px;">' + data.message + '</div>'
                        , btn: '关闭'
                        , btnAlign: 'r'
                        , shade: 0
                        , yes: function () {
                            layer.closeAll();
                        }
                    });
                }
            },
            error: function () {
            }
        });

        return false;
    };
    window.res_userManage_delClick = function (rid, rdata) {
        Prolog.delGridRowData(grid, "/api/service-users/user/deletePlgFxUserById/v1.0", "", "", { "id": rid }, false);
        return false;
    };
    window.res_userManage_editClick = function (rid, rdata) {
        grid.selectRowById(rid);
        userFormInit(1, rdata);
        changePanel("usermanager_grid_01_edit");
        return false;
    };
    window.res_userManage_edit1Click = function (rid, rdata) {
        grid.selectRowById(rid);
        tmp_gridrow_id = rid;

        $("#usermanager_span_title").html("用户 [" + rdata.p_nickname + "] 分配系统");
        userSystemInit(1, rdata);
        changePanel("usermanager_grid_01_edit");
        $("#usermanager_grid_sub").width("100%");
        $("#usermanager_grid_sub").height((m > 530) ? m - 260 : m);

        return false;
    };

})();
</script>