GEKE_PHONE/pages/sign/empsign.vue

<template>
	<div style="background-color: #FFFFFF;">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">考勤情况</block>
		</cu-custom>
		<div class="ins">
			<div style="height: 3px;"></div>
			 <input  placeholder="🔍  搜索" style="text-align: center;" v-model="name" />
		</div>
		<br>
		<div>
			<div class='month'>
				<ul style="list-style-type:none;">
					<!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
					<li class='arrow' @click='pickPre(currentYear,currentMonth)'>上个月</li>
					<li class='year-month'>
						<span class='choose-year'>{{ currentYear }}年</span>
						<span class='choose-month'>{{ currentMonth }}月</span>
					</li>
					<li class='arrow' @click='pickNext(currentYear,currentMonth)'>下个月</li>
				</ul>
				<br>
			</div>
		</div>
		<div style="width: 100%;height: 10px;background-color:#F1F1F1 ;"></div>
		<view class="cu-list menu  radius" >
		  <view class="cu-item "v-for='(item,index) in data'>
		    <navigator class="content" @click="details(item.id)" hover-class="none">
				<div style="margin-top: -15px;">
		     <span class="imgs">
		     	<image :src="item.avatar" class="imgs"></image>
		     </span>	
			 </div>
		     <div style="margin-top: -40px;">
				  <text style="margin-left: 20%;">{{item.realname}}</text>
			 </div>
			 <div style="margin-top: -25px;">
			 				  <text class="text-grey" style="margin-left: 40%;">{{item.orgCodeTxt}}</text>
			 </div>
			 <div  style="margin-top: -25px;">
				 <span style="float: right;color: #0081FF;font-size: 15px;" v-if='item.del=="2" ||item.del==2'>当月考勤正常</span>
				 <span style="float: right;color: red;font-size: 15px;" v-if='item.del=="1" ||item.del==1'>当月考勤异常</span>
				 
			 </div>
		   </navigator>
		  </view> 
					</view>

		
		
		
	</div>
</template>

<script>
	import api from '@/api/api'
	export default {
		data() {
			return {
				name:'',
				currentMonth: 1,
				currentYear: 1970,
				data:[],
				userUrl:'/sys/user/lists'
			}
			},
			watch:{
				name:{
					handler(newVal, objVal) {
					 this.querys(newVal);
			  },
				}
			},
			created(){
				this.initData(null)
				this.query()
			},
			methods:{
				initData: function(cur) {
					// var leftcount = 0 // 存放剩余数量
					var date
					if (cur) {
						date = new Date(cur)
					} else {
						var now = new Date()
						var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1))
						d.setDate(35)
						date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
					}
					
					this.currentYear = date.getFullYear()
					this.currentMonth = date.getMonth() + 1
					
					var str = this.formatDate(
						this.currentYear,
						this.currentMonth,
						
					)
					
				},
				pickPre: function(year, month) {
					var d = new Date(this.formatDate(year, month, 1))
					d.setDate(0)
					this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
					this.query();
				},
				
				pickNext: function(year, month) {
					var d = new Date(this.formatDate(year, month, 1))
					var ds=this.formatDate(year, month, null);
					var nowDate = new Date();
					var dt=this.formatDate(nowDate.getFullYear(),nowDate.getMonth(),null);
					
					if(ds<=dt){
					d.setDate(35)
					
					this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
					this.query();
					}
				},
				
				// 返回 类似 2016-01-02 格式的字符串
				formatDate: function(year, month, day) {
					var y = year
					var m = month
					if (m < 10) m = '0' + m
					var d = day
					if(day!=null &&day !=""){
						if (d < 10) d = '0' + d
						return y + '-' + m + '-' + d
					}else{
						return y + '-' + m 
					}
					
					
				},
				details(item){
					var date=this.formatDate(this.currentYear,this.currentMonth,1);
					this.$store.commit('SET_NPMUSER',{id:item,date:date})
					  this.$Router.push({name:'empusersign'})
				},
				query(){
					this.data=[];
					var date=this.formatDate(this.currentYear,this.currentMonth,1);
					this.$http.get(this.userUrl,{params:{username:this.name,date:date}}).then(res=>{
						if(res.data.length>0){
							for(var i=0;i<res.data.length;i++){
								var s={
								id:res.data[i].id,
								realname:res.data[i].realname,
								post:res.data[i].post,
								avatar:(res.data[i].avatar && res.data[i].avatar.length > 0)? api.getFileAccessHttpUrl(res.data[i].avatar):'/static/avatar_boy.png',
								orgCodeTxt:res.data[i].orgCodeTxt,
								del:res.data[i].del
							}
						this.data.push(s)
						}
					}
					}).catch(err => {
						console.log(err);
					}); 
					
				},
				querys(s){
					this.data=[];
					var date=this.formatDate(this.currentYear,this.currentMonth,1);
						this.$http.get(this.userUrl,{params:{username:s,date:date}}).then(res=>{
							if(res.data.length>0){
								for(var i=0;i<res.data.length;i++){
									var s={
									id:res.data[i].id,
									realname:res.data[i].realname,
									post:res.data[i].post,
									avatar:(res.data[i].avatar && res.data[i].avatar.length > 0)? api.getFileAccessHttpUrl(res.data[i].avatar):'/static/avatar_boy.png',
									orgCodeTxt:res.data[i].orgCodeTxt,
									del:res.data[i].del
								}
							this.data.push(s)
							}
							}
							
						}).catch(err => {
							console.log(err);
						}); 
				},
				ret(){
					this.$Router.push({name:'index'})
				}
				
				
			}
			
	}
	
	
</script>

<style>
	.month ul {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
		height: 35px;
	}
	
	.year-month {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 10px;
	}
	
	.choose-month {
		text-align: center;
		font-size: 12px;
	}
	
	.arrow {
		padding: 15px;
		color: #999999;
	}
	
	.month ul li {
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 3px;
	}
	
	#calendar {
		font-size: 12px;
		width: 100%;
		margin: 0 auto;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
			0 1px 5px 0 rgba(0, 0, 0, 0.12);
			
	}
	
	.month {
		width: 100%;
		color: #333333;
		background: #ffffff;
	}
	.ins{
		background-color: #F1F1F1;
		width: 90%;
		height: 30px;
		margin:0 auto;
		border-radius:5px 5px 5px 5px; 
		margin-top: 10px;
		
	}
	.s{
		list-style-type:none;
		margin-left: -40px;
	}
	
	.imgs{
		width: 40px;
		height: 40px;
		border-radius:5px 5px 5px 5px; 
		
	}
	.top{
		  background-color: #5677AC;
		  width: 100%;
		  height: 40px;
		 
	}
	
</style>