last_changes1
elmer-20
2 months ago
parent
6694500ed5
commit
8f35717dc9
@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div class="title">Seguimiento del proceso</div>
|
||||
|
||||
<a-card class="card" :bordered="true">
|
||||
<template #title>
|
||||
<div class="header">
|
||||
<div class="headerLeft">
|
||||
<div class="subtitle">
|
||||
Proceso 31: <b>Examen General 2026-I</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="headerRight">
|
||||
<a-button @click="cargarAvance" :loading="loading" type="primary">
|
||||
Actualizar
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a-spin :spinning="loading">
|
||||
<!-- NO PARTICIPA -->
|
||||
<div v-if="noParticipa" class="noBox">
|
||||
<div class="noTitle">Actualmente no estás participando en ningún proceso</div>
|
||||
<div class="noDesc">
|
||||
Si crees que esto es un error, verifica que hayas realizado tu preinscripción o inicia sesión con el DNI correcto.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PARTICIPA -->
|
||||
<template v-else>
|
||||
<a-alert
|
||||
v-if="avance"
|
||||
:message="`Actualmente estás en la etapa de: ${avance.estado || '-'}`"
|
||||
:description="indicador"
|
||||
type="info"
|
||||
show-icon
|
||||
class="alertState"
|
||||
/>
|
||||
|
||||
<div class="timelineWrap" v-if="avance">
|
||||
<div class="timelineHeader">
|
||||
<div class="chip">
|
||||
<span class="chipLabel">Proceso</span>
|
||||
<span class="chipValue">Examen General 2026-I</span>
|
||||
</div>
|
||||
<div class="chip">
|
||||
<span class="chipLabel">Etapa</span>
|
||||
<span class="chipValue strong">{{ avance.estado || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simpleBox">
|
||||
<div class="k">Indicador</div>
|
||||
<div class="v">{{ indicador }}</div>
|
||||
|
||||
<div v-if="avance.observacion" class="obs">
|
||||
<div class="obsTitle">Observación</div>
|
||||
<div class="obsText">{{ avance.observacion }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { message } from "ant-design-vue";
|
||||
import api from "../../axiosPostulante";
|
||||
|
||||
const loading = ref(false);
|
||||
const avance = ref(null);
|
||||
|
||||
// cuando el backend no devuelve nada / 404 / estado false
|
||||
const noParticipa = ref(false);
|
||||
|
||||
// fijo: Proceso 31
|
||||
const idProceso = 31;
|
||||
|
||||
const cargarAvance = async () => {
|
||||
loading.value = true;
|
||||
avance.value = null;
|
||||
noParticipa.value = false;
|
||||
|
||||
try {
|
||||
const { data } = await api.get(`/mis-procesos/${idProceso}/avance`);
|
||||
|
||||
// Caso OK con datos
|
||||
if (data?.success && data?.data) {
|
||||
avance.value = data.data;
|
||||
noParticipa.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Caso: success false o data vacío
|
||||
avance.value = null;
|
||||
noParticipa.value = true;
|
||||
|
||||
} catch (e) {
|
||||
// 404 => no participa
|
||||
if (e?.response?.status === 404) {
|
||||
avance.value = null;
|
||||
noParticipa.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// Si tu backend manda 200 pero { success:false, message:"..." } no cae aquí.
|
||||
message.error(e.response?.data?.message || "Error al cargar seguimiento");
|
||||
// ante error real, decide si mostrar "no participa" o no:
|
||||
noParticipa.value = true;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const normalizar = (txt) =>
|
||||
String(txt || "")
|
||||
.toLowerCase()
|
||||
.normalize("NFD")
|
||||
.replace(/[\u0300-\u036f]/g, "")
|
||||
.trim();
|
||||
|
||||
const indicador = computed(() => {
|
||||
const st = normalizar(avance.value?.estado);
|
||||
if (!st) return "Sigue revisando esta sección para ver el siguiente paso.";
|
||||
|
||||
if (st.includes("preins"))
|
||||
return "Ya realizaste la preinscripción. Por ahora, espera que el sistema habilite el siguiente paso.";
|
||||
if (st.includes("inscrip"))
|
||||
return "Estás en inscripción final. Completa lo solicitado para generar tu constancia.";
|
||||
return "Por ahora, espera que el sistema habilite el siguiente paso.";
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
cargarAvance();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin: 16px auto;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(1.2rem, 4vw, 1.8rem);
|
||||
font-weight: 700;
|
||||
color: #0d1b52;
|
||||
line-height: 1.2;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.alertState {
|
||||
margin-bottom: 14px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.timelineWrap {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.timelineHeader {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
background: #fafafa;
|
||||
border-radius: 999px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.chipLabel {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
font-weight: 700;
|
||||
}
|
||||
.chipValue {
|
||||
font-weight: 900;
|
||||
}
|
||||
.chipValue.strong {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.simpleBox {
|
||||
background: #fafafa;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 14px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.k {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.v {
|
||||
font-weight: 900;
|
||||
margin-top: 6px;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.obs {
|
||||
margin-top: 12px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
border: 1px dashed rgba(22, 119, 255, 0.35);
|
||||
}
|
||||
|
||||
.obsTitle {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.obsText {
|
||||
font-weight: 900;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Caja “no participa” */
|
||||
.noBox {
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
background: rgba(107, 114, 128, 0.06);
|
||||
border: 1px solid rgba(107, 114, 128, 0.18);
|
||||
}
|
||||
|
||||
.noTitle {
|
||||
font-weight: 900;
|
||||
color: #111827;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.noDesc {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue