GEKE_PHONE/pages/sign/usersign.vue

<template>
	<div>	
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">考勤查询</block>
		</cu-custom>
		<div id='calendar'>
			<!-- 年份 月份 -->
			<div class='month'>
				<ul>
					<!--点击会触发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>
			<hr>
			<!-- 星期 -->
			<ul class='weekdays'>
				<li>日</li>
				<li>一</li>
				<li>二</li>
				<li>三</li>
				<li>四</li>
				<li>五</li>
				<li>六</li>
			</ul>
			<!-- 日期 -->
			<ul class='days'>
				<!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
				<li v-for='(dayobject,i) in days' :key='i'>
					<!--本月-->
					<!--如果不是本月  改变类名加灰色-->
					<span v-if='dayobject.day.getMonth()+1 != currentMonth' class='other-month'>{{ dayobject.day.getDate() }}</span>
					<!--如果是本月  还需要判断是不是这一天-->
					<span v-else>
						<!--今天  同年同月同日-->
						<!-- <span v-for='(s,i) in rows' v-if='s=='></span> -->
						<span v-if='dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()'
						 class='active' @click="getDayTime(dayobject.day)">今
						</span>
						<span v-else @click="getDayTime(dayobject.day)">
						<span class="act"  >{{ dayobject.day.getDate() }}</span>
						<div style="margin-top: -10px;" v-if='SetDays!=[] &&SetDays.length>0' v-for='(dayobj,i) in SetDays'>
							<strong  v-if='dayobj.iss == dayobject.day.getDate() && dayobj.is=="2" &&dayobject.day<=ToDay &&dayobject.day.getDay()!=0&&dayobject.day.getDay()!=6'  style="color: #4E6FE2;font-size: 20px;">.</strong>
							<strong v-if='dayobj.iss == dayobject.day.getDate() && dayobj.is=="1" &&dayobject.day<=ToDay &&dayobject.day.getDay()!=0&&dayobject.day.getDay()!=6'  style="color: red;font-size: 20px;">.</strong>
							
						</div>
						<div style="margin-top: -10px;" v-if='SetDays==[] ||SetDays.length<1'>
							<strong v-if='dayobject.day.getDay()!=0&&dayobject.day.getDay()!=6'  style="color: red;font-size: 20px;">.</strong>
						</div>
						</span>
					</span>
				</li>
			</ul>
		
			<div class='ts' v-if='count=="2"'>
				
					
				<span style="width: 10px;height: 30px;background-color: #96A8F3;border-radius:2px 0 0 2px;">
				</span>
		
				<span style="display: flex; width: 250px; height: 30px; align-items: center;background-color: #F1F3F6;"> 
				<span style="flex: 1; display: flex; justify-content: center;"> <strong>{{SetMdays}}考勤正常 </strong></span>
				</span>
			</div>
			<div class='ts' v-if='count=="1"'>
				
					
				<span style="width: 10px;height: 30px;background-color: #DA402B;border-radius:2px 0 0 2px;">
				</span>
			
				<span style="display: flex; width: 250px; height: 30px; align-items: center;background-color: #F1F3F6;"> 
				<span style="flex: 1; display: flex; justify-content: center;"> <strong>{{SetMdays}}考勤异常 </strong></span>
				</span>
			</div>
			<div style="background: #ffffff;padding: 20px;">
			<span style="color: #9599A5;font-size: 15px;">
				打卡记录: <span v-if='SetData.length<1'>无</span> 
				<ul class="steps">
				    <li v-for="(item,index) in SetData" :key="item+index" :class="{'active':Steps===index}" >
						{{item.userDate}} <span style="margin-left: 20px;">{{item.checkinType}}</span>
					</li> 
					
					 </ul>
			</span>
			</div>
			<div class='ts'>
				<span style="height: 2px;width: 100%;background-color: #B4C3E0;"></span>
				<br>
				<span style="color: #9599A5;font-size: 15px;">
					请假/外出记录:<span v-if='Setdds=="" || Setdds==null'>无</span>
					<br>
					<br>
					<span v-if='Setdds!=""&& Setdds!=null && Setdds.holidayType=="1"'>
						年假&nbsp;&nbsp;({{Setdds.holidayCount/24}}天)
					</span>
					<span v-if='Setdds!="" && Setdds!=null &&Setdds.holidayType=="2"'>
						事假&nbsp;&nbsp;({{Setdds.holidayCount/24}}天)
					</span>
					<span v-if='Setdds!="" && Setdds!=null &&Setdds.holidayType=="3"'>
						病假&nbsp;&nbsp;({{Setdds.holidayCount/24}}天)
					</span>
					<span v-if='Setdds!="" && Setdds!=null &&Setdds.holidayType=="4"'>
						调休假&nbsp;&nbsp;({{Setdds.holidayCount/24}}天)
					</span>
					<span v-if='Setdds!="" && Setdds!=null &&Setdds.holidayType=="5"'>
						婚假&nbsp;&nbsp;({{Setdds.holidayCount/24}}天)
					</span>
					<span v-if='Setdds!="" && Setdds!=null &&Setdds.holidayType=="6"'>
						产假&nbsp;&nbsp;({{Setdds.holidayCount/24}}天)
					</span>
					<span v-if='Setdds!="" && Setdds!=null &&Setdds.holidayType=="7"'>
						陪产假&nbsp;&nbsp;({{Setdds.holidayCount/24}}天)
					</span>
					<span v-if='Setdds!="" && Setdds!=null &&Setdds.holidayType=="8"'>
						其他&nbsp;&nbsp;({{Setdds.holidayCount/24}}天)
					</span>
					
				</span>
				
			</div>
		</div>
		
		
	</div>
	

