pcpuma_unam_operador/components/operador/TablaEquipos.vue
2022-07-13 00:42:23 -05:00

103 lines
2.2 KiB
Vue

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