todos los usuarios listo
This commit is contained in:
Lemuel
parent
4ab6eb1c61
commit
e319e58b83
@ -3,11 +3,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Title from '@/components/layouts/Title'
|
||||
import TablaBuscadorMultas from '@/components/tablaBuscador/TablaBuscadorMultas'
|
||||
|
||||
export default {
|
||||
components: { TablaBuscadorMultas, Title },
|
||||
components: { TablaBuscadorMultas },
|
||||
props: { operador: { type: Object, required: true } },
|
||||
}
|
||||
</script>
|
||||
|
||||
14
components/operador/Usuarios.vue
Normal file
14
components/operador/Usuarios.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<TablaBuscadorUsuario :operador="operador" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TablaBuscadorUsuario from '@/components/tablaBuscador/TablaBuscadorUsuario'
|
||||
|
||||
export default {
|
||||
components: { TablaBuscadorUsuario },
|
||||
props: { operador: { type: Object, required: true } },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,175 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="columns is-align-items-flex-end pl-0 pb-4">
|
||||
<b-field
|
||||
class="column mb-0 pb-0"
|
||||
field="carrito"
|
||||
label="Número de cuenta/trabajador"
|
||||
>
|
||||
<b-input
|
||||
placeholder="Número de cuenta/trabajador"
|
||||
v-model="usuario"
|
||||
rounded
|
||||
@keyup.enter.native="obtenerUsuarios"
|
||||
/>
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
v-if="tipoUsuario === 3 || tipoUsuario === 4"
|
||||
class="column mb-0 pb-0"
|
||||
field="carrera"
|
||||
label="Carrera"
|
||||
>
|
||||
<b-select v-model="idCarrera" rounded expanded>
|
||||
<option disabled>Carrera</option>
|
||||
<option
|
||||
v-for="carrera in carreras"
|
||||
:value="carrera.carrera.id_carrera"
|
||||
:key="carrera.carrera.id_carrera"
|
||||
>
|
||||
{{ carrera.carrera.carrera }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
class="column is-4"
|
||||
label="Nombre de la Institución"
|
||||
v-if="tipoUsuario === 2"
|
||||
>
|
||||
<b-select v-model="idInstitucion" expanded rounded>
|
||||
<option value="" disabled>Institución</option>
|
||||
<option
|
||||
v-for="institucion in instituciones"
|
||||
:value="institucion.id_institucion"
|
||||
:key="institucion.id_institucion"
|
||||
>
|
||||
{{ institucion.institucion }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
|
||||
<b-button
|
||||
class="column mb-0"
|
||||
type="is-info"
|
||||
@click="obtenerUsuarios"
|
||||
rounded
|
||||
expanded
|
||||
>Buscar</b-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<TablaUsuarios
|
||||
:operador="operador"
|
||||
:usuarios="usuarios"
|
||||
:isLoadingTable="isLoadingTable"
|
||||
:page="page"
|
||||
:total="total"
|
||||
:onPageChange="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import TablaUsuarios from '@/components/operador/usuarios/TablaUsuarios'
|
||||
|
||||
export default {
|
||||
components: { TablaUsuarios },
|
||||
props: {
|
||||
operador: { type: Object, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
usuarios: [],
|
||||
carreras: [],
|
||||
instituciones: [],
|
||||
usuario: '',
|
||||
idCarrera: null,
|
||||
idInstitucion: null,
|
||||
nombre: '',
|
||||
isLoadingTable: false,
|
||||
page: 1,
|
||||
tipoUsuario: null,
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPageChange(page) {
|
||||
this.page = page
|
||||
this.obtenerUsuarios()
|
||||
},
|
||||
updateEquipo(valorObject) {
|
||||
this.equipo = valorObject
|
||||
},
|
||||
obtenerUsuarios() {
|
||||
let url = `${process.env.api}`
|
||||
this.tipoUsuario === 2
|
||||
? (url += `/usuario/usuarios?pagina=${this.page}`)
|
||||
: (url += `/usuario/usuarios?pagina=${this.page}&id_institucion=${this.operador.institucion.id_institucion}`)
|
||||
|
||||
this.idCarrera !== null ? (url += `&id_carrera=${this.idCarrera}`) : null
|
||||
|
||||
this.idInstitucion !== null
|
||||
? (url += `&id_institucion=${this.idInstitucion}`)
|
||||
: null
|
||||
|
||||
this.usuario !== '' ? (url += `&usuario=${this.usuario}`) : null
|
||||
|
||||
this.isLoadingTable = true
|
||||
axios
|
||||
.get(`${url}`, this.$getToken.token())
|
||||
.then(async (res) => {
|
||||
this.usuarios = res.data[0]
|
||||
this.total = res.data[1]
|
||||
this.isLoadingTable = false
|
||||
})
|
||||
.catch((err) => {
|
||||
this.isLoadingTable = false
|
||||
this.$alertsGenericos.imprimirError(
|
||||
this.$buefy,
|
||||
this.$router,
|
||||
err.response.data
|
||||
)
|
||||
})
|
||||
},
|
||||
obtenerCarreras() {
|
||||
axios
|
||||
.get(
|
||||
`${process.env.api}/institucion-carrera/?id_institucion=${this.operador.institucion.id_institucion}`,
|
||||
this.$getToken.token()
|
||||
)
|
||||
.then(async (res) => {
|
||||
this.carreras = res.data
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$alertsGenericos.imprimirError(
|
||||
this.$buefy,
|
||||
this.$router,
|
||||
err.response.data
|
||||
)
|
||||
})
|
||||
},
|
||||
obtenerInstituciones() {
|
||||
axios
|
||||
.get(`${process.env.api}/institucion`, this.$getToken.token())
|
||||
.then(async (res) => {
|
||||
this.instituciones = res.data
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$alertsGenericos.imprimirError(
|
||||
this.$buefy,
|
||||
this.$router,
|
||||
err.response.data
|
||||
)
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.tipoUsuario = this.operador.tipoUsuario.id_tipo_usuario
|
||||
if (this.tipoUsuario === 3 || this.tipoUsuario === 4) this.obtenerCarreras()
|
||||
if (this.tipoUsuario === 2) this.obtenerInstituciones()
|
||||
this.obtenerUsuarios()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,121 +0,0 @@
|
||||
<template>
|
||||
<b-table
|
||||
:data="usuarios"
|
||||
:loading="isLoadingTable"
|
||||
:selected.sync="selectedUsuario"
|
||||
:row-class="(row, index) => 'pointer'"
|
||||
class="mb-6"
|
||||
:per-page="25"
|
||||
@page-change="onPageChange"
|
||||
show-detail-icon
|
||||
paginated
|
||||
detailed
|
||||
>
|
||||
<b-table-column
|
||||
field="usuario"
|
||||
label="Número de cuenta"
|
||||
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="tipo" label="Tipo" v-slot="props" centered>
|
||||
<span>{{ props.row.tipoUsuario.tipo_usuario }}</span>
|
||||
</b-table-column>
|
||||
|
||||
<template #detail="props">
|
||||
<div class="columns">
|
||||
<div class="column is-1"></div>
|
||||
<div class="column has-text-centered is-size-5 detail-item">
|
||||
<b>Institución(es):</b>
|
||||
</div>
|
||||
<div class="column has-text-centered is-size-5 detail-item">
|
||||
<b>Carrera(s):</b>
|
||||
</div>
|
||||
<div class="column has-text-centered is-size-5 detail-item">
|
||||
<b>Activo:</b>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="institucion in props.row.instituciones"
|
||||
:key="institucion.institucionCarrera.id_institucion_carrera"
|
||||
class="container columns"
|
||||
>
|
||||
<div class="column is-1"></div>
|
||||
<div class="column has-text-centered is-size-6 detail-item">
|
||||
{{ institucion.institucionCarrera.institucion.institucion }}
|
||||
</div>
|
||||
<div class="column has-text-centered is-size-6 detail-item">
|
||||
{{ institucion.institucionCarrera.carrera.carrera }}
|
||||
</div>
|
||||
<div class="column has-text-centered is-size-6 detail-item">
|
||||
<b-field>
|
||||
<b-tag
|
||||
class="is-size-6 tag"
|
||||
:class="choooseTag(institucion.activo)"
|
||||
>{{ institucion.activo ? 'Activo' : 'Inactivo' }}</b-tag
|
||||
>
|
||||
</b-field>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="has-text-centered">
|
||||
<p class="is-size-6">No hay usuarios</p>
|
||||
</div>
|
||||
</template>
|
||||
</b-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import TablaEquiCarritos from '@/components/operador/TablaEquiCarritos'
|
||||
|
||||
export default {
|
||||
// components: { TablaEquiCarritos },
|
||||
props: {
|
||||
operador: { type: Object, required: true },
|
||||
usuarios: { type: Array, require: true },
|
||||
isLoadingTable: { type: Boolean, require: true },
|
||||
page: { type: Number, required: true },
|
||||
onPageChange: { type: Function, require: true },
|
||||
total: { type: Number, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedUsuario: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
choooseTag(activo) {
|
||||
const style = {
|
||||
false: 'is-danger',
|
||||
true: 'is-success',
|
||||
}
|
||||
return style[activo]
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectedUsuario() {
|
||||
this.$router.push({
|
||||
path:
|
||||
'/usuarios/buscar_usuario/' + this.selectedUsuario.usuario,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@ -99,7 +99,6 @@ export default {
|
||||
this.$getToken.token()
|
||||
)
|
||||
.then((res) => {
|
||||
console.log(res.data)
|
||||
this.multas = res.data[0]
|
||||
this.total = res.data[1]
|
||||
this.isLoadingTable = false
|
||||
|
||||
123
components/tablaBuscador/TablaBuscadorUsuario.vue
Normal file
123
components/tablaBuscador/TablaBuscadorUsuario.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="is-size-4 mb-3">Todos los usuarios</h3>
|
||||
|
||||
<div class="columns is-multiline mb-5 is-align-items-flex-end">
|
||||
<SelectInstitucion
|
||||
columnSize="is-3"
|
||||
:idInstitucionPadre="idInstitucion"
|
||||
@institucion-seleccionada="
|
||||
(nuevaInstitucion) => (idInstitucion = nuevaInstitucion)
|
||||
"
|
||||
v-if="operador.tipoUsuario.id_tipo_usuario === 2"
|
||||
/>
|
||||
|
||||
<b-field class="column is-3 mb-0 pb-0" label="Número de cuenta/trabajador">
|
||||
<b-input
|
||||
icon="user"
|
||||
placeholder="Número de cuenta/trabajador"
|
||||
type="text"
|
||||
@keyup.enter.native="obtenerUsuarios()"
|
||||
v-model="usuario"
|
||||
rounded
|
||||
/>
|
||||
</b-field>
|
||||
|
||||
<BotonBuscar
|
||||
columnSize="is-3"
|
||||
:buscar="obtenerUsuarios"
|
||||
:disabled="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TablaUsuarios
|
||||
:usuarios="usuarios"
|
||||
:isLoadingTable="isLoadingTable"
|
||||
:obtenerUsuarios="obtenerUsuarios"
|
||||
:onPageChange="onPageChange"
|
||||
:total="total"
|
||||
:page="page"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import BotonBuscar from '@/components/botones/BotonBuscar'
|
||||
import SelectInstitucion from '@/components/selects/SelectInstitucion'
|
||||
import TablaUsuarios from '@/components/tablas/TablaUsuarios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BotonBuscar,
|
||||
SelectInstitucion,
|
||||
TablaUsuarios,
|
||||
},
|
||||
props: { operador: { type: Object, required: true } },
|
||||
data() {
|
||||
return {
|
||||
usuarios: [],
|
||||
isLoadingTable: false,
|
||||
idInstitucion: 0,
|
||||
page: 1,
|
||||
total: 0,
|
||||
lastSearch: {},
|
||||
usuario: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
obtenerUsuarios() {
|
||||
let data = ''
|
||||
|
||||
this.isLoadingTable = true
|
||||
if (
|
||||
this.usuario != this.lastSearch.usuario ||
|
||||
(this.operador.institucion &&
|
||||
this.operador.institucion.id_institucion !=
|
||||
this.lastSearch.idInstitucion) ||
|
||||
(this.operador.tipoUsuario.id_tipo_usuario === 2 &&
|
||||
this.idInstitucion &&
|
||||
this.idInstitucion != this.lastSearch.idInstitucion)
|
||||
) {
|
||||
this.page = 1
|
||||
if (this.operador.institucion)
|
||||
this.lastSearch.idInstitucion =
|
||||
this.operador.institucion.id_institucion
|
||||
else if (this.idInstitucion)
|
||||
this.lastSearch.idInstitucion = this.idInstitucion
|
||||
this.lastSearch.usuario = this.usuario
|
||||
}
|
||||
if (this.usuario) data += `&usuario=${this.usuario}`
|
||||
if (this.operador.institucion)
|
||||
data += `&id_institucion=${this.operador.institucion.id_institucion}`
|
||||
else if (this.idInstitucion)
|
||||
data += `&id_institucion=${this.idInstitucion}`
|
||||
axios
|
||||
.get(
|
||||
`${process.env.api}/usuario/usuarios?pagina=${this.page}${data}`,
|
||||
this.$getToken.token()
|
||||
)
|
||||
.then((res) => {
|
||||
this.usuarios = res.data[0]
|
||||
this.total = res.data[1]
|
||||
this.isLoadingTable = false
|
||||
})
|
||||
.catch((err) => {
|
||||
this.isLoadingTable = false
|
||||
this.$alertsGenericos.imprimirError(
|
||||
this.$buefy,
|
||||
this.$router,
|
||||
err.response.data
|
||||
)
|
||||
})
|
||||
},
|
||||
onPageChange(page) {
|
||||
this.page = page
|
||||
this.obtenerUsuarios()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.obtenerUsuarios()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -46,7 +46,7 @@
|
||||
</b-table-column>
|
||||
|
||||
<template #detail="props">
|
||||
<b-table class="pb-6" :data="[props.row]" hoverable striped>
|
||||
<b-table :data="[props.row]" hoverable striped>
|
||||
<b-table-column
|
||||
field="descripcion"
|
||||
label="Descripción"
|
||||
|
||||
@ -2,35 +2,90 @@
|
||||
<b-table
|
||||
class="pb-6"
|
||||
:current-page="page"
|
||||
:data="data"
|
||||
:data="usuarios"
|
||||
:loading="isLoadingTable"
|
||||
:per-page="25"
|
||||
:row-class="(row, index) => pintarFila(row)"
|
||||
:row-class="(row, index) => 'pointer'"
|
||||
:selected.sync="usuarioSeleccionado"
|
||||
:total="total"
|
||||
@page-change="onPageChange"
|
||||
backend-pagination
|
||||
detailed
|
||||
hoverable
|
||||
paginated
|
||||
show-detail-icon
|
||||
striped
|
||||
>
|
||||
<b-table-column
|
||||
field="usuario"
|
||||
label="Número de cuenta/trabajador"
|
||||
v-slot="props"
|
||||
centered
|
||||
>
|
||||
<p>{{ props.row.usuario }}</p>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="nombre" label="Nombre" v-slot="props" centered>
|
||||
<p>{{ props.row.nombre }}</p>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="tipo" label="Tipo" v-slot="props" centered>
|
||||
<p>{{ props.row.tipoUsuario.tipo_usuario }}</p>
|
||||
</b-table-column>
|
||||
|
||||
<template #detail="props">
|
||||
<b-table :data="props.row.instituciones" hoverable striped>
|
||||
<b-table-column
|
||||
field="institucion"
|
||||
label="Institución"
|
||||
v-slot="props"
|
||||
centered
|
||||
>
|
||||
<p>{{ props.row.institucionCarrera.institucion.institucion }}</p>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="carrera" label="Carrera" v-slot="props" centered>
|
||||
<p>{{ props.row.institucionCarrera.carrera.carrera }}</p>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="activo" label="Status" v-slot="props" centered>
|
||||
<p
|
||||
class="tag is-size-6"
|
||||
:class="props.row.activo ? 'is-success' : 'is-danger'"
|
||||
>
|
||||
{{ props.row.activo ? "Activo" : "Inactivo" }}
|
||||
</p>
|
||||
</b-table-column>
|
||||
</b-table>
|
||||
</template>
|
||||
</b-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
data: { type: Array, required: true, default: () => [] },
|
||||
usuarios: { type: Array, required: true, default: () => [] },
|
||||
isLoadingTable: { type: Boolean, required: true, default: false },
|
||||
onPageChange: { type: Function, required: true, default: () => {} },
|
||||
page: { type: Number, required: true, default: 1 },
|
||||
total: { type: Number, required: true, default: 0 },
|
||||
page: { type: Number, required: true, default: 0 },
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return { usuarioSeleccionado: {} }
|
||||
},
|
||||
watch: {
|
||||
usuarioSeleccionado() {
|
||||
this.$router.push(
|
||||
`/usuarios/buscar_usuario/${this.usuarioSeleccionado.usuario}`
|
||||
)
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Title title="Todos los usuarios" :operador="operador" />
|
||||
<div>
|
||||
<Title title="Usuarios" :operador="operador" />
|
||||
|
||||
<InputsUsuarios :operador="operador" />
|
||||
<Usuarios :operador="operador" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jwt_decode from 'jwt-decode'
|
||||
import Usuarios from '@/components/operador/Usuarios'
|
||||
import Title from '@/components/layouts/Title'
|
||||
import InputsUsuarios from '@/components/operador/usuarios/InputsUsuarios'
|
||||
|
||||
export default {
|
||||
components: { InputsUsuarios, Title },
|
||||
components: { Usuarios, Title },
|
||||
data() {
|
||||
return { operador: {} }
|
||||
},
|
||||
@ -22,8 +22,5 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
min-height: 75vh;
|
||||
}
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user