216 lines
8.6 KiB
HTML
216 lines
8.6 KiB
HTML
|
|
||
|
|
<title>会话管理</title>
|
||
|
|
|
||
|
|
<div class="layui-card layadmin-header">
|
||
|
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||
|
|
<a lay-href="">主页</a>
|
||
|
|
<a><cite>客服管理</cite></a>
|
||
|
|
<a><cite>会话列表</cite></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-fluid">
|
||
|
|
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-conversation-formlist">
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<div class="layui-inline">
|
||
|
|
<label class="layui-form-label">用户ID</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input type="text" name="userId" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-inline">
|
||
|
|
<label class="layui-form-label">客服ID</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input type="text" name="customerId" placeholder="请输入客服ID" autocomplete="off" class="layui-input">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-inline">
|
||
|
|
<label class="layui-form-label">状态</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<select name="status">
|
||
|
|
<option value="">全部</option>
|
||
|
|
<option value="0">等待中</option>
|
||
|
|
<option value="1">进行中</option>
|
||
|
|
<option value="2">已结束</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-inline">
|
||
|
|
<button class="layui-btn layuiadmin-btn-conversation" lay-submit lay-filter="LAY-conversation-front-search">
|
||
|
|
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i> 搜索
|
||
|
|
</button>
|
||
|
|
<button class="layui-btn layui-btn-primary" lay-filter="LAY-conversation-front-reset">
|
||
|
|
<i class="layui-icon layui-icon-refresh layuiadmin-button-btn"></i> 重置
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-card">
|
||
|
|
<div class="layui-card-body">
|
||
|
|
<div class="layui-btn-group">
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="refresh">
|
||
|
|
<i class="layui-icon layui-icon-refresh"></i> 刷新
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<table id="LAY-conversation-manage" lay-filter="LAY-conversation-manage"></table>
|
||
|
|
|
||
|
|
<script type="text/html" id="table-conversation-admin">
|
||
|
|
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="chatlog"><i class="layui-icon layui-icon-log"></i>聊天记录</a>
|
||
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
layui.use(['admin', 'table', 'form', 'layer'], function () {
|
||
|
|
var $ = layui.$,
|
||
|
|
admin = layui.admin,
|
||
|
|
view = layui.view,
|
||
|
|
table = layui.table,
|
||
|
|
layer = layui.layer,
|
||
|
|
setter = layui.setter,
|
||
|
|
form = layui.form,
|
||
|
|
customerApiUrl = setter.customerApiUrl || setter.baseurl;
|
||
|
|
|
||
|
|
form.render(null, 'layadmin-conversation-formlist');
|
||
|
|
|
||
|
|
//监听搜索
|
||
|
|
form.on('submit(LAY-conversation-front-search)', function (data) {
|
||
|
|
var field = data.field;
|
||
|
|
//执行重载
|
||
|
|
table.reload('LAY-conversation-manage', {
|
||
|
|
where: field,
|
||
|
|
page: { curr: 1 }
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听重置
|
||
|
|
$('.layui-btn-group').on('click', '[lay-event="refresh"]', function () {
|
||
|
|
table.reload('LAY-conversation-manage');
|
||
|
|
});
|
||
|
|
|
||
|
|
table.render({
|
||
|
|
elem: "#LAY-conversation-manage",
|
||
|
|
url: customerApiUrl + "customerapi/customer/conversations",
|
||
|
|
method: "get",
|
||
|
|
headers: {
|
||
|
|
'token': layui.data(setter.tableName)[setter.request.tokenName]
|
||
|
|
},
|
||
|
|
page: true,
|
||
|
|
where: {
|
||
|
|
userId: "",
|
||
|
|
customerId: "",
|
||
|
|
status: ""
|
||
|
|
},
|
||
|
|
request: {
|
||
|
|
pageName: 'pageIndex',
|
||
|
|
limitName: 'pageSize'
|
||
|
|
},
|
||
|
|
limit: 10,
|
||
|
|
cols: [[
|
||
|
|
{ field: "userName", title: "用户名称", width: 150 },
|
||
|
|
{ field: "userId", title: "用户ID", width: 200 },
|
||
|
|
{ field: "customerName", title: "客服名称", width: 150 },
|
||
|
|
{ field: "customerId", title: "客服ID", width: 200 },
|
||
|
|
{
|
||
|
|
field: "status",
|
||
|
|
title: "状态",
|
||
|
|
width: 100,
|
||
|
|
templet: function(d) {
|
||
|
|
var statusMap = {
|
||
|
|
0: '<span class="layui-badge">等待中</span>',
|
||
|
|
1: '<span class="layui-badge layui-bg-green">进行中</span>',
|
||
|
|
2: '<span class="layui-badge layui-bg-gray">已结束</span>'
|
||
|
|
};
|
||
|
|
return statusMap[d.status] || '-';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: "createTime",
|
||
|
|
title: "创建时间",
|
||
|
|
width: 180,
|
||
|
|
templet: function(d) {
|
||
|
|
return d.createTime ? formatTimestamp(d.createTime) : '-';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: "endTime",
|
||
|
|
title: "结束时间",
|
||
|
|
width: 180,
|
||
|
|
templet: function(d) {
|
||
|
|
return d.endTime ? formatTimestamp(d.endTime) : '-';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{ width: 190, title: "操作", align: "center", fixed: "right", toolbar: "#table-conversation-admin" }
|
||
|
|
]],
|
||
|
|
text: "对不起，加载出现异常！",
|
||
|
|
response: {
|
||
|
|
statusName: 'code',
|
||
|
|
statusCode: 0,
|
||
|
|
msgName: 'info',
|
||
|
|
countName: 'count',
|
||
|
|
dataName: 'data'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听工具条
|
||
|
|
table.on("tool(LAY-conversation-manage)", function (e) {
|
||
|
|
var l = e.data;
|
||
|
|
|
||
|
|
if ("chatlog" === e.event) {
|
||
|
|
// 打开新页面查看聊天记录
|
||
|
|
var url = 'customer/chatlog.html?conversationId=' + l.id + '&userName=' + encodeURIComponent(l.userName || '') + '&customerName=' + encodeURIComponent(l.customerName || '');
|
||
|
|
window.location.hash = '/' + url;
|
||
|
|
} else if ("delete" === e.event) {
|
||
|
|
layer.confirm('确定删除该会话及全部聊天记录吗？此操作不可恢复。', function(index) {
|
||
|
|
admin.req({
|
||
|
|
method: 'delete',
|
||
|
|
// 删除属于后台管理操作，必须走带鉴权的 AdminApi。
|
||
|
|
url: setter.baseurl + 'adminapi/Customer/conversation/' + encodeURIComponent(l.id),
|
||
|
|
done: function(res) {
|
||
|
|
if (res.code === 0 || res.code === 200) {
|
||
|
|
e.del();
|
||
|
|
layer.close(index);
|
||
|
|
layer.msg(res.info || '删除成功');
|
||
|
|
table.reload('LAY-conversation-manage');
|
||
|
|
} else {
|
||
|
|
layer.msg(res.info || '删除失败');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 时间戳格式化
|
||
|
|
function formatTimestamp(timestamp) {
|
||
|
|
if (!timestamp) return '-';
|
||
|
|
var date = new Date(timestamp);
|
||
|
|
var o = {
|
||
|
|
'M+': date.getMonth() + 1,
|
||
|
|
'd+': date.getDate(),
|
||
|
|
'h+': date.getHours(),
|
||
|
|
'm+': date.getMinutes(),
|
||
|
|
's+': date.getSeconds()
|
||
|
|
};
|
||
|
|
var format = 'yyyy-MM-dd hh:mm:ss';
|
||
|
|
if (/(y+)/.test(format)) {
|
||
|
|
format = format.replace(RegExp.$1, (date.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>
|