Merge pull request #13617 from dataease/pr@dev-v2@chart-table-info-style

style(图表): 明细表调整冻结以及自动换行的提示

core/core-frontend/src/locales/en.ts

@@ -1741,8 +1741,7 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     p_bottom: 'Bottom alignment',
     p_center: 'Center',
     table_auto_break_line: 'Automatic line break',
-    table_break_line_tip:
+    table_break_line_tip: 'After merging cells, automatic line wrapping is not supported',
-      'Turn on automatic line break, the table header row height setting will be invalid',
     table_break_line_max_lines: 'Maximum number of lines',
     step: 'Step length (px)',
     no_function:
@@ -1853,7 +1852,10 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     length_limit: 'length limit',
     radar_point: 'enable auxiliary points',
     radar_point_size: 'size',
-    radar_area_color: 'enable area '
+    radar_area_color: 'enable area',
+    table_freeze_tip: 'after merging cells, column and row freezing is not supported',
+    merge_cells_tips:
+      'after merging cells, freezing rows and columns and automatic line wrapping will become invalid'
   },
   dataset: {
     scope_edit: 'only effective when editing',

core/core-frontend/src/locales/tw.ts

@@ -1705,7 +1705,7 @@ export default {
     p_bottom: '下對齊',
     p_center: '居中',
     table_auto_break_line: '自動換行',
-    table_break_line_tip: '開啟自動換行，表頭行高設定將失效',
+    table_break_line_tip: '合併儲存格後，不支持自動換行',
     table_break_line_max_lines: '最大行數',
     step: '步長(px)',
     no_function: '函數尚未支援直接引用，請在欄位表達式中手動輸入。 ',
@@ -1813,7 +1813,9 @@ export default {
     length_limit: '長度限制',
     radar_point: '開啟輔助點',
     radar_point_size: '輔助點大小',
-    radar_area_color: '開啟面積'
+    radar_area_color: '開啟面積',
+    table_freeze_tip: '合併儲存格後，不支持行列凍結',
+    merge_cells_tips: '合併儲存格後，行列凍結、自動換行會失效'
   },
   dataset: {
     scope_edit: '僅編輯時生效',

core/core-frontend/src/locales/zh-CN.ts

@@ -1708,7 +1708,7 @@ export default {
     p_bottom: '下对齐',
     p_center: '居中',
     table_auto_break_line: '自动换行',
-    table_break_line_tip: '开启自动换行，表头行高设置将失效',
+    table_break_line_tip: '合并单元格后，不支持自动换行',
     table_break_line_max_lines: '最大行数',
     step: '步长(px)',
     no_function: '函数尚未支持直接引用，请在字段表达式中手动输入。',
@@ -1816,7 +1816,9 @@ export default {
     length_limit: '长度限制',
     radar_point: '开启辅助点',
     radar_point_size: '辅助点大小',
-    radar_area_color: '开启面积'
+    radar_area_color: '开启面积',
+    table_freeze_tip: '合并单元格后，不支持行列冻结',
+    merge_cells_tips: '合并单元格后，行列冻结、自动换行会失效'
   },
   dataset: {
     scope_edit: '仅编辑时生效',

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

@@ -320,6 +320,17 @@ const mapCustomRangeValidate = prop => {
   }
   changeBasicStyle(prop)
 }
+/**
+ * 表格是否合并单元格
+ */
+const mergeCell = computed(() => {
+  if (COLUMN_WIDTH_TYPE.includes(props.chart.type)) {
+    let { customAttr } = JSON.parse(JSON.stringify(props.chart))
+    const { tableCell } = customAttr
+    return tableCell.mergeCells
+  }
+  return false
+})
 onMounted(() => {
   init()
 })
@@ -1057,12 +1068,13 @@ onMounted(() => {
       <el-checkbox
         size="small"
         :effect="themes"
+        :disabled="mergeCell"
         v-model="state.basicStyleForm.autoWrap"
         @change="changeBasicStyle('autoWrap')"
       >
         <span class="data-area-label">
           <span style="margin-right: 4px">{{ t('chart.table_auto_break_line') }}</span>
-          <el-tooltip class="item" effect="dark" placement="bottom">
+          <el-tooltip class="item" effect="dark" placement="bottom" v-if="mergeCell">
             <template #content>
               <div>{{ t('chart.table_break_line_tip') }}</div>
             </template>
@@ -1086,6 +1098,7 @@ onMounted(() => {
         :show-input-controls="false"
         :min="1"
         :step="1"
+        :disabled="mergeCell"
         @change="changeBasicStyle('maxLines')"
       />
     </el-form-item>

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

@@ -332,7 +332,22 @@ onMounted(() => {
         v-model="state.tableCellForm.tableFreeze"
         @change="changeTableCell('tableFreeze')"
       >
-        {{ t('chart.table_freeze') }}
+        <span class="data-area-label">
+          <span style="margin-right: 4px">{{ t('chart.table_freeze') }}</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="bottom"
+            v-if="state.tableCellForm.mergeCells"
+          >
+            <template #content>
+              <div>{{ t('chart.table_freeze_tip') }}</div>
+            </template>
+            <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
+              <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
+            </el-icon>
+          </el-tooltip>
+        </span>
       </el-checkbox>
     </el-form-item>
     <el-row :gutter="8" v-if="showProperty('tableFreeze')">
@@ -394,7 +409,7 @@ onMounted(() => {
           <span style="margin-right: 4px">{{ t('chart.merge_cells') }}</span>
           <el-tooltip class="item" effect="dark" placement="bottom">
             <template #content>
-              <div>合并单元格后，行列冻结、自动换行会失效。</div>
+              <div>{{ t('chart.merge_cells_tips') }}</div>
             </template>
             <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
               <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>

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

@@ -181,7 +181,7 @@ export class TableInfo extends S2ChartView<TableSheet> {
         return p
       }, {})
     }
-    if (tableCell.tableFreeze) {
+    if (tableCell.tableFreeze && !tableCell.mergeCells) {
       s2Options.frozenColCount = tableCell.tableColumnFreezeHead ?? 0
       s2Options.frozenRowCount = tableCell.tableRowFreezeHead ?? 0
     }
@@ -212,7 +212,7 @@ export class TableInfo extends S2ChartView<TableSheet> {
         }
       }
       // 配置文本自动换行参数
-      viewMeta.autoWrap = basicStyle.autoWrap
+      viewMeta.autoWrap = tableCell.mergeCells ? false : basicStyle.autoWrap
       viewMeta.maxLines = basicStyle.maxLines
       return new CustomDataCell(viewMeta, viewMeta?.spreadsheet)
     }
@@ -239,7 +239,7 @@ export class TableInfo extends S2ChartView<TableSheet> {
       this.configHeaderInteraction(chart, s2Options)
       s2Options.colCell = (node, sheet, config) => {
         // 配置文本自动换行参数
-        node.autoWrap = basicStyle.autoWrap
+        node.autoWrap = tableCell.mergeCells ? false : basicStyle.autoWrap
         node.maxLines = basicStyle.maxLines
         return new CustomTableColCell(node, sheet, config)
       }
@@ -251,7 +251,7 @@ export class TableInfo extends S2ChartView<TableSheet> {
     // 总计紧贴在单元格后面
     summaryRowStyle(newChart, newData, tableCell, tableHeader, basicStyle.showSummary)
     // 开启自动换行
-    if (basicStyle.autoWrap) {
+    if (basicStyle.autoWrap && !tableCell.mergeCells) {
       // 调整表头宽度时，计算表头高度
       newChart.on(S2Event.LAYOUT_RESIZE_COL_WIDTH, info => {
         calculateHeaderHeight(info, newChart, tableHeader, basicStyle, null)