pcpuma_unam_operador/components/admin/BuscarModulo.vue

<template>
  <div class="box">
    <div class="columns is-align-items-flex-end">
      <b-field
        class="column pb-0"
        label="Nombre de la Institución"
        v-if="admin.tipoUsuario.id_tipo_usuario === 2"
      >
        <b-select
          v-model="idInstitucion"
          icon="school-outline"
          rounded
          expanded
        >
          <option value="" disabled>Institución</option>
          <option
            v-for="institucion in instituciones"
            :value="institucion.id_institucion"
            :key="institucion.id_insitucion"
          >
            {{ institucion.institucion }}
          </option>
        </b-select>
      </b-field>

      <b-field class="column pb-0" label="Nombre del Módulo">
        <b-select v-model="idModulo" icon="storefront-outline" rounded expanded>
          <option value="" disabled>Módulo</option>
          <option
            v-for="(modulo, index) in modulos"
            :value="modulo.id_modulo"
            :key="index"
          >
            {{ modulo.modulo }}
          </option>
        </b-select>
      </b-field>

      <div class="column">
        <b-button
          type="is-success"
          :disabled="!idModulo"
          @click="buscar()"
          rounded
          expanded
        >
          Buscar
        </b-button>
      </div>
    </div>

    <div class="columns">
      <InfoModulo :modulo="modulo" />

      <!-- <AdminEquipo
        :admin="admin"
        :imprimirError="imprimirError"
        :imprimirWarning="imprimirWarning"
        :imprimirMensaje="imprimirMensaje"
        :updateIsLoading="updateIsLoading"
        :buscar="buscar"
      /> -->
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import InfoModulo from '@/components/admin/InfoModulo'
export default {
  components: {
    InfoModulo,
  },
  props: {
    admin: { type: Object, required: true },
    modulo: { type: Object, required: true },
    imprimirError: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirMensaje: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
    updateModulo: { type: Function, required: true },
  },
  data() {
    return {
      modulos: [],
      idModulo: '',
      instituciones: [],
      institucion: {},
      idInstitucion: '',
    }
  },
  methods: {
    buscar() {
      if (this.idModulo || this.modulo.id_modulo) {
        this.updateIsLoading(true)
        axios
          .get(
            `${process.env.api}/modulo/modulo?id_modulo=${
              this.idModulo || this.modulo.id_modulo
            }`
          )
          .then((res) => {
            this.updateModulo(res.data)
            this.updateIsLoading(false)
            this.$router.push({
              path: '../buscar_modulo/' + this.idModulo,
            })
            this.idModulo = ''
          })
          .catch((err) => {
            this.updateIsLoading(false)
            this.imprimirError(err.response.data)
          })
      }
    },
    obtenerCatalogoInstitucion() {
      axios
        .get(`${process.env.api}/institucion/activas`)
        .then((res) => {
          this.instituciones = res.data
        })
        .catch((err) => {
          this.imprimirError(err)
        })
    },
    obtenerCatalogoModulo(id_institucion) {
      axios
        .get(
          `${process.env.api}/modulo/modulos?id_institucion=${id_institucion}`
        )
        .then((res) => {
          this.modulos = res.data
        })
        .catch((err) => {
          this.imprimirError(err)
        })
    },
  },
  watch: {
    idInstitucion(value) {
      this.obtenerCatalogoModulo(value)
    },
  },
  mounted() {},
  created() {
    this.admin.tipoUsuario.id_tipo_usuario === 2
      ? this.obtenerCatalogoInstitucion()
      : this.obtenerCatalogoModulo(this.admin.institucion.id_institucion)
    this.idModulo = this.$route.params.modulo
    if (this.idModulo) this.buscar()
  },
}
</script>