servicio_social_front/components/responsable/inputTable.vue

<template>
  <div class="container">
    <div class="columns">

        <div class="column is-3 mb-0">
          <b-field >
            <b-input
                placeholder="No.Cuenta"
                icon="school"
                rounded
                v-model="numeroCuenta"
                maxlength="9"
                ></b-input>
          </b-field>
        </div>

        <div class="column is-3 mb-4 pb-4">
          <b-field>
            <b-input
            type="name"
            placeholder="Nombre"
            icon="account"
            rounded
            v-model="nombre"
            ></b-input>
          </b-field>
        </div>

        <div class="column is-3 mb-4 pb-4 " >
          <b-field>
            <b-select placeholder="Status" icon="information" expanded rounded v-model="idStatus">
              <optgroup label="Status">
                <option value=1>Pre-registro</option>
                <option value=2>Registro</option>
                <option value=3>Registro Validado</option>
                <option value=4>Pre-Término</option>
                <option value=5>Término</option>
                <option value=6>Liberación</option>
                <option value=7>Carta Aceptacion Rechazada</option>
                <option value=8>Carta Termino Rechazada</option>
                <option value=9>Informe Global Rechazado</option>
                <option value=10>Cancelado</option>
              </optgroup>
            </b-select>
          </b-field>
        </div>

        <div class="buttons section pt-3 pl-5">
        <b-button type="is-info" @click="obtenerDatos()">
            Buscar
        </b-button>
      </div>

    </div>

    <div>
      <BotonesCarga v-if="id == 1"/>
    </div>

    <div class="columns">
      <section class="column is-12">
          <b-table
          :data="data"
          :loading="loading"

          hoverable
          striped
          paginated
          backend-pagination
          :total="total"
          :per-page="perPage"
          @page-change="onPageChange"
          >
              <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
                  <span @click="servicios(props.row.idServicio)">{{ props.row.nombre}}</span>
              </b-table-column>
              <b-table-column field="numeroCuenta" label="Número de Cuenta" v-slot="props" centered>
                  <span @click="servicios(props.row.idServicio)">{{ props.row.numeroCuenta}}</span>
              </b-table-column>
              <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
                  <span @click="servicios(props.row.idServicio)">{{ props.row.carrera}}</span>
              </b-table-column>
              <b-table-column field="fechaInicio" truncate=10 label="Fecha Inicio" v-slot="props" centered>
                  <span @click="servicios(props.row.idServicio)">{{ props.row.fechaInicio}}</span>
              </b-table-column>
              <b-table-column field="fechaFin" label="Fecha Fin" v-slot="props" centered>
                  <span @click="servicios(props.row.idServicio)">{{ props.row.fechaFin}}</span>
              </b-table-column>
              <b-table-column field="status" label="Status" v-slot="props" centered>
                 <span @click="servicios(props.row.idServicio)" class="tag" :class="types(props.row.status)">{{ props.row.status}}</span>
              </b-table-column>

              <b-table-column field="cartaTermino" label="Carta Término" v-slot="props" centered v-if="id == 2">
                  <div v-if="props.row.idStatus >= 4">
                    <span
                    v-if="props.row.cartaTermino === 1"
                    >
                        <b-icon :icon="iconoCarta(props.row.cartaTermino)"
                        class="tag is-success"></b-icon>
                    </span>

                    <b-button
                    v-if="props.row.cartaTermino === null"
                    size="is-small"
                    :class="botonCarta(props.row.cartaTermino)"
                    :icon="iconoCarta(props.row.cartaTermino)">
                        Carta Término
                    </b-button>
                  </div>
              </b-table-column>

              <b-table-column field="cuestionario" label="Cuestionario" v-slot="props" centered v-if="id == 2">
                  <div v-if="props.row.status === 'Pre-Termino'">
                    <span
                    v-if="props.row.cuestionario === 1"
                    >
                        <b-icon :icon="iconoCuestionario(props.row.cuestionario)"
                        class="tag is-success"></b-icon>
                    </span>

                    <b-button
                    v-if="props.row.cuestionario === null"
                    size="is-small"
                    :class="botonCuestionario(props.row.cuestionario)"
                    :icon="iconoCuestionario(props.row.cuestionario)">
                        Cuestionario
                    </b-button>
                  </div>
              </b-table-column>

          </b-table>
      </section>
    </div>
  </div>
