xXpuma99Xx
148 lines
3.6 KiB
Vue
148 lines
3.6 KiB
Vue
<template>
|
|
<div>
|
|
<h3 class="title">Tabla de responsables</h3>
|
|
|
|
<div class="columns">
|
|
<b-field class="column" label="Correo Electrónico">
|
|
<b-input
|
|
type="text"
|
|
placeholder="Correo"
|
|
icon="mail"
|
|
@keyup.enter.native="obtenerResponsables()"
|
|
v-model="search.correo"
|
|
rounded
|
|
/>
|
|
</b-field>
|
|
|
|
<b-field class="column" label="Nombre">
|
|
<b-input
|
|
type="name"
|
|
placeholder="Nombre"
|
|
icon="account"
|
|
@keyup.enter.native="obtenerResponsables()"
|
|
v-model="search.nombre"
|
|
rounded
|
|
/>
|
|
</b-field>
|
|
|
|
<b-field class="column is-align-self-center">
|
|
<b-button
|
|
type="is-info"
|
|
@click="obtenerResponsables()"
|
|
expanded
|
|
rounded
|
|
>
|
|
Buscar
|
|
</b-button>
|
|
</b-field>
|
|
</div>
|
|
|
|
<b-table
|
|
:data="data"
|
|
:total="total"
|
|
:current-page="page"
|
|
:per-page="perPage"
|
|
:loading="isLoading"
|
|
:selected.sync="responsableSelected"
|
|
:row-class="(row, index) => 'pointer'"
|
|
@page-change="onPageChange"
|
|
hoverable
|
|
striped
|
|
paginated
|
|
backend-pagination
|
|
>
|
|
<b-table-column
|
|
field="correo"
|
|
label="Correo Electrónico"
|
|
v-slot="props"
|
|
centered
|
|
>
|
|
<span>{{ props.row.usuario }}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column field="nombre" label="Nombre" v-slot="props" centered>
|
|
<span>{{ props.row.nombre }} </span>
|
|
</b-table-column>
|
|
|
|
<b-table-column field="estado" label="Estado" v-slot="props" centered>
|
|
<span class="tag" :class="style(props.row.activo)">
|
|
{{ props.row.activo ? 'Activo' : 'Desactivado' }}
|
|
</span>
|
|
</b-table-column>
|
|
</b-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
props: {
|
|
admin: { type: Object, required: true },
|
|
imprimirError: { type: Function, required: true },
|
|
},
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
page: 1,
|
|
perPage: 25,
|
|
total: 0,
|
|
data: [],
|
|
responsableSelected: {},
|
|
search: {},
|
|
searchAnterior: {},
|
|
}
|
|
},
|
|
methods: {
|
|
style(activo) {
|
|
if (activo) return 'is-success'
|
|
else return 'is-danger'
|
|
},
|
|
onPageChange(page) {
|
|
this.page = page
|
|
this.obtenerResponsables()
|
|
},
|
|
obtenerResponsables() {
|
|
let data = ''
|
|
|
|
this.isLoading = true
|
|
if (
|
|
this.search.correo != this.searchAnterior.correo ||
|
|
this.search.nombre != this.searchAnterior.nombre
|
|
) {
|
|
this.page = 1
|
|
this.searchAnterior.correo = this.search.correo
|
|
this.searchAnterior.nombre = this.search.nombre
|
|
}
|
|
if (this.search.nombre) data += `&nombre=${this.search.nombre}`
|
|
if (this.search.correo) data = `&correo=${this.search.correo}`
|
|
axios
|
|
.get(
|
|
`${process.env.api}/usuario/responsables?pagina=${this.page}${data}`,
|
|
this.admin.token
|
|
)
|
|
.then((res) => {
|
|
this.data = res.data.responsables
|
|
this.total = res.data.count
|
|
this.isLoading = false
|
|
})
|
|
.catch((err) => {
|
|
this.isLoading = false
|
|
this.imprimirError(err.response.data)
|
|
})
|
|
},
|
|
},
|
|
watch: {
|
|
responsableSelected() {
|
|
localStorage.setItem('idResponsable', this.responsableSelected.idUsuario)
|
|
this.$router.push(`/admin/responsables/responsable`)
|
|
},
|
|
},
|
|
created() {
|
|
if (this.admin.idTipoUsuario === 1) this.obtenerResponsables()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|