pcpuma_unam_operador/components/tablas/TablaEquipos.vue
2022-08-14 18:51:03 -05:00

102 lines
2.4 KiB
Vue

<template>
<b-table
class="pb-6"
:current-page="page"
:data="equipos"
:loading="isLoadingTable"
:per-page="15"
:row-class="(row, index) => 'pointer'"
:selected.sync="equipoSeleccionado"
:total="total"
@page-change="onPageChange"
backend-pagination
hoverable
paginated
striped
>
<b-table-column
field="numeroInventario"
label="Número de inventario"
centered
v-slot="props"
>
<p>{{ props.row.numero_inventario }}</p>
</b-table-column>
<b-table-column field="equipo" label="Equipo" centered v-slot="props">
<p>{{ props.row.equipo }}</p>
</b-table-column>
<b-table-column
field="tipoCarrito"
label="Tipo de equipo"
centered
v-slot="props"
>
<p>{{ props.row.carrito.tipoCarrito.tipo_carrito }}</p>
</b-table-column>
<b-table-column field="carrito" label="Carrito" centered v-slot="props">
<p>{{ props.row.carrito.carrito }}</p>
</b-table-column>
<b-table-column field="modulo" label="Módulo" centered v-slot="props">
<p>{{ props.row.carrito.modulo.modulo }}</p>
</b-table-column>
<b-table-column field="status" label="Status" centered v-slot="props">
<p class="is-size-6 tag" :class="chooseTag(props.row.status.id_status)">
{{ props.row.status.status }}
</p>
</b-table-column>
</b-table>
</template>
<script>
export default {
props: {
equipos: { type: Array, required: true, default: () => [] },
isLoadingTable: { type: Boolean, required: true, default: false },
onPageChange: { type: Function, required: true, default: () => {} },
page: { type: Number, required: true, default: 1 },
total: { type: Number, required: true, default: 0 },
},
data() {
return { equipoSeleccionado: {} }
},
methods: {
chooseTag(idStatus) {
switch (idStatus) {
case 1:
return 'is-info'
case 2:
return 'is-link'
case 3:
return 'is-primary'
case 4:
return 'is-success'
case 5:
return 'is-warning'
case 6:
return 'is-danger'
case 7:
return 'is-black'
}
},
},
watch: {
equipoSeleccionado() {
this.$router.push(
`/equipos/buscar_equipo/${this.equipoSeleccionado.numero_inventario}`
)
},
},
}
</script>
<style>
.pointer {
cursor: pointer;
}
</style>