servicio_social_front/components/admin/responsables/infoResponsable/responsable.vue

<template>
  <div>
    <h3 class="title">Información del responsable</h3>

    <b-field label="Nombre:">
      <p class="input">{{ responsable.nombre }}</p>
    </b-field>

    <b-field label="Correo:">
      <p class="input">{{ responsable.usuario }}</p>
    </b-field>

    <b-field label="Clave de programa:">
      <b-select v-model="programaSeleccionado" expanded>
        <option value="" disabled>Elija una clave de programa:</option>
        <option v-for="(p, i) in programas" :key="i" :value="i">
          {{ p.clavePrograma }}
        </option>
      </b-select>
    </b-field>

    <b-field label="Institucion:">
      <p class="input">{{ programa.institucion }}</p>
    </b-field>

    <b-field label="Dependencia:">
      <p class="input">{{ programa.dependencia }}</p>
    </b-field>

    <b-field label="Programa:">
      <p class="input">{{ programa.programa }}</p>
    </b-field>

    <div>
      <b-button
        type="is-link"
        class="my-5"
        tag="router-link"
        to="/admin/responsables/infoResponsable/modificar"
      >
        Editar información
      </b-button>
    </div>

    <b-loading :is-full-page="true" :can-cancel="false" v-model="isLoading" />
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      idResponsable: null,
      responsable: {},
      programas: [],
      programa: {},
      programaSeleccionado: '',
      isLoading: false,
    }
  },
  props: {
    admin: { type: Object, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
  },
  methods: {
    obtenerResponsable() {
      this.isLoading = true
      axios
        .get(
          `${process.env.api}/usuario/responsable?idUsuario=${this.idResponsable}`,
          this.admin.token
        )
        .then((res) => {
          this.responsable = res.data
          this.isLoading = false
        })
        .catch((err) => {
          this.isLoading = false
          this.error(err.response.data.message)
        })
    },
    obtenerProgramas() {
      axios
        .get(
          `${process.env.api}/programa/programas_admin?idUsuario=${this.idResponsable}`,
          this.admin.token
        )
        .then((res) => {
          this.programas = res.data
        })
        .catch((err) => {
          this.error(err.response.data.message)
        })
    },
  },
  watch: {
    programaSeleccionado() {
      this.programa = this.programas[this.programaSeleccionado]
    },
  },
  created() {
    this.idResponsable = localStorage.getItem('idResponsable')
    if (this.admin.idTipoUsuario === 1) {
      this.obtenerResponsable()
      this.obtenerProgramas()
    }
  },
}
</script>

<style scoped></style>