From a25ed3e7005beb52eaf068b1fee9ea3cde33860c Mon Sep 17 00:00:00 2001
From: wisonic <shaochuan.wu@fit2cloud.com>
Date: Mon, 24 Feb 2025 11:51:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=20=E6=98=8E?=
 =?UTF-8?q?=E7=BB=86=E8=A1=A8=E9=9A=90=E8=97=8F=E8=A1=A8=E5=A4=B4=E6=97=B6?=
 =?UTF-8?q?=E4=B8=8D=E5=8F=AF=E8=AE=BE=E7=BD=AE=E5=88=86=E7=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../table/TableHeaderGroupConfig.vue          | 19 +++++++++++++------
 .../components/table/TableHeaderSelector.vue  | 16 ++++++++++------
 .../js/panel/charts/table/table-info.ts       |  5 ++---
 .../js/panel/common/common_table.ts           |  4 ++++
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderGroupConfig.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderGroupConfig.vue
index b7b4d32fae..f1aa30dfde 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderGroupConfig.vue
+++ b/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;
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
index ebc485e28b..8a4417bf64 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
+++ b/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">
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts
index f0bd214dab..755f1e49c4 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts
+++ b/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)
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
index 72e30745da..30f002605e 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
+++ b/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) {