255 lines
10 KiB
HTML
255 lines
10 KiB
HTML
|
|
||
|
|
<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>
|