pcpuma_unam_operador/components/tablas/TablaEquipos.vue

<template>
  <b-table
    class="pb-6"
    :current-page="page"
    :data="equipos"
    :loading="isLoadingTable"
    :per-page="15"
    :row-class="(row, index) => 'pointer'"
    :selected.sync="equipoSeleccionado"
    :total="total"
    @page-change="onPageChange"
    backend-pagination
    hoverable
    paginated
    striped
  >
    <b-table-column
      field="numeroInventario"
      label="Número de inventario"
      centered
      v-slot="props"
    >
      <p>{{ props.row.numero_inventario }}</p>
    </b-table-column>

    <b-table-column field="equipo" label="Equipo" centered v-slot="props">
      <p>{{ props.row.equipo }}</p>
    </b-table-column>

    <b-table-column
      field="tipoCarrito"
      label="Tipo de equipo"
      centered
      v-slot="props"
    >
      <p>{{ props.row.carrito.tipoCarrito.tipo_carrito }}</p>
    </b-table-column>

    <b-table-column field="carrito" label="Carrito" centered v-slot="props">
      <p>{{ props.row.carrito.carrito }}</p>
    </b-table-column>

    <b-table-column field="modulo" label="Módulo" centered v-slot="props">
      <p>{{ props.row.carrito.modulo.modulo }}</p>
    </b-table-column>

    <b-table-column field="status" label="Status" centered v-slot="props">
      <p class="is-size-6 tag" :class="chooseTag(props.row.status.id_status)">
        {{ props.row.status.status }}
      </p>
    </b-table-column>
  </b-table>
</template>

<script>
export default {
  props: {
    equipos: { type: Array, required: true, default: () => [] },
    isLoadingTable: { type: Boolean, required: true, default: false },
    onPageChange: { type: Function, required: true, default: () => {} },
    page: { type: Number, required: true, default: 1 },
    total: { type: Number, required: true, default: 0 },
  },
  data() {
    return {
      equipoSeleccionado: {},
    }
  },
  methods: {
    chooseTag(idStatus) {
      switch (idStatus) {
        case 1:
          return 'is-info'
        case 2:
          return 'is-link'
        case 3:
          return 'is-primary'
        case 4:
          return 'is-success'
        case 5:
          return 'is-warning'
        case 6:
          return 'is-danger'
        case 7:
          return 'is-black'
      }
    },
  },
  watch: {
    equipoSeleccionado() {
      this.$router.push(
        `/equipos/buscar_equipo/${this.equipoSeleccionado.numero_inventario}`
      )
    },
  },
}
</script>

<style>
.pointer {
  cursor: pointer;
}
</style>