zhoufan
/
12345_Base_Web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="./Script/Common/huayi.load.js"></script>
		<script src="./Script/Common/huayi.config.js"></script>
		<script src="./Script/Common/huayi.http.js"></script>
		<link href="./css/layer/need/layer.css" />
		<link rel="stylesheet" href="./css/init.css" />
		<title></title>
		<style>
			.chatlist_con, .chatlist_con li{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.BiaoTi {
				width: 100%;
				text-align: center;
				border-color: #ccc;
				border: 1px solid #ccc;
			}
			
			textarea {
				border-color: #ccc;
				border: 1px solid #ccc;
				height: 100px;
			}
			
			.chatlist_con li {
				margin-bottom: 15px;
			}
			
			.message_time {
				margin:0;
				text-align: center;
			}
			.message_time span{
				border: 0;
			}
			
			.ver_middle {
				float: left;
				margin: 0 10px 0 0;
				border-radius: 3px;
			}
			
			.message_text {
				display: inline-block;
				position: relative;
				padding: 0 10px;
				max-width: calc(100% - 40px);
				min-height: 30px;
				line-height: 2.5;
				font-size: 9pt;
				text-align: left;
				word-break: break-all;
				background-color: #e6e2e2;
				border-radius: 4px;
			}
			
			.message_text:before {
				content: " ";
				position: absolute;
				top: 9px;
				right: 100%;
				border: 6px solid transparent;
				border-right-color: #e6e2e2;
			}
			
			.chatlist_con li .self {
				text-align: right;
			}
			
			.chatlist_con li .self .ver_middle {
				float: right;
				margin: 0 0 0 10px;
			}
			
			.self .message_text {
				background-color: #67c3db;
				color: #fff;
			}
			
			.self .message_text:before {
				right: inherit;
				left: 100%;
				border-right-color: transparent;
				border-left-color: #67c3db;
			}
			.Common table {
			    width: 95%;
			    margin: 0 auto;
			    }
			    .Common table th {
				    width: 10%;
				}
				.btns {
				    padding: 6px 15px;
				    font-size: 15px;
				    }
		</style>
	</head>

	<body>
		<div class="Common">
			<table>
				<tr class="tr">
					<th>历史消息:</th>
					<td>
						<p>注：历史 消息只显示最新50条记录</p>
						<div class="historyCon" style="width: 100%; height: 200px;overflow-y: auto;border: 1px solid #ccc;padding: 5px;">
							<ul class="chatlist_con">

							</ul>
						</div>
					</td>

				</tr>
				<tr>
					<th>角色：</th>
					<td>
						<select name="" id="role" class="select_"></select>
						<select name="" id="zx" class="select_"></select>
					</td>
				</tr>
				<tr>
					<th>内容:</th>
					<td colspan="2">
						<textarea data-adaptheight id="content" name="" rows="" cols="" placeholder="输入回复内容..."></textarea>
					</td>
				</tr>
			</table>
			<div class="btn_box">
				<button class="btns">发送</button>
			</div>
		</div>
		<script src="./js/adjustHeight.js"></script>
		<script src="./css/laydate/laydate.js"></script>
		<script>
			var userId = helper.request.queryString("userId");
			var roleId = helper.request.queryString("roleId");
			var toId = helper.request.queryString("toId");
			//下拉框
			//获取坐席下拉框
			$.getJSON(huayi.config.callcenter_url + "Index/GetUserListByRoleId", {
				"token": $.cookie("token"),
				"roleid": 0
			}, function(result) {
				if(result.state.toLowerCase() == "success") {
					goodslist = result.data;
					bindZX($("#zx"));
					if(userId){
						$('#zx').val(userId);
					}
					
				}
			});

			function bindZX(obj) {
				obj.empty();
				obj.append('<option value="0" selected="selected">所有人</option>');
				$(goodslist).each(function(i, n) {
					obj.append('<option value="' + n.F_UserId + '">' + n.F_UserName + '' + n.F_UserCode + '</option>');
				})
			}

			function bindseat(obj) {
				obj.empty();
				obj.append('<option value="0" selected="selected">所有角色</option>');
				$(goodslist).each(function(i, n) {
					obj.append('<option value="' + n.F_RoleId + '">' + n.F_RoleName + '</option>');
				})
			}
			//获取角色下拉框
			$.getJSON(huayi.config.callcenter_url + "Index/GetRoleList", {
				"token": $.cookie("token")
			}, function(result) {
				if(result.state.toLowerCase() == "success") {
					goodslist = result.data;
					bindseat($("#role"));
					if(userId){
						$('#role').val(roleId);
					}
					
				}
			});

			$("#role").change(function() {
				var pid = $(this).val();
				$.getJSON(huayi.config.callcenter_url + "Index/GetUserListByRoleId", {
					"token": $.cookie("token"),
					"roleid": pid
				}, function(result) {
					if(result.state.toLowerCase() == "success") {
						goodslist = result.data;
						bindZX($("#zx"));
					}
				});
			})

			function historys(user, to) {
			    helper.init.isload = 0;
				$.ajax({
					type: "post",
					url: huayi.config.callcenter_url + "Index/GetChatLists",
					async: true,
					dataType: 'json',
					data: {
						token: $.cookie("token"),
						isread: 2,
						top: 50,
						fromid: user
					},
					success: function (data) {
					    helper.init.isload = 1;
						$('.chatlist_con').html('');
						$(data.rows).each(function(i, n) {
							if(to == n.FromUserId) {
								$('<li>' +
									'<p class="message_time"><span>' + n.CreateDate + '</span></p>' +
									'<div class="message_mincon self">' +
									'<img class="ver_middle"  src="img/chat_pic.jpg" alt="" width="30" height="30"/>' +
									'<div class="message_text">' + n.Content + '</div>' +
									'</div>' +
									'</li>').appendTo('.chatlist_con')
							} else {
								$('<li>' +
									'<p class="message_time"><span>' + n.CreateDate + '</span></p>' +
									'<div class="message_mincon">' +
									'<img class="ver_middle"  src="img/chat_list2.jpg" alt="" width="30" height="30"/>' +
									'<div class="message_text">' + n.Content + '</div>' +
									'</div>' +
									'</li>').appendTo('.chatlist_con')
							}
						});

					}
				});
//							var farTop=$(".chatlist_con").css('height');
//						$(".historyCon").animate({ scrollTop:farTop});
			}
			if(userId) {
				$('.tr').show();
				historys(userId,toId)
				setInterval(historys, 2000,userId,toId);//Ajax调用函数
			}else{
				$('.tr').hide();
			}

			$(document).ready(function() {

				$(".btns").click(function() {
//					var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
//					parent.layer.close(index); //再执行关闭
					sendMessage();
					//						parent.initTable();					 
					//						parent.layer.msg("添加成功");
				})

				function sendMessage() {
					//          	发送给所有人时ToRoleId=0 且 ToUserId=0
					//
					//				发送给角色时ToRoleId>0 且 ToUserId=0
					//				
					//				发送给角色时ToRoleId=0 且 ToUserId>0
					$.ajax({
						type: "post",
						url: huayi.config.callcenter_url + "Index/SaveChatInfo",
						async: true,
						dataType: 'json',
						data: {
							token: $.cookie("token"),
							Content: $('#content').val(),
							ToUserId: $('#zx').val(),
							ToRoleId: $('#role').val()
						},
						success:function(data){
							if(data.state.toLowerCase()=='success'){
								$('#content').val('');
							}
						}
					});

				}

			})
		</script>
	</body>

</html>