feat(图表): 透视表增加列自适应模式,根据列头内容自适应宽度 #17296

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

@@ -939,6 +939,9 @@ onMounted(async () => {
         <el-radio v-show="chart.type !== 'table-pivot'" label="field" :effect="themes">
           {{ t('chart.table_column_custom') }}
         </el-radio>
+        <el-radio v-show="chart.type === 'table-pivot'" label="colAdapt" :effect="themes">
+          {{ t('chart.table_column_col_adapt') }}
+        </el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item
@@ -1656,7 +1659,7 @@ onMounted(async () => {
 }
 .table-column-mode {
   :deep(.ed-radio) {
-    margin-right: 10px !important;
+    margin-right: 8px !important;
   }
 }
 .basic-input-number {

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

@@ -148,10 +148,15 @@ const init = () => {
           align
         })
       })
-      const flag = alignConfigOptions.findIndex(item => item.id === alignConfig.id) === -1
-      if (flag) {
-        alignConfig.id = alignConfigOptions[0].id
-        alignConfig.align = alignConfigOptions[0].align
+      if (alignConfigOptions.length) {
+        const exist = alignConfigOptions.findIndex(item => item.id === alignConfig.id) !== -1
+        if (!exist) {
+          alignConfig.id = alignConfigOptions[0].id
+          alignConfig.align = alignConfigOptions[0].align
+        }
+      } else {
+        alignConfig.id = ''
+        alignConfig.align = 'left'
       }
     }
   }

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

@@ -189,10 +189,15 @@ const init = () => {
         align
       })
     })
-    const flag = alignConfigOptions.findIndex(item => item.id === alignConfig.id) === -1
-    if (flag) {
-      alignConfig.id = alignConfigOptions[0].id
-      alignConfig.align = alignConfigOptions[0].align
+    if (alignConfigOptions.length) {
+      const exist = alignConfigOptions.findIndex(item => item.id === alignConfig.id) !== -1
+      if (!exist) {
+        alignConfig.id = alignConfigOptions[0].id
+        alignConfig.align = alignConfigOptions[0].align
+      }
+    } else {
+      alignConfig.id = ''
+      alignConfig.align = 'left'
     }
   }
 }

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

@@ -573,6 +573,14 @@ export class TableInfo extends S2ChartView<TableSheet> {
     }
   }
 
+  setupDefaultOptions(chart: ChartObj): ChartObj {
+    const customAttr = parseJson(chart.customAttr)
+    if (customAttr.basicStyle.tableColumnMode === 'colAdapt') {
+      customAttr.basicStyle.tableColumnMode = 'adapt'
+    }
+    return chart
+  }
+
   constructor() {
     super('table-info', [])
   }

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

@@ -72,6 +72,10 @@ export class TableNormal extends S2ChartView<TableSheet> {
 
   setupDefaultOptions(chart: ChartObj): ChartObj {
     chart.xAxis = []
+    const customAttr = parseJson(chart.customAttr)
+    if (customAttr.basicStyle.tableColumnMode === 'colAdapt') {
+      customAttr.basicStyle.tableColumnMode = 'adapt'
+    }
     return chart
   }
 

core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts

@@ -563,6 +563,10 @@ export function getStyle(chart: Chart, dataConfig: S2DataConfig): Style {
         style.colCfg.width = basicStyle.tableColumnWidth
         break
       }
+      case 'colAdapt': {
+        style.layoutWidthType = 'colAdaptive'
+        break
+      }
       // 查看详情用，均分铺满
       default: {
         delete style.layoutWidthType