zhihuixiaoyuan2-ui/mine/pages/payslip/index.vue

<template>
  <view class="pay">
	  <image :src="pbg" class="paytop"></image>
	  <view class="paybox">
		  <view class="flext mb18">
			  <view class="flex1 pl16">
			  		<view class="cof fw f30 mb8 wordb">{{nodataflag?paymonth.shifa:0}}</view>
			  		<view class="cof fw5 f16">本月实发工资</view>
			  </view>
			  <view class="flex0">
				  <picker mode="date" fields ="month"  :value="datemonth"  @change="bindDateChangea">
				  	<view class="pay_btn flexcc">
				  	 <view class="f15 cofe f500" :style="'text-align:'+textAlign">{{year}}年{{month}}月</view>
				  	 <image :src="pup"></image>
				  	</view>
				  </picker>
			  </view> 		  
		  </view>
		  
		  <view class="paybg paya mb15" v-if="nodataflag">
			  <block v-for="(ite,key)  in paymonth">
				  <view class="paylist" v-if="key!='shifa'">
				  	<view class="tit">{{ite||0}}</view>
				  	<view class="txt">{{key}}</view>
				  </view>
			  </block>
		  </view>
		  <view class="paybg payc mb15" v-else>
		  		<image :src="noicon"></image>
		  		<view>本月暂无工资条数据</view>
		  </view>
		  <!-- 历史工资 -->
		  <view class="hisbox flexc mb15">
			  <view class="line"></view>
			  <view class="tit">历史工资条记录</view>
			  <view class="hisbtn">
				<picker mode="date" fields ="year"  :value="dateyear"  @change="bindDateChangeb">
					<view class="flexcc pl8">
					 <view class=" f15 co6 f500" :style="'text-align:'+textAlign">{{dateyear||'2023'}}年</view>
					 <image :src="aup"></image>
					</view>
				</picker>  
			  </view>
		  </view>
		  <view class="paybg payb flex1" style="overflow: hidden;">
			  <zb-table
				ref="zbTable"
			    :show-header="true"
			    :columns="columns"
			    :stripe="true"
				:pullUpLoading="pullUpLoading"
				:isShowLoadMore="reachflag"
			    :fit="true"
			    @rowClick="rowClick"
			    @toggleRowSelection="toggleRowSelection"
			    @toggleAllSelection="toggleAllSelection"
			    :border="border"
			    @edit="buttonEdit"
			    @dele="dele"
			    :data="list"></zb-table>
		  </view>
	  </view>
	  
  </view>
</template>

