pcpuma_unam_operador/components/operador/TodosEquipos.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(1)"
        />
      </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(1)"
        />
      </b-field>

      <b-button
        class="column mb-0"
        type="is-info"
        @click="obtenerEquipos(1)"
        expanded
        rounded
        >Buscar</b-button
      >
    </div>

    <TablaEquipos
      :data="data"
      :total="total"
      :obtenerEquipos="obtenerEquipos"
      :isLoadingTable="isLoadingTable"
    />
  </div>
</template>

<script>
import axios from 'axios'
import TablaEquipos from '@/components/operador/TablaEquipos'
export default {
  components: {
    TablaEquipos,
  },
  props: {
    operador: { type: Object, required: true },
  },
  data() {
    return {
      data: [],
      total: 0,
      isLoadingTable: false,
      carrito: '',
      equipo: '',
    }
  },
  methods: {
    obtenerEquipos(pagina) {
      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=${pagina}${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)
        })
    },
  },
  created() {
    this.obtenerEquipos(1)
  },
}
</script>