yiliangyiyun-app/pages/clock/the_clock_record.vue

<template>
	<view>
		<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.clockDay }}</uni-td>
					<!-- {{ item.createDate.split(" ")[0]  }} -->
					<uni-td align="center">
						<view class="toClockDate" v-if="item.toClockDate">{{ item.toClockDate.split(" ")[1] }}
							<view style="color: red;" v-if="item.lateFlag == 1">迟
							</view>
						</view>
						<view class="toClockDate" v-else-if="!item.toClockDate && !item.leaveType">
							<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>
						<view class="toClockDate" v-if="!item.toClockDate && item.leaveType">
							{{item.leaveType}}
						</view>
					</uni-td>
					<uni-td align="center">
						<view class="offClockDate" v-if="item.offClockDate">{{ item.offClockDate.split(" ")[1] }}
							<view style="color: red;" v-if="item.leaveEarlyFlag == 1">迟
							</view>
						</view>
						<view class="offClockDate" v-else-if="!item.offClockDate && !item.leaveType">
							<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>
						<view class="offClockDate" v-if="!item.offClockDate && item.leaveType">
							{{item.leaveType}}
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				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: {
			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>