servicio_social_front/components/admin/Reporte.vue

<template>
  <div>
    <h4 class="is-size-4 mb-2">Descargar reporte</h4>

    <b-field label="Seleccione una fecha de inicio:">
      <b-datepicker
        icon="calendar-today"
        placeholder="Seleccione una fecha de inicio"
        :min-date="minDate"
        :max-date="maxDate"
        v-model="selectedInicio"
        trap-focus
      />
    </b-field>

    <b-field label="Seleccione una fecha de fin:">
      <b-datepicker
        placeholder="Seleccione una fecha de fin"
        icon="calendar-today"
        :min-date="minDate"
        :max-date="maxDate"
        v-model="selectedFin"
        trap-focus
      />
    </b-field>

    <b-field class="pb-5 pt-3">
      <b-button type="is-info" @click="descargar()" :disabled="validarFechas()">
        Descargar Excel
      </b-button>
    </b-field>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'
import fileDownload from 'js-file-download'

export default {
  props: {
    admin: { type: Object, required: true },
    imprimirError: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      selectedFin: [],
      selectedInicio: [],
      maxDate: new Date(),
      minDate: new Date('January 1, 2020'),
    }
  },
  methods: {
    validarFechas() {
      const fechaInicio = moment(new Date(this.selectedInicio))
      const fechaFin = moment(new Date(this.selectedFin))

      if (!fechaInicio.isValid() || !fechaFin.isValid()) return true
      return false
    },
    descargar() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/servicio/reporte?inicio=${this.selectedInicio}&fin=${this.selectedFin}`,
          this.admin.token
        )
        .then((res) => {
          fileDownload(res.data, `reporte.csv`)
          this.selectedInicio = []
          this.selectedFin = []
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
  },
}
</script>

<style scoped></style>