pcpuma_unam_operador/components/selects/SelectInstitucion.vue
2023-01-17 11:44:41 -06:00

88 lines
2.3 KiB
Vue

<template>
<b-field
class="mb-0 pb-0"
label="Institución"
:class="column ? `column ${columnSize}` : ''"
>
<b-select
icon="home"
:loading="isLoadingSelect"
v-model="idInstitucion"
expanded
rounded
>
<option :disabled="deshabilitarOptVacia" :value="0">
Selecciona una opción
</option>
<option
v-for="(i, index) in instituciones"
:key="index"
:value="i.id_institucion"
>
{{ i.institucion }}
</option>
</b-select>
</b-field>
</template>
<script>
import axios from 'axios'
export default {
props: {
activas: { typeof: Boolean, required: false, default: false },
column: { type: Boolean, required: false, default: true },
deshabilitarOptVacia: { typeof: Boolean, required: false, default: true },
columnSize: { typeof: String, required: false, default: '' },
idInstitucionPadre: { type: Number, required: true, default: 0 },
},
data() {
return { instituciones: [], isLoadingSelect: false, idInstitucion: 0 }
},
methods: {
obtenerInstituciones() {
this.isLoadingSelect = true
this.instituciones = []
return axios
.get(`${process.env.api}/institucion`, this.$getToken.token())
.then((res) => {
this.instituciones = res.data
this.$emit('catalogo-instituciones', this.instituciones)
this.isLoadingSelect = false
})
.catch((err) => {
this.isLoadingSelect = false
})
},
obtenerInstitucionesActivas() {
this.isLoadingSelect = true
this.instituciones = []
return axios
.get(`${process.env.api}/institucion/instituciones-activas`)
.then((res) => {
this.instituciones = res.data
this.$emit('catalogo-instituciones', this.instituciones)
this.isLoadingSelect = false
})
.catch((err) => {
this.isLoadingSelect = false
})
},
},
watch: {
idInstitucion() {
this.$emit('institucion-seleccionada', this.idInstitucion)
},
idInstitucionPadre(nuevaInstitucion) {
this.idInstitucion = nuevaInstitucion
},
},
created() {
if (this.idInstitucionPadre) this.idInstitucion = this.idInstitucionPadre
if (this.activas) this.obtenerInstitucionesActivas()
else this.obtenerInstituciones()
},
}
</script>