Fix: Style Table Report Engine (#2452)

* Fix: Style Table Report Enginer * Fix: Style Table Report Enginer * Fix: Style Table Report Enginer * Fix: Style Table Report Enginer * Fix: Style Table Report Enginer * Fix: Style Table Report Enginer
solop-develop · Jul 17, 2024 · 920a2a7 · 920a2a7
1 parent c4a0537
commit 920a2a7
Showing 1 changed file with 100 additions and 11 deletions.
diff --git a/src/views/ADempiere/ReportViewerEngine/reportPanel.vue b/src/views/ADempiere/ReportViewerEngine/reportPanel.vue
@@ -28,13 +28,13 @@
             plain
             size="mini"
             type="primary"
-            style="float: right;font-weight: bold;"
+            style="float: right;font-weight: bold"
             @click="exportFile"
           >
             {{ $t('excel.export') }}
             <el-divider
               direction="vertical"
-              style="margin-right: 0px;font-weight: bold;"
+              style="margin-right: 0px;font-weight: bold"
             />
             <i
               class="el-icon-arrow-down"
@@ -44,15 +44,18 @@
         </el-col>
       </el-row>
       <el-table
+        ref="elTable"
         :data="dataList"
         row-key="level"
-        :border="true"
+        :border="false"
         style="width: 100%"
-        :header-cell-style="{ background: 'gainsboro' }"
         lazy
-        :default-expand-all="true"
+        :default-expand-all="false"
         :tree-props="{children: 'children'}"
-        height="calc(100vh - 190px)"
+        height="calc(100vh - 210px)"
+        :cell-style="{padding: '0', height: '30px', border: 'none'}"
+        :cell-class-name="getRowClassName"
+        @row-click="handleRowClick"
       >
         <el-table-column
           v-for="(fieldAttributes, key) in columns"
@@ -65,7 +68,9 @@
             {{ fieldAttributes.title }}
           </template>
           <template slot-scope="scope">
-            {{ displayLabel(fieldAttributes.code, scope.row) }}
+            <span :style="getCellStyle(fieldAttributes.code, scope.row)">
+              {{ displayLabel(fieldAttributes.code, scope.row) }}
+            </span>
           </template>
         </el-table-column>
       </el-table>
@@ -118,7 +123,36 @@ export default defineComponent({
       required: false
     }
   },
-
+  methods: {
+    handleRowClick(row, column, event) {
+      if (row.children && row.children.length > 0) {
+        this.$refs.elTable.toggleRowExpansion(row)
+      }
+    },
+    getRowClassName({ row, rowIndex }) {
+      const parent = this.findParent(row)
+      if (parent && parent.children[parent.children.length - 1] === row) {
+        return 'last-child-row'
+      }
+      return ''
+    },
+    findParent(row) {
+      // Find parent row logic here
+      let parentRow = null
+      const stack = [...this.dataList]
+      while (stack.length) {
+        const current = stack.pop()
+        if (current.children && current.children.includes(row)) {
+          parentRow = current
+          break
+        }
+        if (current.children) {
+          stack.push(...current.children)
+        }
+      }
+      return parentRow
+    }
+  },
   setup(props) {
     function displayLabel(prop, row) {
       if (isEmptyValue(row.cells)) {
@@ -143,11 +177,12 @@ export default defineComponent({
     const dataList = computed(() => {
       return props.data.map((row, rowIndex) => {
         const index = rowIndex + 1
-        return {
+        const newRow = {
           ...row,
           children: hasChildren(row.children, index.toString()),
           level: index
         }
+        return newRow
       })
     })
     const recordData = computed(() => {
@@ -192,7 +227,19 @@ export default defineComponent({
         reportName: props.reportOutput.name
       })
     }
-
+    function getCellStyle(code, row) {
+      const { value } = row.cells[code]
+      if (typeof value === 'string') {
+        const parsedValue = parseFloat(value)
+        if (!isNaN(parsedValue)) {
+          return { fontSize: '10px' }
+        } else {
+          return { fontSize: '14px' }
+        }
+      } else {
+        return { fontSize: '10px' }
+      }
+    }
     return {
       dataList,
       recordData,
@@ -202,7 +249,8 @@ export default defineComponent({
       displayLabel,
       getAlignment,
       handleChangeSizePage,
-      handleChangePage
+      handleChangePage,
+      getCellStyle
     }
   }
 })
@@ -227,3 +275,44 @@ export default defineComponent({
     }
   }
 </style>
+<style>
+:root {
+  --level-offset: 20px;
+}
+.el-table__row--level-[n] {
+  transform: translateX(calc(var(--level-offset) * var(--level, 1)));
+}
+
+.el-table__row--level-0 {
+  font-weight: 700;
+}
+.expanded {
+  border-left: 3px solid #ddd;
+  height: 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-bottom: 5px solid transparent;
+  border-top: 5px solid #ddd;
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: -5px;
+}
+
+.arrow-right {
+  position: absolute;
+  bottom: -6px;
+  left: 100%;
+  margin-left: 5px;
+  width: 5px;
+  height: 5px;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 8px solid #ddd;
+  content: '';
+}
+.last-child-row {
+    border-bottom: 1px solid #f0eeee !important;
+}
+</style>