github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 12:03:05 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
junjun 2022-04-20 13:53:43 +08:00
parent 8d1f4f686e
commit e2764fb936
5 changed files with 50 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/views/chart/chart/chart.js
View File

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

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

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

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

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

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

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

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

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