center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
junjie 2021-04-28 17:30:18 +08:00
parent 082844537d
commit 794e4651b0
10 changed files with 279 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
View File

@ -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")

17
backend/src/main/java/io/dataease/dto/dataset/DataSetPreviewPage.java Normal file
View File

@ -0,0 +1,17 @@
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;
}

40
backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
View File

@ -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) {

6
frontend/src/lang/zh.js
View File

@ -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: '数据源',

31
frontend/src/views/chart/components/table/TableNormal.vue
View File

@ -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,23 +176,28 @@ 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 (!values.every(value => isNaN(value))) {
means[columnIndex] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
means[columnIndex] = (means[columnIndex] + '').includes('.') ? means[columnIndex].toFixed(2) : means[columnIndex]
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) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
means[columnIndex] = (means[columnIndex] + '').includes('.') ? means[columnIndex].toFixed(2) : means[columnIndex]
} else {
means[columnIndex] = ''
}
} else {
means[columnIndex] = ''
}

2
frontend/src/views/dataset/common/DatasetTableData.vue
View File

@ -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

101
frontend/src/views/dataset/data/TabDataPreview.vue
View File

@ -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)
},
page() {
if (this.page.total < parseInt(this.form.row)) {
this.currentPage.show = this.page.total
} else {
this.currentPage.show = parseInt(this.form.row)
}
}
},
mounted() {
window.onresize = () => {
return (() => {
this.height = window.innerHeight / 2
})()
}
this.height = window.innerHeight / 2
},
activated() {
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{
font-size: 12px;
}
.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>

2
frontend/src/views/dataset/data/UpdateInfo.vue
View File

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

203
frontend/src/views/dataset/data/ViewTable.vue
View File

@ -1,93 +1,90 @@
<template>
<el-col>
<el-row>
<el-row style="height: 26px;">
<span v-show="false">{{ tableId }}</span>
<el-popover
placement="right-start"
width="400"
trigger="click"
@show="showTab"
@hide="hideTab"
>
<dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
<span slot="reference" style="line-height: 26px;cursor: pointer;">
{{ table.name }}
</span>
</el-popover>
<el-row style="float: right">
<el-button v-if="table.type ==='sql'" size="mini" @click="editSql">
{{ $t('dataset.edit_sql') }}
</el-button>
<el-button size="mini" @click="edit">
{{ $t('dataset.edit') }}
</el-button>
<!-- <el-button size="mini" type="primary" @click="createChart">-->
<!-- {{$t('dataset.create_view')}}-->
<!-- </el-button>-->
</el-row>
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
<el-row style="height: 26px;">
<el-popover
placement="right-start"
width="400"
trigger="click"
@show="showTab"
@hide="hideTab"
>
<dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
<span slot="reference" style="line-height: 26px;cursor: pointer;">
{{ table.name }}
</span>
</el-popover>
<el-row style="float: right">
<el-button v-if="table.type ==='sql'" size="mini" @click="editSql">
{{ $t('dataset.edit_sql') }}
</el-button>
<el-button size="mini" @click="edit">
{{ $t('dataset.edit') }}
</el-button>
<!-- <el-button size="mini" type="primary" @click="createChart">-->
<!-- {{$t('dataset.create_view')}}-->
<!-- </el-button>-->
</el-row>
<el-divider />
<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" />
</el-tab-pane>
<el-tab-pane :label="$t('dataset.join_view')" name="joinView">
关联视图 TODO
</el-tab-pane>
<el-tab-pane v-if="table.mode === 1 && (table.type === 'db' || table.type === 'sql')" :label="$t('dataset.update_info')" name="updateInfo">
<update-info :table="table" />
</el-tab-pane>
</el-tabs>
<el-dialog :title="table.name" :visible.sync="editField" :fullscreen="true" :show-close="false" class="dialog-css">
<el-table :data="tableFields" size="mini" max-height="600px">
<el-table-column property="type" :label="$t('dataset.field_type')" width="100">
<template slot-scope="scope">
<span v-if="scope.row.deType === 0">
<svg-icon v-if="scope.row.deType === 0" icon-class="field_text" class="field-icon-text" />
{{ $t('dataset.text') }}
</span>
<span v-if="scope.row.deType === 1">
<svg-icon v-if="scope.row.deType === 1" icon-class="field_time" class="field-icon-time" />
{{ $t('dataset.time') }}
</span>
<span v-if="scope.row.deType === 2 || scope.row.deType === 3">
<svg-icon v-if="scope.row.deType === 2 || scope.row.deType === 3" icon-class="field_value" class="field-icon-value" />
{{ $t('dataset.value') }}
</span>
</template>
</el-table-column>
<el-table-column property="name" :label="$t('dataset.field_name')" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.name" size="mini" />
</template>
</el-table-column>
<el-table-column property="originName" :label="$t('dataset.field_origin_name')" width="180" />
<el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" />
</template>
</el-table-column>
<!--下面这一列占位-->
<el-table-column property="" />
</el-table>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveEdit">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
<!-- <el-dialog title="view" :visible.sync="createViewDialog" :fullscreen="true">-->
<!-- <chart-edit/>-->
<!-- </el-dialog>-->
</el-row>
</el-col>
<el-divider />
<el-tabs v-model="tabActive">
<el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
<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
</el-tab-pane>
<el-tab-pane v-if="table.mode === 1 && (table.type === 'db' || table.type === 'sql')" :label="$t('dataset.update_info')" name="updateInfo">
<update-info :table="table" />
</el-tab-pane>
</el-tabs>
<el-dialog :title="table.name" :visible.sync="editField" :fullscreen="true" :show-close="false" class="dialog-css">
<el-table :data="tableFields" size="mini" max-height="600px">
<el-table-column property="type" :label="$t('dataset.field_type')" width="100">
<template slot-scope="scope">
<span v-if="scope.row.deType === 0">
<svg-icon v-if="scope.row.deType === 0" icon-class="field_text" class="field-icon-text" />
{{ $t('dataset.text') }}
</span>
<span v-if="scope.row.deType === 1">
<svg-icon v-if="scope.row.deType === 1" icon-class="field_time" class="field-icon-time" />
{{ $t('dataset.time') }}
</span>
<span v-if="scope.row.deType === 2 || scope.row.deType === 3">
<svg-icon v-if="scope.row.deType === 2 || scope.row.deType === 3" icon-class="field_value" class="field-icon-value" />
{{ $t('dataset.value') }}
</span>
</template>
</el-table-column>
<el-table-column property="name" :label="$t('dataset.field_name')" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.name" size="mini" />
</template>
</el-table-column>
<el-table-column property="originName" :label="$t('dataset.field_origin_name')" width="180" />
<el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" />
</template>
</el-table-column>
<!--下面这一列占位-->
<el-table-column property="" />
</el-table>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveEdit">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
<!-- <el-dialog title="view" :visible.sync="createViewDialog" :fullscreen="true">-->
<!-- <chart-edit/>-->
<!-- </el-dialog>-->
</el-row>
</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() {

15
frontend/src/views/dataset/group/Group.vue
View File

@ -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() {