151 lines
3.8 KiB
Vue
151 lines
3.8 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.usuario)">{{ 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.usuario)">{{ 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?idUsuario=${this.idUsuario}&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 (correoResponsable) {
|
|
localStorage.setItem('correo', correoResponsable)
|
|
this.$router.push('./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>
|