From b4abe7f0368ebb8ceb8e54f04349afd971737f5d Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Wed, 20 Apr 2022 14:26:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=98=8E=E7=BB=86=E8=A1=A8?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chart/components/ChartComponentS2.vue |  2 +-
 .../components/shape-attr/SizeSelector.vue      |  3 +++
 .../chart/components/table/TableNormal.vue      | 17 +++++++++++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 0fa0b4a97c..47b07eb64a 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -142,7 +142,7 @@ export default {
         const attr = JSON.parse(this.chart.customAttr)
         this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
         datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
-        if (this.chart.type === 'table-info' && attr.size.tablePageMode === 'page' && datas.length > this.currentPage.pageSize) {
+        if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && datas.length > this.currentPage.pageSize) {
           // 计算分页
           this.currentPage.show = datas.length
           const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index d2bded2179..aef968009d 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -116,6 +116,9 @@
         <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-form-item>
+        <el-form-item :label="$t('chart.table_column_width_config')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="1000" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 6a36212d37..af32ffcea5 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -23,6 +23,7 @@
           :resizable="true"
           sortable
           :title="field.name"
+          :width="columnWidth"
         >
           <!--        <template slot="header">-->
           <!--          <span>{{ field.name }}</span>-->
@@ -56,6 +57,7 @@
 <script>
 import { hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
+import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
 
 export default {
   name: 'TableNormal',
@@ -168,8 +170,18 @@ export default {
         this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
         const attr = JSON.parse(this.chart.customAttr)
         this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
+
+        // column width
+        const containerWidth = this.$refs.tableContainer.offsetWidth
+        const columnWidth = attr.size.tableColumnWidth ? attr.size.tableColumnWidth : this.columnWidth
+        if (columnWidth < (containerWidth / this.fields.length)) {
+          this.columnWidth = containerWidth / this.fields
+        } else {
+          this.columnWidth = columnWidth
+        }
+
         datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
-        if (this.chart.type === 'table-info' && attr.size.tablePageMode === 'page' && datas.length > this.currentPage.pageSize) {
+        if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && datas.length > this.currentPage.pageSize) {
           // 计算分页
           this.currentPage.show = datas.length
           const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
@@ -346,7 +358,8 @@ export default {
         page: 1,
         pageSize: 20,
         show: 0
-      }
+      },
+      columnWidth: DEFAULT_SIZE.tableColumnWidth
     }
   }
 }