091220
This commit is contained in:
@@ -1,220 +1,117 @@
|
||||
<template>
|
||||
<!--<div class="container">
|
||||
<div class="table-responsive-md">
|
||||
<table class="table mt-3 table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nombre de responsable</th>
|
||||
<th>Correo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="renglon">
|
||||
<tr
|
||||
v-for="responsable in responsables"
|
||||
:key="responsable.idResponsable"
|
||||
@click="verRegistro(responsable.idResponsable)"
|
||||
>
|
||||
<td>{{ responsable.nombre }}</td>
|
||||
<td>{{ responsable.correo }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>-->
|
||||
<section>
|
||||
<b-table
|
||||
class="tabla"
|
||||
hoverable
|
||||
:data="responsables"
|
||||
striped
|
||||
paginated
|
||||
:total="total"
|
||||
:per-page="perPage"
|
||||
@page-change="onPageChange"
|
||||
aria-next-label="Next page"
|
||||
aria-previous-label="Previous page"
|
||||
aria-page-label="Page"
|
||||
aria-current-label="Current page">
|
||||
<template v-for="column in columns">
|
||||
<b-table-column :key="column.id" v-bind="column">
|
||||
<template
|
||||
v-if="column.searchable && !column.numeric"
|
||||
slot="searchable"
|
||||
slot-scope="props">
|
||||
<div class="container mt-5">
|
||||
<div class="columns">
|
||||
<div class="column is-3 mb-4 pb-4">
|
||||
<b-field>
|
||||
<b-input
|
||||
v-model="props.filters[props.column.field]"
|
||||
placeholder="Buscar por..."
|
||||
icon="magnify"
|
||||
class="busqueda"/>
|
||||
</template>
|
||||
<template v-slot="props">
|
||||
<span @click="verRegistro(props.row.idResponsable)">{{ props.row[column.field] }}</span>
|
||||
</template>
|
||||
</b-table-column>
|
||||
</template>
|
||||
</b-table>
|
||||
</section>
|
||||
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: 20,
|
||||
total: 0,
|
||||
responsables: [
|
||||
{
|
||||
idResponsable: 1,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 2,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 3,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 4,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 5,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 6,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 7,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 8,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 9,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 10,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 11,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 12,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 13,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 14,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 15,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 16,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 17,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 18,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 19,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 20,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 21,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 22,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 23,
|
||||
nombre: 'Marco',
|
||||
correo: 'correo1'
|
||||
},
|
||||
{
|
||||
idResponsable: 24,
|
||||
nombre: 'Lemuel',
|
||||
correo: 'correo2'
|
||||
}
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
field: 'idResponsable',
|
||||
visible: false
|
||||
},
|
||||
{
|
||||
field: 'nombre',
|
||||
label: 'Nombre responsable',
|
||||
searchable: true,
|
||||
centered: true
|
||||
},
|
||||
{
|
||||
field: 'correo',
|
||||
label: 'Correo electrónico',
|
||||
searchable: true,
|
||||
centered: true
|
||||
}
|
||||
]
|
||||
perPage: 25,
|
||||
correo: '',
|
||||
nombre: '',
|
||||
idStatus: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
verRegistro (idResponsable) {
|
||||
localStorage.setItem('idResponsable', idResponsable)
|
||||
this.$router.push('/programa/responsableinfo')
|
||||
console.log(idResponsable)
|
||||
},
|
||||
onPageChange (page) {
|
||||
this.page = page
|
||||
this.loadAsyncData()
|
||||
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: {
|
||||
@@ -224,30 +121,30 @@ export default {
|
||||
)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
busquedaCorreoResponsable () {
|
||||
this.obtenerResponsables()
|
||||
}
|
||||
}/* ,
|
||||
async created () {
|
||||
await this.obtenerResponsables()
|
||||
} */
|
||||
await this.obtenerDatos()
|
||||
this.insertIdLocal()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.renglon:hover {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
.busqueda {
|
||||
width: 200%;
|
||||
margin-left: 50%;
|
||||
}
|
||||
.tabla {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 100px;
|
||||
border: 3px solid #1b3d70;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user