326 lines
8.3 KiB
Vue
326 lines
8.3 KiB
Vue
<template>
|
|
<b-table
|
|
class="pb-6"
|
|
:current-page="page"
|
|
:data="prestamos"
|
|
:loading="isLoadingTable"
|
|
:per-page="25"
|
|
:row-class="(row, index) => pintarFila(row)"
|
|
:total="total"
|
|
@page-change="onPageChange"
|
|
backend-pagination
|
|
hoverable
|
|
paginated
|
|
striped
|
|
>
|
|
<b-table-column
|
|
field="idPrestamo"
|
|
label="Id de Préstamo"
|
|
v-slot="props"
|
|
v-if="columnaIdPrestamo"
|
|
centered
|
|
>
|
|
<p>{{ props.row.id_prestamo }}</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="institucion"
|
|
label="Institución"
|
|
v-slot="props"
|
|
v-if="operador.tipoUsuario.id_tipo_usuario === 2"
|
|
centered
|
|
>
|
|
<p>{{ props.row.equipo.carrito.modulo.institucion.institucion }}</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column field="fecha_inicio" label="Fecha" v-slot="props" centered>
|
|
<p>{{ fechaHora(props.row.fecha_inicio) }}</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="numeroCuenta"
|
|
label="Número de Cuenta/Trabajador"
|
|
v-slot="props"
|
|
v-if="columnaNumeroCuenta"
|
|
centered
|
|
>
|
|
<p>{{ props.row.institucionUsuario.usuario.usuario }}</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="nombre"
|
|
label="Nombre"
|
|
v-slot="props"
|
|
v-if="columnaNombre && operador.tipoUsuario.id_tipo_usuario > 2"
|
|
centered
|
|
>
|
|
<p>{{ props.row.institucionUsuario.usuario.nombre }}</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="carrera"
|
|
label="Carrera"
|
|
v-slot="props"
|
|
v-if="columnaCarrera"
|
|
centered
|
|
>
|
|
<p>
|
|
{{ props.row.institucionUsuario.institucionCarrera.carrera.carrera }}
|
|
</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="operadorEntrega"
|
|
label="Operador Entrega"
|
|
v-slot="props"
|
|
v-if="columnaOperadores"
|
|
centered
|
|
>
|
|
<p v-if="props.row.operadorEntrega">
|
|
{{ props.row.operadorEntrega.operador }}
|
|
</p>
|
|
|
|
<p v-else>-</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="operadorRegreso"
|
|
label="Operador Regreso"
|
|
v-slot="props"
|
|
v-if="columnaOperadores"
|
|
centered
|
|
>
|
|
<p v-if="props.row.operadorRegreso">
|
|
{{ props.row.operadorRegreso.operador }}
|
|
</p>
|
|
|
|
<p v-else>-</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="modulo"
|
|
label="Módulo"
|
|
v-slot="props"
|
|
v-if="columnaModulo"
|
|
centered
|
|
>
|
|
<p>{{ props.row.equipo.carrito.modulo.modulo }}</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="carrito"
|
|
label="Carrito"
|
|
v-slot="props"
|
|
v-if="columnaCarrito"
|
|
centered
|
|
>
|
|
<p>{{ props.row.equipo.carrito.carrito }}</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="equipo"
|
|
label="Equipo"
|
|
v-slot="props"
|
|
v-if="columnaEquipo"
|
|
centered
|
|
>
|
|
<p>{{ props.row.equipo.equipo }}</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="numero_inventario"
|
|
label="Número de Inventario"
|
|
v-slot="props"
|
|
v-if="columnaNumeroInventario"
|
|
centered
|
|
>
|
|
<p>{{ props.row.equipo.numero_inventario }}</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="tipo_carrito"
|
|
label="Tipo"
|
|
v-slot="props"
|
|
v-if="columnaTipo"
|
|
centered
|
|
>
|
|
<p>{{ props.row.equipo.carrito.tipoCarrito.tipo_carrito }}</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="hora_inicio"
|
|
label="Hora Inicio"
|
|
v-slot="props"
|
|
centered
|
|
>
|
|
<p v-if="props.row.hora_inicio">{{ hora(props.row.hora_inicio) }}</p>
|
|
|
|
<p v-else>-</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="hora_fin"
|
|
label="Hora Fin"
|
|
v-slot="props"
|
|
v-if="columnaHoraFin"
|
|
centered
|
|
>
|
|
<p v-if="props.row.hora_fin">{{ hora(props.row.hora_fin) }}</p>
|
|
|
|
<p v-else>-</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="fecha_entrega"
|
|
label="Fecha Regreso"
|
|
v-slot="props"
|
|
v-if="columnaHoraRegreso"
|
|
centered
|
|
>
|
|
<p v-if="props.row.fecha_entrega">
|
|
{{ fechaHora(props.row.fecha_entrega) }}
|
|
</p>
|
|
|
|
<p v-else>-</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="cancelar"
|
|
label="Cancelar"
|
|
v-slot="props"
|
|
v-if="columnaBotonCancelar && operador.tipoUsuario.id_tipo_usuario === 4"
|
|
centered
|
|
>
|
|
<ColumnaCancelarPrestamo
|
|
:prestamo="props.row"
|
|
:updateIsLoadingPage="updateIsLoadingPage"
|
|
v-if="props.row.equipo.status.id_status === 3"
|
|
/>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="cancelado_operador"
|
|
label="Cancelación Operador"
|
|
v-slot="props"
|
|
v-if="columnaCanceladoOperador"
|
|
centered
|
|
>
|
|
<p v-if="props.row.cancelado_operador">
|
|
<b-icon icon="check" class="tag is-danger" />
|
|
</p>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="cancelado_usuario"
|
|
label="Cancelación Usuario"
|
|
v-slot="props"
|
|
v-if="columnaCanceladoUsuario"
|
|
centered
|
|
>
|
|
<p v-if="props.row.cancelado_usuario">
|
|
<b-icon icon="check" class="tag is-danger" />
|
|
</p>
|
|
</b-table-column>
|
|
</b-table>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
import ColumnaCancelarPrestamo from '@/components/tablas/ColumnaCancelarPrestamo'
|
|
|
|
export default {
|
|
components: { ColumnaCancelarPrestamo },
|
|
props: {
|
|
prestamos: { type: Array, required: true, default: () => [] },
|
|
columnaBotonCancelar: { type: Boolean, required: false, default: false },
|
|
columnaCarrera: { type: Boolean, required: false, default: false },
|
|
columnaCarrito: { type: Boolean, required: false, default: false },
|
|
columnaCanceladoOperador: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
columnaCanceladoUsuario: { type: Boolean, required: false, default: false },
|
|
columnaEquipo: { type: Boolean, required: false, default: false },
|
|
columnaHoraFin: { type: Boolean, required: false, default: false },
|
|
columnaHoraRegreso: { type: Boolean, required: false, default: false },
|
|
columnaIdPrestamo: { type: Boolean, required: false, default: false },
|
|
columnaModulo: { type: Boolean, required: false, default: false },
|
|
columnaNombre: { type: Boolean, required: false, default: false },
|
|
columnaNumeroCuenta: { type: Boolean, required: false, default: false },
|
|
columnaNumeroInventario: { type: Boolean, required: false, default: false },
|
|
columnaOperadores: { type: Boolean, required: false, default: false },
|
|
columnaTipo: { type: Boolean, required: false, default: false },
|
|
filaActivo: { type: Boolean, required: false, default: false },
|
|
filaRetraso: { type: Boolean, required: false, default: false },
|
|
isLoadingTable: { type: Boolean, required: true, default: false },
|
|
onPageChange: { type: Function, required: true, default: () => {} },
|
|
updateIsLoadingPage: { type: Function, required: false, default: () => {} },
|
|
page: { type: Number, required: true, default: 0 },
|
|
total: { type: Number, required: true, default: 0 },
|
|
operador: { type: Object, required: true, default: () => ({}) },
|
|
},
|
|
methods: {
|
|
hora(date) {
|
|
const fecha = moment(date)
|
|
|
|
if (process.env.addHora2) fecha.add(process.env.addHora2, 'h')
|
|
return fecha.isValid() ? fecha.format('HH:mm') : ''
|
|
},
|
|
fechaHora(date) {
|
|
const fecha = moment(date)
|
|
|
|
if (process.env.addHora2) fecha.add(process.env.addHora2, 'h')
|
|
return fecha.isValid() ? fecha.format('YYYY-MM-DD HH:mm') : ''
|
|
},
|
|
pintarFila(row) {
|
|
if (this.filaRetraso) return this.retraso(row)
|
|
else if (this.filaActivo) return this.activo(row)
|
|
return ''
|
|
},
|
|
retraso(row) {
|
|
const now = moment()
|
|
const horaFin = moment(row.hora_fin)
|
|
const quinceMin = moment(row.hora_fin).add(15, 'm')
|
|
|
|
if (process.env.addHora) now.add(process.env.addHora, 'h')
|
|
if (now > horaFin) {
|
|
if (now < quinceMin) return 'posible-multa'
|
|
return 'retraso'
|
|
}
|
|
return ''
|
|
},
|
|
activo(row) {
|
|
if (row.activo) return 'activo'
|
|
return ''
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.retraso {
|
|
background: #ff7373 !important;
|
|
}
|
|
|
|
.retraso:hover {
|
|
background: #e06464 !important;
|
|
}
|
|
|
|
.posible-multa {
|
|
background: #ffe08a !important;
|
|
}
|
|
|
|
.posible-multa:hover {
|
|
background: #fbdb7d !important;
|
|
}
|
|
|
|
.activo {
|
|
background-color: #3fc36d !important;
|
|
}
|
|
|
|
.activo:hover {
|
|
background-color: #35a058 !important;
|
|
}
|
|
</style>
|