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"
        />
      </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>