baozhangfang/WebRoot/WEB-INF/jsp/layout/1index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="../../common/include.jsp" />
<% String basePath = request.getScheme()+ "://" + request.getServerName() + ":" +request.getServerPort() + request.getContextPath(); %>
<link rel="stylesheet" type="text/css" href="<%=basePath %>/My/Calendario/css/calendar.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath %>/My/Calendario/css/custom_2.css" />
<style type="text/css">
.custom-prev:before{
	width: 30px;
	height: 60px;
	cursor: pointer;
	margin: 0 1px;
	font-size: 20px;
	line-height: 60px;
	content: '\25c2';
	float:left;
	left: 5px;
	color: #1369d8;
	text-align: center;
}

.custom-next:before{
	width: 30px;
	height: 60px;
	cursor: pointer;
	margin: 0 1px;
	font-size: 20px;
	line-height: 60px;
	content: '\25c2';
	float:right;
	right: 5px;
	color: #1369d8;
	text-align: center;
	content: '\25b8';
}
</style>
<script src="<%=basePath %>/My/Calendario/js/modernizr.custom.63321.js"></script>
<script type="text/javascript"><!--

	//工作状态
	var taskStateObj = null;

	var taskState_array = null;

	/**用户显示区*/
	$(function() {
		$('#taskDataGrid').datagrid({
				rownumbers:true,
				fit:true,
				pageSize:10,
				pageList : [ 10, 20, 30, 40, 50 ],
				fitColumns:false,
				border:false,
				sortOrder:'desc',
				pagination:true,
				idField:'id',
				url:whzl.basePath + '/taskAction_listTask',
				toolbar:'#searchtool',
				checkOnSelect:true,
				selectOnCheck:false,
				nowrap:true,
				loadFilter:function(result){
					if(result.success){
						return result.obj;
					}else{
						$.messager.alert("提示",result.message);
						return ;
					}							
				}
		});
		
		//工作任务状态
		$.ajax({
		    type: "post",//使用post方法访问后台
		    dataType: "json",//返回json格式的数据
		    url: "aa10Action_listAa10All",//要访问的后台地址
		    data:{"aa10.letter":"taskState" ,"aa10.name":"工作状态" },
		    complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
		    success: function(msg){//msg为返回的数据，在这里做数据绑定
		    	if(msg.success){
		    		taskStateObj = msg.obj.rows;
		    		var select_arr = [];
					var data = taskStateObj;
					for(var nItem = 0; nItem < data.length; nItem++ ){
						select_arr.push("<option value="+data[nItem].code+">"+data[nItem].value+"</option>");
					}
					taskState_array = select_arr.join("");
					$("#taskState").append(taskState_array);
		    	}
		    }
		});
		
	});
	
	/**工作状态*/
	var taskStateFormatter = function(value , row , index){
		var taskState = "";
		for(var nItem = 0; nItem < taskStateObj.length; nItem++ ){
    		if(taskStateObj[nItem].code == row.state){
    			taskState = taskStateObj[nItem].value;
    			break;
    		}
   		}
		return taskState;
	};
	
	var createUserFormatter = function(value , row , index){
		if(row.createUser!=null){
			return row.createUser.fullName;
		}else{
			return "";
		}
	};
	
	var taskUserFormatter = function(value , row , index){
		if(row.taskUser!=null){
			return row.taskUser.fullName;
		}else{
			return "";
		}
	};
	
	
	/**查询*/
	function searchFun(){
		$("#taskDataGrid").datagrid("load", {
			 "task.state":$("#tblQuery").find("select[id='taskState']").val(),
			 "task.taskName":$("#tblQuery").find("input[id='taskName']").val()
        });
	}
	
	/**查询*/
	function searchState(day){
		$("#taskDataGrid").datagrid("load", {
			 "task.state":"1",
			 "task.day":day
        });
	}
	
	/*清除查询条件**/
    function ClearQuery() {
        $("#tblQuery").find("input").val("");
        $("#tblQuery").find("select").val("-1");
    }
	
	
	/**更新*/
	var updateFormatter = function(value , row , index){
		if(row.state != 3){
			return "<img src='<%=basePath%>/images/pencil.png' title='修改' onclick=toUrl('" + row.id + "','" + row.taskName + "','" + row.href + "','" + row.objId + "')  style='cursor:pointer' />";
		}else{
			return "";
		}
	};
	
	/**跳转至指定地址进行操作*/
	var toUrl = function(id,taskName,href,objId){
		if (href == "undefined"){
		}else{
			$('#taskDialog').dialog({
			    title: taskName,
			    width: 800,
			    height: 400,
			    closed: false,
			    cache: false,
			    iconCls : 'icon-update', 
			    href: href,
			    modal: true,
			    buttons : [
					{
						text : '确定', 
						iconCls : 'icon-ok', 
						handler : function(){ 
							task_submit(objId);
						}
					},
					{
						text : '取消', 
						iconCls : 'icon-cancel', 
						handler : function(){ 
							$("#taskDialog").dialog("close");
						}
					}
				],
				onLoad : function(){
					 task_load(objId);
				}
			});
		}
	}
-->
</script>