<script>
	import {getDictionaryFn} from '@/api/mine/register.js'
	import {getpayListFn} from '@/api/mine/payslip.js'
	import zbTable from "@/mine/components/zb-table/zb-tables.vue"
  export default {
	components:{
		zbTable 
	},
	data(){
		return{
			pbg:require("@/work/static/pay/pbg.png"), 
			aup:require("@/work/static/pay/aup.png"), 
			pup:require("@/work/static/pay/pup.png"),
			noicon:require("@/work/static/pay/noicon.png"),
			columns:[],
			list: [],
			paymonth:{},//当月工资条
			nodataflag:false,//当月是否有工资
			pageSize: 15,
			pageNum: 1,
			reachflag: true,
			joinflag:false,
			wtdt: '',
			paylist:[
				{a:'06',b:1700,c:1600,d:20,e:30,f:20,g:30},
				{a:'07',b:1700,c:1600,d:20,e:30,f:20,g:30},
				{a:'08',b:1700,c:1600,d:20,e:30,f:20,g:30},
				],
			wagesList:[],//字典值 
			date:'',
			textAlign:'center',
			border:false,
			year:'',//年
			month:'',//月
			dateyear:'',
			datemonth:'',
			flag1:true,
			mondab:'',//发放时间汉字
		}
	},
	onLoad: function() {
		// var newArr=[
		// 	{ name: 'a', label: '月份',fixed:true,width:50,emptyString:'--',align:'center'},
		// 	{ name: 'c', label: '实发工资',fixed:true,width:70,emptyString:'--',align:'center'},
		// 	{ name: 'b', label: '岗位工资',width:70,emptyString:'--',align:'center'},
		// 	{ name: 'd', label: '薪级工资',width:70,emptyString:'--',align:'center'},
		// 	{ name: 'e', label: '教龄津贴',width:70,emptyString:'--',align:'center'},
		// 	{ name: 'f', label: '教龄津贴',width:70,emptyString:'--',align:'center'},
		// 	{ name: 'g', label: '教龄津贴',width:70,emptyString:'--',align:'center'},
		// ]
		// this.columns=newArr
		this.init()
		this.time()
		
	},
	methods:{
		init(){
			// 工资条
			getDictionaryFn('wages').then(res=>{
				if(res.code==200){
					this.wagesList = res.data.map(v => {
						if(v.dictValue=='fafangshij'){
							this.mondab=v.dictLabel
						}
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
					this.getColumns(this.wagesList)
				}
			})
		},
		bindDateChangea(e){
			var val=e.detail.value.split('-')
			this.year=val[0];
			this.month=val[1];
			this.getDataMonth()
		},
		bindDateChangeb(e){
			var val=e.detail.value
			this.dateyear=val;
			this.reachflag=true;
			this.pageNum=1;
			this.list=[];
			this.getDataFn()
		},
		time() {
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			this.year = y;
			this.month = m < 10 ? "0" + m : m;
			this.dateyear=y;
			// 获取当月的工资
			this.getDataMonth()
			this.getDataFn()
		},
		getColumns(info){
			var newArr=info;
			var narr=[];
			// var column1=[]
			var column1=[{ name:'fmonth',label: '月份', fixed:true,width:30,align:'center'},];
			// { name: 'scoreDataName', label: '姓名',fixed:true,width:70,emptyString:'--',align:'center' }
	
			Object.keys(newArr).some((key) => {
				var obj={};
				obj.name=newArr[key].dictLabel;
				obj.label=newArr[key].dictLabel;
				// obj.sorter=true
				obj.align='center'
				obj.width='70'
				obj.paddingRight=12;
				column1.push(obj)
			})
			// column1=column1.concat(narr)
			this.columns=JSON.parse(JSON.stringify(column1))
		},
		getDataMonth(){
			var params = {
				pageSize: this.pageSize,
				pageNum: this.pageNum,
				year:this.year,
				month:this.month
			}
			getpayListFn(params).then(res => {
				if (res.code == 200) {
					var data=res.data;
					if(data.records&&data.records.length){
						var paylist=data.records[0].tableDataJO
						if(paylist&&paylist.length){
							this.nodataflag=true;
							// 处理数据
							var dat=paylist[0];
							var wages=this.wagesList;
							var newObja={};
							Object.keys(wages).some((key) => {
								var dict=wages[key].dictValue;
								var dicts=wages[key].dictLabel
								if(wages[key]&&dict!='xingming'&&dict!='gonghao'&&dict!='fafangshij'&&dict!='shifa'){
									newObja[dicts]=dat[dicts]
								}else if(wages[key]&&dict=='shifa'){
									newObja['shifa']=dat[dicts]
								}
							})
							this.paymonth=newObja
						}else{
							this.nodataflag=false
						}
					}	
				} else {
					this.$toast(res.msg)
				}
			})
		},
		// 年
		getDataFn(a) {
			var params = {
				pageSize: this.pageSize,
				pageNum: this.pageNum,
				year:this.dateyear,
			}
			// params['params[role]']=this.$store.state.user.choseroles
			getpayListFn(params).then(res => {
				this.flag1=true;
				if (res.code == 200) {
					if (res.data.size < this.pageSize) {
						this.reachflag = false
						this.wtdt = '到底了~';
						this.$refs.zbTable.pullUpCompleteLoading('ok')
					} else {
						var num = parseInt(res.data.size) + parseInt(this.pageSize) * parseInt(this.pageNum -1)
						if (num < res.data.total) {
							this.reachflag = true
							this.wtdt = '上拉加载更多'
							this.$refs.zbTable.pullUpCompleteLoading('')
						} else {
							this.reachflag = false
							this.wtdt = '到底了~';
							this.$refs.zbTable.pullUpCompleteLoading('ok')
						}
					}
					var data=res.data;
					if(data.records&&data.records.length){
						var paylist=data.records[0].tableDataJO
						if(paylist&&paylist.length){
							// 处理数据
							Object.keys(paylist).some((key) => {
								var a=this.mondab
								if (paylist[key][a]&&a) {
									var s=paylist[key][a].split('-')
									paylist[key].fmonth=s[1]
								}
							})
							if (this.pageNum == 1) {
								this.list = paylist;
							} else {
								this.list = this.list.concat(paylist)
							}
						}
					}	
				} else {
					this.$toast(res.msg)
				}
			})
		},
		pullUpLoading(done){
		  if(!this.flag1){
		    return
		  }
		  var that=this;
		  this.flag1=false;
		  setTimeout(()=>{
			that.pageNum++
			that.getDataFn()
		  },100)
		},
	},
	
  }
</script>
<style lang="scss" scoped>
.pay{
	.paytop{width: 100%;height: 300rpx;}
	.paybox{
		
		padding:0 32rpx;position: relative;margin-top: -250rpx;display: flex;flex-direction: column;height: calc(100vh - 50rpx);
		.pay_btn{width: 240rpx;height: 66rpx;background: rgba(0, 0, 0, 0.4);border-radius: 32rpx;
			font-size: 30rpx;font-weight: 500;color: #ECECEC;
			image{width: 18rpx;height: 10rpx;margin-left: 20rpx;}
		}
		.paybg{
			background: #FFFFFF;width: 100%;border-radius: 20rpx;
			&.paya{display: flex;align-items: center;flex-wrap: wrap;padding:16rpx 0;}
			&.payb{padding: 30rpx 24rpx 0;min-height: 600rpx;box-sizing: border-box;border-radius: 20rpx 20rpx 0 0;}
			.paylist{width: 25%;display: flex;flex-direction: column;align-items: center;padding: 16rpx 0;
				.tit{font-size: 38rpx;color: #161616;font-weight: bold;margin-bottom: 6rpx;}
				.txt{font-size: 26rpx;color: #666666;}
			}
			&.payc{height: 388rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 26rpx;font-weight: 500;
color: #AAAAAA;
				image{width: 232rpx;height: 168rpx;margin-bottom: 40rpx;}
			}
		}
		.hisbox{
			.line{width: 10rpx;height: 40rpx;background: #1F57E6;border-radius: 6rpx;flex: 0 0 auto;margin-right: 26rpx;}
			.tit{font-size: 32rpx;font-weight: bold;color: #161616;flex: 1;}
			.hisbtn{
				image{width: 18rpx;height: 10rpx;margin-left: 14rpx;}
			}
		}
	}
	
}
.pay /deep/ .zb-table .zb-table-header{background-color: #F2F5FB;}
.pay /deep/ .zb-table .odd{background-color: #F2F5FB;}
.pay /deep/ .item-td{border-bottom: none;font-weight: bold;font-size: 26rpx;}
.pay /deep/ .item-th{border-bottom: none;font-weight: bold;font-size: 26rpx;}
.pay /deep/ .zb-table-tbody{padding-bottom: 20rpx;}
</style>