partiendo en componentes

components/admin/servicio/datosPersonales.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="datosPersonales">
+    <p class="is-size-4"><b>Datos personales</b></p>
+    <p class="is-size-5 mt-5" v-if="alumno.Usuario.nombre">
+      <b>Nombre: </b>{{ alumno.Usuario.nombre }}
+    </p>
+    <p class="is-size-5 mt-5" v-if="alumno.Usuario.usuario">
+      <b>Número de cuenta: </b>{{ alumno.Usuario.usuario }}
+    </p>
+    <p class="is-size-5 mt-5" v-if="alumno.Carrera.carrera">
+      <b>Correo: </b>{{ alumno.Carrera.carrera }}
+    </p>
+    <p class="is-size-5 mt-5" v-if="alumno.correo">
+      <b>Correo: </b>{{ alumno.correo }}
+    </p>
+    <p class="is-size-5 mt-5" v-if="alumno.creditos">
+      <b>Créditos: </b>{{ alumno.creditos + "%" }}
+    </p>
+    <p class="is-size-5 mt-5" v-if="alumno.fechaInicio">
+      <b>Fecha de inicio: </b>{{ fecha(alumno.fechaInicio) }}
+    </p>
+    <p class="is-size-5 mt-5" v-if="alumno.fechaFin">
+      <b>Fecha de fin: </b>{{ fecha(alumno.fechaFin) }}
+    </p>
+    <p class="is-size-5 mt-5" v-if="alumno.telefono">
+      <b>Teléfono: </b>{{ alumno.telefono }}
+    </p>
+    <p class="is-size-5 mt-5" v-if="alumno.direccion">
+      <b>Dirección: </b>{{ alumno.direccion }}
+    </p>
+    <p class="is-size-5 mt-5" v-if="alumno.fechaNacimiento">
+      <b>Fecha de nacimiento: </b>{{ fecha(alumno.fechaNacimiento) }}
+    </p>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+
+export default {
+  props: {
+    alumno: Object
+  },
+  methods: {
+    fecha(date) {
+      const fecha = moment(date.substr(0, 10));
+      return `${fecha.year()}/${fecha.month() + 1}/${fecha.date()}`;
+    },
+  },
+};
+</script>

components/admin/servicio/datosPrograma.vue

@@ -0,0 +1,29 @@
+<template>
+  <div id="programa">
+    <br />
+    <p class="is-size-4"><b>Datos del programa</b></p>
+    <br />
+    <p class="is-size-5" v-if="programa.programa">
+      <b>Programa: </b><span> {{ programa.programa }} </span>
+    </p>
+    <p class="is-size-5" v-if="programa.clavePrograma">
+      <b>Clave del programa: </b
+      ><span> {{ programa.clavePrograma }} </span>
+    </p>
+    <p class="is-size-5" v-if="programa.dependencia">
+      <b>Dependecia: </b><span> {{ programa.dependencia }} </span>
+    </p>
+    <p class="is-size-5" v-if="programa.institucion">
+      <b>Institución: </b><span> {{ programa.institucion }} </span>
+    </p>
+    <br />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    programa: Object
+  }
+}
+</script>

components/admin/servicio/modificar/form.vue

@@ -58,7 +58,7 @@
       </b-field>
       <p class="is-size-5">Carta de aceptación</p>
       <br />
-      <b-field>
+      <b-field v-if="viejo.cartaAceptacion">
         <b-upload
           v-model="nuevo.cartaAceptacion"
           type="is-black"
@@ -84,7 +84,7 @@
       </b-field>
       <p class="is-size-5">Carta de término</p>
       <br />
-      <b-field>
+      <b-field v-if="viejo.cartaTermino">
         <b-upload
           v-model="nuevo.cartaTermino"
           type="is-black"
@@ -110,7 +110,7 @@
       </b-field>
       <p class="is-size-5">Informe global</p>
       <br />
-      <b-field>
+      <b-field v-if="viejo.informeGlobal">
         <b-upload
           v-model="nuevo.informeGlobal"
           type="is-black"
