<template>
|
<div class="attendance-table">
|
<div class="table-actions">
|
<el-button type="primary" size="small" icon="el-icon-download" @click="exportData">
|
导出数据
|
</el-button>
|
<el-button size="small" icon="el-icon-refresh" @click="$emit('refresh')">
|
刷新
|
</el-button>
|
</div>
|
|
<el-table
|
:data="tableData"
|
border
|
v-loading="loading"
|
style="width: 100%"
|
@sort-change="handleSortChange"
|
>
|
<el-table-column prop="id" label="ID" width="80" sortable />
|
<el-table-column prop="employeeName" label="员工姓名" sortable />
|
<el-table-column prop="date" label="日期" sortable />
|
<el-table-column prop="checkIn" label="签到时间" />
|
<el-table-column prop="checkOut" label="签退时间" />
|
<el-table-column prop="workHours" label="工作时长" sortable>
|
<template #default="scope">
|
<el-tag :type="getHoursType(scope.row.workHours)" size="small">
|
{{ scope.row.workHours }}h
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="status" label="状态" >
|
<template #default="scope">
|
<el-tag
|
:type="getStatusType(scope.row.status)"
|
effect="light"
|
>
|
{{ scope.row.status }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150" fixed="right">
|
<template #default="scope">
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleViewDetail(scope.row)"
|
icon="el-icon-view"
|
>
|
详情
|
</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleEdit(scope.row)"
|
icon="el-icon-edit"
|
>
|
编辑
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pagination-container">
|
<el-pagination
|
:current-page="currentPage"
|
:page-size="pageSize"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'AttendanceTable',
|
props: {
|
data: {
|
type: Array,
|
default: () => []
|
},
|
loading: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
currentPage: 1,
|
pageSize: 10,
|
sortProp: '',
|
sortOrder: ''
|
}
|
},
|
computed: {
|
total() {
|
return this.data.length
|
},
|
tableData() {
|
let data = [...this.data]
|
|
// 排序处理
|
if (this.sortProp) {
|
data.sort((a, b) => {
|
let aVal = a[this.sortProp]
|
let bVal = b[this.sortProp]
|
|
if (this.sortOrder === 'ascending') {
|
return aVal > bVal ? 1 : -1
|
} else {
|
return aVal < bVal ? 1 : -1
|
}
|
})
|
}
|
|
// 分页处理
|
const start = (this.currentPage - 1) * this.pageSize
|
const end = start + this.pageSize
|
return data.slice(start, end)
|
}
|
},
|
methods: {
|
getStatusType(status) {
|
const typeMap = {
|
'正常': 'success',
|
'迟到': 'warning',
|
'早退': 'warning',
|
'缺勤': 'danger'
|
}
|
return typeMap[status] || 'info'
|
},
|
|
getHoursType(hours) {
|
const numHours = parseFloat(hours)
|
if (numHours >= 8) return 'success'
|
if (numHours >= 6) return 'warning'
|
return 'danger'
|
},
|
|
handleViewDetail(row) {
|
this.$emit('view-detail', row)
|
},
|
|
handleEdit(row) {
|
this.$message.info(`编辑出勤记录: ${row.employeeName} - ${row.date}`)
|
},
|
|
exportData() {
|
this.$message.success('导出功能开发中')
|
},
|
|
handleSortChange({ prop, order }) {
|
this.sortProp = prop
|
this.sortOrder = order
|
},
|
|
handleSizeChange(size) {
|
this.pageSize = size
|
this.currentPage = 1
|
},
|
|
handleCurrentChange(page) {
|
this.currentPage = page
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.attendance-table {
|
padding: 20px;
|
}
|
|
.table-actions {
|
margin-bottom: 16px;
|
display: flex;
|
gap: 10px;
|
}
|
|
.pagination-container {
|
margin-top: 20px;
|
display: flex;
|
justify-content: flex-end;
|
}
|
</style>
|
