pcpuma_unam_operador/components/operador/usuarios/InputsMultas.vue

<template>
  <div>
    <div class="columns is-align-items-flex-end pl-0 pb-4">
      <b-field
        class="column mb-0 pb-0"
        field="carrito"
        label="Número de cuenta/trabajador"
      >
        <b-input
          placeholder="Número de cuenta/trabajador"
          v-model="usuario"
          rounded
          @keyup.enter.native="obtenerMultas"
        />
      </b-field>

      <b-field
        class="column is-4"
        label="Nombre de la Institución"
        v-if="operador.tipoUsuario.id_tipo_usuario === 2"
      >
        <b-select v-model="idInstitucion" expanded rounded>
          <option value="" disabled>Institución</option>
          <option
            v-for="institucion in instituciones"
            :value="institucion.id_institucion"
            :key="institucion.id_institucion"
          >
            {{ institucion.institucion }}
          </option>
        </b-select>
      </b-field>

      <b-button
        class="column mb-0"
        type="is-info"
        @click="obtenerMultas"
        rounded
        expanded
        >Buscar</b-button
      >
    </div>

    <TablaMultas
      :operador="operador"
      :multas="multas"
      :isLoadingTable="isLoadingTable"
      :page="page"
      :total="total"
      :onPageChange="onPageChange"
      :columnaUsuario="true"
    />
  </div>
</template>

<script>
import axios from 'axios'
import TablaMultas from './TablaMultas.vue'
export default {
  components: { TablaMultas },
  props: {
    operador: { type: Object, required: true },
  },
  data() {
    return {
      multas: [],
      instituciones: [],
      usuario: '',
      idCarrera: null,
      idInstitucion: null,
      nombre: '',
      isLoadingTable: false,
      page: 1,
      tipoUsuario: null,
      total: 0,
    }
  },
  methods: {
    onPageChange(page) {
      this.page = page
      this.obtenerMultas()
    },
    updateEquipo(valorObject) {
      this.equipo = valorObject
    },
    obtenerMultas() {
      let url = `${process.env.api}`
      url += `/multa?pagina=${this.page}`

      this.idInstitucion !== null
        ? (url += `&id_institucion=${this.idInstitucion}`)
        : null

      this.usuario !== '' ? (url += `&usuario=${this.usuario}`) : null

      this.isLoadingTable = true
      axios
        .get(`${url}`)
        .then(async (res) => {
          this.multas = res.data[0]
          this.total = res.data[1]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerInstituciones() {
      axios
        .get(`${process.env.api}/institucion`)
        .then(async (res) => {
          this.instituciones = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  created() {
    this.tipoUsuario = this.operador.tipoUsuario.id_tipo_usuario
    if (this.operador.tipoUsuario.id_tipo_usuario === 2)
      this.obtenerInstituciones()
    this.obtenerMultas()
  },
}
</script>