Merge pull request #13094 from dataease/pr@dev-v2@fix_table_info_merge_cell_style

Pr@dev v2@fix table info merge cell style

core/core-frontend/src/components/visualization/UserViewEnlarge.vue

@@ -183,7 +183,8 @@ const DETAIL_CHART_ATTR: DeepPartial<ChartObj> = {
     tableCell: {
       tableItemBgColor: '#FFFFFF',
       tableFontColor: '#7C7E81',
-      enableTableCrossBG: false
+      enableTableCrossBG: false,
+      mergeCells: false
     },
     tooltip: {
       show: false

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

@@ -3,17 +3,18 @@ import {
   S2DataConfig,
   S2Event,
   S2Options,
+  S2Theme,
   TableColCell,
   TableDataCell,
   TableSheet,
   ViewMeta
 } from '@antv/s2'
 import { formatterItem, valueFormatter } from '../../../formatter'
-import { parseJson } from '../../../util'
+import { hexColorToRGBA, isAlphaColor, parseJson } from '../../../util'
 import { S2ChartView, S2DrawOptions } from '../../types/impl/s2'
 import { TABLE_EDITOR_PROPERTY, TABLE_EDITOR_PROPERTY_INNER } from './common'
 import { useI18n } from '@/hooks/web/useI18n'
-import { isNumber } from 'lodash-es'
+import { isNumber, merge } from 'lodash-es'
 import {
   copyContent,
   getRowIndex,
@@ -330,6 +331,64 @@ export class TableInfo extends S2ChartView<TableSheet> {
     return newChart
   }
 
+  protected configTheme(chart: Chart): S2Theme {
+    const theme = super.configTheme(chart)
+    const { basicStyle, tableCell } = parseJson(chart.customAttr)
+    if (tableCell.mergeCells) {
+      const tableFontColor = hexColorToRGBA(tableCell.tableFontColor, basicStyle.alpha)
+      let tableItemBgColor = tableCell.tableItemBgColor
+      if (!isAlphaColor(tableItemBgColor)) {
+        tableItemBgColor = hexColorToRGBA(tableItemBgColor, basicStyle.alpha)
+      }
+      const { tableBorderColor } = basicStyle
+      const { tableItemAlign, tableItemFontSize } = tableCell
+      const fontStyle = tableCell.isItalic ? 'italic' : 'normal'
+      const fontWeight = tableCell.isBolder === false ? 'normal' : 'bold'
+      const mergeCellTheme: S2Theme = {
+        mergedCell: {
+          cell: {
+            backgroundColor: tableItemBgColor,
+            crossBackgroundColor: tableItemBgColor,
+            horizontalBorderColor: tableBorderColor,
+            verticalBorderColor: tableBorderColor,
+            horizontalBorderWidth: tableCell.showHorizonBorder ? 1 : 0,
+            verticalBorderWidth: tableCell.showVerticalBorder ? 1 : 0
+          },
+          bolderText: {
+            fill: tableFontColor,
+            textAlign: tableItemAlign,
+            fontSize: tableItemFontSize,
+            fontStyle,
+            fontWeight
+          },
+          text: {
+            fill: tableFontColor,
+            textAlign: tableItemAlign,
+            fontSize: tableItemFontSize,
+            fontStyle,
+            fontWeight
+          },
+          measureText: {
+            fill: tableFontColor,
+            textAlign: tableItemAlign,
+            fontSize: tableItemFontSize,
+            fontStyle,
+            fontWeight
+          },
+          seriesText: {
+            fill: tableFontColor,
+            textAlign: tableItemAlign,
+            fontSize: tableItemFontSize,
+            fontStyle,
+            fontWeight
+          }
+        }
+      }
+      merge(theme, mergeCellTheme)
+    }
+    return theme
+  }
+
   constructor() {
     super('table-info', [])
   }

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

@@ -1035,7 +1035,7 @@ export function copyContent(s2Instance: SpreadSheet, event, fieldMeta) {
           if (metaObj) {
             fieldVal = metaObj.formatter(value)
           }
-          if (fieldVal === undefined) {
+          if (fieldVal === undefined || fieldVal === null) {
             fieldVal = ''
           }
           if (index !== arr.length - 1) {

core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue

@@ -29,6 +29,7 @@ import { deepCopy } from '@/utils/utils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { trackBarStyleCheck } from '@/utils/canvasUtils'
 import { type SpreadSheet } from '@antv/s2'
+import { parseJson } from '../../js/util'
 
 const dvMainStore = dvMainStoreWithOut()
 const {
@@ -165,10 +166,19 @@ const renderChartFromDialog = (viewInfo: Chart, chartDataInfo) => {
   chartData.value = chartDataInfo
   renderChart(viewInfo, false)
 }
+// 处理存量图表的默认值
+const handleDefaultVal = (chart: Chart) => {
+  const customAttr = parseJson(chart.customAttr)
+  // 明细表默认合并单元格，存量的不合并
+  if (customAttr.tableCell.mergeCells === undefined) {
+    customAttr.tableCell.mergeCells = false
+  }
+}
 const renderChart = (viewInfo: Chart, resetPageInfo: boolean) => {
   if (!viewInfo) {
     return
   }
+  handleDefaultVal(viewInfo)
   // view 为引用对象 需要存库 view.data 直接赋值会导致保存不必要的数据
   actualChart = deepCopy({
     ...defaultsDeep(viewInfo, cloneDeep(BASE_VIEW_CONFIG)),