【高校宿舍管理系统】第十章 缺勤管理、报修管理、来访人员管理以及公告管理

第十章 缺勤管理、报修管理、来访人员管理以及公告管理

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

---

---

前言

这一章将介绍如何实现缺勤管理、报修管理、来访人员管理以及公告管理

---

一、缺勤管理

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\every
                        let 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\every
                        let 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\every
                        let 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\every
                        let 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方法的操作，其实就是为了将不同表的字段关联起来

第十一章预计三天内更新，涉及搭建学生系统