pcpuma_unam_operador/components/operador/TodosEquipos.vue
2022-07-11 09:15:10 -05:00

160 lines
3.6 KiB
Vue

<template>
<div>
<div class="columns is-align-items-flex-end pl-0 pb-4">
<b-field class="column mb-0 pb-0" field="carrito" label="Carrito">
<b-input
placeholder="Carrito"
v-model="carrito"
rounded
@keyup.enter.native="obtenerEquipos"
/>
</b-field>
<b-field class="column mb-0 pb-0" field="equipo" label="Equipo">
<b-input
placeholder="Equipo"
v-model="equipo"
rounded
@keyup.enter.native="obtenerEquipos"
/>
</b-field>
<b-button
class="column mb-0"
type="is-info"
@click="obtenerEquipos"
expanded
rounded
>Buscar</b-button
>
</div>
<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>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: {
operador: { type: Object, require: true },
},
data() {
return {
data: [],
total: 0,
selectedEquipo: {},
isLoadingTable: false,
page: 1,
carrito: '',
equipo: '',
}
},
methods: {
onPageChange(page) {
this.page = page
this.obtenerEquipos()
},
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() {
let carrito = ''
let equipo = ''
if (this.carrito != '') carrito = '&carrito=' + this.carrito
if (this.equipo != '') equipo = '&equipo=' + this.equipo
axios
.get(
`${process.env.api}/equipo/equipos?pagina=${this.page}${carrito}${equipo}`
)
.then((res) => {
this.data = res.data[0]
this.total = res.data[1]
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()
},
}
</script>
<style>
.pointer {
cursor: pointer;
}
</style>