From d00f124c86f1bbf32ad5beb14f1b6cd27776515d Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Wed, 29 May 2024 16:08:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=98=8E=E7=BB=86?=
 =?UTF-8?q?=E8=A1=A8=E5=92=8C=E6=B1=87=E6=80=BB=E8=A1=A8=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E8=A1=A8=E5=A4=B4=20#8834?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/CollapseSwitchItem.vue                | 20 ++++++++++++------
 core/core-frontend/src/locales/zh-CN.ts       |  3 ++-
 .../src/models/chart/chart-attr.d.ts          |  4 ++++
 .../editor-senior/components/Threshold.vue    |  8 +++----
 .../components/dialog/TableThresholdEdit.vue  |  4 ++--
 .../editor/editor-style/ChartStyle.vue        | 14 ++++++++-----
 .../components/table/TableHeaderSelector.vue  |  7 ++++++-
 .../chart/components/editor/util/chart.ts     |  3 ++-
 .../js/panel/charts/table/table-info.ts       | 21 ++++++++++++++++---
 .../js/panel/charts/table/table-normal.ts     | 21 ++++++++++++++++---
 .../views/components/ChartComponentS2.vue     |  3 ++-
 11 files changed, 81 insertions(+), 27 deletions(-)

diff --git a/core/core-frontend/src/components/collapse-switch-item/src/CollapseSwitchItem.vue b/core/core-frontend/src/components/collapse-switch-item/src/CollapseSwitchItem.vue
index 4476ca562f..e46fd207b6 100644
--- a/core/core-frontend/src/components/collapse-switch-item/src/CollapseSwitchItem.vue
+++ b/core/core-frontend/src/components/collapse-switch-item/src/CollapseSwitchItem.vue
@@ -13,6 +13,11 @@ const props = defineProps({
   themes: {
     type: String as PropType<EditorTheme>,
     default: 'dark'
+  },
+  showSwitch: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 })
 const emit = defineEmits(['update:modelValue', 'modelChange'])
