@nixweb/nixloc-ui 0.0.97 → 0.0.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.97",
+  "version": "0.0.98",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,
@@ -12,10 +12,12 @@
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
     "bootstrap-vue": "^2.0.0-rc.11",
-    "file-saver": "^2.0.5",
     "sass-loader": "^12.4.0",
     "vodal": "^2.4.0",
     "vue-color": "^2.7.0",
+    "vue-html2pdf": "^1.8.0",
+    "vue-json-excel": "^0.3.0",
+    "vue-print-nb": "^1.7.5",
     "vue-currency-filter": "^3.3.0",
     "vue-js-toggle-button": "^1.3.0",
     "vue-loading-template": "^1.3.0",
@@ -28,8 +30,7 @@
     "vue-toggles": "^1.1.4",
     "vue-upload-file": "^1.1.0",
     "vue2-datepicker": "^2.13.0",
-    "vue2-editor": "^2.6.6",
-    "xlsx": "^0.18.5"
+    "vue2-editor": "^2.6.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

package/src/component/shared/CabecalhoImpressao.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="div-cabecalho somente-impressao">
+    <div class="titulo">{{ nomeArquivo }}</div>
+    <div class="lado-a-lado div-tag" v-for="tag in tags" :key="tag.id">
+      <span>{{ tag.titulo }}</span> <span>{{ tag.valor }}</span>
+      <span>,</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "CabecalhoImpressao",
+  computed: {
+    ...mapGetters("relatorio", ["tags"]),
+    nomeArquivo() {
+      return this.$route.matched[0].props.default.relatorio;
+    },
+  },
+};
+</script>
+<style scoped>
+.div-cabecalho {
+  margin: 20px;
+}
+
+.div-tag {
+  margin-right: 10px;
+}
+
+.titulo {
+  font-size: 18px;
+}
+</style>

package/src/component/shared/ExportarExcel.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <download-excel
+      :fields="coluna"
+      :data="dados"
+      :before-finish="exportacaoFinalizada"
+      worksheet="Planilha"
+      :name="`${nomeArquivo}.xls`"
+    >
+      <Botao
+        chave="exportarExcel"
+        :tipo="botao.tipo"
+        :titulo="botao.titulo"
+        classeIcone="fas fa-file-excel"
+        :tamanho="botao.tamanho"
+      />
+    </download-excel>
+  </div>
+</template>
+
+<script>
+import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ExportarExcel",
+  props: {
+    botao: Object,
+    cabecalho: Array,
+    dados: Array,
+  },
+  components: {
+    Botao,
+  },
+  data() {
+    return {
+      json_meta: [
+        [
+          {
+            key: "charset",
+            value: "utf-8",
+          },
+        ],
+      ],
+    };
+  },
+  methods: {
+    ...mapMutations("generic", ["removeCarregando"]),
+    exportacaoFinalizada() {
+      this.removeCarregando(["exportarExcel"]);
+    },
+  },
+  computed: {
+    coluna() {
+      var object = this.cabecalho.reduce(
+        (obj, item) => Object.assign(obj, { [item.titulo]: item.campo }),
+        {}
+      );
+      return object;
+    },
+    nomeArquivo() {
+      return this.$route.matched[0].props.default.relatorio;
+    },
+  },
+};
+</script>

package/src/component/shared/{Imprimir.vue → ExportarPDF.vue}

@@ -16,7 +16,7 @@
       :paginate-elements-by-height="1400"
       :filename="nomeArquivo"
       :pdf-quality="2"
-      :manual-pagination="true"
+      :manual-pagination="false"
       :pdf-format="tamanhoPagina"
       :pdf-orientation="orientacao"
       pdf-content-width="100%"
