tabla casos especiales lista

components/casoEspecial/tablaServicios.vue

@@ -1,33 +1,38 @@
 <template>
-  <section class="section">
+  <section class="mx-2">
     <h3 class="title">Casos Especiales</h3>
 
     <div class="columns">
       <b-field class="column" label="Número de Cuenta">
         <b-input
           type="text"
-          placeholder="No.Cuenta"
           icon="school"
-          rounded
-          v-model="numeroCuenta"
+          placeholder="No.Cuenta"
           maxlength="9"
           @keyup.enter.native="obtenerCasosEspeciales()"
+          v-model="busqueda.numeroCuenta"
+          rounded
         ></b-input>
       </b-field>
 
       <b-field class="column" label="Nombre">
         <b-input
           type="name"
-          placeholder="Nombre"
           icon="account"
-          rounded
-          v-model="nombre"
+          placeholder="Nombre"
           @keyup.enter.native="obtenerCasosEspeciales()"
+          v-model="busqueda.nombre"
+          rounded
         ></b-input>
       </b-field>
 
       <b-field class="column" label="Status">
-        <b-select icon="information" expanded rounded v-model="idStatus">
+        <b-select
+          icon="information"
+          v-model="busqueda.idStatus"
+          expanded
+          rounded
+        >
           <option value="">Status</option>
 
           <option
@@ -41,14 +46,16 @@
         </b-select>
       </b-field>
 
-      <b-button
-        type="is-info"
-        class="column is-align-self-center"
-        expanded
-        @click="obtenerCasosEspeciales()"
-      >
-        Buscar
-      </b-button>
+      <div class="column is-align-self-center">
+        <b-button
+          type="is-info"
+          @click="obtenerCasosEspeciales()"
+          expanded
+          rounded
+        >
+          Buscar
+        </b-button>
+      </div>
     </div>
 
     <b-table
@@ -112,13 +119,10 @@ export default {
       perPage: 25,
       total: 0,
       isLoading: false,
-      busqueda: {},
-      numeroCuenta: '',
-      numeroCuentaAnterior: '',
-      nombre: '',
-      nombreAnterior: '',
-      idStatus: '',
-      idStatusAnterior: '',
+      busqueda: {
+        idStatus: '',
+      },
+      busquedaAnterior: {},
       token: {},
     }
   },
@@ -156,18 +160,19 @@ export default {
 
       this.isLoading = true
       if (
-        this.numeroCuenta != this.numeroCuentaAnterior ||
-        this.nombre != this.nombreAnterior ||
-        this.idStatus != this.idStatusAnterior
+        this.busqueda.numeroCuenta != this.busquedaAnterior.numeroCuenta ||
+        this.busqueda.nombre != this.busquedaAnterior.nombre ||
+        this.busqueda.idStatus != this.busquedaAnterior.idStatus
       ) {
         this.page = 1
-        this.numeroCuentaAnterior = this.numeroCuenta
-        this.nombreAnterior = this.nombre
-        this.idStatusAnterior = this.idStatus
+        this.busquedaAnterior.numeroCuenta = this.busqueda.numeroCuenta
+        this.busquedaAnterior.nombre = this.busqueda.nombre
+        this.busquedaAnterior.idStatus = this.busqueda.idStatus
       }
-      if (this.idStatus) data += `&idStatus=${this.idStatus}`
-      if (this.nombre) data += `&nombre=${this.nombre}`
-      if (this.numeroCuenta) data = `&numeroCuenta=${this.numeroCuenta}`
+      if (this.busqueda.idStatus) data += `&idStatus=${this.busqueda.idStatus}`
+      if (this.busqueda.nombre) data += `&nombre=${this.busqueda.nombre}`
+      if (this.busqueda.numeroCuenta)
+        data = `&numeroCuenta=${this.busqueda.numeroCuenta}`
       axios
         .get(
           `${process.env.api}/caso_especial/servicios_especiales?&pagina=${this.page}${data}`,

pages/casoEspecial/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="container" style="margin-top: 2%; margin-bottom: 4%">
-    <b-button class="is-info mb-5" tag="router-link" to="/casoEspecial/nuevo">
-      Agregar alumno
-    </b-button>
+    <div class="mb-5">
+      <b-button type="is-info" tag="router-link" to="/casoEspecial/nuevo">
+        Agregar alumno
+      </b-button>
+    </div>
 
     <TablaServicios />
   </div>