【高校宿舍管理系统】第七章 机构管理和功能菜单权限分配

第七章 机构管理和功能菜单权限分配

提示：本博客个为人独立博客，不是权威，仅供参考！所有思路只做交流之用！如有不足之处，望各位在评论区友善指正。

---

---

前言

这一章将介绍如何实现机构管理和功能菜单权限分配

---

一、机构管理

1.Layui集成zTree

打开zTree官网：http://www.treejs.cn/v3/main.php#_zTreeInfo

解压到【高校宿舍管理系统】文件夹

创建zTree文件夹

拷贝样式及图片文件

拷贝ztree模块

建立模块入口和出口

引入layui.jquery

引入css文件

在lay-config.js中注册zTree

2.创建机构管理前端包结构

创建org文件夹

编写lsit页面

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">
                <i class="layui-icon layui-icon-add-circle"></i>
                新增
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-normal data-update-btn" lay-event="update">
                <i class="layui-icon layui-icon-edit"></i>
                修改
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">
                <i class="layui-icon layui-icon-delete"></i>
                删除
            </button>
        </div>
        <div class="ztree" id="ztree"></div>
    </div>
</div>

<script>
    layui.use(['element','axios','ztree'], function () {
        let $ = layui.jquery,
            axios = layui.axios,
            ztree = layui.ztree;

        let setting = {
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        axios.get('org/tree').then(function (response) {
            ztree.init($("#ztree"), setting,response.data);
        }).catch(function (error) {
            console.log(error);
        });

    });
</script>

3.在数据库写入数据

4.后端树形生成方法

在OrgController中添加生成树的方法

在OrgController中添加获取子节点的递归方法

5.新增

创建org.js模块（下拉选择框）

layui.define(['ztree', 'jquery','axios'], function (exports) {
    "use strict";
    let MOD_NAME = 'selectOrg',
        $ = layui.jquery,
        axios = layui.axios,
        ztree = layui.ztree;
    let selectOrg = function () {
        this.v = '1.1.0';
    };

    /**
     * 初始化ztree
     */
    selectOrg.prototype.render = function (opt) {
        let elem = $(opt.elem);
        let tableDone = opt.done || function(){};
        opt.height = opt.height || 315;
        //最小宽度
        opt.width = opt.width || 300;
        elem.off('click').on('click', function(e) {
            e.stopPropagation();
            if($('div.treeSelect').length >= 1){
                return false;
            }
            let t = elem.offset().top + elem.outerHeight()+"px";
            let l = elem.offset().left +"px";
            let treeBox = '<div class="treeSelect layui-anim layui-anim-upbit" style="left:'+l+';top:'+t+';border: 1px solid #d2d2d2;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,.12);padding:10px 10px 0 10px;position: absolute;z-index:66666666;margin: 5px 0;border-radius: 2px;min-width:'+opt.width+'px;max-height: 300px;overflow: auto;">';
            if(opt.checked){
                treeBox += '<div><button type="button" style="float: right" class="layui-btn layui-btn-normal layui-btn-sm tree-sure">确定</button></div>';
            }
            treeBox += '<div class="ztree" id="ztree_xx">';
            treeBox += '</div>';
            treeBox = $(treeBox);
            $('body').append(treeBox);

            let setting = {
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback:{
                    onClick:function (event, treeId, treeNode) {
                        if(!opt.checked){
                            $('.treeSelect').remove();
                            opt.done([treeNode]);
                        }
                    }
                },
                check:{
                    enable: opt.checked
                }
            };

            axios.get('org/tree').then(function (response) {
                ztree.init($("#ztree_xx"), setting,response.data);

                let treeObj = ztree.getZTreeObj("ztree_xx");
                if(opt.checked){
                    //初始化checked
                    opt.selected.forEach(v=>{
                        let checkNodes = treeObj.getNodesByParam("id",v,null);
                        treeObj.checkNode(checkNodes[0],true);
                    })
                    //确定事件
                    $('.tree-sure').click(function () {
                        let arr = treeObj.getCheckedNodes(true);
                        opt.done(arr);
                        opt.selected = arr.map(item=>item.id);
                        treeBox.remove();
                    });
                }

            }).catch(function (error) {
                console.log(error);
            });

            $(document).mouseup(function(e){
                let userSet_con = $(''+opt.elem+',.treeSelect');
                if(!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0){
                    treeBox.remove();
                }
            });

        }); //elem end
    }
    exports(MOD_NAME, new selectOrg());
})

在lay-config.js中注册SelectOrg

完成add页面

<div class="layuimini-main">
    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" lay-reqtext="名称不能为空" placeholder="请输入名称" value="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">上级栏目</label>
            <div class="layui-input-block">
                <input type="hidden" name="parentId" id="parentId"  placeholder="请选择上级栏目" value="" class="layui-input">
                <input type="text" name="parentName" readonly id="parentName" placeholder="请选择上级栏目" value="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" required>类型</label>
            <div class="layui-input-block">
                <select name="type" id="type" lay-verify="required">
                    <option value="">请选择类型</option>
                    <option value="1">学院</option>
                    <option value="2">系</option>
                    <option value="3">专业</option>
                    <option value="4">班级</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" required>年级</label>
            <div class="layui-input-block">
                <select name="gradeId" id="gradeId" lay-verify="required">
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'table','axios','selectOrg'], function () {
        let form = layui.form,
            layer = layui.layer,
            selectOrg = layui.selectOrg,
            axios = layui.axios,
            $ = layui.$;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        // 当前弹出层，防止ID被覆盖
        let parentIndex = layer.index;

        selectOrg.render({
            elem:'#parentName',
            selected:[],
            checked:false,
            done:function (data) {
                $('#parentId').val(data[0].id);
                $('#parentName').val(data[0].name);
            }
        });

        axios.post('grade/query',{}).then(function (response) {
            let options = '<option value="">请选择年级</option>';
            for(let obj of response.data){
                options+='<option value="'+obj.id+'">'+obj.name+'</option>'
            }
            console.log(options);
            $('#gradeId').append(options);
            form.render('select');
        }).catch();

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            axios.post('org/create',data.field).then(function(response){
                if(response.code == 200){
                    layer.msg(response.msg);
                    window.reload();
                }
                layer.close(parentIndex);
            }).catch(function (error) {
                layer.msg(error);
            });
            return false;
        });

    });
</script>

在list页面中完成add事件监听，引入miniPage模块（略）

在list页面中完成新增后重新渲染树形的方法

6.修改

拷贝add作为模板

添加隐藏域

在list页面中完成update事件监听

表单赋值

设值方法，引入form模块（略）

提交接口改为update

7.删除

在list页面中完成delete事件监听

后端删除方法改为单个删除

二、功能菜单权限分配

1.新增

在MenuController中添加一个树形

在MenuMapper.xml中修改查表语句

在user/add.html中请求树形

显示【功能权限】树形

引入ztree（略）并配置

在监听提交时获取id并传给后端修改

在User类中添加ids属性并生成set/get方法

在UserService中完善create方法

2.修改

在UserService中完善update和updateSelective方法

在update表单显示【功能权限】树形

引入ztree（略）并配置

完善MenuController中的tree方法，判断用户当前已经有的功能

完善update.html中的请求参数

完善update.html的监听提交

3.删除

在UserService中完善delete方法

---

总结

难点：
1.学习使用zTree的API文档

第八章预计三天内更新，涉及学生管理和楼宇管理以及宿舍管理