|
|
|
@ -1,8 +1,16 @@ |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html xmlns:th="http://www.thymeleaf.org" lang="en"> |
|
|
|
|
|
|
|
|
|
<head th:replace="admin/common::header(~{::title},~{},~{})"> |
|
|
|
|
<head th:replace="admin/common::header(~{::title},~{},~{::style})"> |
|
|
|
|
<title>评论管理</title> |
|
|
|
|
<style> |
|
|
|
|
#comment-content { |
|
|
|
|
width: 400px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
@ -10,86 +18,84 @@ |
|
|
|
|
|
|
|
|
|
<div class="container lw-main lw-banner"> |
|
|
|
|
<div class="btn-group" role="group" style="margin-bottom: 20px" aria-label="..."> |
|
|
|
|
<button type="button" id="create-comment-btn" class="btn btn-default"><i class="fa fa-plus"></i> |
|
|
|
|
新增</button> |
|
|
|
|
</div> |
|
|
|
|
<table id="data-table" style="user-select: none"></table> |
|
|
|
|
</div> |
|
|
|
|
<!-- 编辑窗口 --> |
|
|
|
|
<div class="modal fade" id="save-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> |
|
|
|
|
<div class="modal-dialog" role="document"> |
|
|
|
|
<div class="modal-content"> |
|
|
|
|
<form id="data-form"> |
|
|
|
|
<input type="hidden" name="id"> |
|
|
|
|
<div class="modal-header"> |
|
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span |
|
|
|
|
aria-hidden="true">×</span></button> |
|
|
|
|
<h4 class="modal-title" id="window-title">Modal Title</h4> |
|
|
|
|
</div> |
|
|
|
|
<div class="modal-body"> |
|
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
|
<label>评论者的昵称</label> |
|
|
|
|
<input type="text" name="nickname" class="form-control" |
|
|
|
|
placeholder="请输入评论者的昵称..."> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
|
<label>评论者的邮箱</label> |
|
|
|
|
<input type="text" name="email" class="form-control" |
|
|
|
|
placeholder="请输入评论者的邮箱..."> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
|
<label>评论者的主页</label> |
|
|
|
|
<input type="text" name="url" class="form-control" |
|
|
|
|
placeholder="请输入评论者的主页..."> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
|
<label>评论内容</label> |
|
|
|
|
<input type="text" name="content" class="form-control" |
|
|
|
|
placeholder="请输入评论内容..."> |
|
|
|
|
<button style="outline: none;" type="button" id="readAll-comment-btn" class="btn btn-default"> |
|
|
|
|
<i class="fa fa-refresh"></i> 一键已读 |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
|
<label>是否已读</label> |
|
|
|
|
<input type="text" name="view" class="form-control" |
|
|
|
|
placeholder="请输入是否已读..."> |
|
|
|
|
<div class="btn-group" id="btn-selected-group" role="group" style="margin-bottom: 20px; float: right" aria-label="..."> |
|
|
|
|
<button type="button" style="outline: none;" th:class="${isView eq null}?'btn btn-primary':'btn btn-default'" data-view="">全部 |
|
|
|
|
</button> |
|
|
|
|
<button type="button" style="outline: none;" th:class="${isView eq true}?'btn btn-primary':'btn btn-default'" data-view="true">已读 |
|
|
|
|
</button> |
|
|
|
|
<button type="button" style="outline: none;" th:class="${isView eq false}?'btn btn-primary':'btn btn-default'" data-view="false">未读 |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
|
<label>评论的父评论</label> |
|
|
|
|
<input type="text" name="pid" class="form-control" |
|
|
|
|
placeholder="请输入评论的父评论..."> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
|
<label>评论创建时间</label> |
|
|
|
|
<input type="text" name="created" class="form-control" |
|
|
|
|
placeholder="请输入评论创建时间..."> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
<div class="modal-footer"> |
|
|
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> |
|
|
|
|
<button type="submit" class="btn btn-primary">保存</button> |
|
|
|
|
</div> |
|
|
|
|
</form> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<table id="data-table" style="user-select: none"></table> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<th:block th:include="admin/common::footer"></th:block> |
|
|
|
|
<script> |
|
|
|
|
$(function () { |
|
|
|
|
// 点击已读、未读和全部 |
|
|
|
|
$('#btn-selected-group button').on('click',function () { |
|
|
|
|
// 点中哪个就把哪个按钮高亮 |
|
|
|
|
$('#btn-selected-group .btn-primary').removeClass('btn-primary').addClass('btn-default') |
|
|
|
|
$(this).removeClass('btn-default').addClass('btn-primary') |
|
|
|
|
$('#data-table').bootstrapTable('refresh', {silent: true}) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 显示表单所有评论数据 |
|
|
|
|
$('#data-table').bootstrapTable({ |
|
|
|
|
url: "/admin/comment/", |
|
|
|
|
pagination: true, // 开启分页 |
|
|
|
|
sidePagination: 'server', // 使用服务端数据 |
|
|
|
|
pageNumber: 1, // 默认页码第一页 |
|
|
|
|
pageSize: 10, // 每页5条数据 |
|
|
|
|
pageList: [10, 20, 40], // 可选页大小 |
|
|
|
|
//这个是查询参数,就是bootstrap-table请求后端时携带的参数 |
|
|
|
|
// offset为数据的序号,limit为页大小 |
|
|
|
|
queryParams: function (params) { |
|
|
|
|
return { |
|
|
|
|
pageNumber: (params.offset / params.limit) + 1, |
|
|
|
|
pageSize: params.limit, |
|
|
|
|
view: $('#btn-selected-group .btn-primary').data('view'), |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
responseHandler: function (res) { |
|
|
|
|
return res.data |
|
|
|
|
}, |
|
|
|
|
onDblClickCell: function (field, value, row, $element) { |
|
|
|
|
// 双击评论内容部分时可以编辑评论 |
|
|
|
|
let comment = $('#data-table .content'); |
|
|
|
|
comment.parent().html(comment.val()); |
|
|
|
|
if (field === 'content') { |
|
|
|
|
$element.html(`<textarea class="form-control content">${value}</textarea>`); |
|
|
|
|
$('.content').blur(function () { |
|
|
|
|
// 获取评论id和评论内容 |
|
|
|
|
let data = {id: row.id, content: $(this).val()}; |
|
|
|
|
$.ajax({ |
|
|
|
|
url: '/admin/comment/', |
|
|
|
|
method: 'POST', |
|
|
|
|
data: data, |
|
|
|
|
dataType: 'json', |
|
|
|
|
success: res => { |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
layer.msg("保存成功", {icon: 1, time: 700}) |
|
|
|
|
$('#data-table').bootstrapTable('refresh', {silent: true}) |
|
|
|
|
} else { |
|
|
|
|
layer.msg(res.message, {icon: 2}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
columns: [ |
|
|
|
|
{ |
|
|
|
|
title: "序号", |
|
|
|
|
width: 50, |
|
|
|
|
align: 'center', |
|
|
|
|
// 生成自增的序号 |
|
|
|
|
formatter: function (value, row, index) { |
|
|
|
@ -98,85 +104,49 @@ |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
title: "评论者的昵称", |
|
|
|
|
title: "评论者", |
|
|
|
|
field: "nickname", |
|
|
|
|
align: "center", |
|
|
|
|
formatter: (value, row) => { |
|
|
|
|
let html = row.url ? `<a href="${row.url}" target="_blank">${value}</a>` : value; |
|
|
|
|
return html + `<br>${row.email}`; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
title: "评论者的邮箱", |
|
|
|
|
field: "email", |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
title: "评论者的主页", |
|
|
|
|
field: "url", |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
title: "评论内容", |
|
|
|
|
field: "content", |
|
|
|
|
formatter: value => { |
|
|
|
|
return `<p id="comment-content">${value}</p>` |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
title: "是否已读", |
|
|
|
|
field: "view", |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
title: "评论的父评论", |
|
|
|
|
field: "pid", |
|
|
|
|
align: "center", |
|
|
|
|
formatter: value => { |
|
|
|
|
return value ? "已读" : "未读"; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
title: "评论创建时间", |
|
|
|
|
field: "created", |
|
|
|
|
align: "center", |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
field: "id", |
|
|
|
|
title: '操作', |
|
|
|
|
align: "center", |
|
|
|
|
width: 180, |
|
|
|
|
formatter: function (value) { |
|
|
|
|
return `<button type="button" data-id="${value}" class="btn btn-info btn-sm comment-edit-btn"><i class="fa fa-edit"></i> 编辑</button> |
|
|
|
|
formatter: function (value,row) { |
|
|
|
|
return `<button type="button" data-id="${value}" data-aid="${row.article.id}" class="btn btn-success btn-sm comment-reply-btn"><i class="fa fa-comment"></i> 回复</button> |
|
|
|
|
<button type="button" data-id="${value}" class="btn btn-danger btn-sm comment-delete-btn"><i class="fa fa-trash"></i> 删除</button>` |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
responseHandler: function (res) { |
|
|
|
|
return res.data |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
// 编辑对应评论 |
|
|
|
|
$("#data-table").on("click", ".comment-edit-btn", function () { |
|
|
|
|
let id = $(this).data("id") |
|
|
|
|
$.ajax({ |
|
|
|
|
url: "/admin/comment/" + id, |
|
|
|
|
method: 'GET', |
|
|
|
|
dataType: 'json', |
|
|
|
|
success: res => { |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
$("#window-title").text('编辑评论') |
|
|
|
|
$("#data-form").initForm(res.data) |
|
|
|
|
$('#save-window').modal('show') |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
layer.msg(res.message, { icon: 2 }) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 新增评论 |
|
|
|
|
$("#create-comment-btn").on("click", function () { |
|
|
|
|
$("#window-title").text('新增评论') |
|
|
|
|
// 清空之前表单的数据 |
|
|
|
|
$("#data-form").initForm({id: "", nickname: "", email: "", url: "", content: "", view: "", pid: "", created: "",}) |
|
|
|
|
$('#save-window').modal('show') |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 删除评论 |
|
|
|
|
$("#data-table").on("click", ".comment-delete-btn", function () { |
|
|
|
|
let id = $(this).data('id') |
|
|
|
@ -200,32 +170,49 @@ |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 更新评论数据 |
|
|
|
|
$("#data-form").on("submit", function () { |
|
|
|
|
let data = $(this).serialize(); |
|
|
|
|
// 一键已读评论 |
|
|
|
|
$('#readAll-comment-btn').on('click', function () { |
|
|
|
|
$.ajax({ |
|
|
|
|
url: "/admin/comment/", |
|
|
|
|
method: "POST", |
|
|
|
|
data: data, |
|
|
|
|
dataType: "json", |
|
|
|
|
success: res => { |
|
|
|
|
url: "/admin/comment/read", |
|
|
|
|
type: 'GET', |
|
|
|
|
dataType: 'json', |
|
|
|
|
success(res) { |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
// 显示成功信息 |
|
|
|
|
layer.msg("保存成功", { icon: 1, time: 600 }, function () { |
|
|
|
|
// 关闭模态框 |
|
|
|
|
$('#save-window').modal('hide') |
|
|
|
|
// 重载表格数据 |
|
|
|
|
layer.msg("操作成功", {icon: 1, time: 700}) |
|
|
|
|
$('#data-table').bootstrapTable('refresh', {silent: true}) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
} else { |
|
|
|
|
layer.msg(res.message, {icon: 2}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
return false; // 阻止表单的提交行为 |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 回复评论实现 |
|
|
|
|
$("#data-table").on('click', '.comment-reply-btn', function () { |
|
|
|
|
// 获取目标资源id |
|
|
|
|
let id = $(this).data('id') |
|
|
|
|
let aid = $(this).data('aid') |
|
|
|
|
layer.prompt({title: '回复', formType: 2}, function (text, index) { |
|
|
|
|
layer.close(index); |
|
|
|
|
$.ajax({ |
|
|
|
|
url: '/admin/comment/' + id, |
|
|
|
|
method: 'POST', |
|
|
|
|
data: { |
|
|
|
|
aid: aid, |
|
|
|
|
message: text |
|
|
|
|
}, dataType: 'json', |
|
|
|
|
success: res => { |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
layer.msg("回复成功", {icon: 1}) |
|
|
|
|
console.log(res); |
|
|
|
|
$('#data-table').bootstrapTable('refresh', {silent: true}) |
|
|
|
|
} else { |
|
|
|
|
layer.msg(res.message, {icon: 2}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
</body> |
|
|
|
|