TG.WXCRM.V4/WEB/Views/Live/LiveUserWework.cshtml

540 lines
22 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@using WX.CRM.WebHelper
@using WX.CRM.Model.DTO;
@{
/**/
/**/
ViewBag.Title = "bas_salesDepartment";
Layout = "~/Views/Shared/_content.cshtml";
}
<script src="/Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link href="/Content/themes/blue/easyui.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<script src="/Scripts/common.js"></script>
<link href="/Content/data_grid_list.css" rel="stylesheet" />
<script src="/Scripts/op/jquery.rewrite.js"></script>
<style>
.total {
color: #01AAED;
font-weight: bolder;
margin-right: 10px;
}
.layui-table-cell {
height: 40px !important;
line-height: 40px !important;
}
.layui-form-checkbox {
margin: 0 !important;
}
</style>
<div class="mvctool">
@*@Html.ToolButton("btnExport", "icon-export", "导出", true)*@
@Html.Action("ToolBar", "Control", ViewBag.ToolBar as ToolBar)
</div>
<div class="layui-card" id="topcard" style="width:100%;">
<div class="layui-card-body " id="contentBody">
<form class="layui-form" id="weworkmyform">
<div class="layui-form-item">
@Html.Action("UserGroupSSOComBox", "Control", new { currentRight = WX.CRM.WebHelper.InitRights.CONST_直播客户列表 })
@*销售组:
<div class="layui-inline" style="width:300px">
<select id="groupid" name="groupid" lay-filter="groupid">
<option value="">请选择</option>
</select>
</div>
员工:
<div class="layui-inline" style="width:150px">
<select id="user" name="user">
<option value="">请选择</option>
</select>
</div>*@
员工姓名:
<div class="layui-inline">
<input type="text" name="employeeName" style="width:120px" />
</div>
工号:
<div class="layui-inline">
<input type="text" name="eid" style="width:120px" />
</div>
@*企业号:
<div class="layui-inline">
<input type="text" name="appname" style="width:120px" />
</div>
企微客服ID
<div class="layui-inline">
<input type="text" name="customerid" style="width:120px" />
</div>*@
客户ID
<div class="layui-inline">
<input type="text" name="umid" style="width:120px" />
</div>
客户昵称:
<div class="layui-inline">
<input type="text" name="nickname" style="width:120px" />
</div>
直播日期:
<div class="layui-inline">
<input class="layui-input" placeholder="开始日" name="livingDateFrom" id="livingDateFrom" style="width:120px;">
</div>
<div class="layui-inline">
<input class="layui-input" placeholder="结束日" name="livingDateTo" id="livingDateTo" style="width:120px;">
</div>
进线时间:
<div class="layui-inline">
<input class="layui-input" placeholder="开始时间" name="createTimeFrom" id="createTimeFrom" style="width:120px;">
</div>
<div class="layui-inline">
<input class="layui-input" placeholder="结束时间" name="createTimeTo" id="createTimeTo" style="width:120px;">
</div>
课程名称:
<div class="layui-inline">
<input type="text" name="title" style="width:120px" />
</div>
客户是否为员工账号:
<div class="layui-inline">
<select name="userType" style="height:35px;">
<option value="">全部</option>
<option value="0">是</option>
<option value="1">否</option>
</select>
</div>
是否连麦:
<div class="layui-inline">
<select name="isOnline" style="height:35px;">
<option value="">全部</option>
<option value="1">是</option>
<option value="0">否</option>
</select>
</div>
是否发言:
<div class="layui-inline">
<select name="isFinish" style="height:35px;">
<option value="">全部</option>
<option value="1">是</option>
<option value="0">否</option>
</select>
</div>
客户数据:
<div class="layui-inline">
<select name="whole" style="height:35px;">
<option value="0">去重</option>
<option value="1" selected>不去重</option>
</select>
</div>
听课时长:
<div class="layui-inline">
<input type="text" name="watchTimeFrom" style="width:120px" />
</div>
-
<div class="layui-inline">
<input type="text" name="watchTimeTo" style="width:120px" />
</div>
分钟
<div class="layui-inline">
<input style="margin:0;" type="checkbox" value="1" name="employeeStatusCheck" lay-skin="primary" title="不显示离职员工" lay-filter="employeeStatusCheck">
</div>
好友关系:
<div class="layui-inline">
<select name="isWework" style="height:35px;">
<option value="">全部</option>
<option value="1">有</option>
<option value="0">无</option>
</select>
</div>
<div class="layui-inline" style="display:flex;">
<input class="layui-btn layui-btn-sm layui-btn-ok" id="search" data-method="wewrok_search" type="button" value="查询" />
<input class="layui-btn layui-btn-sm layui-btn-reset" id="reset" type="button" value="清空" />
<input class="layui-btn layui-btn-sm layui-btn-reset" style="display:none" id="onreset" type="reset" value="" />
</div>
</div>
</form>
<div>
数据汇总: 听课员工数:<span class="total" id="StaffNum"></span>
全部听课客户数:<span class="total" id="TotalNum"></span>
本事业部听课客户数:<span class="total" id="UserNum"></span>
听课20分钟以上的客户数<span class="total" id="WatchNum20"></span>
客户平均听课时长:<span class="total" id="AvgWatchTimeStr"></span>
</div>
<table class="layui-hide" id="weworklist" lay-filter="weworklist"></table>
</div>
</div>
<script>
layui.use('laydate', function () {
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#livingDateFrom', //指定元素
value: getDate()
});
//执行一个laydate实例
laydate.render({
elem: '#livingDateTo' //指定元素
});
//执行一个laydate实例
laydate.render({
elem: '#statustime' //指定元素
});
//执行一个laydate实例
laydate.render({
elem: '#statusEndtime' //指定元素
});
laydate.render({
elem: '#createTimeFrom' //指定元素
});
//执行一个laydate实例
laydate.render({
elem: '#createTimeTo' //指定元素
});
});
var selectRow = {};
var winindex;
var layer;
var rowid;
var form;
var employeeStatus = null;
//注意:选项卡 依赖 element 模块,否则无法进行功能性操作
layui.use(['laypage', 'layer', 'table', 'laydate', 'form'], function () {
form = layui.form;
var laydate = layui.laydate;
layer = layui.layer;
table = layui.table;
var where = $("#weworkmyform").serializeFormJSON();
where.livingDateFrom = getDate();
where.employeeStatus = employeeStatus;
TotalReload(where);
table.render({
id: 'weworklist'//列表别名ID
, elem: '#weworklist'
, url: '@Html.Raw(ViewBag.webapi + "/api/Live/Wework")'
//, url: '@Html.Raw("https://localhost:44377/api/Live/Wework")'
, method: 'get'
, dataType: 'json'
, headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid' }
, request: {
pageName: 'currentPage' //页码的参数名称默认page
, limitName: 'pageSize' //每页数据量的参数名默认limit
}
, response: {
statusName: 'code' //规定数据状态的字段名称默认code
, statusCode: 0 //规定成功的状态码默认0
, msgName: 'message' //规定状态信息的字段名称默认msg
},
parseData: function (res) { //res 即为原始返回的数据
if (res.code !== 0) {
layer.msg(res.message, { icon: 2 });
return {
"code": res.code, //解析接口状态
"msg": res.message, //解析提示文本
"count": 0, //解析数据长度
"data": [] //解析数据列表
}
}
return {
"code": res.code, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.data.total, //解析数据长度
"data": res.data.tableData //解析数据列表
};
}
, cellMinWidth: 80 //全局定义常规单元格的最小宽度layui 2.2.1 新增
, page: true
, limit: 10
, size: "sm"
, cols: [[
{ type: 'checkbox', hide: true }
, { field: 'id', title: '序号', type: 'numbers' }
, { field: 'dept_name', title: '事业部', width: 130 }
, { field: 'group_name', title: '组别', width: 100 }
//, { field: 'app_name', title: '企业号', width: 120 }
//, { field: 'userid', title: '企微客服ID', width: 120 }
, { field: 'eid', title: '工号' }
, { field: 'employee_name', title: '客服' }
, {
field: 'is_wework ', title: '好友关系', templet: function (b) {
if (b.is_wework === null || b.is_wework === '') return '';
return b.is_wework == 1 ? '有' : '无';
}
}
, { field: 'appname', title: '直播企微' }
, { field: 'title', title: '课程名称' }
, {
field: 'umid', title: '客户ID', width: 150, templet: function (d) {
if (!d.umid) {
return "";
}
return "<div><a href=\"javascript:AddTab('" + d.username + "', '/Csvr/CustomerInfo/CustomerDetail?resid=" + d.umid + "', ' ')\" class=\"layui-table-link\">" + d.umid + "</a></div>"
}
}
, { field: 'username', title: '真实姓名', width: 120 }
, { field: 'user_type', title: '客户是否为员工账号', templet: '#userTypeTpl', width: 70 }
, { field: 'headimgurl', title: '线索', templet: '#residTpl' }
, { field: 'headimgurl', title: '头像', templet: "#headimgurlTpl" }
, { field: 'nickname', title: '昵称' }
//, { field: 'REMARK', title: '评论数' }
//, { field: 'total_watch_time', title: '平均听课时长' }
, { field: 'is_comment', title: '是否发言', templet: '#commentTypeTpl', width: 70 }
, { field: 'is_mic', title: '是否连麦', templet: '#micTypeTpl', width: 70 }
, { field: 'watch_time_str', title: '听课时长', width: 150, sort: true }
, { field: 'living_date', title: '直播日期', width: 150, sort: true }
, { field: 'create_time', title: '进线时间', width: 150, sort: true }
]], where: where
});
InitGroup();
//监听行单击事件
table.on('row(tabl1)', function (obj) {
var data = obj.data;
//标注选中样式
console.log(data);
obj.tr.addClass('self-table-click').siblings().removeClass('self-table-click');
selectRow = data;
});
// 选择事业部事件
form.on('select(groupid)', function (data) {
var val = data.value;
InitInnerusers(val);
});
var active = {
wewrok_search: function (sortBy) {
var where = $("#weworkmyform").serializeFormJSON();
if (sortBy) {
where.sortBy = sortBy;
}
where.employeeStatus = employeeStatus;
if (!where.livingDateFrom) {
layer.msg('请选择直播日期开始日期!', { icon: 2 });
return;
} else if (where.livingDateTo) {
var day = diffDay(where.livingDateTo, where.livingDateFrom);
if (day < 0 || day > 31) {
layer.msg('直播日期选择不能超过一个月,请重新选择!', { icon: 2 });
return;
}
} else {
var day = diffDay(getDate(), where.livingDateFrom);
if (day < 0 || day > 31) {
layer.msg('直播日期选择不能超过一个月,请重新选择!', { icon: 2 });
return;
}
}
TotalReload(where);
table.reload('weworklist', {
where: where,
page: {
curr: 1
}
});
}
};
$('#search').on('click', function () {
var othis = $(this), method = othis.data('method');
console.log(method);
active[method] ? active[method]() : '';
});
// 触发排序事件
table.on('sort()', function (obj) {
console.log(obj.field); // 当前排序的字段名
let dict = new Map([
['watch_time_str', 'watch_time']
]);
var field = dict.get(obj.field) ? dict.get(obj.field) : obj.field;
console.log(obj.type); // 当前排序类型desc降序、asc升序、null空对象默认排序
active['wewrok_search'](field + (obj.type == "desc" ? " desc" : ""));
});
$('#reset').on('click', function () {
document.getElementById("onreset").click();
employeeStatus = null;
clear();
});
form.on('checkbox(employeeStatusCheck)', function (data) {
if (data.elem.checked) {
employeeStatus = 1;
} else {
employeeStatus = null;
}
})
});
function ShowLog(id) {
var width = $(window).width() * 0.8;
var height = $(window).height() * 0.8;
layer.open({
type: 2,
content: '/Cms/CmsUp/Log?Id=' + id,
title: "明细",
area: [width + 'px', height + 'px']
});
}
function AddTab(name, url) {
window.parent.postMessage({ name: name, url: url }, '*');
}
function Closed() {
layer.close(winindex);
}
function ComBoxOnSelect() {
}
function TableReload() {
table.reload('listReload', {
});
}
function TotalReload(data) {
$.ajax({
type: "GET",
url: '@Html.Raw(ViewBag.webapi + "/api/Live/WeworkStat")',
data: data,
headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid' },
dataType: "json",
contentType: "application/json",
success: function (da) {
$('#UserNum').html(da.data.user_num);
$('#TotalNum').html(da.data.total_num);
$('#StaffNum').html(da.data.staff_num);
$('#WatchNum20').html(da.data.watch_num_20);
$('#WatchNum30').html(da.data.watch_num_30);
$('#AvgWatchTimeStr').html(da.data.avgWatchTimeStr);
},
error: function () {
layer.close(loadingindex);
layer.msg('统计数据加载失败!', { icon: 2 });
}
});
}
function InitGroup() {
$.ajax({
type: "GET",
url: '@Html.Raw(ViewBag.webapi + "/api/Live/DeptMent")',
headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid' },
dataType: "json",
contentType: "application/json",
success: function (da) {
$(da.data).each(function (n, m) {
$("#groupid").append(new Option(m.title, m.id));
});
form.render('select');
},
error: function () {
layer.close(loadingindex);
layer.msg('统计数据加载失败!', { icon: 2 });
}
});
}
function InitInnerusers(groupid) {
$.ajax({
type: "GET",
url: '@Html.Raw(ViewBag.webapi + "/api/Live/Innerusers?groupid=")' + groupid,
headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid' },
dataType: "json",
contentType: "application/json",
success: function (da) {
$("#user").html("");
$("#user").append(new Option('请选择', ''));
$(da.data).each(function (n, m) {
$("#user").append(new Option(m.title, m.id));
});
form.render('select');
},
error: function () {
layer.close(loadingindex);
layer.msg('统计数据加载失败!', { icon: 2 });
}
});
}
function OpenSalesLead(id, appuserid, app_id) {
layer.open({
type: 2,
content: '/Live/SalesLeads?resid=' + id + '&appuserid=' + appuserid + '&app_id=' + app_id,
title: "销售线索",
area: ['1000px', '600px']
});
}
function getDate() {
var date = new Date();
date = date.setDate(date.getDate());
date = new Date(date);
var month = date.getMonth() + 1; //月份从0开始所以需要+1
var day = date.getDate();
return date.getFullYear() + '-' + month + '-' + day;
}
function Export() {
var param = $("#weworkmyform").serializeFormJSON();
if (employeeStatus != null) {
param.employeeStatus = employeeStatus;
} else {
param.employeeStatus = "";
}
param.pageSize = $(".layui-laypage-count").text().replace("共", "").replace("条", "").trim();
param.currentPage = 1;
console.log(param);
var queryString = "";
for (var key in param) {
if (queryString != "") queryString += "&";
queryString += key + "=" + encodeURIComponent(param[key]);
}
window.open("/Live/LiveUserWeworkExport?" + queryString);
}
//导出监听
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
Export();
}
function diffDay(lastDate, earlyDate) {
return (Date.parse(lastDate) - Date.parse(earlyDate)) / 1000 / 60 / 60 / 24;
}
</script>
<script type="text/html" id="userTypeTpl">
{{# if(d.user_type == 1){ }}
{{# } else if(d.user_type == 0) { }}
{{# } }}
</script>
<script type="text/html" id="commentTypeTpl">
{{# if(d.is_comment == 1){ }}
{{# } else if(d.is_comment == 0) { }}
{{# } }}
</script>
<script type="text/html" id="micTypeTpl">
{{# if(d.is_mic == 1){ }}
{{# } else if(d.is_mic == 0) { }}
{{# } }}
</script>
<script type="text/html" id="headimgurlTpl">
{{# if(d.headimgurl != "" && d.headimgurl != null){ }}
<img src="{{d.headimgurl}}" width="50" height="50" />
{{# } }}
</script>
<script type="text/html" id="statusTpl">
{{# if(d.STATUS == 1){ }}
<span>通过</span>
@*<img src="/Content/Images/checked.png" style="height:20px;width:20px;" />*@
@*<i class="layui-icon layui-icon-ok layui-bg-green"></i>*@
{{# } else if(d.STATUS == -1) { }}
<span>未通过</span>
@*<i class="layui-icon layui-icon-close layui-bg-red"></i>*@
@*<img src="/Content/Images/unchecked.png" style="height:18px;width:18px;" />*@
{{# } else { }}
<span>未审核</span>
@*<i class="layui-icon layui-icon-more layui-bg-blue"></i>*@
@*<img src="/Content/Images/checking.png" style="height:16px;width:16px;" />*@
{{# } }}
</script>
<script type="text/html" id="residTpl">
@*{{# if(d.resid != null && d.resid != ""){ }}*@
<a href="javascript:OpenSalesLead('{{d.resid}}','{{d.resid?d.appuserid:d.c_appuserid}}','{{d.resid?d.app_id:d.c_appid}}')" class="layui-table-link">查看</a>
@*{{# } }}*@
</script>