【高校宿舍管理系统】第九章寝室编号设置和宿舍初始化以及预选设置

最新推荐文章于 2022-11-08 17:26:45 发布

313YPHU3

最新推荐文章于 2022-11-08 17:26:45 发布

阅读量1.1k

点赞数 1

分类专栏：高校宿舍管理系统文章标签：项目

本文链接：https://blog.csdn.net/qq_45593575/article/details/117517174

版权

高校宿舍管理系统专栏收录该内容

13 篇文章 23 订阅

订阅专栏

第九章寝室编号设置和宿舍初始化以及预选设置

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

前言

这一章将介绍寝室编号设置和宿舍初始化以及预选设置，项目做到这里已经接近尾声了，还剩下四分之一的样子，大概十天之内就能结束。像表格增删改之类的操作，前面几章又讲的非常详细，因此之后这些部分就不再一步一步地写了，既繁琐又没有必要。

一、寝室编号设置

1.数据库写入数据

在这里插入图片描述

2.创建前端文件目录dormitoryset

拷贝dormitory/list.html作为模板，只留下楼宇和楼层
在这里插入图片描述

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div style="margin: 10px" id="building">
        </div>
    </div>
    <div class="layuimini-main" style="width: 250px;position: absolute;left: 0px;">
        <ul class="storey">
        </ul>
    </div>
    <div class="layuimini-main" style="left: 270px;float: right;position: absolute;right:0px">

    </div>
</div>

<style>
    .storey{
        margin: 0px;
        padding: 0px;
    }
    .storey li{
        height: 40px;
        line-height:40px;
        border-bottom: 1px solid #f1f1f1;
        font-size: 16px;
        cursor: pointer;
        padding-left: 50px;
    }

    .storey>li>span{
        float: right;
        margin-right: 10px;
    }
    .storey>li>span>button{
        cursor: pointer;
        color: #00998b;
        background: transparent;
        border: 0px;
        font-size: 20px;
    }

    .storey-bg{
        background-color: #f0f0f0;
        color: #000000;
    }
</style>

<script>
    layui.use(['form', 'table','miniPage','element','axios'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            axios = layui.axios,
            form = layui.form,
            miniPage = layui.miniPage;

        function loadBuilding(){
            axios.post('building/query',{}).then(function (response) {
                response.data.forEach(item=>{
                    let btn = '<button class="layui-btn layui-btn-primary layui-btn-radius building-btn" key='+item.id+'>'+item.name+'</button>';
                    let btnObj = $(btn);
                    btnObj.click(function () {
                        $(this).siblings().addClass('layui-btn-primary');
                        $(this).removeClass('layui-btn-primary');
                        loadStorey($(this).attr("key"));
                    });
                    $('#building').append(btnObj);
                })
                $('#building button:first').trigger('click');
            }).catch(function (error) {
                layer.msg(error);
            });
        }
        loadBuilding();

        //加载楼层
        function loadStorey(buildingId){
            axios.post('storey/query',{"buildingId":buildingId}).then(function (response) {
                $('.storey').empty();
                response.data.forEach(item=>{
                    let btn = `<li key="${item.id}">${item.name}</li>`;
                    let btnObj = $(btn);
                    btnObj.click(function () {
                        $(this).siblings().removeClass('storey-bg');
                        btnObj.addClass('storey-bg');
                    });
                    $('.storey').append(btnObj);
                })
                $('.storey li:first').trigger('click');
            }).catch(function (error) {
                layer.msg(error);
            });
        }

    });
</script>

html
在这里插入图片描述

加载DormitorySet表格、渲染表格、toolbar事件监听、在loadStorey中调用loadDormitorySet方法
在这里插入图片描述

