151 lines
3.8 KiB
Vue
151 lines
3.8 KiB
Vue
<template>
|
|
<section class="container full-h">
|
|
<div class="my-3 has-text-centered">
|
|
<p class="is-size-2">Reportes administrador</p>
|
|
</div>
|
|
<p class="is-size-4 my-3">Subir base de datos de los profesores:</p>
|
|
<b-field>
|
|
<b-upload
|
|
accept=".csv"
|
|
@input="validarExt()"
|
|
v-model="csv"
|
|
drag-drop
|
|
expanded
|
|
>
|
|
<div class="section has-text-centered m-3">
|
|
<b-icon icon="upload" size="is-large" class="mb-2" />
|
|
|
|
<p class="is-size-5">
|
|
{{
|
|
csv.name || 'Arrastra aquí tu archivo o da click aquí para buscar'
|
|
}}
|
|
</p>
|
|
|
|
<p class="is-size-6">Tamaño máximo 20MB</p>
|
|
</div>
|
|
</b-upload>
|
|
</b-field>
|
|
<div class="has-text-centered mb-4">
|
|
<b-button type="is-info" :disabled="!csv.name" @click="confirmarEnviar()">
|
|
Enviar archivo
|
|
</b-button>
|
|
</div>
|
|
<p class="is-size-4 my-3">Descargar base de datos invitados:</p>
|
|
<div class="boton has-text-centered">
|
|
<b-button class="is-info">
|
|
<JsonCSV
|
|
class="btn btn-default"
|
|
:data="dataExport"
|
|
name="datosInvitados.csv"
|
|
>
|
|
Descargar base de datos invitados
|
|
</JsonCSV>
|
|
</b-button>
|
|
</div>
|
|
|
|
<b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import JsonCSV from 'vue-json-csv'
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
components: {
|
|
JsonCSV,
|
|
},
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
dataExport: [],
|
|
csv: {},
|
|
}
|
|
},
|
|
methods: {
|
|
confirmarEnviar() {
|
|
this.$swal({
|
|
title: '¿Estás seguro de querer enviar este archivo?',
|
|
type: 'question',
|
|
timer: 9000,
|
|
showCancelButton: true,
|
|
cancelButtonColor: '#d33',
|
|
confirmButtonText: 'Aceptar',
|
|
confirmButtonColor: '#1e3c70',
|
|
}).then((res) => {
|
|
if (res.value) {
|
|
this.enviar()
|
|
}
|
|
})
|
|
},
|
|
enviar() {
|
|
const formData = new FormData()
|
|
|
|
this.isLoading = true
|
|
formData.append('file', this.csv)
|
|
|
|
axios
|
|
.post(`${process.env.api}/profesor/cargarDatos`, formData)
|
|
.then((res) => {
|
|
this.isLoading = false
|
|
this.csv = {}
|
|
this.successUpload()
|
|
}).catch(err => {
|
|
this.isLoading = false
|
|
this.csv = {}
|
|
console.log(err)
|
|
this.errorMessage()
|
|
})
|
|
},
|
|
successUpload() {
|
|
this.$swal({
|
|
title: 'Se ha subido el archivo con éxito.',
|
|
type: 'success',
|
|
timer: 5000,
|
|
confirmButtonText: 'Aceptar',
|
|
confirmButtonColor: '#1e3c70',
|
|
})
|
|
},
|
|
errorMessage(){
|
|
this.$swal({
|
|
title: 'Ha ocurrido un error al subir el archivo.',
|
|
type: 'error',
|
|
timer: 5000,
|
|
confirmButtonText: 'Aceptar',
|
|
confirmButtonColor: '#1e3c70',
|
|
})
|
|
},
|
|
isDataExport() {
|
|
if (this.dataExport.length > 0) return true
|
|
return false
|
|
},
|
|
validarExt() {
|
|
const extPermitidas = /(.csv)$/i
|
|
|
|
if (!extPermitidas.exec(this.csv.name)) {
|
|
this.imprimirError({ message: 'Asegurate de ingresar un archivo .CSV' })
|
|
this.csv = {}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
this.isLoading = true
|
|
axios.get(`${process.env.api}/invitado/get`).then((res) => {
|
|
this.isLoading = false
|
|
if (res) {
|
|
res.data.forEach((item, index) => {
|
|
this.dataExport[index] = {}
|
|
this.dataExport[index].idInvitado = item.idInvitado
|
|
this.dataExport[index].nombre = item.nombreCompleto
|
|
this.dataExport[index].edad = item.edad
|
|
this.dataExport[index].nombreProfesor = item.Profesor.nombre
|
|
})
|
|
}
|
|
}).catch(err => {
|
|
this.isLoading = false
|
|
console.log(err.response.data.message)
|
|
})
|
|
},
|
|
layout: 'default',
|
|
}
|
|
</script> |