pcpuma_unam_operador/components/tablaBuscador/TablaBuscadorOperador.vue
2022-07-29 10:53:56 -05:00

138 lines
3.8 KiB
Vue

<template>
<div>
<h3 class="is-size-4 mb-3">Todos los operadores</h3>
<div class="columns mb-5 is-align-items-flex-end">
<!-- <SelectInstitucion
columnSize="is-3"
:deshabilitarOptVacia="false"
:institucionPadre="institucion"
@institucion-seleccionada="
(nuevaInstitucion) => (institucion = nuevaInstitucion)
"
v-if="admin.tipoUsuario.id_tipo_usuario === 2"
/> -->
<b-field class="column is-3 mb-0 pb-0" label="Usuario operador">
<b-input
icon="account"
placeholder="Usuario operador"
type="text"
@keyup.enter.native="obtenerOperadores()"
v-model="operador"
rounded
/>
</b-field>
<BotonBuscar
columnSize="is-3"
:buscar="obtenerOperadores"
:disabled="
institucion.id_institucion ||
admin.institucion.id_institucion ||
operador
? false
: true
"
/>
</div>
<TablaOperadores
:operadores="operadores"
:isLoadingTable="isLoadingTable"
:obtenerOperadores="obtenerOperadores"
:onPageChange="onPageChange"
:total="total"
:page="page"
columnaActivo
columnaInstitucion
/>
</div>
</template>
<script>
import axios from 'axios'
import BotonBuscar from '@/components/botones/BotonBuscar'
import SelectInstitucion from '@/components/selects/SelectInstitucion'
import TablaOperadores from '@/components/tablas/TablaOperadores'
export default {
components: { BotonBuscar, SelectInstitucion, TablaOperadores },
props: {
actualizarTabla: { type: Boolean, required: true },
updateActualizarTabla: { type: Function, required: true },
admin: { type: Object, required: true },
},
data() {
return {
operadores: [],
isLoadingTable: false,
page: 1,
total: 0,
institucion: {},
lastSearch: {},
operador: '',
}
},
methods: {
obtenerOperadores() {
let data = ''
this.isLoadingTable = true
if (
(this.admin.institucion.id_institucion &&
this.admin.institucion.id_institucion !=
this.lastSearch.idInstitucion) ||
(this.institucion.id_institucion &&
this.institucion.id_institucion != this.lastSearch.idInstitucion) ||
this.operador != this.lastSearch.operador
) {
this.page = 1
if (this.admin.institucion.id_institucion)
this.lastSearch.idInstitucion = this.admin.institucion.id_institucion
if (this.institucion.id_institucion)
this.lastSearch.idInstitucion = this.institucion.id_institucion
this.lastSearch.operador = this.operador
}
if (this.admin.institucion.id_institucion)
data += `&id_institucion=${this.admin.institucion.id_institucion}`
else if (this.institucion.id_institucion)
data += `&id_institucion=${this.institucion.id_institucion}`
if (this.operador) data += `&operador=${this.operador}`
axios
.get(
`${process.env.api}/operador/operadores?pagina=${this.page}&id_tipo_usuario=4${data}`,
this.$getToken.token()
)
.then((res) => {
this.operadores = res.data[0]
this.total = res.data[1]
this.isLoadingTable = false
})
.catch((err) => {
this.isLoadingTable = false
this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
})
},
onPageChange(page) {
this.page = page
this.obtenerOperadores()
},
updateInstitucion(institucion) {
this.institucion = institucion
},
},
watch: {
actualizarTabla() {
if (this.actualizarTabla) {
this.obtenerOperadores()
this.updateActualizarTabla(false)
}
},
},
created() {
this.obtenerOperadores()
},
}
</script>