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

<!-- 【菜单管理 -->

<div id="menuList2" class="plg-flex plg-tab-container">
	<div class="grid-container-full">
    <div class="plg-grid-panel">
        <div id="basemenuconfig_tool" class="plg-toolbar" style="float: right;"></div><div style="clear: both"></div>
        <div class="layui-row layui-col-space2">
            <div id="basemenuconfig_tree_01" class="layui-col-md4" style="border: #E3E3E3 solid 1px;margin-bottom: 10px;"></div>
            <div id="basemenuconfig_grid_01" class="layui-col-md8" style="border: #E3E3E3 solid 1px;margin-bottom: 10px;"></div>
        </div>
        <div style="clear: both"></div>
    </div>
  </div>
</div>

<script type="text/javascript">
/**
 * jiw
 * 2018.11.05
 * 菜单管理界面
 */

(function () {
    //获取数据
    var rsp_opert_type = [{ value: "", text: "" }, { value: "0", text: "操作" }, { value: "1", text: "查询" }],
        rsp_sys_id = [], rsp_tree = [],
        rsp_menu_type = [{ value: "", text: "" }, { value: "GET", text: "GET" }, { value: "POST", text: "POST" }, { value: "DELETE", text: "DELETE" }, { value: "PUT", text: "PUT" }, { value: "OPTIONS", text: "OPTIONS" }],
        rsp_apptype = [{ value: -1, text: "" }, { value: 0, text: "系统应用" }, { value: 1, text: "公有应用" }, { value: 2, text: "行业应用" }, { value: 3, text: "BI应用" }],
        rsp_factype = [{ value: -1, text: "" }, { value: 0, text: "PC" }, { value: 1, text: "RF" }, { value: 2, text: "APP" }],
        rsp_type = [{ value: -1, text: "" }, { value: 0, text: "菜单" }, { value: 1, text: "按钮" }, { value: 2, text: "静态资源" }];
        var m = $(document.body).height();



    Prolog.ajax({
        url: "/api/service-users/menu/getMenu/v1.0", type: "post", contentType: "application/x-www-form-urlencoded", data: {}, async: false,
        success: function (data) {
            if (data.success) {
                for (var i = 0; i < data.data.length; i++) {
                    rsp_tree.push({
                        id: data.data[i].id,
                        name: "[" + data.data[i].id + "]" + data.data[i].name,
                        menuId: data.data[i].id,
                        nlevel: data.data[i].level,
                        parentMenuId: data.data[i].parentid,
                        isParent: (data.data[i].leaf === 0) ? true : false,
                        systemid: data.data[i].systemid,
                        exttype: data.data[i].exttype
                    });
                }
            }
            else {
                layer.msg("获取菜单数据失败！");
            }
        }, error: function () { }
    });
    Prolog.ajax({
        url: "/api/service-users/sys/getSelectSystem/v1.0", type: "get", contentType: "application/x-www-form-urlencoded", data: {},
        success: function (data) {
            if (data.success) {
                rsp_sys_id.push({ text: "", value: "" });
                for (var i = 0; i < data.data.length; i++) {
                    rsp_sys_id.push({ text: data.data[i].text, value: data.data[i].val });
                }
            }
        }, error: function () { }
    });

    var tool, p1, p2, tree1, form1, grid1;
    var toolcfg = {
        renderer: "basemenuconfig_tool",
        items: [{ type: "newcolumn", offset: 20 }, { type: "button", className: "plg-toolbar-right", name: "btn_add_grid", value: "<i class='layui-icon layui-icon-add-1'></i>新增资源" },
        { type: "newcolumn", offset: 20 }, { type: "button", className: "plg-toolbar-right", name: "btn_del_tree", value: "<i class='layui-icon layui-icon-delete'></i>删除菜单" },
        { type: "newcolumn", offset: 20 }, { type: "button", className: "plg-toolbar-right", name: "btn_add_tree", value: "<i class='layui-icon layui-icon-add-1'></i>新增菜单" }]
    };
    tool = new PlgForm(toolcfg);

    p1 = $("#basemenuconfig_tree_01").PlgPanel({
        title: "菜单项",
        content: '<div id="basemenuconfig_tree_02"></div>',
        style: "overflow:auto"
    });

    p2 = $("#basemenuconfig_grid_01").PlgPanel({
        title: "资源",
        content: '<div id="basemenuconfig_grid_02"></div>',
        style: ""
    });

    var param = { "pageNum": 1, "pageSize": 10 };
    var gridOpts = {
        skin: "terrace",
        rowId: "p_id",
        columns: [
            { id: "p_id", name: "资源ID", type: 'ro', hidden: true },
            { id: "p_systemid", name: "所属系统", type: 'ro', hidden: true , render: function (v) { return getNameByID(rsp_sys_id, v); } },
            { id: "p_name", name: "资源名称", type: 'ro' },
            { id: "p_flg", name: "是否启用", type: 'ch' },
            { id: "p_methodtype", name: "请求类型", type: 'ro' },
            { id: "p_requesturl", name: "资源地址", type: 'ro' },
            {
                id: "op", name: "操作", type: 'button', align: "center", width: 150, render: function () {
                    return "修改^res_BaseMenuConfig_editClick,删除^res_BaseMenuConfig_delClick";
                }
            }
        ],
        multiselect: false,
        formData: [
            { type: "settings", labelWidth: 80, position: "label-left", labelAlign: "left" },
            {
                type: "block", list: [
                    { type: "input", name: "p_menuid", label: "菜单ID:", width: 150, disabled: true },
                    { type: "newcolumn", offset: 60 },
                    { type: "combo", name: "p_systemid", label: "所属系统:", options: rsp_sys_id, width: 152, disabled: true }]
            },
            {
                type: "block", list: [
                    { type: "input", name: "p_name", label: "菜单名称:", validate: "NotEmpty", required: true, width: 150 },
                    { type: "newcolumn", offset: 60 },
                    { type: "combo", name: "p_methodtype", label: "请求类型:", validate: "NotEmpty", required: true, options: rsp_menu_type, width: 152 }]
            },
            {
                type: "block", list: [
                    { type: "input", name: "p_requesturl", label: "资源地址:", validate: "NotEmpty", required: true, width: 150 },
                    { type: "newcolumn", offset: 60 },
                    { type: "checkbox", name: "p_flg", label: "是否启用:", width: 90 }]
            },
            {
                type: "block", list: [
                    { type: "input", name: "p_remark", label: "备注 :", width: 150 }]
            },
            {
                type: "block", list: [
                    { type: "hidden", name: "p_id" },
                    { type: "hidden", name: "p_authorityno" },
                    { type: "input", name: "p_imagepath", label: "菜单图标:", width: 150 },
                    { type: "newcolumn", offset: 60 },
                    { type: "input", name: "p_sort", label: "排序:", width: 150 }]
            }
        ],
        imagePath: "/prologui/assets/PlgGrid",
        url: "/api/service-users/menu/getMenuAuth/v1.0",
        type: "post",
        params: param,
        contentType: "application/x-www-form-urlencoded",
        page: true,
        totalCount: "totalCount"
    };

    var zreecfg = {
        renderer: "basemenuconfig_tree_02",
        skin: "menu-tree",
        toolBar: false,
        delMenu: null,
        setData: rsp_tree,
        setting: {
            check: {
                enable: false
            },
            callback: {
                //单击事件的回调
                onClick: function (event, treeId, treeNode) {
                    if (grid1 != undefined) {
                        grid1.getGrid().clearAll();
                        if (treeNode.isParent == false) {
                            var p = { "pageNum": 1, "pageSize": 10, "menuid": treeNode.id };
                            grid1.setParams(p);
                            grid1.reload();
                        }
                    }
                    else {
                        gridOpts.params.menuid = treeNode.id;
                        grid1 = new PlgGrid(gridOpts);
                        grid1.renderTo("basemenuconfig_grid_02");
                        grid1.loadData();
                        grid1.on("onRowDblClicked", function () {
                            res_BaseMenuConfig_editClick(grid1.getSelectedRowId(), grid1.getSelectedRowData());
                        });
                    }
                },
                onDblClick: treeOnDblClick
            }
        }
    };
    tree1 = new PlgZtree(zreecfg);

    $("body").bind("mousedown", function (event) {
        if (event.target.className == "layui-card-header") {
            tree1.treeObj.cancelSelectedNode();
        }
    });

    $("#basemenuconfig_tree_02").height((m > 530) ? m - 280 : m);
    $("#basemenuconfig_grid_02").height((m > 530) ? m - 280 : m);

    //工具栏事件
    tool.getDForm().attachEvent("onButtonClick", function (name) {
        var sd = tree1.treeObj.getSelectedNodes();
        if (name === "btn_add_grid") {
            if (sd[0].length < 1) {
                layer.msg("请选择菜单");
                return;
            }
            if (sd[0].isParent) {
                layer.msg("不能新增资源");
                return;
            }
            grid1.showDialog(0, "新增", 650, 400, {
                url: "/api/service-users/menu/insertPlgFxMenuAuth/v1.0",
                type: "post",
                dataType: "json",
                contentType: "application/x-www-form-urlencoded"
            });
            grid1.getGridForm().setItemValue("p_systemid", sd[0].systemid);
            grid1.getGridForm().setItemValue("p_parentid", sd[0].id);
            grid1.getGridForm().setItemValue("p_exttype", sd[0].exttype);
        }
        else if (name === "btn_add_tree") {
            if (sd.length < 1) {
                menuWnd(0, null);
                return;
            }
            if (!sd[0].isParent) {
                layer.msg("不能新增子节点");
                return;
            }
            menuWnd(0, sd[0]);
        }
        else if (name === "btn_del_tree") {
            if (sd[0].length < 1) {
                layer.msg("请选择删除项");
                return;
            }

            layer.confirm(`确认删除"${sd[0].name}"吗？`, function (index) {
                layer.close(index);

                Prolog.ajax({
                    url: "/api/service-users/menu/deletePlgFxMenuById/v1.0", type: "post", contentType: "application/x-www-form-urlencoded", data: { "id": sd[0].id },
                    success: function (data) {
                        if (data.success) {
                            tree1.treeObj.removeNode(sd[0]);
                        }
                        else {
                            layer.msg(data.message);
                        }
                    }, error: function () { }
                });
            });
        }
    });

    //菜单双击事件
    function treeOnDblClick(event, treeId, treeNode) {
        if (treeNode != null)
            menuWnd(1, treeNode);
    }


    function menuWnd(type, treeNode) {
        var rsp = {
            "p_id": "", "p_number": "", "p_name": "", "p_parentid": 0, "p_leaf": 0, "p_type": 0, "p_systemid": "", "p_requesturl": "",
            "p_methodtype": "", "p_operttype": "", "p_queryid": "", "p_level": 1, "p_remark": "", "p_flg": 0
        };
        var title = "";
        if (type === 0) {
            title = "新增菜单";
        }
        else {
            title = "修改菜单";
        }
        var wnd_opt = {
            title: title,
            shadeClose: true,
            area: ['650px', '550px'],
            btn: '保存',
            btnAlign: 'r',
            content: '<div id="basemenuconfig_tree_02_1" style=""></div>',
            yes: function (index) {
                var b = form1.validate();
                if (!b) return;

                var fd = form1.getFormData();
                if (type === 0) {
                    Prolog.ajax({
                        url: "/api/service-users/menu/insertPlgFxMenu/v1.0", type: "post", contentType: "application/x-www-form-urlencoded", data: fd,
                        success: function (data) {
                            if (data.success) {
                                var node = { id: "", name: "", menuId: "", parentMenuId: 0, isParent: false, level: 1, enable: true, systemid: "", exttype: "" };
                                node.id = fd.p_id;
                                node.isParent = (fd.p_leaf === 0) ? true : false;
                                node.name = "[" + fd.p_id + "]" + fd.p_name;
                                node.menuId = fd.p_id;
                                node.parentMenuId = fd.p_parentid;
                                node.level = fd.p_level;
                                node.systemid = fd.p_systemid;
                                node.exttype = fd.p_exttype;

                                var newTreeNode = tree1.treeObj.addNodes(treeNode, node);
                                tree1.treeObj.selectNode(newTreeNode[0]);

                                PlgDialog.close(index);
                            }
                            else {
                                layer.msg(data.message);
                                return false;
                            }
                        }, error: function () { }
                    });
                }
                else if (type === 1) {
                    Prolog.ajax({
                        url: "/api/service-users/menu/updatePlgFxMenu/v1.0", type: "put", contentType: "application/x-www-form-urlencoded", data: fd,
                        success: function (data) {
                            if (data.success) {
                                treeNode.name = "[" + fd.p_id + "]" + fd.p_name;
                                tree1.treeObj.updateNode(treeNode);
                                tree1.treeObj.selectNode(treeNode);
                                PlgDialog.close(index);
                            }
                            else {
                                layer.msg(data.message);
                                return false;
                            }
                        }, error: function () { }
                    });
                }
            },
            success: function () {
                if (treeNode != null && type === 0) {
                    rsp.p_level = (treeNode.nlevel + 1);
                    rsp.p_parentid = treeNode.id;
                    rsp.p_id = treeNode.id;
                    rsp.p_systemid = treeNode.systemid;
                    rsp.p_exttype = treeNode.exttype;
                }

                if (type === 1 && treeNode.id.length > 1) {
                    Prolog.ajax({
                        url: "/api/service-users/menu/getPlgFxMenuById/v1.0", type: "get", contentType: "application/x-www-form-urlencoded", data: { "id": treeNode.id }, async: false,
                        success: function (data) {
                            if (data.success) {
                                rsp = data.data;
                            }
                            else {
                                layer.msg(data.message);
                                return false;
                            }
                        }, error: function () { }
                    });
                }

                var formcfg = {
                    renderer: "basemenuconfig_tree_02_1",
                    items: [
                        { type: "settings", position: "label-left", labelWidth: 80 },
                        {
                            type: "block", list: [
                                { type: "input", name: "p_id", label: "菜单 ID:", width: 150, validate: "NotEmpty", required: true, editable: false },
                                { type: "newcolumn", offset: 60 },
                                { type: "checkbox", name: "p_flg", label: "是否启用:", width: 90 },
                                { type: "newcolumn", offset: 40 },
                                { type: "checkbox", name: "p_leaf", label: "是否子节点:", validate: "NotEmpty", required: true, width: 90 }]
                        },
                        {
                            type: "block", list: [
                                { type: "input", name: "p_name", label: "菜单名称:", width: 150, validate: "NotEmpty", required: true, required: true, editable: false },
                                { type: "newcolumn", offset: 60 },
                                { type: "combo", name: "p_systemid", label: "所属系统:", validate: "NotEmpty", required: true, options: rsp_sys_id, width: 152 }]
                        },
                        {
                            type: "block", list: [
                                { type: "combo", name: "p_operttype", label: "操作分类:", options: rsp_opert_type, width: 152 },
                                { type: "newcolumn", offset: 60 },
                                { type: "combo", name: "p_methodtype", label: "请求类型:", validate: "NotEmpty", required: true, options: rsp_menu_type, width: 152 }]
                        },
                        {
                            type: "block", list: [
                                { type: "combo", name: "p_apptype", label: "应用分类:", validate: comboVal, required: true, options: rsp_apptype, width: 152 },
                                { type: "newcolumn", offset: 60 },
                                { type: "combo", name: "p_factype", label: "设备分类:", validate: comboVal, required: true, options: rsp_factype, width: 152 }]
                        },
                        {
                            type: "block", list: [
                                { type: "input", name: "p_remark", label: "备注 :", width: 150 },
                                { type: "newcolumn", offset: 60 },
                                { type: "checkbox", name: "p_exttype", label: "外部资源:", width: 90 }]
                        },
                        {
                            type: "block", list: [
                                { type: "input", name: "p_parentid", label: "父级菜单代码:", width: 150, disabled: true },
                                { type: "newcolumn", offset: 60 },
                                { type: "input", name: "p_level", label: "菜单层级:", validate: "NotEmpty", required: true, width: 150, disabled: true }]
                        },
                        {
                            type: "block", list: [
                                { type: "input", name: "p_requesturl", label: "资源地址:", validate: "NotEmpty", required: true, width: 150 },
                                { type: "newcolumn", offset: 60 },
                                { type: "input", name: "p_imagepath", label: "菜单图标:", width: 100 },
                                { type: "newcolumn", offset: 2 },
                                { type: "button", name: "btn_upload", className: "btn_upload", value: "上传", width: 50 }]
                        },
                        {
                            type: "block", list: [
                                { type: "input", name: "p_queryid", label: "报表ID:", width: 150 },
                                { type: "newcolumn", offset: 60 },
                                { type: "input", name: "p_sort", label: "排序:", width: 150 }]
                        }
                    ]
                };
                form1 = new PlgForm(formcfg);
                form1.setFormData(rsp);

                if (type === 0) {
                    form1.setItemFocus("p_id");
                }
                else {
                    form1.getDForm().disableItem("p_id");
                }

                var $ = layui.jquery, upload = layui.upload;
                //设定文件大小限制
                upload.render({
                    elem: '.btn_upload'
                    , url: '/upload/'
                    , size: 60 //限制文件大小，单位 KB
                    , done: function (res) {
                        //console.log(res)
                    }
                });
            }
        };

        PlgDialog.open(wnd_opt);
    }

    //验证下拉框是否为空
    function comboVal(data) {
        if (data.toString() === "-1") return false;
        return true;
    }

    //根据ID获取中文名称，rsp数据集合，code数据值
    function getNameByID(rsp, code) {
        var str = code;
        if (code === null) {
            str = "";
        }
        else if (rsp === null) {
            str = code;
        }
        else {
            for (var i = 0; i < rsp.length; i++) {
                if (rsp[i].value === code) str = rsp[i].text;
            }
        }
        return str;
    }

    window.res_BaseMenuConfig_delClick = function (rid, rdata) {
        Prolog.delGridRowData(grid1, "/api/service-users/menu/deletePlgFxMenuAuthById/v1.0", "", "", { "id": rid }, false);
        return false;
    };
    window.res_BaseMenuConfig_editClick = function (rid, rdata) {
        grid1.selectRowById(rid);
        grid1.showDialog(1, "编辑", 650, 400, {
            url: "/api/service-users/menu/updatePlgFxMenuAuth/v1.0",
            type: "put",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded"
        });
        return false;
    };

})();




</script>