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

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/lang/en.js
View File

@ -1516,7 +1516,10 @@ export default {
p_right: 'Right',
p_top: 'Top',
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: {
scope_edit: 'Effective only when editing',

5
frontend/src/lang/tw.js
View File

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

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

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

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

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

8
frontend/src/views/chart/chart/util.js
View File

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

36
frontend/src/views/chart/components/senior/ScrollCfg.vue
View File

@ -31,6 +31,7 @@
</el-form-item>
<span v-show="scrollForm.open">
<el-form-item
v-show="!isAutoBreakLine"
:label="$t('chart.row')"
class="form-item"
>
@ -43,6 +44,20 @@
@change="changeScrollCfg"
/>
</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
:label="$t('chart.interval') + '(ms)'"
class="form-item"
@ -63,7 +78,7 @@
</template>
<script>
import { DEFAULT_SCROLL } from '@/views/chart/chart/chart'
import { DEFAULT_SCROLL, DEFAULT_SIZE } from '@/views/chart/chart/chart'
export default {
name: 'ScrollCfg',
@ -75,7 +90,8 @@ export default {
},
data() {
return {
scrollForm: JSON.parse(JSON.stringify(DEFAULT_SCROLL))
scrollForm: JSON.parse(JSON.stringify(DEFAULT_SCROLL)),
isAutoBreakLine: false
}
},
watch: {
@ -100,10 +116,26 @@ export default {
}
if (senior.scrollCfg) {
this.scrollForm = senior.scrollCfg
this.scrollForm.step = senior.scrollCfg.step ? senior.scrollCfg.step : DEFAULT_SCROLL.step
} else {
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() {
this.$emit('onScrollCfgChange', this.scrollForm)

27
frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
View File

@ -283,6 +283,30 @@
/>
</el-select>
</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
v-show="showProperty('tableTitleFontSize')"
label-width="100px"
@ -345,6 +369,7 @@
>
<el-slider
v-model="sizeForm.tableItemHeight"
:disabled="sizeForm.tableAutoBreakLine"
:min="36"
:max="100"
show-input
@ -1127,6 +1152,8 @@ export default {
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.tableAutoBreakLine = this.sizeForm.tableAutoBreakLine ? this.sizeForm.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
}
}
},

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

@ -4,7 +4,10 @@
:style="bg_class"
style="padding: 8px;width: 100%;height: 100%;overflow: hidden;"
>
<el-row style="height: 100%;">
<el-row
style="height: 100%;"
:style="cssVars"
>
<p
v-show="title_show"
ref="title"
@ -93,7 +96,7 @@
<script>
import { hexColorToRGBA } from '../../chart/util'
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 DePagination from '@/components/deCustomCm/pagination.js'
@ -178,7 +181,13 @@ export default {
color: '#606266'
},
not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET,
mergeCells: []
mergeCells: [],
cssStyleParams: {
borderColor: DEFAULT_COLOR_CASE.tableBorderColor,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}
}
},
computed: {
@ -208,7 +217,16 @@ export default {
},
...mapState([
'previewCanvasScale'
])
]),
cssVars() {
return {
'--color': this.cssStyleParams.borderColor,
'--overflow': this.cssStyleParams.overflow,
'--text-overflow': this.cssStyleParams.textOverflow,
'--white-space': this.cssStyleParams.whiteSpace
}
}
},
watch: {
chart: function() {
@ -329,6 +347,7 @@ export default {
calcHeightRightNow() {
this.$nextTick(() => {
if (this.$refs.tableContainer) {
const attr = JSON.parse(this.chart.customAttr)
let pageHeight = 0
if (this.showPage) {
pageHeight = 36
@ -338,23 +357,32 @@ export default {
let tableHeight
if (this.chart.data) {
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) {
let rowLength = 0
this.chart.data.tableRow.forEach(row => {
rowLength += (row?.details?.length || 1)
})
tableHeight = (rowLength + 2) * 36 - pageHeight
tableHeight = rowLength * attr.size.tableItemHeight + 2 * attr.size.tableTitleHeight
} else {
tableHeight = (this.chart.data.tableRow.length + 2) * 36 - pageHeight
tableHeight = this.chart.data.tableRow.length * attr.size.tableItemHeight + 2 * attr.size.tableTitleHeight
}
} else {
tableHeight = 0
}
if (tableHeight > tableMaxHeight) {
const breakLine = attr.size.tableAutoBreakLine ? attr.size.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
if (breakLine) {
this.height = tableMaxHeight + 'px'
} else {
this.height = 'auto'
if (tableHeight > tableMaxHeight) {
this.height = tableMaxHeight + 'px'
} else {
this.height = 'auto'
}
}
if (this.enableScroll) {
@ -379,6 +407,7 @@ export default {
this.table_item_class.color = customAttr.color.tableFontColor
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.cssStyleParams.borderColor = customAttr.color.tableBorderColor ? customAttr.color.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
}
if (customAttr.size) {
this.table_header_class.fontSize = customAttr.size.tableTitleFontSize + 'px'
@ -400,6 +429,17 @@ export default {
} else {
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))
// 暂不支持斑马纹
@ -552,8 +592,18 @@ export default {
if (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(() => {
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) {
this.scrollTop += top
} else {
@ -628,4 +678,32 @@ export default {
.table-class{
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>