feat: 明细表支持下拉翻页两种模式

frontend/src/views/chart/chart/chart.js

@@ -55,7 +55,8 @@ export const DEFAULT_SIZE = {
   liquidOutlineDistance: 8,
   liquidWaveLength: 128,
   liquidWaveCount: 3,
-  liquidShape: 'circle'
+  liquidShape: 'circle',
+  tablePageMode: 'page'
 }
 export const DEFAULT_LABEL = {
   show: false,

frontend/src/views/chart/components/ChartComponentS2.vue

@@ -6,9 +6,9 @@
     </span>
     <div ref="tableContainer" style="width: 100%;overflow: hidden;" :style="{background:container_bg_class.background}">
       <div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" />
-      <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-info-drill' : 'table-dom-info'" />
+      <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? (showPage ? 'table-dom-info-drill' : 'table-dom-info-drill-pull') : (showPage ? 'table-dom-info' : 'table-dom-info-pull')" />
       <div v-if="chart.type === 'table-pivot'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
-      <el-row v-show="chart.type === 'table-info'" class="table-page">
+      <el-row v-show="showPage" class="table-page">
         <span class="total-style">
           {{ $t('chart.total') }}
           <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
@@ -99,7 +99,8 @@ export default {
         pageSize: 20,
         show: 0
       },
-      tableData: []
+      tableData: [],
+      showPage: false
     }
   },
 
@@ -135,17 +136,19 @@ export default {
   methods: {
     initData() {
       let datas = []
+      this.showPage = false
       if (this.chart.data && this.chart.data.fields) {
         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)
         datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
-        if (this.chart.type === 'table-info') {
+        if (this.chart.type === 'table-info' && attr.size.tablePageMode === 'page' && datas.length > this.currentPage.pageSize) {
           // 计算分页
           this.currentPage.show = datas.length
           const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
           const pageEnd = pageStart + this.currentPage.pageSize
           datas = datas.slice(pageStart, pageEnd)
+          this.showPage = true
         }
       } else {
         this.fields = []
@@ -380,12 +383,18 @@ export default {
 .table-dom-info{
   height:calc(100% - 36px);
 }
+.table-dom-info-pull{
+  height:calc(100%);
+}
 .table-dom-normal{
   height:100%;
 }
 .table-dom-info-drill{
   height:calc(100% - 36px - 12px);
 }
+.table-dom-info-drill-pull{
+  height:calc(100% - 12px);
+}
 .table-dom-normal-drill{
   height:calc(100% - 12px);
 }
@@ -409,4 +418,10 @@ export default {
 .page-style >>> .el-input__inner{
   height: 24px;
 }
+.page-style >>> button{
+  background: transparent!important;
+}
+.page-style >>> li{
+  background: transparent!important;
+}
 </style>

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

@@ -84,7 +84,13 @@
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :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-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_mode')" class="form-item">
+          <el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase">
+            <el-option :label="$t('chart.page_mode_page')" value="page" />
+            <el-option :label="$t('chart.page_mode_pull')" value="pull" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="chart.type && chart.type === 'table-info' && sizeForm.tablePageMode === 'page'" :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"
@@ -340,6 +346,7 @@ export default {
           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.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
         }
       }

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

@@ -81,7 +81,13 @@
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :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-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_mode')" class="form-item">
+          <el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase">
+            <el-option :label="$t('chart.page_mode_page')" value="page" />
+            <el-option :label="$t('chart.page_mode_pull')" value="pull" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="chart.type && chart.type === 'table-info' && sizeForm.tablePageMode === 'page'" :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"
@@ -355,6 +361,7 @@ export default {
           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.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
 
           this.sizeForm.tableColumnMode = this.sizeForm.tableColumnMode ? this.sizeForm.tableColumnMode : DEFAULT_SIZE.tableColumnMode

frontend/src/views/chart/components/table/TableNormal.vue

@@ -30,7 +30,7 @@
         </ux-table-column>
       </ux-grid>
 
-      <el-row v-show="chart.type === 'table-info'" class="table-page">
+      <el-row v-show="showPage" class="table-page">
         <span class="total-style">
           {{ $t('chart.total') }}
           <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
@@ -118,7 +118,8 @@ export default {
         page: 1,
         pageSize: 20,
         show: 0
-      }
+      },
+      showPage: false
     }
   },
   computed: {
@@ -162,17 +163,19 @@ export default {
     initData() {
       const that = this
       let datas = []
+      this.showPage = false
       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 : 20)
         datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
-        if (this.chart.type === 'table-info') {
+        if (this.chart.type === 'table-info' && attr.size.tablePageMode === 'page' && datas.length > this.currentPage.pageSize) {
           // 计算分页
           this.currentPage.show = datas.length
           const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
           const pageEnd = pageStart + this.currentPage.pageSize
           datas = datas.slice(pageStart, pageEnd)
+          this.showPage = true
         }
       } else {
         this.fields = []
@@ -191,7 +194,7 @@ export default {
       this.$nextTick(() => {
         if (this.$refs.tableContainer) {
           let pageHeight = 0
-          if (this.chart.type === 'table-info') {
+          if (this.showPage) {
             pageHeight = 36
           }
           const currentHeight = this.$refs.tableContainer.offsetHeight
@@ -378,4 +381,10 @@ export default {
   .page-style >>> .el-input__inner{
     height: 24px;
   }
+  .page-style >>> button{
+    background: transparent!important;
+  }
+  .page-style >>> li{
+    background: transparent!important;
+  }
 </style>