Merge pull request #12674 from dataease/pr@dev-v2@table_row_col_freeze

fix(图表): 明细表和汇总表支持冻结行列 #10838 #11482 #11630

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

@@ -971,6 +971,9 @@ export default {
     table_header_show_vertical_border: '表头纵边框线',
     table_cell_show_horizon_border: '单元格横边框线',
     table_cell_show_vertical_border: '单元格纵边框线',
+    table_col_freeze_tip: '第一列到',
+    tbale_row_freeze_tip: '第一行到',
+    table_freeze: '冻结',
     stripe: '斑马纹',
     start_angle: '起始角度',
     end_angle: '结束角度',

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -410,6 +410,18 @@ declare interface ChartTableCellAttr {
    * 加粗
    */
   isBolder: boolean
+  /**
+   * 冻结
+   */
+  tableFreeze: boolean
+  /**
+   * 冻结列
+   */
+  tableColumnFreezeHead: number
+  /**
+   * 冻结行
+   */
+  tableRowFreezeHead: number
 }
 
 /**

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

@@ -308,6 +308,58 @@ onMounted(() => {
         </el-form-item>
       </el-col>
     </el-row>
+    <el-form-item
+      class="form-item"
+      :class="'form-item-' + themes"
+      v-if="showProperty('tableFreeze')"
+    >
+      <el-checkbox
+        size="small"
+        :effect="themes"
+        v-model="state.tableCellForm.tableFreeze"
+        @change="changeTableCell('tableFreeze')"
+      >
+        {{ t('chart.table_freeze') }}
+      </el-checkbox>
+    </el-form-item>
+    <el-row :gutter="8" v-if="showProperty('tableFreeze')">
+      <el-col :span="12">
+        <el-form-item
+          :label="t('chart.table_col_freeze_tip')"
+          class="form-item"
+          :class="'form-item-' + themes"
+          v-if="showProperty('tableColumnFreezeHead')"
+        >
+          <el-input-number
+            :effect="themes"
+            controls-position="right"
+            v-model="state.tableCellForm.tableColumnFreezeHead"
+            :disabled="!state.tableCellForm.tableFreeze"
+            :min="1"
+            :max="100"
+            @change="changeTableCell('tableColumnFreezeHead')"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item
+          :label="t('chart.tbale_row_freeze_tip')"
+          class="form-item"
+          :class="'form-item-' + themes"
+          v-if="showProperty('tableRowFreezeHead')"
+        >
+          <el-input-number
+            :effect="themes"
+            controls-position="right"
+            v-model="state.tableCellForm.tableRowFreezeHead"
+            :disabled="!state.tableCellForm.tableFreeze"
+            :min="1"
+            :max="100"
+            @change="changeTableCell('tableRowFreezeHead')"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
     <el-form-item
       class="form-item"
       :class="'form-item-' + themes"

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -426,7 +426,10 @@ export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
   showHorizonBorder: true,
   showVerticalBorder: true,
   isItalic: false,
-  isBolder: false
+  isBolder: false,
+  tableFreeze: false,
+  tableColumnFreezeHead: 0,
+  tableRowFreezeHead: 0
 }
 export const DEFAULT_TITLE_STYLE: ChartTextStyle = {
   show: true,

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

@@ -59,6 +59,12 @@ export class TableInfo extends S2ChartView<TableSheet> {
       'tableScrollBarColor',
       'alpha',
       'tablePageMode'
+    ],
+    'table-cell-selector': [
+      ...TABLE_EDITOR_PROPERTY_INNER['table-cell-selector'],
+      'tableFreeze',
+      'tableColumnFreezeHead',
+      'tableRowFreezeHead'
     ]
   }
   axis: AxisType[] = ['xAxis', 'filter', 'drill']
@@ -151,7 +157,9 @@ export class TableInfo extends S2ChartView<TableSheet> {
       tooltip: {
         getContainer: () => containerDom,
         renderTooltip: sheet => new SortTooltip(sheet)
-      }
+      },
+      frozenColCount: customAttr.tableCell.tableColumnFreezeHead ?? 0,
+      frozenRowCount: customAttr.tableCell.tableRowFreezeHead ?? 0
     }
     // 开启序号之后，第一列就是序号列，修改 label 即可
     if (s2Options.showSeriesNumber) {

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

@@ -34,6 +34,12 @@ export class TableNormal extends S2ChartView<TableSheet> {
       ...TABLE_EDITOR_PROPERTY_INNER['basic-style-selector'],
       'showSummary',
       'summaryLabel'
+    ],
+    'table-cell-selector': [
+      ...TABLE_EDITOR_PROPERTY_INNER['table-cell-selector'],
+      'tableFreeze',
+      'tableColumnFreezeHead',
+      'tableRowFreezeHead'
     ]
   }
   axis: AxisType[] = ['xAxis', 'yAxis', 'drill', 'filter']
@@ -132,7 +138,9 @@ export class TableNormal extends S2ChartView<TableSheet> {
       tooltip: {
         getContainer: () => containerDom,
         renderTooltip: sheet => new SortTooltip(sheet)
-      }
+      },
+      frozenColCount: customAttr.tableCell.tableColumnFreezeHead ?? 0,
+      frozenRowCount: customAttr.tableCell.tableRowFreezeHead ?? 0
     }
     // 开启序号之后，第一列就是序号列，修改 label 即可
     if (s2Options.showSeriesNumber) {