GEKE_PHONE/pages/wages/wagesuser.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 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>
			<span style="color: #0081FF;margin-left: 20px;font-size: 18px;">工资发放情况</span>
			<div style="width: 100%;height: 10px;"></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: -10px;">
			     <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>
<!-- 								  				 				  <text class="text-grey" style="margin-left: 10%;color: #0081FF;">8000.00￥</text> -->
				 </div>
				 
			   </navigator>
			  </view> 
						</view>
	</div>
</template>

<script>
	import api from '@/api/api'
	export default {
		data() {
			return {
				currentMonth: 1,
				currentYear: 1970,
				name:'',
				data:[],
				userUrl:'/sys/user/querywagesList'
			}
			},
			watch:{
				name:{
					handler(newVal, objVal) {
					 this.querys(newVal);
			  },
				}
			},
			created(){
				this.initData()
				this.querys(this.name)
			},
			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.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
					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_WAGESID',item);
					  this.$Router.push({name:'wagesdetail2'})
				},
				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,
									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=[];
						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,
										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>