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 v-if='item.status ==null' @click='supp(item)' class="uni-button" size="mini"
								type="primary" align="center" style="height: 30px;">补卡</button>
							<button @click='examine(item)' v-if='item.status=="审核中"'
								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.status ==null' @click='supp(item)' class="uni-button" size="mini"
								type="primary" align="center" style="height: 30px;">补卡</button>
							<button @click='examine(item)' v-if='item.status=="审核中"'
								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 v-if='show1' class="shade">
				<view class="wrap">
					<view class="alert-top">
						<view class="title">
							{{title}}
						</view>
						<u-icon name="close" class="close" color="#8890B1" @click="close()"></u-icon>
					</view>
					<view class="u-textarea-style">
						{{reasonForApplication}}
					</view>
					<view @click='rejectSubmit()' class="cancel">驳回</view>
					<view @click='passSubmit()' class="confirm">通过</view>
				</view>
			</view>
			<!-- <u-toast ref="uToast" />
			<view style='padding:10px;' class='flex bottom-btn'>
				<u-button v-if='isSHowBtn' @click='reject' type="error" class="btn1" hover-class='none'>驳回</u-button>
				<u-button v-if='isSHowBtn' @click='pass' type="success" class="btn2">通过</u-button>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSHowBtn: true,
				show1: false,
				show: false,
				tableData: [],
				pageSize: 10,
				reasonForApplication: '',
				currentPage: 1,
				params: {
					year: true,
					month: true
				},
				isLoadMore: false,
				title: "补卡申请",
				auditMind: "",


			}
		},
		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: {
			examine(item) {
				this.show1 = true
				this.id = item.id
				this.reasonForApplication = item.reasonForApplication
			},
			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,
					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

					}
				})
			},
			close() {
				this.show1 = false
			},
			// 驳回
			rejectSubmit() {
				var that = this
				this.show1 = false
				uni.showModal({
					content: "是否确定驳回?",
					showCancel: true,
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							that.$api.doRequest('post', '/clockInfo/api/examineClock', {
									examineFlag: "2",
									id: that.id
								})
								.then(res => {
									if (res.data.code == 200) {
										that.$api.msg('提交成功')
										that.getList()
									} else {
										that.$api.msg('提交失败')
									}
								})
						}
					}
				})
			},
			//通过
			passSubmit() {
				var that = this
				this.show1 = false
				uni.showModal({
					content: "是否确定通过?",
					showCancel: true,
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							that.$api.doRequest('post', '/clockInfo/api/examineClock', {
									examineFlag: "1",
									id: that.id
								})
								.then(res => {
									if (res.data.code == 200) {
										that.$api.msg('提交成功')
										that.getList()
									} else {
										that.$api.msg('提交失败')
									}
								})
						}
					}
				})
			},
			supp(item) {
				uni.navigateTo({
					url: '/pages/clock/supp_clock' + `?id=${item.id}`,
					// url: item.url + `?companyId=${that.companyId}`
				})
			},
		}
	}
</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;
	}

	.shade {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 3;

		.wrap {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background: #fff;
			width: calc(100% - 198rpx);
			height: 250px;
			border-radius: 20rpx;

			.alert-top {
				padding: 33rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
			}

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}

			.close {
				position: absolute;
				right: 33rpx;
			}
		}

		.u-textarea-style {
			margin: 20rpx;
			background: #F9F9FA;
			border-radius: 10px;
			border: 1px solid #EEEEEE;
			padding: 10rpx 20rpx;
			height: 113px;

			.right-bottom {
				// position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				color: #AFB3BF;
			}
		}

		.cancel {
			position: absolute;
			display: inline-block;
			width: 50%;
			text-align: center;
			bottom: 0;
			padding: 10px;
			border-top: 1px solid #eee;
			font-size: 34rpx;
		}

		.confirm {
			position: absolute;
			display: inline-block;
			width: 50%;
			text-align: center;
			bottom: 0;
			padding: 10px;
			border-top: 1px solid #eee;
			font-size: 34rpx;
		}

		.cancel {
			left: 0;
			border-right: 1px solid #eee;
			color: #ff0000;
		}

		.confirm {
			right: 0;
			color: #22C572;
		}

		.bottom-btn {
			width: 100%;
			// position: fixed;
			bottom: 0;
			display: flex;
			z-index: 2;
			left: 0;
			background-color: #f8f8f8;
			flex-direction: column;

			.btn1,
			.btn2 {
				width: 100%;
				margin-bottom: 26rpx;
				border-radius: 90rpx;
			}

			.btn1 {
				background: white;
				color: #00C265;
			}
		}
	}
</style>