ygtx
/
ygtx_oa_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
							
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>签到记录</title>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/OA-style.css" rel="stylesheet" />
		<link href="../../css/mui.picker.css" rel="stylesheet" />
        <link href="../../css/mui.picker.all.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="login">
			<a href="" class="mui-action-back back mui-pull-left"><img src="../../images/back.png"></a>
			<h1 class="mui-title" id="title">打卡记录</h1>
			<!--设置查询时间-->
			<a id="menu" class="mui-action-menu mui-icon mui-pull-right" href="#topPopover">  
				<img src="../../images/dd_search.png" style="width: 25px;margin-top: -2px;">
			</a>
		</header>
		<div class="mui-content">
			<div id="topPopover" class="mui-popover">
				<div class="mui-popover-arrow"></div>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<div class="mui-content-padded">								
                                <button id='demo6'  class="btn mui-btn mui-btn-block" onclick="searchkstime()">
									<span id="ks_riqi">开始时间</span>
								</button>
								<button id='demo6'  class="btn mui-btn mui-btn-block" onclick="searchjstime()">
									<span id="js_riqi">结束时间</span>
								</button>	
								<div id='result' class="ui-alert"></div>
								</div>
							</li>
							<li class="mui-button-row">
								<button type="button" class="mui-btn mui-btn-primary" id="save">查找</button>&nbsp;&nbsp;
