zhgdyunapp/pages/projectEnd/laborManage/attendanceManage.vue

<template>
	<view class="fullHeight">
		<headers :showBack="true" class="fixedHeaderBox">
			<view class="headerName">
				考勤记录
			</view>
		</headers>
		<view class="searchBox selectContent" :style="{ 'padding-top': (statusBarHeight+52) + 'px' }">
			<picker mode="date" @change="changeDate" :value="searchForm.attendanceDate" class="selectItem">
				<view class="selectVideoBox">
					<text class="videoName">{{searchForm.attendanceDate}}</text>
					<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
				</view>
			</picker>
			<picker mode="selector" :range="personTypeArr" @change="changePersonType" range-key="name" :value="personTypeIndex" style="margin-left:10px" class="selectItem">
				<view class="selectVideoBox">
					<text class="videoName">{{personTypeArr[personTypeIndex].name}}</text>
					<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
				</view>
			</picker>
		</view>
		<view class="middleBox" :style="{ 'padding-top': (statusBarHeight+52+40) + 'px' }">
			<view class="box">
				<view class="num">
					{{statictisData.total_person}}
				</view>
				<view class="txt">
					出勤人数
				</view>
			</view>
			<view class="box">
				<view class="num">
					{{searchForm.personType==1?statictisData.totalTeamNum:statictisData.totalDepartmentNum}}
				</view>
				<view class="txt">
					{{searchForm.personType==1?'出勤班组':'出勤部门'}}
				</view>
			</view>
		</view>
		<view class="listBox">
			 <!-- @click="searchPerson(item.id)" -->
			<view class="personItem" v-for="item in list" :key="item.id">
				<image v-if="item.fieldAcquisitionUrl" :src="url_config+'image/'+item.fieldAcquisitionUrl" class="profile_photo"></image>
				<image v-else src="/static/profile_photo.png" class="profile_photo"></image>
				<view class="personInfo">
					<view class="name">
						{{item.workerName}}
					</view>
					<view class="teamName">
						{{item.teamName?item.teamName:item.departmentName}}
					</view>
					<view class="small">
						{{item.sex==2?'女':'男'}} {{item.age}}
					</view>
				</view>
				<!-- <image src="/static/icon-right.png" class="icon-right"></image> -->
			</view>
			<view class="placeholderBox" v-show="list.length==0">
				<image src="/static/noData.png" class="noDataImg"></image>
				<view class="text">
					暂无数据
				</view>
			</view>
		</view>
		<view class="loadMoreBox" v-if="isLoadMore&&list.length>0">
			<uni-load-more :status="loadStatus" iconType="auto"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import headers from "@/components/headers/headers.vue"
	import {GetDateStr} from "@/static/js/util.js"
	export default {
		components:{headers},
		data() {
			return {
				searchForm:{
					personType: 1,//1、劳务人员 2、管理人员
					pageNo: 1,
					pageSize: 10,
					projectSn: "",
					attendanceDate:''
				},
				projectDetail:{},
				list:[],
				statusBarHeight:0,
				loadStatus:'more',
				isLoadMore:false,
				personTypeArr:[
					{
						name:'劳务人员',value:1
					},{
						name:'管理人员',value:2
					}
				],
				personTypeIndex:0,
				statictisData:{
					totalDepartmentNum: 0,
					totalTeamNum: 0,
					total_person: 0,
				}
			};
		},
		mounted() {
			this.statusBarHeight=uni.getStorageSync('systemInfo').statusBarHeight
			this.projectDetail=JSON.parse(uni.getStorageSync('projectDetail'))
			this.searchForm.projectSn=this.projectDetail.projectSn
			this.searchForm.attendanceDate=GetDateStr(0,'-')
			this.loadData()
		},
		onShow() {
			uni.removeStorageSync('person')
		},
		onReachBottom() {
			if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
				this.isLoadMore=true
				this.searchForm.pageNo+=1
				this.loadData()
			}
		},
		onPullDownRefresh() {
			this.searchForm.pageNo=1
			this.list=[]
			this.loadData()
		},
		methods:{
			changeDate(e){
				this.searchForm.attendanceDate = e.target.value
				this.list=[]
				this.searchForm.pageNo=1
				this.loadData()
			},
			changePersonType(e){
				this.personTypeIndex=e.target.value
				this.searchForm.personType=this.personTypeArr[this.personTypeIndex].value
				this.list=[]
				this.searchForm.pageNo=1
				this.loadData()
			},
			searchPerson(id){
				uni.navigateTo({
					url:'./searchTeam/personDetail?id='+id
				})
			},
			loadData(){
				var that = this
				this.sendRequest({
					url: 'xmgl/workerInfo/selectAttendanceWorkerListByDate',
					data: this.searchForm,
					method: "POST",
					success(res){
						that.statictisData=res.result.count
						that.list=that.list.concat(res.result.page.records)
						if(res.result.page.records.length<that.searchForm.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
							  that.isLoadMore=true                                             
							  that.loadStatus='nomore'
						}else{
							  that.isLoadMore=false
							  // that.loadStatus='more'
						}
						uni.stopPullDownRefresh()
						console.log('that.isLoadMore',that.isLoadMore)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.searchBox{
	// background-color: #2b8df3;
	padding: 0 15px 5px;
	position: fixed;
	left: 0;
	width: calc(100% - 30px);
	top: 0;
	z-index: 1;
}
.selectContent{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	.selectItem{
		flex: 1;
	}
}
.listBox{
	margin: 15px;
}
.personItem{
	display: flex;
	align-items: center;
	box-shadow: 0px 4px 13px 0px rgba(212, 220, 236, 0.53);
	position: relative;
	margin-bottom: 5px;
	padding: 15px;
	border-radius: 8px;
	// padding: 0 15px;
	font-size: 15px;
	.teamName{
		font-size: 13px;
	}
	.small{
		font-size: 12px;
		opacity: 0.8;
	}
	
}
.profile_photo{
	width: 50px;
	height: 60px;
	margin-right: 10px;
}
.icon-right{
	position: absolute;
	width: 8px;
	height: 14px;
	right: 15px;
	top: calc(50% - 7px);
}
.selectVideoBox {
		border: 1px solid rgba(42, 43, 91, 0.2);
		border-radius: 18px;
		height: 35px;
		font-size: 15px;
		// display: inline-block;
		width: 100%;
		display: flex;
		    justify-content: space-between;
		    align-items: center;
		.videoName {
			padding: 0 12px 0 15px;
			// border-right: 1px solid rgba(42, 43, 91, 0.2);
			line-height: 35px;
			height: 35px;
		}

		.arrow {
			padding: 0 12px 0 2px;
			margin-left: 10px;
		}
	}
	.middleBox{
		display: flex;
		align-items: center;
		margin: 5px 15px 10px;
		.box{
			flex: 1;
			// display: inline-flex;
			// align-items: center;
			// height: 65px;
			padding: 4px 0 6px;
			&:first-child{
				margin-right: 15px;
			}
			.txt{
				color: rgba(55, 45, 102, 0.6);
				font-size: 13px;
				text-align: center;
			}
			.num{
				font-size: 20px;
				font-weight: bold;
				text-align: center;
			}
		}
	}
	.box{
		box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
		border-radius: 8px;
	}
</style>