218 lines
7.8 KiB
HTML
218 lines
7.8 KiB
HTML
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>文章管理</title>
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
}
|
||
|
|
.layui-container {
|
||
|
|
width: 100% !important;
|
||
|
|
padding: 20px;
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
color: #333;
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
.layui-table {
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
.layui-table tbody tr:nth-child(odd) {
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
}
|
||
|
|
.layui-table tbody tr:nth-child(even) {
|
||
|
|
background-color: #eaf6f6;
|
||
|
|
}
|
||
|
|
.stats-container {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
.stats-container p {
|
||
|
|
margin: 0 20px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
.stats-container span {
|
||
|
|
color: #2de5cf;
|
||
|
|
}
|
||
|
|
..layui-table-view .layui-table{
|
||
|
|
width: 100% !important;
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="layui-container">
|
||
|
|
<div class="layui-row">
|
||
|
|
<div class="layui-col-xs12 layui-col-sm6">
|
||
|
|
<button class="layui-btn layui-btn-normal layui-btn-sm" id="addArticle">添加文章</button>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-xs12 layui-col-sm6 layui-text-right">
|
||
|
|
<select id="filterStatus" class="layui-select layui-btn-sm">
|
||
|
|
<option value="">全部</option>
|
||
|
|
<option value="published">已审核</option>
|
||
|
|
<option value="pending">待审核</option>
|
||
|
|
</select>
|
||
|
|
<select id="filterDate" class="layui-select layui-btn-sm">
|
||
|
|
<option value="">所有时间</option>
|
||
|
|
<option value="today">今日发表</option>
|
||
|
|
<option value="latest">最新发布</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<table id="articleTable" lay-filter="articleTable">
|
||
|
|
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<script type="text/html" id="actionToolbar">
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">修改</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="audit">审核</button>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="stats-container">
|
||
|
|
<p>总文章数量: <span id="totalCount">0</span></p>
|
||
|
|
<p>今日发表数量: <span id="todayCount">0</span></p>
|
||
|
|
<p>待审核数量: <span id="pendingCount">0</span></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% verbatim %}
|
||
|
|
<script type="text/html" id="chineseTitleTemplate">
|
||
|
|
<a href="/articles/{{ d.id }}/zh">{{ d.chinese_title }}</a>
|
||
|
|
</script>
|
||
|
|
<script type="text/html" id="englishTitleTemplate">
|
||
|
|
<a href="/articles/{{ d.id }}/en">{{ d.english_title }}</a>
|
||
|
|
</script>
|
||
|
|
{% endverbatim %}
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
layui.use(['jquery', 'table', 'layer'], function() {
|
||
|
|
const $ = layui.jquery;
|
||
|
|
const table = layui.table;
|
||
|
|
const layer = layui.layer;
|
||
|
|
|
||
|
|
function loadArticleList() {
|
||
|
|
axios.post('/custom_admin/home/article-list/')
|
||
|
|
.then(res => {
|
||
|
|
if (res.data.code === 200) {
|
||
|
|
const articleList = res.data.data;
|
||
|
|
table.render({
|
||
|
|
elem: '#articleTable',
|
||
|
|
data: articleList,
|
||
|
|
cols: [[
|
||
|
|
{field: 'chinese_title', title: '中文标题', width: '35%', toolbar: '#chineseTitleTemplate'},
|
||
|
|
{field: 'english_title', title: '英文标题', width: '35%', toolbar: '#englishTitleTemplate'},
|
||
|
|
{field: 'published_at', title: '发布时间', width: '10%'},
|
||
|
|
{ title: '操作',
|
||
|
|
width: '20%',
|
||
|
|
templet: function(d) {
|
||
|
|
let buttons = `
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">修改</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
|
||
|
|
`;
|
||
|
|
if (d.status === 'pending') {
|
||
|
|
buttons += `<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="audit">审核</button>`;
|
||
|
|
}
|
||
|
|
return buttons;
|
||
|
|
}}
|
||
|
|
]],
|
||
|
|
done: function() {
|
||
|
|
|
||
|
|
$('#totalCount').text(articleList.length);
|
||
|
|
$('#todayCount').text(articleList.filter(a => new Date(a.published_at).toDateString() === new Date().toDateString()).length);
|
||
|
|
$('#pendingCount').text(articleList.filter(a => a.status === 'pending').length);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
layer.msg('加载文章失败: ' + res.data.message);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
layer.msg('请求失败');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#addArticle').on('click', function() {
|
||
|
|
openArticleForm();
|
||
|
|
});
|
||
|
|
|
||
|
|
table.on('tool(articleTable)', function(obj) {
|
||
|
|
const data = obj.data;
|
||
|
|
const layEvent = obj.event;
|
||
|
|
|
||
|
|
if (layEvent === 'edit') {
|
||
|
|
openArticleForm(data.id);
|
||
|
|
} else if (layEvent === 'delete') {
|
||
|
|
deleteArticle(data.id);
|
||
|
|
} else if (layEvent === 'audit') {
|
||
|
|
auditArticle(data.id);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function openArticleForm(id = null) {
|
||
|
|
console.log(id)
|
||
|
|
layer.open({
|
||
|
|
type: 2,
|
||
|
|
title: id ? "编辑文章" : "添加文章",
|
||
|
|
area: ['90%', '90%'],
|
||
|
|
content: id ? `save-article/${id}/` : 'save-article/',
|
||
|
|
end: loadArticleList
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function deleteArticle(id) {
|
||
|
|
layer.confirm('确定删除这篇文章吗？', function(index) {
|
||
|
|
axios.delete(`/api/delete-article/${id}/`)
|
||
|
|
.then(res => {
|
||
|
|
if (res.data.code === 200) {
|
||
|
|
layer.msg('删除成功');
|
||
|
|
loadArticleList();
|
||
|
|
} else {
|
||
|
|
layer.msg('删除失败: ' + res.data.message);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
layer.msg('请求失败');
|
||
|
|
});
|
||
|
|
layer.close(index);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function auditArticle(id) {
|
||
|
|
layer.confirm('确定审核这篇文章吗？', function(index) {
|
||
|
|
axios.post(`/api/audit-article/${id}/`)
|
||
|
|
.then(res => {
|
||
|
|
if (res.data.code === 200) {
|
||
|
|
layer.msg('审核成功');
|
||
|
|
loadArticleList();
|
||
|
|
} else {
|
||
|
|
layer.msg('审核失败: ' + res.data.message);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
layer.msg('请求失败');
|
||
|
|
});
|
||
|
|
layer.close(index);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// function previewArticle(id,language) {
|
||
|
|
// // window.location.href = `/articles/${id}/${language}`;
|
||
|
|
// }
|
||
|
|
|
||
|
|
loadArticleList();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|