feat(视图): 明细表支持隐藏列 close #7937

core/frontend/src/icons/svg/hide.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710992109270" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5059" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M956.8 496c-41.6-70.4-99.2-147.2-176-204.8l105.6-105.6c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0l-115.2 115.2C665.6 214.4 592 192 512 192 297.6 192 153.6 358.4 67.2 496c-6.4 9.6-6.4 22.4 0 32 41.6 70.4 102.4 147.2 176 204.8l-108.8 108.8c-12.8 12.8-12.8 32 0 44.8C144 892.8 150.4 896 160 896s16-3.2 22.4-9.6l115.2-115.2c60.8 38.4 134.4 60.8 214.4 60.8 185.6 0 374.4-128 444.8-307.2C960 515.2 960 505.6 956.8 496zM134.4 512c76.8-121.6 201.6-256 377.6-256 60.8 0 118.4 16 166.4 44.8l-80 80C576 361.6 544 352 512 352c-89.6 0-160 70.4-160 160 0 32 9.6 64 25.6 89.6l-89.6 89.6C224 640 172.8 572.8 134.4 512zM608 512c0 54.4-41.6 96-96 96-16 0-28.8-3.2-41.6-9.6l128-128C604.8 483.2 608 496 608 512zM416 512c0-54.4 41.6-96 96-96 16 0 28.8 3.2 41.6 9.6l-128 128C419.2 540.8 416 528 416 512zM512 768c-60.8 0-118.4-16-166.4-44.8l80-80C448 662.4 480 672 512 672c89.6 0 160-70.4 160-160 0-32-9.6-64-25.6-89.6l89.6-89.6c67.2 51.2 118.4 118.4 156.8 179.2C825.6 659.2 665.6 768 512 768z" p-id="5060"></path></svg>

core/frontend/src/views/chart/chart/table/table-info.js

@@ -119,6 +119,9 @@ export function baseTableInfo(container, chart, action, tableData, pageInfo, vue
   }
   fields.forEach(ele => {
     const f = nameMap[ele.dataeaseName]
+    if (f.hidden === true) {
+      return
+    }
     columns.push(ele.dataeaseName)
     meta.push({
       field: ele.dataeaseName,

core/frontend/src/views/chart/components/dragItem/DimensionItem.vue

@@ -175,6 +175,25 @@
           >
             <span>{{ $t('chart.show_name_set') }}</span>
           </el-dropdown-item>
+          <div v-if="chart.type === 'table-info'">
+            <el-dropdown-item
+              v-if="item.hidden"
+              icon="el-icon-view"
+              :command="beforeClickItem('show')"
+            >
+              <span>{{ $t('chart.show') }}</span>
+            </el-dropdown-item>
+            <el-dropdown-item
+              v-else
+              :command="beforeClickItem('hide')"
+            >
+              <svg-icon
+                style="margin-right: 5px"
+                icon-class="hide"
+              />
+              <span>{{ $t('chart.hide') }}</span>
+            </el-dropdown-item>
+          </div>
           <el-dropdown-item
             icon="el-icon-delete"
             divided
@@ -280,6 +299,10 @@ export default {
         case 'formatter':
           this.valueFormatter()
           break
+        case 'show':
+        case 'hide':
+          this.toggleItem(param.type === 'hide')
+          break
         default:
           break
       }
@@ -350,7 +373,10 @@ export default {
       this.item.formatterType = 'dimension'
       this.$emit('valueFormatter', this.item)
     },
-
+    toggleItem(status) {
+      this.item.hidden = status
+      this.$emit('onDimensionItemChange', this.item)
+    },
     getDateExtStatus() {
       if (this.chart) {
         this.showDateExt = this.chart.datasourceType === 'mysql' ||

core/frontend/src/views/chart/components/table/TableNormal.vue

@@ -304,7 +304,14 @@ export default {
             }
           })
         }
-        this.fields = fields
+        const xAxis = JSON.parse(this.chart.xaxis)
+        const axisMap = xAxis?.reduce((p, n) => {
+          p[n.dataeaseName] = n
+          return p
+        }, {})
+        this.fields = fields.filter(field => {
+          return axisMap?.[field.dataeaseName]?.hidden !== true
+        })
         const attr = JSON.parse(this.chart.customAttr)
         if (this.currentPage.pageSize < attr.size.tablePageSize) {
           this.currentPage.page = 1