From 34df55d2818f35f19b6990c46df801d90c3497db Mon Sep 17 00:00:00 2001 From: junjie Date: Thu, 28 Oct 2021 14:33:21 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=98=8E=E7=BB=86=E8=A1=A8page=20size?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E4=BD=8D=E7=BD=AE=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lang/en.js | 4 +++- frontend/src/lang/tw.js | 4 +++- frontend/src/lang/zh.js | 4 +++- frontend/src/views/chart/chart/chart.js | 1 + .../components/shape-attr/SizeSelector.vue | 18 ++++++++++++++++++ .../components/shape-attr/SizeSelectorAntV.vue | 18 ++++++++++++++++++ .../chart/components/table/TableNormal.vue | 4 +++- 7 files changed, 49 insertions(+), 4 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 27fd8c95d1..6a9a145598 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -940,7 +940,9 @@ export default { axis_value_split_count: 'Tick Count', chart_waterfall: 'Waterfall', pie_inner_radius_percent: 'Inner Radius(%)', - pie_outer_radius_size: 'Outer Radius' + pie_outer_radius_size: 'Outer Radius', + table_page_size: 'Page Size', + table_page_size_unit: 'Item/Page' }, 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 e4a8ce9497..f4c1254591 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -941,7 +941,9 @@ export default { axis_value_split_count: '刻度數', chart_waterfall: '瀑布圖', pie_inner_radius_percent: '內徑占比', - pie_outer_radius_size: '外徑大小' + pie_outer_radius_size: '外徑大小', + table_page_size: '分頁', + table_page_size_unit: '條/頁' }, dataset: { sheet_warn: '有多個 Sheet 頁，默認抽取第一個', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 9125c205b9..2ee2c8b9e2 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -943,7 +943,9 @@ export default { axis_value_split_count: '刻度数', chart_waterfall: '瀑布图', pie_inner_radius_percent: '内径占比', - pie_outer_radius_size: '外径大小' + pie_outer_radius_size: '外径大小', + table_page_size: '分页', + table_page_size_unit: '条/页' }, dataset: { sheet_warn: '有多个 Sheet 页，默认抽取第一个', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 8a258a56b5..77a8cd1007 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -30,6 +30,7 @@ export const DEFAULT_SIZE = { tableItemFontSize: 12, tableTitleHeight: 36, tableItemHeight: 36, + tablePageSize: '10', gaugeMin: 0, gaugeMax: 100, gaugeStartAngle: 225, diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue index 1753d0dc06..362b8d15ab 100644 --- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue +++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue @@ -100,6 +100,16 @@ + + + + + @@ -289,6 +299,12 @@ export default { { name: this.$t('chart.liquid_shape_pin'), value: 'pin' }, { name: this.$t('chart.liquid_shape_rect'), value: 'rect' } ], + pageSizeOptions: [ + { name: '10' + this.$t('chart.table_page_size_unit'), value: '10' }, + { name: '20' + this.$t('chart.table_page_size_unit'), value: '20' }, + { name: '50' + this.$t('chart.table_page_size_unit'), value: '50' }, + { name: '100' + this.$t('chart.table_page_size_unit'), value: '100' } + ], fontSize: [] } }, @@ -326,6 +342,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.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize } } }, diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue index bc16201dc1..154b109857 100644 --- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue +++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue @@ -97,6 +97,16 @@ + + + + + @@ -282,6 +292,12 @@ export default { { name: this.$t('chart.liquid_shape_pin'), value: 'pin' }, { name: this.$t('chart.liquid_shape_rect'), value: 'rect' } ], + pageSizeOptions: [ + { name: '10' + this.$t('chart.table_page_size_unit'), value: '10' }, + { name: '20' + this.$t('chart.table_page_size_unit'), value: '20' }, + { name: '50' + this.$t('chart.table_page_size_unit'), value: '50' }, + { name: '100' + this.$t('chart.table_page_size_unit'), value: '100' } + ], fontSize: [] } }, @@ -319,6 +335,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.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize } } }, diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue index 470aad3c73..3df46c8fe8 100644 --- a/frontend/src/views/chart/components/table/TableNormal.vue +++ b/frontend/src/views/chart/components/table/TableNormal.vue @@ -42,7 +42,7 @@ :page-sizes="[10,20,50,100]" :page-size="currentPage.pageSize" :pager-count="5" - layout="sizes, prev, pager, next" + layout="prev, pager, next" :total="currentPage.show" class="page-style" @current-change="pageClick" @@ -163,6 +163,8 @@ export default { let datas = [] if (this.chart.data) { 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 : 10) datas = JSON.parse(JSON.stringify(this.chart.data.tableRow)) if (this.chart.type === 'table-info') { // 计算分页