GEKE_PHONE/pages/sign/leaves.vue

<template>
	<div>
	
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的假期</block>
		</cu-custom>
		<div class="panlen">
			<div class="items">
				<div style="height: 2px;"></div>
				<picker mode="date" :start="new Date(entryDate).getFullYear()" :end="new Date().getFullYear()" fields="year" :value="datetime" @change="DateChange">
					{{datetime}}年度
				</picker>
			</div>
			<div style="text-align: center;margin-top: 10px;">
				<span style="font-size: 13px;color: #FFFFFF;">历年年假剩余天数:</span><span style="margin-left:10px ;font-size: 13px;color: #FFFFFF;">{{lyearDay}}天</span>
				<span style="margin-left:10px;border-left: 2px solid #ccc;font-size: 13px;"></span>
				<span style="font-size: 13px;color: #FFFFFF;margin-left:10px ;">当年年假总天数:</span><span style="margin-left:10px ;font-size: 13px;color: #FFFFFF;">{{yearDay}}天</span>
				</br>
				</br>
				<span style="margin-left:10px ;font-size: 13px;color: #FFFFFF;">剩余年假天数:</span><span style="margin-left:10px ;font-size: 13px;color: #FFFFFF;">{{availableDay}}天</span>
				<span style="margin-left:10px;border-left: 2px solid #ccc;font-size: 13px;"></span>
				<span style="margin-left:10px ;font-size: 13px;color: #FFFFFF;">剩余可调休:</span><span style="margin-left:10px ;font-size: 13px;color: #FFFFFF;">{{txcount}}小时</span>
				
			</div>
		</div>
		<div style="background-color: #FFFFFF;">
			<div >
				<div style="height: 50px;position: relative;">
					
					<text style="position: absolute;top: 30%;margin-left: 10px;">年假申请记录</text>
				<!-- <strong style="position: absolute;top: 30%;font-size: 15px;">年假申请记录</strong> -->
				
				</div>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;"></div>
				
			<view class="cu-list  menu  radius" >
			  <view class="cu-item " v-for="s in data" v-if="s.holidayType=='年假'">
			    <navigator class="content"  hover-class="none" >
					<text>年假 ({{s.holidayCount/24}}天)</text>
			     <div>
					  <div style="color: #9C9FAA;">
					  	<span >{{s.startDates}}</span>  	
					  	<span style="margin-left:5px;">至</span>
					  	<span style="margin-left:5px;">{{s.endDates}}</span>
					  </div>
				 </div>
				 <div >
					 <span style="float: right ;margin-top: -30px;color: #D6D6D6;" v-if='s.state=="2" ||s.state==2'>已通过</span>
					 <span style="float: right ;color: #F09745;margin-top: -30px;" v-if='s.state=="1" ||s.state==1'>审批中</span>
					 <span style="float: right ;color: #F09745;margin-top: -30px;" v-if='s.state=="3" ||s.state==3'>已驳回</span>
					 <span style="float: right ;color: #F09745;margin-top: -30px;" v-if='s.state=="4" ||s.state==4'>已撤销</span>
					 <span style="float: right ;color: #F09745;margin-top: -30px;" v-if='s.state=="5" ||s.state==5'>通过后撤销</span>
					 <span style="float: right ;color: #F09745;margin-top: -30px;" v-if='s.state=="6" ||s.state==6'>已删除</span>
				 </div>
			   </navigator>
			  </view> 
			 
						</view>
				
			</div>
		</div>
	</div>
</template>

<script>
	import api from '@/api/api'
	export default {
			data() {
				return {
				userUrl:'/sys/weixin/myVacation',
				datetime:new Date().getFullYear(),
				yearDay:0,
				lyearDay:0,
				txcount:0,
				entryDate:null,
				availableDay:0,
				data:[],
				}
			},
			created() {
				this.query();
				
			},methods:{
				query(){
					var id=this.$store.getters.userid;
					var deptid=uni.getStorageSync('id');
					if(deptid!=null&&deptid!=""){
						id=deptid;
					}
					this.$http.get(this.userUrl,{params:{userid:id,year:this.datetime}}).then(res=>{
						this.yearDay=res.data.yearCount;
						this.availableDay=res.data.syYearCount;
						this.txcount=res.data.txCount;
						this.lyearDay=res.data.lsyYearCount;
						this.entryDate=res.data.entry;
						if(""!=res.data.vacationsBody &&res.data.vacationsBody!=null){
							this.data=res.data.vacationsBody;
						}else{
							this.data=[];
						}
						
						
						
					}).catch(err => {
						console.log(err);
					}); 
				},
				DateChange(e) {
					this.datetime = e.detail.value
					this.query();
				},
					ret(){
						this.$Router.push({name:'index'})
					},
				
					
				
				}
			}
			
		
</script>

<style>
	.panlen{
		width: 95%;
		height: 100px;
		border-radius:5px 5px 0 0; 
		background-color: #3C7AD8;
		margin:0 auto;
		margin-top: 10px;
	}
	.items{
		width: 70px;
		height: 25px;
		background-color: #EC770C;
		border-radius:5px 0 5px 0;
		text-align: center;
		color: #FFFFFF;
	}
	
	
	.top{
		  background-color: #5677AC;
		  width: 100%;
		  height: 40px;
		 
	}
</style>