@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/finance/dre/DataCrossTable.vue

@@ -0,0 +1,448 @@
+<template>
+    <div>
+        <Zoom>
+            <div class="title-main">Relatório de Desempenho Financeiro</div>
+            <div class="table-responsive">
+                <table class="custom-table">
+                    <thead>
+                        <tr>
+                            <th v-if="mostrarCentroDeCusto">Centro de Custo</th>
+                            <th v-if="mostrarPlanoDeConta">Plano de Conta</th>
+                            <th v-for="col in colunasSelecionadas" :key="col"
+                                v-if="!anoSelecionado || col.endsWith('/' + anoSelecionado)">
+                                {{ col }}
+                            </th>
+                            <th class="color-total">
+                                <span class="title-total">Total</span>
+                            </th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        <tr v-for="(linha, index) in linhasFiltradas" :key="index">
+                            <td v-if="mostrarCentroDeCusto">{{ linha.centroDeCusto }}</td>
+                            <td v-if="mostrarPlanoDeConta">{{ linha.planoDeConta }}</td>
+                            <td v-for="col in colunasSelecionadas" :key="col"
+                                v-if="!anoSelecionado || col.endsWith('/' + anoSelecionado)">
+                                <span @click="openDetails(linha, col)" class="row-link"
+                                    :class="classeValor(linha.valores[col])">
+                                    {{ formatarMoeda(linha.valores[col] || 0) }}
+                                </span>
+                            </td>
+                            <td class="color-total">
+                                <span class="title-total" :class="classeValor(linha.total)">
+                                    {{ formatarMoeda(linha.total) }}
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>
+
+                    <tfoot>
+                        <tr>
+                            <td class="color-total" v-if="mostrarCentroDeCusto || mostrarPlanoDeConta"
+                                :colspan="(mostrarCentroDeCusto && mostrarPlanoDeConta) ? 2 : 1">
+                                Total
+                            </td>
+                            <td class="color-total" v-for="col in colunasSelecionadas" :key="col"
+                                v-if="!anoSelecionado || col.endsWith('/' + anoSelecionado)">
+                                <span :class="classeValor(totalPorColuna[col])">
+                                    {{ formatarMoeda(totalPorColuna[col] || 0) }}
+                                </span>
+                            </td>
+                            <td class="color-total">
+                                <span class="title-total " :class="classeValor(totalGeral)">
+                                    {{ formatarMoeda(totalGeral) }}
+                                </span>
+                            </td>
+                        </tr>
+
+                        <tr v-if="mostrarTotalPorAno" v-for="ano in anosSelecionados" :key="'ano-' + ano">
+                            <td class="color-total" v-if="ano == anoSelecionado || anoSelecionado == ''"
+                                :colspan="(mostrarCentroDeCusto && mostrarPlanoDeConta) ? 2 : 1">
+                                <span class="title-total"> Resultado {{ ano }}</span>
+                            </td>
+                            <td class="color-total" v-if="ano == anoSelecionado || anoSelecionado == ''" :colspan="1">
+                                <span class="title-total" :class="classeValor(totalPorAnoSeparado[ano] || 0)">
+                                    {{ formatarMoeda(totalPorAnoSeparado[ano] || 0) }}
+                                </span>
+                            </td>
+                        </tr>
+                    </tfoot>
+                </table>
+                <br>
+            </div>
+        </Zoom>
+        <Modal title="Configuração" :width="600" :height="750" v-if="showModal('config')">
+
+            <Molded>
+                <CheckboxSimple title="Agrupar por Centro de Custo" v-model="agruparPorCentroDeCusto" />
+            </Molded>
+            <br />
+
+            <Molded>
+                <b-row>
+                    <b-col sm="6">
+                        <CheckboxSimple title="Centro de Custo" v-model="mostrarCentroDeCusto" />
+                        <CheckboxSimple title="Plano de Conta" v-model="mostrarPlanoDeConta" />
+                        <CheckboxSimple title="Total por Ano" v-model="mostrarTotalPorAno" />
+                    </b-col>
+                    <b-col sm="6">
+                        <select v-model="anoSelecionado" class="select-modern">
+                            <option value="">Todos os anos</option>
+                            <option v-for="ano in anos" :key="ano" :value="ano">{{ ano }}</option>
+                        </select>
+                    </b-col>
+                </b-row>
+                <hr class="hr">
+
+                <ScrollBar :minHeight="200" :maxHeight="200">
+                    <CheckboxGroup :stacked="true" :options="colunasVisiveis" :initialValue="colunasSelecionadas"
+                        v-model="colunasSelecionadas" :clicked="ordenarPorMesAno" />
+                </ScrollBar>
+            </Molded>
+
+        </Modal>
+    </div>
+</template>
+
+<script>
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import CheckboxSimple from "@nixweb/nixloc-ui/src/component/forms/CheckboxSimple";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Zoom from "@nixweb/nixloc-ui/src/component/layout/Zoom.vue";
+
+import { mapMutations, mapGetters } from "vuex";
+
+export default {
+    props: ['dadosAnos', 'dadosFinanceiros'],
+    components: {
+        CheckboxGroup,
+        CheckboxSimple,
+        Modal,
+        Molded,
+        ScrollBar,
+        Zoom
+    },
+    data() {
+        const meses = [
+            "Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho",
+            "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"
+        ];
+        const anos = this.dadosAnos;
+        const colunasVisiveis = anos.flatMap(ano => meses.map(mes => `${mes}/${ano}`));
+        return {
+            mostrarCentroDeCusto: true,
+            mostrarPlanoDeConta: true,
+            mostrarTotalPorAno: true,
+            agruparPorCentroDeCusto: false,
+            anoSelecionado: "",
+            colunasSelecionadas: [],
+            anos,
+            colunasVisiveis,
+            ids: [],
+        };
+    },
+    computed: {
+        ...mapGetters("generic", ["event", "showModal"]),
+
+        linhasFiltradas() {
+            let dadosAgrupados = this.dadosFinanceiros;
+
+            if (this.agruparPorCentroDeCusto) {
+                const dadosAgrupadosPorCentro = {};
+
+                for (const linhaAtual of dadosAgrupados) {
+                    const nomeCentroDeCusto = linhaAtual.centroDeCusto;
+
+                    // Verifica se já existe esse centro de custo no agrupamento
+                    const grupoExistente = dadosAgrupadosPorCentro[nomeCentroDeCusto];
+
+                    if (!grupoExistente) {
+                        // Se não existe, adiciona essa linha como o primeiro registro do grupo
+                        dadosAgrupadosPorCentro[nomeCentroDeCusto] = {
+                            ...linhaAtual,
+                            valores: { ...linhaAtual.valores },
+                            total: linhaAtual.total,
+                            idsPorMes: { ...linhaAtual.idsPorMes }
+                        };
+                    } else {
+                        // Se já existe, atualiza o grupo somando os valores
+                        for (const colunaSelecionada of this.colunasSelecionadas) {
+                            const valorAtual = linhaAtual.valores[colunaSelecionada] || 0;
+                            grupoExistente.valores[colunaSelecionada] =
+                                (grupoExistente.valores[colunaSelecionada] || 0) + valorAtual;
+                        }
+
+                        // Soma o total geral do grupo
+                        grupoExistente.total += linhaAtual.total;
+
+
+
+                        // Para cada mês da linha atual
+                        for (const mes in linhaAtual.idsPorMes || {}) {
+
+                            const idsDaLinha = linhaAtual.idsPorMes[mes];
+
+                            // Garante que o mês já existe no grupo
+                            if (!grupoExistente.idsPorMes[mes]) {
+                                grupoExistente.idsPorMes[mes] = [];
+                            }
+
+                            // Adiciona apenas os IDs que ainda não estão no grupo
+                            const idsDoGrupo = grupoExistente.idsPorMes[mes];
+
+                            for (const id of idsDaLinha) {
+                                if (!idsDoGrupo.includes(id)) {
+                                    idsDoGrupo.push(id);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                // Converte o objeto final para array para exibição no relatório
+                dadosAgrupados = Object.values(dadosAgrupadosPorCentro);
+            }
+
+
+
+            return dadosAgrupados.map(linha => {
+                const valoresFiltrados = {};
+                let total = 0;
+                for (const col of this.colunasSelecionadas) {
+                    if (!this.anoSelecionado || col.endsWith("/" + this.anoSelecionado)) {
+                        valoresFiltrados[col] = linha.valores[col] || 0;
+                        total += valoresFiltrados[col];
+                    }
+                }
+                return {
+                    centroDeCusto: linha.centroDeCusto,
+                    planoDeConta: linha.planoDeConta,
+                    valores: valoresFiltrados,
+                    idsPorMes: linha.idsPorMes,
+                    total,
+                };
+            });
+        },
+
+        totalPorColuna() {
+            const linhas = this.linhasFiltradas; // cache
+            const totais = {};
+            for (const col of this.colunasSelecionadas) {
+                if (!this.anoSelecionado || col.endsWith("/" + this.anoSelecionado)) {
+                    totais[col] = linhas.reduce((soma, linha) => soma + (linha.valores[col] || 0), 0);
+                }
+            }
+            return totais;
+        },
+
+        totalGeral() {
+            const linhas = this.linhasFiltradas;
+            return linhas.reduce((soma, linha) => soma + linha.total, 0);
+        },
+
+        anosSelecionados() {
+            return this.anos.filter(ano =>
+                this.colunasSelecionadas.some(col => col.endsWith("/" + ano))
+            );
+        },
+
+        totalPorAnoSeparado() {
+            const linhas = this.linhasFiltradas;
+            const totais = {};
+            for (const ano of this.anosSelecionados) {
+                let totalAno = 0;
+                for (const linha of linhas) {
+                    for (const [col, valor] of Object.entries(linha.valores)) {
+                        if (col.endsWith("/" + ano)) {
+                            totalAno += valor || 0;
+                        }
+                    }
+                }
+                totais[ano] = totalAno;
+            }
+            return totais;
+        }
+    },
+    mounted() {
+        this.colunasSelecionadas = this.colunasVisiveis.filter(col => {
+            const totalCol = this.dadosFinanceiros.reduce((acc, linha) => acc + (linha.valores[col] || 0), 0);
+            return totalCol !== 0;
+        });
+    },
+    methods: {
+        ...mapMutations("generic", ["openModal", "addEvent", "hideModal", "removeLoading"]),
+        formatarMoeda(valor) {
+            return `R$ ${valor.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".")}`;
+        },
+        classeValor(valor) {
+            if (valor < 0) return "text-danger";
+            if (valor > 0) return "text-primary";
+            return "";
+        },
+        openDetails(linha, col) {
+            var planoDeContaParse = this.agruparPorCentroDeCusto ? " - " : " (" + linha.planoDeConta + ") - ";
+            var title = linha.centroDeCusto + planoDeContaParse + col;
+            var ids = linha.idsPorMes[col] ? linha.idsPorMes[col] : [];
+            this.addEvent({ name: "details", data: { title: title, ids: ids } });
+        },
+        ordenarPorMesAno() {
+            setTimeout(() => {
+                const mesParaNumero = {
+                    "Janeiro": 0, "Fevereiro": 1, "Março": 2, "Abril": 3,
+                    "Maio": 4, "Junho": 5, "Julho": 6, "Agosto": 7,
+                    "Setembro": 8, "Outubro": 9, "Novembro": 10, "Dezembro": 11
+                };
+
+                this.colunasSelecionadas = [...this.colunasSelecionadas].sort((a, b) => {
+                    const [mesA, anoA] = a.split("/");
+                    const [mesB, anoB] = b.split("/");
+                    const dataA = new Date(anoA, mesParaNumero[mesA]);
+                    const dataB = new Date(anoB, mesParaNumero[mesB]);
+                    return dataA - dataB;
+                });
+            }, 0);
+        },
+        exportarCSV() {
+            const colunas = this.colunasSelecionadas.filter(c => !this.anoSelecionado || c.endsWith("/" + this.anoSelecionado));
+            const headers = [
+                this.mostrarCentroDeCusto ? "Centro de Custo" : null,
+                this.mostrarPlanoDeConta ? "Plano de Conta" : null,
+                ...colunas,
+                "Total"
+            ].filter(Boolean);
+
+            let csv = headers.join(";") + "\n";
+
+            // Linhas principais
+            this.linhasFiltradas.forEach(linha => {
+                const dados = [
+                    this.mostrarCentroDeCusto ? linha.centroDeCusto : null,
+                    this.mostrarPlanoDeConta ? linha.planoDeConta : null,
+                    ...colunas.map(mes => (linha.valores[mes] || 0).toFixed(2).replace(".", ",")),
+                    linha.total.toFixed(2).replace(".", ",")
+                ].filter(v => v !== null);
+                csv += dados.join(";") + "\n";
+            });
+
+            // Totais por ano (quando ativado)
+            if (this.mostrarTotalPorAno) {
+                for (const ano of this.anosSelecionados) {
+                    if (this.anoSelecionado && ano !== this.anoSelecionado) continue;
+
+                    const totalAno = this.totalPorAnoSeparado[ano] || 0;
+                    const prefixo = this.mostrarCentroDeCusto || this.mostrarPlanoDeConta ? `Total ${ano}` : "";
+                    const colSpan = this.mostrarCentroDeCusto + this.mostrarPlanoDeConta;
+                    const dados = Array(colSpan).fill("");
+                    if (prefixo) dados[0] = prefixo;
+
+                    const colunasAno = colunas.filter(c => c.endsWith("/" + ano));
+                    const totaisMeses = colunasAno.map(() => ""); // vazio por mês
+                    dados.push(...totaisMeses, totalAno.toFixed(2).replace(".", ","));
+                    csv += dados.join(";") + "\n";
+                }
+            }
+
+            // BOM para acentos no Excel
+            const BOM = "\uFEFF";
+            const blob = new Blob([BOM + csv], { type: "text/csv;charset=utf-8;" });
+
+            const link = document.createElement("a");
+            link.href = URL.createObjectURL(blob);
+            link.setAttribute("download", "Relatório de Desempenho Financeiro.csv");
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "openFields") {
+                    this.openModal('config');
+                    this.removeLoading(["btnOpenFields"]);
+                }
+                if (event.name == "openExcel") {
+                    this.exportarCSV();
+                }
+            },
+            deep: true,
+        },
+        agruparPorCentroDeCusto: {
+            handler(value) {
+                this.mostrarPlanoDeConta = !value;
+            },
+            deep: true,
+        },
+    },
+};
+</script>
+
+<style scoped>
+.custom-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+    text-align: center;
+}
+
+.custom-table th,
+.custom-table td {
+    border: 1px solid #ccc;
+    padding: 2px 6px;
+    white-space: nowrap;
+    width: auto;
+}
+
+.custom-table thead th,
+.custom-table tfoot td {
+    text-align: center;
+    font-weight: bold;
+}
+
+
+.title-total {
+    font-weight: bold !important;
+}
+
+.text-danger {
+    color: red !important;
+}
+
+.text-primary {
+    color: #00058B !important;
+}
+
+.select-modern {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    padding: 7px 14px;
+    width: 250px;
+    font-size: 14px;
+    border: 1px solid #EBEBED;
+    border-radius: 12px;
+    background-color: #fff;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,50 70,100 120,50' stroke='%23999' stroke-width='10' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    background-size: 16px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.title-main {
+    font-size: 18px;
+    margin-bottom: 15px;
+}
+
+.color-total {
+    background-color: #FAFAFA !important;
+}
+
+.row-link {
+    cursor: pointer;
+    text-decoration: underline;
+}
+</style>