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

<template>
  <view class="pay">
	  <view class="paybox">
		  <!-- 历史工资 -->
		  <view class="hisbox flexc mb15">
			  <view class="line"></view>
			  <view class="tit">工资条记录</view>
			  <view class="hisbtn">
				<picker mode="date" fields ="month"  :value="dateyear"  @change="bindDateChangea">
					<view class="flexcc pl8">
					 <view class=" f15 co6 f500" :style="'text-align:'+textAlign" v-if="dateyear">{{year}}年{{month}}月</view>
					 <view class=" f15 co6 f500" :style="'text-align:'+textAlign" v-else>请选择日期</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 style="height: 80rpx;" v-if="checkPermi(['xiaoYuan:data:importData'])"></view>
		  <view class="addbtn" @click="getAdd" v-if="checkPermi(['xiaoYuan:data:importData'])">导入工资</view>
	  </view>
	  
  </view>
</template>

<script>
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {getDictionaryFn} from '@/api/mine/register.js'
	import {getpayListFn,getpayDelFn} 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: 20,
			pageNum: 1,
			reachflag: true,
			joinflag:false,
			wtdt: '',
			wagesList:[],//字典值 
			date:'',
			textAlign:'center',
			border:false,
			year:'',//年
			month:'',//月
			dateyear:'',
			datemonth:'',
			flag1:true,
		}
	},
	onUnload(){
		uni.$off('refreshpayfile')
	},
	onLoad: function() {
		this.init()
		// this.time()
		this.getDataFn()
		uni.$on('refreshpayfile', (e) => {
			var that=this;
			that.reachflag=true;
			this.flag1=true;
			that.pageNum=1;
			that.list=[];
			that.getDataFn()
		})
	},
	methods:{
		checkPermi,checkRole,
		init(){
			// 工资条
			getDictionaryFn('wages').then(res=>{
				if(res.code==200){
					this.wagesList = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
					this.getColumns(this.wagesList)
				}
			})
		},
		bindDateChangea(e){
			var val=e.detail.value.split('-')
			this.dateyear=e.detail.value;
			this.year=val[0];
			this.month=val[1];
			this.reachflag=true;
			this.pageNum=1;
			this.list=[];
			this.getDataFn()
		},
		bindDateChangeb(e){
			var val=e.detail.value
			
			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.getDataFn()
		},
		getColumns(info){
			var newArr=info;
			var narr=[];
			var column1=[];
			var s={ name: 'operation', type:'operation',label: '操作',
			renders:[
				// {name:'编辑',func:'edit'}, // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
				{name:'删除',type:'warn',func:"dele"},
			]}
			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)
			})
			if(checkPermi(['xiaoYuan:pay:remove'])){
				column1=column1.concat(s)
			}
			this.columns=JSON.parse(JSON.stringify(column1))
		},
		getAdd(){
			this.$tab.navigateTo('/mine/pages/payslip/format?type=add');	
		},
		dele(e){
			var id=e.payId
			var idx=e.key;
			this.$modal.confirm('确定删除该条信息？').then(() => {
				getpayDelFn(id).then(res=>{
					if(res.code==200){
						this.$toast('删除成功')
						this.list.splice(idx,1)
					}else{
						this.$toast(res.msg)
					}
				})	
			})
		},
		// 年
		getDataFn(a) {
			var params = {
				pageSize: this.pageSize,
				pageNum: this.pageNum,
				year:this.year,
				month:this.month,
			}
			// 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){
							// 处理数据
							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:30rpx 32rpx 0;position: relative;display: flex;flex-direction: column;height: 100vh;box-sizing: border-box;
		.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 20rpx;min-height: 300rpx;box-sizing: border-box;}
			.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;}
.addbtn{width:100%;
height: 100rpx;
background: #1f57e6;position: fixed;left: 0;right: 0;bottom: 0;z-index: 1;font-size: 34rpx;font-weight: 500;
color: #FFFFFF;display: flex;align-items: center;justify-content: center;}
</style>