Files
servicio_social_front/components/admin/servicio/vistaServicio.vue
T

365 lines
9.9 KiB
Vue

<template>
<div class="container">
<div class="mb-5">
<BotonRegresar
:path="'/admin'"
:deleteFromLocalStorage="['idServicio', 'idStatus']"
/>
</div>
<TituloServicio :status="alumno.Status.idStatus" />
<DatosPrograma :programa="alumno.Programa" />
<DatosPersonales :alumno="alumno" />
<div id="enlaces">
<b-button
class="boton is-info"
@click="editar()"
v-if="mostrarEditar()"
>
Editar información
</b-button>
<br /><br />
<TituloStatus :status="alumno.Status.idStatus" />
<div v-if="alumno.cartaAceptacion">
<Documento
:title="'Ver carta de aceptación'"
:link="linkCartaAceptacion"
:doc="alumno.cartaAceptacion"
:idDoc="1"
:status="alumno.Status.idStatus"
/>
</div>
<div v-if="alumno.cartaTermino" style="margin-top: 10px">
<Documento
:title="'Ver carta de término'"
:link="linkCartaTermino"
:doc="alumno.cartaTermino"
:idDoc="2"
:status="alumno.Status.idStatus"
/>
</div>
<div v-if="alumno.informeGlobal" style="margin-top: 10px">
<Documento
:title="'Ver informe global de actividades'"
:link="linkInformeGlobal"
:doc="alumno.InformeGlobal"
:idDoc="3"
:status="alumno.Status.idStatus"
/>
</div>
<b-checkbox
v-if="alumno.Programa.acatlan && alumno.Status.idStatus == 5"
v-model="alumno.vistoBuenoAcatlan"
size="is-medium"
type="is-info"
>
Visto bueno Acatlán
</b-checkbox>
<p v-if="alumno.idCuestionarioPrograma" class="my-4">
<strong>
Cuenta con cuestionario de programa resuelto.
</strong>
</p>
<p v-if="alumno.idCuestionarioAlumno" class="my-4">
<strong>
Cuenta con cuestionario de alumno resuelto.
</strong>
</p>
</div>
<div id="acciones" class="my-5">
<b-button
class="is-success"
@click="confirmarDialog(1)"
v-if="mostrarConfirmar1()"
>
Confirmar
</b-button>
<b-button
class="is-success"
@click="confirmarDialog(2)"
v-if="mostrarConfirmar2() && mostrarVistoBueno()"
>
Confirmar
</b-button>
<b-button
v-if="mostrarCancelar()"
class="is-danger"
@click="enviarCancel = !enviarCancel"
>
Cancelar
</b-button>
<br /><br />
<b-field label="Razón para cancelar: " v-if="enviarCancel">
<b-input
maxlength="500"
type="textarea"
v-model="mensajeCancel"
></b-input>
</b-field>
<b-button
v-if="mensajeCancel && enviarCancel"
class="is-danger"
@click="cancelarDialog()"
>
Cancelar servicio
</b-button>
<b-button v-else-if="enviarCancel" disabled>
Cancelar servicio
</b-button>
<div>
<BotonRegresar
:path="'/admin'"
:deleteFromLocalStorage="['idServicio','idStatus']"
/>
</div>
<b-loading
:is-full-page="true"
v-model="isLoading"
:can-cancel="false"
></b-loading>
</div>
</div>
</template>
<script>
import axios from "axios";
import tituloServicio from "./tituloServicio";
import tituloStatus from "./tituloStatus";
import datosPrograma from "./datosPrograma";
import datosPersonales from "./datosPersonales";
import documento from "./documento";
import botonRegresar from "../../botonRegresar";
export default {
components: {
tituloServicio,
datosPrograma,
datosPersonales,
tituloStatus,
documento,
botonRegresar,
},
data() {
return {
alumno: {
Programa: {},
Usuario: {},
Carrera: {},
Status: {},
},
idServicio: localStorage.getItem("idServicio"),
token: {
headers: {
token: localStorage.getItem("token"),
},
},
linkCartaAceptacion: "",
linkCartaTermino: "",
linkInformeGlobal: "",
enviarMensaje: false,
enviarCancel: false,
mensaje: "",
mensajeCancel: "",
isLoading: false,
};
},
methods: {
mostrarConfirmar1() {
if (this.alumno.Status.idStatus === 1) return true;
return false;
},
mostrarConfirmar2() {
if (this.alumno.Status.idStatus === 5) {
if (!this.alumno.acatlanContigo) return true;
else if (this.alumno.vistoBueno) return true;
}
return false;
},
mostrarCancelar(){
if(this.alumno.Status.idStatus === 10 || this.alumno.Status.idStatus === 6) return false;
return true;
},
mostrarEditar(){
if(this.alumno.Status.idStatus === 10) return false;
return true;
},
mostrarVistoBueno(){
if(!this.alumno.Programa.acatlan) return true
if(this.alumno.vistoBuenoAcatlan) return true
return false
},
editar(){
localStorage.setItem("idStatus",this.alumno.Status.idStatus);
this.$router.push('servicio/modificar');
},
obtenerRegistro() {
this.isLoading = true;
return axios
.get(
`${process.env.api}/servicio/admin?idServicio=${this.idServicio}`,
this.token
)
.then((res) => {
this.alumno = res.data;
this.alumno.creditos = Number(res.data.creditos);
if (this.alumno.cartaAceptacion)
this.linkCartaAceptacion = `https://drive.google.com/file/d/${this.alumno.cartaAceptacion}/view?usp=sharing`;
if (this.alumno.cartaTermino)
this.linkCartaTermino = `https://drive.google.com/file/d/${this.alumno.cartaTermino}/view?usp=sharing`;
if (this.alumno.informeGlobal)
this.linkInformeGlobal = `https://drive.google.com/file/d/${this.alumno.informeGlobal}/view?usp=sharing`;
})
.catch((err) => {
this.error(err.response.data.message);
})
.finally(() => {
this.isLoading = false;
});
},
cancelarDialog() {
this.$buefy.dialog.confirm({
title: "Cancelar sevicio",
message: "¿Seguro(a) que quiere cancelar este servicio?",
confirmText: "Cancelar servicio",
cancelText: "No",
type: "is-danger",
hasIcon: true,
onConfirm: () => this.cancelar(),
});
},
confirmarDialog(a) {
this.$buefy.dialog.confirm({
title: "Confimar servicio",
message: "¿Seguro(a) que quiere confirmar este servicio?",
confirmText: "Confirmar",
cancelText: "Cancelar",
type: "is-success",
hasIcon: true,
onConfirm: () => {
switch (a) {
case 1:
this.confirmarRegistro();
break;
case 2:
this.confirmarLiberacion();
break;
}
},
});
},
cancelar() {
this.isLoading = true;
const data = { idServicio: this.idServicio, mensaje: this.mensajeCancel };
axios
.put(`${process.env.api}/servicio/cancelar`, data, this.token)
.then((res) => {
this.$buefy.dialog.alert("El servicio ha sido cancelado con éxito");
localStorage.removeItem("idServicio");
this.$router.push("/admin");
})
.catch((err) => {
this.error(err.response.data.message);
})
.finally(() => {
this.isLoading = false;
});
},
confirmarRegistro() {
this.isLoading = true;
const data = { idServicio: this.idServicio };
axios
.put(`${process.env.api}/servicio/registro`, data, this.token)
.then((res) => {
this.$buefy.dialog.alert("El servicio ha sido aprobado");
localStorage.removeItem("idServicio");
this.$router.push("/admin");
})
.catch((err) => {
this.error(err.response.data.message);
})
.finally(() => {
this.isLoading = false;
});
},
confirmarLiberacion() {
this.isLoading = true;
const data = { idServicio: this.idServicio };
if (this.alumno.vistoBuenoAcatlan)
data.vistoBuenoAcatlan = this.alumno.vistoBuenoAcatlan;
axios
.put(`${process.env.api}/servicio/liberacion`, data, this.token)
.then((res) => {
this.$buefy.dialog.alert("El servicio ha sido liberado");
localStorage.removeItem("idServicio");
this.$router.push("/admin");
})
.catch((err) => {
this.error(err.response.data.message);
})
.finally(() => {
this.isLoading = false;
});
},
error(msj) {
let salir = false;
switch (msj) {
case "invalid signature":
msj = "Tu token no es valido, inicia sesión de nuevo.";
salir = true;
break;
case "jwt expired":
msj = "Tu sesión ha expirado, inicia sesión de nuevo.";
salir = true;
break;
case "jwt malformed":
msj = "No se encontro tu token, inicia sesión de nuevo.";
salir = true;
break;
case "No hay token":
msj = "Ocurrio un error al enviar tu token, inicia sesión de nuevo.";
salir = true;
break;
}
this.$buefy.dialog.alert({
title: "Error",
message: msj,
type: "is-danger",
hasIcon: true,
icon: "alert-circle",
iconPack: "mdi",
ariaRole: "alertdialog",
ariaModal: true,
});
if (salir == true) {
localStorage.clear();
this.$router.push(`/`);
}
},
},
async created() {
await this.obtenerRegistro();
},
};
</script>
<style scoped>
.boton {
margin-top: 2%;
}
.is-size-5 {
margin-bottom: 10px;
}
.link-f {
font-size: 27px !important;
}
.link {
display: flex;
justify-content: flex-start;
font-size: 20px;
margin-top: 10px;
}
.spanDoc {
margin-right: 5%;
}
</style>