更新代码

2025-05-19 17:34:40 +08:00
parent 1587524031
commit 7bd072add9
32 changed files with 1465 additions and 139 deletions
@@ -0,0 +1,204 @@
+{include file="public/header" /}
+<div class="config-container">
+    <!-- 页面头部样式 -->
+    <div class="config-header" style="display: flex;flex-direction: column;flex-wrap: wrap;align-items: flex-start;">
+        <div class="maintitle">
+            <i class="layui-icon layui-icon-list"></i>
+            <span>文章列表</span>
+        </div>
+        <div style="display: flex;align-items: flex-start;flex-direction: column;gap: 15px;margin-bottom: 10px;">
+            <div class="shaixuan">
+                <label>筛选：</label>
+                <div class="layui-form" style="display: flex; gap: 10px;">
+                    <div class="layui-input-inline">
+                        <select id="categoryFilter" lay-filter="categoryFilter" lay-verify="">
+                            <option value="">全部分类</option>
+                            {volist name="categories" id="category"}
+                            <optgroup label="{$category.name}">
+                                {volist name="category.children" id="subCategory"}
+                                <option value="{$subCategory.id}">{$subCategory.name}</option>
+                                {/volist}
+                            </optgroup>
+                            {/volist}
+                        </select>
+                    </div>
+                    <div class="layui-input-inline">
+                        <input type="text" id="titleSearch" placeholder="搜索标题" class="layui-input">
+                    </div>
+                    <div class="layui-input-inline">
+                        <input type="text" id="authorSearch" placeholder="搜索作者" class="layui-input">
+                    </div>
+                    <button type="button" class="layui-btn layui-btn-normal" onclick="doSearch()">
+                        <i class="layui-icon layui-icon-search"></i>搜索
+                    </button>
+                    <button type="button" class="layui-btn layui-btn-primary layui-border-blue" onclick="doRefresh()">
+                        <i class="layui-icon layui-icon-refresh"></i>重置
+                    </button>
+                </div>
+            </div>
+            <div>
+                <button type="button" class="layui-btn layui-btn-normal" onclick="add()">
+                    <i class="layui-icon layui-icon-add-1"></i>添加文章
+                </button>
+                <button type="button" class="layui-btn layui-btn-primary layui-border-blue" onclick="refresh()">
+                    <i class="layui-icon layui-icon-refresh"></i>刷新
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <table id="articleTable" lay-filter="articleTable"></table>
+</div>
+
+<script type="text/html" id="imageTemplate">
+    {{#  if(d.image){ }}
+    <img src="{{ d.image }}" style="max-width: 50px; max-height: 50px;">
+    {{#  } }}
+</script>
+
+<script type="text/html" id="statusTemplate">
+    {{#  if(d.status === 0){ }}
+    <span style="color:red;">草稿</span>
+    {{#  } else if(d.status === 1){ }}
+    <span style="color:orange;">待审核</span>
+    {{#  } else if(d.status === 2){ }}
+    <span style="color:green;">已发布</span>
+    {{#  } else if(d.status === 3){ }}
+    <span style="color:gray;">隐藏</span>
+    {{#  } }}
+</script>
+
+<script type="text/html" id="operationBar">
+    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
+        <i class="layui-icon layui-icon-edit"></i>编辑
+    </button>
+    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">
+        <i class="layui-icon layui-icon-delete"></i>删除
+    </button>
+</script>
+
+<script type="text/javascript">
+    layui.use(['layer', 'form', 'table'], function () {
+        var layer = layui.layer;
+        var $ = layui.jquery;
+        var form = layui.form;
+        var table = layui.table;
+
+        // 初始化表格
+        table.render({
+            elem: '#articleTable',
+            url: '/admin/article/articlelist',
+            method: 'post',
+            cols: [[
+                { field: 'id', title: 'ID', align: 'center', width: 80 },
+                { field: 'title', title: '标题' },
+                { field: 'cate', title: '分类', align: 'center', width: 180 },
+                { field: 'image', title: '封面', templet: '#imageTemplate', align: 'center', width: 180 },
+                { field: 'author', title: '作者', align: 'center', width: 120 },
+                { field: 'status', title: '状态', templet: '#statusTemplate', align: 'center', width: 80 },
+                { field: 'publishdate', title: '发布时间', align: 'center', width: 180 },
+                { title: '操作', toolbar: '#operationBar', align: 'center', width: 150 }
+            ]],
+            page: true,
+            limit: 10,
+            limits: [10, 50, 100],
+            //height: 'full-220'
+        });
+
+        // 监听工具条事件
+        table.on('tool(articleTable)', function (obj) {
+            var data = obj.data;
+            if (obj.event === 'edit') {
+                edit(data.id);
+            } else if (obj.event === 'del') {
+                del(data.id);
+            }
+        });
+
+        // 监听分类筛选变化
+        form.on('select(categoryFilter)', function (data) {
+            filterByCategory(data.value);
+        });
+    });
+
+    function filterByCategory(categoryId) {
+        reloadTable();
+    }
+
+    function doSearch() {
+        var titleKeyword = $('#titleSearch').val().trim();
+        var authorKeyword = $('#authorSearch').val().trim();
+
+        if (!titleKeyword && !authorKeyword && !$('#categoryFilter').val()) {
+            layer.msg('请输入搜索条件', { icon: 0 });
+            return;
+        }
+
+        reloadTable();
+    }
+
+    function doRefresh() {
+        // 清空搜索条件
+        $('#titleSearch').val('');
+        $('#authorSearch').val('');
+        $('#categoryFilter').val('');
+        layui.form.render('select'); // 重新渲染select
+
+        // 重新加载表格，不带任何筛选条件
+        layui.table.reload('articleTable', {
+            where: {},
+            page: {
+                curr: 1
+            }
+        });
+
+        layer.msg('已重置', { icon: 1 });
+    }
+
+    function reloadTable() {
+        var categoryId = $('#categoryFilter').val();
+        var categoryName = categoryId ? $('#categoryFilter option[value="' + categoryId + '"]').text() : '';
+        var titleKeyword = $('#titleSearch').val().trim();
+        var authorKeyword = $('#authorSearch').val().trim();
+
+        layui.table.reload('articleTable', {
+            where: {
+                category: categoryName,
+                title: titleKeyword,
+                author: authorKeyword
+            },
+            page: {
+                curr: 1
+            }
+        });
+    }
+
+    function add() {
+        window.location.href = '/admin/article/add';
+    }
+
+    function edit(id) {
+        window.location.href = '/admin/article/edit?id=' + id;
+    }
+
+    function del(id) {
+        layer.confirm('确定要删除该文章吗？', {
+            btn: ['确定', '取消']
+        }, function () {
+            $.post('/admin/article/delete', { id: id }, function (res) {
+                if (res.code == 0) {
+                    layer.msg(res.msg, { icon: 1 });
+                    setTimeout(function () {
+                        layui.table.reload('articleTable');
+                    }, 1000);
+                } else {
+                    layer.msg(res.msg, { icon: 2 });
+                }
+            });
+        });
+    }
+
+    function refresh() {
+        layui.table.reload('articleTable');
+    }
+</script>