fix: 视图表格样式合计fix；数据集数据预览表格各项优化

backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java

@@ -63,9 +63,9 @@ public class DataSetTableController {
         return dataSetTableService.getData(dataSetTableRequest);
     }
 
-    @PostMapping("getPreviewData")
-    public Map<String, Object> getPreviewData(@RequestBody DataSetTableRequest dataSetTableRequest) throws Exception {
-        return dataSetTableService.getPreviewData(dataSetTableRequest);
+    @PostMapping("getPreviewData/{page}/{pageSize}")
+    public Map<String, Object> getPreviewData(@RequestBody DataSetTableRequest dataSetTableRequest, @PathVariable Integer page, @PathVariable Integer pageSize) throws Exception {
+        return dataSetTableService.getPreviewData(dataSetTableRequest, page, pageSize);
     }
 
     @PostMapping("sqlPreview")

backend/src/main/java/io/dataease/dto/dataset/DataSetPreviewPage.java

+package io.dataease.dto.dataset;
+
+import lombok.Getter;
+import lombok.Setter;
+
+/**
+ * @Author gin
+ * @Date 2021/4/28 11:13 上午
+ */
+@Getter
+@Setter
+public class DataSetPreviewPage {
+    private Integer total = 0;
+    private Integer show = 0;
+    private Integer page = 1;
+    private Integer pageSize = 100;
+}

backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java

@@ -14,6 +14,7 @@ import io.dataease.datasource.dto.TableFiled;
 import io.dataease.datasource.provider.DatasourceProvider;
 import io.dataease.datasource.provider.ProviderFactory;
 import io.dataease.datasource.request.DatasourceRequest;
+import io.dataease.dto.dataset.DataSetPreviewPage;
 import io.dataease.dto.dataset.DataTableInfoDTO;
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
@@ -34,7 +35,6 @@ import javax.annotation.Resource;
 import java.io.*;
 import java.math.BigDecimal;
 import java.nio.charset.StandardCharsets;
-import java.sql.ResultSet;
 import java.text.MessageFormat;
 import java.util.*;
 import java.util.stream.Collectors;
@@ -172,7 +172,7 @@ public class DataSetTableService {
         return datasourceProvider.getData(datasourceRequest);
     }
 
-    public Map<String, Object> getPreviewData(DataSetTableRequest dataSetTableRequest) throws Exception {
+    public Map<String, Object> getPreviewData(DataSetTableRequest dataSetTableRequest, Integer page, Integer pageSize) throws Exception {
         DatasetTableField datasetTableField = DatasetTableField.builder().build();
         datasetTableField.setTableId(dataSetTableRequest.getId());
         datasetTableField.setChecked(Boolean.TRUE);
@@ -183,6 +183,11 @@ public class DataSetTableService {
         DatasetTable datasetTable = datasetTableMapper.selectByPrimaryKey(dataSetTableRequest.getId());
 
         List<String[]> data = new ArrayList<>();
+        DataSetPreviewPage dataSetPreviewPage = new DataSetPreviewPage();
+        dataSetPreviewPage.setShow(Integer.valueOf(dataSetTableRequest.getRow()));
+        dataSetPreviewPage.setPage(page);
+        dataSetPreviewPage.setPageSize(pageSize);
+        int realSize = Integer.parseInt(dataSetTableRequest.getRow()) < pageSize ? Integer.parseInt(dataSetTableRequest.getRow()) : pageSize;
         if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "db")) {
             Datasource ds = datasourceMapper.selectByPrimaryKey(dataSetTableRequest.getDataSourceId());
             DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());
@@ -190,11 +195,18 @@ public class DataSetTableService {
             datasourceRequest.setDatasource(ds);
 
             String table = dataTableInfoDTO.getTable();
-            datasourceRequest.setQuery(createQuerySQL(ds.getType(), table, fieldArray) + " LIMIT 0," + dataSetTableRequest.getRow());
+            datasourceRequest.setQuery(createQuerySQL(ds.getType(), table, fieldArray) + " LIMIT " + (page - 1) * realSize + "," + realSize);
 
             try {
                 data.addAll(datasourceProvider.getData(datasourceRequest));
             } catch (Exception e) {
+                e.printStackTrace();
+            }
+            try {
+                datasourceRequest.setQuery(createQueryCountSQL(ds.getType(), table));
+                dataSetPreviewPage.setTotal(Integer.valueOf(datasourceProvider.getData(datasourceRequest).get(0)[0]));
+            } catch (Exception e) {
+                e.printStackTrace();
             }
         } else if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "sql")) {
             Datasource ds = datasourceMapper.selectByPrimaryKey(dataSetTableRequest.getDataSourceId());
@@ -203,11 +215,18 @@ public class DataSetTableService {
             datasourceRequest.setDatasource(ds);
 
             String sql = dataTableInfoDTO.getSql();
-            datasourceRequest.setQuery(createQuerySQL(ds.getType(), " (" + sql + ") AS tmp ", fieldArray) + " LIMIT 0," + dataSetTableRequest.getRow());
+            datasourceRequest.setQuery(createQuerySQL(ds.getType(), " (" + sql + ") AS tmp ", fieldArray) + " LIMIT " + (page - 1) * realSize + "," + realSize);
 
             try {
                 data.addAll(datasourceProvider.getData(datasourceRequest));
             } catch (Exception e) {
+                e.printStackTrace();
+            }
+            try {
+                datasourceRequest.setQuery(createQueryCountSQL(ds.getType(), " (" + sql + ") AS tmp "));
+                dataSetPreviewPage.setTotal(Integer.valueOf(datasourceProvider.getData(datasourceRequest).get(0)[0]));
+            } catch (Exception e) {
+                e.printStackTrace();
             }
         } else if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "excel")) {
 
@@ -229,6 +248,7 @@ public class DataSetTableService {
         Map<String, Object> map = new HashMap<>();
         map.put("fields", fields);
         map.put("data", jsonArray);
+        map.put("page", dataSetPreviewPage);
 
         return map;
     }
@@ -314,6 +334,18 @@ public class DataSetTableService {
         }
     }
 
