128 lines
3.4 KiB
Vue
128 lines
3.4 KiB
Vue
<template>
|
|
<b-table
|
|
:data="multas"
|
|
:loading="isLoadingTable"
|
|
:row-class="(row, index) => 'pointer'"
|
|
class="mb-6"
|
|
:per-page="25"
|
|
@page-change="onPageChange"
|
|
show-detail-icon
|
|
paginated
|
|
detailed
|
|
>
|
|
<b-table-column
|
|
field="usuario"
|
|
label="Número de cuenta/trabajador"
|
|
v-slot="props"
|
|
v-if="columnaUsuario"
|
|
centered
|
|
>
|
|
<span>{{ props.row.prestamo.usuario.usuario }}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="fechaInicio"
|
|
label="Fecha Inicio"
|
|
v-slot="props"
|
|
centered
|
|
>
|
|
<span>{{ fechaHora(props.row.fecha_inicio) }}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column field="fechaFin" label="Fecha Fin" v-slot="props" centered>
|
|
<span>{{ fechaHora(props.row.fecha_fin) }}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column field="operador" label="Operador" v-slot="props" centered>
|
|
<span>{{ props.row.opeardorMulta.operador }}</span>
|
|
</b-table-column>
|
|
|
|
<template #detail="props">
|
|
<div class="columns">
|
|
<div class="column is-1"></div>
|
|
<div class="column has-text-centered is-size-5 detail-item">
|
|
<b>Descripción:</b>
|
|
</div>
|
|
<div class="column has-text-centered is-size-5 detail-item">
|
|
<b>Infracción extra:</b>
|
|
</div>
|
|
<div class="column has-text-centered is-size-5 detail-item">
|
|
<b>Retraso:</b>
|
|
</div>
|
|
</div>
|
|
<div class="container columns">
|
|
<div class="column is-1"></div>
|
|
<div class="column has-text-centered is-size-6 detail-item">
|
|
{{ props.row.descripcion }}
|
|
</div>
|
|
<div
|
|
v-if="props.row.institucionInfraccion.infraccion.infraccion"
|
|
class="column has-text-centered is-size-6 detail-item"
|
|
>
|
|
{{ props.row.institucionInfraccion.infraccion.infraccion }}
|
|
</div>
|
|
<div v-else class="column has-text-centered is-size-6 detail-item">
|
|
No hay infracción adicional
|
|
</div>
|
|
<div class="column has-text-centered is-size-6 detail-item">
|
|
<span class="is-size-6 tag" :class="choooseTag(props.row.retraso)">{{
|
|
props.row.retraso ? 'Verdadero' : 'Falso'
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #empty>
|
|
<div class="has-text-centered">
|
|
<p class="is-size-6">No hay usuarios</p>
|
|
</div>
|
|
</template>
|
|
</b-table>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
// import TablaEquiCarritos from '@/components/operador/TablaEquiCarritos'
|
|
|
|
export default {
|
|
// components: { TablaEquiCarritos },
|
|
props: {
|
|
operador: { type: Object, required: true },
|
|
multas: { type: Array, required: true },
|
|
page: { type: Number, required: true },
|
|
total: { type: Number, required: true },
|
|
onPageChange: { type: Function, required: true },
|
|
isLoadingTable: { type: Boolean, required: true },
|
|
columnaUsuario: { type: Boolean, required: true },
|
|
},
|
|
data() {
|
|
return {
|
|
selectedMulta: {},
|
|
}
|
|
},
|
|
methods: {
|
|
choooseTag(activo) {
|
|
const style = {
|
|
false: 'is-danger',
|
|
true: 'is-success',
|
|
}
|
|
return style[activo]
|
|
},
|
|
fechaHora(date) {
|
|
const fecha = moment(date)
|
|
|
|
return fecha.isValid() ? fecha.format('YYYY-MM-DD HH:mm') : ''
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.detail-item {
|
|
padding: 0;
|
|
}
|
|
</style>
|