280 lines
12 KiB
HTML
280 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>历史会话</title>
|
||
<link rel="shortcut icon" href="favicon.ico">
|
||
<link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
|
||
<link href="__FONT__/font-awesome.min.css?v=4.4.0" rel="stylesheet">
|
||
<link href="__CSS__/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
|
||
<link href="__CSS__/animate.min.css" rel="stylesheet">
|
||
<link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
|
||
<link href="__NOCDN_JS__/layui/css/layui.css" rel="stylesheet">
|
||
</head>
|
||
<body class="gray-bg">
|
||
<div class="wrapper wrapper-content animated fadeInRight">
|
||
<!-- Panel Other -->
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>历史会话</h5>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<!--搜索框开始-->
|
||
<form id='commentForm' role="form" method="post" class="form-inline pull-right">
|
||
<div class="content clearfix m-b">
|
||
<div class="form-group">
|
||
<label>聊天日期：</label>
|
||
<input type="text" class="form-control" id="start" placeholder="开始日期"> --
|
||
<input type="text" class="form-control" id="end" placeholder="结束日期">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>名字或ID：</label>
|
||
<input type="text" class="form-control" id="username" name="user_name">
|
||
</div>
|
||
<div class="form-group">
|
||
<button class="btn btn-primary" type="button" style="margin-top:5px" id="search">
|
||
<strong>搜 索</strong>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<!--搜索框结束-->
|
||
<div class="example-wrap">
|
||
<div class="example" id="table-kf">
|
||
<table id="cusTable" class="custables">
|
||
<thead>
|
||
<th data-field="from_name" id="check_kf">选择客服</th>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
<div class="example" id="table-user" style="display:none;">
|
||
<div id="history_kf" class="glyphicon glyphicon-arrow-left"></div>
|
||
<table id="cusTable-user" class="custables">
|
||
<thead>
|
||
<th data-field="to_name">选择用户</th>
|
||
<th data-field="to_id">id</th>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
<div class="example" id="table-all" style="display:none;">
|
||
<div id="history_user" class="glyphicon glyphicon-arrow-left"></div>
|
||
<table id="cusTable-all">
|
||
<thead>
|
||
<th data-field="from_name">发送者</th>
|
||
<th data-field="to_name">接收者</th>
|
||
<th data-field="content">会话内容</th>
|
||
<th data-field="time_line">会话时间</th>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<!-- End Example Pagination -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Panel Other -->
|
||
<script src="__JS__/jquery.min.js?v=2.1.4"></script>
|
||
<script src="__JS__/bootstrap.min.js?v=3.3.6"></script>
|
||
<script src="__JS__/content.min.js?v=1.0.0"></script>
|
||
<script src="__JS__/plugins/bootstrap-table/bootstrap-table.min.js"></script>
|
||
<script src="__JS__/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
|
||
<script src="__JS__/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
|
||
<script src="__JS__/plugins/layer/layer.min.js"></script>
|
||
<script src="__JS__/layui/layui.js"></script>
|
||
<script type="text/javascript">
|
||
var uri = "{:url('system/wordsLogs')}";
|
||
function initTable(url) {
|
||
//先销毁表格
|
||
$('#cusTable').bootstrapTable('destroy');
|
||
//初始化表格,动态从服务器加载数据
|
||
$("#cusTable").bootstrapTable({
|
||
method: "get", //使用get请求到服务器获取数据
|
||
url: url, //获取数据的地址
|
||
striped: true, //表格显示条纹
|
||
pagination: false, //启动分页
|
||
pageSize: 15, //每页显示的记录数
|
||
pageNumber:1, //当前第几页
|
||
pageList: [5, 10, 15, 20, 25], //记录数可选列表
|
||
sidePagination: "server", //表示服务端请求
|
||
paginationFirstText: "首页",
|
||
paginationPreText: "上一页",
|
||
paginationNextText: "下一页",
|
||
paginationLastText: "尾页",
|
||
queryParamsType : "undefined",
|
||
onClickRow:function(row, $element,field){
|
||
|
||
$("#table-kf").hide();//隐藏客服信息表
|
||
$("#table-user").show();//显示用户信息表
|
||
initTableUser(url+"?kf_id="+row.from_id);//初始化用户表数据 对应客服
|
||
},
|
||
queryParams: function queryParams(params) { //设置查询参数
|
||
var param = {
|
||
pageNumber: params.pageNumber,
|
||
pageSize: params.pageSize,
|
||
searchText:$('#username').val(),
|
||
start:$('#start').val(),
|
||
end: $('#end').val()
|
||
};
|
||
return param;
|
||
},
|
||
onLoadSuccess: function(res){ //加载成功时执行
|
||
if(111 == res.code){
|
||
window.location.reload();
|
||
}
|
||
// layer.msg("加载成功", {time : 1000});
|
||
},
|
||
onLoadError: function(){ //加载失败时执行
|
||
layer.msg("加载数据失败");
|
||
}
|
||
});
|
||
}
|
||
|
||
//初始化表格来获取对应客服的对应用户
|
||
function initTableUser(url){
|
||
//先销毁表格
|
||
$('#cusTable-user').bootstrapTable('destroy');
|
||
|
||
$("#cusTable-user").bootstrapTable({
|
||
method: "get", //使用get请求到服务器获取数据
|
||
url: url, //获取数据的地址
|
||
striped: true, //表格显示条纹
|
||
pagination: true, //启动分页
|
||
pageSize: 15, //每页显示的记录数
|
||
pageNumber:1, //当前第几页
|
||
pageList: [5, 10, 15, 20, 25], //记录数可选列表
|
||
sidePagination: "server", //表示服务端请求
|
||
paginationFirstText: "首页",
|
||
paginationPreText: "上一页",
|
||
paginationNextText: "下一页",
|
||
paginationLastText: "尾页",
|
||
queryParamsType : "undefined",
|
||
uniqueId: "to_id", //每一行的唯一标识，一般为主键列
|
||
clickToSelect: true,
|
||
onClickRow:function(row, $element,field){
|
||
$("#table-user").hide();//隐藏用户信息表
|
||
$("#table-all").show();//显示对应会话记录信息表
|
||
$("#history_user").show();
|
||
initTableAll(url+"&user_name="+row.to_name);//初始化用户表数据 对应客服
|
||
},
|
||
queryParams: function queryParams(params) { //设置查询参数
|
||
var param = {
|
||
pageNumber: params.pageNumber,
|
||
pageSize: params.pageSize,
|
||
searchText:$('#username').val(),
|
||
start:$('#start').val(),
|
||
end: $('#end').val()
|
||
};
|
||
return param;
|
||
},
|
||
onLoadSuccess: function(res){ //加载成功时执行
|
||
if(111 == res.code){
|
||
window.location.reload();
|
||
}
|
||
// layer.msg("加载成功", {time : 1000});
|
||
},
|
||
onLoadError: function(){ //加载失败时执行
|
||
layer.msg("加载数据失败");
|
||
}
|
||
});
|
||
//回退至客服信息页面
|
||
$("#history_kf").click(function () {
|
||
$("#table-kf").show();//回退至客服信息表
|
||
$("#table-user").hide();//隐藏对应会话记录信息表
|
||
});
|
||
}
|
||
|
||
|
||
//初始化表格来获取对应客服和对应用户的历史会话记录
|
||
function initTableAll(url){
|
||
//先销毁表格
|
||
$('#cusTable-all').bootstrapTable('destroy');
|
||
|
||
$("#cusTable-all").bootstrapTable({
|
||
method: "get", //使用get请求到服务器获取数据
|
||
url: url, //获取数据的地址
|
||
striped: true, //表格显示条纹
|
||
pagination: true, //启动分页
|
||
pageSize: 15, //每页显示的记录数
|
||
pageNumber:1, //当前第几页
|
||
pageList: [5, 10, 15, 20, 25], //记录数可选列表
|
||
sidePagination: "server", //表示服务端请求
|
||
paginationFirstText: "首页",
|
||
paginationPreText: "上一页",
|
||
paginationNextText: "下一页",
|
||
paginationLastText: "尾页",
|
||
queryParamsType : "undefined",
|
||
uniqueId: "to_id", //每一行的唯一标识，一般为主键列
|
||
clickToSelect: true,
|
||
queryParams: function queryParams(params) { //设置查询参数
|
||
var param = {
|
||
pageNumber: params.pageNumber,
|
||
pageSize: params.pageSize,
|
||
searchText:$('#username').val(),
|
||
start:$('#start').val(),
|
||
end: $('#end').val()
|
||
};
|
||
return param;
|
||
},
|
||
onLoadSuccess: function(res){ //加载成功时执行
|
||
if(111 == res.code){
|
||
window.location.reload();
|
||
}
|
||
// layer.msg("加载成功", {time : 1000});
|
||
},
|
||
onLoadError: function(){ //加载失败时执行
|
||
layer.msg("加载数据失败");
|
||
}
|
||
});
|
||
//回退至用户信息页面
|
||
$("#history_user").click(function () {
|
||
$("#table-user").show();//回退至用户信息表
|
||
$("#table-all").hide();//删除对应会话记录信息表
|
||
});
|
||
}
|
||
|
||
$(document).ready(function () {
|
||
// 调用函数，初始化表格
|
||
initTable(uri);
|
||
|
||
// 当点击查询按钮的时候执行
|
||
$("#search").bind("click", function(){
|
||
var start = $('#start').val();
|
||
var end = $('#end').val();
|
||
|
||
if((start=='' && end=='') && $("#username").val()==''){
|
||
// layer.msg('请确认查询条件');
|
||
initTable(uri);
|
||
$("#table-kf").show();//显示客服信息表
|
||
$("#table-user").hide();//隐藏用户信息表
|
||
$("#table-all").hide();//隐藏对应会话记录信息表
|
||
}else{
|
||
$("#table-kf").hide();//隐藏客服信息表
|
||
$("#table-user").hide();//隐藏用户信息表
|
||
$("#table-all").show();//显示对应会话记录信息表
|
||
initTableAll(uri);
|
||
$("#history_user").hide();
|
||
}
|
||
|
||
|
||
});
|
||
});
|
||
|
||
layui.use('laydate', function(){
|
||
var laydate = layui.laydate;
|
||
laydate.render({
|
||
elem: '#start'
|
||
,type: 'date'
|
||
});
|
||
|
||
laydate.render({
|
||
elem: '#end'
|
||
,type: 'date'
|
||
});
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|