ruankao/app/admin/view/tk/category.php

{include file="public/header" /}

<div class="layui-container" style="margin-top:30px;">
    <div class="layui-row">
        <div class="layui-col-md12">
            <button class="layui-btn layui-btn-normal mb-3" id="addCategoryBtn">新增科目</button>
            <table class="layui-hide" id="categoryTable" lay-filter="categoryTableFilter"></table>
        </div>
    </div>
</div>

<!-- 分类表格操作栏模板 -->
<script type="text/html" id="categoryTableBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 新增/编辑分类弹窗模板 -->
<script type="text/html" id="categoryFormTpl">
    <form class="layui-form" lay-filter="categoryForm">
        <div style="display: flex;padding:20px;flex-direction: column;">
        <div class="layui-form-item">
            <label class="layui-form-label">科目名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required placeholder="请输入科目名称" 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="level" class="layui-input">
                    <option value="0">无</option>
                    <option value="1">初级</option>
                    <option value="2">中级</option>
                    <option value="3">高级</option>
                    <option value="4">特级</option>
                </select>
            </div>
        </div>
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-bg-blue" lay-submit lay-filter="submitCategory" type="submit">提交</button>
            </div>
        </div>
        </div>
    </form>
</script>

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

        // 渲染表格
        table.render({
            elem: '#categoryTable',
            url: '/admin/tk/category',
            method: 'post',
            page: true,
            cols: [[
                { field: 'id', title: 'ID', width: 80, sort: true },
                { field: 'name', title: '科目名称' },
                {
                    field: 'level',
                    title: '科目等级',
                    templet: function (d) {
                        var levelMap = {
                            1: '初级',
                            2: '中级',
                            3: '高级',
                            4: '特级'
                        };
                        return levelMap[d.level] || '无';
                    }
                },
                { fixed: 'right', title: '操作', toolbar: '#categoryTableBar', width: 150 }
            ]],
            page: true,
        });

        // 新增分类
        $('#addCategoryBtn').on('click', function () {
            layer.open({
                type: 1,
                title: '新增分类',
                area: ['800px', '600px'],
                content: $('#categoryFormTpl').html(),
                success: function (layero, index) {
                    form.render();
                    form.on('submit(submitCategory)', function (data) {
                        $.post('/admin/tk/categoryadd', data.field, function (res) {
                            if (res.code === 0) {
                                layer.msg('新增成功');
                                layer.close(index);
                                table.reload('categoryTable');
                            } else {
                                layer.msg(res.msg || '新增失败');
                            }
                        }, 'json');
                        return false;
                    });
                }
            });
        });

        // 表格操作事件
        table.on('tool(categoryTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layer.open({
                    type: 1,
                    title: '编辑分类',
                    area: ['400px', '250px'],
                    content: $('#categoryFormTpl').html(),
                    success: function (layero, index) {
                        form.val('categoryForm', data);
                        form.render();
                        form.on('submit(submitCategory)', function (formData) {
                            $.post('/admin/tk/category/edit', formData.field, function (res) {
                                if (res.code === 0) {
                                    layer.msg('编辑成功');
                                    layer.close(index);
                                    table.reload('categoryTable');
                                } else {
                                    layer.msg(res.msg || '编辑失败');
                                }
                            }, 'json');
                            return false;
                        });
                    }
                });
            } else if (obj.event === 'del') {
                layer.confirm('确定删除该分类吗？', function (index) {
                    $.post('/admin/tk/category/delete', { id: data.id }, function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功');
                            table.reload('categoryTable');
                        } else {
                            layer.msg(res.msg || '删除失败');
                        }
                    }, 'json');
                    layer.close(index);
                });
            }
        });
    });
</script>