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

2023-12-18 17:18:05 +08:00 · 2023-12-18 17:18:05 +08:00 · 263ebe6cf9
commit 263ebe6cf9
parent 3ea84269d0
10 changed files with 65 additions and 7 deletions
--- a/core/frontend/src/lang/en.js
+++ b/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',
--- a/core/frontend/src/lang/tw.js
+++ b/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: '透視表',
--- a/core/frontend/src/lang/zh.js
+++ b/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: '透视表',
--- a/core/frontend/src/views/chart/chart/chart.js
+++ b/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
--- a/core/frontend/src/views/chart/chart/table/table-info.js
+++ b/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)
--- a/core/frontend/src/views/chart/chart/util.js
+++ b/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'
      ],
--- a/core/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
+++ b/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
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
+++ b/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
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
+++ b/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
--- a/core/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/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' : ''
    }
  }
 }