spring/yyq/front/page/repair/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="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);
                    });
                }
            }
        });

        function setFormValue(data){
            form.val("updateForm",{
                id:data.id,
                dormitoryId:data.dormitoryId,
                startTime:data.startTime,
                endTime:data.endTime,
                remark:data.remark,
            })
        }

    });
</script>