431 lines
8.8 KiB
Vue
431 lines
8.8 KiB
Vue
<template>
|
|
<b-table
|
|
:data="data"
|
|
:total="total"
|
|
:current-page="page"
|
|
:per-page="25"
|
|
:loading="isLoadingTable"
|
|
:row-class="(row, index) => pintarFila(row)"
|
|
@page-change="onPageChange"
|
|
class="mb-6"
|
|
hoverable
|
|
striped
|
|
paginated
|
|
backend-pagination
|
|
>
|
|
<b-table-column
|
|
v-if="columnaIdPrestamo"
|
|
field="idPrestamo"
|
|
label="Número de Préstamo"
|
|
v-slot="props"
|
|
centered
|
|
>
|
|
{{ props.row.idPrestamo }}
|
|
</b-table-column>
|
|
|
|
<b-table-column field="createdAt" label="Fecha" v-slot="props" centered>
|
|
<span>
|
|
{{ fechaHora(props.row.createdAt) }}
|
|
</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="numeroCuenta"
|
|
label="Número de Cuenta"
|
|
v-slot="props"
|
|
v-if="columnaNumeroCuenta"
|
|
centered
|
|
>
|
|
<span>{{ props.row.Usuario.usuario }}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="nombre"
|
|
label="Nombre"
|
|
v-slot="props"
|
|
v-if="columnaNombre"
|
|
centered
|
|
>
|
|
<span> {{ props.row.Usuario.nombre }} </span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="carrera"
|
|
label="Carrera"
|
|
v-slot="props"
|
|
v-if="columnaCarrera"
|
|
centered
|
|
>
|
|
<span>
|
|
{{ props.row.Usuario.Carrera.carrera }}
|
|
</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="operadorEntrega"
|
|
label="Operador Entrega"
|
|
v-slot="props"
|
|
v-if="columnaOperadores"
|
|
centered
|
|
>
|
|
<span v-if="props.row.OperadorEntrega">
|
|
{{ props.row.OperadorEntrega.operador }}
|
|
</span>
|
|
|
|
<span v-else>-</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="operadorRegreso"
|
|
label="Operador Regreso"
|
|
v-slot="props"
|
|
v-if="columnaOperadores"
|
|
centered
|
|
>
|
|
<span v-if="props.row.OperadorRegreso">
|
|
{{ props.row.OperadorRegreso.operador }}
|
|
</span>
|
|
|
|
<span v-else>-</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="modulo"
|
|
label="Módulo"
|
|
v-slot="props"
|
|
v-if="columnaModulo"
|
|
centered
|
|
>
|
|
<span>{{ props.row.Equipo.Carrito.Modulo.modulo }}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="carrito"
|
|
label="Carrito"
|
|
v-slot="props"
|
|
v-if="columnaCarrito"
|
|
centered
|
|
>
|
|
<span>{{ props.row.Equipo.Carrito.carrito }}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="equipo"
|
|
label="Equipo"
|
|
v-slot="props"
|
|
v-if="columnaEquipo"
|
|
centered
|
|
>
|
|
<span>{{ props.row.Equipo.equipo }}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="numero Inventario"
|
|
label="Número de Inventario"
|
|
v-slot="props"
|
|
v-if="columnaNumeroInventario"
|
|
centered
|
|
>
|
|
<span>{{ props.row.Equipo.numeroInventario }}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="tipo"
|
|
label="Tipo"
|
|
v-slot="props"
|
|
v-if="columnaTipo"
|
|
centered
|
|
>
|
|
<span>{{ props.row.Equipo.Carrito.TipoCarrito.tipoCarrito }}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="horaInicio"
|
|
label="Hora Inicio"
|
|
v-slot="props"
|
|
centered
|
|
>
|
|
<span v-if="props.row.horaInicio">{{ hora(props.row.horaInicio) }}</span>
|
|
<span v-else>-</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="horaFin"
|
|
label="Hora Fin"
|
|
v-slot="props"
|
|
v-if="columnaHoraFin"
|
|
centered
|
|
>
|
|
<span v-if="props.row.horaFin">
|
|
{{ hora(props.row.horaFin) }}
|
|
</span>
|
|
|
|
<span v-else>-</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="fechaFin"
|
|
label="Fecha Regreso"
|
|
v-slot="props"
|
|
v-if="columnaHoraRegreso"
|
|
centered
|
|
>
|
|
<span v-if="props.row.horaEntrega">
|
|
{{ fechaHora(props.row.horaEntrega) }}
|
|
</span>
|
|
|
|
<span v-else>-</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="enUso"
|
|
label="En Uso"
|
|
v-slot="props"
|
|
v-if="columnaEnUso"
|
|
centered
|
|
>
|
|
<span v-if="props.row.Equipo.Status.idStatus === 2">
|
|
<b-icon icon="check" class="tag is-success" />
|
|
</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="cancelar"
|
|
label="Cancelar"
|
|
v-slot="props"
|
|
v-if="columnaBotonCancelar"
|
|
centered
|
|
>
|
|
<ColumnaCancelarPrestamo
|
|
:operador="operador"
|
|
:prestamo="props.row"
|
|
:updateIsLoadingPage="updateIsLoadingPage"
|
|
v-if="!props.row.regresoInmediato"
|
|
/>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="canceladoOperador"
|
|
label="Cancelación Operador"
|
|
v-slot="props"
|
|
v-if="columnaCanceladoOperador"
|
|
centered
|
|
>
|
|
<span v-if="props.row.canceladoOperador">
|
|
<b-icon icon="check" class="tag is-danger" />
|
|
</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="canceladoUsuario"
|
|
label="Cancelación Usuario"
|
|
v-slot="props"
|
|
v-if="columnaCanceladoUsuario"
|
|
centered
|
|
>
|
|
<span v-if="props.row.canceladoUsuario">
|
|
<b-icon icon="check" class="tag is-danger" />
|
|
</span>
|
|
</b-table-column>
|
|
</b-table>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
import ColumnaCancelarPrestamo from '@/components/operador/ColumnaCancelarPrestamo'
|
|
|
|
export default {
|
|
components: { ColumnaCancelarPrestamo },
|
|
props: {
|
|
operador: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({}),
|
|
},
|
|
isLoadingTable: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
data: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
page: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
onPageChange: {
|
|
type: Function,
|
|
require: true,
|
|
},
|
|
total: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
columnaNumeroCuenta: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaNombre: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaCarrera: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaOperadores: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaNumeroInventario: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaTipo: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaCarrito: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaEquipo: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaModulo: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaHoraRegreso: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaHoraFin: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaIdPrestamo: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaEnUso: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaBotonCancelar: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaCanceladoOperador: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaCanceladoUsuario: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
columnaregresoInmediato: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
filaRetraso: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
filaActivo: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false,
|
|
},
|
|
updateIsLoadingPage: {
|
|
type: Function,
|
|
required: false,
|
|
default: () => {},
|
|
},
|
|
},
|
|
methods: {
|
|
fecha(date) {
|
|
const fecha = moment(date)
|
|
|
|
return fecha.isValid() ? fecha.format('YYYY-MM-DD') : ''
|
|
},
|
|
hora(date) {
|
|
const fecha = moment(date)
|
|
|
|
return fecha.isValid() ? fecha.format('HH:mm') : ''
|
|
},
|
|
fechaHora(date) {
|
|
const fecha = moment(date)
|
|
|
|
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.horaFin)
|
|
const quinceMin = moment(row.horaFin).add(15, 'm')
|
|
|
|
if (now > horaFin && !row.regresoInmediato) {
|
|
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>
|