ecv.vue

ecv.vue

<template>
   <div>
      <q-page padding>
         <q-uploader ref="ecvUp" :url="url" extensions=".csv" auto-expand multiple @add="addedFiles" @uploaded="uploadedFile" :headers="{ Authorization: 'Bearer ' + $store.login.sessao.jwt, 'debug-token':'aaa'}"/>
         <q-table :loading="table.loading" title="ECV" :data="table.data" :columns="table.columns" @request="request" :pagination.sync="table.pagination" row-key="name"/>
      </q-page>
   </div>

</template>

<script>
  export default {
    name:    'ecv',
    mounted() {
      this.$store.titulo = 'Laudos'

      this.request({
        pagination: this.table.pagination,
        filter:     this.table.filter
      })
    },
    data() {
      return {
        url:   process.env.API_PREFIX + 'laudos/ecv',
        table: {
          filter:     '',
          loading:    false,
          columns:    [
            {
              name:     'id',
              required: true,
              label:    '#',
              align:    'left',
              field:    'id',
              sortable: true
            },
            {
              name:     'codigo',
              required: true,
              label:    'Cód',
              align:    'left',
              field:    'codigo',
              sortable: false
            },
            {
              name:     'patio',
              required: true,
              label:    'Pátio',
              align:    'left',
              field:    'patio',
              sortable: true
            },
            {
              name:     'data',
              required: true,
              label:    'Data',
              align:    'left',
              field:    'data',
              sortable: true
            },
          ],
          data:       [],
          pagination: {
            sortBy:      null, // String, column "name" property value
            descending:  false,
            page:        1,
            rowsPerPage: 5 // current rows per page being displayed
          }
        },
      }
    },
    methods: {
      request({pagination, filter}) {
        console.info(pagination, filter)  
        // we set QTable to "loading" state
        this.table.loading = true

        this.$axios
            .get(process.env.API_PREFIX + `laudos/ecv?page=${pagination.page}?sortBy=${pagination.sortBy}&descending=${pagination.descending}&filter=${filter}`)
            .then(({data}) => {
              // updating pagination to reflect in the UI
              this.pagination = pagination

              // we also set (or update) rowsNumber
              this.pagination.rowsNumber = data.meta.total

              this.pagination.rowsPerPage = data.meta.per_page

              // then we update the rows with the fetched ones
              this.table.data = data.data

              // finally we tell QTable to exit the "loading" state
              this.table.loading = false
            })
            .catch(error => {
              // there's an error... do SOMETHING

              // we tell QTable to exit the "loading" state
              this.loading = false
            })
      },
      addedFiles(files) {
        this.$refs.ecvUp.upload()
      },
      uploadedFile(file, xhr) {
        let resposta = JSON.parse(xhr.response)
        console.info(resposta)
      }
    }
  }
</script>

<style></style>