LpRealName/pages/realName/workbench/wageRecord/index.vue

<template>
  <view class="page">
    <u-navbar class="u-navbar" title="工资查看" placeholder @leftClick="leftClick" leftIconColor="#fff"  bgColor="#00337A"  :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
	<view style="width: 94%;height: 80rpx;margin: 20rpx auto;">
		<uni-data-select v-model="payrollName" :localdata="payRollList" @change="changePay" :clear="false"></uni-data-select> 
	</view>
	<view style="width: 94%;height: 80rpx;margin: 20rpx auto;">
		<u-search shape="square" placeholder="搜索"  v-model="keyword" :showAction="true" actionText="搜索" :animation="false" @custom="searchList"></u-search>
	</view>
	<!-- 列表 -->
	<view class="list-box">
		<view style="width: 100%;height: 70vh;display: flex;align-items: center;justify-content: center;" v-if="isLoading">
			<u-loading-icon :show="true" mode="circle" text="加载中" :vertical="true"></u-loading-icon>
		</view>
		<view v-if="!isLoading&&listData.length==0" style="width: 96%;height: 60vh;display: flex;flex-direction: column;justify-content: center;align-items: center;" >
			<image src="../../../../static/realName/noData.png" style="width: 100rpx;height: 120rpx;" mode=""></image>
			<view>暂无数据</view>
		</view>
		<u-list height="76vh" v-if="!isLoading&&listData.length>0">
			<u-list-item  v-for="(item, index) in listData" :key="index">
				<view class="list-item" @click="goDetail(item)">
					<view class="content-box">
						<view class="item-text" >
							<text class="label" style="font-weight: bold;">姓名：</text>
							<text class="info">{{item.name}}</text>
							<text class="info-right" style="color: #4CAF50;" v-if="item.isPay==2">已到账</text> 
							<text class="info-right" style="color: #F44336;" v-else>未到账</text>
						</view>
						<view class="item-text">
							<text class="label" style="font-weight: bold;">身份证号：</text>
							<text class="info">{{item.idNumber}}</text>
						</view>
						<view class="item-text">
							<text class="label" style="font-weight: bold;">工资金额：</text>
							<text class="info">{{item.payAmount}}</text>
						</view>
						<view class="item-text">
							<text class="label" style="font-weight: bold;">到账金额：</text>
							<text class="info">{{item.payableAmount}}</text>
						</view>
						<view class="item-text">
							<text class="label" style="font-weight: bold;">生成时间：</text>
							<text class="info">{{item.createTime}}</text>
						</view>
						<view class="item-text">
							<text class="label" style="font-weight: bold;">银行卡号：</text>
							<text class="info">{{item.bankNumber}}</text>
						</view>
						 
					</view> 
					 
				</view>
			</u-list-item>
		</u-list>
	</view>
	
  </view>
</template>

<script>
import config from '@/config'
export default {
  data() {
    return {
		proId:uni.getStorageSync('realNameUser').proId,
		payRollList: [],
		payrollName:'',
		keyword:'',
		listData:[],
		number:0,
		isLoading:false
    }
  },
  onLoad() {
    // console.log('?? ~ mounted ~ mounted-index:') 
	this.getPayrollNameList()//获取工资册下拉数据
  },
  onShow() {
  },
  methods: {
	//获取工资册下拉数据
	getPayrollNameList(){
				let param={
					proId:this.proId
				}
				uni.request({
				  url: config.realAppUrl+'/PayView/getPayrollNameList',
				  method: 'post',
				  data: param,
				  header: {
					'Content-Type': 'application/json;charset=UTF-8;',
					Authorization: uni.getStorageSync('realNameToken')
				  },
				  success: res => {
					res = res.data;
					if(res.code==200){
						this.payRollList=[]
						if(res.data.length>0){
							res.data.forEach(item=>{
								let obj={
									value:item.payrollName,
									text:item.payrollName
								}
								this.payRollList.push(obj)
							})
							this.payrollName=this.payRollList[0].value;
							this.listData=[]
							this.loadList()
							console.log(this.payRollList)
						}else{
							this.listData=[]
							uni.showToast({
								title: '暂无数据',
								icon: 'none'
							})
						}
					}else{
						this.listData=[]
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
					}
				  },
				  fail: err => {
				    this.listData=[]
					uni.showToast({
						title: '暂无数据',
						icon: 'none'
					})
				  }
				})
	
	},
	//更改工资册下拉选
	changePay(e){
		console.log(e)
		this.payrollName=e;
		this.listData=[]
		this.loadList()
	},
	//搜索
	searchList(value){
		this.listData=[]
		this.loadList()
	},
	loadList(){
		let param={
			proId:this.proId,
			name:this.keyword,
			payrollName:this.payrollName
		}
		this.isLoading=true
		uni.request({
		  url: config.realAppUrl+'/PayView/getSalaryBookList',
		  method: 'post',
		  data: param,
		  header: {
			'Content-Type': 'application/json;charset=UTF-8;',
			Authorization: uni.getStorageSync('realNameToken')
		  },
		  success: res => {
			console.log(res)
			res = res.data;
			if(res.code==200){
				this.listData=res.data;
				this.number=res.data.length
				this.$forceUpdate()
				this.isLoading=false
				// console.log(this.listData)
			}else{
				this.listData=[]
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.isLoading=false
			}
		  },
		  fail: err => {
			console.log(err)
			this.isLoading=false
		  }
		})
	},
	goDetail(item){
		console.log(item)
		uni.navigateTo({
			url: `/pages/realName/workbench/wageRecord/detail?detailData=${JSON.stringify(item)}`
		})
	},
    // 返回
    leftClick() {
      console.log('返回')
      uni.navigateBack({
      	delta: 1 // 返回
      });
    }
  },

}
</script>

<style lang="scss">
.page {
	width: 100vw;
	height: 100vh;
	background-color: #EFEFEF;
	box-sizing: border-box;
	// padding: 0 20px;
	.list-box{
		width: 90%;
		height: auto;
		// border: 1px solid #000;
		margin: 0rpx auto;
		
		.list-item{
			width: 100%;
			height: auto;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 20rpx 0;
			
			.content-box{
				width: 94%;
				height: auto;
				margin: 20rpx;
				// background-color: #F8F9FC;
				padding: 10rpx 0;
				
				.item-text{
					width: 95%;
					margin-left: 20rpx;
					margin-top: 15rpx;
					// display: flex;
					align-items: center;
					position: relative;
					.label{
						color: #3A3A3A;
						font-weight: 500;
					}
					.info-right{
						position: absolute;
						top: 0rpx;
						right: 40rpx;
					}
					.info{
						color: #6F6F6F;
					
					}
				}
			}
		}
	}
}
</style>