224 lines
9.1 KiB
HTML
224 lines
9.1 KiB
HTML
{layout name="layout" /}
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">我的分类</div>
|
|
<div class="layui-card-body">
|
|
<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 顶部工具栏 -->
|
|
<script type="text/html" id="toolbarTpl">
|
|
<div class="layui-btn-container">
|
|
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="createRoot">添加分类</button>
|
|
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete">批量删除</button>
|
|
<button class="layui-btn layui-btn-sm" lay-event="expandAll">展开全部</button>
|
|
<button class="layui-btn layui-btn-sm" lay-event="foldAll">折叠全部</button>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- 行操作 -->
|
|
<script type="text/html" id="rowTpl">
|
|
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
|
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="addChild">添加子分类</a>
|
|
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
|
|
</script>
|
|
|
|
<!-- 新增/编辑 表单模板（弹窗内渲染） -->
|
|
<script type="text/html" id="dataFormTpl">
|
|
<div style="padding:15px;">
|
|
<form class="layui-form" lay-filter="dataForm">
|
|
<input type="hidden" name="id" value="{{ d.id || '' }}">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">分类名称</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="name" value="{{ d.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">
|
|
<textarea name="description" placeholder="请输入分类描述" class="layui-textarea">{{ d.description || '' }}</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">上级分类</label>
|
|
<div class="layui-input-block">
|
|
<select name="pid" id="pidSelect"></select>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">排序</label>
|
|
<div class="layui-input-block">
|
|
<input type="number" name="sort" value="{{ d.sort || 0 }}" placeholder="数值越小越靠前" autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button class="layui-btn" lay-submit lay-filter="dataFormSubmit" id="dataFormSubmit">保存</button>
|
|
<button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</script>
|
|
|
|
<script>
|
|
layui.use(['treeTable', 'layer', 'form', 'laytpl', 'http'], function () {
|
|
var treeTable = layui.treeTable;
|
|
var layer = layui.layer;
|
|
var $ = layui.$;
|
|
var form = layui.form;
|
|
var laytpl = layui.laytpl;
|
|
var http = layui.http;
|
|
|
|
// 后端注入的扁平树数据
|
|
var treeData = {$treeData|raw};
|
|
var pmap = {};
|
|
treeData.forEach(function (c) { pmap[c.id] = c; });
|
|
|
|
// 构建上级分类下拉（编辑时排除自身及其子孙节点，避免形成环）
|
|
function buildPidOptions(selfId) {
|
|
var html = '<option value="0">顶级分类</option>';
|
|
treeData.forEach(function (c) {
|
|
if (selfId && c.id === selfId) return;
|
|
if (selfId) {
|
|
var cur = pmap[c.id];
|
|
while (cur && cur.pid) {
|
|
if (cur.pid == selfId) return;
|
|
cur = pmap[cur.pid];
|
|
}
|
|
}
|
|
html += '<option value="' + c.id + '">' + c.title + '</option>';
|
|
});
|
|
return html;
|
|
}
|
|
|
|
// 渲染树形表格
|
|
function renderTable() {
|
|
treeTable.render({
|
|
elem: '#dataTable',
|
|
data: treeData,
|
|
tree: {
|
|
customName: { isParent: 'is_parent', name: 'title', id: 'id', pid: 'pid' },
|
|
data: { isSimpleData: true, rootPid: 0 },
|
|
view: { showIcon: false }
|
|
},
|
|
toolbar: '#toolbarTpl',
|
|
cols: [[
|
|
{ type: 'checkbox', fixed: 'left' },
|
|
{ field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
|
|
{ field: 'title', title: '分类名称', minWidth: 160, fixed: 'left' },
|
|
{ field: 'description', title: '描述', minWidth: 160, templet: function (d) { return d.description || '-'; } },
|
|
{ field: 'articles_count', title: '文章数', width: 90 },
|
|
{ field: 'sort', title: '排序', width: 80, sort: true },
|
|
{ title: '操作', width: 230, align: 'center', toolbar: '#rowTpl' }
|
|
]],
|
|
page: false,
|
|
skin: 'line'
|
|
});
|
|
}
|
|
renderTable();
|
|
|
|
// 新增 / 编辑 弹窗
|
|
function openForm(data) {
|
|
data = data || {};
|
|
var formHtml = laytpl($('#dataFormTpl').html()).render(data);
|
|
layer.open({
|
|
title: data.id ? '编辑分类' : (data.pid ? '添加子分类' : '添加分类'),
|
|
content: formHtml,
|
|
anim: 'slideLeft',
|
|
offset: 'r',
|
|
area: ['480px', '98%'],
|
|
shade: 0.1,
|
|
shadeClose: true,
|
|
btn: ['保存', '取消'],
|
|
success: function (layero, index) {
|
|
$('#pidSelect').html(buildPidOptions(data.id));
|
|
if (data.pid) { $('#pidSelect').val(data.pid); }
|
|
form.render('select');
|
|
},
|
|
yes: function (index, layero) {
|
|
layero.contents().find('#dataFormSubmit').trigger('click');
|
|
},
|
|
btn2: function (index) { layer.close(index); }
|
|
});
|
|
}
|
|
|
|
// 表单提交：仅绑定一次（layui form 的 submit 为事件委托，弹窗内同 lay-filter 表单均可触发，不会叠加）
|
|
form.on('submit(dataFormSubmit)', function (elem) {
|
|
var field = elem.field;
|
|
var isEdit = !!field.id;
|
|
var url = isEdit
|
|
? '{:url("blog/member.category/update")}'
|
|
: '{:url("blog/member.category/save")}';
|
|
var postData = $.extend({}, field);
|
|
if (isEdit) { postData.id = field.id; }
|
|
http.post(url, postData).then(function (res) {
|
|
if (res.code === 1) {
|
|
layer.closeAll('dialog');
|
|
layer.msg(res.msg, { icon: 1 });
|
|
setTimeout(function () { location.reload(); }, 600);
|
|
} else {
|
|
layer.msg(res.msg || '操作失败', { icon: 2 });
|
|
}
|
|
},
|
|
error: function () { layer.msg('请求失败，请重试', { icon: 2 }); }
|
|
});
|
|
return false;
|
|
});
|
|
|
|
// 顶部工具条
|
|
treeTable.on('toolbar(dataTable)', function (obj) {
|
|
switch (obj.event) {
|
|
case 'createRoot':
|
|
openForm({ pid: 0, sort: 0 });
|
|
break;
|
|
case 'batchDelete':
|
|
var checkData = treeTable.checkStatus('dataTable').data;
|
|
if (!checkData.length) {
|
|
return layer.msg('请选择要删除的分类');
|
|
}
|
|
var ids = checkData.map(function (item) { return item.id; });
|
|
layer.confirm('确定删除选中的 ' + ids.length + ' 个分类吗？', function (index) {
|
|
$.post('{:url("blog/member.category/batch")}', { action: 'delete', ids: ids }, function (res) {
|
|
if (res.code === 1) {
|
|
layer.msg(res.msg, { icon: 1 }, function () { location.reload(); });
|
|
} else {
|
|
layer.msg(res.msg, { icon: 2 });
|
|
}
|
|
});
|
|
layer.close(index);
|
|
});
|
|
break;
|
|
case 'expandAll':
|
|
treeTable.expandAll('#dataTable');
|
|
break;
|
|
case 'foldAll':
|
|
treeTable.foldAll('#dataTable');
|
|
break;
|
|
}
|
|
});
|
|
|
|
// 行操作
|
|
treeTable.on('tool(dataTable)', function (obj) {
|
|
var data = obj.data;
|
|
if (obj.event === 'edit') {
|
|
openForm(data);
|
|
} else if (obj.event === 'addChild') {
|
|
openForm({ pid: data.id, sort: 0 });
|
|
} else if (obj.event === 'delete') {
|
|
layer.confirm('确定要删除该分类吗？', function (index) {
|
|
$.post('{:url("blog/member.category/delete")}', { id: data.id }, function (res) {
|
|
if (res.code === 1) {
|
|
layer.msg(res.msg, { icon: 1 }, function () { location.reload(); });
|
|
} else {
|
|
layer.msg(res.msg, { icon: 2 });
|
|
}
|
|
});
|
|
layer.close(index);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|