warst/warst-h5/pages/attendanceClock/com/clock-steps.vue

<template>
	<!-- 在考勤组 -->
	<view class="steps">
		<u-steps
			:key="enterRangeCode"
			dot
			:current="current"
			direction="column"
		>
			<u-steps-item>
				<view class="go-work-content" slot="desc">
					<!--title-->
					<view class="step-item-title">
						上班 {{ detailsInfo.clockInTime }}
					</view>
					<!--content-->
					<view class="step-item-content">
						<!--已打上班卡(正常、迟到、旷工)-->
						<checkedInWork
							:detailsInfo="detailsInfo"
							v-if="
								[
									statusKeys.CHECK_IN,
									statusKeys.BE_LATE,
									statusKeys.ABSENTEEISM,
								].includes(clockStatus)
							"
						/>
						<!--未打上班卡,在地点和时间范围内,可打卡-->
						<clockableView
							v-else-if="showViewUp"
							:currentTime="currentTime"
							@punchClock="punchClock"
						/>
						<!--未打上班卡,在时间范围，不在地点范围内,不可打卡-->
						<cannotClockIn
							v-else-if="showClockInUp"
							:clockAddr="clockAddr"
							:currentTime="currentTime"
							@reloadLocation="$emit('reloadLocation')"
						/>
						<!--未打上班卡,但是已过打卡时间(缺卡)-->
						<clockInTimeout
							:clockStatus="clockStatus"
							v-if="[statusKeys.CHECK_NO].includes(clockStatus)"
						/>
					</view>
				</view>
			</u-steps-item>

			<u-steps-item>
				<view class="off-work-content" slot="desc">
					<view class="step-item-title-ash">
						下班 {{ detailsInfo.clockOutTime }}
					</view>
					<view class="step-item-content">
						<!--下班为空-还没有到打卡时间-->
						<view v-if="notClockingIn" style="color: #8c8c8c">
							未打卡
						</view>
						<!--已打下班卡(正常、加班、早退、旷工)-->
						<checkedInWork
							:detailsInfo="detailsInfo"
							@punchClock="punchClock"
							type="1"
							v-if="
								[
									statusKeys.CHECK_OUT,
									statusKeys.OVERTIME,
									statusKeys.LEAVE_EARLY,
									statusKeys.ABSENTEEISM,
								].includes(clockStatusDown)
							"
						/>
						<!--未打下班卡,在地点和时间范围内,可打卡-->
						<clockableView
							v-else-if="showViewDown"
							type="1"
							:currentTime="currentTime"
							@punchClock="punchClock"
						/>
						<!--未打下班卡,在时间范围，不在地点范围内,不可打卡-->
						<cannotClockIn
							v-else-if="showClockInDown"
							type="1"
							:clockAddr="clockAddr"
							:currentTime="currentTime"
							@reloadLocation="$emit('reloadLocation')"
						/>
						<!--未打下班卡,但是已过打卡时间(缺卡)-->
						<clockInTimeout
							type="1"
							:clockStatus="clockStatusDown"
							v-if="[statusKeys.CHECK_NO].includes(clockStatusDown)"
						/>
					</view>
				</view>
			</u-steps-item>
		</u-steps>
	</view>
</template>
<script>
import cannotClockIn from '@/pages/attendanceClock/workContent/cannotClockIn.vue'; // 不在打卡范围内,不可打卡
import checkedInWork from '@/pages/attendanceClock/workContent/checkedInWork.vue'; // 已打上班卡
import clockInTimeout from '@/pages/attendanceClock/workContent/clockInTimeout.vue'; // 未打卡(缺卡)
import clockableView from '@/pages/attendanceClock/workContent/clockableView.vue'; // 在打卡范围内,可打卡状态
import { statusKeys } from '@/pages/attendanceClock/com/allCheckData.js';
export default {
	name: 'clockSteps',
	components: {
		cannotClockIn,
		checkedInWork,
		clockInTimeout,
		clockableView,
	},
	props: {
		enterRangeCode: String, // 0不在范围内 1在范围内
		clockAddr: String, // 地点名，不在考勤范围内需显示
		detailsInfo: {
			// 打卡详情
			default: () => ({}),
			type: Object,
		},
		current: Number, // 当前steps
		currentTime: String, // hh:MM:ss 本机时间
	},
	computed: {
		// 上班---
		clockStatus() {
			// 上班status
			const detailVO = this.detailsInfo?.clockInDetailVO || {};
			return detailVO.status;
		},
		showViewUp() {
			// enterRangeCode在打卡范围 并且 步骤为0 并且上班打卡状态为null
			const { enterRangeCode, current, clockStatus } = this;
			return enterRangeCode === '1' && current === 0 && !clockStatus;
		},
		showClockInUp() {
			// enterRangeCode不在在打卡范围 并且 步骤为0 并且上班打卡状态为null
			const { enterRangeCode, current, clockStatus } = this;
			return enterRangeCode === '0' && current === 0 && !clockStatus;
		},

		// 下班---
		notClockingIn() {
			// 下班打卡的状态为空
			return !this.clockStatusDown;
		},
		clockStatusDown() {
			// 下班status
			const detailVO = this.detailsInfo?.clockOutDetailVO || {};
			return detailVO.status;
		},
		showViewDown() {
			// 在打卡范围 并且 步骤为1 并且 下班打卡的状态为null
			const { enterRangeCode, current, clockStatusDown } = this;
			return (
				enterRangeCode === '1' && current === 1 && clockStatusDown
			);
		},
		showClockInDown() {
			// 不在在打卡范围 并且 步骤为1
			const { enterRangeCode, current, clockStatusDown } = this;
			return (
				enterRangeCode === '0' && current === 1 && !clockStatusDown
			);
		},

		// com
	},
	data() {
		return {
			statusKeys,
		};
	},
	methods: {
		punchClock(type) {
			this.$emit('punchClock', type); //0上班,1下班,2更新打卡
		},
	},
};
</script>

<style scoped lang="scss">
.steps {
	/deep/.u-steps-item__wrapper__dot {
		width: 8px;
		height: 8px;
	}
	/deep/ .u-steps-item__wrapper {
		background-color: #f8f8f8;
	}

	.step-item-title {
		color: #152f62;
		font-size: 14px;
	}
	.step-item-title-ash {
		font-size: 14px;
		color: #656972;
	}

	.step-item-content {
		position: relative;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 4px;
		margin-top: 8rpx;
	}
}
</style>