<script>
    layui.use(['form', 'table','miniPage','element','axios'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            axios = layui.axios,
            form = layui.form,
            miniPage = layui.miniPage;

        function loadBuilding(){
            axios.post('building/query',{}).then(function (response) {
                response.data.forEach(item=>{
                    let btn = '<button class="layui-btn layui-btn-primary layui-btn-radius building-btn" key='+item.id+'>'+item.name+'</button>';
                    let btnObj = $(btn);
                    btnObj.click(function () {
                        $(this).siblings().addClass('layui-btn-primary');
                        $(this).removeClass('layui-btn-primary');
                        loadStorey($(this).attr("key"));
                    });
                    $('#building').append(btnObj);
                })
                $('#building button:first').trigger('click');
            }).catch(function (error) {
                layer.msg(error);
            });
        }
        loadBuilding();

        //加载楼层
        function loadStorey(buildingId){
            axios.post('storey/query',{"buildingId":buildingId}).then(function (response) {
                $('.storey').empty();
                response.data.forEach(item=>{
                    let btn = `<li key="${item.id}">${item.name}</li>`;
                    let btnObj = $(btn);
                    btnObj.click(function () {
                        $(this).siblings().removeClass('storey-bg');
                        btnObj.addClass('storey-bg');
                        loadDormitorySet(buildingId,$(this).attr("key"));
                    });
                    $('.storey').append(btnObj);
                })
                $('.storey li:first').trigger('click');
            }).catch(function (error) {
                layer.msg(error);
            });
        }

        function loadDormitorySet(buildingId,storeyId){
            table.render({
                elem: '#currentTableId',
                method:'post',
                url: 'dormitorySet/query',
                data:{buildingId:buildingId,storeyId:storeyId},
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print'],
                cols: [[
                    {type: "checkbox", width: 50},
                    {field: 'id', width: 80, title: 'ID'},
                    {field: 'prefix',title: '前缀'},
                    {field: 'start',title: '起始值'},
                    {field: 'end',title: '结束值'},
                    {field: 'capacity', title: '容量'},
                ]],
                page: true,
                skin: 'line'
            });
        }

        window.reload = function(){
            table.reload('currentTableId');
        }

        /**
         * toolbar事件监听
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {   // 监听添加操作
                let content = miniPage.getHrefContent('dormitorySet/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('dormitorySet/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('dormitorySet/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" lay-filter="setAddForm">
        <div class="layui-form-item">
            <label class="layui-form-label">前缀</label>
            <div class="layui-input-block">
                <input type="hidden" name="buildingId" id="buildingId">
                <input type="hidden" name="storeyId" id="storeyId">
                <input type="text" name="prefix"  placeholder="请输入前缀" value="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
                <label class="layui-form-label required">开始-结束值</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="start" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="end" 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="number" name="capacity" placeholder="请输入容量" class="layui-input">
            </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'], function () {
        let form = layui.form,
            layer = layui.layer,
            axios = layui.axios,
            $ = layui.$;

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

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

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            axios.post('dormitorySet/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="setUpdateForm">
        <div class="layui-form-item">
            <label class="layui-form-label">前缀</label>
            <div class="layui-input-block">
                <input type="hidden" name="id" id="id">
                <input type="hidden" name="buildingId" id="buildingId">
                <input type="hidden" name="storeyId" id="storeyId">
                <input type="text" name="prefix"  placeholder="请输入前缀" value="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">开始-结束值</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="number" name="start" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="number" name="end" 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="number" name="capacity" placeholder="请输入容量" class="layui-input">
            </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'], function () {
        let form = layui.form,
            layer = layui.layer,
            axios = layui.axios,
            $ = layui.$;

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

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

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            axios.post('dormitorySet/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>

表单赋值
在这里插入图片描述

二、宿舍初始化

1.前端页面

在dormitoryset/list.html的toolbar上添加初始化按钮
在这里插入图片描述

监听初始化操作
在这里插入图片描述

2.后端方法

在DormitoryService中添加寝室初始化的方法
在这里插入图片描述

在这里插入图片描述

在BedMapper.xml中添加按寝室id删除床位的sql语句
在这里插入图片描述

在BedMapper接口中添加按寝室id删除床位的接口方法
在这里插入图片描述

在DormitoryMapper.xml中添加按楼宇id和楼层id删除寝室的sql语句
在这里插入图片描述

在DormitoryMapper接口中添加按楼宇id和楼层id删除寝室的接口方法
在这里插入图片描述

在DormitoryService寝室初始化方法中调用按楼宇id和楼层id删除寝室和按寝室id删除床位的方法
在这里插入图片描述

在DormitoryController中调用寝室初始化的方法
在这里插入图片描述

三、预选设置

1.list与add页面

数据库写入数据
在这里插入图片描述

前端创建selection包结构
在这里插入图片描述

list页面

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <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>
                <button class="layui-btn layui-btn-sm layui-btn-normal data-delete-btn" lay-event="distribute">
                    <i class="layui-icon layui-icon-edit"></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: 'selection/query',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 80, title: 'ID'},
                {field: 'name',title: '名称'},
                {field: 'startTime', title: '开始时间'},
                {field: 'endTime', title: '结束时间'},
                {field: 'remark',title: '备注'}
            ]],
            page: true,
            skin: 'line'
        });

        window.reload = function(){
            table.reload('currentTableId');
        }

        /**
         * toolbar事件监听
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {   // 监听添加操作
                let content = miniPage.getHrefContent('selection/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('selection/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 === 'distribute') {  //分配操作
                let data = table.checkStatus('currentTableId').data;
                if(data.length!=1){
                    layer.msg("请选择一条记录操作");
                }else{
                    let content = miniPage.getHrefContent('selection/distribute.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.clazzData = function(){
                        return data[0];
                    }

                    $(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('selection/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="name" lay-verify="required" lay-reqtext="名称不能为空" placeholder="请输入名称" value="" 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="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">
            <label class="layui-form-label required">班级</label>
            <div class="layui-input-block">
                <input type="hidden" name="clazzId" id="clazzId" lay-verify="required"  class="layui-input">
                <input type="text" name="clazzName" readonly id="clazzName" lay-verify="required" lay-reqtext="班级不能为空" placeholder="请选择班级" value="" 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','laydate','selectOrg'], function () {
        let form = layui.form,
            layer = layui.layer,
            axios = layui.axios,
            laydate = layui.laydate,
            selectOrg = layui.selectOrg,
            $ = layui.$;

        //日期
        laydate.render({
            elem: '#startTime'
        });
        laydate.render({
            elem: '#endTime'
        });

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

        selectOrg.render({
            elem:'#clazzName',
            selected:[],
            checked:true,
            done:function (data) {
                let nameArr = data.map(item=>item.name);
                $('#clazzName').val(nameArr.join(','));
                let idArr = data.map(item=>item.id);
                $('#clazzId').val(idArr);
            }
        });

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

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let param = data.field;
            if(data.field.clazzId){
                param.clazzIds =data.field.clazzId.split(",");
            }
            axios.post('selection/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>

Selection中添加属性clazzIds以及对应的set/get方法
在这里插入图片描述

完善SelectionService中的create方法
在这里插入图片描述

配置时间显示格式
在这里插入图片描述

2.update页面

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="name" lay-verify="required" lay-reqtext="名称不能为空" placeholder="请输入名称" value="" 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="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">
            <label class="layui-form-label required">班级</label>
            <div class="layui-input-block">
                <input type="hidden" name="clazzId" id="clazzId" lay-verify="required"  class="layui-input">
                <input type="text" name="clazzName" readonly id="clazzName" lay-verify="required" lay-reqtext="班级不能为空" placeholder="请选择班级" value="" 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','laydate','selectOrg'], function () {
        let form = layui.form,
            layer = layui.layer,
            axios = layui.axios,
            laydate = layui.laydate,
            selectOrg = layui.selectOrg,
            $ = layui.$;

        //日期
        laydate.render({
            elem: '#startTime'
        });
        laydate.render({
            elem: '#endTime'
        });

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

        selectOrg.render({
            elem:'#clazzName',
            selected:[],
            checked:true,
            done:function (data) {
                let nameArr = data.map(item=>item.name);
                $('#clazzName').val(nameArr.join(','));
                let idArr = data.map(item=>item.id);
                $('#clazzId').val(idArr);
            }
        });

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

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let param = data.field;
            if(data.field.clazzId){
                param.clazzIds =data.field.clazzId.split(",");
            }
            axios.post('selection/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>

Selection中添加属性clazzes以及对应的set/get方法
在这里插入图片描述

在OrgMapper.xml中添加根据预选分配的id查找班级的sql语句
在这里插入图片描述

在OrgMapper接口中添加对应的方法
在这里插入图片描述

在OrgService中添加对应的方法
在这里插入图片描述

完善SelectionController中的query方法
在这里插入图片描述

在这里插入图片描述

表单赋值，并使班级下拉菜单对应班级为勾选状态
在这里插入图片描述

在这里插入图片描述

在SelectionJoinerMapper.xml中添加根据预选分配的id删除预选分配的sql语句
在这里插入图片描述

在SelectionJoinerMapper接口中添加对应的方法
在这里插入图片描述

完善SelectionService中的update方法
在这里插入图片描述

3.distribute页面

distribute页面

<div class="layuimini-main">
    <div class="layuimini-main" style="width: 250px;position: absolute;left: 0px;">
        <ul class="clazz"></ul>
    </div>
    <div class="layuimini-main" style="left: 270px;float: right;position: absolute;right:0px">
        <div style="margin: 10px 10px 30px 10px" id="building">
        </div>
        <ul class="dormitory">
        </ul>

        <div style="clear: both;padding-top: 30px;padding-left: 50px">
            <button class="layui-btn layui-btn-normal" id="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<style>
    .clazz{
        margin: 0px;
        padding: 0px;
    }
    .clazz li{
        height: 40px;
        line-height:40px;
        border-bottom: 1px solid #f1f1f1;
        font-size: 16px;
        cursor: pointer;
        padding-left: 50px;
    }

    .clazz>li>span{
        float: right;
        margin-right: 10px;
    }
    .clazz>li>span>button{
        cursor: pointer;
        color: #00998b;
        background: transparent;
        border: 0px;
        font-size: 20px;
    }

    .clazz-bg{
        background-color: #f0f0f0;
        color: #000000;
    }
    .dormitory{
        margin: 0px;
        padding: 0px;
    }
    .dormitory li{
        height: 30px;
        line-height:30px;
        border-bottom: 1px solid #f1f1f1;
        font-size: 16px;
        padding-left: 50px;
        float: left;
        width: 100px;
    }
</style>
<script>
    layui.use(['form', 'table','axios','laydate','selectOrg'], function () {
        let layer = layui.layer,
            axios = layui.axios,
            $ = layui.$;

        let _buildingId;
        let _clazzId;
        let clazzData = window.clazzData();
        clazzData.clazzes.forEach(item=>{
            let html = `<li key="${item.id}">${item.name}</li>`;
            let htmlObj = $(html);
            htmlObj.click(function () {
                $(this).siblings().removeClass('clazz-bg');
                $(this).addClass('clazz-bg');
                _clazzId = $(this).attr("key");
                loadDormitory(_buildingId);
            });
            $('.clazz').append(htmlObj);
            $('.clazz li:first').trigger('click');
        })

        function loadBuilding(){
            axios.post('building/query',{}).then(function (response) {
                response.data.forEach(item=>{
                    let btn = '<button class="layui-btn layui-btn-primary layui-btn-radius building-btn" key='+item.id+'>'+item.name+'</button>';
                    let btnObj = $(btn);
                    btnObj.click(function () {
                        $(this).siblings().addClass('layui-btn-primary');
                        $(this).removeClass('layui-btn-primary');
                        loadDormitory($(this).attr("key"));
                    });
                    $('#building').append(btnObj);
                })
                $('#building button:first').trigger('click');
            }).catch(function (error) {
                layer.msg(error);
            });
        }
        loadBuilding();

        function dormitory(){
            return axios.post('dormitory/query',{buildingId:_buildingId,limit:10000});
        }
        function selection(){
            return axios.post('selectionDormitory/query',{clazzId:_clazzId,limit:10000});
        }

        function loadDormitory(buildingId){
            _buildingId = buildingId;
            axios.all([dormitory(), selection()]).then(axios.spread(function(response, response2) {
                let seletionArr = response2.data.map(item=>item.dormitoryId);
                $('.dormitory').empty();
                response.data.forEach(item=>{
                    let flag = seletionArr.some(v=>v==item.id);
                    let obj;
                    if(flag){
                        obj = `<li><input type="checkbox" checked name="dormitoryId" value="${item.id}" style="cursor: pointer">&nbsp;&nbsp;${item.no}</li>`
                    }else{
                        obj = `<li><input type="checkbox" name="dormitoryId" value="${item.id}" style="cursor: pointer">&nbsp;&nbsp;${item.no}</li>`
                    }
                    $('.dormitory').append(obj);
                })
            })).catch(function (error) {
                console.log(error);
            })

        }

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

        $('#saveBtn').click(function () {
            if(!_clazzId){
                layer.msg("请选择班级");
                return;
            }
            let arr = $('.dormitory input[type="checkbox"]:checked');
            let str = '';
            for(let i=0;i<arr.length;i++){
                str+=arr[i].value+",";
            }
            console.log(str)
            let param = {"clazzId":_clazzId,"dormitoryIds":str}
            console.log(param)
            axios.post('selectionDormitory/create',param).then(function(response){
                if(response.code == 200){
                    layer.msg(response.msg);
                    window.reload();
                }
            }).catch(function (error) {
                layer.msg(error);
            });
        });

    });
</script>