@nixweb/nixloc-ui 0.0.95 → 0.0.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.95",
+  "version": "0.0.98",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,
@@ -15,14 +15,17 @@
     "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",
     "vue-moment": "^4.0.0",
     "vue-multiselect": "^2.1.0",
     "vue-numeric": "^2.4.1",
-    "vue-the-mask": "^0.11.1",
     "vue-simple-progress": "^1.1.1",
+    "vue-the-mask": "^0.11.1",
     "vue-toasted": "^1.1.28",
     "vue-toggles": "^1.1.4",
     "vue-upload-file": "^1.1.0",
@@ -35,6 +38,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "script-loader": "^0.7.2",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
@@ -65,4 +69,4 @@
     "type": "git",
     "url": "git+https://github.com/nixweb-sistemas/nixloc-ui.git"
   }
-}
+}

package/src/component/forms/DateTime.vue

@@ -52,7 +52,21 @@ export default {
   components: { Dica, DatePicker },
   name: "Data",
   mixins: [],
-  props: {
+  props: [
+    "titulo",
+    "campo",
+    "campoAlvo",
+    "placeholder",
+    "formNome",
+    "requerido",
+    "format",
+    "type",
+    "value",
+    "range",
+    "confirm",
+    "confirmText",
+  ],
+  /* props: {
     titulo: String,
     campo: String,
     campoAlvo: String,
@@ -65,7 +79,7 @@ export default {
     range: Boolean,
     confirm: Boolean,
     confirmText: String,
-  },
+  },*/
   data() {
     return {
       notificacoes: [],
@@ -152,7 +166,6 @@ export default {
 </script>
 
 <style scoped>
-
 .sucesso {
   color: #94aa2a;
   font-size: 14px;

package/src/component/layout/Menu.vue

@@ -37,11 +37,11 @@
               <span
                 :class="{
                   'icone-ativo': menuAtivo == item.modulo,
-                  'icone-normal': menuAtivo != item.modulo
+                  'icone-normal': menuAtivo != item.modulo,
                 }"
-              > <i :class="item.icone"></i>
+              >
+                <i :class="item.icone"></i>
               </span>
-             
             </div>
             <div class="titulo">{{ item.titulo }}</div>
           </a>
@@ -171,8 +171,8 @@ export default {
 }
 
 .div-logo {
-  padding-top: 5px;
-  padding-bottom: 15px;
+  padding-top: 2px;
+  padding-bottom: 16px;
 }
 
 .div-icone {
@@ -208,7 +208,7 @@ export default {
 }
 
 img {
-  height: 27px;
+  height: 22px;
   margin-top: 10px;
 }
 </style>

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/Confirmacao.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div @click="executar()">
+      <slot></slot>
+    </div>
+    <Modal
+      :titulo="titulo"
+      :largura="450"
+      :altura="250"
+      v-show="mostrarModal(`confirmacao${dados.id}`)"
+    >
+      <b-col sm="12">
+        <div class="div-botao text-center">
+          <Botao
+            chave="confirmacaoNao"
+            tipo="editar"
+            titulo="cancelar"
+            tamanho="pequeno"
+            :clique="cancelar"
+          />
+          <Botao
+            chave="confirmacaoSim"
+            :tipo="tipo"
+            titulo="Sim, confirmar"
+            tamanho="medio"
+            :clique="confirmar"
+          />
+        </div>
+      </b-col>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Confirmacao",
+  components: {
+    Botao,
+    Modal,
+  },
+  props: {
+    titulo: String,
+    tipo: String,
+    dados: Object,
+    confirmado: Function,
+  },
+  methods: {
+    ...mapMutations("generic", ["abrirModal", "fecharModal", "removeCarregando"]),
+    executar() {
+      this.abrirModal(`confirmacao${this.dados.id}`);
+    },
+    confirmar() {
+      let self = this;
+      setTimeout(function () {
+        if (self.confirmado) self.confirmado(self.dados);
+        self.removeCarregando(["confirmacaoSim"]);
+        self.fecharModal();
+      }, 200);
+    },
+    cancelar() {
+      this.removeCarregando(["confirmacaoNao"]);
+      this.fecharModal();
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["mostrarModal", "evento"]),
+  },
+};
+</script>
+<style scoped>
+.div-botao {
+  padding-top: 20px;
+  height: 100px;
+}
+</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/Tabela.vue

@@ -258,7 +258,7 @@ tr:hover {
 }
 
 .link {
-  color: #0c63c0;
+  color: darkblue;
   font-size: 15px;
   font-weight: 400;
   cursor: pointer;

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/ModeloRelatorioListaView.vue

@@ -9,44 +9,49 @@
     >
       <div slot="conteudo-principal">
         <b-row>
-          <!--   <b-col xs="12" sm="12" md="12" lg="5" xl="5">
-            <div><i class="fas fa-star icone-favorito"></i> Favoritos</div>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="6" v-if="todos.salvo.length > 0">
+            <div><i class="fas fa-file-alt icone-salvo"></i></i> Personalizado</div>
             <hr />
-            <div class="div-moldura" v-for="relatorio in favoritos">
+            <div class="div-moldura" v-for="relatorio in todos.salvo">
               <div>
                 <Moldura :bordaArredondada="12">
                   <b-row>
-                    <b-col sm="10" @click="navegarPara(relatorio.nomeRota)">
+                    <b-col sm="1">
+                      <i class="fas fa-file-alt icone-report"></i>
+                    </b-col>
+                    <b-col sm="10" @click="navegarPara(relatorio)">
                       <div>{{ relatorio.nome }}</div>
                     </b-col>
-                    <b-col sm="2">
-                      <div class="text-right">
-                        <i class="fas fa-times-circle icone-remover"></i>
-                      </div>
+                    <b-col sm="1">
+                      <Confirmacao
+                        titulo="Deseja excluir?"
+                        tipo="perigo"
+                        :dados="relatorio"
+                        :confirmado="excluir"
+                      >
+                        <div class="text-right">
+                          <i class="fas fa-times-circle icone-remover"></i>
+                        </div>
+                      </Confirmacao>
                     </b-col>
                   </b-row>
                 </Moldura>
               </div>
             </div>
-          </b-col> -->
-          <b-col xs="12" sm="12" md="12" lg="5" xl="5">
-            <div><i class="fas fa-list-ul"></i> Todos</div>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="6">
+            <div><i class="fas fa-file-chart-line"></i> Padrão</div>
             <hr />
-            <div class="div-moldura" v-for="relatorio in todos">
+            <div class="div-moldura" v-for="relatorio in todos.padrao">
               <div>
                 <Moldura :bordaArredondada="12">
                   <b-row>
                     <b-col sm="1">
                       <i class="fas fa-file-alt icone-report"></i>
                     </b-col>
-                    <b-col sm="10" @click="navegarPara(relatorio.nomeRota)">
+                    <b-col sm="11" @click="navegarPara(relatorio)">
                       <div class="lado-a-lado">{{ relatorio.nome }}</div>
                     </b-col>
-                    <!--  <b-col sm="2">
-                      <div class="text-right">
-                        <i class="fas fa-plus-circle icone-favorito"></i>
-                      </div>
-                    </b-col>-->
                   </b-row>
                 </Moldura>
               </div>
@@ -61,52 +66,115 @@
 <script>
 import Painel from "@nixweb/nixloc-ui/src/component/layout/Painel.vue";
 import Moldura from "@nixweb/nixloc-ui/src/component/layout/Moldura";
+import Confirmacao from "@nixweb/nixloc-ui/src/component/shared/Confirmacao";
 
 import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
 
 export default {
   name: "ModeloRelatorioListaView",
-  components: { Painel, Moldura },
+  components: { Painel, Moldura, Confirmacao },
   props: {
     painel: Object,
     relatorios: Object,
   },
   data() {
     return {
-      todos: [],
+      todos: {},
+      urlObterTodos: "/api/v1/shared/relatorio/obter-todos",
+      urlRemover: "/api/v1/shared/relatorio/remover",
     };
   },
   computed: {
     ...mapState("generic", ["pesquisa", "buscouPesquisa", "limpouPesquisa"]),
   },
   mounted() {
-    this.removeCarregando(["painel"]);
-    this.todos = this.relatorios;
+    this.obterTodos();
+    this.todos = JSON.parse(JSON.stringify(this.relatorios)); // remove observable
   },
   methods: {
     ...mapMutations("generic", ["removeCarregando"]),
-    navegarPara(nomeRota) {
+    ...mapMutations("relatorio", [
+      "atualizaFiltroSelecionado",
+      "atualizaCampoOrdenado",
+      "atualizaOpcoesValorInicial",
+    ]),
+    ...mapActions("generic", ["getApi", "deleteAllApi"]),
+    obterTodos() {
+      let obj = { modulo: this.painel.modulo };
+      let params = { url: this.urlObterTodos, obj: obj };
+      this.getApi(params).then((response) => {
+        this.todos.salvo = [];
+        let self = this;
+        response.conteudo.dados.forEach((item) => {
+          const consulta = JSON.parse(item.consulta);
+          let obj = {
+            id: item.id,
+            nome: item.nome,
+            nomeRota: consulta.nomeRota,
+            filtro: consulta.filtro,
+            campo: consulta.campo,
+            ordenacao: consulta.ordenacao,
+          };
+          self.todos.salvo.push(obj);
+        });
+        this.removeCarregando(["painel"]);
+      });
+    },
+    navegarPara(relatorio) {
+      if (relatorio.filtro) {
+        let filtroSelecionado = { logicalOperator: "all", children: relatorio.filtro };
+        this.atualizaOpcoesValorInicial(relatorio.campo);
+        this.atualizaCampoOrdenado(relatorio.ordenacao);
+        this.atualizaFiltroSelecionado(filtroSelecionado);
+      } else {
+        this.atualizaOpcoesValorInicial([]);
+      }
       this.$router.push({
-        name: nomeRota,
+        name: relatorio.nomeRota,
+      });
+    },
+    excluir(dados) {
+      let selecionados = [];
+      selecionados.push(dados.id);
+
+      let params = {
+        url: this.urlRemover,
+        selecionados: selecionados,
+      };
+
+      this.deleteAllApi(params).then((reponse) => {
+        if (reponse.sucesso) this.obterTodos();
       });
     },
   },
   watch: {
     buscouPesquisa: function () {
-      let filtro = [];
+      let padrao = [];
+      let salvo = [];
       let self = this;
       setTimeout(function () {
-        self.todos.forEach(function (item) {
+        self.todos.padrao.forEach(function (item) {
+          if (self.pesquisa.filtro.conteudo == "igual") {
+            if (item.nome == self.pesquisa.conteudo) padrao.push(item);
+          }
+
+          if (self.pesquisa.filtro.conteudo == "contem") {
+            if (item.nome.includes(self.pesquisa.conteudo)) padrao.push(item);
+          }
+        });
+
+        self.todos.salvo.forEach(function (item) {
           if (self.pesquisa.filtro.conteudo == "igual") {
-            if (item.nome == self.pesquisa.conteudo) filtro.push(item);
+            if (item.nome == self.pesquisa.conteudo) salvo.push(item);
           }
 
           if (self.pesquisa.filtro.conteudo == "contem") {
-            if (item.nome.includes(self.pesquisa.conteudo)) filtro.push(item);
+            if (item.nome.includes(self.pesquisa.conteudo)) salvo.push(item);
           }
         });
 
-        self.todos = filtro;
+        self.todos.salvo = salvo;
+        self.todos.padrao = padrao;
 
         self.removeCarregando(["pesquisar", "limpar"]);
       }, 300);
@@ -115,6 +183,7 @@ export default {
       let self = this;
       setTimeout(function () {
         self.todos = self.relatorios;
+        self.obterTodos();
         self.removeCarregando(["pesquisar", "limpar"]);
       }, 300);
     },
@@ -123,8 +192,8 @@ export default {
 </script>
 
 <style scoped>
-.icone-favorito {
-  color: orange;
+.icone-salvo {
+  color: #94aa2a;
 }
 
 .icone-remover {
@@ -132,7 +201,7 @@ export default {
 }
 
 .icone-report {
-  font-size: 30px;
+  font-size: 25px;
   opacity: 0.2;
   color: #577696;
 }

package/src/component/template/ModeloRelatorioView.vue

@@ -17,6 +17,9 @@
             tamanho="medium"
           />
         </div>
+        <Modal titulo="Salvar" :largura="550" v-show="mostrarModal('salvar')">
+          <RelatorioAdicionarModificar :modulo="painel.modulo" />
+        </Modal>
         <Moldura>
           <div>
             <div slot="conteudo-filtro-horizontal">
@@ -112,11 +115,11 @@
         </Moldura>
         <div class="div-obrigatorio" v-show="invalido">
           <Alerta tipo="info" v-for="item in filtroObrigatorio" :key="item.id">
-            É necessário informar o filtro <b>{{ item.label }}</b
+            É necessário informar o filtro
+            <span class="filtro-obrigatorio">{{ item.label }}</span
             >, clique no botão "Filtros" para adicionar.
           </Alerta>
         </div>
-
         <div class="div-tags">
           <Tags nomeEvento="tagRelatorio" />
         </div>
@@ -124,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">
@@ -173,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";
@@ -181,11 +190,16 @@ import Moldura from "@nixweb/nixloc-ui/src/component/layout/Moldura";
 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,
@@ -203,6 +217,9 @@ export default {
     Rodape,
     Progresso,
     Tags,
+    RelatorioAdicionarModificar,
+    ExportarExcel,
+    CabecalhoImpressao,
   },
   data() {
     return {
@@ -218,6 +235,7 @@ export default {
       btnDesativado: true,
       carregando: false,
       nenhumDadoRetornado: false,
+      teste: this.router,
     };
   },
   mounted() {
@@ -352,7 +370,10 @@ export default {
       this.fecharModal();
       this.removeCarregando(["aplicaFiltro", "aplicaCampo"]);
     },
-    salvarRelatorio() {},
+    salvarRelatorio() {
+      this.abrirModal("salvar");
+      this.removeCarregando(["salvarRelatorio"]);
+    },
     mostraEscondeCampos() {
       let self = this;
       this.relatorio.campo.forEach(function (value) {
@@ -452,4 +473,8 @@ export default {
 .div-obrigatorio {
   margin-top: 20px;
 }
+
+.filtro-obrigatorio {
+  font-weight: 500;
+}
 </style>

package/src/component/template/Relatorio.js

@@ -0,0 +1,10 @@
+export default class Relatorio {
+    constructor() {
+        this.id = "";
+        this.nome = "";
+    }
+    modificar(dados) {
+        this.id = dados.id;
+        this.nome = dados.nome;
+    }
+}

package/src/component/template/RelatorioAdicionarModificar.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="12"
+        ><Texto
+          titulo="Nome"
+          campo="nome"
+          :formNome="formNome"
+          :requerido="true"
+          :tamanhoMaximo="40"
+          v-model="relatorio.nome"
+          :marcarFormSujo="false"
+        />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col sm="12">
+        <div class="text-right">
+          <Botao
+            chave="salvar"
+            tipo="sucesso"
+            titulo="Salvar"
+            :desabilitado="!formValido(formNome)"
+            classeIcone="fas fa-save"
+            tamanho="medio"
+            :clique="salvarRelatorio"
+          />
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import Texto from "@nixweb/nixloc-ui/src/component/forms/Texto";
+import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+import Relatorio from "@nixweb/nixloc-ui/src/component/template/Relatorio.js";
+
+import { mapGetters, mapState, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "RelatorioAdicionarModificar",
+  components: { Botao, Texto },
+  props: {
+    modulo: String,
+  },
+  data() {
+    return {
+      formNome: "relatorioAdicionarModificar",
+      relatorio: new Relatorio(),
+      urlAdicionar: "/api/v1/shared/relatorio/adicionar",
+      urlModificar: "/api/v1/shared/relatorio/modificar",
+    };
+  },
+  computed: {
+    ...mapGetters("validation", ["formValido"]),
+    ...mapGetters("generic", ["evento"]),
+    ...mapGetters("relatorio", ["cabecalhoTabela", "filtroSelecionado"]),
+    ...mapState("relatorio", ["campoSelecionado", "campoOrdenado"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi"]),
+    ...mapMutations("generic", ["removeCarregando", "removeEvento", "fecharModal"]),
+    ...mapMutations("validation", ["reiniciaValidacao"]),
+    salvarRelatorio() {
+      const consulta = {
+        nomeRota: this.$route.name,
+        campo: this.campoSelecionado,
+        ordenacao: this.campoOrdenado,
+        filtro: this.filtroSelecionado.children,
+      };
+      let obj = {
+        nome: this.relatorio.nome,
+        modulo: this.modulo,
+        consulta: JSON.stringify(consulta),
+      };
+      if (this.relatorio.id) {
+        let params = { url: this.urlModificar, obj: obj };
+        this.putApi(params).then((response) => {
+          if (response.sucesso) this.fecharModal();
+          this.removeCarregando(["salvar"]);
+        });
+      } else {
+        let params = { url: this.urlAdicionar, obj: obj };
+        this.postApi(params).then((response) => {
+          if (response.sucesso) this.fecharModal();
+          this.removeCarregando(["salvar"]);
+        });
+      }
+    },
+    modificar(dados) {
+      this.relatorio = new Relatorio();
+      this.relatorio.modificar(dados);
+      this.removeCarregando([dados.id]);
+    },
+  },
+  watch: {
+    evento: {
+      handler(evento) {
+        if (evento.nome == "modificarRelatorio") this.modificar(evento.dados);
+      },
+      deep: true,
+    },
+  },
+};
+</script>

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

@@ -10,8 +10,14 @@ export default {
         campoSelecionado: [],
         campoOrdenado: {},
         filtroSelecionado: { children: [] },
+        opcoes: {
+            valorInicial: [],
+            opcoes: []
+        },
+        opcoesValorInicial: [],
         consulta: [],
         resumo: [],
+        tags: []
     },
     getters: {
         cabecalhoTabela: (state) => {
@@ -22,17 +28,32 @@ export default {
             return lista;
         },
         opcoes: (state) => {
-            let obj = {
+            // opcoesValorInicial é quando vem do relatório salvo
+
+            state.opcoes = {
                 valorInicial: [],
                 opcoes: []
-            }
+            };
+
+            var tamanhoValorInicial = state.opcoesValorInicial.length;
+
             state.relatorio.campo.forEach(function (value) {
                 let opcoes = { text: value.titulo, value: value.campo };
-                obj.opcoes.push(opcoes);
+                state.opcoes.opcoes.push(opcoes);
+
+                if (value.mostrar && tamanhoValorInicial == 0)
+                    state.opcoes.valorInicial.push(value.campo);
+
+                if (tamanhoValorInicial > 0)
+                    state.opcoes.valorInicial = state.opcoesValorInicial;
 
-                if (value.mostrar) obj.valorInicial.push(value.campo);
             });
-            return obj;
+
+            // se não tiver salvo, reseta o filtro que estava armazenado
+            /*  if (tamanhoValorInicial == 0)
+                  state.filtroSelecionado.children = [];*/
+
+            return state.opcoes;
         },
         filtroObrigatorio: (state) => {
             var filtroObrigatorio = state.relatorio.filtro.filter(x => x.obrigatorio == true);
@@ -93,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) => {
@@ -101,6 +153,9 @@ export default {
         atualizaCampoSelecionado: (state, value) => {
             state.campoSelecionado = value;
         },
+        atualizaOpcoesValorInicial: (state, value) => {
+            state.opcoesValorInicial = value;
+        },
         atualizaFiltroSelecionado: (state, value) => {
             state.filtroSelecionado = value;
         },
@@ -143,7 +198,4 @@ export default {
             });
         }
     },
-    actions: {
-
-    }
 }