165 lines
4.1 KiB
Vue
165 lines
4.1 KiB
Vue
<template>
|
|
<div class="container mt-5">
|
|
<div class="columns">
|
|
<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-0">
|
|
<b-field>
|
|
<b-input
|
|
placeholder="Correo electrónico"
|
|
icon="school"
|
|
rounded
|
|
v-model="correo"
|
|
maxlength="9"
|
|
>
|
|
</b-input>
|
|
</b-field>
|
|
</div>
|
|
<div class="buttons section pt-3 pl-5">
|
|
<b-button type="is-info" @click="obtenerDatos(idStatus)">
|
|
Buscar
|
|
</b-button>
|
|
</div>
|
|
</div>
|
|
<div class="columns mb-5">
|
|
<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="verRegistro(props.row)">{{
|
|
props.row.nombre
|
|
}}</span>
|
|
</b-table-column>
|
|
<b-table-column
|
|
field="correo"
|
|
label="Correo electrónico"
|
|
v-slot="props"
|
|
centered
|
|
>
|
|
<span @click="verRegistro(props.row)">{{
|
|
props.row.usuario
|
|
}}</span>
|
|
</b-table-column>
|
|
</b-table>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
export default {
|
|
data() {
|
|
return {
|
|
idUsuario: "",
|
|
data: [],
|
|
total: "",
|
|
loading: false,
|
|
page: 1,
|
|
perPage: 25,
|
|
correo: "",
|
|
nombre: "",
|
|
idStatus: 1,
|
|
};
|
|
},
|
|
methods: {
|
|
onPageChange(page) {
|
|
this.page = page;
|
|
this.obtenerDatos();
|
|
console.log(this.page);
|
|
},
|
|
obtenerDatos(idStatus) {
|
|
this.loading = true;
|
|
this.data = [];
|
|
axios
|
|
.get(
|
|
`${process.env.api}/usuario/responsable?pagina=${this.page}&nombre=${this.nombre}&correo=${this.correo}`
|
|
)
|
|
.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].nombre,
|
|
usuario: servicios[i].usuario,
|
|
idUsuario: servicios[i].idUsuario,
|
|
});
|
|
}
|
|
}
|
|
let currentTotal = servicios.length;
|
|
let contador;
|
|
for (let i = 0; i < res.data.registros / this.perPage + 1; i++) {
|
|
contador = i;
|
|
}
|
|
currentTotal = this.perPage * contador;
|
|
this.total = currentTotal;
|
|
this.loading = false;
|
|
})
|
|
.catch((err) => {
|
|
console.log(err.response.data.message);
|
|
this.loading = false;
|
|
});
|
|
},
|
|
insertIdLocal() {
|
|
this.idUsuario = localStorage.getItem("idUsuario");
|
|
},
|
|
verRegistro(responsable) {
|
|
localStorage.setItem("correo", responsable.usuario);
|
|
localStorage.setItem("idResponsable", responsable.idUsuario);
|
|
localStorage.setItem("nombre", responsable.nombre);
|
|
this.$router.push({path: 'programa/infoResponsable'});
|
|
},
|
|
},
|
|
computed: {
|
|
busquedaNombreResponsable() {
|
|
return this.responsables.filter((responsables) =>
|
|
responsables.nombreResp.includes(this.buscarNombreResponsable)
|
|
);
|
|
},
|
|
},
|
|
async created() {
|
|
await this.obtenerDatos();
|
|
this.insertIdLocal();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.b-table {
|
|
cursor: pointer;
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|