zhaozhiqiang
/
YH_Web_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>排班管理</title>
		<script src="../Script/Common/huayi.load.js"></script>
		<script src="../Script/Common/huayi.config.js"></script>
		<link rel="stylesheet" href="../css/init.css" />
		<link rel="stylesheet" href="../css/Table/table1.css" />
		<link href="../js/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
		<link href="../css/style.min862f.css" rel="stylesheet" />
		<link rel="stylesheet" href="../js/fullcalendar/fullcalendar.css" />
		<style>
			.fc-event-title {
				color: white;
			}

			.group {
				margin-bottom: 5px;
			}

			.seatuser {
				color: black;
				padding: 5px 10px;
				border-radius: 2px;
				cursor: pointer;
				margin-bottom: 5px;
				background-color: #f3f3f4;
			}

			.zxlist span.active {
				background-color: #1ab394;
				color: #fff;
			}

			.active {
				background-color: #1ab394;
				color: #fff;
			}

			.lable {
				display: none;
				background-color: #d1dade;
				color: #5e5e5e;
				font-size: 10px;
				padding: 3px 8px;
				text-shadow: none;
				font-size: 75%;
				font-weight: 700;
				line-height: 1;
				text-align: center;
				white-space: nowrap;
				vertical-align: baseline;
				border-radius: .25em;
				margin: 3px;
				float: left;
				cursor: pointer;
			}

			.active~.lable {
				display: inline;
			}

			.fc-content .fc-widget-header {
				padding: 11px 0;
			}
		</style>
	</head>

	<body class="gray-bg">
		<div class="daoHang clearfix">
			<div class="dhLeft">
				<sapn><i class="syIcon"></i>位置：
					<a id="ReIndex" href="javaScript:;" class="indexreturn">首页</a>&gt;
					<a href="javaScript:;">设备运维</a>&gt;
					<a href="javascript:location.reload()" class="now_position">新排班管理</a>
				</sapn>
			</div>
		</div>
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="th-box">
				<div class="form-inline th-bar clearfix">
					<div class="form-group time-box">
						<select id="sc_pro" class="form-control selectpicker" data-live-search="true">
							<option value="">请选择项目名称</option>
						</select>
					</div>
					<!--<div class="form-group time-box">
						<i class="tub fa fa-search"></i>
						<input type="text" class="form-control" style="width: 248px;" id="sc_keyWords" placeholder="请输入坐席组编号">
					</div>
					<div class="form-group tool_bars pull-right">
						<input type="button" class="btn_gray" id="sc_btns" value="搜索" />
						<input type="button" class="btn_gray" authorize="yes" id="HY_add" onclick="btn_add()" value="添加" />
						<input type="button" class="btn_gray" authorize="yes" id="HY_deletes" onclick="btn_deletes()" value="批量删除" />
					</div>-->
				</div>
			</div>
			<div class="tab_contents" id="tab_contents">
				<div class="col-sm-2" id="classAndUserList">
					<!--<div class="ibox float-e-margins">
						<div class="ibox-content">
							<div id='external-events'>
								<p>班别</p>
							</div>
							<div class="wfz" style="display:none;">
								<p class="GroupName">未分组坐席</p>
								<div id="zxlist">
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>-->
					<!--<div class="ibox float-e-margins zxarea" style="display:none;">
						<div class="ibox-content">
							<div style="margin-bottom:10px;">
								<p>班组</p>
								<div id="bzlist">
									<div class='seatuser' code=''>全部</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="wfz" style="display:none;">
								<p>未分组坐席</p>
								<div id="zxlist">
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>-->
				</div>
				<div class="col-sm-10">
					<div id="calendar"></div>
				</div>

			</div>
		</div>
		<script src="../js/jquery-ui.min.js"></script>
		<script src="../js/bootstrap-select/js/bootstrap-select.js"></script>
		<script src="../js/fullcalendar/fullcalendar.min.js"></script>
		<script>
			var userList = [];
			$(document).ready(function() {
				getProlistDrop($('#sc_pro')).then(function() {
					getClassAndUser();
					bindCalendar();
				});
				$(".zxarea").show();
				$('#sc_pro').on('change', function(){
					getClassAndUser();
					bindCalendar();
				});
				
			});
			//获取班别、人员
			function getClassAndUser() {
				$.getJSON(huayi.config.callcenter_url + 'signtokenapi/api/WorkClassUser/getclassanduserlist', {
					"projectid": $('#sc_pro').val()
				}, function(result) {
					$('#classAndUserList').empty();
					if (result.state.toLowerCase() === "success") {
						result = result.data
						if(result && result.length){
							$(result).each(function(i, n) {
								var html = '<div class="ibox float-e-margins">' +
									'<div class="ibox-content">' +
									'<div id="external-events">' +
									'<p class="depName">' + n.name + '</p>'
								if(n.list_class && n.list_class.length){
									$(n.list_class).each(function(g, h) {
										html += '<div class="external-event navy-bg" usertype="' + n.id + '" code="' + h.code + '" intime="' + h.starttime +
											'" outtime="' + h.endtime + '">' + h.name + '[' + h.starttime + '-' + h.endtime + ']</div>'
									});
								}

								html += '</div>' +
									'<div class="wfz">' +
									'<p class="GroupName">' + n.name + '人员</p>' +
									'<div class="zxlist" userList="' + JSON.stringify(n.list_user) + '">'
								if(n.list_user && n.list_user.length){
									$(n.list_user).each(function(j, m) {
										html += "<span class='lable' onclick='peopleClick(this)' style='display: inline;' code='" + m.id + "'>" +
											m.username + "</span>"
									});
								}
								html += '</div>' +
									'<div class="clearfix"></div>' +
									'</div>' +
									'</div>' +
									'</div>';
								$('#classAndUserList').append(html);
							});
							
							$("#external-events div.external-event").each(function() {
								var d = {
									title: $.trim($(this).text()),
									classcode: $(this).attr("code"),
									intime: $(this).attr("intime"),
									outtime: $(this).attr("outtime"),
									usertype: $(this).attr("usertype"),
								};
								$(this).data("eventObject", d);
								$(this).draggable({
									zIndex: 999,
									revert: true,
									revertDuration: 0,
									helper: 'clone'
								})
							});
						}
					}
				});

			}

			function peopleClick(ele) {
				$(ele).toggleClass('active');
				$(ele).parents('.ibox').siblings().find('.zxlist').children('span').removeClass("active");
				addUserId(ele);
			}

			function addUserId(ele) {
				userList = [];
				$(ele).parent().find('span.active').each(function(i, n) {
					userList.push($(this).attr('code'));
				});
			}
			
			//项目下拉数据
			function getProlistDrop(el) {
				var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
				$.ajax({
					type: "get",
					url: huayi.config.callcenter_url + "equipmentapi/api/ProjectInfo/getlistdrop",
					dataType: 'json',
					async: true,
					success: function(data) {
						el.empty();
						var res = data.data;
						if (res) {
							for (var i = 0; i < res.length; i++) {
								if (i == 0) {
									$('<option value=' + res[i].id + ' selected>' + res[i].text + '</option>').appendTo(el);
								} else {
									$('<option value=' + res[i].id + '>' + res[i].text + '</option>').appendTo(el);
								}

							}
							el.selectpicker('refresh');
						}
						dtd.resolve(); // 改变Deferred对象的执行状态
					}
				});
				return dtd.promise(); // 返回promise对象
			}

			function bindCalendar() {
				$('#calendar').fullCalendar('destroy');
				$('#calendar').fullCalendar({
					header: {
						//left: 'month,agendaWeek,agendaDay',
						left: 'month',
						center: 'title',
						right: 'today, prev, next'
					},
					monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
					monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
					titleFormat: {
						month: "yyyy MMMM "
					},
					firstDay: "1",
					editable: true,
					droppable: true,
					drop: function(g, h) {
						var f = $(this).data("eventObject");
						var d = $.extend({}, f);
						if (f.classcode) {
							var groupcode = f.classcode;
							var usertype = f.usertype;
							if ($(this).parent().siblings('.wfz').find('span.active').length && userList.length) {
								d.start = g;
								d.title = $(".active").parents('.wfz').siblings('#external-events').find('.depName').text() + " " + $(".active").text() + '\n' + d.title;
								var c = g.getDate();
								var a = g.getMonth() + 1;
								var e = g.getFullYear();
								d.groupcode = groupcode;
								$.post(huayi.config.callcenter_url + 'signtokenapi/api/WorkClassUser/saveuser', {
									date: e + '-' + a + '-' + c, //是	string	日期
									classcode: groupcode, //是	string	班别代码
									usertype: usertype, //是	string	排班部门分类id(字典RYJS)
									userlist: userList, //是	List<string>	人员列表ids
									projectid: $('#sc_pro').val()
								}, function(result) {
									result = JSON.parse(result);
									if (result.state.toLowerCase() == "success") {
										// d.id = result.data;
										$('#calendar').fullCalendar('refetchEvents');
									}
								})
							} else {
								layer.confirm('请选择人员', {
									icon: 2,
									btn: ['确定'] //按钮
								});
							}
						}
					},
					//eventDragStart: function (event, jsEvent, ui, view) {
					//    if (!$(".active").attr("code")) {
					//        layer.confirm('请选择一个班组', {
					//            btn: ['确定'] //按钮
					//        });
					//    }
					//},
					eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
						//当拖拽完成并且时间改变时触发
						//						dayDelta 保存日程向前或者向后移动了多少天
						//						minuteDelta 这个值只有在agenda视图有效，移动的时间
						//						allDay 如果是月视图，或者是agenda视图的全天日程，此值为true,否则为false
						var g = event.start;
						var c = g.getDate();
						var a = g.getMonth() + 1;
						var e = g.getFullYear();
						$.post(huayi.config.callcenter_url + 'signtokenapi/api/WorkClassUser/update', {
							id: event.id,
							date: e + '-' + a + '-' + c,
							classcode: event.classcode, //是	string	班别代码
							//							usertype: event.usertype, //是	string	排班部门分类id(字典RYJS)
							//							userlist: userList, //是	List<string>	人员列表ids
							//							projectid: $('#sc_pro').val()
						}, function(result) {
							result = JSON.parse(result);
							if (result.state.toLowerCase() != "success") {
								revertFunc();
							}
						})
					},
					events: function(start, end, callback) {
						console.log(start)
						console.log(end)
						var st = $.fullCalendar.formatDate(start, "yyyy-MM-dd");
						var ed = $.fullCalendar.formatDate(end, "yyyy-MM-dd");
						$.getJSON(huayi.config.callcenter_url + "signtokenapi/api/WorkClassUser/getusermarker", {
							"starttime": st,
							"endtime": ed,
							"projectid": $('#sc_pro').val()
						}, function(r) {
							$(r.data).each(function(i, v) {
								v.title = v.usertypename + ' ' + v.usernamelist.join(',') + '<br />' + v.classcode + v.classname + '['+ v.classstarttime + '-' + v.classendtime + ']';
								v.start = v.date;
							})
							callback(r.data);
// 							var events = [];
// 							$(r.data).each(function(i, v) {
// 									events.push({
// 											title: v.usertypename + ' ' + v.usernamelist.join(',') + '<br />' + v.classcode + v.classname + '['+ v.classstarttime + '-' + v.classendtime + ']',
// 											start: v.date
// 									});
// 							});
// 							callback(events);
						});
					},
					eventRender: function (event, element) {//title以HTML显示（换行）
            element.html(event.title);           
					},
					eventClick: function(calEvent, jsEvent, view) { //	当点击日历中的某一日程（事件）时，触发此操作
						var id = calEvent.id;
						layer.confirm('确定删除吗？', {
							icon: 7,
							btn: ['是', '否'] //按钮
						}, function() {
							$.post(huayi.config.callcenter_url + "signtokenapi/api/WorkClassUser/delete", {
								ids: id,
							}, function(result) {
								result = JSON.parse(result);
								if (result.state.toLowerCase() == "success") {
									layer.msg("删除成功");
									$('#calendar').fullCalendar('removeEvents', id);
								}
							})
						});
					},
					eventMouseover: function(calEvent, jsEvent, view) { //	鼠标划过和离开的事件，用法和参数同上
						// var id = calEvent.id;
					}
				});
			}
		</script>
	</body>

</html>