feat(视图-表格): 明细表、汇总表支持冻结前N列。#6205

core/frontend/src/lang/en.js

@@ -1385,8 +1385,10 @@ export default {
     filter_type: 'Filter Type',
     filter_value_can_not_str: 'Value type can not input string',
     enum_value_can_not_null: 'Enum Value can not empty.',
+    column: 'Column',
     table_config: 'Table Config',
     table_column_width_config: 'Column Width',
+    table_column_freeze: 'Column Freeze',
     table_column_adapt: 'Adapt',
     table_column_custom: 'Custom',
     chart_table_pivot: 'Pivot Table',

core/frontend/src/lang/tw.js

@@ -1383,8 +1383,10 @@ export default {
     filter_type: '過濾方式',
     filter_value_can_not_str: '數值類型字段過濾值不能包含文本',
     enum_value_can_not_null: '字段枚舉值不能為空',
+    column: '列',
     table_config: '表格配置',
     table_column_width_config: '列寬調整',
+    table_column_freeze: '列凍結',
     table_column_adapt: '自適應',
     table_column_custom: '自定義',
     chart_table_pivot: '透視表',

core/frontend/src/lang/zh.js

@@ -1383,8 +1383,10 @@ export default {
     filter_type: '过滤方式',
     filter_value_can_not_str: '数值类型字段过滤值不能包含文本',
     enum_value_can_not_null: '字段枚举值不能为空',
+    column: '列',
     table_config: '表格配置',
     table_column_width_config: '列宽调整',
+    table_column_freeze: '列冻结',
     table_column_adapt: '自适应',
     table_column_custom: '自定义',
     chart_table_pivot: '透视表',

core/frontend/src/views/chart/chart/chart.js

@@ -170,7 +170,9 @@ export const DEFAULT_SIZE = {
   quotaSuffixFontIsItalic: false,
   quotaSuffixFontIsBolder: false,
   quotaSuffixLetterSpace: '0',
-  quotaSuffixFontShadow: false
+  quotaSuffixFontShadow: false,
+  tableColumnFreezeHead: 0,
+  tableColumnFreezeTail: 0
 }
 export const DEFAULT_SUSPENSION = {
   show: true

core/frontend/src/views/chart/chart/table/table-info.js

@@ -91,7 +91,8 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo)
     height: containerDom.offsetHeight,
     showSeriesNumber: customAttr.size.showIndex,
     style: getSize(chart),
-    conditions: getConditions(chart)
+    conditions: getConditions(chart),
+    frozenColCount: customAttr.size.tableColumnFreezeHead ?? 0
   }
   // 开启序号之后，第一列就是序号列，修改 label 即可
   if (s2Options.showSeriesNumber) {
@@ -279,7 +280,8 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
     height: containerDom.offsetHeight,
     showSeriesNumber: customAttr.size.showIndex,
     style: getSize(chart),
-    conditions: getConditions(chart)
+    conditions: getConditions(chart),
+    frozenColCount: customAttr.size.tableColumnFreezeHead ?? 0
   }
   // 开启序号之后，第一列就是序号列，修改 label 即可
   if (s2Options.showSeriesNumber) {
@@ -291,7 +293,6 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
           node.label = customAttr.size.indexLabel
         }
       }
-      return node.belongsCell
     }
     s2Options.dataCell = (viewMeta) => {
       return new DataCell(viewMeta, viewMeta?.spreadsheet)

core/frontend/src/views/chart/chart/util.js

@@ -63,6 +63,7 @@ export const TYPE_CONFIGS = [
         'tableTitleHeight',
         'tableItemHeight',
         'tableColumnMode',
+        'tableColumnFreeze',
         'showIndex',
         'indexLabel',
         'tableColTooltip',
@@ -119,7 +120,8 @@ export const TYPE_CONFIGS = [
         'showIndex',
         'indexLabel',
         'tableColTooltip',
-        'showTableHeader'
+        'showTableHeader',
+        'tableColumnFreeze'
       ],
       'title-selector-ant-v': [
         'show',
@@ -2081,6 +2083,7 @@ export const TYPE_CONFIGS = [
         'tableTitleHeight',
         'tableItemHeight',
         'tableColumnWidth',
+        'tableColumnFreeze',
         'showIndex',
         'indexLabel',
         'tableAutoBreakLine',
@@ -2130,6 +2133,7 @@ export const TYPE_CONFIGS = [
         'tableColumnWidth',
         'showIndex',
         'indexLabel',
+        'tableColumnFreeze',
         'tableAutoBreakLine',
         'showTableHeader'
       ],

core/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue

@@ -117,7 +117,7 @@
               v-show="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'"
               v-model="item.value"
               class="value-item"
-              style="margin-left: 10px; padding-right: 10px"
+              style="padding-left: 10px"
               :placeholder="$t('chart.drag_block_label_value')"
               size="mini"
               clearable

core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue

@@ -329,6 +329,21 @@
             @change="changeBarSizeCase('tableColumnWidth')"
           />
         </el-form-item>
+        <el-form-item
+          v-if="showProperty('tableColumnFreeze')"
+          :label="$t('chart.table_column_freeze')"
+          class="form-item"
+        >
+          <span>{{ $t('dynamic_time.before') }} </span>
+          <el-input-number
+            v-model="sizeForm.tableColumnFreezeHead"
+            :min="0"
+            :max="100"
+            :step-strictly="true"
+            @change="changeBarSizeCase('tableColumnFreezeHead')"
+          />
+          <span> {{ $t('chart.column') }}</span>
+        </el-form-item>
         <el-form-item
           v-if="showProperty('tableAutoBreakLine')"
           :label="$t('chart.table_auto_break_line')"
@@ -1236,6 +1251,8 @@ export default {
           this.sizeForm.liquidOutlineDistance = (this.sizeForm.liquidOutlineDistance || this.sizeForm.liquidOutlineDistance === 0) ? this.sizeForm.liquidOutlineDistance : DEFAULT_SIZE.liquidOutlineDistance
           this.sizeForm.liquidWaveLength = this.sizeForm.liquidWaveLength ? this.sizeForm.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength
           this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
+          this.sizeForm.tableColumnFreezeHead = this.sizeForm.tableColumnFreezeHead ?? DEFAULT_SIZE.tableColumnFreezeHead
+          this.sizeForm.tableColumnFreezeTail = this.sizeForm.tableColumnFreezeTail ?? DEFAULT_SIZE.tableColumnFreezeTail
 
           this.sizeForm.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize

core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue

@@ -295,6 +295,21 @@
             @change="changeBarSizeCase('tableColumnWidth')"
           />
         </el-form-item>
+        <el-form-item
+          v-if="showProperty('tableColumnFreeze')"
+          :label="$t('chart.table_column_freeze')"
+          class="form-item"
+        >
+          <span>{{ $t('dynamic_time.before') }} </span>
+          <el-input-number
+            v-model="sizeForm.tableColumnFreezeHead"
+            :min="0"
+            :max="100"
+            :step-strictly="true"
+            @change="changeBarSizeCase('tableColumnFreezeHead')"
+          />
+          <span> {{ $t('chart.column') }}</span>
+        </el-form-item>
         <el-form-item
           v-if="showProperty('showIndex')"
           :label="$t('chart.table_show_index')"
@@ -1680,6 +1695,8 @@ export default {
           this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
           this.sizeForm.tableRowTooltip = this.sizeForm.tableRowTooltip ?? DEFAULT_SIZE.tableRowTooltip
           this.sizeForm.tableColTooltip = this.sizeForm.tableColTooltip ?? DEFAULT_SIZE.tableColTooltip
+          this.sizeForm.tableColumnFreezeHead = this.sizeForm.tableColumnFreezeHead ?? DEFAULT_SIZE.tableColumnFreezeHead
+          this.sizeForm.tableColumnFreezeTail = this.sizeForm.tableColumnFreezeTail ?? DEFAULT_SIZE.tableColumnFreezeTail
 
           this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
           this.sizeForm.showTableHeader = this.sizeForm.showTableHeader !== false

core/frontend/src/views/chart/components/table/TableNormal.vue

@@ -42,15 +42,18 @@
           type="index"
           :title="indexLabel"
           :width="columnWidth"
+          :resizable="true"
+          :fixed="getFixed(-1)"
         />
         <ux-table-column
-          v-for="field in fields"
+          v-for="(field, index) in fields"
           :key="field.name"
           :field="field.child ? '' : field.dataeaseName"
           :resizable="true"
           :sortable="(!mergeCells || !mergeCells.length) && (!field.child || !field.child.length)"
           :title="field.name"
           :width="columnWidth"
+          :fixed="getFixed(index)"
         >
           <ux-table-column
             v-for="item in field.child"
@@ -728,6 +731,14 @@ export default {
         default:
           break
       }
+    },
+    getFixed(index) {
+      const size = JSON.parse(this.chart.customAttr).size
+      const { showIndex, tableColumnFreezeHead } = size
+      if (showIndex) {
+        return index < tableColumnFreezeHead - 1 ? 'left' : ''
+      }
+      return index < tableColumnFreezeHead ? 'left' : ''
     }
   }
 }