table casos especiales lista

This commit is contained in:
Lemuel Marquez
2021-05-15 00:58:24 -05:00
parent f53b9a84da
commit 736ac50110
17 changed files with 195 additions and 455 deletions
+176 -228
View File
@@ -1,124 +1,99 @@
<template>
<div
v-if="this.idTipoUsuario == 1 && this.tipoUsuario == 'admin'"
class="container"
>
<div class="columns">
<div class="column is-3 mb-0">
<b-field>
<b-input
placeholder="No.Cuenta"
icon="school"
rounded
v-model="numeroCuenta"
maxlength="9"
></b-input>
</b-field>
</div>
<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-4 pb-4">
<b-field>
<b-select
placeholder="Status"
icon="information"
expanded
rounded
v-model="idStatus"
>
<optgroup>
<option value="">Status</option>
<option value="11">Artículo 52</option>
<option value="12">Artículo 91</option>
<option value="13">Liberación Articulo 52</option>
<option value="14">Liberación Articulo 91</option>
</optgroup>
</b-select>
</b-field>
</div>
<div class="buttons section pt-3 pl-5">
<b-button type="is-info" @click="obtenerDatos(idStatus)">
Buscar
</b-button>
</div>
</div>
<section class="section">
<h3 class="title">Casos Especiales</h3>
<div class="columns">
<section class="column is-12">
<b-table
:data="data"
:loading="isLoading"
paginated
backend-pagination
:total="total"
:per-page="perPage"
@page-change="onPageChange"
hoverable
striped
>
<b-table-column field="nombre" label="Nombre" v-slot="props" centered>
<span @click="servicios(props.row.idCasoEspecial)">{{
props.row.nombre
}}</span>
</b-table-column>
<b-field class="column" label="Número de Cuenta">
<b-input
type="text"
placeholder="No.Cuenta"
icon="school"
rounded
v-model="numeroCuenta"
maxlength="9"
></b-input>
</b-field>
<b-table-column
field="numeroCuenta"
label="Número de Cuenta"
v-slot="props"
centered
width="100"
>
<span @click="servicios(props.row.idCasoEspecial)">{{
props.row.numeroCuenta
}}</span>
</b-table-column>
<b-field class="column" label="Nombre">
<b-input
type="name"
placeholder="Nombre"
icon="account"
rounded
v-model="nombre"
></b-input>
</b-field>
<b-table-column
field="carrera"
label="Carrera"
v-slot="props"
centered
<b-field class="column" label="Status">
<b-select icon="information" expanded rounded v-model="idStatus">
<option value="">Status</option>
<option
v-for="(s, i) in status"
:key="i"
:value="s.idStatus"
v-show="i > 8 && i < 14"
>
<span @click="servicios(props.row.idCasoEspecial)">{{
props.row.carrera
}}</span>
</b-table-column>
<b-table-column field="status" label="Status" v-slot="props" centered>
<span
@click="servicios(props.row.idCasoEspecial)"
class="tag"
:class="types(props.row.idStatus)"
>{{ props.row.status }}</span
>
</b-table-column>
{{ s.status }}
</option>
</b-select>
</b-field>
<b-table-column
field="diaCreado"
label="Día de creación"
v-slot="props"
centered
>
<span @click="servicios(props.row.idCasoEspecial)">{{
fecha(props.row.diaCreado)
}}</span>
</b-table-column>
</b-table>
</section>
<b-button
type="is-info"
class="column is-align-self-center"
expanded
@click="obtenerCasosEspeciales()"
>
Buscar
</b-button>
</div>
</div>
<b-table
:data="data"
:total="total"
:current-page="page"
:per-page="perPage"
:selected.sync="servicioSeleccionado"
:loading="isLoading"
@page-change="onPageChange"
hoverable
striped
paginated
backend-pagination
>
<b-table-column field="nombre" label="Nombre" v-slot="props" centered>
<span>{{ props.row.Usuario.nombre }}</span>
</b-table-column>
<b-table-column
field="numeroCuenta"
label="Número de Cuenta"
v-slot="props"
centered
>
<span>{{ props.row.Usuario.usuario }}</span>
</b-table-column>
<b-table-column field="carrera" label="Carrera" v-slot="props" centered>
<span>{{ props.row.Carrera.carrera }}</span>
</b-table-column>
<b-table-column
field="fechaCreado"
label="Día de Creación"
v-slot="props"
centered
>
<span>{{ fecha(props.row.createdAt) }}</span>
</b-table-column>
<b-table-column field="status" label="Status" v-slot="props" centered>
<span :class="types(props.row.Status.idStatus)">{{
props.row.Status.status
}}</span>
</b-table-column>
</b-table>
</section>
</template>
<script>
@@ -128,143 +103,100 @@ import moment from 'moment'
export default {
data() {
return {
idUsuario: '',
idTipoUsuario: '',
tipoUsuario: '',
admin: {},
status: [],
data: [],
total: '',
isLoading: false,
page: 1,
perPage: 25,
total: 0,
isLoading: false,
busqueda: {},
numeroCuenta: '',
numeroCuentaAnterior: '',
nombre: '',
nombreAnterior: '',
idStatus: '',
token: {
headers: {
token: window.localStorage.getItem('token'),
},
},
idStatusAnterior: '',
token: {},
servicioSeleccionado: {},
}
},
methods: {
onPageChange(page) {
this.page = page
this.obtenerDatos()
},
types(idStatus) {
if (idStatus === 1) {
return 'is-dark'
} else if (idStatus === 2) {
return 'is-info'
} else if (idStatus === 3) {
return 'is-link'
} else if (idStatus === 4) {
return 'is-warning'
} else if (idStatus === 5) {
return 'is-success'
} else if (idStatus === 6) {
return 'is-link'
} else if (
idStatus === 7 ||
idStatus === 8 ||
idStatus === 9 ||
idStatus === 10
) {
return 'is-danger'
} else if (idStatus === 11) {
return 'is-link is-light'
} else if (idStatus === 12) {
return 'is-danger is-light'
} else if (idStatus === 13 || idStatus === 14) {
return 'is-success is-light'
}
let style = 'tag'
if (idStatus === 10) style += ' is-danger'
if (idStatus === 11) style += ' is-link is-light'
if (idStatus === 12) style += ' is-danger is-light'
if (idStatus === 13 || idStatus === 14) style += ' is-success is-light'
return style
},
fecha(date) {
const fecha = moment(date.substr(0, 10))
return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`
},
obtenerDatos(idStatus) {
this.isLoading = true
this.data = []
onPageChange(page) {
this.page = page
this.obtenerCasosEspeciales()
},
getLocalhostInfo() {
this.admin.idUsuario = localStorage.getItem('idUsuario')
this.admin.idTipoUsuario = Number(localStorage.getItem('idTipoUsuario'))
this.admin.tipoUsuario = localStorage.getItem('tipoUsuario')
this.token = {
headers: {
token: window.localStorage.getItem('token'),
},
}
},
obtenerCasosEspeciales() {
let data = ''
this.isLoading = true
if (
this.numeroCuenta != this.numeroCuentaAnterior ||
this.nombre != this.nombreAnterior ||
this.idStatus != this.idStatusAnterior
) {
this.page = 1
this.numeroCuentaAnterior = this.numeroCuenta
this.nombreAnterior = this.nombre
this.idStatusAnterior = this.idStatus
}
if (this.idStatus) data += `&idStatus=${this.idStatus}`
if (this.nombre) data += `&nombre=${this.nombre}`
if (this.numeroCuenta) data = `&numeroCuenta=${this.numeroCuenta}`
axios
.get(
`${process.env.api}/caso_especial/servicios_especiales?pagina=${this.page}&idStatus=${this.idStatus}&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`,
`${process.env.api}/caso_especial/servicios_especiales?&pagina=${this.page}${data}`,
this.token
)
.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].Usuario.nombre,
numeroCuenta: servicios[i].Usuario.usuario,
carrera: servicios[i].Carrera.carrera,
status: servicios[i].Status.status,
diaCreado: servicios[i].createdAt,
idStatus: servicios[i].Status.idStatus,
idCasoEspecial: servicios[i].idCasoEspecial,
})
}
}
let currentTotal = servicios.length
let contador
for (let i = 0; i < res.data.registros / 25 + 1; i++) {
contador = i
}
currentTotal = this.perPage * contador
this.total = currentTotal
})
.catch((error) => {
this.error(error.response.data.message)
})
.finally(() => {
this.data = res.data.serviciosEspeciales
this.total = res.data.count
this.isLoading = false
console.log(res.data)
})
.catch((err) => {
this.isLoading = false
this.imprimirError(err.response.data)
})
},
servicios(idCasoEspecial) {
window.localStorage.setItem('idCasoEspecial', idCasoEspecial)
this.$router.push('/admin/especial/casoEspecial')
obtenerCatalogoStatus() {
axios
.get(`${process.env.api}/status`, this.token)
.then((res) => {
this.status = res.data
})
.catch((err) => {
this.imprimirError(err.response.data)
})
},
getIdLocal() {
this.idUsuario = 1 //localStorage.getItem("idUsuario");
this.idTipoUsuario = 1 //localStorage.getItem("idTipoUsuario");
this.tipoUsuario = 'admin' //localStorage.getItem("tipoUsuario");
if (this.idTipoUsuario != 1 && this.tipoUsuario != 'admin') {
localStorage.clear()
this.$router.push('/')
}
},
error(msj) {
let salir = false
switch (msj) {
case 'invalid signature':
msj = 'Tu token no es valido, inicia sesión de nuevo.'
salir = true
break
case 'jwt expired':
msj = 'Tu sesión ha expirado, inicia sesión de nuevo.'
salir = true
break
case 'jwt malformed':
msj = 'No se encontro tu token, inicia sesión de nuevo.'
salir = true
break
case 'No hay token':
msj = 'Ocurrio un error al enviar tu token, inicia sesión de nuevo.'
salir = true
break
}
imprimirError(err) {
this.$buefy.dialog.alert({
title: 'Error',
message: msj,
message: err.message,
type: 'is-danger',
hasIcon: true,
icon: 'alert-circle',
@@ -272,15 +204,27 @@ export default {
ariaRole: 'alertdialog',
ariaModal: true,
})
if (salir == true) {
if (err.err === 'token error') {
localStorage.clear()
this.$router.push(`/`)
this.$router.push('/')
}
},
},
watch: {
servicioSeleccionado() {
window.localStorage.setItem(
'idCasoEspecial',
this.servicioSeleccionado.idCasoEspecial
)
this.$router.push(`/admin/especial/casoEspecial`)
},
},
created() {
this.getIdLocal()
this.obtenerDatos(0)
this.getLocalhostInfo()
if (this.admin.idTipoUsuario === 1) {
this.obtenerCatalogoStatus()
this.obtenerCasosEspeciales()
}
},
}
</script>
@@ -290,18 +234,22 @@ export default {
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;
}
.b-table {
.pinter {
cursor: pointer;
}
</style>
+1 -3
View File
@@ -149,9 +149,7 @@ export default {
if (idStatus === 4) style += ' is-link'
if (idStatus === 5) style += ' is-success'
if (idStatus === 6) style += ' is-success is-light'
if (idStatus === 7) style += ' is-danger'
if (idStatus === 8) style += ' is-danger'
if (idStatus === 9) style += ' is-danger'
if (idStatus >= 7 && idStatus <= 9) style += ' is-danger'
return style
},
fecha(date) {
@@ -128,7 +128,6 @@ export default {
this.imprimirError(err.response.data)
})
},
imprimirError(err) {
this.$buefy.dialog.alert({
title: 'Error',
@@ -145,10 +144,6 @@ export default {
this.$router.push('/')
}
},
paginaCorrecta() {
if (this.admin.idTipoUsuario === 2) this.$router.push('/responsable')
if (this.admin.idTipoUsuario === 3) this.$router.push('/alumno')
},
},
watch: {
responsableSeleccionado() {
@@ -162,7 +157,6 @@ export default {
created() {
this.getLocalhostInfo()
if (this.admin.idTipoUsuario === 1) {
this.paginaCorrecta()
this.obtenerResponsables()
}
},
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="container" :class="{ pad: padding }">
<BotonRegresar :path="'/admin/servicio'" />
<BotonRegresar path="/admin/servicio" />
<br /><br />
<p class="is-size-2">Editar información del alumno</p>
<br />
+2 -2
View File
@@ -2,7 +2,7 @@
<div class="container">
<div class="mb-5">
<BotonRegresar
:path="'/admin'"
path="/admin"
:deleteFromLocalStorage="['idServicio', 'idStatus']"
/>
</div>
@@ -97,7 +97,7 @@
<b-button v-else-if="enviarCancel" disabled> Cancelar servicio </b-button>
<div>
<BotonRegresar
:path="'/admin'"
path="/admin"
:deleteFromLocalStorage="['idServicio', 'idStatus']"
/>
</div>
+1 -3
View File
@@ -195,9 +195,7 @@ export default {
if (idStatus === 4) style += ' is-link'
if (idStatus === 5) style += ' is-success'
if (idStatus === 6) style += ' is-success is-light'
if (idStatus === 7) style += ' is-danger'
if (idStatus === 8) style += ' is-danger'
if (idStatus === 9) style += ' is-danger'
if (idStatus >= 7 && idStatus <= 9) style += ' is-danger'
return style
},
fecha(date) {
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="container">
<BotonRegresar :path="'/admin'" />
<BotonRegresar path="/admin" />
<p class="is-size-2 mb-5">Descargar cuestionarios</p>
<p class="is-size-3 mt-5">Seleccione un cuestionario:</p>
<b-select
@@ -1,6 +1,6 @@
<template>
<div class="container">
<BotonRegresar :path="'/admin/especial/casoEspecial'" />
<BotonRegresar path="/admin/especial/casoEspecial" />
<FormEditar></FormEditar>
</div>
</template>
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="container">
<BotonRegresar :path="'/admin/especial'" />
<BotonRegresar path="/admin/especial" />
<DatosPersonalesEspecial />
</div>
</template>
+2 -1
View File
@@ -1,6 +1,7 @@
<template>
<div class="container" style="margin-top: 1.4%; margin-bottom: 4%">
<BotonRegresar :path="'/admin'" />
<BotonRegresar path="/admin" />
<TablaCasosEspeciales />
</div>
</template>
+3 -1
View File
@@ -1,7 +1,9 @@
<template>
<div class="container">
<BotonRegresar :path="'/admin'" />
<BotonRegresar path="/admin" />
<CargaMasiva />
<a :href="link">
<b-button class="my-4 is-info">Descargar plantilla</b-button>
</a>
@@ -1,7 +1,7 @@
<template>
<div class="container">
<BotonRegresar
:path="'/admin/responsables'"
path="/admin/responsables"
:deleteFromLocalStorage="['correo', 'idResponsable', 'nombre']"
/>
<p class="is-size-2 mb-4">Información del responsable</p>
@@ -44,7 +44,7 @@
</b-button>
</div>
<BotonRegresar
:path="'/admin/responsables'"
path="/admin/responsables"
:deleteFromLocalStorage="['correo', 'idResponsable', 'nombre']"
/>
</div>
@@ -1,6 +1,6 @@
<template>
<div class="container" style="margin-bottom: 10%; margin-top: 2%">
<BotonRegresar :path="'/admin/responsables/infoResponsable'" />
<BotonRegresar path="/admin/responsables/infoResponsable" />
<p class="is-size-2">Editar información del responsable</p>
<b-field label="Nombre">
<b-input type="text" v-model="nuevo.nombre" :placeholder="viejo.nombre">
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<section class="container my-5 px-3">
<div v-if="idCuestionario === 'null'">
<BotonRegresar :path="'/alumno'" />
<BotonRegresar path="/alumno" />
<div class="my-5 mensaje">
<p class="is-size-2">Evaluación de programas de servicio social</p>
<p>
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="container">
<BotonRegresar :path="'/casoEspecial'" />
<BotonRegresar path="/casoEspecial" />
<FormularioEspecial />
</div>
</template>
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="container">
<BotonRegresar :path="'/responsable'" />
<BotonRegresar path="/responsable" />
<Texto />
<FormServicioSocial />
</div>
-201
View File
@@ -1,201 +0,0 @@
<template>
<div class="container mt-5">
<p class="is-size-2 mb-5">Lista de responsables</p>
<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"
>
</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,
token: {
headers: {
token: window.localStorage.getItem('token'),
},
},
}
},
methods: {
onPageChange(page) {
this.page = page
this.obtenerDatos()
},
obtenerDatos(idStatus) {
this.loading = true
this.data = []
axios
.get(
`${process.env.api}/usuario/responsables?pagina=${this.page}&nombre=${this.nombre}&correo=${this.correo}`,
this.token
)
.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) => {
this.loading = false
this.error(err.response.data.message)
})
},
error(msj) {
let salir = false
switch (msj) {
case 'invalid signature':
msj = 'Tu token no es valido, inicia sesión de nuevo.'
salir = true
break
case 'jwt expired':
msj = 'Tu sesión ha expirado, inicia sesión de nuevo.'
salir = true
break
case 'jwt malformed':
msj = 'No se encontro tu token, inicia sesión de nuevo.'
salir = true
break
case 'No hay token':
msj = 'Ocurrio un error al enviar tu token, inicia sesión de nuevo.'
salir = true
break
}
this.$buefy.dialog.alert({
title: 'Error',
message: msj,
type: 'is-danger',
hasIcon: true,
icon: 'alert-circle',
iconPack: 'mdi',
ariaRole: 'alertdialog',
ariaModal: true,
})
if (salir == true) {
localStorage.clear()
this.$router.push(`/`)
}
},
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('/admin/responsables/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>