第十章 缺勤管理、报修管理、来访人员管理以及公告管理
提示：本博客个为人独立博客，不是权威，仅供参考！所有思路只做交流之用！如有不足之处，望各位在评论区友善指正。
文章目录
第十章 缺勤管理、报修管理、来访人员管理以及公告管理前言一、缺勤管理1.后端的提前准备工作2.前端页面二、报修管理1.后端的提前准备工作2.前端页面三、来访人员管理1.后端的提前准备工作2.前端页面四、公告管理1.后端的提前准备工作2.前端页面总结前言
这一章将介绍如何实现缺勤管理、报修管理、来访人员管理以及公告管理
一、缺勤管理
1.后端的提前准备工作
在数据库中写入数据
改正AbsenceMapper.xml中代码生成器产生的小纰漏
在DormitoryStudent中添加属性student和dormitory以及对应的set/get方法
完善DormitoryStudentController中的query方法
在Absence中添加属性student和dormitory以及对应的set/get方法
完善AbsenceController中的query方法
2.前端页面
创建absence包结构
list页面
<div class="layuimini-container layuimini-page-anim"><div class="layuimini-main"><div style="margin: 10px 10px 10px 10px"><form class="layui-form layui-form-pane" action=""><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">姓名</label><div class="layui-input-inline"><input type="text" name="name" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button></div></div></form></div><script type="text/html" id="toolbarDemo"><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-delete-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></script><table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table></div></div><script>layui.use(['form', 'table','miniPage','miniAdmin','form','element','axios'], function () {var $ = layui.jquery,form = layui.form,table = layui.table,axios = layui.axios,form = layui.form,miniAdmin = layui.miniAdmin,miniPage = layui.miniPage;table.render({elem: '#currentTableId',method:'post',url: 'absence/query',toolbar: '#toolbarDemo',defaultToolbar: ['filter', 'exports', 'print'],cols: [[{type: "checkbox", width: 50},{field: 'id', width: 80, title: 'ID'},{field: 'studentId',title: '姓名',templet:'<div>{{d.student.name}}</div>'},{field: 'dormitoryId',title: '宿舍',templet:'<div>{{d.dormitory.no}}</div>'},{field: 'startTime',title: '开始时间'},{field: 'endTime',title: '结束时间'},{field: 'remark',title: '备注'}]],page: true,skin: 'line'});window.reload = function(){table.reload('currentTableId');}// 监听搜索操作form.on('submit(data-search-btn)', function (data) {var result = JSON.stringify(data.field);//执行搜索重载table.reload('currentTableId', {where: data.field}, 'data');return false;});/*** toolbar事件监听*/table.on('toolbar(currentTableFilter)', function (obj) {if (obj.event === 'add') {// 监听添加操作let content = miniPage.getHrefContent('absence/add.html');let openWH = miniPage.getOpenWidthHeight();let index = layer.open({title: '添加',type: 1,shade: 0.2,maxmin:true,shadeClose: true,area: [openWH[0] + 'px', openWH[1] + 'px'],offset: [openWH[2] + 'px', openWH[3] + 'px'],content: content});$(window).on("resize", function () {layer.full(index);});} else if (obj.event === 'update') {//修改操作let data = table.checkStatus('currentTableId').data;if(data.length!=1){layer.msg("请选择一条记录修改");}else{let content = miniPage.getHrefContent('absence/update.html');let openWH = miniPage.getOpenWidthHeight();let index = layer.open({title: '修改',type: 1,shade: 0.2,maxmin:true,shadeClose: true,area: [openWH[0] + 'px', openWH[1] + 'px'],offset: [openWH[2] + 'px', openWH[3] + 'px'],content: content});$(window).on("resize", function () {layer.full(index);});}}else if (obj.event === 'delete') {//删除操作let data = table.checkStatus('currentTableId').data;if(data.length==0){layer.msg("请选择要删除的数据");}else{layer.confirm('确定要删除吗', function (index) {//异步删除 map\filter\some\everylet arr = data.map(item=>item.id);axios.get('absence/delete?ids='+arr.join(",")).then(function (response) {table.reload('currentTableId');layer.msg(response.msg);}).catch(function (error) {layer.msg(error);});layer.close(index);});}}});});</script>
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-inline"><select name="buildingId" lay-filter="buildingId" id="buildingId"><option value="">请选择楼宇</option></select></div><div class="layui-form-mid">-</div><div class="layui-input-inline"><select name="storeyId" lay-filter="storeyId" id="storeyId"><option value="">请选择楼层</option></select></div><div class="layui-form-mid">-</div><div class="layui-input-inline"><select name="dormitoryId" lay-filter="dormitoryId" id="dormitoryId"><option value="">请选择宿舍</option></select></div><div class="layui-form-mid">-</div><div class="layui-input-inline"><select name="studentId" lay-filter="studentId" id="studentId"><option value="">请选择学生</option></select></div></div><div class="layui-form-item"><label class="layui-form-label required">开始时间</label><div class="layui-input-block"><input type="text" name="startTime" id="startTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label required">结束时间</label><div class="layui-input-block"><input type="text" name="endTime" id="endTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"></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','ztree','laydate'], function () {let form = layui.form,layer = layui.layer,ztree = layui.ztree,laydate = layui.laydate,axios = layui.axios,$ = layui.$;/*** 初始化表单，要加上，不然刷新部分组件可能会不加载*///日期laydate.render({elem: '#startTime'});laydate.render({elem: '#endTime'});// 当前弹出层，防止ID被覆盖let parentIndex = layer.index;axios.post('building/query',{}).then(function (response) {response.data.forEach(item=>{let option = `<option value="${item.id}">${item.name}</option>`$('#buildingId').append(option);})form.render();});form.on('select(buildingId)', function(data){axios.post('storey/query',{buildingId:data.value,limit:1000}).then(function (response) {$('#storeyId').empty();$('#storeyId').append('<option value="">请选择楼层</option>');response.data.forEach(item=>{let option = `<option value="${item.id}">${item.name}</option>`$('#storeyId').append(option);})form.render();});});form.on('select(storeyId)', function(data){axios.post('dormitory/query',{storeyId:data.value,limit:1000}).then(function (response) {$('#dormitoryId').empty();$('#dormitoryId').append('<option value="">请选择宿舍</option>');response.data.forEach(item=>{let option = `<option value="${item.id}">${item.no}</option>`$('#dormitoryId').append(option);})form.render();});});form.on('select(dormitoryId)', function(data){axios.post('dormitoryStudent/query',{dormitoryId:data.value,limit:1000}).then(function (response) {$('#studentId').empty();$('#studentId').append('<option value="">请选择学生</option>');response.data.forEach(item=>{let option = `<option value="${item.student.id}">${item.student.name}</option>`$('#studentId').append(option);})form.render();});});//监听提交form.on('submit(saveBtn)', function (data) {axios.post('absence/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>
update页面
<div class="layuimini-main"><div class="layui-form layuimini-form" lay-filter="updateForm"><div class="layui-form-item"><label class="layui-form-label required">开始时间</label><div class="layui-input-block"><input type="hidden" name="id" id="id"><input type="text" name="startTime" id="startTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label required">结束时间</label><div class="layui-input-block"><input type="text" name="endTime" id="endTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"></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','ztree','laydate'], function () {let form = layui.form,layer = layui.layer,ztree = layui.ztree,laydate = layui.laydate,axios = layui.axios,$ = layui.$;/*** 初始化表单，要加上，不然刷新部分组件可能会不加载*///日期laydate.render({elem: '#startTime'});laydate.render({elem: '#endTime'});// 当前弹出层，防止ID被覆盖let parentIndex = layer.index;//监听提交form.on('submit(saveBtn)', function (data) {axios.post('absence/update',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>
表单赋值
改进AbsenceController中的update方法
二、报修管理
1.后端的提前准备工作
在数据库中写入数据
改正RepairMapper.xml中代码生成器产生的小纰漏
在Repair中添加属性student、dormitory和building以及对应的set/get方法
完善RepairController中的query方法
2.前端页面
创建repair包结构
list页面
<div class="layuimini-container layuimini-page-anim"><div class="layuimini-main"><div style="margin: 10px 10px 10px 10px"><form class="layui-form layui-form-pane" action=""><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">姓名</label><div class="layui-input-inline"><input type="text" name="name" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button></div></div></form></div><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-normal layui-btn-sm data-add-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></script><table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table></div></div><script>layui.use(['form', 'table','miniPage','miniAdmin','form','element','axios'], function () {var $ = layui.jquery,form = layui.form,table = layui.table,axios = layui.axios,form = layui.form,miniAdmin = layui.miniAdmin,miniPage = layui.miniPage;table.render({elem: '#currentTableId',method:'post',url: 'repair/query',toolbar: '#toolbarDemo',defaultToolbar: ['filter', 'exports', 'print'],cols: [[{type: "checkbox", width: 50},{field: 'id', width: 80, title: 'ID'},{field: 'studentId',title: '姓名',templet:'<div>{{d.student.name}}</div>'},{field: 'dormitoryId',title: '宿舍',templet:'<div>{{d.dormitory.no}}</div>'},{field: 'buildingId',title: '楼宇',templet:'<div>{{d.building.name}}</div>'},{field: 'description',title: '报修描述'},{field: 'createDate',title: '申请时间'},{field: 'status',title: '状态',templet: function (row) {if(row.status == 0){return '<span class="layui-badge layui-bg-orange">待解决</span>';}else{return '<span class="layui-badge layui-bg-green">已解决</span>';}}}]],page: true,skin: 'line'});window.reload = function(){table.reload('currentTableId');}// 监听搜索操作form.on('submit(data-search-btn)', function (data) {var result = JSON.stringify(data.field);//执行搜索重载table.reload('currentTableId', {where: data.field}, 'data');return false;});/*** toolbar事件监听*/table.on('toolbar(currentTableFilter)', function (obj) {if (obj.event === 'update') {//修改操作let data = table.checkStatus('currentTableId').data;if(data.length!=1){layer.msg("请选择一条记录修改");}else{axios.post('repair/update',{id:data[0].id,status:1}).then(function (response) {layer.msg(response.msg);table.reload('currentTableId');});}}else if (obj.event === 'delete') {//删除操作let data = table.checkStatus('currentTableId').data;if(data.length==0){layer.msg("请选择要删除的数据");}else{layer.confirm('确定要删除吗', function (index) {//异步删除 map\filter\some\everylet arr = data.map(item=>item.id);axios.get('repair/delete?ids='+arr.join(",")).then(function (response) {table.reload('currentTableId');layer.msg(response.msg);}).catch(function (error) {layer.msg(error);});layer.close(index);});}}});});</script>
改进RepairController中的update方法
三、来访人员管理
1.后端的提前准备工作
在数据库中写入数据
改正VisitMapper.xml中代码生成器产生的小纰漏
在Visit中添加属性student以及对应的set/get方法
完善VisitController中的query方法
2.前端页面
创建visit包结构
list页面
<div class="layuimini-container layuimini-page-anim"><div class="layuimini-main"><div style="margin: 10px 10px 10px 10px"><form class="layui-form layui-form-pane" action=""><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">姓名</label><div class="layui-input-inline"><input type="text" name="name" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button></div></div></form></div><script type="text/html" id="toolbarDemo"><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-delete-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></script><table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table></div></div><script>layui.use(['form', 'table','miniPage','miniAdmin','form','element','axios'], function () {var $ = layui.jquery,form = layui.form,table = layui.table,axios = layui.axios,form = layui.form,miniAdmin = layui.miniAdmin,miniPage = layui.miniPage;table.render({elem: '#currentTableId',method:'post',url: 'visit/query',toolbar: '#toolbarDemo',defaultToolbar: ['filter', 'exports', 'print'],cols: [[{type: "checkbox", width: 50},{field: 'id', width: 80, title: 'ID'},{field: 'visitor',title: '来访姓名'},{field: 'phone',title: '电话'},{field: 'sex', title: '性别',templet:function (row) {if(row.sex == 0){return '女';}else{return '男';}}},{field: 'idcard',title: '身份证号'},{field: 'student_id',title: '学生',templet:'<div>{{d.student.name}}</div>'},{field: 'visitTime',title: '来访时间'},{field: 'leaveTime',title: '离开时间'},{field: 'remark',title: '备注'}]],page: true,skin: 'line'});window.reload = function(){table.reload('currentTableId');}// 监听搜索操作form.on('submit(data-search-btn)', function (data) {var result = JSON.stringify(data.field);//执行搜索重载table.reload('currentTableId', {where: data.field}, 'data');return false;});/*** toolbar事件监听*/table.on('toolbar(currentTableFilter)', function (obj) {if (obj.event === 'add') {// 监听添加操作let content = miniPage.getHrefContent('visit/add.html');let openWH = miniPage.getOpenWidthHeight();let index = layer.open({title: '添加',type: 1,shade: 0.2,maxmin:true,shadeClose: true,area: [openWH[0] + 'px', openWH[1] + 'px'],offset: [openWH[2] + 'px', openWH[3] + 'px'],content: content});$(window).on("resize", function () {layer.full(index);});} else if (obj.event === 'update') {//修改操作let data = table.checkStatus('currentTableId').data;if(data.length!=1){layer.msg("请选择一条记录修改");}else{let content = miniPage.getHrefContent('visit/update.html');let openWH = miniPage.getOpenWidthHeight();let index = layer.open({title: '修改',type: 1,shade: 0.2,maxmin:true,shadeClose: true,area: [openWH[0] + 'px', openWH[1] + 'px'],offset: [openWH[2] + 'px', openWH[3] + 'px'],content: content});$(window).on("resize", function () {layer.full(index);});}}else if (obj.event === 'delete') {//删除操作let data = table.checkStatus('currentTableId').data;if(data.length==0){layer.msg("请选择要删除的数据");}else{layer.confirm('确定要删除吗', function (index) {//异步删除 map\filter\some\everylet arr = data.map(item=>item.id);axios.get('visit/delete?ids='+arr.join(",")).then(function (response) {table.reload('currentTableId');layer.msg(response.msg);}).catch(function (error) {layer.msg(error);});layer.close(index);});}}});});</script>
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-inline"><select name="buildingId" lay-filter="buildingId" id="buildingId"><option value="">请选择楼宇</option></select></div><div class="layui-form-mid">-</div><div class="layui-input-inline"><select name="storeyId" lay-filter="storeyId" id="storeyId"><option value="">请选择楼层</option></select></div><div class="layui-form-mid">-</div><div class="layui-input-inline"><select name="dormitoryId" lay-filter="dormitoryId" id="dormitoryId"><option value="">请选择宿舍</option></select></div><div class="layui-form-mid">-</div><div class="layui-input-inline"><select name="studentId" lay-filter="studentId" id="studentId"><option value="">请选择学生</option></select></div></div><div class="layui-form-item"><label class="layui-form-label required">来访姓名</label><div class="layui-input-block"><input type="text" name="visitor" id="visitor" lay-verify="required" lay-reqtext="来访姓名不能为空" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label required">手机号码</label><div class="layui-input-block"><input type="text" name="phone" id="phone" lay-verify="required" lay-reqtext="手机号码不能为空" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-block"><select name="sex" lay-verify="required"><option value="1">男</option><option value="0">女</option></select></div></div><div class="layui-form-item"><label class="layui-form-label required">身份证号</label><div class="layui-input-block"><input type="text" name="idcard" id="idcard" lay-verify="required" lay-reqtext="身份证号不能为空" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label required">来访时间</label><div class="layui-input-block"><input type="text" name="visitTime" id="visitTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label required">离开时间</label><div class="layui-input-block"><input type="text" name="leaveTime" id="leaveTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"></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','ztree','laydate'], function () {let form = layui.form,layer = layui.layer,ztree = layui.ztree,laydate = layui.laydate,axios = layui.axios,$ = layui.$;/*** 初始化表单，要加上，不然刷新部分组件可能会不加载*///日期laydate.render({elem: '#visitTime'});laydate.render({elem: '#leaveTime'});// 当前弹出层，防止ID被覆盖let parentIndex = layer.index;axios.post('building/query',{}).then(function (response) {response.data.forEach(item=>{let option = `<option value="${item.id}">${item.name}</option>`$('#buildingId').append(option);})form.render();});form.on('select(buildingId)', function(data){axios.post('storey/query',{buildingId:data.value,limit:1000}).then(function (response) {$('#storeyId').empty();$('#storeyId').append('<option value="">请选择楼层</option>');response.data.forEach(item=>{let option = `<option value="${item.id}">${item.name}</option>`$('#storeyId').append(option);})form.render();});});form.on('select(storeyId)', function(data){axios.post('dormitory/query',{storeyId:data.value,limit:1000}).then(function (response) {$('#dormitoryId').empty();$('#dormitoryId').append('<option value="">请选择宿舍</option>');response.data.forEach(item=>{let option = `<option value="${item.id}">${item.no}</option>`$('#dormitoryId').append(option);})form.render();});});form.on('select(dormitoryId)', function(data){axios.post('dormitoryStudent/query',{dormitoryId:data.value,limit:1000}).then(function (response) {$('#studentId').empty();$('#studentId').append('<option value="">请选择学生</option>');response.data.forEach(item=>{let option = `<option value="${item.student.id}">${item.student.name}</option>`$('#studentId').append(option);})form.render();});});//监听提交form.on('submit(saveBtn)', function (data) {axios.post('visit/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>
update页面
<div class="layuimini-main"><div class="layui-form layuimini-form" lay-filter="updateForm"><div class="layui-form-item"><label class="layui-form-label required">来访姓名</label><div class="layui-input-block"><input type="hidden" name="id" id="id"><input type="text" name="visitor" id="visitor" lay-verify="required" lay-reqtext="来访姓名不能为空" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label required">手机号码</label><div class="layui-input-block"><input type="text" name="phone" id="phone" lay-verify="required" lay-reqtext="手机号码不能为空" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-block"><select name="sex" lay-verify="required"><option value="1">男</option><option value="0">女</option></select></div></div><div class="layui-form-item"><label class="layui-form-label required">身份证号</label><div class="layui-input-block"><input type="text" name="idcard" id="idcard" lay-verify="required" lay-reqtext="身份证号不能为空" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label required">来访时间</label><div class="layui-input-block"><input type="text" name="visitTime" id="visitTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label required">离开时间</label><div class="layui-input-block"><input type="text" name="leaveTime" id="leaveTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"></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','ztree','laydate'], function () {let form = layui.form,layer = layui.layer,ztree = layui.ztree,laydate = layui.laydate,axios = layui.axios,$ = layui.$;/*** 初始化表单，要加上，不然刷新部分组件可能会不加载*///日期laydate.render({elem: '#visitTime'});laydate.render({elem: '#leaveTime'});// 当前弹出层，防止ID被覆盖let parentIndex = layer.index;//监听提交form.on('submit(saveBtn)', function (data) {axios.post('visit/update',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>
表单赋值
改进VisitController中的update方法
四、公告管理
1.后端的提前准备工作
在数据库中写入数据
改正NoticeMapper.xml中代码生成器产生的小纰漏
修改NoticeMapper.xml中creat_time的值
在NoticeMapper.xml中添加根据楼宇id查询的sql语句
在NoticeMapper接口中添加对应的方法
在NoticeReceiveMapper.xml中添加根据公告id删除的sql语句
在NoticeReceiveMapper接口中添加对应的方法
完善NoticeService中的create方法、updateSelective方法和两个delete方法，并添加queryByBuildingId方法
在Notice中添加属性user和buildingIds以及对应的set/get方法
改进NoticeController中的create和query方法
2.前端页面
创建notice包结构
list页面
<div class="layuimini-container layuimini-page-anim"><div class="layuimini-main"><div style="margin: 10px 10px 10px 10px"><form class="layui-form layui-form-pane" action=""><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">标题</label><div class="layui-input-inline"><input type="text" name="title" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button></div></div></form></div><script type="text/html" id="toolbarDemo"><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-delete-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></script><table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table></div></div><script>layui.use(['form', 'table','miniPage','miniAdmin','form','element','axios'], function () {var $ = layui.jquery,form = layui.form,table = layui.table,axios = layui.axios,form = layui.form,miniAdmin = layui.miniAdmin,miniPage = layui.miniPage;table.render({elem: '#currentTableId',method:'post',url: 'notice/query',toolbar: '#toolbarDemo',defaultToolbar: ['filter', 'exports', 'print'],cols: [[{type: "checkbox", width: 50},{field: 'id', width: 80, title: 'ID'},{field: 'title',title: '标题'},{field: 'userId',title: '发布者',templet:'<div>{{d.user.name}}</div>'},{field: 'createTime',title: '发布时间'},]],page: true,skin: 'line'});window.reload = function(){table.reload('currentTableId');}// 监听搜索操作form.on('submit(data-search-btn)', function (data) {var result = JSON.stringify(data.field);//执行搜索重载table.reload('currentTableId', {where: data.field}, 'data');return false;});/*** toolbar事件监听*/table.on('toolbar(currentTableFilter)', function (obj) {if (obj.event === 'add') {// 监听添加操作let content = miniPage.getHrefContent('notice/add.html');let openWH = miniPage.getOpenWidthHeight();let index = layer.open({title: '添加',type: 1,shade: 0.2,maxmin:true,shadeClose: true,area: [openWH[0] + 'px', openWH[1] + 'px'],offset: [openWH[2] + 'px', openWH[3] + 'px'],content: content});$(window).on("resize", function () {layer.full(index);});} else if (obj.event === 'update') {//修改操作let data = table.checkStatus('currentTableId').data;if(data.length!=1){layer.msg("请选择一条记录修改");}else{let content = miniPage.getHrefContent('notice/update.html');let openWH = miniPage.getOpenWidthHeight();let index = layer.open({title: '修改',type: 1,shade: 0.2,maxmin:true,shadeClose: true,area: [openWH[0] + 'px', openWH[1] + 'px'],offset: [openWH[2] + 'px', openWH[3] + 'px'],content: content});$(window).on("resize", function () {layer.full(index);});}}else if (obj.event === 'delete') {//删除操作let data = table.checkStatus('currentTableId').data;if(data.length==0){layer.msg("请选择要删除的数据");}else{layer.confirm('确定要删除吗', function (index) {//异步删除 map\filter\some\everylet arr = data.map(item=>item.id);axios.get('notice/delete?ids='+arr.join(",")).then(function (response) {table.reload('currentTableId');layer.msg(response.msg);}).catch(function (error) {layer.msg(error);});layer.close(index);});}}});});</script>
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="title" id="title" lay-verify="required" lay-reqtext="标题不能为空" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label required">内容</label><div class="layui-input-block"><textarea placeholder="请输入内容" name="content" id="content" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><label class="layui-form-label required">接收范围</label><div class="layui-input-block building-add"></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','ztree','laydate'], function () {let form = layui.form,layer = layui.layer,ztree = layui.ztree,laydate = layui.laydate,axios = layui.axios,$ = layui.$;/*** 初始化表单，要加上，不然刷新部分组件可能会不加载*///日期laydate.render({elem: '#visitTime'});laydate.render({elem: '#leaveTime'});// 当前弹出层，防止ID被覆盖let parentIndex = layer.index;axios.post('building/query',{}).then(function (response) {response.data.forEach(item=>{let option = `<input type="checkbox" lay-skin="primary" name="buildingId" value="${item.id}">${item.name}<br/>`$('.building-add').append(option);})form.render();});//监听提交form.on('submit(saveBtn)', function (data) {let param = {};param.title = data.field.title;param.content = data.field.content;let arr = $('.building-add input[type="checkbox"]');let buildingIdArr = [];for(let i=0;i<arr.length;i++){if(arr[i].checked){buildingIdArr.push(arr[i].value)}}param.buildingIds = buildingIdArr;axios.post('notice/create',param).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>
update页面
<div class="layuimini-main"><div class="layui-form layuimini-form" lay-filter="updateForm"><div class="layui-form-item"><label class="layui-form-label required">标题</label><div class="layui-input-block"><input type="hidden" name="id" id="id"><input type="text" name="title" id="title" lay-verify="required" lay-reqtext="标题不能为空" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label required">内容</label><div class="layui-input-block"><textarea placeholder="请输入内容" name="content" id="content" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><label class="layui-form-label required">接收范围</label><div class="layui-input-block building-update"></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','ztree','laydate'], function () {let form = layui.form,layer = layui.layer,ztree = layui.ztree,laydate = layui.laydate,axios = layui.axios,$ = layui.$;/*** 初始化表单，要加上，不然刷新部分组件可能会不加载*///日期laydate.render({elem: '#visitTime'});laydate.render({elem: '#leaveTime'});// 当前弹出层，防止ID被覆盖let parentIndex = layer.index;function loadReceive(){return axios.post('noticeReceive/query',{noticeId:$('#id').val()});}function loadBuilding(){return axios.post('building/query',{});}axios.all([loadReceive(), loadBuilding()]).then(axios.spread(function (response, response2) {let arr = response.data.map(item=>item.buildingId);response2.data.forEach(item=>{let option;if(arr.some(val=>val == item.id)){option = `<input type="checkbox" checked lay-skin="primary" name="buildingId" value="${item.id}">${item.name}<br/>`}else{option = `<input type="checkbox" lay-skin="primary" name="buildingId" value="${item.id}">${item.name}<br/>`}$('.building-update').append(option);})form.render();}));//监听提交form.on('submit(saveBtn)', function (data) {let param = {};param.id = data.field.id;param.title = data.field.title;param.content = data.field.content;let arr = $('.building-update input[type="checkbox"]');let buildingIdArr = [];for(let i=0;i<arr.length;i++){if(arr[i].checked){buildingIdArr.push(arr[i].value)}}param.buildingIds = buildingIdArr;axios.post('notice/update',param).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>
表单赋值
改进NoticeController中的update方法
总结
最近涉及了很多实体类添加属性以及完善query方法的操作，其实就是为了将不同表的字段关联起来第十一章预计三天内更新，涉及搭建学生系统
