Merge pull request #4731 from dataease/pr@dev@feat_table

feat(视图): echarts表格支持设置边框颜色、自动换行
This commit is contained in:
Junjun 2023-03-09 12:47:16 +08:00 committed by GitHub
commit 88780cd147
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 170 additions and 18 deletions

View File

@ -1516,7 +1516,10 @@ export default {
p_right: 'Right', p_right: 'Right',
p_top: 'Top', p_top: 'Top',
p_bottom: 'Bottom', p_bottom: 'Bottom',
p_center: 'Center' p_center: 'Center',
table_auto_break_line: 'Auto Line Feed',
table_break_line_tip: 'If open this option,the table item height will disabled.',
step: 'Step(px)'
}, },
dataset: { dataset: {
scope_edit: 'Effective only when editing', scope_edit: 'Effective only when editing',

View File

@ -1510,7 +1510,10 @@ export default {
p_right: '右對齊', p_right: '右對齊',
p_top: '上對齊', p_top: '上對齊',
p_bottom: '下對齊', p_bottom: '下對齊',
p_center: '居中' p_center: '居中',
table_auto_break_line: '自動換行',
table_break_line_tip: '開啟自動換行,表格行高設置將失效',
step: '步長(px)'
}, },
dataset: { dataset: {
scope_edit: '僅編輯時生效', scope_edit: '僅編輯時生效',

View File

@ -1509,7 +1509,10 @@ export default {
p_right: '右对齐', p_right: '右对齐',
p_top: '上对齐', p_top: '上对齐',
p_bottom: '下对齐', p_bottom: '下对齐',
p_center: '居中' p_center: '居中',
table_auto_break_line: '自动换行',
table_break_line_tip: '开启自动换行,表格行高设置将失效',
step: '步长(px)'
}, },
dataset: { dataset: {
scope_edit: '仅编辑时生效', scope_edit: '仅编辑时生效',

View File

@ -77,6 +77,7 @@ export const DEFAULT_SIZE = {
tableColumnWidth: 100, tableColumnWidth: 100,
tableHeaderAlign: 'left', tableHeaderAlign: 'left',
tableItemAlign: 'right', tableItemAlign: 'right',
tableAutoBreakLine: false,
gaugeMinType: 'fix', // fix or dynamic gaugeMinType: 'fix', // fix or dynamic
gaugeMinField: { gaugeMinField: {
id: '', id: '',
@ -462,7 +463,8 @@ export const DEFAULT_THRESHOLD = {
export const DEFAULT_SCROLL = { export const DEFAULT_SCROLL = {
open: false, open: false,
row: 1, row: 1,
interval: 2000 interval: 2000,
step: 50
} }
// chart config // chart config
export const BASE_BAR = { export const BASE_BAR = {

View File

@ -1847,6 +1847,7 @@ export const TYPE_CONFIGS = [
'tableItemBgColor', 'tableItemBgColor',
'tableHeaderFontColor', 'tableHeaderFontColor',
'tableFontColor', 'tableFontColor',
'tableBorderColor',
'tableScrollBarColor', 'tableScrollBarColor',
'alpha' 'alpha'
], ],
@ -1857,7 +1858,8 @@ export const TYPE_CONFIGS = [
'tableItemHeight', 'tableItemHeight',
'tableColumnWidth', 'tableColumnWidth',
'showIndex', 'showIndex',
'indexLabel' 'indexLabel',
'tableAutoBreakLine'
], ],
'title-selector': [ 'title-selector': [
'show', 'show',
@ -1887,6 +1889,7 @@ export const TYPE_CONFIGS = [
'tableItemBgColor', 'tableItemBgColor',
'tableHeaderFontColor', 'tableHeaderFontColor',
'tableFontColor', 'tableFontColor',
'tableBorderColor',
'tableScrollBarColor', 'tableScrollBarColor',
'alpha' 'alpha'
], ],
@ -1899,7 +1902,8 @@ export const TYPE_CONFIGS = [
'tableItemHeight', 'tableItemHeight',
'tableColumnWidth', 'tableColumnWidth',
'showIndex', 'showIndex',
'indexLabel' 'indexLabel',
'tableAutoBreakLine'
], ],
'title-selector': [ 'title-selector': [
'show', 'show',

View File

@ -31,6 +31,7 @@
</el-form-item> </el-form-item>
<span v-show="scrollForm.open"> <span v-show="scrollForm.open">
<el-form-item <el-form-item
v-show="!isAutoBreakLine"
:label="$t('chart.row')" :label="$t('chart.row')"
class="form-item" class="form-item"
> >
@ -43,6 +44,20 @@
@change="changeScrollCfg" @change="changeScrollCfg"
/> />
</el-form-item> </el-form-item>
<el-form-item
v-show="isAutoBreakLine"
:label="$t('chart.step')"
class="form-item"
>
<el-input-number
v-model="scrollForm.step"
:min="1"
:max="10000"
:precision="0"
size="mini"
@change="changeScrollCfg"
/>
</el-form-item>
<el-form-item <el-form-item
:label="$t('chart.interval') + '(ms)'" :label="$t('chart.interval') + '(ms)'"
class="form-item" class="form-item"
@ -63,7 +78,7 @@
</template> </template>
<script> <script>
import { DEFAULT_SCROLL } from '@/views/chart/chart/chart' import { DEFAULT_SCROLL, DEFAULT_SIZE } from '@/views/chart/chart/chart'
export default { export default {
name: 'ScrollCfg', name: 'ScrollCfg',
@ -75,7 +90,8 @@ export default {
}, },
data() { data() {
return { return {
scrollForm: JSON.parse(JSON.stringify(DEFAULT_SCROLL)) scrollForm: JSON.parse(JSON.stringify(DEFAULT_SCROLL)),
isAutoBreakLine: false
} }
}, },
watch: { watch: {
@ -100,10 +116,26 @@ export default {
} }
if (senior.scrollCfg) { if (senior.scrollCfg) {
this.scrollForm = senior.scrollCfg this.scrollForm = senior.scrollCfg
this.scrollForm.step = senior.scrollCfg.step ? senior.scrollCfg.step : DEFAULT_SCROLL.step
} else { } else {
this.scrollForm = JSON.parse(JSON.stringify(DEFAULT_SCROLL)) this.scrollForm = JSON.parse(JSON.stringify(DEFAULT_SCROLL))
} }
} }
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.size) {
if (this.chart.render === 'antv') {
this.isAutoBreakLine = false
} else {
this.isAutoBreakLine = customAttr.size.tableAutoBreakLine ? customAttr.size.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
}
}
}
}, },
changeScrollCfg() { changeScrollCfg() {
this.$emit('onScrollCfgChange', this.scrollForm) this.$emit('onScrollCfgChange', this.scrollForm)

View File

@ -283,6 +283,30 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item
v-show="showProperty('tableAutoBreakLine')"
label-width="100px"
:label="$t('chart.table_auto_break_line')"
class="form-item"
>
<el-checkbox
v-model="sizeForm.tableAutoBreakLine"
@change="changeBarSizeCase('tableAutoBreakLine')"
>{{ $t('chart.open') }}</el-checkbox>
<el-tooltip
class="item"
effect="dark"
placement="bottom"
>
<div slot="content">
{{ $t('chart.table_break_line_tip') }}
</div>
<i
class="el-icon-info"
style="cursor: pointer;color: gray;font-size: 12px;"
/>
</el-tooltip>
</el-form-item>
<el-form-item <el-form-item
v-show="showProperty('tableTitleFontSize')" v-show="showProperty('tableTitleFontSize')"
label-width="100px" label-width="100px"
@ -345,6 +369,7 @@
> >
<el-slider <el-slider
v-model="sizeForm.tableItemHeight" v-model="sizeForm.tableItemHeight"
:disabled="sizeForm.tableAutoBreakLine"
:min="36" :min="36"
:max="100" :max="100"
show-input show-input
@ -1127,6 +1152,8 @@ export default {
this.sizeForm.hPosition = this.sizeForm.hPosition ? this.sizeForm.hPosition : DEFAULT_SIZE.hPosition this.sizeForm.hPosition = this.sizeForm.hPosition ? this.sizeForm.hPosition : DEFAULT_SIZE.hPosition
this.sizeForm.vPosition = this.sizeForm.vPosition ? this.sizeForm.vPosition : DEFAULT_SIZE.vPosition this.sizeForm.vPosition = this.sizeForm.vPosition ? this.sizeForm.vPosition : DEFAULT_SIZE.vPosition
this.sizeForm.tableAutoBreakLine = this.sizeForm.tableAutoBreakLine ? this.sizeForm.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
} }
} }
}, },

View File

@ -4,7 +4,10 @@
:style="bg_class" :style="bg_class"
style="padding: 8px;width: 100%;height: 100%;overflow: hidden;" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;"
> >
<el-row style="height: 100%;"> <el-row
style="height: 100%;"
:style="cssVars"
>
<p <p
v-show="title_show" v-show="title_show"
ref="title" ref="title"
@ -93,7 +96,7 @@
<script> <script>
import { hexColorToRGBA } from '../../chart/util' import { hexColorToRGBA } from '../../chart/util'
import eventBus from '@/components/canvas/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
import { DEFAULT_COLOR_CASE, DEFAULT_SIZE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart' import { DEFAULT_COLOR_CASE, DEFAULT_SCROLL, DEFAULT_SIZE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import DePagination from '@/components/deCustomCm/pagination.js' import DePagination from '@/components/deCustomCm/pagination.js'
@ -178,7 +181,13 @@ export default {
color: '#606266' color: '#606266'
}, },
not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET, not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET,
mergeCells: [] mergeCells: [],
cssStyleParams: {
borderColor: DEFAULT_COLOR_CASE.tableBorderColor,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}
} }
}, },
computed: { computed: {
@ -208,7 +217,16 @@ export default {
}, },
...mapState([ ...mapState([
'previewCanvasScale' 'previewCanvasScale'
]) ]),
cssVars() {
return {
'--color': this.cssStyleParams.borderColor,
'--overflow': this.cssStyleParams.overflow,
'--text-overflow': this.cssStyleParams.textOverflow,
'--white-space': this.cssStyleParams.whiteSpace
}
}
}, },
watch: { watch: {
chart: function() { chart: function() {
@ -329,6 +347,7 @@ export default {
calcHeightRightNow() { calcHeightRightNow() {
this.$nextTick(() => { this.$nextTick(() => {
if (this.$refs.tableContainer) { if (this.$refs.tableContainer) {
const attr = JSON.parse(this.chart.customAttr)
let pageHeight = 0 let pageHeight = 0
if (this.showPage) { if (this.showPage) {
pageHeight = 36 pageHeight = 36
@ -338,24 +357,33 @@ export default {
let tableHeight let tableHeight
if (this.chart.data) { if (this.chart.data) {
if (this.chart.type === 'table-info') { if (this.chart.type === 'table-info') {
tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight if (this.showPage) {
tableHeight = this.currentPage.pageSize * attr.size.tableItemHeight + attr.size.tableTitleHeight
} else {
tableHeight = this.chart.data.tableRow.length * attr.size.tableItemHeight + attr.size.tableTitleHeight
}
} else if (this.chart.data.detailFields?.length) { } else if (this.chart.data.detailFields?.length) {
let rowLength = 0 let rowLength = 0
this.chart.data.tableRow.forEach(row => { this.chart.data.tableRow.forEach(row => {
rowLength += (row?.details?.length || 1) rowLength += (row?.details?.length || 1)
}) })
tableHeight = (rowLength + 2) * 36 - pageHeight tableHeight = rowLength * attr.size.tableItemHeight + 2 * attr.size.tableTitleHeight
} else { } else {
tableHeight = (this.chart.data.tableRow.length + 2) * 36 - pageHeight tableHeight = this.chart.data.tableRow.length * attr.size.tableItemHeight + 2 * attr.size.tableTitleHeight
} }
} else { } else {
tableHeight = 0 tableHeight = 0
} }
const breakLine = attr.size.tableAutoBreakLine ? attr.size.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
if (breakLine) {
this.height = tableMaxHeight + 'px'
} else {
if (tableHeight > tableMaxHeight) { if (tableHeight > tableMaxHeight) {
this.height = tableMaxHeight + 'px' this.height = tableMaxHeight + 'px'
} else { } else {
this.height = 'auto' this.height = 'auto'
} }
}
if (this.enableScroll) { if (this.enableScroll) {
this.$nextTick(() => { this.$nextTick(() => {
@ -379,6 +407,7 @@ export default {
this.table_item_class.color = customAttr.color.tableFontColor this.table_item_class.color = customAttr.color.tableFontColor
this.table_item_class.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha) this.table_item_class.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha)
this.scrollBarColor = customAttr.color.tableScrollBarColor ? customAttr.color.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor this.scrollBarColor = customAttr.color.tableScrollBarColor ? customAttr.color.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
this.cssStyleParams.borderColor = customAttr.color.tableBorderColor ? customAttr.color.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
} }
if (customAttr.size) { if (customAttr.size) {
this.table_header_class.fontSize = customAttr.size.tableTitleFontSize + 'px' this.table_header_class.fontSize = customAttr.size.tableTitleFontSize + 'px'
@ -400,6 +429,17 @@ export default {
} else { } else {
this.indexLabel = customAttr.size.indexLabel this.indexLabel = customAttr.size.indexLabel
} }
const autoBreakLine = customAttr.size.tableAutoBreakLine ? customAttr.size.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
if (autoBreakLine) {
this.cssStyleParams.overflow = 'hidden'
this.cssStyleParams.textOverflow = 'auto'
this.cssStyleParams.whiteSpace = 'normal'
} else {
this.cssStyleParams.overflow = 'hidden'
this.cssStyleParams.textOverflow = 'ellipsis'
this.cssStyleParams.whiteSpace = 'nowrap'
}
} }
this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class)) this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class))
// //
@ -552,8 +592,18 @@ export default {
if (rowHeight < 36) { if (rowHeight < 36) {
rowHeight = 36 rowHeight = 36
} }
const attr = JSON.parse(this.chart.customAttr)
const breakLine = attr.size.tableAutoBreakLine ? attr.size.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
this.scrollTimer = setInterval(() => { this.scrollTimer = setInterval(() => {
const top = rowHeight * senior.scrollCfg.row let top = 0
if (breakLine) {
top = senior.scrollCfg.step ? senior.scrollCfg.step : DEFAULT_SCROLL.step
} else {
top = rowHeight * senior.scrollCfg.row
}
if (scrollContainer.clientHeight + scrollContainer.scrollTop < scrollContainer.scrollHeight) { if (scrollContainer.clientHeight + scrollContainer.scrollTop < scrollContainer.scrollHeight) {
this.scrollTop += top this.scrollTop += top
} else { } else {
@ -628,4 +678,32 @@ export default {
.table-class{ .table-class{
scrollbar-color: var(--scroll-bar-color) transparent; scrollbar-color: var(--scroll-bar-color) transparent;
} }
.table-class {
::v-deep .elx-table.border--full .elx-body--column,
::v-deep .elx-table.border--full .elx-footer--column,
::v-deep .elx-table.border--full .elx-header--column {
background-image: linear-gradient(var(--color, #e8eaec), var(--color, #e8eaec)), linear-gradient(var(--color, #e8eaec), var(--color, #e8eaec)) !important;
}
::v-deep .elx-table--border-line {
border: 1px solid var(--color, #e8eaec) !important;
}
::v-deep .elx-table .elx-table--header-wrapper .elx-table--header-border-line {
border-bottom: 1px solid var(--color, #e8eaec) !important;
}
::v-deep .elx-table .elx-table--footer-wrapper {
border-top: 1px solid var(--color, #e8eaec) !important;
}
::v-deep .elx-checkbox .elx-checkbox--label,
::v-deep .elx-radio .elx-radio--label,
::v-deep .elx-radio-button .elx-radio--label,
::v-deep .elx-table .elx-body--column.col--ellipsis:not(.col--actived) > .elx-cell,
::v-deep .elx-table .elx-footer--column.col--ellipsis:not(.col--actived) > .elx-cell,
::v-deep .elx-table .elx-header--column.col--ellipsis:not(.col--actived) > .elx-cell{
overflow: var(--overflow, 'hidden');
text-overflow: var(--text-overflow, 'ellipsis');
white-space: var(--white-space, 'nowrap');
}
}
</style> </style>