mirror of
https://gitee.com/zhc02/timely_service.git
synced 2025-07-01 06:34:47 +08:00
238 lines
9.3 KiB
HTML
238 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>layui</title>
|
||
<meta name="renderer" content="webkit">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<link rel="stylesheet" href="/static/lib/layui-v2.5.4/css/layui.css" media="all">
|
||
<link rel="stylesheet" href="/static/css/public.css" media="all">
|
||
</head>
|
||
<style>
|
||
#currentTableId + .layui-table-view .layui-table-body tbody > tr > td {
|
||
padding: 0;
|
||
}
|
||
|
||
#currentTableId + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
|
||
height: 60px;
|
||
line-height: 60px;
|
||
}
|
||
|
||
.tdImg {
|
||
width: 50px;
|
||
height: 50px;
|
||
max-width: none;
|
||
cursor: zoom-in;
|
||
}
|
||
|
||
.layui-table-view {
|
||
margin: 0;
|
||
}
|
||
|
||
</style>
|
||
<body>
|
||
<div class="layuimini-container">
|
||
<div class="layuimini-main">
|
||
|
||
<fieldset class="layui-elem-field layuimini-search">
|
||
<legend>搜索信息</legend>
|
||
<div style="margin: 10px 10px 10px 10px">
|
||
<form class="layui-form layui-form-pane" action="">
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">客服姓名</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="username" autocomplete="off" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">在线状态</label>
|
||
<div class="layui-input-inline mr0">
|
||
<select name="online">
|
||
<option value="">所有</option>
|
||
<option value="1">在线</option>
|
||
<option value="2">离线</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-inline">
|
||
<a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<div class="layui-btn-group">
|
||
<button class="layui-btn data-add-btn">添加</button>
|
||
</div>
|
||
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
|
||
<script type="text/html" id="currentTableBar">
|
||
<a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
|
||
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
|
||
</script>
|
||
</div>
|
||
</div>
|
||
<!-- 表单弹窗 -->
|
||
<script type="text/html" id="modelUser">
|
||
<form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form" style="padding: 25px 30px 0 0;">
|
||
<input name="kf_id" type="hidden"/>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">客服名</label>
|
||
<div class="layui-input-block">
|
||
<input name="kefu_name" placeholder="请输入客服名" type="text" class="layui-input" maxlength="20"
|
||
lay-verType="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">客服名</label>
|
||
<div class="layui-input-block">
|
||
<input name="kefu_password" placeholder="请输入客服密码" type="password" class="layui-input" maxlength="20"
|
||
lay-verType="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item text-right" style="text-align: right;">
|
||
<button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
|
||
<button class="layui-btn" lay-filter="modelSubmitUser" lay-submit>保存</button>
|
||
</div>
|
||
</form>
|
||
</script>
|
||
|
||
<script src="/static/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
|
||
<script>
|
||
layui.use(['form', 'table','layer'], function () {
|
||
var $ = layui.jquery,
|
||
form = layui.form,
|
||
table = layui.table;
|
||
var layer = layui.layer;
|
||
|
||
// 点击图片放大
|
||
$(document).off('click.tbImg').on('click.tbImg', '[tb-img]', function () {
|
||
layer.photos({photos: {data: [{src: $(this).attr('src')}]}, shade: .1, closeBtn: true});
|
||
});
|
||
table.render({
|
||
elem: '#currentTableId',
|
||
url: '/kefuList',
|
||
limit:20,
|
||
limits:[20,30,50],
|
||
cellMinWidth: 100,
|
||
response: {
|
||
statusCode: 1000 //规定成功的状态码，默认：0
|
||
},
|
||
cols: [[
|
||
{field: 'kefu_id', width: 80, title: 'ID', align: 'center'},
|
||
{field: 'kefu_code', width: 200, title: '客服编码'},
|
||
{field: 'kefu_name', title: '客服名称',align: 'center'},
|
||
{align: 'center', templet: function (d) {
|
||
var url = d.kefu_avatar;
|
||
return '<img src="' + url + '" class="tdImg" tb-img/>';
|
||
}, title: '客服头像', width: 200, unresize: true
|
||
},
|
||
{
|
||
field: 'online_status', align: 'center', templet: function (d) {
|
||
var strs = {
|
||
1: '<span class="text-success" style="color: #0abb87;">上线</span>',
|
||
2: '<span class="text-danger" style="color: red;">离线</span>'
|
||
};
|
||
return strs[d.online_status]?strs[d.online_status]:strs[2];
|
||
}, title: '在线状态'
|
||
},
|
||
{field: 'create_time', title: '创建时间', minWidth: 150,align: 'center'},
|
||
|
||
{title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
|
||
]],
|
||
page: true
|
||
});
|
||
|
||
// 监听搜索操作
|
||
form.on('submit(data-search-btn)', function (data) {
|
||
var result = JSON.stringify(data.field);
|
||
layer.alert(result, {
|
||
title: '最终的搜索信息'
|
||
});
|
||
|
||
//执行搜索重载
|
||
table.reload('currentTableId', {
|
||
page: {
|
||
curr: 1
|
||
}
|
||
, where: {
|
||
searchParams: result
|
||
}
|
||
}, 'data');
|
||
|
||
return false;
|
||
});
|
||
|
||
// 监听添加操作
|
||
$(".data-add-btn").on("click", function () {
|
||
showEditModel();
|
||
});
|
||
|
||
// 监听删除操作
|
||
$(".data-delete-btn").on("click", function () {
|
||
var checkStatus = table.checkStatus('currentTableId')
|
||
, data = checkStatus.data;
|
||
layer.alert(JSON.stringify(data));
|
||
});
|
||
|
||
//监听表格复选框选择
|
||
table.on('checkbox(currentTableFilter)', function (obj) {
|
||
console.log(obj)
|
||
});
|
||
|
||
table.on('tool(currentTableFilter)', function (obj) {
|
||
var data = obj.data;
|
||
if (obj.event === 'edit') {
|
||
layer.alert('编辑行：<br>' + JSON.stringify(data))
|
||
} else if (obj.event === 'delete') {
|
||
layer.confirm('真的删除行么', function (index) {
|
||
obj.del();
|
||
layer.close(index);
|
||
});
|
||
}
|
||
});
|
||
// 显示表单弹窗
|
||
function showEditModel(mUser) {
|
||
layer.open({
|
||
type: 1,
|
||
title: (mUser ? '修改' : '添加') + '客服',
|
||
area: ['500px', '400px'],
|
||
content: $('#modelUser').html(),
|
||
success: function (layero, dIndex) {
|
||
$(layero).children('.layui-layer-content').css('overflow', 'visible');
|
||
var url = mUser ? '/mer/kefu/updateKefu' : '/mer/kefu/addKefu';
|
||
mUser && (mUser.gid = mUser.g_id);
|
||
// 回显数据
|
||
form.val('modelUserForm', mUser);
|
||
// 表单提交事件
|
||
form.on('submit(modelSubmitUser)', function (data) {
|
||
layer.load(2);
|
||
$.post(url, data.field, function (res) {
|
||
layer.closeAll('loading');
|
||
if (res.code == 1000) {
|
||
layer.close(dIndex);
|
||
layer.msg(res.message, {icon: 1});
|
||
insTb.reload({}, 'data');
|
||
} else {
|
||
layer.msg(res.message, {icon: 2});
|
||
}
|
||
}, 'json');
|
||
return false;
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
</script>
|
||
<script>
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|