266 lines
12 KiB
HTML
266 lines
12 KiB
HTML
|
||
<body>
|
||
|
||
|
||
<div class="layui-row" style="margin-top: 20px;">
|
||
<div class="layui-col-md3">
|
||
<!-- 添加文案按钮 -->
|
||
<button class="layui-btn layui-btn-sm" id="add-copywriting">添加文案</button>
|
||
</div>
|
||
<div class="layui-col-md6">
|
||
<!-- 搜索表单 -->
|
||
<div class="layui-form" style="display: flex; align-items: center;">
|
||
<div class="layui-input-inline" style="flex-grow: 1;">
|
||
<input type="text" id="search-text" placeholder="请输入文案内容进行搜索" autocomplete="off" class="layui-input">
|
||
</div>
|
||
<button class="layui-btn layui-btn-sm" id="search-btn">搜索</button>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3" style="text-align: right;">
|
||
<!-- 批量删除按钮 -->
|
||
<button class="layui-btn layui-btn-sm layui-btn-danger" id="batch-delete">批量删除</button>
|
||
</div>
|
||
</div>
|
||
<table id="copywriting-table" lay-filter="copywriting-table" style="margin-top: 20px;"></table>
|
||
|
||
|
||
<!-- 操作栏模板 -->
|
||
<script type="text/html" id="barDemo">
|
||
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
||
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="approve">审核</a>
|
||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
|
||
</script>
|
||
|
||
<script>
|
||
layui.use(['table', 'layer', 'form'], function(){
|
||
var table = layui.table;
|
||
var layer = layui.layer;
|
||
var form = layui.form;
|
||
|
||
// 初始化表格
|
||
table.render({
|
||
elem: '#copywriting-table',
|
||
url: '/admin/copywriting_library/', // 数据接口URL
|
||
method: 'POST',
|
||
where: { // 这里传入的是额外的请求参数，LayUI会将这些参数合并到请求数据中
|
||
action: 'fetch', // 指定操作类型
|
||
},
|
||
contentType: 'application/json', // 设置发送请求的内容类型为JSON
|
||
page: true, // 开启分页
|
||
cols: [[ // 表头
|
||
{type: 'checkbox'},
|
||
{field: 'text_content', title: '文案', width: '40%', templet: function(d) { return decodeURIComponent(d.text_content); }},
|
||
{field: 'source', title: '来源', width: '10%'},
|
||
{field: 'popularity', title: '热度', width: '10%'},
|
||
{field: 'tag', title: '标签', width: '10%',hide:true},
|
||
{field: 'is_approved', title: '是否审核', width: '10%'},
|
||
{field: 'added_time', title: '添加时间', width: '10%', sort: true},
|
||
{title: '操作', width: '10%', toolbar: '#barDemo'}
|
||
]]
|
||
});
|
||
|
||
// 监听搜索按钮事件
|
||
$('#search-btn').on('click', function(){
|
||
var searchText = $('#search-text').val();
|
||
table.reload('copywriting-table', {
|
||
where: {search: searchText}
|
||
});
|
||
});
|
||
|
||
// 监听添加按钮事件
|
||
$('#add-copywriting').on('click', function(){
|
||
layer.open({
|
||
type: 1, // 页面层
|
||
area: ['500px', '400px'], // 宽高
|
||
title: '添加文案',
|
||
content: '<div class="layui-form" style="margin:20px;">' +
|
||
'<div class="layui-form-item">' +
|
||
'<label class="layui-form-label">文案内容</label>' +
|
||
'<div class="layui-input-block">' +
|
||
'<input style="display: none" type="text" name="action" value="add">' +
|
||
'<textarea name="text_content" required lay-verify="required" placeholder="请输入文案内容" autocomplete="off" class="layui-textarea"></textarea>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'<div class="layui-form-item">' +
|
||
'<label class="layui-form-label">来源</label>' +
|
||
'<div class="layui-input-block">' +
|
||
'<input type="text" name="source" 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">' +
|
||
'<input type="text" name="tag" 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="formDemo">立即提交</button>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'</div>', // 表单的HTML内容
|
||
success: function(layero, index){
|
||
layui.form.on('submit(formDemo)', function(data){
|
||
axios.post('/admin/copywriting_library/', JSON.stringify(data.field), {
|
||
headers: {'Content-Type': 'application/json'}
|
||
}).then(function(response){
|
||
if(response.data.status === 'success'){
|
||
layer.msg('操作成功', {icon: 1, time: 1000}, function(){
|
||
layer.close(index); // 关闭弹窗
|
||
layui.table.reload('copywriting-table'); // 重新加载表格
|
||
});
|
||
} else {
|
||
// 操作失败
|
||
layer.msg(response.data.message, {icon: 2});
|
||
layer.close(index); // 关闭弹窗
|
||
}
|
||
}).catch(function(error){
|
||
layer.msg('服务器出错了', {icon: 2});
|
||
console.error('操作失败', error);
|
||
});
|
||
return false; // 阻止表单跳转。
|
||
});
|
||
|
||
}
|
||
});
|
||
|
||
});
|
||
|
||
// 编辑文案的函数
|
||
function editCopywriting(data) {
|
||
layer.open({
|
||
type: 1, // 页面层
|
||
area: ['500px', '400px'], // 宽高
|
||
title: '编辑文案',
|
||
content: '<div class="layui-form" style="margin:20px;">' +
|
||
'<div class="layui-form-item">' +
|
||
'<label class="layui-form-label">文案内容</label>' +
|
||
'<div class="layui-input-block">' +
|
||
'<input style="display: none" type="text" name="action" value="edit">' +
|
||
'<input style="display: none" type="text" name="id" value="'+data.id+'">' +
|
||
'<textarea name="text_content" required lay-verify="required" placeholder="请输入文案内容" autocomplete="off" class="layui-textarea">'+data.text_content+'</textarea>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'<div class="layui-form-item">' +
|
||
'<label class="layui-form-label">来源</label>' +
|
||
'<div class="layui-input-block">' +
|
||
'<input type="text" name="source" value="'+data.source+'" 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">' +
|
||
'<input type="text" name="tag" value="'+data.tag+'" 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="editSubmit">立即提交</button>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'</div>' , // 使用LayUI的模板引擎渲染表单，并填充当前行的数据
|
||
success: function(layero, index) {
|
||
layui.form.render(null, 'editForm'); // 重新渲染表单
|
||
// 表单提交事件
|
||
layui.form.on('submit(editSubmit)', function(formdata) {
|
||
axios.post('/admin/copywriting_library/', JSON.stringify(formdata.field), {
|
||
headers: {'Content-Type': 'application/json'}
|
||
}).then(function(response) {
|
||
if(response.data.status === 'success') {
|
||
layer.msg('编辑成功', {icon: 1});
|
||
layer.close(index); // 关闭弹窗
|
||
layui.table.reload('copywriting-table'); // 重新加载表格
|
||
} else {
|
||
layer.msg('编辑失败', {icon: 2});
|
||
}
|
||
}).catch(function(error) {
|
||
layer.msg('编辑过程中出错', {icon: 2});
|
||
console.error('编辑失败', error);
|
||
});
|
||
return false; // 阻止表单跳转。
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
// 监听批量删除按钮事件
|
||
$('#batch-delete').on('click', function(){
|
||
var checkStatus = table.checkStatus('copywriting-table');
|
||
var data = checkStatus.data;
|
||
var ids = data.map(function(item) {
|
||
return item.id;
|
||
});
|
||
if(ids.length > 0) {
|
||
layer.confirm('确认删除选中的文案吗？', function(index){
|
||
// 发送批量删除请求...
|
||
axios.post('/admin/copywriting_library/', JSON.stringify({ids: ids,action:'batch-delete'}), {
|
||
headers: {'Content-Type': 'application/json'}
|
||
}).then(function(response){
|
||
if(response.data.status === 'success'){
|
||
layer.msg('批量删除成功', {icon: 1});
|
||
layui.table.reload('copywriting-table'); // 重新加载表格
|
||
} else {
|
||
layer.msg('批量删除失败', {icon: 2});
|
||
}
|
||
}).catch(function(error){
|
||
console.error('批量删除失败', error);
|
||
});
|
||
});
|
||
} else {
|
||
layer.msg('请选择需要删除的文案');
|
||
}
|
||
});
|
||
|
||
// 监听表格操作事件
|
||
table.on('tool(copywriting-table)', function(obj){
|
||
var data = obj.data; // 获取当前行的数据
|
||
if(obj.event === 'edit'){
|
||
// 编辑操作
|
||
editCopywriting(data);
|
||
} else if(obj.event === 'delete'){
|
||
// 单项删除操作
|
||
layer.confirm('确定删除此文案吗？', function(index){
|
||
// 发送删除请求...
|
||
axios.post('/admin/copywriting_library/', JSON.stringify({action: 'delete', id: data.id}), {
|
||
headers: {'Content-Type': 'application/json'}
|
||
}).then(function(response){
|
||
if(response.data.status === 'success'){
|
||
layer.msg('删除成功', {icon: 1});
|
||
layui.table.reload('copywriting-table'); // 重新加载表格
|
||
} else {
|
||
layer.msg('删除失败', {icon: 2});
|
||
}
|
||
}).catch(function(error){
|
||
layer.msg('删除过程中出错', {icon: 2});
|
||
console.error('删除失败', error);
|
||
});
|
||
layer.close(index); // 关闭确认弹窗
|
||
});
|
||
}else if(obj.event === 'approve'){
|
||
layer.confirm('确定审核此文案吗？', function(index){
|
||
// 发送删除请求...
|
||
axios.post('/admin/copywriting_library/', JSON.stringify({action: 'approve', id: data.id}), {
|
||
headers: {'Content-Type': 'application/json'}
|
||
}).then(function(response){
|
||
if(response.data.status === 'success'){
|
||
layer.msg('审核完成', {icon: 1});
|
||
layui.table.reload('copywriting-table'); // 重新加载表格
|
||
} else {
|
||
layer.msg('审核失败', {icon: 2});
|
||
}
|
||
}).catch(function(error){
|
||
layer.msg('审核过程中出错', {icon: 2});
|
||
console.error('审核失败', error);
|
||
});
|
||
layer.close(index); // 关闭确认弹窗
|
||
});
|
||
}
|
||
});
|
||
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
|