servicio_social_front/components/admin/inputTableA.vue

<template>
  <div>
    <h3 class="title">Servicios Sociales</h3>

    <div class="columns">
      <b-field class="column" label="Número de Cuenta">
        <b-input
          type="text"
          placeholder="No.Cuenta"
          icon="school"
          maxlength="9"
          v-model="busqueda.numeroCuenta"
          @keyup.enter.native="obtenerServicios()"
          rounded
        />
      </b-field>

      <b-field class="column" label="Nombre">
        <b-input
          type="name"
          placeholder="Nombre"
          icon="account"
          v-model="busqueda.nombre"
          @keyup.enter.native="obtenerServicios()"
          rounded
        />
      </b-field>

      <b-field class="column" label="Status">
        <b-select icon="information" v-model="busqueda.idStatus" rounded>
          <option value="">Status</option>
          <option
            v-for="(s, i) in status"
            :key="i"
            :value="s.idStatus"
            v-show="i < 10"
          >
            {{ s.status }}
          </option>
        </b-select>
      </b-field>

      <div class="column is-align-self-center">
        <b-button type="is-info" @click="obtenerServicios()" expanded rounded>
          Buscar
        </b-button>
      </div>
    </div>

    <TablaServiciosSociales
      :isLoading="isLoading"
      :data="data"
      :page="page"
      :onPageChange="onPageChange"
      :total="total"
      :idTipoUsuario="admin.idTipoUsuario"
      :path="'/admin/servicio'"
    />
  </div>
</template>

<script>
import axios from 'axios'
import TablaServiciosSociales from '@/components/TablaServiciosSociales'

export default {
  components: { TablaServiciosSociales },
  data() {
    return {
      servicioSeleccionado: {},
      status: [],
      data: [],
      page: 1,
      perPage: 25,
      total: 0,
      isLoading: false,
      busqueda: {
        idStatus: '',
      },
      busquedaAnterior: {},
    }
  },
  props: {
    admin: { type: Object, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
  },
  methods: {
    onPageChange(page) {
      this.page = page
      this.obtenerServicios()
    },
    obtenerServicios() {
      let data = ''

      this.isLoading = true
      if (
        this.busqueda.numeroCuenta != this.busquedaAnterior.numeroCuenta ||
        this.busqueda.nombre != this.busquedaAnterior.nombre ||
        this.busqueda.idStatus != this.busquedaAnterior.idStatus
      ) {
        this.page = 1
        this.busquedaAnterior.numeroCuenta = this.busqueda.numeroCuenta
        this.busquedaAnterior.nombre = this.busqueda.nombre
        this.busquedaAnterior.idStatus = this.busqueda.idStatus
      }
      if (this.busqueda.idStatus) data += `&idStatus=${this.busqueda.idStatus}`
      if (this.busqueda.nombre) data += `&nombre=${this.busqueda.nombre}`
      if (this.busqueda.numeroCuenta)
        data += `&numeroCuenta=${this.busqueda.numeroCuenta}`
      axios
        .get(
          `${process.env.api}/servicio/servicios_admin?&pagina=${this.page}${data}`,
          this.admin.token
        )
        .then((res) => {
          this.data = res.data.serviciosAdmin
          this.total = res.data.count
          this.isLoading = false
        })
        .catch((err) => {
          this.isLoading = false
          this.imprimirError(err.response.data)
        })
    },
    obtenerCatalogoStatus() {
      axios
        .get(`${process.env.api}/status`, this.admin.token)
        .then((res) => {
          this.status = res.data
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
        })
    },
  },
  watch: {
    servicioSeleccionado() {
      localStorage.setItem('idServicio', this.servicioSeleccionado.idServicio)
      this.$router.push(`/admin/servicio`)
    },
  },
  created() {
    if (this.admin.idTipoUsuario === 1) {
      this.obtenerCatalogoStatus()
      this.obtenerServicios()
    }
  },
}
</script>

<style></style>