pcpuma_unam_operador/components/tablaBuscador/TablaBuscadorEquipo.vue

<template>
  <div>
    <h3 class="is-size-4 mb-3">Todos los equipos</h3>

    <div class="columns mb-5 is-align-items-flex-end">
      <SelectInstitucion
        :deshabilitarOptVacia="false"
        :institucionPadre="institucion"
        @institucion-seleccionada="
          (nuevaInstitucion) => (institucion = nuevaInstitucion)
        "
        v-if="operador.tipoUsuario.id_tipo_usuario === 2"
      />

      <SelectModulo
        :deshabilitarOptVacia="false"
        :moduloPadre="modulo"
        :idInstitucion="
          operador.tipoUsuario.id_tipo_usuario === 2
            ? institucion.id_institucion
            : operador.institucion.id_institucion
        "
        @modulo-seleccionado="(nuevaModulo) => (modulo = nuevaModulo)"
      />

      <SelectTipoCarrito
        :deshabilitarOptVacia="false"
        :tipoCarritoPadre="tipoCarrito"
        @tipo-carrito-seleccionado="
          (tipoCarritoModulo) => (tipoCarrito = tipoCarritoModulo)
        "
      />

      <b-field class="column mb-0 pb-0" label="Carrito">
        <b-input
          icon="account"
          placeholder="Carrito"
          type="text"
          @keyup.enter.native="obtenerEquipos()"
          v-model="carrito"
          rounded
        />
      </b-field>

      <b-field class="column mb-0 pb-0" label="Carrito">
        <b-input
          icon="account"
          placeholder="Carrito"
          type="text"
          @keyup.enter.native="obtenerEquipos()"
          v-model="carrito"
          rounded
        />
      </b-field>

      <b-field class="column mb-0 pb-0" label="Equipo">
        <b-input
          icon="account"
          placeholder="Equipos"
          type="text"
          @keyup.enter.native="obtenerEquipos()"
          v-model="equipo"
          rounded
        />
      </b-field>

      <BotonBuscar
        :buscar="obtenerEquipos"
        :disabled="
          institucion.id_institucion ||
          operador.institucion.id_institucion ||
          operador
            ? false
            : true
        "
      />
    </div>

    <TablaEquipos
      :equipos="equipos"
      :isLoadingTable="isLoadingTable"
      :obtenerEquipos="obtenerEquipos"
      :onPageChange="onPageChange"
      :total="total"
      :page="page"
      columnaActivo
      columnaInstitucion
    />
  </div>
</template>

<script>
import axios from 'axios'
import BotonBuscar from '@/components/botones/BotonBuscar'
import SelectInstitucion from '@/components/selects/SelectInstitucion'
import SelectModulo from '@/components/selects/SelectModulo'
import SelectTipoCarrito from '@/components/selects/SelectTipoCarrito'
import TablaEquipos from '@/components/tablas/TablaEquipos'

export default {
  components: {
    BotonBuscar,
    SelectInstitucion,
    SelectModulo,
    SelectTipoCarrito,
    TablaEquipos,
  },
  props: { operador: { type: Object, required: true } },
  data() {
    return {
      equipos: [],
      isLoadingTable: false,
      page: 1,
      total: 0,
      institucion: {},
      lastSearch: {},
      modulo: {},
      tipoCarrito: {},
      carrito: '',
      equipo: '',
    }
  },
  methods: {
    obtenerEquipos() {
      let data = ''

      this.isLoadingTable = true
      if (
        (this.operador.tipoUsuario.id_tipo_usuario > 2 &&
          this.operador.institucion.id_institucion !=
            this.lastSearch.idInstitucion) ||
        (this.operador.tipoUsuario.id_tipo_usuario === 2 &&
          this.institucion.id_institucion &&
          this.institucion.id_institucion != this.lastSearch.idInstitucion) ||
        this.carrito != this.lastSearch.carrito ||
        this.modulo.id_modulo != this.lastSearch.idModelo ||
        this.tipoCarrito.id_tipo_carrito != this.lastSearch.idTipoCarrito
      ) {
        this.page = 1
        if (this.operador.tipoUsuario.id_tipo_usuario > 2)
          this.lastSearch.idInstitucion =
            this.operador.institucion.id_institucion
        else if (this.institucion.id_institucion)
          this.lastSearch.idInstitucion = this.institucion.id_institucion
        this.lastSearch.idModulo = this.modulo.id_modulo
        this.lastSearch.idTipoCarrito = this.tipoCarrito.id_tipo_carrito
        this.lastSearch.carrito = this.carrito
      }
      if (this.operador.institucion.id_institucion)
        data += `&id_institucion=${this.operador.institucion.id_institucion}`
      else if (this.institucion.id_institucion)
        data += `&id_institucion=${this.institucion.id_institucion}`
      if (this.modulo.id_modulo) data += `&id_modulo=${this.modulo.id_modulo}`
      if (this.tipoCarrito.id_tipo_carrito)
        data += `&id_tipo_carrito=${this.tipoCarrito.id_tipo_carrito}`
      if (this.tipoCarrito.id_tipo_carrito)
        data += `&id_tipo_carrito=${this.tipoCarrito.id_tipo_carrito}`
      if (this.carrito) data += `&carrito=${this.carrito}`
      if (this.equipo) data += `&equipo=${this.equipo}`
      axios
        .get(
          `${process.env.api}/equipo/equipos?pagina=${this.page}${data}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.equipos = res.data[0]
          this.total = res.data[1]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    onPageChange(page) {
      this.page = page
      this.obtenerEquipos()
    },
    updateInstitucion(institucion) {
      this.institucion = institucion
    },
  },
  created() {
    this.obtenerEquipos()
  },
}
</script>