@nixweb/nixloc-ui 0.0.93 → 0.0.94

package/src/component/template/ModeloRelatorioView.vue

@@ -0,0 +1,455 @@
+<template>
+  <div>
+    <Painel
+      :modulo="painel.modulo"
+      :titulo="painel.titulo"
+      :mostrarFiltroVertical="painel.mostrarFiltroVertical"
+      :mostrarPesquisa="painel.mostrarPesquisa"
+      :mostrarBotoes="painel.mostrarBotoes"
+    >
+      <div slot="conteudo-principal">
+        <br />
+        <div class="div-progresso" v-if="carregando && tamanhoDados > 0">
+          <Progresso
+            :texto="`Carregando ${tamanhoDados} registro(s) de ${conteudo.totalRegistros}`"
+            :valor="tamanhoDados"
+            :maximo="conteudo.totalRegistros"
+            tamanho="medium"
+          />
+        </div>
+        <Moldura>
+          <div>
+            <div slot="conteudo-filtro-horizontal">
+              <b-row>
+                <b-col sm="6">
+                  <div class="lado-a-lado">
+                    <Botao
+                      chave="buscarRelatorio"
+                      tipo="primario"
+                      titulo="Buscar"
+                      classeIcone="fas fa-file-search"
+                      tamanho="medio"
+                      :desabilitado="invalido || btnDesativado"
+                      :clique="obterTodos"
+                    />
+                  </div>
+                  <div class="lado-a-lado">
+                    <Botao
+                      v-if="!invalido"
+                      chave="salvarRelatorio"
+                      tipo="sucesso"
+                      titulo="Salvar"
+                      classeIcone="fas fa-save"
+                      :desabilitado="carregando || invalido"
+                      tamanho="pequeno"
+                      :clique="salvarRelatorio"
+                    />
+                  </div>
+                </b-col>
+                <b-col class="text-right" sm="6">
+                  <div class="lado-a-lado">
+                    <Botao
+                      chave="abrirCampo"
+                      tipo="info"
+                      titulo="Campos"
+                      classeIcone="fas fa-database"
+                      tamanho="pequeno"
+                      :desabilitado="carregando"
+                      :clique="abrirCampo"
+                    />
+                  </div>
+                  <div class="lado-a-lado">
+                    <Botao
+                      chave="abrirFiltro"
+                      tipo="info"
+                      titulo="Filtros"
+                      classeIcone="fas fa-filter"
+                      tamanho="pequeno"
+                      :desabilitado="carregando"
+                      :clique="abrirFiltro"
+                    />
+                  </div>
+                </b-col>
+              </b-row>
+              <Modal titulo="Filtros" :largura="900" v-show="mostrarModal('filtro')">
+                <slot name="filtro"></slot>
+                <br />
+                <b-row>
+                  <b-col class="text-right" sm="12">
+                    <div class="lado-a-lado">
+                      <Botao
+                        chave="aplicaFiltro"
+                        tipo="primario"
+                        titulo="Aplicar"
+                        classeIcone="fas fa-filter"
+                        tamanho="pequeno"
+                        :clique="aplicarFiltro"
+                      />
+                    </div>
+                  </b-col>
+                </b-row>
+              </Modal>
+              <Modal titulo="Campos" :largura="600" v-show="mostrarModal('campo')">
+                <slot name="campo"></slot>
+                <b-row>
+                  <b-col class="text-right" sm="12">
+                    <div class="lado-a-lado">
+                      <Botao
+                        chave="aplicaFiltro"
+                        tipo="primario"
+                        titulo="Aplicar"
+                        classeIcone="fas fa-filter"
+                        tamanho="pequeno"
+                        :desabilitado="campoSelecionado.length == 0"
+                        :clique="aplicarFiltro"
+                      />
+                    </div>
+                  </b-col>
+                </b-row>
+              </Modal>
+            </div>
+          </div>
+        </Moldura>
+        <div class="div-obrigatorio" v-show="invalido">
+          <Alerta tipo="info" v-for="item in filtroObrigatorio">
+            É necessário o filtro <b>{{ item.label }}</b
+            >, clique no botão "Filtros" para adicionar.
+          </Alerta>
+        </div>
+
+        <div class="div-tags">
+          <Tags nomeEvento="tagRelatorio" />
+        </div>
+        <div class="g-div-moldura div-tabela" v-if="!carregando && tamanhoDados > 0">
+          <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"
+                />
+              </div>
+              <div class="lado-a-lado">
+                <Botao
+                  chave="buscarRelatorio"
+                  tipo="editar"
+                  titulo="PDF"
+                  classeIcone="fas fa-file-pdf"
+                  tamanho="pequeno"
+                  :clique="obterTodos"
+                />
+              </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>
+        </div>
+        <div class="div-sem-dados" v-if="nenhumDadoRetornado">
+          <Alerta tipo="info">
+            <span> Nenhum registro foi encontrato!</span>
+          </Alerta>
+        </div>
+        <div class="div-rodape" v-if="conteudo.resumo.length > 0">
+          <Rodape :dados="conteudo.resumo" />
+        </div>
+      </div>
+    </Painel>
+  </div>
+</template>
+
+<script>
+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 Tabela from "../shared/Tabela.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";
+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 { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ModeloRelatorioView",
+  props: {
+    modeloLista: Object,
+    campo: Array,
+    painel: Object,
+  },
+  components: {
+    Alerta,
+    Modal,
+    Botao,
+    Registro,
+    Tabela,
+    Painel,
+    BarraRolagem,
+    Moldura,
+    Rodape,
+    Progresso,
+    Tags,
+  },
+  data() {
+    return {
+      conteudo: {
+        cabecalhoTabela: [],
+        dados: [],
+        resumo: [],
+        paginacao: 0,
+        paginaAtual: 1,
+        totalPorPagina: 100,
+        totalRegistros: 0,
+      },
+      btnDesativado: true,
+      carregando: false,
+      nenhumDadoRetornado: false,
+    };
+  },
+  mounted() {
+    this.removeCarregando(["painel"]);
+  },
+  computed: {
+    ...mapGetters("generic", ["mostrarModal", "evento"]),
+    ...mapGetters("relatorio", [
+      "cabecalhoTabela",
+      "filtroSelecionado",
+      "filtroObrigatorio",
+      "temCampoSelecionado",
+      "oDataSelect",
+      "oDataFilter",
+      "oDataOrderBy",
+    ]),
+    ...mapState("relatorio", ["relatorio", "campoSelecionado", "resumo"]),
+    urlConsulta() {
+      let baseUrl = `${this.modeloLista.urlGetApi}?${this.oDataSelect}&${this.oDataOrderBy}&${this.oDataFilter.consulta}&$skip=${this.skip}&$top=${this.conteudo.totalPorPagina}&$count=true`;
+      return baseUrl.replace("&&", "&");
+    },
+    urlResumo() {
+      let consulta = this.oDataFilter.resumo
+        ? `$apply=filter(${this.oDataFilter.consulta.replace("$filter=", "")})/`
+        : "$apply=";
+      let baseUrl = `${this.modeloLista.urlGetApi}?${consulta}aggregate(${this.oDataFilter.resumo})`;
+      return baseUrl;
+    },
+    skip() {
+      return (this.conteudo.paginaAtual - 1) * this.conteudo.totalPorPagina;
+    },
+    invalido() {
+      let retorno = true;
+      this.filtroObrigatorio.forEach((filtro) => {
+        var existe = this.filtroSelecionado.children.find((value) => {
+          if (filtro.label == value.query.label) retorno = false;
+        });
+      });
+
+      return retorno;
+    },
+    tamanhoDados() {
+      return this.conteudo.dados.length;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["getApiOdata"]),
+    ...mapMutations("generic", ["abrirModal", "fecharModal", "removeCarregando"]),
+    ...mapMutations("relatorio", ["atualizaCabecalhoTabela", "atualizaConsultaFiltro"]),
+
+    obterTodos() {
+      this.conteudo.dados = [];
+      this.conteudo.resumo = [];
+      this.btnDesativado = true;
+
+      if (!this.invalido) {
+        this.mostraEscondeCampos();
+        this.paginacao();
+        this.removeCarregando(["buscarRelatorio"]);
+
+        if (this.oDataFilter.resumo) this.resumoOData();
+        if (!this.oDataFilter.resumo) this.conteudo.resumo = [];
+      }
+    },
+    paginacao() {
+      let paramsConsulta = { url: this.urlConsulta };
+      this.reiniciaDados();
+
+      this.getApiOdata(paramsConsulta).then((response) => {
+        let totalRegistros = response["@odata.count"];
+        if (totalRegistros == 0) this.nenhumDadoRetornado = true;
+        this.conteudo.totalRegistros = totalRegistros;
+        this.conteudo.paginacao = Math.round(
+          totalRegistros / this.conteudo.totalPorPagina
+        );
+
+        if (totalRegistros <= this.conteudo.totalPorPagina) {
+          this.consultaOdata();
+          this.conteudo.cabecalhoTabela = this.cabecalhoTabela;
+        }
+        if (this.conteudo.paginacao == 0) this.carregando = false;
+      });
+    },
+    reiniciaDados() {
+      this.carregando = true;
+      this.conteudo.dados = [];
+      this.conteudo.paginaAtual = 1;
+      this.nenhumDadoRetornado = false;
+    },
+    consultaOdata() {
+      let paramsConsulta = { url: this.urlConsulta };
+      this.getApiOdata(paramsConsulta).then((response) => {
+        let self = this;
+        response.value.forEach(function (obj) {
+          self.conteudo.dados.push(obj);
+        });
+        this.conteudo.paginaAtual++;
+      });
+      this.conteudo.cabecalhoTabela = this.cabecalhoTabela;
+    },
+    resumoOData() {
+      let paramsResumo = { url: this.urlResumo };
+      this.getApiOdata(paramsResumo).then((response) => {
+        this.conteudo.resumo = [];
+        const result = Object.entries(response[0]);
+        let self = this;
+        result.forEach(function (value) {
+          self.resumo.forEach(function (legenda) {
+            let obj = {
+              titulo: "",
+              valor: value[1],
+              classeCss: legenda.classeCss,
+              tipo: legenda.tipo,
+            };
+            if (legenda.valor == value[0]) {
+              obj.titulo = legenda.titulo;
+              self.conteudo.resumo.push(obj);
+            }
+          });
+        });
+      });
+    },
+    abrirCampo() {
+      this.abrirModal("campo");
+      this.removeCarregando(["abrirCampo"]);
+    },
+    abrirFiltro() {
+      this.abrirModal("filtro");
+      this.removeCarregando(["abrirFiltro"]);
+    },
+    aplicarFiltro() {
+      this.fecharModal();
+      this.removeCarregando(["aplicaFiltro", "aplicaCampo"]);
+    },
+    salvarRelatorio() {},
+    mostraEscondeCampos() {
+      let self = this;
+      this.relatorio.campo.forEach(function (value) {
+        if (self.temCampoSelecionado(value.campo, self.campoSelecionado)) {
+          value.mostrar = true;
+        } else {
+          value.mostrar = false;
+        }
+      });
+    },
+  },
+  watch: {
+    evento: {
+      handler(evento) {
+        if (evento.nome == "tagRelatorio") this.abrirModal("filtro");
+      },
+      deep: true,
+    },
+    campoSelecionado: {
+      handler() {
+        this.mostraEscondeCampos();
+      },
+      deep: true,
+    },
+    filtroSelecionado: {
+      handler(filtro) {
+        this.atualizaConsultaFiltro(filtro);
+      },
+      deep: true,
+    },
+    "conteudo.paginaAtual": {
+      handler(value) {
+        if (value <= this.conteudo.paginacao - 1) {
+          let self = this;
+          setTimeout(function () {
+            self.consultaOdata();
+          }, 200);
+        }
+        if (value == this.conteudo.paginacao && value != 0) this.carregando = false;
+      },
+      deep: true,
+    },
+    "conteudo.paginacao": {
+      handler(value) {
+        this.consultaOdata();
+      },
+      deep: true,
+    },
+    "oDataFilter.consulta": {
+      handler(value) {
+        this.btnDesativado = false;
+      },
+      deep: true,
+    },
+    oDataSelect: {
+      handler(value) {
+        this.btnDesativado = false;
+      },
+      deep: true,
+    },
+    oDataOrderBy: {
+      handler(value) {
+        this.btnDesativado = false;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-progresso {
+  margin-bottom: 10px;
+}
+
+.div-sem-dados {
+  margin-top: 20px;
+}
+
+.div-tabela {
+  margin-top: 20px;
+}
+
+.div-separacao {
+  margin-left: 10px;
+  margin-right: 5px;
+}
+
+.div-rodape {
+  margin-top: 20px;
+}
+
+.div-tags {
+  margin-top: 15px;
+}
+
+.div-obrigatorio {
+  margin-top: 20px;
+}
+</style>

package/src/store/modulos/generic.js

@@ -237,6 +237,17 @@ export default {
                     return false;
                 })
         },
+        getApiOdata: async function (context, params) {
+            return axios.get(params.url, {
+                headers: new Token().tokenHeaders(),
+            })
+                .then((response) => {
+                    return response.data;
+                }, (err) => {
+                    context.commit('insereNotificacaoErroApi');
+                    return false;
+                })
+        },
         deleteAllApi: async function (context, params) {
 
             context.commit('limpaMetodoExecutadoApi');

package/src/store/modulos/relatorio.js

@@ -0,0 +1,149 @@
+import ConverteParaOdata from "@nixweb/nixloc-ui/src/component/shared/query-builder/ConverteParaOdata.js";
+
+export default {
+    namespaced: true,
+    state: {
+        relatorio: {
+            campo: [],
+            filtro: [],
+        },
+        campoSelecionado: [],
+        campoOrdenado: {},
+        filtroSelecionado: { children: [] },
+        consulta: [],
+        resumo: [],
+    },
+    getters: {
+        cabecalhoTabela: (state) => {
+            let lista = [];
+            state.relatorio.campo.forEach(function (value) {
+                if (value.mostrar) lista.push(value);
+            });
+            return lista;
+        },
+        opcoes: (state) => {
+            let obj = {
+                valorInicial: [],
+                opcoes: []
+            }
+            state.relatorio.campo.forEach(function (value) {
+                let opcoes = { text: value.titulo, value: value.campo };
+                obj.opcoes.push(opcoes);
+
+                if (value.mostrar) obj.valorInicial.push(value.campo);
+            });
+            return obj;
+        },
+        filtroObrigatorio: (state) => {
+            var filtroObrigatorio = state.relatorio.filtro.filter(x => x.obrigatorio == true);
+            return filtroObrigatorio;
+        },
+        filtroSelecionado: (state) => {
+            let filtro = { children: [] };
+
+            state.filtroSelecionado.children.forEach(function (value) {
+                if (value.query.value != null && value.query.value != "" && value.query.value != undefined)
+                    filtro.children.push(value);
+            });
+
+            return filtro;
+        },
+        temCampoSelecionado: (state) => (campo, valor) => {
+            var existe = valor.find((value) => {
+                if (campo == value) return true;
+            });
+            return existe;
+        },
+        oDataOrderBy: (state) => {
+            let orderBy = `$orderby=${state.campoOrdenado.id} ${state.campoOrdenado.ordenar}`;
+            return orderBy;
+        },
+        oDataSelect: (state) => {
+            let consulta = "";
+            let seqConsulta = 0;
+
+            state.relatorio.campo.forEach(function (obj) {
+                if (obj.mostrar || obj.obrigatorioOData) {
+                    if (seqConsulta == 0) consulta += `$select=${obj.campo}`;
+                    if (seqConsulta > 0) consulta += `,${obj.campo}`;
+                    seqConsulta++;
+                }
+            });
+
+            return consulta;
+        },
+        oDataFilter: (state) => {
+            let consulta = "";
+            let resumo = "";
+            let seqConsulta = 0;
+            let seqResumo = 0;
+            var tamanho = state.consulta.length;
+
+            state.consulta.forEach(function (valor) {
+                if (valor.tipo == "campo") {
+                    if (seqConsulta == 0 && tamanho > 0) consulta += `$filter=${valor.filtro}`;
+                    if (seqConsulta > 0 && tamanho > 0) consulta += ` and ${valor.filtro}`;
+                    seqConsulta++;
+                } else {
+                    if (seqResumo == 0 && tamanho > 0) resumo += `${valor.filtro}`;
+                    if (seqResumo > 0 && tamanho > 0) resumo += `,${valor.filtro}`;
+                    seqResumo++;
+                }
+            });
+
+            return { consulta, resumo };
+        },
+    },
+    mutations: {
+        insereRelatorio: (state, obj) => {
+            state.relatorio = obj;
+        },
+        atualizaCampoSelecionado: (state, value) => {
+            state.campoSelecionado = value;
+        },
+        atualizaFiltroSelecionado: (state, value) => {
+            state.filtroSelecionado = value;
+        },
+        atualizaCampoOrdenado: (state, value) => {
+            state.campoOrdenado = value;
+        },
+        removeFiltroSelecionado: (state, id) => {
+            var filtro = state.filtroSelecionado.children.filter((x) => {
+                return x.query.id != id;
+            });
+            state.filtroSelecionado.children = filtro;
+        },
+        atualizaConsultaFiltro: (state, filtro) => {
+            state.resumo = [];
+            state.consulta = [];
+
+            filtro.children.forEach(function (chave) {
+                let valor = chave.query.value;
+
+                if (chave.query.choices && chave.query.tipo == "resumo") {
+                    chave.query.choices.forEach(function (value) {
+                        let obj = {
+                            titulo: value.como.titulo,
+                            valor: value.como.valor,
+                            classeCss: chave.query.classeCss,
+                            tipo: value.como.tipo,
+                        };
+                        state.resumo.push(obj);
+                    });
+                }
+                let converteParaOdata = new ConverteParaOdata();
+                let filtro = converteParaOdata.converteFiltro(chave.query);
+
+                if (valor != null && valor != undefined && valor != "") {
+                    if (filtro != "") {
+                        let obj = { filtro: filtro, tipo: chave.query.tipo };
+                        state.consulta.push(obj);
+                    }
+                }
+            });
+        }
+    },
+    actions: {
+
+    }
+}