refactor(图表): 明细表隐藏表头时不可设置分组

core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderGroupConfig.vue

@@ -1,10 +1,10 @@
 <template>
-  <div id="table-container"></div>
+  <div :id="containerId" class="table-container"></div>
   <div class="button-group">
     <el-button :effect="themes" @click="onCancelConfig">{{ t('chart.cancel') }}</el-button>
     <el-button type="primary" @click="onConfigChange">{{ t('chart.confirm') }}</el-button>
   </div>
-  <div id="menu-group" class="group-menu"></div>
+  <div :id="menuGroupId" class="group-menu"></div>
 </template>
 
 <script setup lang="ts">
@@ -21,7 +21,7 @@ import {
 } from '@antv/s2'
 import { ElMessageBox } from 'element-plus-secondary'
 import { cloneDeep, isEqual, isNumber } from 'lodash-es'
-import { nextTick, onMounted, PropType } from 'vue'
+import { computed, nextTick, onMounted, PropType } from 'vue'
 import { uuid } from 'vue-uuid'
 import { useI18n } from '@/hooks/web/useI18n'
 import {
@@ -89,10 +89,16 @@ const init = () => {
     renderTable(chart)
   })
 }
+const menuGroupId = computed(() => {
+  return 'menu-group-' + props.chart.id
+})
+const containerId = computed(() => {
+  return 'table-container-' + props.chart.id
+})
 let s2: TableSheet
 const renderTable = (chart: ChartObj) => {
   const data = dvMainStore.getViewDataDetails(chart.id)
-  const containerDom = document.getElementById('table-container')
+  const containerDom = document.getElementById(containerId.value)
   let realData = []
   if (data?.tableRow?.length) {
     realData = data.tableRow.slice(0, 10)
@@ -165,7 +171,7 @@ const renderTable = (chart: ChartObj) => {
   s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
   const theme = getCustomTheme(chart)
   s2.setTheme(theme)
-  const groupMenuContainer = document.getElementById('menu-group')
+  const groupMenuContainer = document.getElementById(menuGroupId.value)
   s2.on(S2Event.COL_CELL_CONTEXT_MENU, e => {
     e.preventDefault()
     const curColumns = s2.dataCfg.fields.columns as Array<ColumnNode>
@@ -373,6 +379,7 @@ const renderTable = (chart: ChartObj) => {
           showInput: true,
           inputPlaceholder: t('chart.group_name_edit_tip'),
           inputErrorMessage: t('chart.group_name_error_tip'),
+          inputValue: t('chart.group'),
           // 正则校验，长度 1-20
           inputValidator: val => {
             if (val?.length < 1 || val?.length > 20) {
@@ -494,7 +501,7 @@ class GroupMenu extends BaseTooltip {
 </script>
 
 <style scoped lang="less">
-#table-container {
+.table-container {
   position: relative;
   width: 100%;
   height: 40vh;

core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue

@@ -74,10 +74,17 @@ const changeTableHeader = prop => {
 const changeHeaderGroupConfig = (headerGroupConfig: ChartTableHeaderAttr['headerGroupConfig']) => {
   state.tableHeaderForm.headerGroupConfig = headerGroupConfig
   state.showTableHeaderGroupConfig = false
-  log(headerGroupConfig)
   changeTableHeader('headerGroupConfig')
 }
 
+const enableGroupConfig = computed(() => {
+  return (
+    showProperty('headerGroup') &&
+    state.tableHeaderForm.headerGroup &&
+    state.tableHeaderForm.showTableHeader !== false
+  )
+})
+
 const init = () => {
   const tableHeader = props.chart?.customAttr?.tableHeader
   if (tableHeader) {
@@ -738,6 +745,7 @@ onMounted(() => {
       v-if="showProperty('headerGroup')"
       class="form-item"
       :class="'form-item-' + themes"
+      :disabled="!state.tableHeaderForm.showTableHeader"
     >
       <el-checkbox
         size="small"
@@ -748,11 +756,7 @@ onMounted(() => {
         {{ t('chart.table_header_group') }}
       </el-checkbox>
     </el-form-item>
-    <el-form-item
-      v-if="showProperty('headerGroup') && state.tableHeaderForm.headerGroup"
-      class="form-item"
-      :class="'form-item-' + themes"
-    >
+    <el-form-item v-if="enableGroupConfig" class="form-item" :class="'form-item-' + themes">
       <div class="header-group-config">
         <span>{{ t('chart.table_header_group_config') }}</span>
         <div class="group-icon">

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts

@@ -25,7 +25,6 @@ import {
   configSummaryRow,
   summaryRowStyle,
   configEmptyDataStyle,
-  getValidLeafNodes,
   getLeafNodes,
   getColumns
 } from '@/views/chart/components/js/panel/common/common_table'
@@ -154,8 +153,8 @@ export class TableInfo extends S2ChartView<TableSheet> {
     })
     const { basicStyle, tableCell, tableHeader, tooltip } = parseJson(chart.customAttr)
     // 表头分组
-    const { headerGroup } = tableHeader
-    if (headerGroup) {
+    const { headerGroup, showTableHeader } = tableHeader
+    if (headerGroup && showTableHeader !== false) {
       const { headerGroupConfig } = tableHeader
       if (headerGroupConfig?.columns?.length) {
         const allKeys = columns.map(c => drillFieldMap[c] || c)

core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts

@@ -982,6 +982,10 @@ export function configHeaderInteraction(chart: Chart, option: S2Options) {
         if (meta.field === SERIES_NUMBER_FIELD) {
           return false
         }
+        // 分组
+        if (meta.colIndex === -1) {
+          return false
+        }
         const sortMethodMap = meta.spreadsheet.store.get('sortMethodMap')
         const sortType = sortMethodMap?.[meta.field]
         if (sortType) {