pcpuma_unam_operador/components/tablaBuscador/TablaBuscadorEquipo.vue

<template>
  <div>
    <h3 class="is-size-4 mb-3">Equipos: {{ total }}</h3>

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

      <SelectModulo
        columnSize="is-3"
        :deshabilitarOptVacia="false"
        :idInstitucion="
          operador.institucion
            ? operador.institucion.id_institucion
            : idInstitucion
        "
        :operador="operador"
        :idModuloPadre="idModulo"
        @modulo-seleccionado="(nuevoModulo) => (idModulo = nuevoModulo)"
      />

      <SelectTipoCarrito
        columnSize="is-3"
        :deshabilitarOptVacia="false"
        :idTipoCarritoPadre="idTipoCarrito"
        @tipo-carrito-seleccionado="
          (nuevoTipoCarrito) => (idTipoCarrito = nuevoTipoCarrito)
        "
      />

      <SelectMarca
        columnSize="is-3"
        tipo="e"
        :deshabilitarOptVacia="false"
        :idMarcaPadre="idMarca"
        @marca-seleccionada="(nuevaMarca) => (idMarca = nuevaMarca)"
      />

      <SelectModelo
        columnSize="is-3"
        tipo="e"
        :deshabilitarOptVacia="false"
        :idModeloPadre="idModelo"
        @modelo-seleccionado="(nuevoModelo) => (idModelo = nuevoModelo)"
      />

      <InputCarrito
        columnSize="is-3"
        :carritoPadre="carrito"
        :ejecutar="obtenerEquipos"
        @carrito="(carritoNuevo) => (carrito = carritoNuevo)"
      />

      <InputEquipo
        columnSize="is-3"
        :equipoPadre="equipo"
        :ejecutar="obtenerEquipos"
        @equipo="(equipoNuevo) => (equipo = equipoNuevo)"
      />

      <BotonBuscar
        columnSize="is-3"
        :buscar="obtenerEquipos"
        :disabled="false"
      />
    </div>

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

<script>
import axios from 'axios'
import BotonBuscar from '@/components/botones/BotonBuscar'
import InputCarrito from '@/components/inputs/InputCarrito'
import InputEquipo from '@/components/inputs/InputEquipo'
import SelectInstitucion from '@/components/selects/SelectInstitucion'
import SelectMarca from '@/components/selects/SelectMarca'
import SelectModelo from '@/components/selects/SelectModelo'
import SelectModulo from '@/components/selects/SelectModulo'
import SelectTipoCarrito from '@/components/selects/SelectTipoCarrito'
import TablaEquipos from '@/components/tablas/TablaEquipos'

export default {
  components: {
    BotonBuscar,
    InputCarrito,
    InputEquipo,
    SelectInstitucion,
    SelectMarca,
    SelectModelo,
    SelectModulo,
    SelectTipoCarrito,
    TablaEquipos,
  },
  props: { operador: { type: Object, required: true, default: () => ({}) } },
  data() {
    return {
      equipos: [],
      isLoadingTable: false,
      idInstitucion: 0,
      idMarca: 0,
      idModelo: 0,
      idModulo: 0,
      idTipoCarrito: 0,
      page: 1,
      total: 0,
      lastSearch: {},
      carrito: '',
      equipo: '',
    }
  },
  methods: {
    obtenerEquipos() {
      let data = ''

      this.isLoadingTable = true
      if (
        this.carrito != this.lastSearch.carrito ||
        this.idModulo != this.lastSearch.idModulo ||
        this.idMarca != this.lastSearch.idMarca ||
        this.idModelo != this.lastSearch.idModelo ||
        this.idTipoCarrito != this.lastSearch.idTipoCarrito ||
        (this.operador.institucion &&
          this.operador.institucion.id_institucion !=
            this.lastSearch.idInstitucion) ||
        (this.operador.tipoUsuario.id_tipo_usuario === 2 &&
          this.idInstitucion &&
          this.idInstitucion != this.lastSearch.idInstitucion)
      ) {
        this.page = 1
        if (this.operador.institucion)
          this.lastSearch.idInstitucion =
            this.operador.institucion.id_institucion
        else if (this.idInstitucion)
          this.lastSearch.idInstitucion = this.idInstitucion
        this.lastSearch.carrito = this.carrito
        this.lastSearch.idMarca = this.idMarca
        this.lastSearch.idModelo = this.idModelo
        this.lastSearch.idModulo = this.idModulo
        this.lastSearch.idTipoCarrito = this.idTipoCarrito
      }
      if (this.carrito) data += `&carrito=${this.carrito}`
      if (this.equipo) data += `&equipo=${this.equipo}`
      if (this.operador.institucion)
        data += `&id_institucion=${this.operador.institucion.id_institucion}`
      else if (this.idInstitucion)
        data += `&id_institucion=${this.idInstitucion}`
      if (this.idMarca) data += `&id_marca=${this.idMarca}`
      if (this.idModelo) data += `&id_modelo=${this.idModelo}`
      if (this.idModulo) data += `&id_modulo=${this.idModulo}`
      if (this.idTipoCarrito) data += `&id_tipo_carrito=${this.idTipoCarrito}`
      return 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,
            this.$router,
            err.response.data
          )
        })
    },
    onPageChange(page) {
      this.page = page
      this.obtenerEquipos()
    },
  },
  created() {
    this.obtenerEquipos()
  },
}
</script>