<!--								<button type="button" class="mui-btn mui-btn-primary" id="saveall">查找全部</button>
-->							</li>
						</ul>
					</div>
				</div>
			</div>	
		<!--右上角弹出菜单-->
			
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="">	
				<div class="qd_div" v-for="item in items">
					<div class="qd_div1">
						<div class="qd_div2">{{item.date}} <span class="qd_span">{{item.att_user_name}}</span></div>
					</div>
					<div class="qd_div3">
						<div class="qd_div4">晨签：<span class="qd_span1">{{item.morningCheck}}</span></div>
						<div class="qd_div5">晚签：<span class="qd_span1">{{item.nightCheck}}</span><br>
							<span style="color: red; margin-left: auto;" class="qd_span1">{{item.spcailText1}}</span><br>
							<span style="color: red; margin-left: auto;" class="qd_span1">{{item.spcailText2}}</span>
						</div>
					</div>
				</div>
				<div></div>
			</div>

		</div>
		<script type="text/javascript" src="../../js/jquery-1.11.2.min.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/config.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/dj/article/list.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/mui.picker.min.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle', 			//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						color: '#2BD009', 			//可选，默认“#2BD009” 下拉刷新控件颜色
						height: '50px', 			//可选,默认50px.下拉刷新控件的高度,
						range: '100px', 			//可选 默认100px,控件可下拉拖拽的范围
						offset: '0px', 				//可选 默认0px,下拉刷新控件的起始位置
						//auto: true, 				//可选,默认false.首次加载自动上拉刷新一次
						callback: reloadNews 		//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					},
					up: {
						contentrefresh: '正在加载...',
						contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
						auto: true, 				//可选,默认false.自动上拉加载一次
						callback: pullupRefresh
					}
				},
				statusBarBackground: '#FFFFFF', //设置状态栏颜色,仅iOS可用
				//preloadLimit:5,
			});
			
			var pageNo = 1;
			var type = 1;
			var vmA = new Vue({
				el: '#pullrefresh',
				data: {
					items: [] //列表信息流数据
				}
			});
						
			
			//下拉刷新具体业务实现（加载最新数据）
			function reloadNews() {
				vmA.items = [];
				type = 1;
				downaddData(type);		
				
			}
			//上拉加载具体业务实现
			function pullupRefresh() {
				console.log(type + "------------------")
				if(type == 1){
					upaddData(type);		//不限时间上拉刷新
				}else if(type == 2){
					upaddData2();			//时间限制上拉刷新
				}
			}
			
			function upaddData2(){
				var url = API.API_URL();
			     var serviceId = "hr_2018V01GetMyQDQtAttendance";
			     var state = app.getState(); //获取登陆信息
				 var staffId = state.user.useId;
			     var ks_att_time=document.getElementById("ks_riqi").innerHTML;	
			     var js_att_time=document.getElementById("js_riqi").innerHTML;

			     var obj = {
			     	type : 2,
					universalid:staffId,
					ks_att_time: ks_att_time,
					js_att_time: js_att_time,
					pSize: APP.PageSize,
					p: pageNo
				 };
				app.ajax(serviceId,obj, function(data) {
					//服务器返回响应
					//console.log(JSON.stringify(data))
					var result = data.returnParams;					
					var totalRow = data.total;
					var totalPage = Math.ceil(totalRow / APP.PageSize);
					var list = data.list;
					//console.log(list.length);
					if(list.length > 0) {						
						vmA.items = vmA.items.concat(convert(list));
					}
					
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(totalPage == pageNo); //参数为true代表没有更多数据了。
					if( pageNo == 1  && totalPage>1) {
						mui('#pullrefresh').pullRefresh().endPullup();
						mui('#pullrefresh').pullRefresh().refresh(true);
					}
					if(totalPage == 1 ){
						mui('#pullrefresh').pullRefresh().endPullup();
					}				
					pageNo = pageNo + 1;
					type = 2;
				});
			}
			
			//时间搜索
			document.getElementById("save").addEventListener('click',function(){
				pageNo = 1;
			    var ks_att_time=document.getElementById("ks_riqi").innerHTML;	
				if(ks_att_time == "开始时间"){
			    	mui.toast("请选择开始时间");
			    	return;
			    }
			    var js_att_time=document.getElementById("js_riqi").innerHTML;
			    if(js_att_time == "结束时间"){
			    	mui.toast("请选择结束时间");
			   		return;
			    }
			    document.getElementById('topPopover').style.display='none';
			    vmA.items = [];
				upaddData2(2);
			});
			
			function upaddData(p) {
				var url = API.API_URL();
				var serviceId = "hr_2018V01GetMyQDQtAttendance";
			  	var state = app.getState(); //获取登陆信息
				var staffId = state.user.useId;
				var ks_att_time=null;
				var js_att_time=null;
				var obj = {
					type:p,
					ks_att_time: ks_att_time,
					js_att_time: js_att_time,
					universalid:staffId,
					pSize: APP.PageSize,
					p: pageNo
				};
				app.ajax(serviceId,obj, function(data) {
					//服务器返回响应
					//console.log('-----qiandao.html------'+JSON.stringify(data))
					var result = data.returnParams;
					var totalRow = data.total;
					var totalPage = Math.ceil(totalRow / APP.PageSize);
					if(data.list.length > 0) {
						vmA.items = vmA.items.concat(convert(data.list));
					}
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(totalPage == pageNo); //参数为true代表没有更多数据了。
					if(pageNo == 1 && totalPage>1) {
						mui('#pullrefresh').pullRefresh().endPullup();
						mui('#pullrefresh').pullRefresh().refresh(true);
					}
					if(totalPage == 1 ){
						mui('#pullrefresh').pullRefresh().endPullup();
					}						
					pageNo = pageNo + 1;	
				});
			}
			
			
			function downaddData(p) {
				var url = API.API_URL();
				var serviceId = "hr_2018V01GetMyQDQtAttendance";
			  	var state = app.getState(); //获取登陆信息
				var staffId = state.user.useId;
				var obj = {
					type:p,
					ks_att_time: null,
					js_att_time: null,
					universalid:staffId,
					pSize: APP.PageSize,
					p: 1
				};
				app.ajax(serviceId,obj, function(data) {
					//服务器返回响应
					var result = data.returnParams;
					
					if(data.list.length > 0) {
						vmA.items = vmA.items.concat(convert(data.list));
					    mui('#pullrefresh').pullRefresh().endPulldown();
					}
				});
			}
			
			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 */
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					var date=item.att_time.substring(0,11);		//	"att_time":"2018-10-21 18:13:00", 
										
					//"time":"2018-10-21 18:13:00,    2018-10-21 13:53:00,    2018-10-21 18:16:00,    2018-10-21 12:13:00,    2018-10-21 08:13:00", 
				    //"type":"2,1, 2, 2, 1", 
					var timearr = item.time.split(',');
					var typearr = item.type.split(',');
					var rem =item.remark;
					var remarkarr = (  rem != null  ) ? item.remark.split(',') : null;
					var type1 = true;
					var type2 = true;
					var morningCheck = '没有该记录';
					var nightCheck 	 = '没有该记录';
					var spcailText1 = '';
					var spcailText2 = '';
					for(var i=0; i<typearr.length; i++){
						//console.log(timearr[i]+"-------"+typearr[i]);
						//考勤类型(1上班,2下班，3外出，4外出返回，5加班签到，6加班签退)
						if(typearr[i] == '1'){
							if(type1){				// 第一次为morningCheck赋值
								morningCheck = timearr[i];
								type1 = false;
							}else{					// 第二次为morningCheck赋值
								//var st="2009-10-20 14:38:40"
								//var et="2009-10-20 15:38:40"
								var stdt=new Date(morningCheck.replace("-","/"));
								var etdt=new Date(timearr[i].replace("-","/"));
								if(stdt>etdt) morningCheck = timearr[i];
							}
						}
						if(typearr[i] == '2'){		// 第一次为nightCheck赋值
							if(type2){
								nightCheck = timearr[i];
								type2 = false;
							}else{					// 第二次为nightCheck赋值
								//var st="2009-10-20 14:38:40"
								//var et="2009-10-20 15:38:40"
								var stdt=new Date(nightCheck.replace("-","/"));
								var etdt=new Date(timearr[i].replace("-","/"));
								if(stdt<etdt) nightCheck = timearr[i];
							}
						}
						if(typearr[i] == '3'){
							spcailText1 = "特殊考勤: " + timearr[i] + ' ----- 外出 ----- '+remarkarr[i];
						}
						if(typearr[i] == '4'){
							spcailText2 = "特殊考勤: " + timearr[i] + ' ----- 外出返回 ----- '+remarkarr[i];
						}
						if(typearr[i] == '6'){
							nightCheck += '加班';
						}
					}
					//console.log(morningCheck+"-------"+nightCheck);
					newItems.push({
						record_id:			item.record_id,						
						universalid: 		item.universalid,
						att_user_name: 		item.att_user_name,
						remark: 			item.remark,
						att_time: 			item.att_time,
						att_date: 			item.att_date,
						morningCheck: 		morningCheck,
						nightCheck:			nightCheck,
						date:				date,
						spcailText1:		spcailText1,
						spcailText2:		spcailText2
					});
				});
				return newItems;
			}

			//点击右上角搜索显示隐藏层
			document.getElementById("menu").addEventListener('tap',function(){
				//vmA.items = [];
				//downaddData(1);
				var state=document.getElementById('topPopover').style.display;
				if(state == 'none'){
					document.getElementById('topPopover').style.display="";
				}else{
					document.getElementById('topPopover').style.display='none';
				}
			})
			
			//选取开始时间
			function searchkstime() {
				var dDate = new Date();
				dDate.setFullYear(2014, 7, 16);
				var minDate = new Date();
				minDate.setFullYear(2010, 0, 1);
				var maxDate = new Date();
				maxDate.setFullYear(2016, 11, 31);
				plus.nativeUI.pickDate(function(e) {
					var d = e.date;
					var month=d.getMonth() + 1;
					if(month < 10){
						month= "0"+ month;
					}
					var day=d.getDate();
					if(day < 10){
						day= "0"+ day;
					}
					var a = d.getFullYear() + "-" + month + "-" + day;
					document.getElementById("ks_riqi").innerHTML=a;
				}, {
					title: "请选择日期",
					date: dDate,
					minDate: minDate,
					maxDate: maxDate
				});
			}
			//选取结束时间
			function searchjstime() {
				var dDate = new Date();
				dDate.setFullYear(2014, 7, 16);
				var minDate = new Date();
				minDate.setFullYear(2010, 0, 1);
				var maxDate = new Date();
				maxDate.setFullYear(2016, 11, 31);
				plus.nativeUI.pickDate(function(e) {
					var d = e.date;
					var month=d.getMonth() + 1;
					if(month < 10){
						month= "0"+ month;
					}
					var day=d.getDate();
					if(day < 10){
						day= "0"+ day;
					}
					var a = d.getFullYear() + "-" + month + "-" + day;
					document.getElementById("js_riqi").innerHTML=a;
				}, {
					title: "请选择日期",
					date: dDate,
					minDate: minDate,
					maxDate: maxDate
				});
			}

		</script>
	</body>

</html>