pcpuma_unam_operador/components/operador/TablaEquiTodos.vue

<template>
  <b-table
    :data="data"
    :loading="isLoadingTable"
    class="mb-6"
    show-detail-icon
    paginated
    detailed
  >
    <b-table-column field="carrito" label="Carrito" v-slot="props" centered>
      <span>{{ props.row.carrito }}</span>
    </b-table-column>

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

    <b-table-column field="tipo" label="Tipo" v-slot="props" centered>
      <span>{{ props.row.TipoCarrito.tipoCarrito }}</span>
    </b-table-column>

    <b-table-column field="activo" label="Activo" v-slot="props" centered>
      <BotonDesactivarCarrito
        :operador="operador"
        :carrito="props.row"
        :imprimirError="imprimirError"
        :imprimirMensaje="imprimirMensaje"
        :imprimirWarning="imprimirWarning"
        :obtenerCarritos="obtenerCarritos"
      />
    </b-table-column>

    <template #detail="equipos">
      <b-table
        :data="equipos.row.Equipos"
        :per-page="15"
        :selected.sync="selectedEquipo"
        :row-class="(row, index) => 'pointer'"
        class="mb-6"
        hoverable
        striped
        paginated
      >
        <b-table-column field="equipo" label="Equipo" v-slot="props" centered>
          <span>
            {{ props.row.equipo }}
          </span>
        </b-table-column>

        <b-table-column
          field="numeroInventario"
          label="Número de inventario"
          v-slot="props"
          centered
        >
          <span>
            {{ props.row.numeroInventario }}
          </span>
        </b-table-column>

        <b-table-column
          field="numeroSerie"
          label="Número de serie"
          v-slot="props"
          centered
        >
          <span>
            {{ props.row.numeroSerie }}
          </span>
        </b-table-column>

        <b-table-column
          field="ubicacion"
          label="Ubicación"
          v-slot="props"
          centered
        >
          <span
            class="is-size-6 tag"
            :class="choooseTag(props.row.Status.idStatus)"
          >
            {{ props.row.Status.status }}
          </span>
        </b-table-column>
      </b-table>
    </template>
  </b-table>
</template>

<script>
import axios from 'axios'
import BotonDesactivarCarrito from '@/components/operador/BotonDesactivarCarrito.vue'

export default {
  components: { BotonDesactivarCarrito },
  props: {
    operador: {
      type: Object,
      required: true,
    },
    imprimirError: {
      type: Function,
      required: true,
    },
    imprimirMensaje: {
      type: Function,
      required: true,
    },
    imprimirWarning: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      isLoadingTable: false,
      data: [],
      selectedEquipo: {},
    }
  },
  methods: {
    choooseTag(idStatus) {
      let style = ''

      switch (idStatus) {
        case 1:
          style = 'is-info'
          break
        case 2:
          style = 'is-link'
          break
        case 3:
          style = 'is-primary'
          break
        case 4:
          style = 'is-success'
          break
        case 5:
          style = 'is-warning'
          break
        case 6:
          style = 'is-danger'
          break
        case 7:
          style = 'is-black'
          break
      }
      return style
    },
    obtenerCarritos() {
      this.isLoadingTable = true
      axios
        .get(`${process.env.api}/equipo/equipos?pagina=1`, this.operador.token)
        .then((res) => {
          this.data = res.data
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.imprimirError(err.response.data)
        })
    },
  },
  watch: {
    selectedEquipo() {
      localStorage.setItem(
        'numeroInventario',
        this.selectedEquipo.numeroInventario
      )
      this.$router.push('buscar_equipo')
    },
  },
  created() {
    this.obtenerCarritos()
  },
}
</script>

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