@nixweb/nixloc-ui 1.19.0 → 1.21.0

package/src/component/shared/Report.vue

@@ -1,250 +1,250 @@
-<template>
-  <div class="preview">
-    <div class="toolbar">
-      <div class="icon-toolbar" v-print="'#printMeSub'">
-        <i class="fas fa-print"></i>
-      </div>
-      <div v-if="loadingFile" class="icon-toolbar">
-        <i class="fa-duotone fa-solid fa-spinner-third loading-icon"></i>
-      </div>
-      <div v-else @click="generatePDF" class="icon-toolbar">
-        <i class="fa-solid fa-file-pdf"></i>
-      </div>
-      <div class="icon-toolbar icon-excel">
-        <ExportExcel :nameFile="name" :header="header" :data="data" />
-      </div>
-    </div>
-    <ScrollBar :minHeight="400" :maxHeight="500">
-      <br />
-      <div id="printMeSub" :style="'min-height:' + minHeight + 'px'" class="a4 footer">
-        <HeaderReport :title="titleHeader" />
-        <table class="table table-responsive-md">
-          <thead>
-            <tr>
-              <th v-for="(obj, ind) in header" :key="ind">
-                <div class="title-margem" :class="obj.classCssTitle" :style="obj.styleHeader">
-                  <i class="fas fa-search" v-if="obj.iconSearch"></i>
-                  <span class="title-header"> {{ obj.title }}</span>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(row, index) in data" :key="index" :style="row.rowCss">
-              <td v-for="(obj, ind) in header" :key="ind">
-                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
-                  " v-if="obj.type === 'text'">
-                  {{ row[obj.field] }}
-                </div>
-                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
-                  " v-if="obj.type === 'date'">
-                  {{ row[obj.field] | moment("DD/MM/YYYY") }}
-                </div>
-                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
-                  " v-if="obj.type === 'dateTime'">
-                  {{ row[obj.field] | moment("DD/MM/YYYY HH:mm") }}
-                </div>
-                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
-                  " v-if="obj.type === 'currency'">
-                  {{ row[obj.field] | currency }}
-                </div>
-              </td>
-            </tr>
-          </tbody>
-          <tbody v-show="data.length == 0">
-            <tr>
-              <td colspan="12">
-                <span>Nenhum registro encontrado!</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div>
-          <TotalizationReport :totalization="totalization" :totalizationCustom="totalizationCustom"
-            :totalRecords="data.length" />
-        </div>
-      </div>
-    </ScrollBar>
-  </div>
-</template>
-
-<script>
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-import HeaderReport from "../shared/HeaderReport.vue";
-import TotalizationReport from "../shared/TotalizationReport.vue";
-import ExportExcel from "@nixweb/nixloc-ui/src/component/shared/ExportExcel";
-
-import print from "vue-print-nb";
-import html2pdf from 'html2pdf.js'
-
-import { mapMutations } from "vuex";
-
-export default {
-  directives: {
-    print,
-  },
-  props: ["name", "titleHeader", "header", "data", "totalization", "totalizationCustom", "minHeight"],
-  components: { ScrollBar, HeaderReport, TotalizationReport, ExportExcel },
-  data() {
-    return {
-      loadingFile: false,
-    }
-  },
-  methods: {
-    ...mapMutations("generic", ["addEvent"]),
-    convertClass(fieldComparison, classCssBody) {
-      if (Array.isArray(classCssBody)) {
-        let ret = [];
-        classCssBody.forEach(function (value) {
-          let classCss = value.classCss;
-          let condition = value.fieldComparison == fieldComparison;
-          let obj = { [classCss]: condition };
-          ret.push(obj);
-        });
-        return ret;
-      } else {
-        return classCssBody;
-      }
-    },
-    sendEvent(eventName, data) {
-      if (eventName) this.addEvent({ name: eventName, data: data });
-    },
-    async generatePDF() {
-      try {
-        this.loadingFile = true;
-
-        const element = document.getElementById('printMeSub');
-
-        const opt = {
-          margin: 0,
-          filename: this.name + '.pdf',
-          image: { type: 'jpeg', quality: 0.98 },
-          html2canvas: { scale: 2 },
-          jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
-        };
-
-        await html2pdf()
-          .set(opt)
-          .from(element)
-          .save();
-
-      } catch (error) {
-        console.error('Erro ao gerar PDF:', error);
-      } finally {
-        this.loadingFile = false;
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-table tbody tr td {
-  width: 1100px;
-}
-
-.table thead tr {
-  border-top: 1px solid black;
-  border-bottom: 1px solid black;
-}
-
-.table th,
-.table td {
-  height: 10px !important;
-  padding-left: 0px !important;
-  padding-top: 0px !important;
-  padding-bottom: 0px !important;
-  padding-right: 5px !important;
-  border-bottom: 0px !important;
-  border-top: 0px !important;
-  font-size: 13px !important;
-}
-
-.title-header {
-  font-size: 12px;
-  color: #757d8c;
-  font-weight: 400;
-  text-transform: uppercase;
-}
-
-.table-number {
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.table-main {
-  color: #757d8c;
-  max-width: 200px;
-}
-
-.table-currency {
-  font-size: 12px;
-  min-width: 100px;
-}
-
-.preview {
-  background-color: #fafafa;
-  padding-bottom: 20px;
-  border: 1px solid #e4e6ec;
-}
-
-.loading-icon {
-  color: orange;
-  font-size: 19px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.toolbar {
-  height: 40px;
-  border-bottom: 1px hsl(0, 0%, 82.7%) solid;
-  overflow: hidden;
-}
-
-.icon-toolbar {
-  width: 20px;
-  font-size: 18px;
-  margin-left: 10px;
-  margin-top: 2px;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.a4 {
-  max-width: 1100px;
-  padding: 20px;
-  border-radius: var(--ck-border-radius);
-  background: white;
-  box-shadow: 0 0 5px hsl(0deg 0% 0% / 10%);
-  margin: 0 auto;
-}
-
-.footer {
-  margin-bottom: 10px;
-}
-
-.icon-excel {
-  color: green;
-}
-
-.danger {
-  color: #f0134d;
-}
-
-.progress-rent {
-  color: #4bb4e2;
-}
-
-.accepted {
-  color: #38a169;
-}
-
-.rejected {
-  color: #f0134d;
-}
-</style>
+<template>
+  <div class="preview">
+    <div class="toolbar">
+      <div class="icon-toolbar" v-print="'#printMeSub'">
+        <i class="fas fa-print"></i>
+      </div>
+      <div v-if="loadingFile" class="icon-toolbar">
+        <i class="fa-duotone fa-solid fa-spinner-third loading-icon"></i>
+      </div>
+      <div v-else @click="generatePDF" class="icon-toolbar">
+        <i class="fa-solid fa-file-pdf"></i>
+      </div>
+      <div class="icon-toolbar icon-excel">
+        <ExportExcel :nameFile="name" :header="header" :data="data" />
+      </div>
+    </div>
+    <ScrollBar :minHeight="400" :maxHeight="500">
+      <br />
+      <div id="printMeSub" :style="'min-height:' + minHeight + 'px'" class="a4 footer">
+        <HeaderReport :title="titleHeader" />
+        <table class="table table-responsive-md">
+          <thead>
+            <tr>
+              <th v-for="(obj, ind) in header" :key="ind">
+                <div class="title-margem" :class="obj.classCssTitle" :style="obj.styleHeader">
+                  <i class="fas fa-search" v-if="obj.iconSearch"></i>
+                  <span class="title-header"> {{ obj.title }}</span>
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, index) in data" :key="index" :style="row.rowCss">
+              <td v-for="(obj, ind) in header" :key="ind">
+                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
+                  " v-if="obj.type === 'text'">
+                  {{ row[obj.field] }}
+                </div>
+                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
+                  " v-if="obj.type === 'date'">
+                  {{ row[obj.field] | moment("DD/MM/YYYY") }}
+                </div>
+                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
+                  " v-if="obj.type === 'dateTime'">
+                  {{ row[obj.field] | moment("DD/MM/YYYY HH:mm") }}
+                </div>
+                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
+                  " v-if="obj.type === 'currency'">
+                  {{ row[obj.field] | currency }}
+                </div>
+              </td>
+            </tr>
+          </tbody>
+          <tbody v-show="data.length == 0">
+            <tr>
+              <td colspan="12">
+                <span>Nenhum registro encontrado!</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div>
+          <TotalizationReport :totalization="totalization" :totalizationCustom="totalizationCustom"
+            :totalRecords="data.length" />
+        </div>
+      </div>
+    </ScrollBar>
+  </div>
+</template>
+
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import HeaderReport from "../shared/HeaderReport.vue";
+import TotalizationReport from "../shared/TotalizationReport.vue";
+import ExportExcel from "@nixweb/nixloc-ui/src/component/shared/ExportExcel";
+
+import print from "vue-print-nb";
+import html2pdf from 'html2pdf.js'
+
+import { mapMutations } from "vuex";
+
+export default {
+  directives: {
+    print,
+  },
+  props: ["name", "titleHeader", "header", "data", "totalization", "totalizationCustom", "minHeight"],
+  components: { ScrollBar, HeaderReport, TotalizationReport, ExportExcel },
+  data() {
+    return {
+      loadingFile: false,
+    }
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    convertClass(fieldComparison, classCssBody) {
+      if (Array.isArray(classCssBody)) {
+        let ret = [];
+        classCssBody.forEach(function (value) {
+          let classCss = value.classCss;
+          let condition = value.fieldComparison == fieldComparison;
+          let obj = { [classCss]: condition };
+          ret.push(obj);
+        });
+        return ret;
+      } else {
+        return classCssBody;
+      }
+    },
+    sendEvent(eventName, data) {
+      if (eventName) this.addEvent({ name: eventName, data: data });
+    },
+    async generatePDF() {
+      try {
+        this.loadingFile = true;
+
+        const element = document.getElementById('printMeSub');
+
+        const opt = {
+          margin: 0,
+          filename: this.name + '.pdf',
+          image: { type: 'jpeg', quality: 0.98 },
+          html2canvas: { scale: 2 },
+          jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
+        };
+
+        await html2pdf()
+          .set(opt)
+          .from(element)
+          .save();
+
+      } catch (error) {
+        console.error('Erro ao gerar PDF:', error);
+      } finally {
+        this.loadingFile = false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+table tbody tr td {
+  width: 1100px;
+}
+
+.table thead tr {
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+}
+
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 0px !important;
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+  padding-right: 5px !important;
+  border-bottom: 0px !important;
+  border-top: 0px !important;
+  font-size: 13px !important;
+}
+
+.title-header {
+  font-size: 12px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.table-number {
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.table-main {
+  color: #757d8c;
+  max-width: 200px;
+}
+
+.table-currency {
+  font-size: 12px;
+  min-width: 100px;
+}
+
+.preview {
+  background-color: #fafafa;
+  padding-bottom: 20px;
+  border: 1px solid #e4e6ec;
+}
+
+.loading-icon {
+  color: orange;
+  font-size: 19px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.toolbar {
+  height: 40px;
+  border-bottom: 1px hsl(0, 0%, 82.7%) solid;
+  overflow: hidden;
+}
+
+.icon-toolbar {
+  width: 20px;
+  font-size: 18px;
+  margin-left: 10px;
+  margin-top: 2px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.a4 {
+  max-width: 1100px;
+  padding: 20px;
+  border-radius: var(--ck-border-radius);
+  background: white;
+  box-shadow: 0 0 5px hsl(0deg 0% 0% / 10%);
+  margin: 0 auto;
+}
+
+.footer {
+  margin-bottom: 10px;
+}
+
+.icon-excel {
+  color: green;
+}
+
+.danger {
+  color: #f0134d;
+}
+
+.progress-rent {
+  color: #4bb4e2;
+}
+
+.accepted {
+  color: #38a169;
+}
+
+.rejected {
+  color: #f0134d;
+}
+</style>