spring/yyq/front/page/selection/list.html

<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>
                <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');
        }

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            let 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('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
                    });
                    setFormValue(data[0]);
                    $('#userId2').val(data[0].userId)
                    $(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
                    });
                    /*let clazzIdArr = data.clazzes.map(item=>item.id);
                    let clazzNameArr = data.clazzes.map(item=>item.name);*/
                    window.clazzData = function(){
                        return data[0];
                    }
                    /*data[0].clazzes.forEach(item=>{
                        let html = `<li key="${item.id}">${item.name}</li>`;
                        let htmlObj = $(html);
                        console.log("xxxxxxxxxxxxxxxxxxxxxxxx");
                        htmlObj.click(function () {
                            $(this).siblings().removeClass('clazz-bg');
                            $(this).addClass('clazz-bg');
                        });
                        $('.clazz').append(htmlObj);
                    })*/




                    $(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);
                    });
                }
            }
        });

        function setFormValue(data){
            let clazzIdArr = data.clazzes.map(item=>item.id);
            let clazzNameArr = data.clazzes.map(item=>item.name);
            form.val("updateForm",{
                id:data.id,
                name:data.name,
                startTime:data.startTime,
                endTime:data.endTime,
                remark:data.remark,
                clazzId:clazzIdArr.join(','),
                clazzName:clazzNameArr.join(','),
            })
        }

    });
</script>