@@ -313,7 +313,7 @@ export default {
     fecha(date) {
       if (date) {
         const fecha = moment(date.substr(0, 10));
-        return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`;
+        return `${fecha.year()}/${fecha.month() + 1}/${fecha.date()}`;
       }
     },
   },

components/admin/servicio/tituloServicio.vue

@@ -0,0 +1,30 @@
+<template>
+  <div id="Status">
+    <p class="is-size-3" v-if="status == 1">
+      Pre Registro
+    </p>
+    <p class="is-size-3" v-else-if="status == 2">
+      Pre Registro Válidado
+    </p>
+    <p class="is-size-3" v-else-if="status == 3">
+      Registro
+    </p>
+    <p class="is-size-3" v-else-if="status == 4">
+      Pre Término
+    </p>
+    <p class="is-size-3" v-else-if="status == 5">
+      Término
+    </p>
+    <p class="is-size-3" v-else-if="status == 6">
+      Liberación
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    status: Number,
+  },
+};
+</script>

components/admin/servicio/tituloStatus.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h3 class="is-size-4 mb-5" v-if="status == 1">
+      Confirmar el pre-registro del alumno
+    </h3>
+    <h3 class="is-size-4 mb-5" v-if="status == 4">
+      Término
+    </h3>
+    <h3 class="is-size-4 mb-5" v-if="status == 5">
+      Validar el término del alumno
+    </h3>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    status: Number
+  }
+}
+</script>

components/admin/servicio/vistaServicio.vue

@@ -5,78 +5,17 @@
         Regresar
       </b-button>
     </div>
-    <div id="Status">
-      <p class="is-size-3" v-if="alumno.Status.idStatus == 1">
-        Pre Registro
-      </p>
-      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 2">
-        Pre Registro Válidado
-      </p>
-      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 3">
-        Registro
-      </p>
-      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 4">
-        Pre Término
-      </p>
-      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 5">
-        Término
-      </p>
-      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 6">
-        Liberación
-      </p>
-    </div>
-    <div id="programa">
-      <br />
-      <p class="is-size-4"><b>Datos del programa</b></p>
-      <br />
-      <p class="is-size-5" v-if="alumno.Programa.programa">
-        <b>Programa: </b><span> {{ alumno.Programa.programa }} </span>
-      </p>
-      <p class="is-size-5" v-if="alumno.Programa.clavePrograma">
-        <b>Clave del programa: </b
-        ><span> {{ alumno.Programa.clavePrograma }} </span>
-      </p>
-      <p class="is-size-5" v-if="alumno.Programa.dependencia">
-        <b>Dependecia: </b><span> {{ alumno.Programa.dependencia }} </span>
-      </p>
-      <p class="is-size-5" v-if="alumno.Programa.institucion">
-        <b>Institución: </b><span> {{ alumno.Programa.institucion }} </span>
-      </p>
-      <br />
-    </div>
-    <div id="datosPersonales">
-      <p class="is-size-4"><b>Datos personales</b></p>
-      <p class="is-size-5 mt-5" v-if="alumno.Usuario.nombre">
-        <b>Nombre: </b>{{ alumno.Usuario.nombre }}
-      </p>
-      <p class="is-size-5 mt-5" v-if="alumno.Usuario.usuario">
-        <b>Número de cuenta: </b>{{ alumno.Usuario.usuario }}
-      </p>
-      <p class="is-size-5 mt-5" v-if="alumno.Carrera.carrera">
-        <b>Correo: </b>{{ alumno.Carrera.carrera }}
-      </p>
-      <p class="is-size-5 mt-5" v-if="alumno.correo">
-        <b>Correo: </b>{{ alumno.correo }}
-      </p>
-      <p class="is-size-5 mt-5" v-if="alumno.creditos">
-        <b>Créditos: </b>{{ alumno.creditos + '%' }}
-      </p>
-      <p class="is-size-5 mt-5" v-if="alumno.fechaInicio">
-        <b>Fecha de inicio: </b>{{ fecha(alumno.fechaInicio) }}
-      </p>
-      <p class="is-size-5 mt-5" v-if="alumno.fechaFin">
-        <b>Fecha de fin: </b>{{ fecha(alumno.fechaFin) }}
-      </p>
-      <p class="is-size-5 mt-5" v-if="alumno.telefono">
-        <b>Teléfono: </b>{{ alumno.telefono }}
-      </p>
-      <p class="is-size-5 mt-5" v-if="alumno.direccion">
-        <b>Dirección: </b>{{ alumno.direccion }}
-      </p>
-      <p class="is-size-5 mt-5" v-if="alumno.fechaNacimiento">
-        <b>Fecha de nacimiento: </b>{{ fecha(alumno.fechaNacimiento) }}
-      </p>
-    </div>
+    <!--Componente titulo-->
+    <TituloServicio :status="alumno.Status.idStatus"/>
+    <!--Componente programa-->
+    <DatosPrograma :programa="alumno.Programa" />
+    <!--Componente datosPersonales, alumno-->
+    <DatosPersonales :alumno="alumno"/>
+    <!--Componente Enlaces 
+      alumno.Status.idStatus
+      alumno.cartaAceptacion
+      linkCartaAceptacion
+    -->
     <div id="enlaces">
       <b-button
         class="boton is-info"
@@ -85,13 +24,7 @@
         Editar información
       </b-button>
       <br /><br />
-      <h3 class="is-size-4 mb-5" v-if="alumno.Status.idStatus == 1">
-        Confirmar el pre-registro del alumno
-      </h3>
-      <h3 class="is-size-4 mb-5" v-if="alumno.Status.idStatus == 4">Término</h3>
-      <h3 class="is-size-4 mb-5" v-if="alumno.Status.idStatus == 5">
-        Validar el término del alumno
-      </h3>
+      <TituloStatus :status="alumno.Status.idStatus"/>
       <div v-if="alumno.cartaAceptacion" class="">
         <span class="spanDoc"><strong>Ver carta de aceptación</strong></span>
         <a :href="linkCartaAceptacion" target="_blank">
@@ -263,8 +196,18 @@
 
 <script>
 import axios from "axios";
-import moment from "moment";
+import tituloServicio from "./tituloServicio"
+import tituloStatus from "./tituloStatus"
+import datosPrograma from "./datosPrograma"
+import datosPersonales from "./datosPersonales"
+
 export default {
+  components:{ 
+    tituloServicio,
+    datosPrograma,
+    datosPersonales,
+    tituloStatus
+  },
   data() {
     return {
       alumno: {
@@ -317,6 +260,7 @@ export default {
         .then((res) => {
           this.isLoading = false;
           this.alumno = res.data;
+          this.alumno.creditos = Number(res.data.creditos)
           if (this.alumno.cartaAceptacion) {
             this.linkCartaAceptacion = `https://drive.google.com/file/d/${this.alumno.cartaAceptacion}/view?usp=sharing`;
           }
@@ -463,10 +407,6 @@ export default {
           console.log(err);
         });
     },
-    fecha(date) {
-      const fecha = moment(date.substr(0, 10));
-      return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`;
-    },
     confirmarRegistro() {
       this.isLoading = true;
       const data = {