Andres2908
295 lines
9.9 KiB
Vue
295 lines
9.9 KiB
Vue
<template>
|
|
<div 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 icon="information" expanded rounded v-model="idStatus">
|
|
<optgroup>
|
|
<option value="">Status</option>
|
|
<option value="1">Pre-registro</option>
|
|
<option value="2">Registro</option>
|
|
<option value="3">Registro Validado</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>
|
|
</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="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 class="cursorR" v-if="props.row.idStatus == 7" @click="cartaAceptacion(props.row.idServicio)">{{ props.row.nombre}}</span>
|
|
<span v-else>{{ props.row.nombre}}</span>
|
|
</b-table-column>
|
|
<b-table-column field="numeroCuenta" label="Número de Cuenta" v-slot="props" centered width="100">
|
|
<span class="cursorR" v-if="props.row.idStatus == 7" @click="cartaAceptacion(props.row.idServicio)">{{ props.row.numeroCuenta}}</span>
|
|
<span v-else>{{ props.row.numeroCuenta}}</span>
|
|
</b-table-column>
|
|
<b-table-column field="carrera" label="Carrera" v-slot="props" centered>
|
|
<span class="cursorR" v-if="props.row.idStatus == 7" @click="cartaAceptacion(props.row.idServicio)">{{ props.row.carrera}}</span>
|
|
<span v-else>{{ props.row.carrera}}</span>
|
|
</b-table-column>
|
|
<b-table-column field="fechaInicio" truncate=10 label="Fecha Inicio" v-slot="props" centered>
|
|
<span class="cursorR" v-if="props.row.idStatus == 7" @click="cartaAceptacion(props.row.idServicio)">{{props.row.fechaInicio}}</span>
|
|
<span v-else>{{ fecha(props.row.fechaInicio) }}</span>
|
|
</b-table-column>
|
|
<b-table-column field="fechaFin" label="Fecha Fin" v-slot="props" centered>
|
|
<span class="cursorR" v-if="props.row.idStatus == 7" @click="cartaAceptacion(props.row.idServicio)">{{props.row.fechaFin}}</span>
|
|
<span v-else>{{ fecha(props.row.fechaFin) }}</span>
|
|
</b-table-column>
|
|
<b-table-column field="status" label="Status" v-slot="props" centered>
|
|
<span class="cursorR" v-if="props.row.idStatus == 7" @click="cartaAceptacion(props.row.idServicio)">{{ props.row.status }}</span>
|
|
<span v-else class="tag" :class="types(props.row.idStatus)">{{ props.row.status}}</span>
|
|
</b-table-column>
|
|
|
|
<b-table-column field="cartaTermino" label="Carta Término" v-slot="props" centered v-if="idTipoUsuario == 2">
|
|
<div v-if="props.row.idStatus >= 4 && props.row.idStatus <= 7 || props.row.idStatus == 9">
|
|
<span
|
|
v-if="props.row.cartaTermino === 1"
|
|
>
|
|
<b-icon :icon="iconoCarta(props.row.cartaTermino)"
|
|
class="tag is-success"></b-icon>
|
|
</span>
|
|
|
|
<b-button
|
|
v-if="props.row.cartaTermino === null"
|
|
size="is-small"
|
|
@click="botonCarta(props.row.cartaTermino)"
|
|
class="tag is-danger"
|
|
:icon="iconoCarta(props.row.cartaTermino)"
|
|
>
|
|
Carta Término
|
|
</b-button>
|
|
</div>
|
|
</b-table-column>
|
|
|
|
<b-table-column field="cuestionario" label="Cuestionario" v-slot="props" centered v-if="idTipoUsuario == 2">
|
|
<div v-if="props.row.idStatus >= 4 && props.row.idStatus <= 7 || props.row.idStatus == 9">
|
|
<span
|
|
v-if="props.row.cuestionario === 1"
|
|
>
|
|
<b-icon :icon="iconoCuestionario(props.row.cuestionario)"
|
|
class="tag is-success"></b-icon>
|
|
</span>
|
|
|
|
<b-button
|
|
v-if="props.row.cuestionario === null"
|
|
size="is-small"
|
|
@click="botonCuestionario(props.row.cuestionario)"
|
|
class="tag is-danger"
|
|
:icon="iconoCuestionario(props.row.cuestionario)">
|
|
Cuestionario
|
|
</b-button>
|
|
</div>
|
|
</b-table-column>
|
|
</b-table>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import moment from "moment";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
idTipoUsuario: '',
|
|
data: [],
|
|
total: "",
|
|
loading: true,
|
|
page: 1,
|
|
perPage: 25,
|
|
numeroCuenta: "",
|
|
nombre: "",
|
|
idStatus: "",
|
|
};
|
|
},
|
|
methods: {
|
|
onPageChange(page) {
|
|
this.page = page;
|
|
this.obtenerDatos();
|
|
console.log(this.page);
|
|
},
|
|
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) {
|
|
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";
|
|
}
|
|
},
|
|
botonCarta(cartaTermino) {
|
|
this.$router.push("/responsable/carta_termino");
|
|
if (cartaTermino === 1) {
|
|
return "is-success";
|
|
} else {
|
|
return "is-danger";
|
|
}
|
|
},
|
|
botonCuestionario(cuestionario) {
|
|
this.$router.push("/responsable/cuestionario");
|
|
if (cuestionario === 1) {
|
|
return "is-success";
|
|
} else {
|
|
return "is-danger";
|
|
}
|
|
},
|
|
iconoCarta(cartaTermino) {
|
|
if (cartaTermino === 1) {
|
|
return "check";
|
|
} else {
|
|
return "close";
|
|
}
|
|
},
|
|
iconoCuestionario(cuestionario) {
|
|
if (cuestionario === 1) {
|
|
return "check";
|
|
} else {
|
|
return "close";
|
|
}
|
|
},
|
|
fecha(date) {
|
|
const fecha = moment(date.substr(0, 10));
|
|
return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`;
|
|
},
|
|
obtenerDatos (idStatus) {
|
|
this.loading = true
|
|
this.data = []
|
|
axios.get(`${process.env.api}/servicio/servicios_responsable?idUsuario=${this.idTipoUsuario}&pagina=${this.page}&idStatus=${idStatus}&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`)
|
|
.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,
|
|
idStatus: servicios[i].Status.idStatus,
|
|
cuestionario: servicios[i].idCuestionarioPrograma,
|
|
cartaTermino: servicios[i].cartaTermino,
|
|
});
|
|
}
|
|
}
|
|
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;
|
|
this.loading = false;
|
|
})
|
|
.catch((err) => {
|
|
console.log(err.response.data.message);
|
|
this.loading = false;
|
|
});
|
|
},
|
|
cartaAceptacion(idServicio) {
|
|
window.localStorage.setItem("idServicio", idServicio);
|
|
this.$router.push("/responsable/carta_aceptacion");
|
|
},
|
|
insertIdLocal() {
|
|
this.idUsuario = localStorage.getItem("idUsuario");
|
|
},
|
|
getIdLocal () {
|
|
this.idTipoUsuario = localStorage.getItem('idTipoUsuario')
|
|
}
|
|
},
|
|
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;
|
|
}
|
|
.cursorR {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|