Lemuel Marquez
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 del Alumno">
|
|
<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: 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>
|