forked from github/dataease
Merge pull request #787 from dataease/pr@dev@feat_chart_table_info
feat(视图): 增加明细表
This commit is contained in:
XiaJunjie2020
GitHub
commit
fbb8ee658b
@ -18,7 +18,7 @@
|
||||
</div>
|
||||
<chart-component v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
|
||||
<!-- <chart-component :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />-->
|
||||
<table-normal v-if="httpRequest.status &&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :chart="chart" class="table-class" />
|
||||
<table-normal v-if="httpRequest.status &&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :show-summary="chart.type === 'table-normal'" :chart="chart" class="table-class" />
|
||||
<label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :ref="element.propValue.id" :chart="chart" class="table-class" />
|
||||
<div style="position: absolute;left: 20px;bottom:14px;">
|
||||
<drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
|
||||
|
||||
@ -860,7 +860,9 @@ export default {
|
||||
drag_block_value_axis_main: 'Main Axis Value',
|
||||
drag_block_value_axis_ext: 'Ext Axis Value',
|
||||
yAxis_main: 'Main Vertical Axis',
|
||||
yAxis_ext: 'Ext Vertical Axis'
|
||||
yAxis_ext: 'Ext Vertical Axis',
|
||||
total: 'Total',
|
||||
items: 'Items'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
|
||||
|
||||
@ -859,7 +859,9 @@ export default {
|
||||
drag_block_value_axis_main: '主軸值',
|
||||
drag_block_value_axis_ext: '副軸值',
|
||||
yAxis_main: '主縱軸',
|
||||
yAxis_ext: '副縱軸'
|
||||
yAxis_ext: '副縱軸',
|
||||
total: '共',
|
||||
items: '條數據'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多個sheet頁面，默認抽取第一個',
|
||||
|
||||
@ -859,7 +859,9 @@ export default {
|
||||
drag_block_value_axis_main: '主轴值',
|
||||
drag_block_value_axis_ext: '副轴值',
|
||||
yAxis_main: '主纵轴',
|
||||
yAxis_ext: '副纵轴'
|
||||
yAxis_ext: '副纵轴',
|
||||
total: '共',
|
||||
items: '条数据'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
|
||||
|
||||
@ -1,44 +1,55 @@
|
||||
<template>
|
||||
<div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
|
||||
<p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
|
||||
<ux-grid
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
style="width: 100%;"
|
||||
:height="height"
|
||||
:checkbox-config="{highlight: true}"
|
||||
:width-resize="true"
|
||||
:header-row-style="table_header_class"
|
||||
:row-style="getRowStyle"
|
||||
class="table-class"
|
||||
:class="chart.id"
|
||||
:show-summary="showSummary"
|
||||
:summary-method="summaryMethod"
|
||||
>
|
||||
<ux-table-column
|
||||
v-for="field in fields"
|
||||
:key="Math.random()"
|
||||
:field="field.dataeaseName"
|
||||
:resizable="true"
|
||||
sortable
|
||||
:title="field.name"
|
||||
<el-row style="height: 100%;">
|
||||
<p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
|
||||
<ux-grid
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
style="width: 100%;"
|
||||
:height="height"
|
||||
:checkbox-config="{highlight: true}"
|
||||
:width-resize="true"
|
||||
:header-row-style="table_header_class"
|
||||
:row-style="getRowStyle"
|
||||
class="table-class"
|
||||
:class="chart.id"
|
||||
:show-summary="showSummary"
|
||||
:summary-method="summaryMethod"
|
||||
>
|
||||
<!-- <template slot="header">-->
|
||||
<!-- <span>{{ field.name }}</span>-->
|
||||
<!-- </template>-->
|
||||
</ux-table-column>
|
||||
</ux-grid>
|
||||
<ux-table-column
|
||||
v-for="field in fields"
|
||||
:key="Math.random()"
|
||||
:field="field.dataeaseName"
|
||||
:resizable="true"
|
||||
sortable
|
||||
:title="field.name"
|
||||
>
|
||||
<!-- <template slot="header">-->
|
||||
<!-- <span>{{ field.name }}</span>-->
|
||||
<!-- </template>-->
|
||||
</ux-table-column>
|
||||
</ux-grid>
|
||||
|
||||
<!-- <el-pagination-->
|
||||
<!-- v-show="chart.type === 'table-info'"-->
|
||||
<!-- :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 v-show="chart.type === 'table-info'" class="table-page">
|
||||
<span class="total-style">
|
||||
{{ $t('chart.total') }}
|
||||
<span>{{ chart.data.tableRow.length }}</span>
|
||||
{{ $t('chart.items') }}
|
||||
</span>
|
||||
<el-pagination
|
||||
small
|
||||
:current-page="currentPage.page"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
:page-size="currentPage.pageSize"
|
||||
:pager-count="5"
|
||||
layout="sizes, prev, pager, next"
|
||||
:total="currentPage.show"
|
||||
class="page-style"
|
||||
@current-change="pageClick"
|
||||
@size-change="pageChange"
|
||||
/>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -102,12 +113,12 @@ export default {
|
||||
height: '36px'
|
||||
},
|
||||
title_show: true,
|
||||
borderRadius: '0px'
|
||||
// currentPage: {
|
||||
// page: 1,
|
||||
// pageSize: 10,
|
||||
// show: 0
|
||||
// }
|
||||
borderRadius: '0px',
|
||||
currentPage: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
show: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -153,13 +164,17 @@ export default {
|
||||
if (this.chart.data) {
|
||||
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
|
||||
datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
|
||||
// if (this.chart.data.page) {
|
||||
// this.currentPage = JSON.parse(JSON.stringify(this.chart.data.page))
|
||||
// }
|
||||
if (this.chart.type === 'table-info') {
|
||||
// 计算分页
|
||||
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)
|
||||
}
|
||||
} else {
|
||||
this.fields = []
|
||||
datas = []
|
||||
// this.resetPage()
|
||||
this.resetPage()
|
||||
}
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
this.$nextTick(() => {
|
||||
@ -172,11 +187,19 @@ export default {
|
||||
calcHeightRightNow() {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.tableContainer) {
|
||||
let pageHeight = 0
|
||||
if (this.chart.type === 'table-info') {
|
||||
pageHeight = 36
|
||||
}
|
||||
const currentHeight = this.$refs.tableContainer.offsetHeight
|
||||
const tableMaxHeight = currentHeight - this.$refs.title.offsetHeight - 16
|
||||
const tableMaxHeight = currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight
|
||||
let tableHeight
|
||||
if (this.chart.data) {
|
||||
tableHeight = (this.chart.data.tableRow.length + 2) * 36
|
||||
if (this.chart.type === 'table-info') {
|
||||
tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight
|
||||
} else {
|
||||
tableHeight = (this.chart.data.tableRow.length + 2) * 36 - pageHeight
|
||||
}
|
||||
} else {
|
||||
tableHeight = 0
|
||||
}
|
||||
@ -301,17 +324,23 @@ export default {
|
||||
this.height = 100
|
||||
},
|
||||
|
||||
pageChange() {
|
||||
pageChange(val) {
|
||||
this.currentPage.pageSize = val
|
||||
this.init()
|
||||
},
|
||||
|
||||
pageClick(val) {
|
||||
this.currentPage.page = val
|
||||
this.init()
|
||||
},
|
||||
|
||||
resetPage() {
|
||||
this.currentPage = {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
show: 0
|
||||
}
|
||||
}
|
||||
|
||||
// resetPage() {
|
||||
// this.currentPage = {
|
||||
// page: 1,
|
||||
// pageSize: 10,
|
||||
// show: 0
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -324,4 +353,25 @@ export default {
|
||||
max-height: none!important;
|
||||
line-height: normal!important;
|
||||
}
|
||||
.table-page{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-style{
|
||||
margin-right: auto;
|
||||
}
|
||||
.total-style{
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.page-style >>> .el-input__inner{
|
||||
height: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
@add="moveToQuota"
|
||||
>
|
||||
<transition-group>
|
||||
<span v-for="item in quotaData" :key="item.id" class="item-quota" :title="item.name">
|
||||
<span v-for="item in quotaData" v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))" :key="item.id" class="item-quota" :title="item.name">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user