From 943dad3f962d2e4dda9d6c721812af9f916bb62e Mon Sep 17 00:00:00 2001
From: mxrco <yosoymarco3@gmail.com>
Date: Sat, 6 Feb 2021 23:40:22 -0600
Subject: [PATCH] tablas caso especial

---
 .../admin/especial/tablaCasosEspeciales.vue   | 315 ++++++++++++++++++
 components/casoEspecial/tablaServicios.vue    | 304 +++++++++++++++++
 components/layouts/Logout.vue                 |  22 +-
 pages/admin/especial/index.vue                |  19 ++
 pages/admin/index.vue                         |   3 +
 pages/casoEspecial/index.vue                  |  18 +
 6 files changed, 670 insertions(+), 11 deletions(-)
 create mode 100644 components/admin/especial/tablaCasosEspeciales.vue
 create mode 100644 components/casoEspecial/tablaServicios.vue

diff --git a/components/admin/especial/tablaCasosEspeciales.vue b/components/admin/especial/tablaCasosEspeciales.vue
new file mode 100644
index 0000000..cf3a051
--- /dev/null
+++ b/components/admin/especial/tablaCasosEspeciales.vue
@@ -0,0 +1,315 @@
+<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="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: [
+        { nombre: "Marco", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:1 , diaCreado: "01/01/2021" },
+        { nombre: "Marco", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:2 , diaCreado: "01/01/2021" },
+        { nombre: "Marco", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:3 , diaCreado: "01/01/2021" },
+        { nombre: "Marco", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:4 , diaCreado: "01/01/2021" },
+        { nombre: "Tomy", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:5  , diaCreado: "01/01/2021"},
+        { nombre: "Lemuel", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:6, diaCreado: "01/01/2021" },
+        { nombre: "Lemuel", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:7, diaCreado: "01/01/2021" },
+        { nombre: "Lemuel", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:8, diaCreado: "01/01/2021" },
+        { nombre: "Lemuel", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:9, diaCreado: "01/01/2021" },
+        { nombre: "Lemuel", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:10, diaCreado: "01/01/2021" },
+      ],
+      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-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";
+      }
+    },
+    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/especial/casoEspecial");
+    },
+    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;
+      }
+
+      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>
diff --git a/components/casoEspecial/tablaServicios.vue b/components/casoEspecial/tablaServicios.vue
new file mode 100644
index 0000000..a084698
--- /dev/null
+++ b/components/casoEspecial/tablaServicios.vue
@@ -0,0 +1,304 @@
+<template>
+  <div
+    v-if="this.idTipoUsuario == 2 && this.tipoUsuario == 'responsable'"
+    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">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 Aceptación 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="isLoading"
+          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.idStatus)"
+              >{{ 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.idStatus)"
+              >{{ 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.idStatus)"
+              >{{ props.row.carrera }}</span
+            >
+            <span v-else>{{ props.row.carrera }}</span>
+          </b-table-column>
+          <b-table-column field="status" label="Status" v-slot="props" centered>
+            <span
+              v-if="props.row.idStatus == 7"
+              class="cursorR tag"
+              :class="types(props.row.idStatus)"
+              @click="cartaAceptacion(props.row.idServicio, props.row.idStatus)"
+              >{{ props.row.status }}</span
+            >
+            <span v-else class="tag" :class="types(props.row.idStatus)">{{
+              props.row.status
+            }}</span>
+          </b-table-column>
+        </b-table>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import moment from "moment";
+
+export default {
+  data() {
+    return {
+      idTipoUsuario: "",
+      idUsuario: "",
+      tipoUsuario: "",
+      data: [
+        { nombre: "Marco", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:1 },
+        { nombre: "Marco", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:2 },
+        { nombre: "Marco", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:3 },
+        { nombre: "Marco", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:4 },
+        { nombre: "Tomy", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:5 },
+        { nombre: "Lemuel", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:6 },
+        { nombre: "Lemuel", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:7 },
+        { nombre: "Lemuel", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:8 },
+        { nombre: "Lemuel", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:9 },
+        { nombre: "Lemuel", numeroCuenta: "316019251", carrera: "Matemáticas Aplicadas y Computación", status: "status", idStatus:1 },
+      ],
+      total: "",
+      isLoading: false,
+      page: 1,
+      perPage: 25,
+      numeroCuenta: "",
+      nombre: "",
+      idStatus: "",
+      idServicio: "",
+      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-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) {
+        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_responsable?idUsuario=${this.idUsuario}&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,
+    //             idStatus: servicios[i].Status.idStatus,
+    //             cuestionario: servicios[i].idCuestionarioPrograma,
+    //             cartaTermino: servicios[i].cartaTermino,
+    //             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;
+    //     });
+    // },
+    getIdLocal() {
+      this.idUsuario = 1//localStorage.getItem("idUsuario");
+      this.idTipoUsuario = 2//localStorage.getItem("idTipoUsuario");
+      this.tipoUsuario = "responsable"//localStorage.getItem("tipoUsuario");
+      // if (this.idTipoUsuario != 2 && this.tipoUsuario != "responsable") {
+      //   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;
+}
+.cursorR {
+  cursor: pointer;
+}
+</style>
diff --git a/components/layouts/Logout.vue b/components/layouts/Logout.vue
index 7a2839e..7bd5c27 100644
--- a/components/layouts/Logout.vue
+++ b/components/layouts/Logout.vue
@@ -20,17 +20,17 @@ export default {
         : "",
     };
   },
-  created() {
-    if (
-      !localStorage.getItem("usuario") ||
-      !localStorage.getItem("idUsuario") ||
-      !localStorage.getItem("idTipoUsuario") ||
-      !localStorage.getItem("nombre") ||
-      !localStorage.getItem("tipoUsuario") ||
-      !localStorage.getItem("token")
-    )
-      this.$router.push("/");
-  },
+  // created() {
+  //   if (
+  //     !localStorage.getItem("usuario") ||
+  //     !localStorage.getItem("idUsuario") ||
+  //     !localStorage.getItem("idTipoUsuario") ||
+  //     !localStorage.getItem("nombre") ||
+  //     !localStorage.getItem("tipoUsuario") ||
+  //     !localStorage.getItem("token")
+  //   )
+  //     this.$router.push("/");
+  // },
   methods: {
     cerrarSesion() {
       localStorage.clear();
diff --git a/pages/admin/especial/index.vue b/pages/admin/especial/index.vue
index e69de29..d46f21e 100644
--- a/pages/admin/especial/index.vue
+++ b/pages/admin/especial/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="container" style="margin-top: 1.4%; margin-bottom: 4%">
+    <BotonRegresar 
+      :path="'/admin'"
+    />
+    <TablaCasosEspeciales/>
+  </div>
+</template>
+
+<script>
+import botonRegresar from '../../../components/botonRegresar'
+import TablaCasosEspeciales from '../../../components/admin/especial/tablaCasosEspeciales.vue'
+export default {
+  components: {
+    botonRegresar,
+    TablaCasosEspeciales
+  }
+}
+</script>
\ No newline at end of file
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index d7025c8..b6f2b97 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -8,6 +8,9 @@
         <b-button type="is-info" tag="router-link" to="/admin/cuestionario">
           Ver cuestionarios
         </b-button>
+        <b-button type="is-info" tag="router-link" to="/admin/especial">
+          Ver casos especiales
+        </b-button>
       </div>
       <div class="pb-0">
         <p class="title is-three-fifths is-offset-one-fifth">
diff --git a/pages/casoEspecial/index.vue b/pages/casoEspecial/index.vue
index e69de29..08a1531 100644
--- a/pages/casoEspecial/index.vue
+++ b/pages/casoEspecial/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="container" style="margin-top: 2%; margin-bottom: 4%">
+    <b-button class="is-info mb-5" tag="router-link" to="/admin/especial">
+      Agregar alumno
+    </b-button>
+    <TablaServicios />  
+  </div>
+
+</template>
+
+<script>
+import tablaServicios from '../../components/casoEspecial/tablaServicios'
+export default {
+  components: {
+    tablaServicios,
+  }
+}
+</script>
\ No newline at end of file