warst/warst-h5/pages/attendanceClock/workContent/checkedInWork.vue

<template>
	<!--已打卡-->
	<view class="checked-in-work">
		<view class="cw-header">
			<view>
				<text class="cw-title">已打卡</text>
				<text
					:class="currentInfo.status"
					class="status-com-txt"
					v-if="isShowStatus"
				>
					{{ punchStatus }}
				</text>
			</view>

			<c-button
				type="text"
				v-if="type === '1' && !notShowUpdate"
				@click="punchClock"
			>
				更新下班卡
			</c-button>
		</view>
		<view class="time-box">
			<text class="label">打卡时间</text>
			<text class="value">{{ currentInfo.clockTime }}</text>
			<text class="clock-in-type" v-if="currentInfo.checkAddr">{{
				currentInfo.checkAddr
			}}</text>
		</view>
		<view class="place-box">
			<text class="label">打卡地点</text>
			<text class="value">{{ currentInfo.clockAddr }}</text>
		</view>
	</view>
</template>

<script>
import {
	checkStatus,
	checkOutStatus,
	statusKeys,
} from '@/pages/attendanceClock/com/allCheckData.js';
export default {
	name: 'checkedInWork',
	props: {
		notShowUpdate: Boolean,
		type: {
			default: '0', // 0上班，1下班
			type: String,
		},
		detailsInfo: {
			// 打卡详情
			default: () => ({}),
			type: Object,
		},
	},
	data() {
		return {
			checkStatus,
			checkOutStatus,
		};
	},
	computed: {
		currentInfo() {
			if (this.type === '0') {
				// 上班info
				return this.clockInVO;
			}
			return this.clockOutVO;
		},
		clockInVO() {
			// 上班info
			return this.detailsInfo.clockInDetailVO || {}; // 上班info
		},
		clockOutVO() {
			// 下班info
			return this.detailsInfo.clockOutDetailVO || {}; // 下班info
		},
		isShowStatus() {
			const { BE_LATE, OVERTIME, LEAVE_EARLY, ABSENTEEISM } =
				statusKeys;
			const arr = [BE_LATE, OVERTIME, LEAVE_EARLY, ABSENTEEISM];
			const status = this.currentInfo.status;
			return arr.includes(status);
		},
		punchStatus() {
			const status = this.currentInfo.status;
			let statusStr = '';
			if (this.type === '0') {
				statusStr = checkStatus.find(
					(item) => item.value === status
				)?.label;
			}
			if (this.type === '1') {
				statusStr = checkOutStatus.find(
					(item) => item.value === status
				)?.label;
			}
			return statusStr;
		},
	},
	methods: {
		punchClock() {
			this.$emit('punchClock', '2'); // 2:更新打卡成功
		},
	},
};
</script>

<style scoped lang="scss">
.checked-in-work {
	line-height: 23px;
	.cw-title {
		color: #152f62;
	}
	.cw-header {
		display: flex;
		justify-content: space-between;
	}
	.status-com-txt {
		font-size: 12px;
		color: #fff;
		padding: 2px 4px;
		margin-left: 12px;
		border-radius: 4px;
	}
	.BE_LATE {
		background-color: #ff9935;
	}
	.LEAVE_EARLY {
		background-color: #ff5e59;
	}
	.OVERTIME {
		background-color: #436ff6;
	}
	.ABSENTEEISM {
		background-color: #ff5e59;
	}
	.time-box,
	.place-box {
		font-size: 12px;
		.label {
			color: #152f62;
		}
		.value {
			color: #697c9d;
			margin-left: 5px;
		}
	}

	.clock-in-type {
		color: #fff;
		padding: 2px 4px;
		background-color: #436ff6;
		margin-left: 24rpx;
		font-size: 12px;
		border-radius: 4px;
	}
}
</style>