pcpuma_unam_operador/components/tablas/TablaCarritos.vue

<template>
  <b-table
    class="mb-6"
    :current-page="page"
    :data="data"
    :loading="isLoadingTable"
    :per-page="25"
    :row-class="(row, index) => 'pointer'"
    :selected.sync="carritoSeleccionado"
    :total="total"
    @page-change="onPageChange"
    backend-pagination
    detailed
    hoverable
    paginated
    show-detail-icon
    striped
  >
    <b-table-column field="carrito" label="Carrito" v-slot="props" centered>
      <p>{{ props.row.carrito }}</p>
    </b-table-column>

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

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

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

    <!-- <template #detail="props">
      <TablaEquipos :equipo="props.row" />
    </template> -->
  </b-table>
</template>

<script>
import TablaEquipos from '@/components/tablas/TablaEquipos'

export default {
  components: { TablaEquipos },
  props: {
    data: { type: Array, required: true, default: () => [] },
    isLoadingTable: { type: Boolean, required: true, default: false },
    obtenerCarritos: { type: Function, required: true, default: () => {} },
    total: { type: Number, required: true, default: 0 },
  },
  data() {
    return {
      page: 1,
      carritoSeleccionado: {},
    }
  },
  methods: {
    chooseTag(activo) {
      return activo ? 'is-success' : 'is-danger'
    },
    onPageChange(page) {
      this.page = page
      this.obtenerCarritos(this.page)
    },
  },
  watch: {
    carritoSeleccionado() {
      this.$router.push(
        `/operador/carritos/buscar_carrito/${this.carritoSeleccionado.id_carrito}`
      )
    },
  },
}
</script>