pcpuma_unam_operador/components/operador/TablaEquiCarritos.vue
2022-07-22 16:53:27 -05:00

108 lines
2.4 KiB
Vue

<template>
<div>
<b-table
:data="equipos"
:total="total"
backend-pagination
@page-change="onPageChange"
:current-page="page"
:per-page="15"
:loading="isLoadingTable"
:selected.sync="selectedEquipo"
:row-class="(row, index) => 'pointer'"
class="mb-6"
hoverable
striped
paginated
>
<b-table-column field="equipo" label="Equipo" v-slot="props" centered>
<span>
{{ props.row.equipo }}
</span>
</b-table-column>
<b-table-column
field="numeroInventario"
label="Número de inventario"
v-slot="props"
centered
>
<span>
{{ props.row.numero_inventario }}
</span>
</b-table-column>
<b-table-column field="status" label="Status" v-slot="props" centered>
<span
class="is-size-6 tag"
:class="choooseTag(props.row.status.id_status)"
>
{{ props.row.status.status }}
</span>
</b-table-column>
</b-table>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: { equipo: { type: Object, required: true } },
data() {
return {
isLoadingTable: false,
equipos: [],
selectedEquipo: {},
total: 0,
page: 1,
}
},
methods: {
onPageChange(page) {
this.page = page
this.obtenerEquipos(this.equipo.id_carrito)
},
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]
},
obtenerEquipos(idCarrito) {
this.isLoadingTable = true
axios
.get(
`${process.env.api}/equipo/equipos?pagina=${this.page}&id_carrito=${idCarrito}`,
this.$getToken.token()
)
.then((res) => {
this.total = res.data[1]
this.equipos = res.data[0]
this.isLoadingTable = false
})
.catch((err) => {
this.isLoadingTable = false
this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
})
},
},
watch: {
selectedEquipo() {
this.$router.push({
path:
'../equipos/buscar_equipo/' + this.selectedEquipo.numero_inventario,
})
},
},
created() {
this.obtenerEquipos(this.equipo.id_carrito)
},
}
</script>