89 lines
2.2 KiB
Vue
89 lines
2.2 KiB
Vue
<template>
|
|
<div class="report-table">
|
|
<v-card>
|
|
<v-card-title class="d-flex justify-space-between align-center">
|
|
<span>Relatório de Acessos</span>
|
|
<v-btn
|
|
color="primary"
|
|
prepend-icon="mdi-download"
|
|
@click="$emit('export-data')"
|
|
:disabled="!records.length"
|
|
>
|
|
Exportar
|
|
</v-btn>
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<base-table
|
|
:headers="headers"
|
|
:items="records"
|
|
:loading="loading"
|
|
:items-per-page="10"
|
|
:search="search"
|
|
>
|
|
<template #item.entryTime="{ item }">
|
|
{{ formatDateTime(item.entryTime) }}
|
|
</template>
|
|
|
|
<template #item.exitTime="{ item }">
|
|
{{ formatDateTime(item.exitTime) }}
|
|
</template>
|
|
|
|
<template #item.duration="{ item }">
|
|
{{ calculateDuration(item.entryTime, item.exitTime) }}
|
|
</template>
|
|
</base-table>
|
|
</v-card-text>
|
|
</v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BaseTable from '../common/BaseTable.vue'
|
|
|
|
export default {
|
|
name: 'ReportTable',
|
|
components: {
|
|
BaseTable
|
|
},
|
|
props: {
|
|
records: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
search: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
headers: [
|
|
{ title: 'ID do Usuário', key: 'userId', sortable: true },
|
|
{ title: 'Nome', key: 'name', sortable: true },
|
|
{ title: 'Entrada', key: 'entryTime', sortable: true },
|
|
{ title: 'Saída', key: 'exitTime', sortable: true },
|
|
{ title: 'Duração', key: 'duration', sortable: true }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
formatDateTime(datetime) {
|
|
if (!datetime) return '-'
|
|
return new Date(datetime).toLocaleString('pt-BR')
|
|
},
|
|
calculateDuration(entry, exit) {
|
|
if (!entry || !exit) return '-'
|
|
const duration = new Date(exit) - new Date(entry)
|
|
const hours = Math.floor(duration / (1000 * 60 * 60))
|
|
const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60))
|
|
return `${hours}h ${minutes}min`
|
|
}
|
|
},
|
|
emits: ['export-data']
|
|
}
|
|
</script> |