pcpuma_unam_operador/components/admin/CargaMasivaEquipos.vue

<template>
  <div>
    <div class="columns is-multiline mb-4">
      <BotonDescargarCatalogo
        campo="plantilla equipo"
        nombreArchivo="plantilla_equipos"
        :obtener="obtenerPlantilla"
      />

      <BotonDescargarCatalogo
        campo="catalogo marca"
        nombreArchivo="catalogo_marca"
        :obtener="obtenerMarcas"
      />

      <BotonDescargarCatalogo
        campo="catalogo modelo"
        nombreArchivo="catalogo_modelo"
        :obtener="obtenerModelos"
      />

      <BotonDescargarCatalogo
        campo="catalogo tipo carrito"
        nombreArchivo="catalogo_tipo_carrito"
        :obtener="obtenerTiposCarritos"
      />

      <BotonDescargarCatalogo
        campo="catalogo tipo entrada"
        nombreArchivo="catalogo_tipo_entrada"
        :obtener="obtenerTiposEntradas"
      />

      <BotonDescargarCatalogo
        campo="catalogo software"
        nombreArchivo="catalogo_software"
        :obtener="obtenerSoftware"
      />
    </div>

    <SubirCsv :updateIsLoading="updateIsLoading" :path="path" />

    <b-pagination :total="total" :per-page="1" v-model="current" />

    <div v-for="(d, index) in data" :key="index" v-show="current - 1 === index">
      <Errores :errores="d.errores" />

      <TablaEquiposNuevos :equipos="d.equiposNuevos" />
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import BotonDescargarCatalogo from '@/components/botones/BotonDescargarCatalogo'
import Errores from '@/components/admin/Errores'
import SubirCsv from '@/components/admin/SubirCsv'
import TablaEquiposNuevos from '@/components/tablas/TablaEquiposNuevos'

export default {
  components: { BotonDescargarCatalogo, Errores, SubirCsv, TablaEquiposNuevos },
  props: {
    updateIsLoading: { type: Function, required: true, default: () => {} },
    admin: { type: Object, required: true, default: () => ({}) },
  },
  data() {
    return { data: [], current: 0, total: 0, socket: {}, path: '' }
  },
  methods: {
    nuevosEquipos(data) {
      if (this.total === 0) this.current = 1
      this.data.push(data)
      this.total = this.data.length
    },
    obtenerPlantilla() {
      return new Promise((resolve, reject) => {
        resolve([
          {
            modulo: 'Módulo 1',
            carrito: 'C01',
            tipo: 'Chromebook',
            equipo: 'C01',
            numero_inventario: '9183919',
            numero_serie: '8379dddnk',
            entradas: 'HDMI,VGA',
            programas: 'Adobe',
            marca: 'LENOVO',
            modelo: 'THINKPAD L380',
          },
        ])
      })
    },
    obtenerMarcas() {
      return axios
        .get(`${process.env.api}/marca?tipo=e`, this.$getToken.token())
        .then((res) => res.data)
        .catch((err) => {
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    obtenerModelos() {
      return axios
        .get(`${process.env.api}/modelo?tipo=e`, this.$getToken.token())
        .then((res) => res.data)
        .catch((err) => {
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    obtenerTiposCarritos() {
      return axios
        .get(
          `${process.env.api}/institucion-tipo-carrito`,
          this.$getToken.token()
        )
        .then((res) => res.data)
        .catch((err) => {
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    obtenerTiposEntradas() {
      return axios
        .get(
          `${process.env.api}/institucion-tipo-entrada`,
          this.$getToken.token()
        )
        .then((res) => res.data)
        .catch((err) => {
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    obtenerSoftware() {
      return axios
        .get(`${process.env.api}/institucion-programa`, this.$getToken.token())
        .then((res) => res.data)
        .catch((err) => {
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
  },
  created() {
    this.path = `upload-file/carga-masiva-equipos?id_institucion=${this.admin.idInstitucion}`
  },
  beforeCreate() {
    this.socket = this.$nuxtSocket({
      name: 'main',
      path: process.env.path,
    })

    this.socket.on('equipos-nuevos', (data) => {
      if (data.id_institucion === this.admin.idInstitucion)
        this.nuevosEquipos(data.data)
    })
  },
}
</script>

<style></style>