@@ -45,12 +50,15 @@ const switchValue = computed({
         <span>
           {{ title }}
         </span>
-        <el-switch
-          :effect="themes"
-          size="small"
-          v-model="switchValue"
-          @click.stop="onSwitchChange"
-        />
+        <div>
+          <el-switch
+            v-show="showSwitch"
+            v-model="switchValue"
+            :effect="themes"
+            size="small"
+            @click.stop="onSwitchChange"
+          />
+        </div>
       </div>
     </template>
     <slot />
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index a85fa55c7b..1906e84237 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -1167,7 +1167,8 @@ export default {
     progress_target: '目标值',
     progress_current: '实际值',
     gauge_axis_label: '显示刻度',
-    gauge_percentage_tick: '百分比刻度'
+    gauge_percentage_tick: '百分比刻度',
+    add_style: '添加样式'
   },
   dataset: {
     scope_edit: '仅编辑时生效',
diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts
index 4dd8778dac..aecc541928 100644
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@@ -286,6 +286,10 @@ declare interface ChartTableHeaderAttr {
    * 列头鼠标悬浮提示开关
    */
   showColTooltip: boolean
+  /**
+   * 表头显示开关
+   */
+  showTableHeader: boolean
 }
 /**
  * 单元格属性
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
index c7049ae8c9..91157a90b7 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
@@ -257,7 +257,7 @@ init()
           <el-tooltip effect="dark" placement="bottom">
             <el-icon style="margin-left: 10px"><InfoFilled /></el-icon>
             <template #content>
-              阈值设置，决定仪表盘区间颜色，为空则不开启阈值，范围(0-100)，逐级递增
+              条件样式设置，决定仪表盘区间颜色，为空则不开启阈值，范围(0-100)，逐级递增
               <br />
               例如：输入 30,70；表示：分为3段，分别为[0,30],(30,70],(70,100]
             </template>
@@ -292,7 +292,7 @@ init()
           <el-tooltip effect="dark" placement="bottom">
             <el-icon style="margin-left: 10px"><InfoFilled /></el-icon>
             <template #content>
-              阈值设置，决定水波图颜色，为空则不开启阈值，范围(0-100)，逐级递增
+              条件样式设置，决定水波图颜色，为空则不开启阈值，范围(0-100)，逐级递增
               <br />
               例如：输入 30,70；表示：分为3段，分别为[0,30],(30,70],(70,100]
             </template>
@@ -370,7 +370,7 @@ init()
     <el-col v-if="props.chart.type && props.chart.type === 'indicator'">
       <el-col>
         <div class="inner-container">
-          <span class="label" :class="'label-' + props.themes">阈值设置</span>
+          <span class="label" :class="'label-' + props.themes">条件样式设置</span>
           <span class="right-btns">
             <span
               class="set-text-info"
@@ -468,7 +468,7 @@ init()
     <el-col v-show="showProperty('tableThreshold')">
       <el-col>
         <div class="inner-container">
-          <span class="label" :class="'label-' + props.themes">阈值设置</span>
+          <span class="label" :class="'label-' + props.themes">条件样式设置</span>
           <span class="right-btns">
             <span
               class="set-text-info"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
index 44186eeccc..73dcb2d95b 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
@@ -436,7 +436,7 @@ init()
           <template #icon>
             <Icon name="icon_add_outlined" />
           </template>
-          {{ t('chart.add_condition') }}
+          {{ t('chart.add_style') }}
         </el-button>
       </div>
     </div>
@@ -451,7 +451,7 @@ init()
       <template #icon>
         <Icon name="icon_add_outlined" />
       </template>
-      {{ t('chart.add_threshold') }}
+      {{ t('chart.add_condition') }}
     </el-button>
   </el-col>
 </template>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
index eb18ae6c5d..9c9e73a427 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@@ -371,11 +371,15 @@ watch(
               @onExtTooltipChange="onExtTooltipChange"
             />
           </collapse-switch-item>
-          <el-collapse-item
-            :effect="themes"
-            name="tableHeader"
-            :title="t('chart.table_header')"
+          <collapse-switch-item
             v-if="showProperties('table-header-selector')"
+            v-model="chart.customAttr.tableHeader.showTableHeader"
+            :change-model="chart.customAttr.tableHeader"
+            :effect="themes"
+            :title="t('chart.table_header')"
+            :show-switch="propertyInnerAll['table-header-selector'].includes('showTableHeader')"
+            name="tableHeader"
+            @modelChange="val => onTableHeaderChange(val, 'showTableHeader')"
           >
             <table-header-selector
               :property-inner="propertyInnerAll['table-header-selector']"
@@ -383,7 +387,7 @@ watch(
               :chart="chart"
               @onTableHeaderChange="onTableHeaderChange"
             />
-          </el-collapse-item>
+          </collapse-switch-item>
           <el-collapse-item
             :effect="themes"
             name="tableCell"
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 756c7e3c37..839d9ef8e5 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
@@ -66,7 +66,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-form ref="tableHeaderForm" :model="state.tableHeaderForm" label-position="top">
+  <el-form
+    :model="state.tableHeaderForm"
+    :disabled="!state.tableHeaderForm.showTableHeader"
+    ref="tableHeaderForm"
+    label-position="top"
+  >
     <el-form-item
       :label="t('chart.backgroundColor')"
       class="form-item"
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index afe196f979..527a106908 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -349,7 +349,8 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = {
   tableTitleHeight: 36,
   tableHeaderSort: false,
   showColTooltip: false,
-  showRowTooltip: false
+  showRowTooltip: false,
+  showTableHeader: true
 }
 export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
   tableFontColor: '#000000',
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 5c048f116d..082bf54099 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
@@ -18,7 +18,8 @@ export class TableInfo extends S2ChartView<TableSheet> {
     ...TABLE_EDITOR_PROPERTY_INNER,
     'table-header-selector': [
       ...TABLE_EDITOR_PROPERTY_INNER['table-header-selector'],
-      'tableHeaderSort'
+      'tableHeaderSort',
+      'showTableHeader'
     ],
     'basic-style-selector': [
       'tableColumnMode',
@@ -135,8 +136,22 @@ export class TableInfo extends S2ChartView<TableSheet> {
     }
     // tooltip
     this.configTooltip(s2Options)
-    // header interaction
-    this.configHeaderInteraction(chart, s2Options)
+    // 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
+    if (customAttr.tableHeader.showTableHeader === false) {
+      s2Options.style.colCfg.height = 1
+      s2Options.interaction = {
+        resize: {
+          colCellVertical: false
+        }
+      }
+      s2Options.colCell = (node, sheet, config) => {
+        node.label = ' '
+        return new TableColCell(node, sheet, config)
+      }
+    } else {
+      // header interaction
+      this.configHeaderInteraction(chart, s2Options)
+    }
     // 开始渲染
     const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)
 
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts
index 5a61f84f61..2bdaa5ca23 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts
@@ -17,7 +17,8 @@ export class TableNormal extends S2ChartView<TableSheet> {
     ...TABLE_EDITOR_PROPERTY_INNER,
     'table-header-selector': [
       ...TABLE_EDITOR_PROPERTY_INNER['table-header-selector'],
-      'tableHeaderSort'
+      'tableHeaderSort',
+      'showTableHeader'
     ]
   }
   axis: AxisType[] = ['xAxis', 'yAxis', 'drill', 'filter']
@@ -134,8 +135,22 @@ export class TableNormal extends S2ChartView<TableSheet> {
     }
     // tooltip
     this.configTooltip(s2Options)
-    // header interaction
-    this.configHeaderInteraction(chart, s2Options)
+    // 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
+    if (customAttr.tableHeader.showTableHeader === false) {
+      s2Options.style.colCfg.height = 1
+      s2Options.interaction = {
+        resize: {
+          colCellVertical: false
+        }
+      }
+      s2Options.colCell = (node, sheet, config) => {
+        node.label = ' '
+        return new TableColCell(node, sheet, config)
+      }
+    } else {
+      // header interaction
+      this.configHeaderInteraction(chart, s2Options)
+    }
     // 开始渲染
     const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)
 
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
index c2bbc01c0c..24108dcdf4 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@@ -207,7 +207,8 @@ const initScroll = () => {
       return
     }
     const rowHeight = customAttr.tableCell.tableItemHeight
-    const headerHeight = customAttr.tableHeader.tableTitleHeight
+    const headerHeight =
+      customAttr.tableHeader.showTableHeader === false ? 1 : customAttr.tableHeader.tableTitleHeight
     const scrollBarSize = myChart.theme.scrollBar.size
     const scrollHeight =
       rowHeight * chartData.value.tableRow.length + headerHeight - offsetHeight + scrollBarSize