261 lines
7.8 KiB
Vue
261 lines
7.8 KiB
Vue
<template>
|
|
<div class="container">
|
|
<b-button class="is-info" @click="regresar()">Regresar</b-button>
|
|
<br><br>
|
|
<p class="is-size-2">Editar información del alumno</p>
|
|
<br>
|
|
<div class="formulario">
|
|
<b-field label="Correo eletrónico alumno">
|
|
<b-input
|
|
type="email"
|
|
v-model="nuevo.correo"
|
|
:placeholder="viejo.correo">
|
|
</b-input>
|
|
</b-field>
|
|
<b-field label="Fecha de inicio">
|
|
<b-datepicker
|
|
:placeholder="viejo.fechaInicio"
|
|
icon="calendar-today"
|
|
v-model="fechaInicio[0]"
|
|
:min-date="minDate1">
|
|
</b-datepicker>
|
|
</b-field>
|
|
<transition name="fade">
|
|
<b-field label="Fecha de fin" v-if="fechaInicio[0]">
|
|
<b-datepicker
|
|
:placeholder="viejo.fechaInicio"
|
|
v-model="fechaFin[0]"
|
|
:min-date="minDate2"
|
|
icon="calendar-today">
|
|
</b-datepicker>
|
|
</b-field>
|
|
</transition>
|
|
<b-field label="Dirección">
|
|
<b-input type="text"
|
|
v-model="nuevo.direccion"
|
|
:placeholder="viejo.direccion">
|
|
</b-input>
|
|
</b-field>
|
|
<b-field label="Teléfono">
|
|
<b-input
|
|
type="number"
|
|
:placeholder="viejo.telefono"
|
|
maxlength="10"></b-input>
|
|
</b-field>
|
|
<b-field label="Fecha de nacimiento">
|
|
<b-datepicker
|
|
:placeholder="viejo.fechaNacimiento"
|
|
v-model="fechaNacimiento[0]"
|
|
icon="calendar-today">
|
|
</b-datepicker>
|
|
</b-field>
|
|
<b-field label="ID status">
|
|
<b-input type="number" :placeholder="idStatus"></b-input>
|
|
</b-field>
|
|
<p class="is-size-5">Carta de aceptación</p>
|
|
<br>
|
|
<b-field>
|
|
<b-upload v-model="nuevo.cartaAceptacion" type="is-black" v-on:input="validarExt(1)" accept="application/pdf" drag-drop expanded>
|
|
<section class="section">
|
|
<div class="content has-text-centered">
|
|
<p>
|
|
<b-icon icon="upload" size="is-large"></b-icon>
|
|
</p>
|
|
<p>{{ nuevo.cartaAceptacion.name|| "Arrastra aquí tu archivo o da click para buscar"}}</p>
|
|
</div>
|
|
</section>
|
|
</b-upload>
|
|
</b-field>
|
|
<p class="is-size-5">Carta de término</p>
|
|
<br>
|
|
<b-field>
|
|
<b-upload v-model="nuevo.cartaTermino" type="is-black" v-on:input="validarExt(2)" accept="application/pdf" drag-drop expanded>
|
|
<section class="section">
|
|
<div class="content has-text-centered">
|
|
<p>
|
|
<b-icon icon="upload" size="is-large"></b-icon>
|
|
</p>
|
|
<p>{{ nuevo.cartaTermino.name|| "Arrastra aquí tu archivo o da click para buscar"}}</p>
|
|
</div>
|
|
</section>
|
|
</b-upload>
|
|
</b-field>
|
|
<p class="is-size-5">Informe global</p>
|
|
<br>
|
|
<b-field>
|
|
<b-upload v-model="nuevo.informeGlobal" type="is-black" v-on:input="validarExt(3)" accept="application/pdf" drag-drop expanded>
|
|
<section class="section">
|
|
<div class="content has-text-centered">
|
|
<p>
|
|
<b-icon icon="upload" size="is-large"></b-icon>
|
|
</p>
|
|
<p>{{ nuevo.informeGlobal.name|| "Arrastra aquí tu archivo o da click para buscar"}}</p>
|
|
</div>
|
|
</section>
|
|
</b-upload>
|
|
</b-field>
|
|
<br>
|
|
<b-button class="is-info" @click="regresar()">Regresar</b-button>
|
|
<b-button v-if="mostrar()" @click="actualizarDialog()" class="is-info">Actualizar Datos</b-button>
|
|
<b-button v-else disabled class="is-info">Actualizar Datos</b-button>
|
|
<b-loading :is-full-page="true" v-model="isLoading" :can-cancel="true"></b-loading>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
import moment from 'moment'
|
|
import validator from 'validator'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
viejo: {},
|
|
idStatus: localStorage.getItem('idServicio'),
|
|
nuevo: {
|
|
correo: '',
|
|
fechaInicioFinal: '',
|
|
fechaFinFinal: null,
|
|
direccion: null,
|
|
telefono: null,
|
|
fechaNacimientoFinal: null,
|
|
idStatus: null,
|
|
cartaAceptacion: {},
|
|
cartaTermino: {},
|
|
informeGlobal: {}
|
|
},
|
|
fechaNacimiento: [],
|
|
fechaInicio: [],
|
|
fechaFin: [],
|
|
minDate1: new Date('2020-01-01'),
|
|
isLoading: false
|
|
}
|
|
},
|
|
methods: {
|
|
obtenerRegistro () {
|
|
this.isLoading = true
|
|
return axios
|
|
.get(
|
|
`${process.env.api}/servicio/admin?idServicio=${this.idStatus}`//,
|
|
// this.token
|
|
)
|
|
.then(res => {
|
|
this.isLoading = false
|
|
this.viejo = res.data
|
|
console.log(this.viejo)
|
|
})
|
|
.catch(err => {
|
|
this.isLoading = false
|
|
console.log(err.response.data.message)
|
|
})
|
|
},
|
|
dangerToast () {
|
|
this.$buefy.toast.open({
|
|
message: 'Asegurate de ingresar un PDF',
|
|
type: 'is-danger'
|
|
})
|
|
},
|
|
mostrar () {
|
|
if (
|
|
validator.isEmail(this.nuevo.correo) ||
|
|
this.nuevo.direccion ||
|
|
this.nuevo.telefono ||
|
|
this.nuevo.fechaNacimientoFinal ||
|
|
this.nuevo.fechaInicioFinal ||
|
|
this.nuevo.fechaFinFinal ||
|
|
this.nuevo.cartaTermino.name ||
|
|
this.nuevo.cartaAceptacion.name ||
|
|
this.nuevo.informeGlobal.name ||
|
|
this.nuevo.idStatus
|
|
) {
|
|
if (this.nuevo.correo) {
|
|
if (validator.isEmail(this.nuevo.correo)) {
|
|
return true
|
|
} else {
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
}
|
|
},
|
|
validarExt (a) {
|
|
const extPermitidas = /(.pdf)$/i
|
|
switch (a) {
|
|
case 1: if (!extPermitidas.exec(this.nuevo.cartaAceptacion.name)) {
|
|
this.dangerToast()
|
|
this.nuevo.cartaAceptacion = {}
|
|
}
|
|
break
|
|
case 2: if (!extPermitidas.exec(this.nuevo.cartaTermino.name)) {
|
|
this.dangerToast()
|
|
this.nuevo.cartaTermino = {}
|
|
}
|
|
break
|
|
case 3: if (!extPermitidas.exec(this.nuevo.informeGlobal.name)) {
|
|
this.dangerToast()
|
|
this.nuevo.informeGlobal = {}
|
|
}
|
|
break
|
|
}
|
|
},
|
|
regresar () {
|
|
this.$router.push('/admin/servicio')
|
|
},
|
|
actualizar () {
|
|
this.isLoading = true
|
|
// let data = {}
|
|
const formData = new FormData()
|
|
if (this.cartaAceptacion) { formData.append('cartaAceptacion', this.cartaAceptacion) }
|
|
if (this.cartaTermino) { formData.append('cartaTermino', this.cartaTermino) }
|
|
if (this.informeGlobal) { formData.append('informeGlobal', this.informeGlobal) }
|
|
},
|
|
actualizarDialog () {
|
|
this.$buefy.dialog.confirm({
|
|
title: 'Actualizar datos',
|
|
message: '¿Seguro(a) que quiere actualizar estos datos?',
|
|
confirmText: 'Confirmar',
|
|
cancelText: 'Cancelar',
|
|
type: 'is-success',
|
|
hasIcon: true,
|
|
onConfirm: () => this.actualizar()
|
|
})
|
|
},
|
|
fecha (date) {
|
|
const fecha = moment(date.substr(0, 10))
|
|
return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`
|
|
}
|
|
},
|
|
computed: {
|
|
minDate2 () {
|
|
const min = new Date(this.fechaInicio)
|
|
return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate())
|
|
}
|
|
},
|
|
watch: {
|
|
fechaInicio: function () {
|
|
this.nuevo.fechaInicioFinal = moment(this.fechaInicio[0])
|
|
this.fechaFin[0] = null
|
|
},
|
|
fechaFin: function () {
|
|
this.nuevo.fechaFinFinal = moment(this.fechaFin[0])
|
|
},
|
|
fechaNacimiento: function () {
|
|
this.nuevo.fechaNacimientoFinal = moment(this.fechaNacimiento[0])
|
|
}
|
|
},
|
|
created () {
|
|
this.obtenerRegistro()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity .5s
|
|
}
|
|
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
|
opacity: 0
|
|
}
|
|
</style>
|