pcpuma_unam_operador/components/admin/SelectInstitucion.vue

<template>
  <div>
    <b-field
      class="column is-4"
      label="Nombre de la Institución"
      v-if="admin.tipoUsuario.id_tipo_usuario === 2"
    >
      <b-select v-model="idInstitucion" expanded rounded>
        <option disabled :value="null">Institución</option>
        <option
          v-for="institucion in instituciones"
          :value="institucion.id_institucion"
          :key="institucion.id_insitucion"
        >
          {{ institucion.institucion }}
        </option>
      </b-select>
    </b-field>

    <TablaModulos :admin="admin" :data="data" />
  </div>
</template>
<script>
import axios from 'axios'
import TablaModulos from '@/components/admin/TablaModulos'
export default {
  components: {
    TablaModulos,
  },
  props: {
    admin: { typeof: Object, require: true },
    updateActualizarTabla: { type: Function, required: true },
    actualizarTabla: { type: Boolean, required: true },
  },
  data() {
    return {
      instituciones: [],
      institucion: {},
      idInstitucion: null,
      data: [],
    }
  },
  methods: {
    obtenerCatalogoInstitucion() {
      axios
        .get(`${process.env.api}/institucion/activas`, this.$getToken.token())
        .then((res) => {
          this.instituciones = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCatalogoModulo(id_institucion) {
      axios
        .get(
          `${process.env.api}/modulo/modulos?id_institucion=${id_institucion}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.data = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  watch: {
    idInstitucion(value) {
      this.obtenerCatalogoModulo(value)
    },
    actualizarTabla(value) {
      if (value) {
        this.obtenerCatalogoModulo(this.admin.institucion.id_institucion)
        this.updateActualizarTabla(false)
      }
    },
  },
  created() {
    this.admin.tipoUsuario.id_tipo_usuario === 2
      ? this.obtenerCatalogoInstitucion()
      : this.obtenerCatalogoModulo(this.admin.institucion.id_institucion)
  },
}
</script>