Merge pull request #8731 from dataease/pr@dev@feat_antv_table_header_switch

Pr@dev@feat antv table header switch

core/frontend/src/lang/en.js

@@ -1232,6 +1232,7 @@ export default {
     table_item_font_color: 'Table Font',
     table_show_index: 'Show Index',
     table_show_table_header: 'Show Table Header',
+    table_header_sort: 'Enable table header sort',
     stripe: 'Zebra pattern',
     start_angle: 'Start Angle',
     end_angle: 'End Angle',

core/frontend/src/lang/tw.js

@@ -1231,6 +1231,7 @@ export default {
     table_item_font_color: '表格字體',
     table_show_index: '顯示序號',
     table_show_table_header: '顯示表頭',
+    table_header_sort: '開啟表頭排序',
     stripe: '斑馬紋',
     start_angle: '起始角度',
     end_angle: '結束角度',

core/frontend/src/lang/zh.js

@@ -1230,6 +1230,7 @@ export default {
     table_item_font_color: '表格字体',
     table_show_index: '显示序号',
     table_show_table_header: '显示表头',
+    table_header_sort: '开启表头排序',
     stripe: '斑马纹',
     start_angle: '起始角度',
     end_angle: '结束角度',

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

@@ -181,7 +181,8 @@ export const DEFAULT_SIZE = {
   quotaSuffixFontShadow: false,
   tableColumnFreezeHead: 0,
   tableColumnFreezeTail: 0,
-  tableRowFreezeHead: 0
+  tableRowFreezeHead: 0,
+  tableHeaderSort: false
 }
 export const DEFAULT_SUSPENSION = {
   show: true

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

@@ -159,10 +159,6 @@ export function baseTableInfo(container, chart, action, tableData, pageInfo, vue
   }
 
   const customAttr = JSON.parse(chart.customAttr)
-  const sortIconMap = {
-    'asc': 'SortUp',
-    'desc': 'SortDown'
-  }
   // options
   const s2Options = {
     width: containerDom.offsetWidth,
@@ -180,7 +176,17 @@ export function baseTableInfo(container, chart, action, tableData, pageInfo, vue
         padding: '4px 2px'
       }
     },
-    headerActionIcons: [
+    conditions: getConditions(chart),
+    frozenColCount: customAttr.size.tableColumnFreezeHead ?? 0,
+    frozenRowCount: customAttr.size.tableRowFreezeHead ?? 0
+  }
+  // 表头排序
+  if (customAttr.size.tableHeaderSort) {
+    const sortIconMap = {
+      'asc': 'SortUp',
+      'desc': 'SortDown'
+    }
+    s2Options.headerActionIcons = [
       {
         iconNames: ['GroupAsc', 'SortUp', 'SortDown'],
         belongsCell: 'colCell',
@@ -207,10 +213,7 @@ export function baseTableInfo(container, chart, action, tableData, pageInfo, vue
           })
         }
       }
-    ],
-    conditions: getConditions(chart),
-    frozenColCount: customAttr.size.tableColumnFreezeHead ?? 0,
-    frozenRowCount: customAttr.size.tableRowFreezeHead ?? 0
+    ]
   }
   // 开启序号之后，第一列就是序号列，修改 label 即可
   if (s2Options.showSeriesNumber) {
@@ -417,7 +420,17 @@ export function baseTableNormal(container, chart, action, tableData, vueCom, res
         padding: '4px 2px'
       }
     },
-    headerActionIcons: [
+    conditions: getConditions(chart),
+    frozenColCount: customAttr.size.tableColumnFreezeHead ?? 0,
+    frozenRowCount: customAttr.size.tableRowFreezeHead ?? 0
+  }
+  // 表头排序
+  if (customAttr.size.tableHeaderSort) {
+    const sortIconMap = {
+      'asc': 'SortUp',
+      'desc': 'SortDown'
+    }
+    s2Options.headerActionIcons = [
       {
         iconNames: ['GroupAsc', 'SortUp', 'SortDown'],
         belongsCell: 'colCell',
@@ -444,10 +457,7 @@ export function baseTableNormal(container, chart, action, tableData, vueCom, res
           })
         }
       }
-    ],
-    conditions: getConditions(chart),
-    frozenColCount: customAttr.size.tableColumnFreezeHead ?? 0,
-    frozenRowCount: customAttr.size.tableRowFreezeHead ?? 0
+    ]
   }
   // 开启序号之后，第一列就是序号列，修改 label 即可
   if (s2Options.showSeriesNumber) {

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

@@ -68,7 +68,8 @@ export const TYPE_CONFIGS = [
         'indexLabel',
         'tableColTooltip',
         'tableCellTooltip',
-        'showTableHeader'
+        'showTableHeader',
+        'tableHeaderSort'
       ],
       'title-selector-ant-v': [
         'show',
@@ -123,7 +124,8 @@ export const TYPE_CONFIGS = [
         'tableColTooltip',
         'tableCellTooltip',
         'showTableHeader',
-        'tableFreeze'
+        'tableFreeze',
+        'tableHeaderSort'
       ],
       'title-selector-ant-v': [
         'show',

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

@@ -413,6 +413,19 @@
           </el-radio-group>
         </el-form-item>
         <div v-if="(showProperty('showTableHeader') && sizeForm.showTableHeader) || chart.type === 'table-pivot'">
+          <el-form-item
+            v-if="showProperty('tableHeaderSort')"
+            :label="$t('chart.table_header_sort')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="sizeForm.tableHeaderSort"
+              @change="changeBarSizeCase('tableHeaderSort')"
+            >
+              <el-radio :label="true">{{ $t('commons.yes') }}</el-radio>
+              <el-radio :label="false">{{ $t('commons.no') }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
           <el-form-item
             v-if="showProperty('tableTitleFontSize')"
             :label="$t('chart.table_title_fontsize')"
@@ -1771,6 +1784,7 @@ export default {
 
           this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
           this.sizeForm.showTableHeader = this.sizeForm.showTableHeader !== false
+          this.sizeForm.tableHeaderSort = this.sizeForm.tableHeaderSort !== false
           if (this.sizeForm.indexLabel === null || this.sizeForm.indexLabel === undefined) {
             this.sizeForm.indexLabel = DEFAULT_SIZE.indexLabel
           }