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

feat(视图): 支持表格分页

Browse Source
This commit is contained in:
junjun 2022-11-09 16:02:11 +08:00
parent 0057ff13dd
commit b41a52080f
8 changed files with 124 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/src/main/java/io/dataease/dto/chart/ChartViewDTO.java
View File

@ -44,4 +44,5 @@ public class ChartViewDTO extends ChartViewWithBLOBs {
private long totalPage;
private long totalItems;
private int datasetMode;
}

5
backend/src/main/java/io/dataease/provider/query/ck/CKQueryProvider.java
View File

@ -396,10 +396,11 @@ public class CKQueryProvider extends QueryProvider {
@Override
public String getSQLWithPage(boolean isTable, String table, List<ChartViewFieldDTO> xAxis, List<ChartFieldCustomFilterDTO> fieldCustomFilter, List<DataSetRowPermissionsTreeDTO> rowPermissionsTree, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds, ChartViewWithBLOBs view, PageInfo pageInfo) {
String limit = ((pageInfo.getGoPage() != null && pageInfo.getPageSize() != null) ? " LIMIT " + (pageInfo.getGoPage() - 1) * pageInfo.getPageSize() + "," + pageInfo.getPageSize() : "");
if (isTable) {
return originalTableInfo(table, xAxis, fieldCustomFilter, rowPermissionsTree, extFilterRequestList, ds, view) + " LIMIT " + (pageInfo.getGoPage() - 1) * pageInfo.getPageSize() + "," + pageInfo.getPageSize();
return originalTableInfo(table, xAxis, fieldCustomFilter, rowPermissionsTree, extFilterRequestList, ds, view) + limit;
} else {
return originalTableInfo("(" + sqlFix(table) + ")", xAxis, fieldCustomFilter, rowPermissionsTree, extFilterRequestList, ds, view) + " LIMIT " + (pageInfo.getGoPage() - 1) * pageInfo.getPageSize() + "," + pageInfo.getPageSize();
return originalTableInfo("(" + sqlFix(table) + ")", xAxis, fieldCustomFilter, rowPermissionsTree, extFilterRequestList, ds, view) + limit;
}
}

9
backend/src/main/java/io/dataease/provider/query/mysql/MysqlQueryProvider.java
View File

@ -379,10 +379,11 @@ public class MysqlQueryProvider extends QueryProvider {
@Override
public String getSQLWithPage(boolean isTable, String table, List<ChartViewFieldDTO> xAxis, List<ChartFieldCustomFilterDTO> fieldCustomFilter, List<DataSetRowPermissionsTreeDTO> rowPermissionsTree, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds, ChartViewWithBLOBs view, PageInfo pageInfo) {
if(isTable){
return originalTableInfo(table, xAxis, fieldCustomFilter, rowPermissionsTree, extFilterRequestList, ds, view) + " LIMIT " + (pageInfo.getGoPage() - 1) * pageInfo.getPageSize() + "," + pageInfo.getPageSize();
}else {
return originalTableInfo("(" + sqlFix(table) + ")", xAxis, fieldCustomFilter, rowPermissionsTree, extFilterRequestList, ds, view) + " LIMIT " + (pageInfo.getGoPage() - 1) * pageInfo.getPageSize() + "," + pageInfo.getPageSize();
String limit = ((pageInfo.getGoPage() != null && pageInfo.getPageSize() != null) ? " LIMIT " + (pageInfo.getGoPage() - 1) * pageInfo.getPageSize() + "," + pageInfo.getPageSize() : "");
if (isTable) {
return originalTableInfo(table, xAxis, fieldCustomFilter, rowPermissionsTree, extFilterRequestList, ds, view) + limit;
} else {
return originalTableInfo("(" + sqlFix(table) + ")", xAxis, fieldCustomFilter, rowPermissionsTree, extFilterRequestList, ds, view) + limit;
}
}

27
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -298,6 +298,10 @@ public class ChartViewService {
public ChartViewDTO getData(String id, ChartExtRequest request) throws Exception {
try {
ChartViewDTO view = this.getOne(id, request.getQueryFrom());
DatasetTable datasetTable = dataSetTableService.get(view.getTableId());
if (ObjectUtils.isNotEmpty(datasetTable)) {
view.setDatasetMode(datasetTable.getMode());
}
// 如果是从仪表板获取视图数据，则仪表板的查询模式，查询结果的数量，覆盖视图对应的属性
if (CommonConstants.VIEW_RESULT_MODE.CUSTOM.equals(request.getResultMode())) {
view.setResultMode(request.getResultMode());
@ -570,7 +574,6 @@ public class ChartViewService {
});
}
List<ChartViewFieldDTO> xAxisBase = gson.fromJson(view.getXAxis(), tokenType);
List<ChartViewFieldDTO> xAxis = gson.fromJson(view.getXAxis(), tokenType);
List<ChartViewFieldDTO> xAxisExt = gson.fromJson(view.getXAxisExt(), tokenType);
@ -621,6 +624,22 @@ public class ChartViewService {
return emptyChartViewDTO(view);
}
// 直连明细表分页
Map<String, Object> mapAttr = gson.fromJson(view.getCustomAttr(), Map.class);
Map<String, Object> mapSize = (Map<String, Object>) mapAttr.get("size");
if (StringUtils.equalsIgnoreCase(view.getType(), "table-info") && table.getMode() == 0 && StringUtils.equalsIgnoreCase((String) mapSize.get("tablePageMode"), "page")) {
if (chartExtRequest.getGoPage() == null) {
chartExtRequest.setGoPage(1L);
}
if (chartExtRequest.getPageSize() == null) {
String pageSize = (String) mapSize.get("tablePageSize");
chartExtRequest.setPageSize(Long.parseLong(pageSize));
}
} else {
chartExtRequest.setGoPage(null);
chartExtRequest.setPageSize(null);
}
switch (view.getType()) {
case "label":
xAxis = xAxis.stream().filter(item -> StringUtils.isNotEmpty(item.getChartId()) || (!desensitizationList.contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());
@ -863,8 +882,8 @@ public class ChartViewService {
long totalItems = 0l;
String totalPageSql = null;
PageInfo pageInfo = new PageInfo();
pageInfo.setGoPage(chartExtRequest.getGoPage() != null ? chartExtRequest.getGoPage() : 1);
pageInfo.setPageSize(chartExtRequest.getPageSize() != null ? chartExtRequest.getPageSize() : 20);
pageInfo.setGoPage(chartExtRequest.getGoPage());
pageInfo.setPageSize(chartExtRequest.getPageSize());
//如果不是插件视图 走原生逻辑
if (table.getMode() == 0) {// 直连
@ -940,7 +959,7 @@ public class ChartViewService {
querySql = qp.getSQLAsTmp(sql, xAxis, yAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, view);
}
}
if (StringUtils.isNotEmpty(totalPageSql)) {
if (StringUtils.isNotEmpty(totalPageSql) && StringUtils.equalsIgnoreCase((String) mapSize.get("tablePageMode"), "page")) {
datasourceRequest.setQuery(totalPageSql);
totalItems = Long.valueOf(datasourceProvider.getData(datasourceRequest).get(0)[0]);
totalPage = totalItems / pageInfo.getPageSize() + totalItems % pageInfo.getPageSize() > 0 ? 1 : 0;

39
frontend/src/components/canvas/customComponent/UserView.vue
View File

@ -89,6 +89,7 @@
:search-count="searchCount"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
@onPageChange="pageClick"
/>
<table-normal
v-else-if="tableShowFlag"
@ -96,6 +97,7 @@
:show-summary="chart.type === 'table-normal'"
:chart="chart"
class="table-class"
@onPageChange="pageClick"
/>
<label-normal
v-else-if="labelShowFlag"
@ -331,7 +333,13 @@ export default {
sourceCustomStyleStr: null,
// obj
sourceCustomStyle: null,
scale: 1
scale: 1,
currentPage: {
page: 1,
pageSize: 20,
show: 0
},
view: {}
}
},
@ -628,6 +636,10 @@ export default {
param.viewId && param.viewId === this.element.propValue.viewId && this.addViewTrackFilter(param)
},
viewInCache(param) {
this.view = param.view
if (this.view.customAttr) {
this.currentPage.pageSize = parseInt(JSON.parse(this.view.customAttr).size.tablePageSize)
}
param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
},
clearPanelLinkage(param) {
@ -687,6 +699,14 @@ export default {
// method = viewInfo
requestInfo.proxy = { userId: this.panelInfo.proxy }
}
// table-info明细表增加分页
if (this.view.customAttr) {
const attrSize = JSON.parse(this.view.customAttr).size
if (this.chart.type === 'table-info' && this.view.datasetMode === 0 && (!attrSize.tablePageMode || attrSize.tablePageMode === 'page')) {
requestInfo.goPage = this.currentPage.page
requestInfo.pageSize = this.currentPage.pageSize
}
}
method(id, this.panelInfo.id, requestInfo).then(response => {
// 将视图传入echart组件
if (response.success) {
@ -1132,11 +1152,20 @@ export default {
getDataOnly(sourceResponseData, dataBroadcast) {
if (this.isEdit) {
if ((this.filter.filter && this.filter.filter.length) || (this.filter.linkageFilters && this.filter.linkageFilters.length)) {
viewData(this.chart.id, this.panelInfo.id, {
const requestInfo = {
filter: [],
drill: [],
queryFrom: 'panel'
}).then(response => {
}
// table-info明细表增加分页
if (this.view.customAttr) {
const attrSize = JSON.parse(this.view.customAttr).size
if (this.chart.type === 'table-info' && this.view.datasetMode === 0 && (!attrSize.tablePageMode || attrSize.tablePageMode === 'page')) {
requestInfo.goPage = this.currentPage.page
requestInfo.pageSize = this.currentPage.pageSize
}
}
viewData(this.chart.id, this.panelInfo.id, requestInfo).then(response => {
this.componentViewsData[this.chart.id] = response.data
if (dataBroadcast) {
bus.$emit('prop-change-data')
@ -1149,6 +1178,10 @@ export default {
}
}
}
},
pageClick(page) {
this.currentPage = page
this.getData(this.element.propValue.viewId, false)
}
}
}

39
frontend/src/views/chart/components/ChartComponentS2.vue
View File

@ -59,7 +59,7 @@
>
<span class="total-style">
{{ $t('chart.total') }}
<span>{{ (chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0 }}</span>
<span>{{ chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0) }}</span>
{{ $t('chart.items') }}
</span>
<el-pagination
@ -211,13 +211,20 @@ export default {
const attr = JSON.parse(this.chart.customAttr)
this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
data = JSON.parse(JSON.stringify(this.chart.data.tableRow))
if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && data.length > this.currentPage.pageSize) {
// 计算分页
this.currentPage.show = data.length
const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
const pageEnd = pageStart + this.currentPage.pageSize
data = data.slice(pageStart, pageEnd)
this.showPage = true
if (this.chart.datasetMode === 0) {
if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && this.chart.totalItems > this.currentPage.pageSize) {
this.currentPage.show = this.chart.totalItems
this.showPage = true
}
} else {
if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && data.length > this.currentPage.pageSize) {
// 计算分页
this.currentPage.show = data.length
const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
const pageEnd = pageStart + this.currentPage.pageSize
data = data.slice(pageStart, pageEnd)
this.showPage = true
}
}
} else {
this.fields = []
@ -425,14 +432,22 @@ export default {
},
pageChange(val) {
this.currentPage.pageSize = val
this.initData()
this.drawView()
if (this.chart.datasetMode === 0) {
this.$emit('onPageChange', this.currentPage)
} else {
this.initData()
this.drawView()
}
},
pageClick(val) {
this.currentPage.page = val
this.initData()
this.drawView()
if (this.chart.datasetMode === 0) {
this.$emit('onPageChange', this.currentPage)
} else {
this.initData()
this.drawView()
}
},
resetPage() {

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

@ -46,7 +46,7 @@
>
<span class="total-style">
{{ $t('chart.total') }}
<span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
<span>{{ chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0) }}</span>
{{ $t('chart.items') }}
</span>
<el-pagination
@ -156,7 +156,6 @@ export default {
},
watch: {
chart: function() {
this.resetPage()
this.init()
}
},
@ -205,13 +204,20 @@ export default {
}
data = JSON.parse(JSON.stringify(this.chart.data.tableRow))
if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && data.length > this.currentPage.pageSize) {
// 计算分页
this.currentPage.show = data.length
const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
const pageEnd = pageStart + this.currentPage.pageSize
data = data.slice(pageStart, pageEnd)
this.showPage = true
if (this.chart.datasetMode === 0) {
if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && this.chart.totalItems > this.currentPage.pageSize) {
this.currentPage.show = this.chart.totalItems
this.showPage = true
}
} else {
if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && data.length > this.currentPage.pageSize) {
// 计算分页
this.currentPage.show = data.length
const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
const pageEnd = pageStart + this.currentPage.pageSize
data = data.slice(pageStart, pageEnd)
this.showPage = true
}
}
} else {
this.fields = []
@ -403,12 +409,20 @@ export default {
pageChange(val) {
this.currentPage.pageSize = val
this.init()
if (this.chart.datasetMode === 0) {
this.$emit('onPageChange', this.currentPage)
} else {
this.init()
}
},
pageClick(val) {
this.currentPage.page = val
this.init()
if (this.chart.datasetMode === 0) {
this.$emit('onPageChange', this.currentPage)
} else {
this.init()
}
},
resetPage() {

5
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -2213,7 +2213,10 @@ export default {
if (!view) return
viewEditSave(this.panelInfo.id, view).then(() => {
// this.getData(this.param.id)
bus.$emit('view-in-cache', { type: 'propChange', viewId: this.param.id })
bus.$emit('view-in-cache', { type: 'propChange',
viewId: this.param.id,
view: view
})
})
},
calcStyle(modifyName) {