You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.6 KiB
86 lines
2.6 KiB
1 year ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<card-container>
|
||
|
|
<vxe-toolbar>
|
||
|
|
<template #buttons>
|
||
|
|
<el-date-picker v-model="select.month" type="month" size="small" value-format="yyyy-MM"></el-date-picker>
|
||
|
|
<el-button icon="el-icon-search" type="primary" plain size="small" style="margin-left: 6px;" @click="getStatistics">搜索</el-button>
|
||
|
|
</template>
|
||
|
|
</vxe-toolbar>
|
||
|
|
<vxe-table
|
||
|
|
ref="table"
|
||
|
|
stripe
|
||
|
|
style="margin-top: 10px;"
|
||
|
|
round
|
||
|
|
:max-height="600"
|
||
|
|
keep-source
|
||
|
|
show-header-overflow
|
||
|
|
show-footer-overflow
|
||
|
|
show-overflow
|
||
|
|
:row-config="{ isHover: true }"
|
||
|
|
:header-cell-style="{ 'white-space': 'wrap' }"
|
||
|
|
:scroll-x="{ enabled: true, gt: 0 }"
|
||
|
|
:column-config="{ resizable: true }"
|
||
|
|
:data="tableData.admins">
|
||
|
|
<vxe-column type="seq" width="50" align="center" fixed="left"></vxe-column>
|
||
|
|
<vxe-column field="name" title="姓名" fixed="left" align="center" width="120"></vxe-column>
|
||
|
|
<vxe-column field="department.name" title="所在部门" align="center" width="150"></vxe-column>
|
||
|
|
<vxe-colgroup v-for="item in dateTableColumns" align="center" :title="item.title">
|
||
|
|
<vxe-column title="上午" width="160" align="center">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<span>{{ row.attendance[item.date] instanceof Array ? '' : row.attendance[item.date][0].sign_in_at }}</span>
|
||
|
|
</template>
|
||
|
|
</vxe-column>
|
||
|
|
<vxe-column title="下午" width="160" align="center">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<span>{{ row.attendance[item.date] instanceof Array ? '' : row.attendance[item.date][0].sign_out_at }}</span>
|
||
|
|
</template>
|
||
|
|
</vxe-column>
|
||
|
|
</vxe-colgroup>
|
||
|
|
</vxe-table>
|
||
|
|
</card-container>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { statistics } from '@/api/attendance'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
select: {
|
||
|
|
month: this.$moment().format('YYYY-MM')
|
||
|
|
},
|
||
|
|
tableData: {
|
||
|
|
admins: [],
|
||
|
|
dates: []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getStatistics() {
|
||
|
|
try {
|
||
|
|
const res = await statistics(this.select)
|
||
|
|
this.tableData = res
|
||
|
|
} catch (err) {
|
||
|
|
console.error(err)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
dateTableColumns() {
|
||
|
|
return this.tableData.dates.map(i => ({
|
||
|
|
title: `${this.$moment(i.day).format('YYYY年MM月DD日')} ${i.is_workday ? '工作日' : '公休'}`,
|
||
|
|
field: i.day,
|
||
|
|
date: i.date
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getStatistics()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
</style>
|