zhgdyunapp_vue3/pages/projectEnd/laborManage/attendanceManage.vue

<template>
	<view class="fullHeight">
		<view class="" style="position: fixed; top: 0; left: 0; width: 100%; z-index: 10;background-color: #fff;">
			<headers :showBack="true" class="fixedHeaderBox">
				<view class="headerName">
					考勤记录
				</view>
			</headers>
			<view class="searchBox selectContent" :style="{ 'padding-top': ((statusBarHeight * 1.5 )+52) * 2+ 'rpx' }">
				<picker mode="date" @change="changeDate" :value="searchForm.attendanceDate" class="selectItem">
					<view class="selectVideoBox">
						<text class="videoName">{{ searchForm.attendanceDate }}</text>
						<!-- <uni-icons2 class="arrow" type="arrowdown" size="15"></uni-icons2> -->
						<uni-icons2 class="arrowright" type="arrowright"></uni-icons2>
					</view>
				</picker>
				<picker mode="selector" :range="personTypeArr" @change="changePersonType" range-key="name"
					:value="personTypeIndex" style="margin-left:20rpx" class="selectItem">
					<view class="selectVideoBox">
						<text class="videoName">{{ personTypeArr[personTypeIndex].name }}</text>
						<!-- <uni-icons2 class="arrow" type="arrowdown" size="15"></uni-icons2> -->
						<uni-icons2 class="arrowright" type="arrowright"></uni-icons2>
					</view>
				</picker>
			</view>
			<view class="middleBox" :style="{ 'padding-top': (52 + 10) * 2+ 'rpx' }">
				<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>
		<view class="listBox" :style="{ 'padding-top': ((statusBarHeight * 1.5 )+ 190) * 2+ 'rpx' }">
			<!-- @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 class="no_data1" v-if="list.length==0">
				<image src="/static/bthgIcon/noData1.png"></image>
			</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.detail.value
				this.list = []
				this.searchForm.pageNo = 1
				this.loadData()
			},
			changePersonType(e) {
				console.log(e)
				this.personTypeIndex = e.detail.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 30rpx 10rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
	}

	.selectContent {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		.selectItem {
			flex: 1;
		}
	}

	.listBox {
		margin: 30rpx;
	}

	.personItem {
		display: flex;
		align-items: center;
		box-shadow: 0px 4px 26rpx 0px rgba(212, 220, 236, 0.53);
		position: relative;
		margin-bottom: 10rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		// padding: 0 30rpx;
		font-size: 30rpx;

		.teamName {
			font-size: 26rpx;
		}

		.small {
			font-size: 24rpx;
			opacity: 0.8;
		}

	}

	.profile_photo {
		width: 100rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.icon-right {
		position: absolute;
		width: 16rpx;
		height: 28rpx;
		right: 30rpx;
		top: calc(50% - 7px);
	}

	.selectVideoBox {
		border: 1px solid rgba(42, 43, 91, 0.2);
		border-radius: 18rpx;
		height: 70rpx;
		font-size: 30rpx;
		// display: inline-block;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.videoName {
			padding: 0 24rpx 0 30rpx;
			// border-right: 1px solid rgba(42, 43, 91, 0.2);
			line-height: 70rpx;
			height: 70rpx;
			color: #2D8EF3;
		}

		.arrow {
			padding: 0 24rpx 0 4rpx;
			margin-left: 20rpx;
		}
		
		.arrowright {
			color: #2D8EF3 !important;
			font-size: 40rpx !important;
		}
	}

	.middleBox {
		display: flex;
		align-items: center;
		margin: 10rpx 30rpx 20rpx;

		.box {
			flex: 1;
			// display: inline-flex;
			// align-items: center;
			// height: 65px;
			padding: 8rpx 0 12rpx;

			&:first-child {
				margin-right: 30rpx;
			}

			.txt {
				color: rgba(55, 45, 102, 0.6);
				font-size: 28rpx;
				text-align: center;
				color: #171717;
				margin-top: 20rpx;
			}

			.num {
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				color: #3190F3;
			}
		}
	}

	.box {
		// box-shadow: 0 8rpx 48rpx 0px rgba(212, 220, 236, 0.69);
		border-radius: 16rpx;
	}
</style>