yiliangyiyun-app/pages/clock/the_clock.vue

<template>
	<view>
		<view class="dk" v-if="value==0">
			<view class='wrap'>
				<view class="c-row">
					<view class="title">打卡原因</view>
					<view style='padding:0;' class="con-list">
						<u-radio-group activeColor="#22C572" v-model="typevalue">
							<u-radio key="3" label="下班" name="3">下班</u-radio>
							<u-radio key="1" label="上班" name="1">上班</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="c-row">
					<view class="title">目标位置</view>
					<view class="con-list">
						<view @click='show=true'>{{detailData.targetLocation}}</view>
						<u-picker :range="warehouseBaseInfoList" range-key="warehouseName"
							@confirm='targetLPicker($event)' v-model="show" mode="selector">
						</u-picker>
					</view>
				</view>
				<view class="c-row">
					<view class="title">打卡距离</view>
					<view class="con-list">
						<view>{{clockDistance}}</view>
					</view>
				</view>
			</view>
			<view>
				<u-button type="primary" class="submit" hover-class="none" @click="submit">打卡</u-button>
			</view>
		</view>
		<view class="jl" v-else>
			<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>
		<u-toast ref="uToast" />
		<view class="bottom-btn">
			<view @click='clocksubmit'>
				<image v-if='value==0' class="img" src="../../static/img/oa_office/leave/dkc.png" mode="widthFix">
				</image>
				<image v-else class="img" src="../../static/img/oa_office/leave/dk.png" mode="widthFix">
				</image>
				<view :style='{"color":value==0?"#22C572":"#000"}'>打卡</view>
			</view>
			<view @click='clockRecord' style=''>
				<image v-if='value==1' class="img" src="../../static/img/oa_office/leave/jilu-check.png"
					mode="widthFix">
				</image>
				<image v-else class="img" src="../../static/img/oa_office/leave/jilu.png" mode="widthFix">
				</image>
				<view :style='{"color":value==1?"#22C572":"#000"}'>记录</view>
			</view>
			<!-- <u-button type="primary" class="submit" hover-class="none" @click="clockRecord">记录</u-button> -->

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true
				},
				value: 0,
				typevalue: '1',
				show: false,
				detailData: {
					compId: '',
					clockType: '',
					otherReasons: '',
					targetLocation: '请选择目标位置',
					clockDistance: '重新获取',
				},
				clockDistance: "",
				warehouseType: '1',
				warehouseBaseInfoList: [],

			}
		},
		onShow() {
			this.getList()
		},
		onLoad() {
			console.log(uni.getStorageSync("clockwerehouse"))
			if (!uni.getStorageSync("clockwerehouse")) {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				this.getWarehouse()
			} else {
				this.detailData.targetLocation = uni.getStorageSync("clockwerehouse")
			}

			// this.getLocation()
			let _day = new Date();
			_day.setTime(_day.getTime());
			this.createDate = _day.getFullYear() + "-" + (_day.getMonth() + 1);
		},
		methods: {
			supp(item) {
				uni.navigateTo({
					url: '/pages/clock/supp_clock' + `?id=${item.id}`,
				})
			},
			dateChange(e) {
				console.log(e)
				this.createDate = e.year + "-" + e.month
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				this.getList()
			},
			clocksubmit() {
				this.value = 0
				uni.setNavigationBarTitle({
					title: '打卡功能'
				});
			},

			calculate() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.left')
				console.log(query)
			},
			getWarehouse() {
				var that = this
				this.$api.doRequest('get', '/warehouseBaseInfo/selectWarehouse', {
					compId: uni.getStorageSync("pcUserInfo").compId,
					warehouseType: '1'
				}).then(res => {
					uni.hideLoading()
					if (res.data.data.length != 0) {
						that.warehouseBaseInfoList = res.data.data
						that.warehouseBaseInfoList.unshift({
							warehouseName: '黑龙江中天昊元贸易有限公司',
							warehousePositioning: '40.63070,122.22580'

						})
						uni.getLocation({
							type: 'gcj02',
							geocode: true,
							success: function(res) {
								console.log('获取位置数据：', res);
								console.log('当前位置的经度：' + res.longitude);
								console.log('当前位置的纬度：' + res.latitude);
								that.lat2 = res.latitude
								that.lng2 = res.longitude
								if (that.warehouseBaseInfoList.length > 0) {
									that.clockDistance = that.utils.getDistance(that
										.warehouseBaseInfoList[0].warehousePositioning.split(',')[
											0],
										that.warehouseBaseInfoList[0].warehousePositioning.split(
											',')[1], that.lat2, that.lng2)
									that.detailData.targetLocation = that.warehouseBaseInfoList[0]
										.warehouseName
								}
							},
							fail: function(req) {
								console.log(req)
							}
						});

					}
				})
			},
			targetLPicker(e) {
				uni.setStorageSync("clockwerehouse", this.warehouseBaseInfoList[e[0]].warehouseName)
				this.detailData.targetLocation = this.warehouseBaseInfoList[e[0]].warehouseName
				this.clockDistance = this.utils.getDistance(this.warehouseBaseInfoList[e[0]].warehousePositioning.split(
						',')[0],
					this.warehouseBaseInfoList[e[0]].warehousePositioning.split(',')[1], this.lat2, this.lng2)

			},
			submit() {
				if (!this.typevalue) {
					this.$api.msg('打卡原因不能为空')
					return
				}
				if (!this.detailData.targetLocation) {
					this.$api.msg('请选择目标位置')
					return
				}
				var that = this
				uni.showModal({
					content: "确定提交打卡信息？",
					showCancel: true,
					confirmText: '提交',
					success: function(res) {
						if (res.confirm) {
							that.detailData.compId = uni.getStorageSync('pcUserInfo').compId
							that.detailData.commonId = uni.getStorageSync('pcUserInfo').userId
							that.detailData.dept = uni.getStorageSync('pcUserInfo').deptName
							that.detailData.phone = uni.getStorageSync('pcUserInfo').userMobilePhone
							that.detailData.empName = uni.getStorageSync('userInfo').userName
							that.detailData.clockType = that.typevalue
							if (that.clockDistance.indexOf("km") > -1) {
								that.detailData.clockDistance = that.clockDistance.replace("km", "") * 1000
							} else {
								that.detailData.clockDistance = that.clockDistance.replace("m", "")
							}
							console.log(that.detailData)
							that.$api.doRequest('post', '/clockInfo/api/addClock', that.detailData)
								.then(res => {
									console.log(res.data)
									if (res.data.code == 200) {
										that.$api.msg('提交成功')
										that.value = 1
									} else {
										that.$api.msg('提交失败')
									}
								})
						}
					}
				})
			},
			clockRecord() {
				this.value = 1
				uni.setNavigationBarTitle({
					title: '记录'
				});
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getList()
				// uni.navigateTo({
				// 	url: '/pages/clock/the_clock_record'
				// })
			},
			getList() {
				this.$api.doRequest('get', '/clockInfo/selectClockInfo', {
					pageSize: 100,
					currentPage: 1,
					pcFlag: 0,
					yearMonth: this.createDate,
					compId: uni.getStorageSync('pcUserInfo').compId,
					commonId: uni.getStorageSync('pcUserInfo').userId,
				}).then(res => {
					if (res.data.code == 200) {
						uni.hideLoading()
						this.tableData = res.data.data.records
						this.$forceUpdate() //刷新data数据

					}
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
	page {
		background: #F5F6FA;
	}

	.title_b {
		margin: 20rpx 20rpx 0rpx 20rpx;
		padding: 20rpx 10rpx 20rpx 10rpx;
		font-size: 18px;
		font-weight: 550;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.con-list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #303133;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
	}

	.wrap {
		padding-bottom: 10px;
		font-size: 14px;
		background: #fff;
		margin: 10px;
		border-radius: 10px;

		input {
			font-size: 14px;
		}

		>.title {
			padding: 10px 16px;
		}

	}

	/* 	.footer {
		background: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 20px 10px;
		z-index: 10;

		.button {
			background: #22C572;
			width: 90%;
			margin: 20rpx auto;
			padding: 10px;
			color: #fff;
			text-align: center;
			border-radius: 30px;
		}
	} */
	.submit {
		width: 80%;
		background: #22C572;
		border-radius: 50rpx;
		margin-top: 50rpx;
	}

	.bottom-btn {
		padding: 30rpx;
		background: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		z-index: 9999;
		justify-content: space-evenly;
	}

	.buns_item {
		display: flex;
		padding: 80rpx 0 50rpx 0;
		justify-content: space-around;
	}

	.but_css {
		background: #22C572;
		width: 40%;
		padding: 20rpx;
		color: #fff;
		text-align: center;
		border-radius: 20rpx;
	}

	/deep/.u-radio-group {
		flex-direction: row-reverse;
	}

	.img {
		width: 50rpx;
	}

	.uni-container {
		padding: 20rpx;

		.top {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

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

	}
</style>