tabla responsable aparentemente lista

components/responsable/inputTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section">
+  <section class="section">
     <div class="columns">
       <b-field class="column" label="Número de Cuenta">
         <b-input
@@ -40,7 +40,7 @@
         type="is-info"
         class="column is-align-self-center"
         expanded
-        @click="obtenerDatos(idStatus)"
+        @click="obtenerDatos()"
       >
         Buscar
       </b-button>
@@ -48,14 +48,15 @@
 
     <b-table
       :data="data"
+      :total="total"
+      :current-page="page"
+      :per-page="perPage"
       :loading="isLoading"
+      @page-change="onPageChange"
       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>{{ props.row.Usuario.nombre }}</span>
@@ -103,26 +104,18 @@
         label="Carta Término"
         v-slot="props"
         centered
-        v-if="idTipoUsuario == 2"
       >
-        <div
-          v-if="
-            props.row.Status.idStatus >= 4 && props.row.Status.idStatus != 7
-          "
-        >
+        <div v-if="ultimosCampos(props.row.Status.idStatus)">
           <span v-if="props.row.cartaTermino">
-            <b-icon
-              :icon="iconoCarta(props.row.cartaTermino)"
-              class="tag is-success"
-            ></b-icon>
+            <b-icon icon="check" class="tag is-success"></b-icon>
           </span>
 
           <b-button
-            v-else
+            type="is-danger"
             size="is-small"
-            @click="botonCarta(props.row.cartaTermino, props.row.idServicio)"
-            class="tag is-danger"
-            :icon="iconoCarta(props.row.cartaTermino)"
+            class="tag"
+            @click="responsableUpdate(props.row.idServicio, 'carta_termino')"
+            v-else
           >
             Carta Término
           </b-button>
@@ -130,35 +123,29 @@
       </b-table-column>
 
       <b-table-column
-        field="cuestionario"
+        field="cuestionarioP"
         label="Cuestionario"
         v-slot="props"
         centered
-        v-if="idTipoUsuario == 2"
       >
-        <div v-if="props.row.idStatus >= 4 && props.row.idStatus != 7">
-          <span v-if="props.row.cuestionario != null">
-            <b-icon
-              :icon="iconoCuestionario(props.row.cuestionario)"
-              class="tag is-success"
-            ></b-icon>
+        <div v-if="ultimosCampos(props.row.Status.idStatus)">
+          <span v-if="props.row.idCuestionarioPrograma">
+            <b-icon icon="check" class="tag is-success"></b-icon>
           </span>
 
           <b-button
-            v-if="props.row.cuestionario === null"
+            type="is-danger"
             size="is-small"
-            @click="
-              botonCuestionario(props.row.cuestionario, props.row.idServicio)
-            "
-            class="tag is-danger"
-            :icon="iconoCuestionario(props.row.cuestionario)"
+            class="tag"
+            @click="responsableUpdate(props.row.idServicio, 'cuestionario')"
+            v-else
           >
             Cuestionario
           </b-button>
         </div>
       </b-table-column>
     </b-table>
-  </div>
+  </section>
 </template>
 
 <script>
