509 lines
14 KiB
Vue
509 lines
14 KiB
Vue
<template>
|
|
<section>
|
|
<h1 class="title is-1 titleAnadir">
|
|
Añadir Servicio Social
|
|
</h1>
|
|
<div
|
|
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd pl-0"
|
|
>
|
|
<div class="column pl-0">
|
|
<form>
|
|
<b-field class="column p-0 my-5 is-full">
|
|
<input
|
|
class="input column "
|
|
v-model="noCuenta"
|
|
message="Solo numeros"
|
|
required="required"
|
|
maxlength="9"
|
|
type="number"
|
|
placeholder="Cuenta"
|
|
min="0"
|
|
/>
|
|
|
|
<p class="control">
|
|
<b-button class="button is-info" @click="buscarAlumno()"
|
|
>Buscar</b-button
|
|
>
|
|
</p>
|
|
</b-field>
|
|
|
|
<b-field label="Nombre">
|
|
<div class="input">{{ alumno.nombre }}</div>
|
|
</b-field>
|
|
|
|
<b-field label="Carrera">
|
|
<div class="input">{{ alumno.carrera }}</div>
|
|
</b-field>
|
|
|
|
<b-field label="Créditos">
|
|
<div class="input">
|
|
{{ alumno.creditos }}<span v-if="alumno.creditos">%</span>
|
|
</div>
|
|
</b-field>
|
|
|
|
<b-field label="Seleccione programa">
|
|
<b-select
|
|
placeholder="Seleccionar"
|
|
expanded
|
|
v-model="programaSelectedID"
|
|
>
|
|
<option value="">Seleccionar</option>
|
|
<option
|
|
v-for="programa in programas"
|
|
v-bind:key="programa.idPrograma"
|
|
:value="programa.idPrograma"
|
|
>{{ programa.programa }}</option
|
|
>
|
|
</b-select>
|
|
</b-field>
|
|
|
|
<b-field label="Institución">
|
|
<div class="input">{{ programaSelected.institucion }}</div>
|
|
</b-field>
|
|
|
|
<b-field label="Dependencia">
|
|
<div class="input">{{ programaSelected.dependencia }}</div>
|
|
</b-field>
|
|
|
|
<b-field label="Clave del programa">
|
|
<div class="input">{{ programaSelected.clavePrograma }}</div>
|
|
</b-field>
|
|
|
|
<div v-if="programaSelected.acatlan == true">
|
|
<b-field label="Programa interno">
|
|
<b-input
|
|
v-model="programaSelected.programaInterno"
|
|
placeholder="Programa interno"
|
|
></b-input>
|
|
</b-field>
|
|
|
|
<b-field label="Profesor/Responsable de Programa">
|
|
<b-input
|
|
v-model="programaSelected.profesor"
|
|
placeholder="Profesor/Responsable de Programa"
|
|
></b-input>
|
|
</b-field>
|
|
</div>
|
|
|
|
<b-field label="Fecha de inicio">
|
|
<b-datepicker
|
|
placeholder="Inicio"
|
|
icon="calendar-today"
|
|
v-model="alumno.inicio"
|
|
:min-date="minDate"
|
|
>
|
|
</b-datepicker>
|
|
</b-field>
|
|
|
|
<b-field label="Fecha de fin" v-if="alumno.inicio">
|
|
<b-datepicker
|
|
placeholder="Fin"
|
|
v-model="alumno.fin"
|
|
:min-date="minDate2"
|
|
icon="calendar-today"
|
|
>
|
|
</b-datepicker>
|
|
</b-field>
|
|
|
|
<b-field label="Correo">
|
|
<b-input
|
|
placeholder="Email"
|
|
type="email"
|
|
v-model="alumno.correo"
|
|
></b-input>
|
|
</b-field>
|
|
|
|
<h3 class="title is-4 mt-6">
|
|
Carta de aceptación (en formato .PDF. No se aceptan fotos).
|
|
</h3>
|
|
|
|
<b-field>
|
|
<b-upload
|
|
v-model="file"
|
|
drag-drop
|
|
type="is-black"
|
|
expanded
|
|
accept="application/pdf"
|
|
>
|
|
<section class="section">
|
|
<div class="content has-text-centered">
|
|
<p>
|
|
<b-icon icon="upload" size="is-large"></b-icon>
|
|
</p>
|
|
<p>
|
|
{{
|
|
file.name ||
|
|
"Arrastra aquí tu archivo o da click para buscar"
|
|
}}
|
|
</p>
|
|
<p>Tamaño máximo 20MB</p>
|
|
</div>
|
|
</section>
|
|
</b-upload>
|
|
</b-field>
|
|
</form>
|
|
|
|
<div class="my-6">
|
|
<b-button
|
|
tag="router-link"
|
|
to="/responsable"
|
|
type="is-info is-light "
|
|
icon-left="arrow-left-box"
|
|
class="border-info"
|
|
style="float: left;"
|
|
size="is-mediumm"
|
|
>
|
|
Regresar
|
|
</b-button>
|
|
<!-- <BotonRegresar :path="'/responsable'" /> -->
|
|
|
|
<b-field class="derecha">
|
|
<button
|
|
:disabled="disabled()"
|
|
class="button enviar is-success is-mediumm"
|
|
@click="Enviar()"
|
|
>
|
|
Enviar
|
|
</button>
|
|
</b-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
|
|
</section>
|
|
</template>
|
|
<script>
|
|
import "buefy/dist/buefy.css";
|
|
import validator from "validator";
|
|
import axios from "axios";
|
|
import moment from "moment";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
token: {
|
|
headers: {
|
|
token: window.localStorage.getItem("token"),
|
|
},
|
|
},
|
|
isLoading: false,
|
|
noCuenta: "",
|
|
sizeOk: "",
|
|
searched: false,
|
|
minDate: new Date(),
|
|
programaSelectedID: "",
|
|
file: [],
|
|
programas: [],
|
|
programaSelected: {
|
|
idPrograma: null,
|
|
institucion: "",
|
|
dependencia: "",
|
|
programa: "",
|
|
clavePrograma: "",
|
|
acatlan: "",
|
|
activo: "",
|
|
idUsuario: "",
|
|
programaInterno: "",
|
|
profesor: "",
|
|
},
|
|
alumno: {
|
|
cuenta: "",
|
|
nombre: "",
|
|
carrera: "",
|
|
creditos: "",
|
|
idAlumno: "",
|
|
idCarrera: "",
|
|
inicio: [],
|
|
fin: [],
|
|
correo: "",
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
reset() {
|
|
this.programaSelected.idPrograma = "";
|
|
this.programaSelected.institucion = "";
|
|
this.programaSelected.dependencia = "";
|
|
this.programaSelected.programa = "";
|
|
this.programaSelected.clavePrograma = "";
|
|
this.programaSelected.acatlan = "";
|
|
this.programaSelected.activo = "";
|
|
this.programaSelected.idUsuario = "";
|
|
this.programaSelected.programaInterno = "";
|
|
this.programaSelected.profesor = "";
|
|
|
|
this.alumno.cuenta = "";
|
|
this.alumno.nombre = "";
|
|
this.alumno.creditos = "";
|
|
this.alumno.carrera = "";
|
|
this.alumno.idAlumno = "";
|
|
this.alumno.idCarrera = "";
|
|
this.alumno.correo = "";
|
|
this.alumno.inicio = [];
|
|
this.alumno.fin = [];
|
|
|
|
this.noCuenta = "";
|
|
this.file = [];
|
|
this.programaSelectedID = "";
|
|
},
|
|
disabled() {
|
|
if (this.programaSelected.acatlan == false) {
|
|
if (
|
|
this.file != "" &&
|
|
this.noCuenta != "" &&
|
|
this.alumno.correo != "" &&
|
|
this.alumno.inicio != "" &&
|
|
this.alumno.fin != "" &&
|
|
this.programaSelectedID != ""
|
|
)
|
|
return false;
|
|
else return true;
|
|
} else {
|
|
if (
|
|
this.file != "" &&
|
|
this.noCuenta != "" &&
|
|
this.alumno.correo != "" &&
|
|
this.alumno.inicio != "" &&
|
|
this.alumno.fin != "" &&
|
|
this.programaSelectedID != "" &&
|
|
this.programaSelected.programaInterno != "" &&
|
|
this.programaSelected.profesor != ""
|
|
)
|
|
return false;
|
|
else return true;
|
|
}
|
|
},
|
|
esNumero(numero) {
|
|
const ultimaLetra = numero.length - 1;
|
|
|
|
if (numero && !validator.isNumeric(numero[ultimaLetra])) {
|
|
return numero.substr(0, ultimaLetra);
|
|
}
|
|
return numero;
|
|
},
|
|
maxLength(str, max) {
|
|
if (str.length > max) return str.substr(0, max);
|
|
return str;
|
|
},
|
|
correoValidado() {
|
|
if (validator.isEmail(this.alumno.correo)) {
|
|
return "";
|
|
}
|
|
},
|
|
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(`/`);
|
|
}
|
|
},
|
|
buscarAlumno() {
|
|
this.isLoading = true;
|
|
axios
|
|
.get(
|
|
`${process.env.api}/usuario/escolares?numeroCuenta=${this.noCuenta}`,
|
|
this.token
|
|
)
|
|
.then((resp) => {
|
|
this.alumno.cuenta = this.noCuenta;
|
|
this.alumno.nombre = resp.data.nombre;
|
|
this.alumno.carrera = resp.data.carrera;
|
|
this.alumno.creditos = parseInt(resp.data.creditos, 10);
|
|
this.alumno.idCarrera = resp.data.idCarrera;
|
|
this.alumno.idAlumno = resp.data.idUsuario;
|
|
this.searched = true;
|
|
})
|
|
.catch((error) => {
|
|
this.error(error.response.data.message);
|
|
})
|
|
.finally(() => {
|
|
this.isLoading = false;
|
|
});
|
|
},
|
|
Enviar() {
|
|
this.isLoading = true;
|
|
const data = {
|
|
idUsuario: this.alumno.idAlumno,
|
|
idPrograma: this.programaSelected.idPrograma,
|
|
idCarrera: this.alumno.idCarrera,
|
|
numeroCuenta: this.alumno.cuenta,
|
|
creditos: this.alumno.creditos.toString(),
|
|
correo: this.alumno.correo,
|
|
programaInterno: this.programaSelected.programaInterno,
|
|
profesor: this.programaSelected.profesor,
|
|
fechaInicio: moment(this.alumno.inicio),
|
|
fechaFin: moment(this.alumno.fin),
|
|
};
|
|
const formData = new FormData();
|
|
|
|
formData.append("alumno", JSON.stringify(data));
|
|
formData.append("cartaAceptacion", this.file);
|
|
|
|
axios
|
|
.post(`${process.env.api}/servicio/nuevo`, formData, {
|
|
headers: {
|
|
"Content-Type": "multipart/form-data",
|
|
token: this.token.headers.token,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
this.$buefy.dialog.alert({
|
|
title: "Success",
|
|
message: "Se enviaron los datos correctamente",
|
|
type: "is-success",
|
|
hasIcon: true,
|
|
icon: "checkbox-marked-circle",
|
|
iconPack: "mdi",
|
|
ariaRole: "alertdialog",
|
|
ariaModal: true,
|
|
});
|
|
this.reset();
|
|
})
|
|
.catch((error) => {
|
|
this.error(error.response.data.message);
|
|
})
|
|
.finally(() => {
|
|
this.isLoading = false;
|
|
});
|
|
},
|
|
},
|
|
watch: {
|
|
noCuenta() {
|
|
if (this.searched === false) {
|
|
this.noCuenta = Number(this.noCuenta) < 0 ? "" : this.noCuenta;
|
|
this.noCuenta = this.esNumero(this.noCuenta);
|
|
this.noCuenta = this.maxLength(this.noCuenta, 9);
|
|
} else {
|
|
this.noCuenta = "";
|
|
this.searched = false;
|
|
this.reset();
|
|
}
|
|
},
|
|
programaSelectedID() {
|
|
if (this.programaSelectedID) {
|
|
for (let i = 0; i < this.programas.length; i++) {
|
|
if (this.programas[i].idPrograma === this.programaSelectedID) {
|
|
this.programaSelected.idPrograma = this.programas[i].idPrograma;
|
|
this.programaSelected.programa = this.programas[i].programa;
|
|
this.programaSelected.institucion = this.programas[i].institucion;
|
|
this.programaSelected.dependencia = this.programas[i].dependencia;
|
|
this.programaSelected.clavePrograma = this.programas[
|
|
i
|
|
].clavePrograma;
|
|
this.programaSelected.acatlan = this.programas[i].acatlan;
|
|
this.programaSelected.activo = this.programas[i].activo;
|
|
}
|
|
}
|
|
} else {
|
|
this.programaSelected.institucion = "";
|
|
this.programaSelected.dependencia = "";
|
|
this.programaSelected.programa = "";
|
|
this.programaSelected.clavePrograma = "";
|
|
this.programaSelected.acatlan = "";
|
|
this.programaSelected.activo = "";
|
|
//this.programaSelected.idUsuario = "";
|
|
this.programaSelected.programaInterno = "";
|
|
this.programaSelected.profesor = "";
|
|
}
|
|
},
|
|
file() {
|
|
if (this.file.size >= 20000000) {
|
|
this.$buefy.dialog.alert({
|
|
title: "Error",
|
|
message: "El tamaño del archivo exede los 20MB",
|
|
type: "is-danger",
|
|
hasIcon: true,
|
|
icon: "alert-circle",
|
|
iconPack: "mdi",
|
|
ariaRole: "alertdialog",
|
|
ariaModal: true,
|
|
});
|
|
this.file = [];
|
|
}
|
|
},
|
|
"alumno.inicio"() {
|
|
this.alumno.fin = [];
|
|
},
|
|
},
|
|
mounted() {
|
|
axios
|
|
.get(
|
|
`${
|
|
process.env.api
|
|
}/programa/programas_responsable?idUsuario=${localStorage.getItem(
|
|
"idUsuario"
|
|
)}`,
|
|
this.token
|
|
)
|
|
.then((resp) => {
|
|
this.programas = resp.data;
|
|
})
|
|
.catch((error) => {
|
|
this.error(error.response.data.message);
|
|
});
|
|
|
|
this.minDate.setDate(this.minDate.getDate() - 16);
|
|
},
|
|
computed: {
|
|
minDate2() {
|
|
const min = new Date(this.alumno.inicio);
|
|
return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate());
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.titleAnadir,
|
|
pre {
|
|
margin: 4rem 0 0rem 0;
|
|
}
|
|
.derecha {
|
|
text-align: center;
|
|
}
|
|
.file-cta {
|
|
background-color: #167df0 !important;
|
|
}
|
|
.disabled {
|
|
cursor: help !important;
|
|
pointer-events: all !important;
|
|
}
|
|
.columns {
|
|
margin: 0;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.derecha {
|
|
padding-right: 120px;
|
|
}
|
|
}
|
|
</style>
|