添加项目文件。
This commit is contained in:
@@ -0,0 +1,254 @@
|
||||
|
||||
<title>聊天记录</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a lay-href="customer/conversation"><cite>会话列表</cite></a>
|
||||
<a><cite>聊天记录</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header" style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span id="conversation-title">聊天记录</span>
|
||||
<div>
|
||||
<button class="layui-btn layui-btn-sm layui-btn-danger" onclick="deleteAllMessages()">清空记录</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<table id="LAY-chatlog-manage" lay-filter="LAY-chatlog-manage"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="toolbar-chatlog">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteSelected">批量删除</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="table-chatlog-toolbar">
|
||||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function getParameterByName(name) {
|
||||
// 优先从 hash 中查找
|
||||
var hash = window.location.hash;
|
||||
if (hash && hash.includes('?')) {
|
||||
var searchPart = hash.substring(hash.indexOf('?'));
|
||||
var params = new URLSearchParams(searchPart);
|
||||
return params.get(name);
|
||||
}
|
||||
|
||||
// 如果 hash 中没有，再从主 URL 查找
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
return params.get(name);
|
||||
}
|
||||
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var $ = layui.$,
|
||||
admin = layui.admin,
|
||||
table = layui.table,
|
||||
setter = layui.setter;
|
||||
|
||||
// 获取URL参数
|
||||
var conversationId = getParameterByName('conversationId') || '';
|
||||
var userName = getParameterByName('userName') || '';
|
||||
var customerName = getParameterByName('customerName') || '';
|
||||
|
||||
console.log(conversationId)
|
||||
// 设置标题
|
||||
document.getElementById('conversation-title').textContent = '聊天记录 - ' + userName + ' 与 ' + customerName;
|
||||
|
||||
console.log('conversationId:', conversationId);
|
||||
|
||||
table.render({
|
||||
elem: "#LAY-chatlog-manage",
|
||||
url: setter.baseurl + "adminapi/customer/chatlog/" + conversationId,
|
||||
method: "get",
|
||||
headers: {
|
||||
'token': layui.data(setter.tableName)[setter.request.tokenName]
|
||||
},
|
||||
page: false,
|
||||
toolbar: '#toolbar-chatlog',
|
||||
defaultToolbar: [],
|
||||
cols: [[
|
||||
{ type: 'checkbox', fixed: 'left' },
|
||||
{
|
||||
field: "senderType",
|
||||
title: "发送者",
|
||||
width: 100,
|
||||
templet: function(d) {
|
||||
return d.senderType == 1 ? '<span class="layui-badge layui-bg-blue">用户</span>' : '<span class="layui-badge">客服</span>';
|
||||
}
|
||||
},
|
||||
{ field: "senderName", title: "发送者名称", width: 150 },
|
||||
{
|
||||
field: "contentType",
|
||||
title: "类型",
|
||||
width: 100,
|
||||
templet: function(d) {
|
||||
return d.contentType == 1 ? '<span class="layui-badge layui-bg-green">文字</span>' : '<span class="layui-badge">图片</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
field: "content",
|
||||
title: "内容",
|
||||
templet: function(d) {
|
||||
if (d.contentType == 2) {
|
||||
return '<img src="' + d.content + '" style="max-width:200px;max-height:100px;cursor:pointer;" lay-event="viewImage">';
|
||||
}
|
||||
return d.content || '-';
|
||||
}
|
||||
},
|
||||
{
|
||||
field: "createTime",
|
||||
title: "发送时间",
|
||||
width: 180,
|
||||
templet: function(d) {
|
||||
return d.createTime ? formatTimestamp(d.createTime) : '-';
|
||||
}
|
||||
},
|
||||
{ title: "操作", width: 100, align: "center", fixed: "right", toolbar: "#table-chatlog-toolbar" }
|
||||
]],
|
||||
text: "对不起，加载出现异常！",
|
||||
response: {
|
||||
statusName: 'code',
|
||||
statusCode: 0,
|
||||
msgName: 'info',
|
||||
countName: 'count',
|
||||
dataName: 'data'
|
||||
}
|
||||
});
|
||||
|
||||
// 点击图片查看大图
|
||||
table.on('tool(LAY-chatlog-manage)', function(e) {
|
||||
if (e.event === 'viewImage') {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '图片预览',
|
||||
area: ['800px', '600px'],
|
||||
content: '<div style="text-align:center;padding:20px;"><img src="' + e.data.content + '" style="max-width:100%;max-height:100%;"></div>'
|
||||
});
|
||||
}
|
||||
if (e.event === 'delete') {
|
||||
layer.confirm("确定删除此消息吗？", function(index) {
|
||||
admin.req({
|
||||
method: "delete",
|
||||
url: setter.baseurl + "adminapi/customer/message/" + e.data.id,
|
||||
headers: {
|
||||
'token': layui.data(setter.tableName)[setter.request.tokenName]
|
||||
},
|
||||
done: function (res) {
|
||||
if (res.code === 0) {
|
||||
layer.msg('删除成功');
|
||||
table.reload("LAY-chatlog-manage");
|
||||
} else {
|
||||
layer.msg(res.info || '删除失败');
|
||||
}
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 批量删除
|
||||
table.on('toolbar(LAY-chatlog-manage)', function(obj) {
|
||||
var checkStatus = table.checkStatus(obj.config.id);
|
||||
if (obj.event === 'deleteSelected') {
|
||||
var data = checkStatus.data;
|
||||
if (data.length === 0) {
|
||||
layer.msg('请选择要删除的消息');
|
||||
return;
|
||||
}
|
||||
layer.confirm("确定删除选中的 " + data.length + " 条消息吗？", function(index) {
|
||||
var ids = data.map(function(d) { return d.id; });
|
||||
admin.req({
|
||||
method: "post",
|
||||
contentType: "application/json;charset=UTF-8",
|
||||
url: setter.baseurl + "adminapi/customer/messages/delete-batch",
|
||||
headers: {
|
||||
'token': layui.data(setter.tableName)[setter.request.tokenName]
|
||||
},
|
||||
data: JSON.stringify({ ids: ids }),
|
||||
done: function (res) {
|
||||
if (res.code === 0) {
|
||||
layer.msg('删除成功');
|
||||
table.reload("LAY-chatlog-manage");
|
||||
} else {
|
||||
layer.msg(res.info || '删除失败');
|
||||
}
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 清空所有记录
|
||||
window.deleteAllMessages = function() {
|
||||
if (!conversationId) {
|
||||
layer.msg('无效的会话ID');
|
||||
return;
|
||||
}
|
||||
layer.confirm("确定清空此会话的所有聊天记录吗？此操作不可恢复！", function(index) {
|
||||
admin.req({
|
||||
method: "delete",
|
||||
url: setter.baseurl + "adminapi/customer/messages/" + conversationId,
|
||||
headers: {
|
||||
'token': layui.data(setter.tableName)[setter.request.tokenName]
|
||||
},
|
||||
done: function (res) {
|
||||
if (res.code === 0) {
|
||||
layer.msg('清空成功');
|
||||
table.reload("LAY-chatlog-manage");
|
||||
} else {
|
||||
layer.msg(res.info || '清空失败');
|
||||
}
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 时间戳格式化
|
||||
function formatTimestamp(timestamp) {
|
||||
if (!timestamp) return '-';
|
||||
// 处理时间戳，可能是字符串或数字
|
||||
var date;
|
||||
if (typeof timestamp === 'string') {
|
||||
// 如果是ISO格式字符串，直接解析
|
||||
date = new Date(timestamp);
|
||||
} else {
|
||||
// 如果是时间戳，假设是毫秒级别
|
||||
date = new Date(timestamp);
|
||||
}
|
||||
|
||||
// 转换为北京时间 (UTC+8)
|
||||
var utc = date.getTime() + (date.getTimezoneOffset() * 60000);
|
||||
var beijingDate = new Date(utc + (3600000 * 8));
|
||||
|
||||
var o = {
|
||||
'M+': beijingDate.getMonth() + 1,
|
||||
'd+': beijingDate.getDate(),
|
||||
'h+': beijingDate.getHours(),
|
||||
'm+': beijingDate.getMinutes(),
|
||||
's+': beijingDate.getSeconds()
|
||||
};
|
||||
var format = 'yyyy-MM-dd hh:mm:ss';
|
||||
if (/(y+)/.test(format)) {
|
||||
format = format.replace(RegExp.$1, (beijingDate.getFullYear() + '').substr(4 - RegExp.$1.length));
|
||||
}
|
||||
for (var k in o) {
|
||||
if (new RegExp('(' + k + ')').test(format)) {
|
||||
format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
|
||||
}
|
||||
}
|
||||
return format;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user