</template>

<script>
import BotonesCarga from './botonesCarga.vue'
import axios from 'axios'

export default {
  components: {
    BotonesCarga
  },
  data () {
    return {
      data: [],
      total: '',
      loading: true,
      page: 1,
      perPage: 25,
      numeroCuenta: '',
      nombre: '',
      idStatus: 1
    }
  },
  props: {
    id: {
      type: Number,
      required: false
    }
  },
  methods: {
    onPageChange (page) {
      this.page = page
      this.obtenerDatos()
      console.log(this.page)
    },
    types (status) {
      if (status === 'Pre-Registro') {
        return 'is-dark'
      } else if (status === 'Pre-Registro') {
        return 'is-warning'
      } else if (status === 'Registro') {
        return 'is-info'
      } else if (status === 'Registro Validado') {
        return 'is-succes'
      } else if (status === 'Pre-Termino') {
        return 'is-light'
      } else if (status === 'Termino') {
        return 'is-success'
      } else if (status === 'Liberación') {
        return 'is-link'
      } else if (status === 'Carta Aceptacion Rechazada') {
        return 'is-danger'
      } else if (status === 'Carta Termino Rechazada') {
        return 'is-danger'
      } else if (status === 'Informe Global Rechazdo') {
        return 'is-danger'
      } else if (status === 'Cancelado') {
        return 'is-danger'
      }
    },
    botonCarta (cartaTermino) {
      if (cartaTermino === 1) {
        return 'is-success'
      } else {
        return 'is-danger'
      }
    },
    botonCuestionario (cuestionario) {
      if (cuestionario === 1) {
        return 'is-success'
      } else {
        return 'is-danger'
      }
    },
    iconoCarta (cartaTermino) {
      if (cartaTermino === 1) {
        return 'check'
      } else {
        return 'close'
      }
    },
    iconoCuestionario (cuestionario) {
      if (cuestionario === 1) {
        return 'check'
      } else {
        return 'close'
      }
    },
    obtenerDatos () {
      this.loading = true
      this.data = []

      axios.get(`${process.env.api}/servicio/servicios_responsable?idUsuario=2&pagina=${this.page}&idStatus=${this.idStatus}&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`)
        .then(res => {
          const servicios = res.data.servicios

          if (servicios.length !== 0) {
            for (let i = 0; i < servicios.length; i++) {
              this.data.push({
                nombre: servicios[i].Usuario.nombre,
                numeroCuenta: servicios[i].Usuario.usuario,
                carrera: servicios[i].Carrera.carrera,
                fechaInicio: servicios[i].fechaInicio,
                fechaFin: servicios[i].fechaFin,
                status: servicios[i].Status.status,
                idStatus: servicios[i].Status.idStatus,
                cuestionario: servicios[i].idCuestionarioPrograma,
                cartaTermino: servicios[i].cartaTermino,
                idServicio: servicios[i].idServicio
              })
            }
          }
          let currentTotal = servicios.length
          let contador

          for (let i = 0; i < (res.data.registros / 25) + 1; i++) {
            contador = i
          }
          currentTotal = this.perPage * contador
          this.total = currentTotal
          this.loading = false
        })
        .catch((err) => {
          console.log(err.response.data.message)
        })
    },
    servicios (idServicio) {
      window.localStorage.setItem('idServicio', idServicio)
      this.$router.push('/admin/servicio')
    }
  },
  created () {
    this.obtenerDatos()
  }
}
</script>

<style>
.input:focus{
  border:#1b3d70;
  box-shadow: 0 0 8px 0 #1b3d70;
}
.select select:focus{
  border-color: #1b3d70;
  box-shadow: 0 0 8px 0 #1b3d70;
}
.select:not(.is-multiple):not(.is-loading)::after{
  border-color: #1b3d70;
}
.pagination-link.is-current {
  background-color: #1b3d70;
  border-color: #1b3d70;
}
.b-table{
  cursor: pointer;
}
</style>