dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6622 from dataease/pr@dev@feat_hide_table_header

Browse Source 
feat: 表格支持隐藏表头#5873
This commit is contained in:
wisonic-s 2023-11-09 17:53:59 +08:00 committed by GitHub
commit 2f6e41a183
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 295 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/frontend/src/lang/en.js
View File

@ -1149,6 +1149,7 @@ export default {
table_header_font_color: 'Header Font',
table_item_font_color: 'Table Font',
table_show_index: 'Show Index',
table_show_table_header: 'Show Table Header',
stripe: 'Zebra pattern',
start_angle: 'Start Angle',
end_angle: 'End Angle',

1
core/frontend/src/lang/tw.js
View File

@ -1148,6 +1148,7 @@ export default {
table_header_font_color: '表頭字體',
table_item_font_color: '表格字體',
table_show_index: '顯示序號',
table_show_table_header: '顯示表頭',
stripe: '斑馬紋',
start_angle: '起始角度',
end_angle: '結束角度',

1
core/frontend/src/lang/zh.js
View File

@ -1147,6 +1147,7 @@ export default {
table_header_font_color: '表头字体',
table_item_font_color: '表格字体',
table_show_index: '显示序号',
table_show_table_header: '显示表头',
stripe: '斑马纹',
start_angle: '起始角度',
end_angle: '结束角度',

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

@ -156,7 +156,8 @@ export const DEFAULT_SIZE = {
mapLineAnimateInterval: 1,
mapLineAnimateTrailLength: 1,
wordSizeRange: [8, 32],
wordSpacing: 6
wordSpacing: 6,
showTableHeader: true
}
export const DEFAULT_SUSPENSION = {
show: true

18
core/frontend/src/views/chart/chart/table/table-info.js
View File

@ -111,6 +111,15 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo)
return new DataCell(viewMeta, viewMeta?.spreadsheet)
}
}
// 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
if (customAttr.size.showTableHeader === false) {
s2Options.style.colCfg.height = 1
s2Options.interaction = {
resize: {
colCellVertical: false
}
}
}
// 开始渲染
if (s2) {
@ -284,6 +293,15 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
}
}
}
// 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
if (customAttr.size.showTableHeader === false) {
s2Options.style.colCfg.height = 1
s2Options.interaction = {
resize: {
colCellVertical: false
}
}
}
// 开始渲染
if (s2) {

12
core/frontend/src/views/chart/chart/util.js
View File

@ -63,7 +63,8 @@ export const TYPE_CONFIGS = [
'tableColumnMode',
'showIndex',
'indexLabel',
'tableColTooltip'
'tableColTooltip',
'showTableHeader'
],
'title-selector-ant-v': [
'show',
@ -113,7 +114,8 @@ export const TYPE_CONFIGS = [
'tableColumnMode',
'showIndex',
'indexLabel',
'tableColTooltip'
'tableColTooltip',
'showTableHeader'
],
'title-selector-ant-v': [
'show',
@ -1987,7 +1989,8 @@ export const TYPE_CONFIGS = [
'tableColumnWidth',
'showIndex',
'indexLabel',
'tableAutoBreakLine'
'tableAutoBreakLine',
'showTableHeader'
],
'title-selector': [
'show',
@ -2031,7 +2034,8 @@ export const TYPE_CONFIGS = [
'tableColumnWidth',
'showIndex',
'indexLabel',
'tableAutoBreakLine'
'tableAutoBreakLine',
'showTableHeader'
],
'title-selector': [
'show',

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

@ -242,7 +242,42 @@
</el-form-item>
<!--radar-end-->
<!--table-begin-->
<el-form-item
v-show="showProperty('tableItemFontSize')"
label-width="100px"
:label="$t('chart.table_item_fontsize')"
class="form-item"
>
<el-select
v-model="sizeForm.tableItemFontSize"
:placeholder="$t('chart.table_item_fontsize')"
@change="changeBarSizeCase('tableItemFontSize')"
>
<el-option
v-for="option in fontSize"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableItemHeight')"
label-width="100px"
:label="$t('chart.table_item_height')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableItemHeight"
:disabled="sizeForm.tableAutoBreakLine"
:min="36"
:max="100"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableItemHeight')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tablePageMode')"
label-width="100px"
@ -283,6 +318,22 @@
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableColumnWidth')"
label-width="100px"
:label="$t('chart.table_column_width_config')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableColumnWidth"
:min="10"
:max="1000"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableColumnWidth')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableAutoBreakLine')"
label-width="100px"
@ -303,97 +354,10 @@
</div>
<i
class="el-icon-info"
style="cursor: pointer;color: gray;font-size: 12px;"
style="cursor: pointer;color: grey;font-size: 12px;"
/>
</el-tooltip>
</el-form-item>
<el-form-item
v-show="showProperty('tableTitleFontSize')"
label-width="100px"
:label="$t('chart.table_title_fontsize')"
class="form-item"
>
<el-select
v-model="sizeForm.tableTitleFontSize"
:placeholder="$t('chart.table_title_fontsize')"
@change="changeBarSizeCase('tableTitleFontSize')"
>
<el-option
v-for="option in fontSize"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableItemFontSize')"
label-width="100px"
:label="$t('chart.table_item_fontsize')"
class="form-item"
>
<el-select
v-model="sizeForm.tableItemFontSize"
:placeholder="$t('chart.table_item_fontsize')"
@change="changeBarSizeCase('tableItemFontSize')"
>
<el-option
v-for="option in fontSize"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableTitleHeight')"
label-width="100px"
:label="$t('chart.table_title_height')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableTitleHeight"
:min="36"
:max="100"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableTitleHeight')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableItemHeight')"
label-width="100px"
:label="$t('chart.table_item_height')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableItemHeight"
:disabled="sizeForm.tableAutoBreakLine"
:min="36"
:max="100"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableItemHeight')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableColumnWidth')"
label-width="100px"
:label="$t('chart.table_column_width_config')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableColumnWidth"
:min="10"
:max="1000"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableColumnWidth')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('showIndex')"
label-width="100px"
@ -421,6 +385,59 @@
@blur="changeBarSizeCase('indexLabel')"
/>
</el-form-item>
<el-divider v-show="includesAny(chart.type ,'table')" />
<el-form-item
v-show="showProperty('showTableHeader')"
label-width="100px"
:label="$t('chart.table_show_table_header')"
class="form-item"
>
<el-radio-group
v-model="sizeForm.showTableHeader"
@change="changeBarSizeCase('showTableHeader')"
>
<el-radio :label="true">{{ $t('commons.yes') }}</el-radio>
<el-radio :label="false">{{ $t('commons.no') }}</el-radio>
</el-radio-group>
</el-form-item>
<div v-show="showProperty('showTableHeader') && sizeForm.showTableHeader">
<el-form-item
v-show="showProperty('tableTitleFontSize')"
label-width="100px"
:label="$t('chart.table_title_fontsize')"
class="form-item"
>
<el-select
v-model="sizeForm.tableTitleFontSize"
:placeholder="$t('chart.table_title_fontsize')"
@change="changeBarSizeCase('tableTitleFontSize')"
>
<el-option
v-for="option in fontSize"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableTitleHeight')"
label-width="100px"
:label="$t('chart.table_title_height')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableTitleHeight"
:min="36"
:max="100"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableTitleHeight')"
/>
</el-form-item>
</div>
<!--table-end-->
<!--gauge-begin-->
@ -1055,6 +1072,7 @@
<script>
import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
import { includesAny } from '@/utils/StringUtils'
export default {
name: 'SizeSelector',
props: {
@ -1118,6 +1136,7 @@ export default {
this.initData()
},
methods: {
includesAny,
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
@ -1145,6 +1164,7 @@ export default {
this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
this.sizeForm.showTableHeader = this.sizeForm.showTableHeader !== false
if (this.sizeForm.indexLabel === null || this.sizeForm.indexLabel === undefined) {
this.sizeForm.indexLabel = DEFAULT_SIZE.indexLabel
}

275
core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
View File

@ -162,7 +162,60 @@
</el-form-item>
<!--radar-end-->
<!--table-begin-->
<el-form-item
v-show="showProperty('tableItemFontSize')"
label-width="100px"
:label="$t('chart.table_item_fontsize')"
class="form-item"
>
<el-select
v-model="sizeForm.tableItemFontSize"
:placeholder="$t('chart.table_item_fontsize')"
@change="changeBarSizeCase('tableItemFontSize')"
>
<el-option
v-for="option in fontSize"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableItemAlign')"
label-width="100px"
:label="$t('chart.table_item_align')"
class="form-item"
>
<el-select
v-model="sizeForm.tableItemAlign"
:placeholder="$t('chart.table_item_align')"
@change="changeBarSizeCase('tableItemAlign')"
>
<el-option
v-for="option in alignOptions"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableItemHeight')"
label-width="100px"
:label="$t('chart.table_item_height')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableItemHeight"
:min="20"
:max="100"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableItemHeight')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tablePageMode')"
label-width="100px"
@ -203,114 +256,6 @@
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableTitleFontSize')"
label-width="100px"
:label="$t('chart.table_title_fontsize')"
class="form-item"
>
<el-select
v-model="sizeForm.tableTitleFontSize"
:placeholder="$t('chart.table_title_fontsize')"
@change="changeBarSizeCase('tableTitleFontSize')"
>
<el-option
v-for="option in fontSize"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableItemFontSize')"
label-width="100px"
:label="$t('chart.table_item_fontsize')"
class="form-item"
>
<el-select
v-model="sizeForm.tableItemFontSize"
:placeholder="$t('chart.table_item_fontsize')"
@change="changeBarSizeCase('tableItemFontSize')"
>
<el-option
v-for="option in fontSize"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableHeaderAlign')"
label-width="100px"
:label="$t('chart.table_header_align')"
class="form-item"
>
<el-select
v-model="sizeForm.tableHeaderAlign"
:placeholder="$t('chart.table_header_align')"
@change="changeBarSizeCase('tableHeaderAlign')"
>
<el-option
v-for="option in alignOptions"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableItemAlign')"
label-width="100px"
:label="$t('chart.table_item_align')"
class="form-item"
>
<el-select
v-model="sizeForm.tableItemAlign"
:placeholder="$t('chart.table_item_align')"
@change="changeBarSizeCase('tableItemAlign')"
>
<el-option
v-for="option in alignOptions"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableTitleHeight')"
label-width="100px"
:label="$t('chart.table_title_height')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableTitleHeight"
:min="20"
:max="100"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableTitleHeight')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableItemHeight')"
label-width="100px"
:label="$t('chart.table_item_height')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableItemHeight"
:min="20"
:max="100"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableItemHeight')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableColumnMode')"
label-width="100px"
@ -384,29 +329,100 @@
@blur="changeBarSizeCase('indexLabel')"
/>
</el-form-item>
<el-divider v-show="equalsAny(chart.type, 'table-info', 'table-normal')" />
<el-form-item
v-show="showProperty('tableRowTooltip')"
v-show="showProperty('showTableHeader')"
label-width="100px"
:label="$t('chart.table_row_tooltip')"
:label="$t('chart.table_show_table_header')"
class="form-item"
>
<el-checkbox
v-model="sizeForm.tableRowTooltip.show"
@change="changeBarSizeCase('tableRowTooltip')"
/>
<el-radio-group
v-model="sizeForm.showTableHeader"
@change="changeBarSizeCase('showTableHeader')"
>
<el-radio :label="true">{{ $t('commons.yes') }}</el-radio>
<el-radio :label="false">{{ $t('commons.no') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-show="showProperty('tableColTooltip')"
label-width="100px"
:label="$t('chart.table_col_tooltip')"
class="form-item"
>
<el-checkbox
v-model="sizeForm.tableColTooltip.show"
@change="changeBarSizeCase('tableColTooltip')"
/>
</el-form-item>
<div v-show="showProperty('showTableHeader') && sizeForm.showTableHeader">
<el-form-item
v-show="showProperty('tableTitleFontSize')"
label-width="100px"
:label="$t('chart.table_title_fontsize')"
class="form-item"
>
<el-select
v-model="sizeForm.tableTitleFontSize"
:placeholder="$t('chart.table_title_fontsize')"
@change="changeBarSizeCase('tableTitleFontSize')"
>
<el-option
v-for="option in fontSize"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableHeaderAlign')"
label-width="100px"
:label="$t('chart.table_header_align')"
class="form-item"
>
<el-select
v-model="sizeForm.tableHeaderAlign"
:placeholder="$t('chart.table_header_align')"
@change="changeBarSizeCase('tableHeaderAlign')"
>
<el-option
v-for="option in alignOptions"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('tableTitleHeight')"
label-width="100px"
:label="$t('chart.table_title_height')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableTitleHeight"
:min="20"
:max="100"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableTitleHeight')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableRowTooltip')"
label-width="100px"
:label="$t('chart.table_row_tooltip')"
class="form-item"
>
<el-checkbox
v-model="sizeForm.tableRowTooltip.show"
@change="changeBarSizeCase('tableRowTooltip')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableColTooltip')"
label-width="100px"
:label="$t('chart.table_col_tooltip')"
class="form-item"
>
<el-checkbox
v-model="sizeForm.tableColTooltip.show"
@change="changeBarSizeCase('tableColTooltip')"
/>
</el-form-item>
</div>
<!--table-end-->
<!--chart-mix-start-->
<span v-show="showProperty('mix')">
<el-divider
@ -1427,7 +1443,7 @@
<script>
import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
import { equalsAny } from '@/utils/StringUtils'
import { equalsAny, includesAny } from '@/utils/StringUtils'
import { mapState } from 'vuex'
export default {
@ -1537,6 +1553,8 @@ export default {
this.initData()
},
methods: {
equalsAny,
includesAny,
initField() {
this.quotaData = this.quotaFields.filter(ele => !ele.chartId && ele.id !== 'count')
if (this.sizeForm.gaugeMinField.id) {
@ -1590,6 +1608,7 @@ export default {
this.sizeForm.tableColTooltip = this.sizeForm.tableColTooltip ?? DEFAULT_SIZE.tableColTooltip
this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
this.sizeForm.showTableHeader = this.sizeForm.showTableHeader !== false
if (this.sizeForm.indexLabel === null || this.sizeForm.indexLabel === undefined) {
this.sizeForm.indexLabel = DEFAULT_SIZE.indexLabel
}

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

@ -23,18 +23,19 @@
<ux-grid
ref="plxTable"
size="mini"
class="table-class"
:style="tableStyle"
:height="height"
:checkbox-config="{highlight: true}"
:width-resize="true"
:header-row-style="table_header_class"
:row-style="getRowStyle"
class="table-class"
:class="chart.id"
:merge-cells="mergeCells"
:show-summary="showSummary"
:summary-method="summaryMethod"
:index-config="{seqMethod}"
:show-header="showHeader"
@cell-click="cellClick"
>
<ux-table-column
@ -194,6 +195,7 @@ export default {
scrollTop: 0,
showIndex: false,
indexLabel: '序号',
showHeader: true,
scrollBarColor: DEFAULT_COLOR_CASE.tableScrollBarColor,
scrollBarHoverColor: DEFAULT_COLOR_CASE.tableScrollBarHoverColor,
totalStyle: {
@ -451,6 +453,11 @@ export default {
} else {
this.indexLabel = customAttr.size.indexLabel
}
if (customAttr.size.showTableHeader === false) {
this.showHeader = false
} else {
this.showHeader = true
}
const autoBreakLine = customAttr.size.tableAutoBreakLine ? customAttr.size.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
if (autoBreakLine) {