146 lines
3.3 KiB
Vue
146 lines
3.3 KiB
Vue
<template>
|
||
<el-dialog title="查看详情" width="700px" v-model="visible" @closed="closedHandle">
|
||
<div class="content" v-loading="loading">
|
||
<div class="top">
|
||
<div class="row">
|
||
<div class="item">
|
||
姓名：{{ detail.attendanceSummary.name }}
|
||
</div>
|
||
<div class="item">
|
||
休息天数：{{ detail.attendanceSummary.restDays || '-' }}
|
||
</div>
|
||
<div class="item">
|
||
出勤天数：{{ detail.attendanceSummary.attendDays || '-' }}
|
||
</div>
|
||
<div class="item">
|
||
工作时长（分钟）：{{ detail.attendanceSummary.workDuration || '-' }}
|
||
</div>
|
||
</div>
|
||
<div class="row" style="margin-top: 30px;">
|
||
<div class="item">
|
||
迟到次数：{{ detail.attendanceSummary.lateCount || '-' }}
|
||
</div>
|
||
<div class="item">
|
||
迟到时长（分钟）：{{ detail.attendanceSummary.lateDuration || '-' }}
|
||
</div>
|
||
<div class="item">
|
||
旷工天数：{{ detail.attendanceSummary.absenceDays || '-' }}
|
||
</div>
|
||
<div class="item">
|
||
备注：无
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btm">
|
||
<div class="btm_wrap">
|
||
<div class="item t1">日期</div>
|
||
<div class="item t1" v-for="(item, index) in detail.weekList" :key="index">{{ item.week }}</div>
|
||
</div>
|
||
<div class="btm_wrap">
|
||
<div class="item t2">
|
||
<span style="opacity: 0;">1</span>
|
||
</div>
|
||
<div class="item t2" v-for="(item, index) in detail.statusList">{{ item }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { attendanceDetail } from '@/api/coupon/index'
|
||
|
||
const visible = ref(false)
|
||
|
||
const detail = ref({
|
||
weekList: [],
|
||
statusList: [],
|
||
attendanceSummary: {}
|
||
})
|
||
|
||
function closedHandle() {
|
||
detail.value.weekList = []
|
||
detail.value.statusList = []
|
||
detail.value.attendanceSummary = {}
|
||
}
|
||
|
||
const row = ref(null)
|
||
|
||
function show(obj) {
|
||
visible.value = true
|
||
row.value = { ...obj }
|
||
attendanceDetailAjax()
|
||
}
|
||
|
||
// 获取用户打卡详情
|
||
const loading = ref(false)
|
||
async function attendanceDetailAjax() {
|
||
try {
|
||
loading.value = true
|
||
const res = await attendanceDetail({
|
||
userId: row.value.userId
|
||
})
|
||
detail.value = res
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
setTimeout(() => {
|
||
loading.value = false
|
||
}, 500);
|
||
}
|
||
|
||
defineExpose({
|
||
show
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
.top {
|
||
.row {
|
||
display: flex;
|
||
|
||
.item {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btm {
|
||
--height: 100px;
|
||
width: 100%;
|
||
height: calc(var(--height) + 20px);
|
||
overflow-x: auto;
|
||
margin-top: 14px;
|
||
|
||
|
||
.btm_wrap {
|
||
white-space: nowrap;
|
||
height: calc(var(--height) / 2);
|
||
}
|
||
|
||
.item {
|
||
display: inline-block;
|
||
width: calc(var(--height));
|
||
height: calc(var(--height) / 2);
|
||
line-height: calc(var(--height) / 2);
|
||
font-size: 14px;
|
||
// display: flex;
|
||
// align-items: center;
|
||
padding-left: 14px;
|
||
border-bottom: 1px solid #ececec;
|
||
|
||
&.t1 {
|
||
color: #666;
|
||
}
|
||
|
||
&.t2 {
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |