pcpuma_unam_operador/components/tablas/TablaMultas.vue

<template>
  <b-table
    class="pb-6"
    :current-page="page"
    :data="multas"
    :loading="isLoadingTable"
    :per-page="25"
    :total="total"
    @page-change="onPageChange"
    backend-pagination
    detailed
    hoverable
    paginated
    show-detail-icon
    striped
  >
    <b-table-column
      field="usuario"
      label="Número de cuenta/trabajador"
      v-slot="props"
      v-if="columnaUsuario"
      centered
    >
      <p>{{ props.row.prestamo.usuario.usuario }}</p>
    </b-table-column>

    <b-table-column
      field="fechaInicio"
      label="Fecha Inicio"
      v-slot="props"
      centered
    >
      <p>{{ fecha(props.row.fecha_inicio) }}</p>
    </b-table-column>

    <b-table-column field="fechaFin" label="Fecha Fin" v-slot="props" centered>
      <p>{{ fecha(props.row.fecha_fin) }}</p>
    </b-table-column>

    <b-table-column field="operador" label="Operador" v-slot="props" centered>
      <p>{{ props.row.operadorMulta.operador || '' }}</p>
    </b-table-column>

    <b-table-column field="activo" label="Status" v-slot="props" centered>
      <p class="tag" :class="props.row.activo ? 'is-success' : 'is-danger'">
        {{ props.row.activo ? 'Vigente' : 'Expirada' }}
      </p>
    </b-table-column>

    <template #detail="props">
      <b-table :data="[props.row]" hoverable striped>
        <b-table-column
          field="descripcion"
          label="Descripción"
          v-slot="props"
          centered
        >
          <p>{{ props.row.descripcion }}</p>
        </b-table-column>

        <b-table-column
          field="infraccion"
          label="Infraccion extra"
          v-slot="props"
          centered
        >
          <p
            v-if="
              props.row.institucionInfraccion &&
              props.row.institucionInfraccion.infraccion.id_infraccion != 1
            "
          >
            {{ props.row.institucionInfraccion.infraccion.infraccion }}
          </p>

          <p v-else>-</p>
        </b-table-column>

        <b-table-column field="retraso" label="Retraso" v-slot="props" centered>
          <b-icon
            class="is-success"
            icon="check"
            size="is-large"
            v-if="props.row.retraso"
          />

          <p v-else>-</p>
        </b-table-column>
      </b-table>
    </template>
  </b-table>
</template>

<script>
import moment from 'moment'

export default {
  props: {
    multas: { type: Array, required: true, default: () => [] },
    columnaUsuario: { type: Boolean, required: false, default: false },
    isLoadingTable: { type: Boolean, required: true, default: false },
    onPageChange: { type: Function, required: true, default: () => {} },
    page: { type: Number, required: true, default: 0 },
    total: { type: Number, required: true, default: 0 },
  },
  methods: {
    fecha(date) {
      return moment(date).format('YYYY-MM-DD')
    },
  },
}
</script>