@@ -168,128 +155,109 @@ import moment from 'moment'
 export default {
   data() {
     return {
+      responsable: {},
       status: [],
-      idTipoUsuario: '',
-      idUsuario: '',
-      tipoUsuario: '',
       data: [],
-      total: '',
-      isLoading: false,
       page: 1,
       perPage: 25,
+      total: 0,
+      isLoading: false,
+      busqueda: {},
       numeroCuenta: '',
+      numeroCuentaAnterior: '',
       nombre: '',
+      nombreAnterior: '',
       idStatus: '',
-      idServicio: '',
-      token: {
-        headers: {
-          token: window.localStorage.getItem('token'),
-        },
-      },
+      idStatusAnterior: '',
+      token: {},
     }
   },
   methods: {
-    onPageChange(page) {
-      this.page = page
-      this.obtenerDatos()
+    ultimosCampos(idStatus) {
+      return idStatus >= 4 && idStatus != 7
     },
     types(idStatus) {
       let style = 'tag'
 
       if (idStatus === 1) style += ' is-dark'
-      else if (idStatus === 2) style += ' is-info'
-      else if (idStatus === 3) style += ' is-warning'
-      else if (idStatus === 4) style += ' is-link'
-      else if (idStatus === 5) style += ' is-success'
-      else if (idStatus === 6) style += ' is-success is-light'
-      else if (idStatus === 7) style += ' is-danger'
-      else if (idStatus === 8) style += ' is-danger'
-      else if (idStatus === 9) style += ' is-danger'
+      if (idStatus === 2) style += ' is-info'
+      if (idStatus === 3) style += ' is-warning'
+      if (idStatus === 4) style += ' is-link'
+      if (idStatus === 5) style += ' is-success'
+      if (idStatus === 6) style += ' is-success is-light'
+      if (idStatus === 7) style += ' is-danger'
+      if (idStatus === 8) style += ' is-danger'
+      if (idStatus === 9) style += ' is-danger'
       return style
     },
-    botonCarta(cartaTermino, idServicio) {
-      window.localStorage.setItem('idServicio', idServicio)
-      window.localStorage.setItem('cartaTermino', cartaTermino)
-      this.$router.push('/responsable/carta_termino')
-      if (cartaTermino === 1) {
-        return 'is-success'
-      } else {
-        return 'is-danger'
-      }
-    },
-    botonCuestionario(cuestionario, idServicio) {
-      window.localStorage.setItem('idServicio', idServicio)
-      window.localStorage.setItem('cuestionario', cuestionario)
-      this.$router.push('/responsable/cuestionario')
-      if (cuestionario === 1) {
-        return 'is-success'
-      } else {
-        return 'is-danger'
-      }
-    },
-    iconoCarta(cartaTermino) {
-      if (cartaTermino != null) {
-        return 'check'
-      }
-    },
-    iconoCuestionario(cuestionario) {
-      if (cuestionario != null) {
-        return 'check'
-      }
-    },
     fecha(date) {
       const fecha = moment(date.substr(0, 10))
       return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`
     },
-    obtenerDatos(idStatus) {
+    onPageChange(page) {
+      this.page = page
+      this.obtenerDatos()
+    },
+    responsableUpdate(idServicio, path) {
+      window.localStorage.setItem('idServicio', idServicio)
+      this.$$router.push(`/responsable/${path}`)
+    },
+    getLocalhostInfo() {
+      this.responsable.idUsuario = localStorage.getItem('idUsuario')
+      this.responsable.idTipoUsuario = localStorage.getItem('idTipoUsuario')
+      this.responsable.tipoUsuario = localStorage.getItem('tipoUsuario')
+      this.token = {
+        headers: {
+          token: window.localStorage.getItem('token'),
+        },
+      }
+    },
+    obtenerDatos() {
+      let data = ''
+
       this.isLoading = true
-      this.data = []
+      if (
+        this.numeroCuenta != this.numeroCuentaAnterior ||
+        this.nombre != this.nombreAnterior ||
+        this.idStatus != this.idStatusAnterior
+      ) {
+        this.page = 1
+        this.numeroCuentaAnterior = this.numeroCuenta
+        this.nombreAnterior = this.nombre
+        this.idStatusAnterior = this.idStatus
+      }
+      if (this.idStatus) data += `&idStatus=${this.idStatus}`
+      if (this.nombre) data += `&nombre=${this.nombre}`
+      if (this.numeroCuenta) data = `&numeroCuenta=${this.numeroCuenta}`
       axios
         .get(
-          `${process.env.api}/servicio/servicios_responsable?idUsuario=${this.idUsuario}&pagina=${this.page}&idStatus=${this.idStatus}&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`,
+          `${process.env.api}/servicio/servicios_responsable?idUsuario=${this.responsable.idUsuario}&pagina=${this.page}${data}`,
           this.token
         )
         .then((res) => {
-          const servicios = res.data.serviciosResponsable
-
           this.data = res.data.serviciosResponsable
-          console.log(this.data)
-
-          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.total = res.data.count
           this.isLoading = false
         })
+        .catch((err) => {
+          this.isLoading = false
+          this.imprimirError(err.response.data)
+        })
     },
-    cartaAceptacion(idServicio, idStatus) {
-      window.localStorage.setItem('idServicio', idServicio)
-      window.localStorage.setItem('cartaAceptacion', idStatus)
-      this.$router.push('/responsable/carta_aceptacion')
+    obtenerCatalogoStatus() {
+      axios
+        .get(`${process.env.api}/status`, this.token)
+        .then((res) => {
+          this.status = res.data
+        })
+        .catch((err) => {
+          this.imprimirError(err.response.data)
+        })
     },
-    getIdLocal() {
-      this.idUsuario = localStorage.getItem('idUsuario')
-      this.idTipoUsuario = localStorage.getItem('idTipoUsuario')
-      this.tipoUsuario = localStorage.getItem('tipoUsuario')
-
-      if (this.idTipoUsuario != 2 && this.tipoUsuario != 'responsable') {
-        localStorage.clear()
-        this.$router.push('/')
-      }
-    },
-    error(msj) {
+    imprimirError(err) {
       this.$buefy.dialog.alert({
         title: 'Error',
-        message: msj,
+        message: err.message,
         type: 'is-danger',
         hasIcon: true,
         icon: 'alert-circle',
@@ -297,22 +265,16 @@ export default {
         ariaRole: 'alertdialog',
         ariaModal: true,
       })
+      if (err.err === 'token error') {
         localStorage.clear()
-        this.$router.push(`/`)
-    },
-    obtenerStatus() {
-      axios
-        .get(`${process.env.api}/status`, this.token)
-        .then((res) => {
-          this.status = res.data
-        })
-        .catch((err) => {})
+        this.$router.push('/')
+      }
     },
   },
   created() {
-    this.getIdLocal()
-    this.obtenerStatus()
-    this.obtenerDatos(0)
+    this.getLocalhostInfo()
+    this.obtenerCatalogoStatus()
+    this.obtenerDatos()
   },
 }
 </script>