Lemuel Marquez
336 lines
8.8 KiB
Vue
336 lines
8.8 KiB
Vue
<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="1">Pre-registro</option>
|
|
<option value="2">Pre-registro Validado</option>
|
|
<option value="3">Registro</option>
|
|
<option value="4">Pre-Término</option>
|
|
<option value="5">Término</option>
|
|
<option value="6">Liberación</option>
|
|
<option value="7">Carta Aceptacion Rechazada</option>
|
|
<option value="8">Carta Termino Rechazada</option>
|
|
<option value="9">Informe Global Rechazado</option>
|
|
<option value="10">Cancelado</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>
|
|
|
|
<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.idServicio)">{{
|
|
props.row.nombre
|
|
}}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="numeroCuenta"
|
|
label="Número de Cuenta"
|
|
v-slot="props"
|
|
centered
|
|
width="100"
|
|
>
|
|
<span @click="servicios(props.row.idServicio)">{{
|
|
props.row.numeroCuenta
|
|
}}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="carrera"
|
|
label="Carrera"
|
|
v-slot="props"
|
|
centered
|
|
>
|
|
<span @click="servicios(props.row.idServicio)">{{
|
|
props.row.carrera
|
|
}}</span>
|
|
</b-table-column>
|
|
<b-table-column
|
|
field="fechaInicio"
|
|
truncate="10"
|
|
label="Fecha Inicio"
|
|
v-slot="props"
|
|
centered
|
|
>
|
|
<span @click="servicios(props.row.idServicio)">{{
|
|
fecha(props.row.fechaInicio)
|
|
}}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="fechaFin"
|
|
label="Fecha Fin"
|
|
v-slot="props"
|
|
centered
|
|
>
|
|
<span @click="servicios(props.row.idServicio)">{{
|
|
fecha(props.row.fechaFin)
|
|
}}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column field="status" label="Status" v-slot="props" centered>
|
|
<span
|
|
@click="servicios(props.row.idServicio)"
|
|
class="tag"
|
|
:class="types(props.row.idStatus)"
|
|
>{{ props.row.status }}</span
|
|
>
|
|
</b-table-column>
|
|
|
|
<b-table-column
|
|
field="diaCreado"
|
|
label="Día de creación"
|
|
v-slot="props"
|
|
centered
|
|
>
|
|
<span @click="servicios(props.row.idServicio)">{{
|
|
fecha(props.row.diaCreado)
|
|
}}</span>
|
|
</b-table-column>
|
|
</b-table>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
import moment from 'moment'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
idUsuario: '',
|
|
idTipoUsuario: '',
|
|
tipoUsuario: '',
|
|
data: [],
|
|
total: '',
|
|
isLoading: false,
|
|
page: 1,
|
|
perPage: 25,
|
|
numeroCuenta: '',
|
|
nombre: '',
|
|
idStatus: '',
|
|
token: {
|
|
headers: {
|
|
token: window.localStorage.getItem('token'),
|
|
},
|
|
},
|
|
}
|
|
},
|
|
|
|
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-warning'
|
|
} else if (idStatus === 4) {
|
|
return 'is-link'
|
|
} else if (idStatus === 5) {
|
|
return 'is-success'
|
|
} else if (idStatus === 6) {
|
|
return 'is-success is-light'
|
|
} else if (idStatus === 7) {
|
|
return 'is-danger'
|
|
} else if (idStatus === 8) {
|
|
return 'is-danger'
|
|
} else if (idStatus === 9) {
|
|
return 'is-danger'
|
|
} else if (idStatus === 10) {
|
|
// admin
|
|
return 'is-danger'
|
|
}
|
|
},
|
|
fecha(date) {
|
|
const fecha = moment(date.substr(0, 10))
|
|
|
|
return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`
|
|
},
|
|
obtenerDatos(idStatus) {
|
|
this.isLoading = true
|
|
this.data = []
|
|
|
|
axios
|
|
.get(
|
|
`${process.env.api}/servicio/servicios_admin?pagina=${this.page}&idStatus=${this.idStatus}&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`,
|
|
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,
|
|
fechaInicio: servicios[i].fechaInicio,
|
|
fechaFin: servicios[i].fechaFin,
|
|
status: servicios[i].Status.status,
|
|
diaCreado: servicios[i].createdAt,
|
|
idStatus: servicios[i].Status.idStatus,
|
|
idServicio: servicios[i].idServicio,
|
|
})
|
|
}
|
|
}
|
|
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.isLoading = false
|
|
})
|
|
},
|
|
servicios(idServicio) {
|
|
window.localStorage.setItem('idServicio', idServicio)
|
|
this.$router.push('/admin/servicio')
|
|
},
|
|
getIdLocal() {
|
|
this.idUsuario = localStorage.getItem('idUsuario')
|
|
this.idTipoUsuario = localStorage.getItem('idTipoUsuario')
|
|
this.tipoUsuario = 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
|
|
}
|
|
|
|
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(`/`)
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
this.getIdLocal()
|
|
this.obtenerDatos(0)
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.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;
|
|
}
|
|
.b-table {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|