GEKE_PHONE/pages/sign/leaveemp.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 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: -10px;">
			     <span class="imgs">
			     	<image :src="item.avatar" class="imgs"></image>
			     </span>	
				 </div>
			     <div style="margin-top: -40px;">
					  <text style="margin-left: 15%;">{{item.realname}}</text>
				 </div>
				 <div style="margin-top: -25px;">
				 				  <text class="text-grey" style="margin-left: 35%;">{{item.orgCodeTxt}}</text>
								 <!-- <text class="text-grey" >总假期:{{item.del/24}}(天)</text> -->
<!-- 								  <text class="text-grey" style="margin-left: 15%;">剩余:{{item.del2/24}}(天)</text> -->
				 </div>
				 
			   </navigator>
			  </view> 
						</view>
	</div>
</template>

<script>
	import api from '@/api/api'
	export default {
		data() {
			return {
				name:'',
				data:[],
				userUrl:'/sys/user/queryLeaveList'
			}
			},
			watch:{
				name:{
					handler(newVal, objVal) {
					 this.querys(newVal);
			  },
				}
			},
			created(){
				this.querys(this.name)
			},
			methods:{
				
				// 返回 类似 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){
					this.$store.commit('SET_LEAVE',item);
					  this.$Router.push({name:'leaves'})
				},
				query(){
					this.data=[];
					this.$http.get(this.userUrl,{params:{username:this.name}}).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,
									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].del2,
									del2:res.data[i].del3
								}
							this.data.push(s)
							}
						}
					}).catch(err => {
						console.log(err);
					}); 
					
				},
				querys(s){
					this.data=[];
						this.$http.get(this.userUrl,{params:{username:s,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,
										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].del2,
										del2:res.data[i].del3
									}
								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>