Merge pull request #1039 from dataease/pr@dev@feat_table_info

feat: 明细表page size属性位置调整

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',

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 頁，默認抽取第一個',

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 页，默认抽取第一个',

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,

frontend/src/views/chart/components/shape-attr/SizeSelector.vue

@@ -100,6 +100,16 @@
         <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 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>
 
       <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
@@ -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
         }
       }
     },

frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue

@@ -97,6 +97,16 @@
         <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 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>
 
       <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
@@ -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
         }
       }
     },

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') {
           // 计算分页