yiliangyiyun-app/pages/clock/the_clock_record.vue

<template>
	<view>
				<!-- <d-rili></d-rili> -->
				<calendar showDot='true' :extraData='extraData' bgColor='#22C572' @monthTap='monthTap'></calendar>
		<view class="uni-container">
			<!-- <view class="top">
				<view class="center">月份</view>
				<view @click='show=true'>{{createDate}}</view>
				<u-picker v-model="show" mode="time" @confirm='dateChange($event)' :params="params"></u-picker>
			</view> -->
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="50">日期</uni-th>
					<uni-th align="center" width="50">上班时间</uni-th>
					<uni-th align="center" width="50">下班时间</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center" style="height: 30px;">{{ item.createDate.split(" ")[0]  }}</uni-td>
					<uni-td align="center">
						<view class="toClockDate" v-if="item.toClockDate">{{ item.toClockDate.split(" ")[1] }}</view>
						<view class="toClockDate" v-else-if="!item.toClockDate">
							<button v-if='item.approveStatus ==null && item.status == null' @click='supp(item)' class="uni-button" size="mini"
								type="primary" align="center" style="height: 30px;">补卡</button>
							<button v-if='item.approveStatus=="待人事审核"' class='listitemStatus audit Regular' size="mini"
								type="primary" align="center" style="height: 30px;">审核中</button>
							<button v-if='item.status=="补卡失败"' class='listitemStatus notPass Regular' size="mini"
								type="primary" align="center" style="height: 30px;">补卡失败</button>
							<button v-if='item.status=="补卡成功"' class='listitemStatus pass Regular' size="mini"
								type="primary" align="center" style="height: 30px;">补卡成功</button>
						</view>
					</uni-td>
					<uni-td align="center">
						<view class="offClockDate" v-if="item.offClockDate">{{ item.offClockDate.split(" ")[1] }}</view>
						<view class="offClockDate" v-else-if="!item.offClockDate">
							<button v-if='item.approveStatus ==null && item.status == null' @click='supp(item)' class="uni-button" size="mini"
								type="primary" align="center" style="height: 30px;">补卡</button>
							<button v-if='item.approveStatus=="待人事审核"' class='listitemStatus audit Regular' size="mini"
								type="primary" align="center" style="height: 30px;">审核中</button>
							<button v-if='item.status=="补卡失败"' class='listitemStatus notPass Regular' size="mini"
								type="primary" align="center" style="height: 30px;">补卡失败</button>
							<button v-if='item.status=="补卡成功"' class='listitemStatus pass Regular' size="mini"
								type="primary" align="center" style="height: 30px;">补卡成功</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import dRili from '@/components/d-rili/d-rili.vue';
	import calendar from '@/components/tale-calendar/calendar.vue';
	export default {
		components:{
			dRili,
			calendar
		},
		data() {
			return {
				extraData:[{date: '2022-10-10', value: '签到', dot: true, active: true}],
				isSHowBtn: true,
				show: false,
				tableData: [],
				pageSize: 10,
				currentPage: 1,
				params: {
					year: true,
					month: true
				},
				isLoadMore: false,
				createDate:'',
				createDate1:'',

			}
		},
		onPullDownRefresh() {
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh(); //关闭下拉刷新
			}, 1000);
		},
		onShow() {
			this.getList()
		},
		onLoad(options) {
			let _day = new Date();
			_day.setTime(_day.getTime());
			this.createDate = _day.getFullYear() + "." + (_day.getMonth() + 1);
			this.createDate1 = _day.getFullYear() + "-" + (_day.getMonth() + 1);
		},
		
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.currentPage += 1
			}
			this.getData()
		},
		methods: {
			monthTap(e){
				this.createDate1 = e.year + "-" + e.month
				console.log(e)
			},
			dateChange(e) {
				console.log(e)
				this.createDate = e.year + "." + e.month
				this.createDate1 = e.year + "-" + e.month
				this.getList()
			},
			getData() {
				this.isLoadMore = true
				this.$api.doRequest('get', '/clockInfo/selectClockInfo', {
					pageSize: this.pageSize,
					currentPage: this.currentPage,
					pcFlag: 0,
					compId: uni.getStorageSync('pcUserInfo').compId,
					commonId: uni.getStorageSync('pcUserInfo').userId,
				}).then(res => {
					if (res.data.code == 200) {
						this.isLoadMore = false
						this.tableData = this.tableData.concat(res.data.data.records)
					}
				})
			},
			getList() {
				this.isLoadMore = true
				this.$api.doRequest('get', '/clockInfo/selectClockInfo', {
					pageSize: this.pageSize,
					currentPage: this.currentPage,
					pcFlag: 0,
					yearMonth: this.createDate1,
					compId: uni.getStorageSync('pcUserInfo').compId,
					commonId: uni.getStorageSync('pcUserInfo').userId,
				}).then(res => {
					if (res.data.code == 200) {
						this.isLoadMore = false
						this.tableData = res.data.data.records

					}
				})
			},
			supp(item) {
				uni.navigateTo({
					url: '/pages/clock/supp_clock' + `?id=${item.id}`,
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	uni-page-body {
		overflow: hidden;
	}

	.uni-container {
		margin: 10rpx;
		padding: 10rpx 10rpx 300rpx 10rpx;

		.top {
			border-radius: 20rpx;
			background: white;
			padding: 20rpx;
			display: flex;
			margin-bottom: 20rpx;
			align-items: center;

			.center {
				margin-right: 50rpx;
			}
		}
	}

	.listitemStatus.audit {
		color: #ffffff;
		margin-top: 6rpx;
	}

	.listitemStatus.notPass {
		color: #ffffff;
		margin-top: 6rpx;
	}

	.listitemStatus.pass {
		color: #ffffff;
		margin-top: 6rpx;
	}

	.row {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		padding: 21rpx 0;

		.right,
		input {
			font-size: 28rpx;
			color: #333333;
		}
	}

	.uni-button {
		margin-top: 6rpx;
	}
</style>