pcpuma_unam_operador/components/operador/TablaPrestamosActivos.vue

<template>
  <section>
    <h4 class="title">Préstamos Activos: {{ total }}</h4>

    <div class="columns is-multiline mb-0">
      <b-field class="column is-4-tablet is-3-desktop" label="Número de Cuenta">
        <b-input
          type="text"
          placeholder="Número de Cuenta"
          icon="account"
          maxlength="9"
          @keyup.enter.native="obtenerPrestamos()"
          v-model="search.numeroCuenta"
          rounded
        />
      </b-field>

      <b-field
        class="column is-4-tablet is-3-desktop"
        label="Número de Inventario"
      >
        <b-input
          type="text"
          placeholder="Número de Inventario"
          icon="laptop"
          @keyup.enter.native="obtenerPrestamos()"
          v-model="search.numeroInventario"
          rounded
        />
      </b-field>

      <b-field class="column is-4-tablet is-3-desktop" label="Módulo">
        <b-select icon="storefront-outline" v-model="idModulo" expanded rounded>
          <option value="" disabled>Módulo</option>
          <option
            v-for="(m, i) in modulos"
            :key="i"
            :value="m.idModulo"
            v-show="m.idModulo === idModulo || operador.idTipoUsuario === 1"
          >
            {{ m.modulo }}
          </option>
        </b-select>
      </b-field>

      <b-field class="column is-4-tablet is-3-desktop" label="Tipo de Equipo">
        <b-select
          icon="book-variant"
          v-model="search.idTipoCarrito"
          expanded
          rounded
        >
          <option value="">Tipo</option>
          <option
            v-for="(t, i) in tipoCarritos"
            :key="i"
            :value="t.idTipoCarrito"
          >
            {{ t.tipoCarrito }}
          </option>
        </b-select>
      </b-field>

      <b-field
        class="column is-4-tablet is-3-desktop"
        label="Número de Préstamo"
      >
        <b-input
          type="text"
          placeholder="Número de Préstamo"
          icon="numeric"
          @keyup.enter.native="obtenerPrestamos()"
          v-model="search.idPrestamo"
          rounded
        />
      </b-field>

      <b-field class="column is-4-tablet is-3-desktop" label="Carrito">
        <b-input
          type="text"
          placeholder="Carrito"
          icon="cart"
          @keyup.enter.native="obtenerPrestamos()"
          v-model="search.carrito"
          rounded
        />
      </b-field>

      <b-field class="column is-4-tablet is-3-desktop" label="Equipo">
        <b-input
          type="text"
          placeholder="Equipo"
          icon="laptop"
          @keyup.enter.native="obtenerPrestamos()"
          v-model="search.equipo"
          rounded
        />
      </b-field>
    </div>

    <div class="is-flex is-justify-content-center mb-5">
      <b-button type="is-success" @click="obtenerPrestamos()">
        Buscar
      </b-button>
    </div>

    <TablaPrestamos
      :operador="operador"
      :isLoadingTable="isLoading"
      :data="data"
      :page="page"
      :onPageChange="onPageChange"
      :total="total"
      :columnaNumeroCuenta="true"
      :columnaNombre="true"
      :columnaNumeroInventario="true"
      :columnaTipo="true"
      :columnaCarrito="true"
      :columnaHoraFin="true"
      :columnaEnUso="true"
      :columnaBotonCancelar="true"
      :columnaIdPrestamo="true"
      :columnaEquipo="true"
      :columnaregresoInmediato="true"
      :columnaHoraRegreso="true"
      :columnaLiberar="true"
      :filaRetraso="true"
      :imprimirError="imprimirError"
      :imprimirWarning="imprimirWarning"
      :imprimirMensaje="imprimirMensaje"
      :obtenerPrestamos="obtenerPrestamos"
      :updateIsLoadingPage="updateIsLoading"
    />
  </section>
</template>

<script>
import axios from 'axios'
import TablaPrestamos from '@/components/operador/TablaPrestamos'

export default {
  components: { TablaPrestamos },
  data() {
    return {
      modulos: [],
      tipoCarritos: [],
      data: [],
      page: 1,
      total: 0,
      search: {
        idTipoCarrito: '',
      },
      lastSearch: {},
      idModulo: null,
      isLoading: false,
    }
  },
  props: {
    operador: { type: Object, required: true },
    imprimirError: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirMensaje: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  methods: {
    onPageChange(page) {
      this.page = page
      this.obtenerPrestamos()
    },
    obtenerPrestamos() {
      let data = ''

      this.isLoading = true
      if (
        this.search.numeroCuenta != this.lastSearch.numeroCuenta ||
        this.search.numeroInventario != this.lastSearch.numeroInventario ||
        this.search.idTipoCarrito != this.lastSearch.idTipoCarrito ||
        this.search.idPrestamo != this.lastSearch.idPrestamo ||
        this.search.carrito != this.lastSearch.carrito ||
        this.search.equipo != this.lastSearch.equipo ||
        this.idModulo != this.lastSearch.idModulo
      ) {
        this.page = 1
        this.lastSearch.numeroCuenta = this.search.numeroCuenta
        this.lastSearch.numeroInventario = this.search.numeroInventario
        this.lastSearch.idTipoCarrito = this.search.idTipoCarrito
        this.lastSearch.idPrestamo = this.search.idPrestamo
        this.lastSearch.carrito = this.carrito
        this.lastSearch.equipo = this.equipo
        this.lastSearch.idModulo = this.idModulo
      }
      if (this.search.idTipoCarrito)
        data += `&idTipoCarrito=${this.search.idTipoCarrito}`
      if (this.search.numeroInventario)
        data += `&numeroInventario=${this.search.numeroInventario}`
      if (this.search.numeroCuenta)
        data = `&usuario=${this.search.numeroCuenta}`
      if (this.search.idPrestamo) data = `&idPrestamo=${this.search.idPrestamo}`
      if (this.search.carrito) data = `&carrito=${this.search.carrito}`
      if (this.search.equipo) data = `&equipo=${this.search.equipo}`
      axios
        .get(
          `${process.env.api}/prestamo/activos?pagina=${this.page}&idModulo=${this.idModulo}${data}`,
          this.operador.token
        )
        .then((res) => {
          this.data = res.data.rows
          this.total = res.data.count
          this.isLoading = false
        })
        .catch((err) => {
          this.isLoading = false
          this.imprimirError(err.response.data)
        })
    },
    obtenerCatalogoModulo() {
      axios
        .get(`${process.env.api}/modulo`, this.operador.token)
        .then((res) => {
          this.modulos = res.data
          this.obtenerCatalogoTipoCarrito()
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
        })
    },
    obtenerCatalogoTipoCarrito() {
      axios
        .get(`${process.env.api}/tipo_carrito`, this.operador.token)
        .then((res) => {
          this.tipoCarritos = res.data
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
        })
    },
  },
  watch: {
    idModulo() {
      localStorage.setItem('idModulo', this.idModulo)
      this.obtenerPrestamos()
    },
  },
  created() {
    if (this.operador.idModulo) {
      this.idModulo = this.operador.idModulo
      this.obtenerCatalogoModulo()
    }
  },
  mounted() {
    this.socket = this.$nuxtSocket({
      name: 'main',
      path: process.env.path,
    })

    this.socket.on('reconnect', (data) => {
      this.obtenerPrestamos()
    })

    this.socket.on('actualizar', (data) => {
      this.obtenerPrestamos()
    })
  },
}
</script>

<style></style>