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

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

文章目录

第七章机构管理和功能菜单权限分配
前言
一、机构管理
- 1.Layui集成zTree
- 2.创建机构管理前端包结构
- 3.在数据库写入数据
- 4.后端树形生成方法
- 5.新增
- 6.修改
- 7.删除
二、功能菜单权限分配
- 1.新增
- 2.修改
- 3.删除
总结

前言

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

一、机构管理

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){//初始化checkedopt.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文档

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

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

【高校宿舍管理系统】第八章学生管理和楼宇管理以及寝室管理
第八章学生管理和楼宇管理以及宿舍管理提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第八章学生管理和楼宇管理以及宿舍管理 ...
【高校宿舍管理系统】终章完成主页以及项目总结
终章完成主页以及项目总结提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录终章完成主页以及项目总结前言一.完成主页 1. ...
【高校宿舍管理系统】第十章缺勤管理、报修管理、来访人员管理以及公告管理
第十章缺勤管理.报修管理.来访人员管理以及公告管理提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第十章缺勤管理.报修管理 ...
【高校宿舍管理系统】第九章寝室编号设置和宿舍初始化以及预选设置
第九章寝室编号设置和宿舍初始化以及预选设置提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第九章寝室编号设置和宿舍初始化以 ...
【高校宿舍管理系统】第二章整合Mybatis和写CRUD的基本流程以及使用代码生成器生成Mapper等相关代码
第二章整合Mybatis和写CRUD的基本流程以及使用代码生成器生成Mapper等相关代码提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正 ...
【高校宿舍管理系统】第一章建立数据库以及项目框架搭建
第一章建立数据库以及项目框架搭建提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第一章建立数据库以及项目框架搭建前言一 ...
【高校宿舍管理系统】第六章用户管理和年级管理
第六章用户管理和年级管理提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第六章用户管理和年级管理前言一.用户管理 1. ...
高校宿舍管理系统详细需求分析说明书
(详细)高校宿舍管理系统需求分析说明书(文末-->获取原文档) 版本状态版本作者参与者起止日期注释审阅者团队版本日期签名教学管理委员会 V1.1 2019.06.1 ...
【高校宿舍管理系统】第三章 Layui整合Axios
第三章 Layui整合Axios 提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第三章 Layui整合Axios 前言一.下 ...

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

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

文章目录

前言

一、机构管理

1.Layui集成zTree

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

3.在数据库写入数据

4.后端树形生成方法

5.新增

6.修改

7.删除

二、功能菜单权限分配

1.新增

2.修改

3.删除

总结

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

最新文章

热门文章

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

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

文章目录

前言

一、机构管理

1.Layui集成zTree

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

3.在数据库写入数据

4.后端树形生成方法

5.新增

6.修改

7.删除

二、功能菜单权限分配

1.新增

2.修改

3.删除

总结

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

最新文章

热门文章

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

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

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