+    public String createQueryCountSQL(String type, String table) {
+        DatasourceTypes datasourceType = DatasourceTypes.valueOf(type);
+        switch (datasourceType) {
+            case mysql:
+                return MessageFormat.format("SELECT count(*) FROM {0}", table);
+            case sqlServer:
+                return MessageFormat.format("SELECT count(*) FROM {0}", table);
+            default:
+                return MessageFormat.format("SELECT count(*) FROM {0}", table);
+        }
+    }
+
     public String createQuerySQL(String type, String table, String[] fields) {
         DatasourceTypes datasourceType = DatasourceTypes.valueOf(type);
         switch (datasourceType) {

frontend/src/lang/zh.js

@@ -791,7 +791,11 @@ export default {
     type: '类型',
     create_by: '创建者',
     create_time: '创建时间',
-    preview_100_data: '预览前100行数据'
+    preview_100_data: '预览前100行数据',
+    preview_show: '显示',
+    preview_item: '条数据',
+    preview_total: '共',
+    pls_input_less_9: '请输入9位以内的正整数'
   },
   datasource: {
     datasource: '数据源',

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

@@ -164,7 +164,7 @@ export default {
       // console.log(s_table)
       let s = ''
       for (const i in this.table_header_class) {
-        s += i + ':' + this.table_header_class[i] + ';'
+        s += (i === 'fontSize' ? 'font-size' : i) + ':' + this.table_header_class[i] + ';'
       }
       s_table.setAttribute('style', s)
     },
@@ -176,12 +176,14 @@ export default {
       }
     },
     summaryMethod({ columns, data }) {
+      const that = this
       const means = [] // 合计
       columns.forEach((column, columnIndex) => {
         if (columnIndex === 0) {
           means.push('合计')
         } else {
-          const values = data.map(item => Number((item[column.property] + '').trim() === '' ? 'a' : item[column.property]))
+          if (columnIndex >= that.chart.data.fields.length - that.chart.data.series.length) {
+            const values = data.map(item => Number(item[column.property]))
             // 合计
             if (!values.every(value => isNaN(value))) {
               means[columnIndex] = values.reduce((prev, curr) => {
@@ -196,6 +198,9 @@ export default {
             } else {
               means[columnIndex] = ''
             }
+          } else {
+            means[columnIndex] = ''
+          }
         }
       })
       // 返回一个二维数组的表尾合计(不要平均值，就不要在数组中添加)

frontend/src/views/dataset/common/DatasetTableData.vue

@@ -58,7 +58,7 @@ export default {
       this.resetData()
       if (this.table.id) {
         this.table.row = 10
-        post('/dataset/table/getPreviewData', this.table).then(response => {
+        post('/dataset/table/getPreviewData/1/10', this.table).then(response => {
           this.fields = response.data.fields
           this.data = response.data.data
           const datas = this.data

frontend/src/views/dataset/data/TabDataPreview.vue

@@ -34,6 +34,32 @@
         </template>
       </ux-table-column>
     </ux-grid>
+    <el-row style="margin-top: 4px;">
+      <span class="table-count">
+        <span v-if="page.total <= currentPage.show">
+          {{ $t('dataset.preview_total') }}
+          <span class="span-number">{{ page.total }}</span>
+          {{ $t('dataset.preview_item') }}
+        </span>
+        <span v-if="page.total > currentPage.show">
+          {{ $t('dataset.preview_show') }}
+          <span class="span-number">{{ currentPage.show }}</span>
+          {{ $t('dataset.preview_item') }}
+          ，{{ $t('dataset.preview_total') }}
+          <span class="span-number">{{ page.total }}</span>
+          {{ $t('dataset.preview_item') }}
+        </span>
+      </span>
+      <el-pagination
+        :current-page="currentPage.page"
+        :page-sizes="[100]"
+        :page-size="currentPage.pageSize"
+        :pager-count="5"
+        layout="sizes, prev, pager, next"
+        :total="currentPage.show"
+        @current-change="pageChange"
+      />
+    </el-row>
   </el-col>
 </template>
 
@@ -56,11 +82,20 @@ export default {
     form: {
       type: Object,
       required: true
+    },
+    page: {
+      type: Object,
+      required: false
     }
   },
   data() {
     return {
-      height: 500
+      height: 500,
+      currentPage: {
+        page: 1,
+        pageSize: 100,
+        show: parseInt(this.form.row)
+      }
     }
   },
   computed: {
@@ -69,28 +104,68 @@ export default {
     data() {
       const datas = this.data
       this.$refs.plxTable.reloadData(datas)
-    }
     },
-  mounted() {
-    window.onresize = () => {
-      return (() => {
-        this.height = window.innerHeight / 2
-      })()
+    page() {
+      if (this.page.total < parseInt(this.form.row)) {
+        this.currentPage.show = this.page.total
+      } else {
+        this.currentPage.show = parseInt(this.form.row)
+      }
     }
-    this.height = window.innerHeight / 2
   },
-  activated() {
+  mounted() {
+    this.init()
   },
   methods: {
+    init() {
+      this.calHeight()
+    },
+    calHeight() {
+      const that = this
+      setTimeout(function() {
+        const currentHeight = document.documentElement.clientHeight
+        that.height = currentHeight - 56 - 30 - 26 - 25 - 55 - 38 - 28 - 10
+      }, 10)
+    },
     reSearch() {
-      this.$emit('reSearch', this.form)
+      if (this.form.row.length > 8 || isNaN(Number(this.form.row)) || String(this.form.row).includes('.')) {
+        this.$message({
+          message: this.$t('dataset.pls_input_less_9'),
+          type: 'error',
+          showClose: true
+        })
+        return
+      }
+      this.currentPage.show = parseInt(this.form.row)
+      this.currentPage.page = 1
+      this.$emit('reSearch', { form: this.form, page: this.currentPage })
+    },
+    pageChange(val) {
+      this.currentPage.page = val
+      // console.log(this.currentPage)
+      this.$emit('reSearch', { form: this.form, page: this.currentPage })
     }
   }
 }
 </script>
 
 <style scoped>
-.row-style>>>.el-form-item__label{
+  .row-style>>>.el-form-item__label{
     font-size: 12px;
-}
+  }
+  .row-style>>>.el-form-item--mini.el-form-item{
+    margin-bottom: 10px;
+  }
+  .el-pagination{
+    float: right;
+  }
+  span{
+    font-size: 14px;
+  }
+  .span-number{
+    color: #f18126;
+  }
+  .table-count{
+    color: #606266;
+  }
 </style>

frontend/src/views/dataset/data/UpdateInfo.vue

@@ -464,9 +464,11 @@ export default {
       })
     },
     handleSizeChange(val) {
+      this.page.pageSize = val
       this.listTaskLog()
     },
     handleCurrentChange(val) {
+      this.page.currentPage = val
       this.listTaskLog()
     },
     resetTaskForm() {

frontend/src/views/dataset/data/ViewTable.vue

 <template>
-  <el-col>
-    <el-row>
+  <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
     <el-row style="height: 26px;">
-        <span v-show="false">{{ tableId }}</span>
       <el-popover
         placement="right-start"
         width="400"
@@ -31,7 +29,7 @@
 
     <el-tabs v-model="tabActive">
       <el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
-          <tab-data-preview :table="table" :fields="fields" :data="data" :form="tableViewRowForm" @reSearch="reSearch" />
+        <tab-data-preview :table="table" :fields="fields" :data="data" :page="page" :form="tableViewRowForm" @reSearch="reSearch" />
       </el-tab-pane>
       <el-tab-pane :label="$t('dataset.join_view')" name="joinView">
         关联视图 TODO
@@ -83,11 +81,10 @@
     <!--      <chart-edit/>-->
     <!--    </el-dialog>-->
   </el-row>
-  </el-col>
 </template>
 
 <script>
-import { getTable, getPreviewData, fieldList, batchEdit } from '@/api/dataset/dataset'
+import { getTable, post, fieldList, batchEdit } from '@/api/dataset/dataset'
 import TabDataPreview from './TabDataPreview'
 import UpdateInfo from './UpdateInfo'
 import DatasetChartDetail from '../common/DatasetChartDetail'
@@ -95,6 +92,12 @@ import DatasetChartDetail from '../common/DatasetChartDetail'
 export default {
   name: 'ViewTable',
   components: { DatasetChartDetail, UpdateInfo, TabDataPreview },
+  props: {
+    param: {
+      type: String,
+      required: true
+    }
+  },
   data() {
     return {
       createViewDialog: false,
@@ -104,6 +107,11 @@ export default {
       },
       fields: [],
       data: [],
+      page: {
+        page: 1,
+        pageSize: 100,
+        show: 1000
+      },
       tabActive: 'dataPreview',
       tableFields: [],
       tableViewRowForm: {
@@ -112,15 +120,19 @@ export default {
       tabStatus: false
     }
   },
-  computed: {
-    tableId() {
-      this.initTable(this.$store.state.dataset.table)
-      return this.$store.state.dataset.table
+  // computed: {
+  //   tableId() {
+  //     this.initTable(this.$store.state.dataset.table)
+  //     return this.$store.state.dataset.table
+  //   }
+  // },
+  watch: {
+    'param': function() {
+      this.initTable(this.param)
     }
   },
-  watch: {},
   mounted() {
-    this.initTable(this.$store.state.dataset.table)
+    this.initTable(this.param)
   },
   methods: {
     initTable(id) {
@@ -132,17 +144,18 @@ export default {
         this.data = []
         getTable(id).then(response => {
           this.table = response.data
-          this.initPreviewData()
+          this.initPreviewData(this.page)
         })
       }
     },
 
-    initPreviewData() {
+    initPreviewData(page) {
       if (this.table.id) {
         this.table.row = this.tableViewRowForm.row
-        getPreviewData(this.table).then(response => {
+        post('/dataset/table/getPreviewData/' + page.page + '/' + page.pageSize, this.table).then(response => {
           this.fields = response.data.fields
           this.data = response.data.data
+          this.page = response.data.page
         })
       }
     },
@@ -182,8 +195,8 @@ export default {
     },
 
     reSearch(val) {
-      this.tableViewRowForm = val
-      this.initPreviewData()
+      this.tableViewRowForm = val.form
+      this.initPreviewData(val.page)
     },
 
     showTab() {

frontend/src/views/dataset/group/Group.vue

@@ -523,10 +523,6 @@ export default {
 
     back() {
       this.sceneMode = false
-      //   const route = this.$store.state.permission.currentRoutes
-      //   console.log(route)
-      // this.$router.push('/dataset/index')
-      this.$store.dispatch('dataset/setSceneData', null)
       this.$emit('switchComponent', { name: '' })
     },
 
@@ -559,16 +555,7 @@ export default {
     },
 
     sceneClick(data, node) {
-      // console.log(data);
-      this.$store.dispatch('dataset/setTable', null)
-      this.$store.dispatch('dataset/setTable', data.id)
-      // this.$router.push({
-      //   name: 'table',
-      //   params: {
-      //     table: data
-      //   }
-      // })
-      this.$emit('switchComponent', { name: 'ViewTable' })
+      this.$emit('switchComponent', { name: 'ViewTable', param: data.id })
     },
 
     refresh() {