yunzerwebsite/yunzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化后端

Browse Source
This commit is contained in:
hero920103
2025-05-16 13:04:17 +08:00
parent 4f8f621c2c
commit 9df71d0faf
19 changed files with 1835 additions and 694 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/admin/view/article/articlecate.php
+423 -335
View File
@@ -1,324 +1,186 @@
{include file="public/header" /}
<div class="config-container">
<div class="config-header" style="display:flex;justify-content: space-between;">
<div style="display: flex; align-items: center;">
<span>文章分类</span>
<!-- 页面头部 -->
<div class="page-header">
<div class="header-title">
<i class="layui-icon layui-icon-app"></i>
<span>文章分类管理</span>
</div>
<div>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="add()">
<i class="layui-icon layui-icon-add-1"></i>添加
<div class="header-actions">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="add()">
<i class="layui-icon layui-icon-add-1"></i>新增分类
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="refresh()">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="refresh()">
<i class="layui-icon layui-icon-refresh"></i>刷新
</button>
</div>
</div>
<div class="layui-row" style="margin-top: 15px;">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">分类列表</div>
<div class="layui-card-body">
<div id="categoryList"></div>
<!-- 主要内容区 -->
<div class="main-content">
<div class="layui-row layui-col-space20">
<!-- 左侧分类列表 -->
<div class="layui-col-md7">
<div class="layui-card">
<div class="layui-card-header">
<span>分类列表</span>
<small class="text-muted">支持两级分类结构</small>
</div>
<div class="layui-card-body">
<div id="categoryList" class="category-tree"></div>
</div>
</div>
</div>
</div>
<div class="layui-col-md4"">
<div class="layui-card">
<div class="layui-card-header">分类信息</div>
<div class="layui-card-body">
<div id="defaultTip" style="text-align: center; padding: 50px 0; color: #999;">
<i class="layui-icon layui-icon-face-surprised" style="font-size: 30px;"></i>
<p style="margin-top: 10px;">请选择左侧分类</p>
<!-- 右侧分类信息 -->
<div class="layui-col-md5">
<div class="layui-card">
<div class="layui-card-header">
<span>分类信息</span>
</div>
<form class="layui-form" lay-filter="categoryForm" style="display: none;">
<input type="hidden" name="id" id="categoryId">
<div class="layui-form-item">
<label class="layui-form-label">分类名称</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
autocomplete="off" class="layui-input">
</div>
<div class="layui-card-body">
<!-- 默认提示 -->
<div id="defaultTip" class="empty-tip">
<i class="layui-icon layui-icon-face-surprised"></i>
<p>请选择左侧分类或点击新增按钮</p>
</div>
<div class="layui-form-item">
<label class="layui-form-label">父级分类</label>
<div class="layui-input-block">
<select name="cid" lay-verify="required">
<option value="0">顶级分类</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">封面图片</label>
<div class="layui-input-block">
<input type="text" name="image" placeholder="请输入图片地址" autocomplete="off"
class="layui-input" id="imageInput">
<div class="layui-upload" style="margin-top: 20px;">
<div>
<button type="button" class="layui-btn" id="uploadImage">上传图片</button>
<span style="color: #999; margin-left: 10px;">建议尺寸：250px*140px</span>
</div>
<div class="layui-upload-list">
<img class="layui-upload-img" id="imagePreview" style="margin-top: 10px;">
<i class="layui-icon layui-icon-close delete-image"
style="display: none; position: absolute; top: 0; right: 0; cursor: pointer; color: #FF5722;"></i>
</div>
<!-- 分类表单 -->
<form class="layui-form category-form" lay-filter="categoryForm" style="display: none;">
<input type="hidden" name="id" id="categoryId">
<div class="layui-form-item">
<label class="layui-form-label">分类名称</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input type="number" name="sort" value="0" class="layui-input">
<div class="layui-form-item">
<label class="layui-form-label">父级分类</label>
<div class="layui-input-block">
<select name="cid" lay-verify="required">
<option value="0">顶级分类</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="正常" checked>
<input type="radio" name="status" value="0" title="禁用">
<div class="layui-form-item">
<label class="layui-form-label">封面图片</label>
<div class="layui-input-block">
<div class="layui-upload-drag" id="uploadImage">
<i class="layui-icon layui-icon-upload"></i>
<p>点击上传或拖拽图片至此处</p>
<div class="layui-hide" id="uploadPreview">
<hr>
<img src="" alt="封面图片" style="max-width: 100%">
</div>
</div>
<input type="hidden" name="image" id="imageInput">
<div class="layui-form-mid layui-word-aux">建议尺寸：250px * 140px</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="saveCategory">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<button type="button" class="layui-btn layui-btn-danger" id="deleteBtn"
style="display: none;">删除</button>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input type="number" name="sort" value="0" class="layui-input"
placeholder="数字越大越靠前">
</div>
</div>
</div>
</form>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="正常" checked>
<input type="radio" name="status" value="0" title="禁用">
</div>
</div>
<div class="layui-form-item form-actions">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="saveCategory">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<button type="button" class="layui-btn layui-btn-danger" id="deleteBtn"
style="display: none;">删除</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
layui.use(['layer', 'form', 'util', 'upload'], function () {
var layer = layui.layer;
var $ = layui.jquery;
var form = layui.form;
var util = layui.util;
var upload = layui.upload;
// 初始化分类列表
function initCategoryList() {
$.ajax({
url: '/admin/article/articlecate',
type: 'POST',
success: function (res) {
if (res.code === 0) {
var html = '';
res.data.forEach(function (item) {
html += renderCategory(item);
});
$('#categoryList').html(html);
bindEvents();
} else {
layer.msg('获取分类数据失败', { icon: 2 });
}
},
error: function () {
layer.msg('请求失败，请重试', { icon: 2 });
}
});
}
// 渲染分类
function renderCategory(category, level = 0) {
var html = '<div class="category-item" data-id="' + category.id + '">';
html += '<div class="category-header">';
html += '<span class="category-name">' + category.title + '</span>';
html += '<div class="category-actions">';
// 只有一级分类才显示添加按钮
if (level === 0) {
html += '<i class="layui-icon layui-icon-add-1 add-child" title="添加子分类"></i>';
}
html += '</div>';
html += '</div>';
if (category.children && category.children.length > 0) {
html += '<div class="category-children">';
category.children.forEach(function (child) {
html += renderCategory(child, level + 1);
});
html += '</div>';
}
html += '</div>';
return html;
}
// 绑定事件
function bindEvents() {
// 点击分类
$('.category-name').off('click').on('click', function () {
var id = $(this).closest('.category-item').data('id');
loadCategoryInfo(id);
});
// 点击添加子分类
$('.add-child').off('click').on('click', function (e) {
e.stopPropagation();
var id = $(this).closest('.category-item').data('id');
$('#categoryId').val('');
$('select[name="cid"]').val(id);
$('#deleteBtn').hide();
form.render();
});
}
// 加载分类信息
function loadCategoryInfo(id) {
$('#defaultTip').hide();
$('form.layui-form').show();
$.get('/admin/article/cateedit?id=' + id, function (res) {
if (res.code === 0) {
// 更新父级分类选项
var $select = $('select[name="cid"]');
$select.empty();
$select.append('<option value="0">顶级分类</option>');
res.data.parentOptions.forEach(function (item) {
$select.append('<option value="' + item.id + '">' + item.name + '</option>');
});
// 填充表单数据
form.val('categoryForm', res.data.info);
// 显示图片预览
if (res.data.info.image) {
$('#imagePreview').attr('src', res.data.info.image);
$('.delete-image').show();
} else {
$('#imagePreview').attr('src', '');
$('.delete-image').hide();
}
// 显示删除按钮
$('#deleteBtn').show();
// 重新渲染表单
form.render();
}
});
}
// 初始化
initCategoryList();
// 默认显示提示信息
$('#defaultTip').show();
$('form.layui-form').hide();
// 监听表单提交
form.on('submit(saveCategory)', function (data) {
var url = data.field.id ? '/admin/article/cateedit' : '/admin/article/cateadd';
$.post(url, data.field, function (res) {
if (res.code === 0) {
layer.msg(res.msg, { icon: 1 });
initCategoryList();
} else {
layer.msg(res.msg, { icon: 2 });
}
});
return false;
});
// 监听删除按钮点击
$('#deleteBtn').on('click', function () {
var id = $('input[name="id"]').val();
if (!id) return;
layer.confirm('确定要删除该分类吗？', {
btn: ['确定', '取消']
}, function () {
$.post('/admin/article/catedel', { id: id }, function (res) {
if (res.code == 0) {
layer.msg(res.msg, { icon: 1 });
initCategoryList();
// 重置表单
form.val('categoryForm', {
id: '',
name: '',
cid: '0',
image: '',
sort: 0,
status: 1
});
$('#imagePreview').attr('src', '');
$('#deleteBtn').hide();
form.render();
} else {
layer.msg(res.msg, { icon: 2 });
}
});
});
});
// 图片上传
upload.render({
elem: '#uploadImage',
url: '/admin/upload/image', // 替换为实际的上传接口
accept: 'images',
acceptMime: 'image/*',
done: function (res) {
if (res.code === 0) {
$('#imageInput').val(res.data.url);
$('#imagePreview').attr('src', res.data.url);
layer.msg('上传成功');
} else {
layer.msg('上传失败');
}
}
});
// 监听图片输入框变化
$('#imageInput').on('input', function () {
var url = $(this).val();
if (url) {
$('#imagePreview').attr('src', url);
$('.delete-image').show();
} else {
$('#imagePreview').attr('src', '');
$('.delete-image').hide();
}
});
// 监听图片删除按钮点击
$(document).on('click', '.delete-image', function () {
$('#imageInput').val('');
$('#imagePreview').attr('src', '');
$(this).hide();
});
});
function add() {
$('#defaultTip').hide();
$('form.layui-form').show();
// 重置表单
layui.form.val('categoryForm', {
id: '',
name: '',
cid: '0',
image: '',
sort: 0,
status: 1
});
$('#imagePreview').attr('src', '');
$('.delete-image').hide();
$('#deleteBtn').hide();
layui.form.render();
}
function refresh() {
initCategoryList();
}
</script>
<style>
/* 页面整体样式 */
.config-container {
padding: 15px;
background: #f2f2f2;
}
/* 页面头部样式 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding: 10px 15px;
background: #fff;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.header-title {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
}
.header-title .layui-icon {
margin-right: 8px;
font-size: 18px;
}
.header-actions .layui-btn {
margin-left: 8px;
}
/* 主要内容区样式 */
.main-content {
min-height: calc(100vh - 170px);
}
.layui-card {
margin-bottom: 0;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.layui-card-header {
display: flex;
align-items: center;
height: auto;
padding: 12px 15px;
font-size: 15px;
font-weight: 500;
}
.text-muted {
margin-left: 10px;
font-size: 12px;
font-weight: normal;
color: #999;
}
/* 分类树样式 */
.category-tree {
padding: 10px 0;
}
.category-item {
margin: 5px 0;
}
@@ -327,9 +189,10 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
padding: 10px 15px;
background-color: #f8f8f8;
border-radius: 2px;
transition: all 0.3s;
cursor: pointer;
}
@@ -337,67 +200,292 @@
background-color: #f2f2f2;
}
.category-header.active {
background-color: #e6f7ff;
border-right: 3px solid #1890ff;
}
.category-name {
flex: 1;
font-size: 14px;
}
.category-actions {
display: none;
/* opacity: 0; */
transition: opacity 0.3s;
}
.category-header:hover .category-actions {
display: block;
opacity: 1;
}
.category-children {
margin-left: 20px;
padding-left: 10px;
border-left: 1px solid #e6e6e6;
padding-left: 15px;
border-left: 1px dashed #e6e6e6;
}
.add-child {
color: #1E9FFF;
font-size: 14px;
padding: 3px 8px;
font-size: 12px;
}
.add-child .layui-icon {
font-size: 12px;
margin-right: 3px;
}
/* 空状态提示 */
.empty-tip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 0;
color: #999;
}
.empty-tip .layui-icon {
font-size: 32px;
margin-bottom: 10px;
}
/* 表单样式优化 */
.category-form {
padding: 10px 0;
}
.layui-form-label {
width: 100px;
}
.layui-input-block {
margin-left: 130px;
}
.form-actions {
margin-top: 30px;
}
.layui-upload-drag {
padding: 20px;
border: 1px dashed #e2e2e2;
background-color: #fff;
text-align: center;
cursor: pointer;
margin-left: 10px;
}
.add-child:hover {
color: #0C7CD5;
.layui-upload-drag:hover {
border-color: #009688;
}
.layui-upload-list {
margin-top: 10px;
position: relative;
display: inline-block;
.layui-upload-drag img {
max-width: 100%;
margin: 10px 0;
}
.delete-image {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
color: #FF5722;
font-size: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
padding: 2px;
.layui-btn-xs {
height: 30px;
line-height: 25px;
font-size: 12px;
}
</style>
<script>
// 定义全局变量和函数
var categoryManager = {
init: function () {
this.initLayui();
},
initLayui: function () {
var that = this;
layui.use(['layer', 'form', 'upload'], function () {
var layer = layui.layer;
var form = layui.form;
var upload = layui.upload;
var $ = layui.jquery;
// 初始化分类列表
that.initCategoryList = function () {
$.ajax({
url: '/admin/article/articlecate',
type: 'POST',
success: function (res) {
if (res.code === 0) {
var html = '';
res.data.forEach(function (item) {
html += that.renderCategory(item);
});
$('#categoryList').html(html);
that.bindEvents();
} else {
layer.msg('获取分类数据失败', { icon: 2 });
}
}
});
};
// 渲染分类项
that.renderCategory = function (category, level = 0) {
var html = '<div class="category-item" data-id="' + category.id + '">';
html += '<div class="category-header">';
html += '<div class="category-name">' + category.title + '</div>';
if (level === 0) {
html += '<div class="category-actions">';
html += '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs add-child">';
html += '<i class="layui-icon layui-icon-add-1"></i>添加子分类</button>';
html += '</div>';
}
html += '</div>';
if (category.children && category.children.length > 0) {
html += '<div class="category-children">';
category.children.forEach(function (child) {
html += that.renderCategory(child, level + 1);
});
html += '</div>';
}
html += '</div>';
return html;
};
// 绑定事件
that.bindEvents = function () {
// 点击分类项加载编辑信息
$('.category-header').off('click').on('click', function (e) {
if (!$(e.target).closest('.add-child').length) {
var id = $(this).closest('.category-item').data('id');
that.loadCategoryInfo(id);
// 添加选中效果
$('.category-header').removeClass('active');
$(this).addClass('active');
}
});
// 添加子分类
$('.add-child').off('click').on('click', function (e) {
e.stopPropagation();
var parentId = $(this).closest('.category-item').data('id');
that.showCategoryForm(parentId);
});
};
// 加载分类信息
that.loadCategoryInfo = function (id) {
$.get('/admin/article/cateedit?id=' + id, function (res) {
if (res.code === 0) {
that.showCategoryForm(0, res.data);
}
});
};
// 显示分类表单
that.showCategoryForm = function (parentId = 0, data = null) {
$('#defaultTip').hide();
$('.category-form').show();
// 重置表单
form.val('categoryForm', {
id: data ? data.info.id : '',
name: data ? data.info.name : '',
cid: data ? data.info.cid : parentId,
sort: data ? data.info.sort : 0,
status: data ? data.info.status : 1
});
// 更新父级分类选项
var $select = $('select[name="cid"]');
$select.empty().append('<option value="0">顶级分类</option>');
if (data && data.parentOptions) {
data.parentOptions.forEach(function (item) {
$select.append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
// 更新图片预览
if (data && data.info.image) {
$('#uploadPreview').removeClass('layui-hide').find('img').attr('src', data.info.image);
$('#imageInput').val(data.info.image);
} else {
$('#uploadPreview').addClass('layui-hide').find('img').attr('src', '');
$('#imageInput').val('');
}
// 显示/隐藏删除按钮
$('#deleteBtn')[data ? 'show' : 'hide']();
form.render();
};
// 初始化上传组件
upload.render({
elem: '#uploadImage',
url: '/admin/upload/image',
accept: 'images',
acceptMime: 'image/*',
done: function (res) {
if (res.code === 0) {
$('#uploadPreview').removeClass('layui-hide').find('img').attr('src', res.data.url);
$('#imageInput').val(res.data.url);
layer.msg('上传成功');
} else {
layer.msg('上传失败');
}
}
});
// 监听表单提交
form.on('submit(saveCategory)', function (data) {
var url = data.field.id ? '/admin/article/cateedit' : '/admin/article/cateadd';
$.post(url, data.field, function (res) {
if (res.code === 0) {
layer.msg(res.msg, { icon: 1 });
that.initCategoryList();
} else {
layer.msg(res.msg, { icon: 2 });
}
});
return false;
});
// 监听删除按钮
$('#deleteBtn').on('click', function () {
var id = $('#categoryId').val();
if (!id) return;
layer.confirm('确定要删除该分类吗？', function (index) {
$.post('/admin/article/catedel', { id: id }, function (res) {
if (res.code === 0) {
layer.msg(res.msg, { icon: 1 });
that.initCategoryList();
$('#defaultTip').show();
$('.category-form').hide();
} else {
layer.msg(res.msg, { icon: 2 });
}
});
layer.close(index);
});
});
// 初始化页面
that.initCategoryList();
});
}
};
// 初始化
categoryManager.init();
// 新增分类
function add() {
categoryManager.showCategoryForm();
}
.delete-image:hover {
color: #FF0000;
// 刷新列表
function refresh() {
categoryManager.initCategoryList();
}
.layui-card {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.layui-col-md4{
width: 40%;
}
.layui-col-md6{
width: 60%;
}
</style>
</script>
app/admin/view/article/articlelist.php
+91 -38
View File
@@ -1,11 +1,13 @@
{include file="public/header" /}
<div class="config-container">
<div class="config-header" style="display:flex;justify-content: space-between;">
<div style="display: flex; align-items: center;">
<div class="config-header" style="display: flex;flex-direction: column;flex-wrap: wrap;align-items: flex-start;">
<div class="maintitle">
<span>文章列表</span>
</div>
<div style="display: flex;align-items: flex-start;flex-direction: column;gap: 15px;">
<div class="shaixuan">
<label>筛选：</label>
<div class="layui-form">
<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>
@@ -18,16 +20,28 @@
{/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>
<div>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="add()">
<i class="layui-icon layui-icon-add-1"></i>添加
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="refresh()">
<i class="layui-icon layui-icon-refresh"></i>刷新
</button>
<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>
@@ -53,7 +67,7 @@
</script>
<script type="text/html" id="operationBar">
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">
<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">
@@ -67,59 +81,89 @@
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}
{ 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: 20,
limits: [10, 20, 30, 50],
limit: 10,
limits: [10, 50, 100],
//height: 'full-220'
});
// 监听工具条事件
table.on('tool(articleTable)', function(obj){
table.on('tool(articleTable)', function (obj) {
var data = obj.data;
if(obj.event === 'edit'){
if (obj.event === 'edit') {
edit(data.id);
} else if(obj.event === 'del'){
} else if (obj.event === 'del') {
del(data.id);
}
});
// 监听分类筛选变化
form.on('select(categoryFilter)', function(data){
form.on('select(categoryFilter)', function (data) {
filterByCategory(data.value);
});
});
function filterByCategory(categoryId) {
if (!categoryId) {
layui.table.reload('articleTable', {
where: {},
page: {
curr: 1
}
});
reloadTable();
}
function doSearch() {
var titleKeyword = $('#titleSearch').val().trim();
var authorKeyword = $('#authorSearch').val().trim();
if (!titleKeyword && !authorKeyword && !$('#categoryFilter').val()) {
layer.msg('请输入搜索条件', { icon: 0 });
return;
}
var categoryName = $('#categoryFilter option[value="' + categoryId + '"]').text();
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
category: categoryName,
title: titleKeyword,
author: authorKeyword
},
page: {
curr: 1
@@ -155,4 +199,13 @@
function refresh() {
layui.table.reload('articleTable');
}
</script>
</script>
<style>
.maintitle {
font-size: 20px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
</style>