298 lines
11 KiB
PHP
298 lines
11 KiB
PHP
<?php /*a:2:{s:58:"E:\Demo\PHP\yunzer\app\admin\view\articles\articlelist.php";i:1747649468;s:51:"E:\Demo\PHP\yunzer\app\admin\view\public\header.php";i:1746890051;}*/ ?>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title><?php echo htmlentities((string) $config['admin_name']); ?></title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" media="all"/>
|
|
<link rel="stylesheet" type="text/css" href="/static/css/moban.css" media="all"/>
|
|
<link rel="stylesheet" type="text/css" href="/static/css/wangeditor.css" media="all"/>
|
|
<style type="text/css">
|
|
.header span{background:#009688;margin-left:30px;padding:10px;color:#ffffff;}
|
|
.header div{border-bottom:solid 2px #009688;margin-top: 8px;}
|
|
.header button{float:right;margin-top:-5px;}
|
|
.pagination {
|
|
display: inline-block;
|
|
padding-left: 0;
|
|
margin: 20px 0;
|
|
border-radius: 4px;
|
|
}
|
|
.pagination > li {
|
|
display: inline;
|
|
}
|
|
.pagination > li > a,
|
|
.pagination > li > span {
|
|
position: relative;
|
|
float: left;
|
|
padding: 6px 12px;
|
|
margin-left: -1px;
|
|
line-height: 1.42857143;
|
|
color: #337ab7;
|
|
text-decoration: none;
|
|
background-color: #fff;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.pagination > li:first-child > a,
|
|
.pagination > li:first-child > span {
|
|
margin-left: 0;
|
|
border-top-left-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
.pagination > li:last-child > a,
|
|
.pagination > li:last-child > span {
|
|
border-top-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
.pagination > li > a:hover,
|
|
.pagination > li > span:hover,
|
|
.pagination > li > a:focus,
|
|
.pagination > li > span:focus {
|
|
z-index: 2;
|
|
color: #23527c;
|
|
background-color: #eee;
|
|
border-color: #ddd;
|
|
}
|
|
.pagination > .active > a,
|
|
.pagination > .active > span,
|
|
.pagination > .active > a:hover,
|
|
.pagination > .active > span:hover,
|
|
.pagination > .active > a:focus,
|
|
.pagination > .active > span:focus {
|
|
z-index: 3;
|
|
color: #fff;
|
|
cursor: default;
|
|
background-color: #337ab7;
|
|
border-color: #337ab7;
|
|
}
|
|
.pagination > .disabled > span,
|
|
.pagination > .disabled > span:hover,
|
|
.pagination > .disabled > span:focus,
|
|
.pagination > .disabled > a,
|
|
.pagination > .disabled > a:hover,
|
|
.pagination > .disabled > a:focus {
|
|
color: #777;
|
|
cursor: not-allowed;
|
|
background-color: #fff;
|
|
border-color: #ddd;
|
|
}
|
|
.close-img { background: url(/static/images/close_img.png); background-size: 20px 20px; width:20px; height: 20px; position: absolute; right: 5px; top: 5px; z-index: 2;}
|
|
</style>
|
|
<script type="text/javascript" src="/static/layui/layui.js"></script>
|
|
<script type="text/javascript">
|
|
layui.use(['layer','form','table','laydate','element','upload'],function(){
|
|
layer = layui.layer; // layui 弹框
|
|
form = layui.form; // layui form表单
|
|
table = layui.table; // layui 表格
|
|
laydate = layui.laydate; // layui 时间框
|
|
element = layui.element; // layui element
|
|
upload = layui.upload; // layui 上传
|
|
$ = layui.jquery; // layui jquery
|
|
})
|
|
</script>
|
|
</head>
|
|
<body style="padding:10px; box-sizing: border-box;">
|
|
<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>
|
|
<?php if(is_array($categories) || $categories instanceof \think\Collection || $categories instanceof \think\Paginator): $i = 0; $__LIST__ = $categories;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$category): $mod = ($i % 2 );++$i;?>
|
|
<optgroup label="<?php echo htmlentities((string) $category['name']); ?>">
|
|
<?php if(is_array($category['children']) || $category['children'] instanceof \think\Collection || $category['children'] instanceof \think\Paginator): $i = 0; $__LIST__ = $category['children'];if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$subCategory): $mod = ($i % 2 );++$i;?>
|
|
<option value="<?php echo htmlentities((string) $subCategory['id']); ?>"><?php echo htmlentities((string) $subCategory['name']); ?></option>
|
|
<?php endforeach; endif; else: echo "" ;endif; ?>
|
|
</optgroup>
|
|
<?php endforeach; endif; else: echo "" ;endif; ?>
|
|
</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/articles/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/articles/add';
|
|
}
|
|
|
|
function edit(id) {
|
|
window.location.href = '/admin/articles/edit?id=' + id;
|
|
}
|
|
|
|
function del(id) {
|
|
layer.confirm('确定要删除该文章吗？', {
|
|
btn: ['确定', '取消']
|
|
}, function () {
|
|
$.post('/admin/articles/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>
|