@@ -51,7 +51,7 @@ import BarraRolagem from "../layout/BarraRolagem.vue";
 import VueHtml2pdf from "vue-html2pdf";
 
 export default {
-  name: "Imprimir",
+  name: "ExportarPDF",
   components: { VueHtml2pdf, BarraRolagem, Carregando },
   props: {
     titulo: String,
@@ -76,7 +76,9 @@ export default {
         this.carregando = false;
       }
     },
-    hasStartedGeneration() {},
+    hasStartedGeneration() {
+      console.log("começou");
+    },
     hasDownloaded() {
       console.log("finalizou");
     },

package/src/component/shared/query-builder/Tags.vue

@@ -22,51 +22,15 @@ export default {
   props: {
     nomeEvento: String,
   },
-  data() {
-    return {
-      tags: [],
-    };
-  },
+
   computed: {
-    ...mapGetters("relatorio", ["filtroSelecionado"]),
+    ...mapGetters("relatorio", ["tags"]),
     ...mapGetters("generic", ["mostrarModal", "evento"]),
   },
   methods: {
     ...mapMutations("relatorio", ["removeFiltroSelecionado"]),
   },
   watch: {
-    filtroSelecionado: {
-      handler(filtro) {
-        let self = this;
-        this.tags = [];
-        filtro.children.forEach(function (value) {
-          let valor = "";
-          let type = value.query.type;
-
-          if (type == "custom-component" && value.query.label == "Período") {
-            valor = `${value.query.value[0]} - ${value.query.value[1]}`;
-          }
-
-          if (type == "text" || type == "numeric") {
-            valor = `${value.query.operator} "${value.query.value}"`;
-          }
-
-          if (type == "checkbox") {
-            value.query.choices.forEach(function (opcoes) {
-              value.query.value.forEach(function (value) {
-                if (opcoes.value == value) {
-                  valor += `${opcoes.label},`;
-                }
-              });
-            });
-          }
-
-          let tag = { id: value.query.id, titulo: value.query.label, valor: valor };
-          if (value.query.value != null) self.tags.push(tag);
-        });
-      },
-      deep: true,
-    },
     evento: {
       handler(evento) {
         if (evento.nome == "tagRemovida") {

package/src/component/template/ModeloRelatorioView.vue

@@ -127,36 +127,40 @@
           <b-row>
             <b-col sm="6">
               <div class="lado-a-lado">
-                <Botao
-                  chave="buscarRelatorio"
-                  tipo="editar"
-                  titulo="Excel"
-                  classeIcone="fas fa-file-excel"
-                  tamanho="pequeno"
-                  :clique="obterTodos"
+                <ExportarExcel
+                  :botao="{ tipo: 'editar', titulo: 'Excel', tamanho: 'pequeno' }"
+                  nomeArquivo="Auditoria"
+                  :cabecalho="conteudo.cabecalhoTabela"
+                  :dados="conteudo.dados"
                 />
               </div>
               <div class="lado-a-lado">
-                <Botao
-                  chave="buscarRelatorio"
-                  tipo="editar"
-                  titulo="PDF"
-                  classeIcone="fas fa-file-pdf"
-                  tamanho="pequeno"
-                  :clique="obterTodos"
-                />
+                <div>
+                  <Botao
+                    v-print="'#printMe'"
+                    chave="aplicaFiltro"
+                    tipo="editar"
+                    titulo="Imprimir"
+                    classeIcone="fas fa-print"
+                    tamanho="pequeno"
+                    :clique="aplicarFiltro"
+                  />
+                </div>
               </div>
             </b-col>
             <b-col sm="6">
               <Registro :totalRegistro="conteudo.totalRegistros" />
             </b-col>
           </b-row>
-          <BarraRolagem :alturaMinima="300" :alturaMaxima="500">
-            <Tabela
-              :cabecalhoTabela="conteudo.cabecalhoTabela"
-              :dados="conteudo.dados"
-              :mostrarChecks="modeloLista.mostrarChecks"
-            />
+          <BarraRolagem :alturaMinima="400" :alturaMaxima="600">
+            <div id="printMe">
+              <CabecalhoImpressao />
+              <Tabela
+                :cabecalhoTabela="conteudo.cabecalhoTabela"
+                :dados="conteudo.dados"
+                :mostrarChecks="modeloLista.mostrarChecks"
+              />
+            </div>
           </BarraRolagem>
         </div>
         <div class="div-sem-dados" v-if="nenhumDadoRetornado">
@@ -176,7 +180,9 @@
 import Alerta from "@nixweb/nixloc-ui/src/component/layout/Alerta";
 import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
 import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+import ExportarExcel from "@nixweb/nixloc-ui/src/component/shared/ExportarExcel";
 import Tabela from "../shared/Tabela.vue";
+import CabecalhoImpressao from "../shared/CabecalhoImpressao.vue";
 import Registro from "../shared/Registro.vue";
 import Painel from "@nixweb/nixloc-ui/src/component/layout/Painel.vue";
 import BarraRolagem from "@nixweb/nixloc-ui/src/component/layout/BarraRolagem.vue";
@@ -185,11 +191,15 @@ import Progresso from "@nixweb/nixloc-ui/src/component/shared/Progresso";
 import Rodape from "@nixweb/nixloc-ui/src/component/shared/query-builder/Rodape.vue";
 import Tags from "@nixweb/nixloc-ui/src/component/shared/query-builder/Tags.vue";
 import RelatorioAdicionarModificar from "@nixweb/nixloc-ui/src/component/template/RelatorioAdicionarModificar.vue";
+import print from "vue-print-nb";
 
 import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
 
 export default {
   name: "ModeloRelatorioView",
+  directives: {
+    print,
+  },
   props: {
     modeloLista: Object,
     campo: Array,
@@ -208,6 +218,8 @@ export default {
     Progresso,
     Tags,
     RelatorioAdicionarModificar,
+    ExportarExcel,
+    CabecalhoImpressao,
   },
   data() {
     return {
@@ -223,6 +235,7 @@ export default {
       btnDesativado: true,
       carregando: false,
       nenhumDadoRetornado: false,
+      teste: this.router,
     };
   },
   mounted() {

package/src/store/modulos/generic.js

@@ -312,7 +312,7 @@ export default {
                     return false;
                 })
         },
-        getPdfApi: async function (context, params) {
+        getFileApi: async function (context, params) {
             context.commit('limpaMetodoExecutadoApi');
             return axios.post(params.url, params.obj, {
                 headers: new Token().tokenHeaders(), responseType: "arraybuffer",

package/src/store/modulos/relatorio.js

@@ -17,6 +17,7 @@ export default {
         opcoesValorInicial: [],
         consulta: [],
         resumo: [],
+        tags: []
     },
     getters: {
         cabecalhoTabela: (state) => {
@@ -49,9 +50,9 @@ export default {
             });
 
             // se não tiver salvo, reseta o filtro que estava armazenado
-          /*  if (tamanhoValorInicial == 0)
-                state.filtroSelecionado.children = [];*/
-                
+            /*  if (tamanhoValorInicial == 0)
+                  state.filtroSelecionado.children = [];*/
+
             return state.opcoes;
         },
         filtroObrigatorio: (state) => {
@@ -113,6 +114,37 @@ export default {
 
             return { consulta, resumo };
         },
+        tags: (state) => {
+            state.tags = [];
+            state.filtroSelecionado.children.forEach(function (value) {
+                let valor = "";
+                let type = value.query.type;
+
+                if (value.query.value) {
+                    if (type == "custom-component" && value.query.label == "Período") {
+                        valor = `${value.query.value[0]} - ${value.query.value[1]}`;
+                    }
+
+                    if (type == "text" || type == "numeric") {
+                        valor = `${value.query.operator} "${value.query.value}"`;
+                    }
+
+                    if (type == "checkbox") {
+                        value.query.choices.forEach(function (opcoes) {
+                            value.query.value.forEach(function (value) {
+                                if (opcoes.value == value) {
+                                    valor += `${opcoes.label},`;
+                                }
+                            });
+                        });
+                    }
+
+                    let tag = { id: value.query.id, titulo: value.query.label, valor: valor };
+                    if (value.query.value != null) state.tags.push(tag);
+                }
+            });
+            return state.tags;
+        }
     },
     mutations: {
         insereRelatorio: (state, obj) => {