zhengbingbing
/
XinXiangXLX_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>通话记录管理</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="../css/init.css" rel="stylesheet" />
		<link href="../css/Table/table1.css" rel="stylesheet" />
		<link rel="stylesheet" href="../js/select2/css/select2.min.css" />
		<link rel="stylesheet" href="../js/zTree/zTreeStyle.css" />
		<script src="../Script/Common/huayi.load.js"></script>
		<script src="../Script/Common/huayi.config.js"></script>
		<script src="../js/zTree/jquery.ztree.core.js"></script>
		<script src="../js/laydate/laydate.js"></script>
		<style>
			.sc_btn {}
			
			.select2-container--default .select2-selection--single {
				border: 1px solid #e5e6e7;
			}
			
			.select2-dropdown {
				border: 1px solid #e5e6e7;
				width: 200px;
			}
			
			.select2-container .select2-selection--single {
				height: 34px;
			}
			
			.select2-container {
				width: 130px!important;
			}
			
			.select2-selection__rendered {
				line-height: 34px;
			}
			
			.LY:hover {
				color: #fff;
			}
			
			.LY:active {
				color: #fff!important;
			}
			
			.xl {
				margin-left: -17px;
				margin-right: 20px;
				margin-top: -4px;
				cursor: pointer;
			}
			
			#menuContent {
				background: #fff;
				position: absolute;
				width: 100%;
				border: 1px solid darkgrey;
				right: 0;
				top: 34px;
				z-index: 10;
				display: none;
				overflow-y: auto;
			}
			
			#treeDemo li {
				width: 100%;
			}
			
			#citySel {
				border: none;
				height: 25px;
				padding-left: 12px;
			}
			
			.clears {
				cursor: pointer;
				padding-left: 19px;
				padding-top: 5px;
			}
			
			.clears:hover {
				background: #ebebeb;
			}
			
			.toolBox .form-group {
				margin-bottom: 10px;
			}
		</style>
	</head>

	<body class="gray-bg">
		<div class="daoHang clearfix">
			<div class="dhLeft">
				<sapn><i class="syIcon"></i>位置：
					<a href="javaScript:;" id="ReIndex">首页</a>&gt;
					<a href="javaScript:;">话务管理</a>&gt;
					<a href="" class="nowPosition">通话记录</a>
				</sapn>
			</div>
			<div class="dhRight">
				<a href="#" title="刷新"><i class="fa fa-refresh"></i></a>
			</div>
		</div>
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="toolBox clearfix">
				<div class="pull-left">
					<div class="form-inline">
						<div class="time-box form-group">
							<i class="tub fa fa-calendar"></i>
							<input class="form-control search_time" type="text" id="ss_kssj" placeholder="请选择起止时间">
						</div>
						<div class="form-group">
							<select id="ss_hjzt" class="form-control">
								<option value="">请选择呼叫状态</option>
								<option value="0">未接通</option>
								<option value="1">已接通</option>
							</select>
						</div>
						<div class="form-group">
							<select id="ss_hcfx" class="form-control">
								<option value="">请选择呼出方向</option>
								<option value="0">呼入</option>
								<option value="1">呼出</option>
							</select>
						</div>

						<div class="form-group BMs" style="position: relative;">
							<div class="company">
								<div class="inpBox" id="organizer">
									<input id="citySel" class="photo x-color" readonly autocomplete="off" placeholder="请选择部门" />
									<i class="xl xl_one caret" id="xl_one"></i>
									<div id="menuContent" class="menuContent">
										<div class="clears">请选择部门</div>
										<ul id="treeDemo" class="ztree"></ul>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group">
							<input id="tel" type="text" class="form-control" placeholder="请输入电话号码" />
						</div>
						<div class="form-group">
							<select id="seat" class="form-control">
								<option value="">请选择坐席</option>
							</select>
						</div>
						<div class="form-group">
							<select id="ChuliRen" class="form-control">
								<option value="">请选择处理方式</option>
								<option value="0">IVR处理</option>
								<option value="1">骚扰电话</option>
								<option value="2">自助服务</option>
								<option value="3">转值班电话</option>
								<option value="4">留言</option>
								<option value="5">呼损</option>
								<option value="6">人工处理</option>
							</select>
						</div>
					</div>
				</div>
				<div class="pull-right">
					<a class="sc_btn search">搜索</a>
					<a class="sc_btn export">导出</a>
				</div>
			</div>

			<div style="width: 100%;padding: 10px;">
				<table id="list" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
					<thead>
						<tr>
							<th data-field="CallNumber" data-align="center" data-formatter="Code">编号</th>
							<th data-field="CusName" data-align="center">客户姓名</th>
							<th data-field="CallNumber" data-formatter="helper.filter.cutTel" data-align="center">电话号码</th>
							<th data-field="FilePath" data-formatter="setCode" data-align="center">录音</th>
							<th data-field="Description" data-align="center">问题描述</th>
							<th data-field="CallType" data-formatter="callType" data-align="center">呼叫方向</th>
							<th data-field="DealType" data-formatter="formatterDealType" data-align="center">处理方式</th>
							<th data-field="CallState" data-formatter="states" data-align="center">呼叫状态</th>
							<th data-field="DeptName" data-align="center">部门</th>
							<th data-field="UserCode" data-align="center">坐席工号</th>
							<th data-field="UserName" data-align="center">坐席姓名</th>
							<th data-field="BeginTime" data-align="center">来电时间</th>
							<th data-field="TalkStartTime" data-align="center">通话开始时间</th>
							<th data-field="TalkEndTime" data-align="center">通话结束时间</th>
							<th data-field="TalkLongTime" data-align="center">通话时长（S）</th>
							<th data-field="CallId" data-align="center" data-formatter="TX">操作</th>
						</tr>
					</thead>
				</table>
				<!--高级搜索框-->
			</div>
		</div>
		<!--下载框-->
		<div class="t-shade">
			<div class="shade_k">
				<div class="shade_title">
					<span>录音播放与下载<srong class="cknum"></srong></span>
					<span class="setwin"><a>x</a></span>
				</div>
				<div class="shade_content">
					<div class="Ly_box audiojs">
					</div>
					<div class="boxCon LY_box">

					</div>
				</div>
			</div>
		</div>

		<script>
			var stype = 1;
			var seatlist = [];
			var RoleId;
			var saveArrs = [];
			var IDs = '';
			var Names;
			$(document).ready(function() {
				//留言时间
				laydate.render({
					elem: '#ss_kssj',
					theme: '#1ab394',
					calendar: true,
					range: '~'
				});
				$('.clears').click(function() {
					$('#citySel').val('请选择部门');
					IDs = '';
					$('#menuContent').css('display', 'none');
				});
				$('#citySel').click(function() {
					$('#menuContent').css('display', 'block')
				});
				$('#menuContent').mouseleave(function() {
					$(this).css('display', 'none')
				});

				$.getJSON(huayi.config.callcenter_url + 'UserAccount/GetNowUser', {
					"token": $.cookie("token")
				}, function(result) {
					if(result.state.toLowerCase() == "success") {
						RoleId = result.data.role.F_RoleId
						if(RoleId != "17") { //非系统管理员显示
							$('.BMs').hide();
							$('.SZBN').hide();
						}
					}
				})
				/*获取选中行对象*/
				$('#list').on("click-row.bs.table", function(e, row, ele) {
					$('.success').removeClass('success'); //去除之前选中的行的，选中样式
					$(ele).addClass('success'); //添加当前选中的 success样式用于区别
				});
				$(".setwin").click(function() {
					$(".t-shade").removeClass("cx");
					$('audio')[0].pause();
				});
				//坐席
				$.getJSON(huayi.config.callcenter_url + "UserAccount/GetSeatList", {
					token: $.cookie("token")
				}, function(result) {
					if(result.state.toLowerCase() == "success") {
						seatlist = result.data;
						bindseat($("#seat"));
					}
				});

				//搜索
				$(".search").click(function() {
					stype = 1;
					initTable();
				});

//				initTable();

				//部门
				tree()

				function tree() {
					$.get(huayi.config.callcenter_url + "Department/GetDeptList", {
						"token": $.cookie("token"),
						//			"pid": pid
					}, function(result) {
						result = $.parseJSON(result);
						$.fn.zTree.init($("#treeDemo"), setting2, result.data); //实例化树形图
					});
				}

				var setting2 = {
					data: {
						key: {
							name: "text"
						},
						simpleData: {
							enable: true,
							idKey: "id",
							rootPId: 0
						}
					},
					callback: {
						onClick: addTreeClick
					}
				}

				function addTreeClick(event, treeId, treeNode) {
					IDs = treeNode.id;
					Names = treeNode.text;
					$('#citySel').val(Names);

				};
				$(".xl").click(function() {
					if($(this).parent().find(".menuContent").is(":hidden")) {
						$(this).parent().find(".menuContent").show();
					} else {
						$(this).parent().find(".menuContent").hide();
					}
				});
				if(helper.request.queryString("searchState")){
					var objdata  = JSON.parse(window.localStorage.getItem('searchData'))
					$("#seat").val(objdata.usercode||'')
					$("#tel").val(objdata.phone||'')
					IDs = objdata.dept||''
					$('#citySel').val(objdata.names||'')
					$("#ss_hjzt").val(objdata.callstate||'')
					$("#ss_hcfx").val(objdata.calltype||'')
					$("#ChuliRen").val(objdata.depttype||'')
					if(objdata.starttime){						
						$("#ss_kssj").val((objdata.starttime+' ~ '+objdata.endtime))
					}else{
						$("#ss_kssj").val('')
					}
					$(".search").trigger('click')
				}else{
					initTable();
				}
			});

			function bindseat(obj) {
				obj.empty();
				obj.append('<option value="">请选择坐席</option>');
				$(seatlist).each(function(i, n) {
					obj.append('<option value="' + n.F_UserCode + '">' + n.F_UserName + '-' + n.F_UserCode + '</option>');
				})
			}
			
			function initTable() {
				//先销毁表格
				$('#list').bootstrapTable('destroy');
				//初始化表格,动态从服务器加载数据
				$("#list").bootstrapTable({
					method: "get", //使用get请求到服务器获取数据
					url: huayi.config.callcenter_url + "Callrecords/GetList", //获取数据的Servlet地址
					contentType: 'application/x-www-form-urlencoded',
					striped: true, //表格显示条纹
					pagination: true, //启动分页
					pageSize: 10, //每页显示的记录数
					pageNumber: 1, //当前第几页
					pageList: [10, 20, 50, 100], //记录数可选列表
					search: false, //是否启用查询
					showColumns: false, //显示下拉框勾选要显示的列
					showRefresh: false, //显示刷新按钮
					sidePagination: "server", //表示服务端请求
					//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
					//设置为limit可以获取limit, offset, search, sort, order
					queryParamsType: "undefined",
					queryParams: function queryParams(params) { //设置查询参数
						var param = {
							page: params.pageNumber,
							pagesize: params.pageSize,
							usercode: $("#seat").val(),
							phone: $("#tel").val(),
							dept: IDs,
							callstate: $("#ss_hjzt").val(),
							calltype: $("#ss_hcfx").val(),
							depttype: $("#ChuliRen").val(),
							starttime: $("#ss_kssj").val() && $("#ss_kssj").val().split(' ~ ')[0],
							endtime: $("#ss_kssj").val() && $("#ss_kssj").val().split(' ~ ')[1],
							token: $.cookie("token")
						};

						return param;
					},
					onLoadSuccess: function() { //加载成功时执行
						//layer.msg("加载成功");
					},
					onLoadError: function() { //加载失败时执行
						//layer.msg("加载数据失败", { time: 1500, icon: 2 });
					}
				});
			}

			//格式化处理方式
			function formatterDealType(val, row) {
				//处理方式0:IVR处理1骚扰电话2自助服务3转值班电话4留言5呼损6人工处理
				var str = '-';
				switch(val) {
					case 0:
						str = 'IVR处理';
						break;
					case 1:
						str = '骚扰电话';
						break;
					case 2:
						str = '自助服务';
						break;
					case 3:
						str = '转值班电话';
						break;
					case 4:
						str = '留言';
						break;
					case 5:
						str = '呼损';
						break;
					case 6:
						str = '人工处理';
						break;
				}
				return str;
			}

			//音频
			function setCode(val) {
				if(val) {
					return '<div class="imgs">' +
						'<img src="../img/vice.png" alt="" onclick= ck(this) item="' + val + '" />' +
						'</div>';
				} else {
					return '';
				}
			}
			//编号
			function Code(val, row, index) {
				return index + 1;
			}
			//方向呼出
			function callType(val) {
				if(val == 0) {
					return '<div class="imgs">呼入</div>';
				} else {
					return '<div class="imgs">呼出</div>';
				}
			}

			function states(val) {
				if(val == 0) {
					return '<div class="imgs">未接通</div>';
				} else {
					return '<div class="imgs">已接通</div>';
				}
			}
			//回访
			function dealType(val) {
				if(val == 1) {
					return '<div >已回访</div>';
				} else {
					return '';
				}
			}
			//处理
			function isDeal(val) {
				if(val == 0) {
					return '<div >未处理</div>';
				} else {
					return '<div >已处理</div>';
				}
			}
			//录音
			function ck(val) {
				var path = $(val).attr("item");
				$(".t-shade").addClass("cx");
				$(".Ly_box").empty();
				$(".LY_box").empty();
				$('<audio  style="width:100%;"class=" " src="' + path + '" loop="loop" controls="controls"></audio>').appendTo(".Ly_box");
				$('<a href="' + path + '" class="sc_btn LY "download="' + path + '">下载录音</a>').appendTo(".LY_box");
			}
			//导出
			$('.export').click(function() {
				dcexcel(this);
			})

			function dcexcel(obj) {
				var url = huayi.config.callcenter_url + "Callrecords/GetListExpt?token=" + $.cookie("token");
				url += "&usercode=" + $("#seat").val() +
					"&phone=" + $("#tel").val() +
					"&callstate=" + $("#ss_hjzt").val() +
					"&calltype=" + $("#ss_hcfx").val() +
					"&starttime=" + ($("#ss_kssj").val() && $("#ss_kssj").val().split(' ~ ')[0]) +
					"&endtime=" + ($("#ss_kssj").val() && $("#ss_kssj").val().split(' ~ ')[1]) +
					"&dept=" + IDs;
				obj.href = url;
			}

			//格式化 操作
			function TX(val, row) {
				var html = '';
				if(row.IsExitWorkOrder == false) {
					if(row.Description == null) {
						row.Description = ''
					}
					return '<div class="warning" onclick=CL("' + val + '","' + row.CallNumber + '","' + row.CusName + '","' + encodeURI(row.Description) + '")><a class="warning">添加工单</a></div>'
				}
			}

			function CL(id, phone, cCustomerName, cDescription) {
				var searchData = {
					page: 1,
					pagesize: 10,
					usercode: $("#seat").val(),
					phone: $("#tel").val(),
					dept: IDs,
					names:$('#citySel').val(),
					callstate: $("#ss_hjzt").val(),
					calltype: $("#ss_hcfx").val(),
					depttype: $("#ChuliRen").val(),
					starttime: $("#ss_kssj").val() && $("#ss_kssj").val().split(' ~ ')[0],
					endtime: $("#ss_kssj").val() && $("#ss_kssj").val().split(' ~ ')[1],
					token: $.cookie("token")
				}
				window.localStorage.setItem('searchData',JSON.stringify(searchData))
				top.$('#side-menu').find('.J_menuItem[data-id="Menu_26"]').parent().removeClass('sub_active');
				top.$('#side-menu').find('.Click[data-id="Menu_41"]').trigger('click');
				top.$('#side-menu').find('.J_menuItem[data-id="Menu_42"]').parent().addClass('sub_active').siblings().removeClass('sub_active');
				top.$("iframe:visible")[0].src = "./WorkOrder/AddWorkOrder.html?cid=" + id + "&cphone=" + phone + "&cCustomerName=" + cCustomerName + "&cDescription=" + cDescription;
			}
		</script>

	</body>

</html>