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

<template>
	<!-- 考勤统计展示-详情 -->
	<view class="steps">
		<view class="rest" v-if="showEmpty"> 今日休息，无打卡信息 </view>
		<u-steps v-else 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">
						<!--上班数据为空-->
						<view v-if="notClockUp" style="color: #8c8c8c">
							未打卡
						</view>
						<!--已打上班卡(正常、迟到、旷工)-->
						<checkedInWork
							:detailsInfo="detailsInfo"
							v-if="
								[
									statusKeys.CHECK_IN,
									statusKeys.BE_LATE,
									statusKeys.ABSENTEEISM,
								].includes(clockStatus)
							"
						/>
						<!--未上班打卡,但是已过打卡时间(缺卡)-->
						<clockInTimeout
							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"
							:notShowUpdate="true"
							@punchClock="$emit('punchClock')"
							type="1"
							v-if="
								[
									statusKeys.CHECK_OUT,
									statusKeys.OVERTIME,
									statusKeys.LEAVE_EARLY,
									statusKeys.ABSENTEEISM,
								].includes(clockStatusDown)
							"
						/>

						<!--未打下班卡,但是已过打卡时间(缺卡)-->
						<clockInTimeout
							type="1"
							v-if="[statusKeys.CHECK_NO].includes(clockStatusDown)"
						/>
					</view>
				</view>
			</u-steps-item>
		</u-steps>
	</view>
</template>
<script>
import checkedInWork from '@/pages/attendanceClock/workContent/checkedInWork.vue'; // 已打上班卡
import clockInTimeout from '@/pages/attendanceClock/workContent/clockInTimeout.vue'; // 未打卡(缺卡)
import { statusKeys } from '@/pages/attendanceClock/com/allCheckData.js';
export default {
	name: 'detailSteps',
	components: {
		checkedInWork,
		clockInTimeout,
	},
	props: {
		selectDay: {
			// 选中的天
			default: () => ({}),
			type: Object,
		},
		detailsInfo: {
			// 打卡详情
			default: () => ({}),
			type: Object,
		},
	},
	computed: {
		showEmpty() {
			const { isHoliday } = this.selectDay;
			const { clockInDetailVO, clockOutDetailVO } = this.detailsInfo;
			return (
				isHoliday !== '0' && !clockInDetailVO && !clockOutDetailVO
			); // isHoliday不是上班 并且上下班数据为空
		},
		current() {
			if (this.clockStatus) {
				return 1;
			}
			return 0;
		},

		// 上班---
		clockStatus() {
			// 上班status
			const detailVO = this.detailsInfo?.clockInDetailVO || {};
			return detailVO.status;
		},
		notClockUp() {
			// 上班的状态为空
			return !this.clockStatus;
		},

		// 下班---
		notClockingIn() {
			// 下班的状态为空
			return !this.clockStatusDown;
		},
		clockStatusDown() {
			// 下班status
			const detailVO = this.detailsInfo?.clockOutDetailVO || {};
			return detailVO.status;
		},

		// com
	},
	data() {
		return {
			statusKeys,
		};
	},
};
</script>

<style scoped lang="scss">
.steps {
	.rest {
		background-color: #fff;
		padding: 20rpx;
		color: $u-tips-color;
		font-size: 14px;
		border-radius: 4px;
	}
	/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>