first commit
This commit is contained in:
@@ -0,0 +1,207 @@
|
||||
{include file="public/header" /}
|
||||
<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-file"></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>
|
||||
{volist name="categories" id="category"}
|
||||
<optgroup label="{$category.name}">
|
||||
{volist name="category.children" id="subCategory"}
|
||||
<option value="{$subCategory.id}">{$subCategory.name}</option>
|
||||
{/volist}
|
||||
</optgroup>
|
||||
{/volist}
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="nameSearch" placeholder="搜索资源名称" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="uploaderSearch" 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="resourceTable" lay-filter="resourceTable"></table>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="iconTemplate">
|
||||
{{# if(d.icon){ }}
|
||||
<img src="{{ d.icon }}" 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:green;">已审核</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: '#resourceTable',
|
||||
url: '/admin/resources/lists',
|
||||
method: 'post',
|
||||
cols: [[
|
||||
{ field: 'id', title: 'ID', align: 'center', width: 80 },
|
||||
{ field: 'number', title: '资源编号', width: 100 },
|
||||
{ field: 'title', title: '资源名称' },
|
||||
{ field: 'cate', title: '分类', align: 'center', width: 120 },
|
||||
{ field: 'icon', title: '图标', templet: '#iconTemplate', align: 'center', width: 100 },
|
||||
{ field: 'uploader', title: '上传者', align: 'center', width: 100 },
|
||||
{ field: 'desc', title: '描述', width: 200 },
|
||||
{ field: 'status', title: '状态', templet: '#statusTemplate', align: 'center', width: 80 },
|
||||
{ title: '操作', toolbar: '#operationBar', align: 'center', width: 150, fixed: 'right' }
|
||||
]],
|
||||
page: true,
|
||||
limit: 10,
|
||||
limits: [10, 50, 100],
|
||||
//height: 'full-220'
|
||||
});
|
||||
|
||||
// 监听工具条事件
|
||||
table.on('tool(resourceTable)', 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 nameKeyword = $('#nameSearch').val().trim();
|
||||
var uploaderKeyword = $('#uploaderSearch').val().trim();
|
||||
|
||||
if (!nameKeyword && !uploaderKeyword && !$('#categoryFilter').val()) {
|
||||
layer.msg('请输入搜索条件', { icon: 0 });
|
||||
return;
|
||||
}
|
||||
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
function doRefresh() {
|
||||
// 清空搜索条件
|
||||
$('#nameSearch').val('');
|
||||
$('#uploaderSearch').val('');
|
||||
$('#categoryFilter').val('');
|
||||
layui.form.render('select'); // 重新渲染select
|
||||
|
||||
// 重新加载表格，不带任何筛选条件
|
||||
layui.table.reload('resourceTable', {
|
||||
where: {},
|
||||
page: {
|
||||
curr: 1
|
||||
}
|
||||
});
|
||||
|
||||
layer.msg('已重置', { icon: 1 });
|
||||
}
|
||||
|
||||
function reloadTable() {
|
||||
var categoryId = $('#categoryFilter').val();
|
||||
var categoryName = '';
|
||||
if (categoryId) {
|
||||
var selectedOption = $('#categoryFilter option[value="' + categoryId + '"]');
|
||||
if (selectedOption.length > 0) {
|
||||
categoryName = selectedOption.text().trim();
|
||||
}
|
||||
}
|
||||
var nameKeyword = $('#nameSearch').val().trim();
|
||||
var uploaderKeyword = $('#uploaderSearch').val().trim();
|
||||
|
||||
layui.table.reload('resourceTable', {
|
||||
where: {
|
||||
category: categoryName,
|
||||
name: nameKeyword,
|
||||
uploader: uploaderKeyword
|
||||
},
|
||||
page: {
|
||||
curr: 1
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function add() {
|
||||
window.location.href = '/admin/resources/add';
|
||||
}
|
||||
|
||||
function edit(id) {
|
||||
window.location.href = '/admin/resources/edit?id=' + id;
|
||||
}
|
||||
|
||||
function del(id) {
|
||||
layer.confirm('确定要删除该资源吗？', {
|
||||
btn: ['确定', '取消']
|
||||
}, function () {
|
||||
$.post('/admin/resources/delete', { id: id }, function (res) {
|
||||
if (res.code == 0) {
|
||||
layer.msg(res.msg, { icon: 1 });
|
||||
setTimeout(function () {
|
||||
layui.table.reload('resourceTable');
|
||||
}, 1000);
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
layui.table.reload('resourceTable');
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user