GEKE_PHONE/pages/sign/empsign.vue

<template>
	<div >
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">考勤情况</block>
		</cu-custom>
	<view class="tmp-box">
		<view class='filterBox'>
			<view class='filter-input'>
				<text style="color: #b8b8b8;"  class="iconfont icon-sousuo filterImg"/>
				<input class="text" type='text' v-model="name"  confirm-type="搜索"  placeholder='搜索'></input>
			</view>
		</view>
	</view>
		<div>
			<div class='month'>
				<ul style="list-style-type:none;">
					<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>
		
		<view>
			<view class="container-list">
				<view class="common cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.1s'}]" v-for='(item,index) in data'  :key="index">
					<label class="content" @click="details(item.id)">
					
						<image :src="item.avatar" class="imgs"></image>
						<view class="lable-text" >{{item.realname}}</view>
						<!-- <text class="text-grey" >{{item.orgCodeTxt}}</text> -->
			<view class="right">
			<span style="color: #0081FF;font-size: 15px;" v-if='item.del=="2" ||item.del==2'>当月考勤正常</span>
			<span style="color: red;font-size: 15px;" v-if='item.del=="1" ||item.del==1'>当月考勤异常</span>
			</view>
					</label>
				</view>
				
			</view>
		</view>
		
		<view class="cu-load load-modal" v-if="loading">
				<image src="/static/login3.png" mode="aspectFit" style="top: 35px;"></image>
				<view class="gray-text" style="margin-top: 35px;">加载中...</view>
		</view>
	</div>
</template>

<script>
	import api from '@/api/api'
	export default {
		data() {
			return {
				loading:false,
				name:'',
				currentMonth: 1,
				currentYear: 1970,
				data:[],
				userUrl:'/sys/user/lists'
			}
			},
			watch:{
				name:{
					handler(newVal, objVal) {
					 this.querys(newVal);
			  },
				}
			},
			created(){
				this.initData(null)
				this.querys(this.name)
			},
			methods:{
				initData: function(cur) {
					// var leftcount = 0 // 存放剩余数量
					var date
					if (cur!=null&&cur!="") {
						date = new Date(cur)
					} else {
						var now = new Date()
						date = now;
					}
					
					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.querys(this.name);
				},
				
				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.querys(this.name);
					}
				},
				
				// 返回 类似 2016-01-02 格式的字符串
				formatDate: function(year, month, day) {
					var y = year
					if(month>12){
						month=1;
						y=year+1;
					}
					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);
					uni.setStorageSync("status",2);
					uni.setStorageSync("date",date);
					uni.setStorageSync("id",item);
					 this.$Router.push({name:'usersign'})
				},
				query(){
					this.data=[];
					this.loading=true;
					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);
						this.loading=false;
					}); 
					
				},
				querys(s){
					this.data=[];
					this.loading=true;
					var date=this.formatDate(this.currentYear,this.currentMonth,1);
						this.$http.get(this.userUrl,{params:{username:s,date:date,depid:this.$store.getters.departId}}).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);
							this.loading=false;
						}); 
				},
				
				
				
			}
			
	}
	
	
</script>

<style lang="scss" scoped>
	.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;
	}
	
	
	.imgs{
		width: 40px;
		height: 40px;
		border-radius:5px 5px 5px 5px; 
		margin-left: 1%;
	}
	
	.filterBox {
		padding: 15rpx 32rpx;
		background-color: #fff;
		.filter-input {
			height: 80rpx;
			background-color: #eeeff0;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			
			padding-left: 40rpx;
			.filterImg {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
				margin-bottom: 5rpx;
			}
			.filterImgs {
				width: 32rpx;
				height: 32rpx;
				
			}
			.text {
				width: 84%;
				background-color: #eeeff0;
				font-size: 32rpx;
				color: #000;
			}
		}
	}
	
	.flex_between_center {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	
		.checkbox {
			position: relative;
			margin-left: 10rpx;
			margin-right: 0px;
			.color {
				color: #00aaff;
				background-color: #00aaff;
			}
			.txt {
				font-size: 44rpx;
				width: 100%;
				height: 100%;
				display: flex;
			}
		}
		.checkBorder {
			border: 1px solid #ecdee4;
		}
		.header {
			width: 100%;
			position: fixed;
			background-color: #fff;
			z-index: 9999;
			.title {
				height: 90rpx;
				padding: 0 32rpx;
				line-height: 90rpx;
				font-size: 30rpx;
				background-color: #f5f5f5;
				color: #606064;
			}
		}
		.iconclass {
			display: inline-block;
			margin: 0 12rpx;
			color: #D0D4DB;
			font-size: 28rpx;
		}
		.container-list {
			overflow-y: scroll;
			overflow-x: hidden;
			padding-bottom: 160rpx;
			padding-top: 15rpx;
			.common {
				background-color: #fff;
				border-bottom: 1rpx solid #f4f4f4;
				padding-left: 10rpx;
				.content {
					display: flex;
					align-items: center;
					height: 70rpx;
					width: 100%;
					padding: 15rpx 0;
					position: relative;
					font-size: 32rpx;
					.lable-text{
						margin-left: 5%;
						font-size: 30rpx;
						color: #5b5757;
						width: 500rpx;
						word-break: break-all;
					}
					.right {
						position: absolute;
						right: 30rpx;
						color: #babdc3;
						font-size: 32rpx;
					}
				}
			}
		}
		.active {
			color: #4297ED !important;
		}
		.none {
			color: #666666;
		}
		.icon-selected{
			color: #0095F2!important;
			font-size: 40rpx!important;
		}
		.icons{
			color: #0095F2!important;
			font-size: 40rpx!important;
		}
		.inline-item {
			display: inline-block
		}
		
		.content-item{
			display: flex;
			position: relative;
			align-items: center;
		}
		
		.box_sizing {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		
		.btn {
			position: fixed;
			bottom: 0;
			padding: 10px;
			background-color: #fff;
			width: 100%;
		
			.sureBtn {
				background-color: #0095F2;
				color: #fff;
			}
		}
	// @import '@/components/xiaolu-tree/css/style.scss';
	@import url("@/components/xiaolu-tree/css/icon.css");
	
</style>