<div class="easyui-layout" data-options="fit:true,border:false">
	<div data-options="region:'west',border:false" style="width: 75%;"> 
		<div id="searchtool" data-options="region:'north' , border:false">
			<div class="clear"></div>
			<table id="tblQuery" style="width:100%;">
				<tr>
					<td align="right" style="width: 70px;"><span>工作内容</span></td>
					<td style="width: 80px;">
						<input id="taskName" name="task.taskName" type="text" style="width: 100px;"/>
					</td>
					<td align="right" style="width: 70px;"><span>完成状态</span></td>
					<td style="width: 80px;">
						<select id="taskState" name="task.state" style="width:155px" onchange="searchFun();">
							<option value="">全部</option>
						</select>
					</td>
					
					<td align="left" style="width: 200px;">
						<a href="javascript:searchFun();" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a>
						<a href="javascript:ClearQuery();" class="easyui-linkbutton" data-options="iconCls:'icon-emptied',plain:true">清空</a>
					</td>
				</tr>
				
			</table>
			<div class="clear"></div>
		</div>
		
		
		<table id="taskDataGrid"  title="我的工作" >
			<thead frozen="true">
        		<tr>
            		<th data-options="field:'taskName',sortable:true,width:300 ">工作内容</th>
        		</tr>
        	</thead>
        	<thead>  
        		<tr>
        			<th data-options="field:'createUserName',sortable:true,width:150,formatter:createUserFormatter">工作提交人</th>
        			<th data-options="field:'taskUserName',sortable:true,width:150,formatter:taskUserFormatter">工作办理人</th>
            		<th data-options="field:'workDate',sortable:true,width:150">办理时间</th>
            		<th data-options="field:'state',align:'center',width:120,formatter:taskStateFormatter">当前状态</th> 
            		<th data-options="field:'update',align:'center',width:60,formatter:updateFormatter">立即处理</th>
        		</tr>  
    		</thead>
		</table>
	</div>
	
	<div data-options="region:'east',border:false" style="width: 25%;height:auto;background-color: #FFF;">
		<div class="container">	
			<div style="width: 250px;margin-left: auto;margin-right: auto;text-align: center;">
				<div class="custom-calendar-wrap">
					<div id="custom-inner" class="custom-inner">
						<div style="width: 250px;height: 60px;overflow: hidden;">
							<div style="width: 60px;height: 60px;overflow: hidden;line-height:60px;font-size:30px;text-align:center; float: left;">
								<div id="custom-day" style="width: 60px;height: 40px;overflow: hidden;line-height:40px;font-size:30px;text-align:center;color: #ef4f69;"></div>
								<div id="custom-week" style="width: 60px;height: 20px;overflow: hidden;line-height:20px;font-size:12px;text-align:center;color: #ccc;"></div>
							</div>
							<div class="whzlhead">
								<div style="width:190px;height: 60px;line-height:60px; font-size:20px; font-weight:bold; text-align: center;color: #1369d8;">
									<div id="custom-prev" class="custom-prev"></div>
									<div id="custom-next" class="custom-next"></div>
									<div style="height: 60px;width: 110px;text-align: center;margin-left: auto;margin-right: auto;">
										<div id="custom-year" style="float:left;"></div>
										<div id="custom-month"style="float:left;"></div>
									</div>
								</div>
							</div>
						</div>
						<div id="calendar" class="fc-calendar-container"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="taskDialog"></div>

<script type="text/javascript">
<!--
	parent.$.messager.progress('close');
//-->
</script>
<script type="text/javascript" src="<%=basePath %>/My/Calendario/js/jquery.calendario.js"></script>
<script type="text/javascript">	
	$(function() {
		var transEndEventNames = {
				'WebkitTransition' : 'webkitTransitionEnd',
				'MozTransition' : 'transitionend',
				'OTransition' : 'oTransitionEnd',
				'msTransition' : 'MSTransitionEnd',
				'transition' : 'transitionend'
			},
			transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
			$wrapper = $( '#custom-inner' ),
			$calendar = $( '#calendar' ),
			cal,
			$day,
			$week,
			$month,
			$year;
		$.ajax({
		    type: "post",//使用post方法访问后台
		    dataType: "json",//返回json格式的数据
		    url: "taskAction_listMyTask",//要访问的后台地址
		    complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
		    success: function(msg){//msg为返回的数据，在这里做数据绑定
		    	if(msg.success){
		    		var codropsEvents = {};
		    		for(var i =  0;i<msg.obj.length;i++){
		    			codropsEvents[msg.obj[i].date] = msg.obj[i].cnt;
		    		}
		    		cal = $calendar.calendario( {
						onDayClick : function( $el, $contentEl, dateProperties ) {
		
							if( $contentEl.length > 0 ) {
								showEvents( $contentEl, dateProperties );
							}
		
						},
						caldata : codropsEvents,
						displayWeekAbbr : true
					} ),
					$day = $( '#custom-day' ).html( cal.getDay()),
					$week = $( '#custom-week' ).html( cal.getWeek()),
					$month = $( '#custom-month' ).html( cal.getMonthName() + "月"),
					$year = $( '#custom-year' ).html( cal.getYear() + "年");
		    	}
		    }
		});
		
		
		
			

		$( '#custom-next' ).on( 'click', function() {
			cal.gotoNextMonth( updateMonthYear );
		} );
		$( '#custom-prev' ).on( 'click', function() {
			cal.gotoPreviousMonth( updateMonthYear );
		} );

		function updateMonthYear() {				
			$month.html( cal.getMonthName() + "月");
			$year.html( cal.getYear()  + "年");
		}

		function showEvents( $contentEl, dateProperties ) {
			searchState(dateProperties.year + "-" + dateProperties.month + "-" + dateProperties.day);
		}
	});
</script>