</template>
<script>
	export default {
		data() {
			return {
				userUrl:'/attendance/attendance/list2',
				currentDay: 1,
				currentMonth: 1,
				currentYear: 1970,
				currentWeek: 1,
				days: [],
				rows: ["2021-1-8"],
				SetData:[],
				SetDays:[],
				SetBeginDay:null,
				SetEndDay:null,
				SetMdays:null,
				Setdds:null,
				count:'',
				ToDay:new Date(),
			}
		},
		created: function() {
			// 在vue初始化时调用
			this.initData(null)
			this.querys(null)
			
		},
		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.currentDay = date.getDate()
				this.currentYear = date.getFullYear()
				this.currentMonth = date.getMonth() + 1
				this.currentWeek = date.getDay() // 1...6,0
				if (this.currentWeek === 0) {
					this.currentWeek = 7
				}
				var str = this.formatDate(
					this.currentYear,
					this.currentMonth,
					this.currentDay
				)
				this.days.length = 0
				// 今天是周日，放在第一行第7个位置，前面6个
				// 初始化本周
				for (var i = this.currentWeek; i >= 0; i--) {
					var d2 = new Date(str)
					d2.setDate(d2.getDate() - i)
					var dayobjectSelf = {} // 用一个对象包装Date对象  以便为以后预定功能添加属性
					dayobjectSelf.day = d2
					this.days.push(dayobjectSelf) // 将日期放入data 中的days数组 供页面渲染使用
				}
				// 其他周
				for (var j = 1; j <= 37 - this.currentWeek; j++) {
					var d3 = new Date(str)
					d3.setDate(d3.getDate() + j)
					var dayobjectOther = {}
					dayobjectOther.day = d3
					this.days.push(dayobjectOther)
				}
				var s=this.days
				console.log(s)
			},
			getDayTime(el) {
			
			var date=new Date()
			var date2 =new Date(el)
			if(date2<=date){
				
				this.querys(el);
			}
				
				
			},
			querys:function(s){
				if(s!=null &&s!=""){
					var date=this.formats(s);
				}else{
					var t=new Date()
					var date=this.formats(t);
				}
				this.SetMdays=this.formatt(date);
				this.$http.get(this.userUrl,{params:{userid:this.$store.getters.userid,date:date}}).then(res=>{
					
					this.SetData=res.data.date;
					if(res.data.day.length>0&&res.data.day!=[]){
						this.SetDays=res.data.day;
					}
					
					this.Setdds=res.data.data;
					this.count=res.data.count;
					console.log(res)
				}).catch(err => {
					console.log(err);
				}); 
			},
			formats:function(e){
				 var date = new Date(e);
				  var seperator1 = "-";
				  var year = date.getFullYear();
				  var month = date.getMonth() + 1;
				  var strDate = date.getDate();
				  if (month >= 1 && month <= 9) {
				    month = "0" + month;
				  }
				  if (strDate >= 0 && strDate <= 9) {
				    strDate = "0" + strDate;
				  }
				  var currentdate = year + seperator1 + month + seperator1 + strDate;
				  return currentdate;
			},
			formatt:function(e){
				 var date = new Date(e);
				  var seperator1 = "月";
				  var day="日";
				  var month = date.getMonth() + 1;
				  var strDate = date.getDate();
				  var currentdate = month + seperator1 + strDate+day;
				  return currentdate;
			},
			pickPre: function(year, month) {
				// setDate(0); 上月最后一天
				// setDate(-1); 上月倒数第二天
				// setDate(dx) 参数dx为 上月最后一天的前后dx天
				var d = new Date(this.formatDate(year, month, 1))
				d.setDate(0)
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
				this.querys(d);
			},

			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(d);
				}
			},

			// 返回 类似 2016-01-02 格式的字符串
			formatDate: function(year, month, day) {
				var y = year
				var m = month
				if (m < 10) m = '0' + m
				var d = day
				if (d < 10) d = '0' + d
				return y + '-' + m + '-' + d
			},
			ret(){
				this.$Router.push({name:'index'})
			}
		}
	}
