dev_oa/app/home/view/plan/calendar.html

{extend name="common/base"/}
{block name="style"}
<link rel="stylesheet" href="{__STATIC__}/fullcalendar/main.min.css"/>
<link rel="stylesheet" href="{__JS__}/module/dtree/dtree.css">
<link rel="stylesheet" href="{__JS__}/module/dtree/font/dtreefont.css">
<style>
#calendar {width: 100%;margin: 0 auto;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;}
.fc .fc-toolbar.fc-header-toolbar{margin-bottom:0;border:1px solid #ddd; border-bottom:none;padding:15px 12px;background-color:#fafafa;}
.fc-col-header{background-color:#fafafa;}
.fc .fc-button-primary {
    color: #fff;
    background-color: #1E9FFF;
    border-color: #1E9FFF;
}
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {
    color: #fff;
    background-color: #FBBC05;
    border-color: #FBBC05;
}
.fc .fc-button-primary:focus, .fc .fc-button-primary:not(:disabled).fc-button-active:focus, .fc .fc-button-primary:not(:disabled):active:focus {
	box-shadow: 0 0 0 0;
}
.fc .fc-button-primary:hover{color:#fff; background-color:#52B5FF; border-color:#52B5FF;}
.fc-daygrid-event-harness{cursor:pointer;}
.fc .fc-daygrid-week-number{font-size:12px;}
/*今天背景色和字体颜色 */
.fc .fc-daygrid-day.fc-day-today .fc-event-title,.fc .fc-daygrid-day.fc-day-today .fc-event-time,.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number{
	font-weight:800;
	color:#FF5722;
}
/*星期六,星期天背景色和字体颜色
.fc-day-sat,.fc-day-sun{
    background-color: #fafafa;
}
*/
.calendar-select{width:100px; height:38px; position:absolute; top:31px; right:255px; z-index:100;}
.calendar-select .layui-input{height: 36px; line-height: 1.2;}
.layui-tags-span {padding: 3px 6px;font-size: 12px; background-color:#fff; border-radius: 3px; margin:2px 0; margin-right: 5px; border: 1px solid #e6e6e6; display: inline-block;}
.layui-layer-content .layui-table-view .layui-table td,.layui-layer-content .layui-table-view .layui-table th{padding:1px 0;}
.layui-unselect dl {max-height:188px;}
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<script src="{__STATIC__}/fullcalendar/main.min.js"></script>
<div class="body-table">
	<div id="calendar"></div>
	<div class="calendar-select">
		<div class="layui-input-inline" style="width: 90px;"><input type="text" placeholder="请选择员工" class="layui-input" data-event="select" autocomplete="off"/></div>		
	</div>
</div>
<!-- /主体 -->
{/block}
<!-- 脚本 -->
{block name="script"}
<script type="text/javascript">
	var uid=0;	
	function addZero(num){
		if(num<10){
			num='0'+num;
		}
		return num;
	}
	function init(layui){
		var layer = layui.layer
		,employeepicker = layui.employeepicker
		,dropdown = layui.dropdown
		,form = layui.form
		,laydate = layui.laydate;
		
		// 选择员工
		$('.body-table').on('click','[data-event="select"]',function(){
			var that = $(this);
			var names = that.val(), ids = $('[name="uid"]').val();
			employeepicker.init({
				ids: ids,
				names: names,
				type: 0,
				department_url:"{:url('home/api/get_department_tree')}",
				employee_url:"{:url('home/api/get_employee')}",
				callback: function (ids, names, dids, departments) {
					uid = ids;
					that.val(names);
					calendar.refetchEvents({
						url: '/home/plan/index?uid='+uid
					});
				}
			})
		});
		  
		function addEvent(detail){			
			var type='<span style="color:#aaa">请选择</span>';
			if(detail.type==1){
				type = '<span class="layui-badge-dot"></span> 紧急';
			}
			else if(detail.type==2){
				type = '<span class="layui-badge-dot layui-bg-orange"></span> 重要';
			}
			else if(detail.type==3){
				type = '<span class="layui-badge-dot layui-bg-blue"></span> 次要';
			}
			else if(detail.type==4){
				type = '<span class="layui-badge-dot layui-bg-green"></span> 不重要';
			}
			else if(detail.type==5){
				type = '<span class="layui-badge-dot layui-bg-black"></span> 无优先级';
			}
			
			var remind_type='不提醒';
			if(detail.remind_type==1){
				remind_type = '提前5分钟';
			}
			else if(detail.remind_type==2){
				remind_type = '提前15分钟';
			}
			else if(detail.remind_type==3){
				remind_type = '提前30分钟';
			}
			else if(detail.remind_type==4){
				remind_type = '提前1小时';
			}
			else if(detail.remind_type==5){
				remind_type = '提前2小时';
			}else if(detail.remind_type==6){
				remind_type = '提前1天';
			}
			
			var content='<form class="layui-form" style="width:828px">\
							<table class="layui-table" style="margin:15px 15px 0;">\
								<tr>\
									<td class="layui-td-gray2">日程时间范围 <span style="color: red">*</span></td>\
									<td>\
										<input id="start_time_a" name="start_time_a" style="width:120px; display:inline-block;" autocomplete="off" class="layui-input" value="'+detail.start_time_a+'" readonly lay-verify="required" placeholder="请选择时间" lay-reqText="请选择时间"><div style="display: inline-block; margin-left:3px; width: 86px;"><select lay-filter="start_time_b" id="start_time_b"></select></div> 至 <input id="end_time_a" name="end_time_a" style="width:120px; display:inline-block;" autocomplete="off" class="layui-input" value="'+detail.end_time_a+'" readonly lay-verify="required" placeholder="请选择时间" lay-reqText="请选择时间"><div style="display: inline-block; margin-left:3px; width: 86px;"><select lay-filter="end_time_b" id="end_time_b"></select></div>\
									</td>\
									<td class="layui-td-gray">提醒 <span style="color: red">*</span></td>\
									<td>\
										<div class="layui-input" id="remind_type" style="width:120px; line-height:35px;">'+remind_type+'</div>\
									</td>\
								</tr>\
								<tr>\
									<td class="layui-td-gray2">日程内容 <span style="color: red">*</span></td>\
									<td><input name="title" class="layui-input" value="'+detail.title+'" lay-verify="required" placeholder="请完成日程内容" lay-reqText="请完成日程内容"></td>\
									<td class="layui-td-gray">日程优先级 <span style="color: red">*</span></td>\
									<td>\
										<div class="layui-input" id="type" style="width:120px; line-height:35px;">'+type+'</div>\
									</td>\
								</tr>\
								<tr>\
									<td class="layui-td-gray2">日程详细描述</td>\
									<td colspan="3">\
										<textarea name="remark" form-input="remark" class="layui-textarea" style="min-height:120px;">'+detail.remark+'</textarea>\
									</td>\
								</tr>\
							</table>\
						</form>';
			layer.open({
				type:1,
				title:'创建日程安排',
				area:['860px','390px'],
				content:content,
				success:function(){
					//日期时间范围
					laydate.render({
						elem: '#start_time_a',
						type: 'date',
						min: 0,
						format: 'yyyy-MM-dd',
						showBottom: false,
						done:function(a,b,c){
							detail.start_time_a=a;
						}
					});

					//日期时间范围
					laydate.render({
						elem: '#end_time_a',
						type: 'date',
						min: 0,
						format: 'yyyy-MM-dd',
						showBottom: false,
						done:function(a,b,c){
							detail.end_time_a=a;
						}
					});
					$('#start_time_a,#end_time_a').empty();
					
					var hourArray=[];
					for(var h=0;h<24;h++){
						var t=h<10?'0'+h:h
						var t_1=t+':00',t_2=t+':15',t_3=t+':30',t_4=t+':45';
						hourArray.push(t_1,t_2,t_3,t_4);
					}					
					var html_1='', html_2='',def_h1=detail.start_time_b=='00:00'?'09:00':detail.start_time_b,def_h2=detail.end_time_b=='00:00'?'18:00':detail.end_time_b;
					for(var s=0;s<hourArray.length;s++){
						var check_1='',check_2='';
						if(hourArray[s]==def_h1){
							check_1='selected';
						}
						if(hourArray[s]==def_h2){
							check_2='selected';
						}
						html_1 += '<option value="'+hourArray[s]+'" '+check_1+'>'+hourArray[s]+'</option>';
						html_2 += '<option value="'+hourArray[s]+'" '+check_2+'>'+hourArray[s]+'</option>';
					}
					
					$('#start_time_b').append(html_1);
					$('#end_time_b').append(html_2);
					form.render();
					
					$('[name="title"]').on('input',function(){
						var _val=$(this).val();
						detail.title=_val;
					});	
					form.on('select(start_time_b)', function(data){
						detail.start_time_b=data.value;
					});
					form.on('select(end_time_b)', function(data){
						detail.end_time_b=data.value;
					});
					$('[form-input="remark"]').on('input',function(){
						var _val=$(this).val();
						detail.remark=_val;
					});

					dropdown.render({
						elem: '#type'
						,data: [{
						  title: '<span class="layui-badge-dot"></span> 紧急',
						  id: 1
						},{
						  title: '<span class="layui-badge-dot layui-bg-orange"></span> 重要',

						  id: 2
						},{
						  title: '<span class="layui-badge-dot layui-bg-blue"></span> 次要',
						  id: 3
						},{
						  title: '<span class="layui-badge-dot layui-bg-green"></span> 不重要',
						  id: 4
						},{
						  title: '<span class="layui-badge-dot layui-bg-black"></span> 无优先级',
						  id: 5
						}]
						,click: function(obj){
							this.elem.html(obj.title);
							detail.type = obj.id;
						}
						,style: 'width: 120px;'
					  });
					  
					  dropdown.render({
						elem: '#remind_type'
						,data: [{
						  title: '不提醒',
						  id: 0
						},{
						  title: '提前5分钟',
						  id: 1
						},{
						  title: '提前15分钟',
						  id: 2
						},{
						  title: '提前30分钟',
						  id: 3
						},{
						  title: '提前1小时',
						  id: 4
						},{
						  title: '提前2小时',
						  id: 5
						},{
						  title: '提前1天',
						  id:6
						}]
						,click: function(obj){
						  this.elem.html(obj.title);
						  detail.remind_type = obj.id;
						}
						,style: 'width: 120px;'
					  });					
				},
				btn: ['确定提交'],
				btnAlign:'c',
				yes: function(idx){
					if(detail.start_time_a=='' || detail.end_time_a==''){
						layer.msg('请完善日程时间范围');
						return;
					}
					if(detail.title==''){
						layer.msg('请填写日程内容');
						return;
					}
					if(detail.type==0){
						layer.msg('请选择日程优先级');
						return;
					}
					console.log(detail);
					$.ajax({
						url:"{:url('home/plan/add')}",
						type:'post',
						data:detail,
						success:function(e){
							layer.msg(e.msg);
							if(e.code==0){								
								layer.close(idx);								
								setTimeout(function(){
									window.location.reload();
								},1000)	
							}
						}
					})			
				}
			})	
		}
		
		
		//查看日程记录
		function viewEvent(detail){
			var work_type='<span style="color:#393D49">无优先级</span>';
			if(detail.type==1){
				work_type = '<span style="color:#FF5722">紧急</span>';
			}
			else if(detail.type==2){
				work_type = '<span style="color:#FFB800">重要</span>';
			}
			else if(detail.type==3){
				work_type = '<span style="color:#1E9FFF">次要</span>';
			}
			else if(detail.type==4){
				work_type = '<span style="color:#009688">不重要</span>';
			}		
			var content='<div style="width:770px">\
							<table class="layui-table" style="margin:12px 15px 0;">\
								<tr>\
									<td class="layui-td-gray2">日程时间范围</td>\
									<td>'+detail.start_time+' 至 '+detail.end_time+'</td>\
									<td class="layui-td-gray">提醒时间</td>\
									<td>'+detail.remind_time+'</td>\
								</tr>\
								<tr>\
									<td class="layui-td-gray2">日程安排内容</td>\
									<td>'+detail.title+'</td>\
									<td class="layui-td-gray">优先级</td>\
									<td>'+work_type+'</td>\
								</tr>\
								<tr>\
									<td class="layui-td-gray2">日程内容描述</td>\
									<td colspan="3">'+detail.remark+'</td>\
								</tr>\
							</table>\
						</div>';
			layer.open({
				type:1,
				title:'查看日程安排',
				area:['800px','336px'],
				content:content,
				success:function(){
					
				},
				btn: ['关闭'],
				btnAlign: 'c',
				yes: function(idx){
					layer.close(idx);			
				}
			})	
		}
		
		//请求事件api数据
		function eventApi(id){
			if(id==0){
				return false;
			}
			$.ajax({
				url:"{:url('home/plan/detail')}",
				type:'post',
				data:{id:id},
				success:function(res){					
					var detail=res.data;
					viewEvent(detail);
				}
			});			
		}
		
		//日历
		var calendarEl = document.getElementById('calendar');
		var calendar = new FullCalendar.Calendar(calendarEl, {
			views: {
				dayGrid: {
					viewDidMount:function(arg){
						calendar.setOption('height', window.innerHeight-30);
					}
				},
				timeGrid: {
					viewDidMount:function(arg){
						calendar.setOption('height', 'auto');
					}
				},
				week: {
					viewDidMount:function(arg){
						calendar.setOption('height', 'auto');
					}
				},
				day: {
					viewDidMount:function(arg){
						calendar.setOption('height', 'auto');
					}
				}
			},
			//initialDate: '2020-09-12',//默认显示日期
			initialView: 'dayGridMonth',//默认显示月视图
			customButtons: {
				clear: {
					text: '清空员工', click: function () {
						uid = 0;
						$('[data-event="select"]').val('');
						calendar.refetchEvents({
							url: '/home/plan/index?uid='+uid
						});
					}
				}
            },
			headerToolbar: {
				left: 'prev,next',//prev,next today add
				center: 'title',
				right: 'clear dayGridMonth,timeGridWeek,listWeek' //clear dayGridMonth,timeGridWeek,timeGridDay,listWeek
			},
			height: 'auto',//自动高度
			viewRender:function(view,element){
				console.log(view);
				console.log(element);
			},
			navLinks: true, // can click day/week names to navigate views
			editable: true,//确定是否可以拖拉调整日历事件的时间。
			eventResize:function(ev) {
				var arg = ev.event
				console.log(arg);
				var detail={};
				detail['id']=arg.id;
				detail['start_time_a']=arg.start.getFullYear()+'-'+addZero(arg.start.getMonth()+1)+'-'+addZero(arg.start.getDate());
				detail['end_time_a']=arg.end.getFullYear()+'-'+addZero(arg.end.getMonth()+1)+'-'+addZero(arg.end.getDate());		
				detail['start_time_b']=addZero(arg.start.getHours())+':'+addZero(arg.start.getMinutes());
				detail['end_time_b']=addZero(arg.end.getHours())+':'+addZero(arg.end.getMinutes());	
				console.log(detail);
				$.ajax({
					url:"{:url('home/plan/add')}",
					type:'post',
					data:detail,
					success:function(e){
						layer.msg(e.msg);
						if(e.code==1){							
							ev.revert();
						}
					}
				})
			},
			eventDrop:function(ev) {
				var arg = ev.event
				console.log(arg);
				var detail={};
				detail['id']=arg.id;
				detail['start_time_a']=arg.start.getFullYear()+'-'+addZero(arg.start.getMonth()+1)+'-'+addZero(arg.start.getDate());
				detail['end_time_a']=arg.end.getFullYear()+'-'+addZero(arg.end.getMonth()+1)+'-'+addZero(arg.end.getDate());		
				detail['start_time_b']=addZero(arg.start.getHours())+':'+addZero(arg.start.getMinutes());
				detail['end_time_b']=addZero(arg.end.getHours())+':'+addZero(arg.end.getMinutes());	
				console.log(detail);
				$.ajax({
					url:"{:url('home/plan/add')}",
					type:'post',
					data:detail,
					success:function(e){
						layer.msg(e.msg);
						if(e.code==1){							
							ev.revert();
						}
					}
				})
			},
			selectable: true,//拖拉选择日期
			selectMirror: true,//是否在用户拖动时绘制"占位符"事件。
			select: function(arg) {
				var detail={};
				detail['id']=0;
				detail['title']='';
				detail['start_time_a']=arg.start.getFullYear()+'-'+addZero(arg.start.getMonth()+1)+'-'+addZero(arg.start.getDate());
				detail['end_time_a']=arg.end.getFullYear()+'-'+addZero(arg.end.getMonth()+1)+'-'+addZero(arg.end.getDate());		
				detail['start_time_b']=addZero(arg.start.getHours())+':'+addZero(arg.start.getMinutes());
				detail['end_time_b']=addZero(arg.end.getHours())+':'+addZero(arg.end.getMinutes());		
				detail['remark']='';
				detail['type']=0;
				detail['remind_type']=0;
				console.log(detail);	
				addEvent(detail);	
			},
			nowIndicator: true,
			firstDay: 1,
			weekNumbers: true,// 是否开启周数
			displayEventEnd: false, //所有视图显示结束时间
			eventTimeFormat: { // 事件的时间格式，like '14:30:00'
				hour: '2-digit',
				minute: '2-digit',
				//second: '2-digit',
				meridiem: false,
				hour12: false //设置时间为24小时
			},
			slotLabelFormat: { // 列表视图左边的时间格式，like '14:30:00'
				hour: '2-digit',
				minute: '2-digit',
				//second: '2-digit',
				meridiem: false,
				hour12: false //设置时间为24小时
			},
			locale: 'zh-cn',//语言
			buttonText: {
				//按钮文本
				today: '今天',
				month: '月',
				week: '周',
				day: '日',
				list: '日程列表',
			},
			weekText: '周',
			allDayText: '全天',
			moreLinkText: function(n) {
				return '另外 ' + n + ' 个'
			},
			noEventsText: '没有事件显示',
			events: function(fetchInfo, successCallback, failureCallback ){
				$.ajax({
					type:"POST",
					url:"{:url('home/plan/calendar')}",
					dataType:"json",
					data:{start:fetchInfo.startStr,end:fetchInfo.endStr,uid:uid},
					success:function(result){
						//console.info(result);
						successCallback(result);
					},
					error:function(){
						failureCallback();
					}
				})
			},
			eventClick: function(info) {
				//console.log(info.event);
				eventApi(info.event.id);
			}
		});
		calendar.render();
	}
	</script>
	{include file="common/layui" base='base' extend="['employeepicker','dtree']" callback="init" /}
{/block}
<!-- /脚本 -->