261 lines
9.8 KiB
HTML
261 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>离线用户</title>
|
||
</head>
|
||
<link href="__CDN__/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
|
||
<link href="/static/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
|
||
<link href="__CDN__/static/admin/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
|
||
<link href="__CDN__/static/admin/css/animate.min.css" rel="stylesheet">
|
||
<link href="__CDN__/static/admin/css/style.min.css?v=4.1.0" rel="stylesheet">
|
||
<link rel="stylesheet" href="/static/admin/js/layui/css/layui.css" media="all">
|
||
<style>
|
||
.layui-table-cell {
|
||
height: auto !important;
|
||
}
|
||
|
||
.search-tool {
|
||
height: 38px;
|
||
line-height: 38px;
|
||
}
|
||
|
||
.search-tool span {
|
||
float: left;
|
||
}
|
||
|
||
.search-tool input {
|
||
width: 70%;
|
||
}
|
||
|
||
.layui-table-view {
|
||
margin-top: 55px !important;
|
||
}
|
||
</style>
|
||
|
||
<body class="gray-bg">
|
||
<div class="wrapper wrapper-content animated fadeInRight">
|
||
<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_time" placeholder="开始日期"> --
|
||
<input type="text" class="form-control" id="end_time" placeholder="结束日期">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>用户名称或id：</label>
|
||
<input type="text" class="form-control" id="search_input" name="search_input">
|
||
</div>
|
||
<div class="form-group">
|
||
<button class="btn btn-primary" type="button" style="margin-top:5px" id="search"
|
||
data-type="reload">
|
||
<strong>搜 索</strong>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<table id="orderlist" lay-filter="test" class="layui-hide"></table>
|
||
</div>
|
||
</div>
|
||
<script src="__CDN__/static/admin/js/jquery.min.js"></script>
|
||
<script src="__CDN__/static/admin/js/layui/layui.js"></script>
|
||
<!-- 列表操作 -->
|
||
<script type="text/html" id="operation">
|
||
<a class="layui-btn layui-btn-xs" lay-event="open_window">对话</a>
|
||
<!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" onclick="javascript:;">删除</a>-->
|
||
</script>
|
||
<!-- 用户头像 -->
|
||
<script type="text/html" id="show_img">
|
||
<img src="{{d.user_avatar}}" alt="头像" width="35">
|
||
</script>
|
||
<script>
|
||
var layer;
|
||
layui.use('layer', function () {
|
||
layer = layui.layer;
|
||
});
|
||
layui.use('table', function () {
|
||
let table = layui.table;
|
||
// 加载列表
|
||
table.render({
|
||
elem: '#orderlist',
|
||
url: "{:url('Dialogue/dialogueList')}",
|
||
where: {
|
||
start_time: '',
|
||
end_time: '',
|
||
search_input: '',
|
||
},
|
||
page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
|
||
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
|
||
//,curr: 5 //设定初始在第 5 页
|
||
,
|
||
limit: 10 //一页显示多少条
|
||
,
|
||
limits: [10, 20, 25, 30, 40, 50, 100] //每页条数的选择项
|
||
,
|
||
groups: 5 //只显示 2 个连续页码
|
||
,
|
||
first: "首页" //不显示首页
|
||
,
|
||
last: "尾页" //不显示尾页
|
||
},
|
||
cols: [
|
||
[
|
||
{
|
||
field: 'user_id',
|
||
title: '用户id',
|
||
align: 'center',
|
||
sort: true
|
||
},
|
||
{
|
||
field: 'user_name',
|
||
title: '用户名',
|
||
align: 'center',
|
||
sort: false
|
||
},
|
||
{
|
||
field: 'user_avatar',
|
||
title: '用户头像',
|
||
align: 'center',
|
||
templet: '#show_img'
|
||
},
|
||
{
|
||
field: 'user_ip',
|
||
title: '用户ip',
|
||
align: 'center',
|
||
sort: false
|
||
},
|
||
{
|
||
field: 'start_time',
|
||
title: '开始时间',
|
||
align: 'center',
|
||
sort: true
|
||
},
|
||
{
|
||
field: 'end_time',
|
||
title: '结束时间',
|
||
align: 'center',
|
||
sort: true
|
||
},
|
||
{
|
||
field: 'group_id',
|
||
title: '所在群组',
|
||
align: 'center',
|
||
sort: true
|
||
},
|
||
{
|
||
field: 'line_status',
|
||
title: '在线状态',
|
||
align: 'center',
|
||
sort: true
|
||
},
|
||
{
|
||
field: 'right',
|
||
title: '操作',
|
||
align: 'center',
|
||
toolbar: '#operation'
|
||
},
|
||
]
|
||
],
|
||
text: {
|
||
none: '暂无相关数据', //默认：无数据。
|
||
},
|
||
id: 'testReload'
|
||
});
|
||
|
||
// 重载列表
|
||
var $ = layui.$,
|
||
active = {
|
||
reload: function () {
|
||
var start_time = $('#start_time').val();
|
||
var end_time = $('#end_time').val();
|
||
var search_input = $('#search_input').val();
|
||
//执行重载
|
||
table.reload('testReload', {
|
||
url: "{:url('Dialogue/dialogueList')}",
|
||
method: 'get',
|
||
page: {
|
||
curr: 1 //重新从第 1 页开始
|
||
},
|
||
where: {
|
||
start_time: start_time,
|
||
end_time: end_time,
|
||
search_input: search_input,
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
$('#search').on('click', function () {
|
||
var type = $(this).data('type');
|
||
// 搜索条件
|
||
var start_time = $('#start_time').val();
|
||
var end_time = $('#end_time').val();
|
||
var search_input = $('#search_input').val();
|
||
if (!start_time && !end_time && !search_input) {
|
||
// layer.msg('搜索条件不能为空');
|
||
// return;
|
||
}
|
||
active[type] ? active[type].call(this) : '';
|
||
});
|
||
|
||
//监听工具条
|
||
table.on("tool(test)", function (obj) {
|
||
var data = obj.data;
|
||
console.log(data);
|
||
var total = $('.layui-laypage-count').text();
|
||
if (obj.event === 'open_window') {
|
||
// 打开对话窗口
|
||
layer.open({
|
||
type: 2,
|
||
// area: ['auto', '850px'],
|
||
area: ['80%', '90%'],
|
||
content: "/service/Dialogue/offLineDialogueRoom/?id=" + data.id,
|
||
});
|
||
} else if (obj.event === 'del') {
|
||
layer.confirm('确定删除吗?', function (index) {
|
||
$.post('/service/Dialogue/delDialogue', {
|
||
id: data.id
|
||
}, function (res) {
|
||
console.log(res);
|
||
if (res.code == 1) {
|
||
// 更改统计数
|
||
var total = $('.layui-laypage-count').text();
|
||
total = total.substring(2, 3) - 1;
|
||
$('.layui-laypage-count').text('共 ' + total + ' 条');
|
||
obj.del();
|
||
layer.close(index);
|
||
} else {
|
||
layer.msg(res.msg);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
|
||
});
|
||
|
||
layui.use('laydate', function () {
|
||
var laydate = layui.laydate;
|
||
laydate.render({
|
||
elem: '#start_time',
|
||
type: 'date'
|
||
});
|
||
|
||
laydate.render({
|
||
elem: '#end_time',
|
||
type: 'date'
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |