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.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 @click='supp' class="uni-button" size="mini" type="primary" align="center" style="height: 30px;">补卡</button>
						</view>
						<view v-if='item.status=="审核中"' class='listitemStatus audit Regular'>审核中</view>
						<view v-if='item.status=="补卡失败"' class='listitemStatus notPass Regular'>补卡失败</view>
						<view v-if='item.status=="补卡成功"' class='listitemStatus pass Regular'>补卡成功</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 @click='supp' class="uni-button" size="mini" type="primary" align="center" style="height: 30px;">补卡</button>
						</view>
						<view v-if='item.status=="审核中"' class='listitemStatus audit Regular'>审核中</view>
						<view v-if='item.status=="补卡失败"' class='listitemStatus notPass Regular'>补卡失败</view>
						<view v-if='item.status=="补卡成功"' class='listitemStatus pass Regular'>补卡成功</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				tableData: [],
				pageSize: 10,
				currentPage: 1,
				params: {
					year: true,
					month: true
				},
				isLoadMore:false
			}
		},
		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);
			
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.currentPage += 1
			}
			this.getData()
		},
		methods: {
			dateChange(e) {
				console.log(e)
				this.createDate = e.year + "-" + e.month
			},
			getData(){
				this.isLoadMore=true
					this.$api.doRequest('get','/clockInfo/selectClockInfo',{
						pageSize: this.pageSize,
						currentPage: this.currentPage,
						pcFlag:0,
						// phone:uni.getStorageSync('pcUserInfo').userMobilePhone,
						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,
							// phone:uni.getStorageSync('pcUserInfo').userMobilePhone,
							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(){
				uni.navigateTo({
					url:'/pages/clock/supp_clock'
				})
			},
		}
	}
</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:#FE6430;
	}
	.listitemStatus.notPass{
		color:#FB1E1E;
	}
	.listitemStatus.pass{
		color:#22C572;
	}
	.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>