pcpuma_unam_operador/components/operador/Activos.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="Carrito">
        <b-input
          type="text"
          placeholder="Carrito"
          icon="car"
          @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="numeric"
          @keyup.enter.native="obtenerPrestamos()"
          v-model="search.equipo"
          rounded
        />
      </b-field>

      <!-- <b-field class="column is-4-tablet is-3-desktop" label="Módulo">
        <b-select
          icon="storefront-outline"
          v-model="search.idModulo"
          expanded
          rounded
        >
          <option value="">Módulo</option>

          <option v-for="(m, i) in modulos" :key="i" :value="m.idModulo">
            {{ 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.id_tipo_carrito"
          >
            {{ t.tipo_carrito }}
          </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>
    </div>

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

    <TablaPrestamo
      :operador="operador"
      :isLoadingTable="isLoading"
      :data="data"
      :page="page"
      :onPageChange="onPageChange"
      :total="total"
      :columnaNumeroCuenta="true"
      :columnaNombre="true"
      :columnaCarrera="true"
      :columnaNumeroInventario="true"
      :columnaTipo="true"
      :columnaEquipo="true"
      :columnaCarrito="true"
      :columnaModulo="true"
      :columnaIdPrestamo="true"
      :columnaHoraFin="true"
      :columnaBotonCancelar="true"
    />
  </section>
</template>

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

export default {
  components: { TablaPrestamo },
  props: {
    operador: { type: Object, required: true },
  },
  data() {
    return {
      modulos: [],
      tipoCarritos: [],
      data: [],
      page: 1,
      total: 0,
      search: {
        idModulo: '',
        idTipoCarrito: '',
      },
      lastSearch: {},
      isLoading: false,
    }
  },
  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.search.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.search.carrito
        this.lastSearch.equipo = this.search.equipo
        this.lastSearch.idModulo = this.search.idModulo
      }
      if (this.search.idModulo) data += `&idModulo=${this.search.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.carrito) data += `&carrito=${this.search.carrito}`
      if (this.search.equipo) data += `&equipo=${this.search.equipo}`
      if (this.search.idPrestamo)
        data += `&idPrestamo=${this.search.idPrestamo}`

      if (this.operador.institucion)
        data = `&id_institucion=${this.operador.institucion.id_institucion}`
      axios
        .get(
          `${process.env.api}/prestamo/activos?pagina=${this.page}${data}`,
          this.operador.token
        )
        .then((res) => {
          this.data = res.data[0]
          this.total = res.data[1]
          this.isLoading = false
        })
        .catch((err) => {
          this.isLoading = false
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCatalogoModulo() {
      let data = ''

      if (this.operador.institucion)
        data += `id_institucion=${this.operador.institucion.id_institucion}`
      axios
        .get(`${process.env.api}/modulo/modulos?${data}`)
        .then((res) => {
          this.modulos = res.data
          this.obtenerCatalogoTipoCarrito()
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCatalogoTipoCarrito() {
      axios
        .get(`${process.env.api}/institucion-tipo-carrito`)
        .then((res) => {
          this.tipoCarritos = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  created() {
    if (
      this.operador.tipoUsuario.id_tipo_usuario === 2 ||
      this.operador.tipoUsuario.id_tipo_usuario === 3
    ) {
      this.obtenerCatalogoModulo()
      this.obtenerPrestamos()
    }
  },
  mounted() {
    this.socket = this.$nuxtSocket({
      name: 'main',
      path: process.env.path,
    })

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

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

<style></style>