From 6c7d65fc776d270091312843850d163610a12b32 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 31 Jan 2022 14:34:31 +0800
Subject: [PATCH] feat: S2

---
 frontend/src/lang/en.js                       |  6 ++-
 frontend/src/lang/tw.js                       |  6 ++-
 frontend/src/lang/zh.js                       |  6 ++-
 frontend/src/views/chart/chart/chart.js       |  2 +
 .../shape-attr/SizeSelectorAntV.vue           | 38 +++++++++++++------
 frontend/src/views/chart/view/ChartEdit.vue   |  2 +-
 6 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index c1a0036c7a..3135ae9403 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1016,7 +1016,11 @@ export default {
     filter_exp: 'Filter Value',
     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.'
+    enum_value_can_not_null: 'Enum Value can not empty.',
+    table_config: 'Table Config',
+    table_column_width_config: 'Column Width',
+    table_column_adapt: 'Adapt',
+    table_column_custom: 'Custom'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 622f135d37..39d208e5fc 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1016,7 +1016,11 @@ export default {
     filter_exp: '過濾值',
     filter_type: '過濾方式',
     filter_value_can_not_str: '數值類型字段過濾值不能包含文本',
-    enum_value_can_not_null: '字段枚舉值不能為空'
+    enum_value_can_not_null: '字段枚舉值不能為空',
+    table_config: '表格配置',
+    table_column_width_config: '列寬調整',
+    table_column_adapt: '自適應',
+    table_column_custom: '自定義'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 79869971c1..32bfd2af3e 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1018,7 +1018,11 @@ export default {
     filter_exp: '过滤值',
     filter_type: '过滤方式',
     filter_value_can_not_str: '数值类型字段过滤值不能包含文本',
-    enum_value_can_not_null: '字段枚举值不能为空'
+    enum_value_can_not_null: '字段枚举值不能为空',
+    table_config: '表格配置',
+    table_column_width_config: '列宽调整',
+    table_column_adapt: '自适应',
+    table_column_custom: '自定义'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index e0f36d1f81..9356fd684b 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -31,6 +31,8 @@ export const DEFAULT_SIZE = {
   tableTitleHeight: 36,
   tableItemHeight: 36,
   tablePageSize: '20',
+  tableColumnMode: 'adapt',
+  tableColumnWidth: 100,
   gaugeMin: 0,
   gaugeMax: 100,
   gaugeStartAngle: 225,
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index ad36ad6972..b2b58c76b7 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -81,6 +81,16 @@
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
+        <el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_size')" class="form-item">
+          <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
+            <el-option
+              v-for="item in pageSizeOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
         <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
           <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@@ -92,20 +102,19 @@
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('chart.table_title_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+          <el-slider v-model="sizeForm.tableTitleHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
         <el-form-item :label="$t('chart.table_item_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+          <el-slider v-model="sizeForm.tableItemHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
-        <el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_size')" class="form-item">
-          <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
-            <el-option
-              v-for="item in pageSizeOptions"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
+        <el-form-item :label="$t('chart.table_column_width_config')" class="form-item">
+          <el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase">
+            <el-radio label="adapt"><span>{{ $t('chart.table_column_adapt') }}</span></el-radio>
+            <el-radio label="custom"><span>{{ $t('chart.table_column_custom') }}</span></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="sizeForm.tableColumnMode === 'custom'" label="" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.tableColumnWidth" :min="100" :max="500" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
       </el-form>
 
@@ -322,6 +331,9 @@ export default {
           this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
 
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
+
+          this.sizeForm.tableColumnMode = this.sizeForm.tableColumnMode ? this.sizeForm.tableColumnMode : DEFAULT_SIZE.tableColumnMode
+          this.sizeForm.tableColumnWidth = this.sizeForm.tableColumnWidth ? this.sizeForm.tableColumnWidth : DEFAULT_SIZE.tableColumnWidth
         }
       }
     },
@@ -361,7 +373,9 @@ export default {
 .el-select-dropdown__item{
   padding: 0 20px;
 }
-  span{font-size: 12px}
+span{
+  font-size: 12px
+}
 
 .el-form-item{
   margin-bottom: 6px;
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 9675393638..73c15a2f72 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -565,7 +565,7 @@
                   <el-collapse-item
                     v-show="view.render && view.render === 'antv' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud' && chart.type !== 'treemap'"
                     name="size"
-                    :title="$t('chart.size')"
+                    :title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
                   >
                     <size-selector-ant-v
                       :param="param"