497 lines
18 KiB
PHP
497 lines
18 KiB
PHP
<?php /*a:2:{s:57:"E:\Demo\PHP\yunzer\app\admin\view\article\articlecate.php";i:1747325751;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;justify-content: space-between;">
|
||
<div style="display: flex; align-items: center;">
|
||
<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>添加
|
||
</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>
|
||
</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>
|
||
</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>
|
||
<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>
|
||
<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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</div>
|
||
</form>
|
||
</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>
|
||
.category-item {
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.category-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 10px;
|
||
background-color: #f8f8f8;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.category-header:hover {
|
||
background-color: #f2f2f2;
|
||
}
|
||
|
||
.category-name {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.category-actions {
|
||
display: none;
|
||
}
|
||
|
||
.category-header:hover .category-actions {
|
||
display: block;
|
||
}
|
||
|
||
.category-children {
|
||
margin-left: 20px;
|
||
padding-left: 10px;
|
||
border-left: 1px solid #e6e6e6;
|
||
}
|
||
|
||
.add-child {
|
||
color: #1E9FFF;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.add-child:hover {
|
||
color: #0C7CD5;
|
||
}
|
||
|
||
.layui-upload-list {
|
||
margin-top: 10px;
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.delete-image:hover {
|
||
color: #FF0000;
|
||
}
|
||
|
||
.layui-card {
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.layui-col-md4{
|
||
width: 40%;
|
||
}
|
||
|
||
.layui-col-md6{
|
||
width: 60%;
|
||
}
|
||
</style>
|