ChickenFarm/UI/VB.VUE/src/views/device/inspection/_checkinLog.vue

<script setup lang="ts">
import apis from "@a"
import dayjs from "dayjs"

const props = withDefaults(defineProps<{ isSelf?: boolean; showImage?: boolean }>(), {
	isSelf: true,
	showImage: true
})
const emits = defineEmits<{ (e: "update:modelValue", v: string): void }>()

const logs = ref()

function load(id: string | number) {
	return new Promise((resolve) => {
		apis.device.inspectionRuleApi.queryCheckinList(id).then((res: any) => {
			logs.value = res.data
			resolve(res)
		})
	})
}
defineExpose({ load })
</script>
<template>
	<div class="text-center mt-5 mb-3 fs-1 fw-bold" v-if="props.isSelf && logs && logs.length > 0">
		签到记录
	</div>
	<table class="checkin-log-table" v-if="logs && logs.length > 0">
		<thead>
			<tr>
				<th :style="{ width: isSelf ? '55px' : '60px' }">次序</th>
				<th v-if="!isSelf" :style="{ width: isSelf ? '90px' : '160px' }">签到人</th>
				<th :style="{ width: isSelf ? '135px' : '160px' }">签到时间</th>
				<th :style="{ width: isSelf ? 'auto' : '160px' }">签到状态</th>
				<th v-if="showImage" :style="{ width: isSelf ? '135px' : 'auto' }">签到图片</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(row, index) in logs" :key="index">
				<td>{{ row.plannedSequence }}</td>
				<td v-if="!isSelf" :style="{ width: isSelf ? '90px' : '160px' }">
					{{ row.inspectorName }}
				</td>
				<td>
					<span v-if="row.executeTime" class="text-success">
						{{ dayjs(row.executeTime).format("YYYY/MM/DD HH:mm:ss") }}
					</span>
					<span v-else-if="row.planTime" class="text-danger">
						{{ dayjs(row.planTime).format("YYYY/MM/DD HH:mm:ss") }}
					</span>
					<span v-else>-</span>
				</td>
				<td>
					<el-tag v-if="row.checkinStatus == 1" type="success">已签到</el-tag>
					<el-tag v-else type="danger">未签到</el-tag>
				</td>
				<td v-if="showImage">
					<VbImagePreview
						v-if="row.imageUrl"
						:src="row.imageUrl"
						:width="45"
						:height="30"
						:image-style="{ margin: `4px 5px -4px 5px`, padding: 0 }"></VbImagePreview>
					<span v-else>-</span>
				</td>
			</tr>
		</tbody>
	</table>
	<div class="no-data" v-else>暂无签到记录</div>
</template>

<style scoped>
.checkin-log-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #ebeef5;
	border-radius: 4px;
	overflow: hidden;
}

.checkin-log-table th {
	background-color: #f5f7fa;
	padding: 12px 0;
	text-align: center;
	font-weight: 500;
	color: #909399;
}

.checkin-log-table td {
	padding: 12px 0;
	text-align: center;
	border-top: 1px solid #ebeef5;
}

.no-data {
	text-align: center;
	font-size: 18px;
	padding: 100px 20px;
	color: #909399;
}
</style>