</script>
<style>
	.steps {
	  counter-reset: step; /*创建步骤数字计数器*/
	    width: 360px;
	    margin: 0 auto;
		margin-left: -30px;
		margin-top: 10px;
	}
	/*步骤描述*/
	.steps li {
	  position: relative;
	        padding: 0 20px 20px;
	        list-style: none;
			line-height: 22px;
			border-left: 2px solid #ccc;
	}
	
	/*步骤数字*/
	.steps li:before {
	  content: counter(step); /*设定计数器内容*/
	  counter-increment: step; /*计数器值递增*/
	  display: block;
	          position: absolute;
	          margin-left: -6px;
	          top: 0;
	          left: -5px;
	          width: 22px;
	          height: 22px;
	          line-height: 23px;
	          text-align: center;
	          background: #B4C3E0;
	          color: #EDF1F7;
	          font-size: 14px;
	          border-radius: 50%;
	  
	}
	
	li {
		list-style-type: none;
	}

	#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;
	}

	.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;
	}

	.weekdays {
		margin: 0;
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		color: #999;
		justify-content: space-around;
		background: #ffffff;
	}

	.weekdays li {
		display: inline-block;
		width: 13.6%;
		text-align: center;
	}

	.days {
		padding: 10px;
		background: #ffffff;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
	}
	.ts {
		padding: 20px;
		background: #ffffff;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
	}

	.days li {
		list-style-type: none;
		display: inline-block;
		width: 14.2%;
		text-align: center;
		padding-bottom: 4px;
		padding-top: 5px;
		font-size: 13px;
		color: #000;
		height: 40px;
	}

	.days li .active {
		padding: 8px 10px;
		border-radius: 5%;
		background: #00b8ec;
		color: #fff;
		
	}

	.days li .other-month {
		padding: 5px;
		color: gainsboro;
	}

	.days li:hover .act{
		padding: 6px 10px;
		border-radius: 50%;
		background: #e1e1e1;
		color: #fff;
	}
	
	.top{
		  background-color: #5677AC;
		  width: 100%;
		  height: 40px;
		 
	}
</style>