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

feat: 表格增加斑马纹

Browse Source
This commit is contained in:
ulleo 2023-11-14 15:55:24 +08:00
parent 3b7ab13003
commit fe593bbecc
8 changed files with 51 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1146,6 +1146,8 @@ export default {
table_item_fontsize: 'Table font size',
table_header_bg: 'Header Background',
table_item_bg: 'Table Background',
table_item_sub_enable: 'Enable CrossBackgroundColor',
table_item_sub_bg: 'Table CrossBackgroundColor',
table_header_font_color: 'Header Font',
table_item_font_color: 'Table Font',
table_show_index: 'Show Index',

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

@ -1145,6 +1145,8 @@ export default {
table_item_fontsize: '表格字體大小',
table_header_bg: '表頭背景',
table_item_bg: '表格背景',
table_item_sub_enable: '斑馬紋',
table_item_sub_bg: '奇數行表格背景',
table_header_font_color: '表頭字體',
table_item_font_color: '表格字體',
table_show_index: '顯示序號',

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

@ -1144,6 +1144,8 @@ export default {
table_item_fontsize: '表格字体大小',
table_header_bg: '表头背景',
table_item_bg: '表格背景',
table_item_sub_enable: '斑马纹',
table_item_sub_bg: '奇数行表格背景',
table_header_font_color: '表头字体',
table_item_font_color: '表格字体',
table_show_index: '显示序号',

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

@ -22,6 +22,8 @@ export const DEFAULT_COLOR_CASE = {
alpha: 100,
tableHeaderBgColor: '#6D9A49',
tableItemBgColor: '#FFFFFF',
enableTableCrossBG: false,
tableItemSubBgColor: '#dedede',
tableHeaderFontColor: '#000000',
tableFontColor: '#000000',
tableStripe: true,
@ -46,6 +48,8 @@ export const DEFAULT_COLOR_CASE_DARK = {
alpha: 100,
tableHeaderBgColor: '#5470c6',
tableItemBgColor: '#131E42',
enableTableCrossBG: false,
tableItemSubBgColor: '#1b2d60',
tableFontColor: '#ffffff',
tableStripe: true,
dimensionColor: '#ffffff',

8
core/frontend/src/views/chart/chart/common/common_table.js
View File

@ -127,6 +127,8 @@ export function getCustomTheme(chart) {
const c = JSON.parse(JSON.stringify(customAttr.color))
const h_c = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
const i_c = hexColorToRGBA(c.tableItemBgColor, c.alpha)
const i_s_c = hexColorToRGBA(c.tableItemSubBgColor, c.alpha)
const enableTableCrossBG = c.enableTableCrossBG
const b_c = c.tableBorderColor ? hexColorToRGBA(c.tableBorderColor, c.alpha) : hexColorToRGBA(DEFAULT_COLOR_CASE.tableBorderColor, c.alpha)
theme.splitLine.horizontalBorderColor = b_c
theme.splitLine.verticalBorderColor = b_c
@ -163,7 +165,9 @@ export function getCustomTheme(chart) {
theme.colCell.text.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.colCell.measureText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.dataCell.cell.crossBackgroundColor = i_c
// 奇数行单元格背景色
console.log(enableTableCrossBG, i_s_c, i_c)
theme.dataCell.cell.crossBackgroundColor = enableTableCrossBG ? i_s_c : i_c
theme.dataCell.cell.backgroundColor = i_c
theme.dataCell.cell.horizontalBorderColor = b_c
theme.dataCell.cell.verticalBorderColor = b_c
@ -224,7 +228,7 @@ export function getCustomTheme(chart) {
theme.dataCell.measureText.textAlign = i_a
}
}
console.log(theme)
return theme
}

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

@ -47,6 +47,8 @@ export const TYPE_CONFIGS = [
'color-selector': [
'tableHeaderBgColor',
'tableItemBgColor',
'enableTableCrossBG',
'tableItemSubBgColor',
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
@ -96,6 +98,8 @@ export const TYPE_CONFIGS = [
'color-selector': [
'tableHeaderBgColor',
'tableItemBgColor',
'enableTableCrossBG',
'tableItemSubBgColor',
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
@ -148,6 +152,8 @@ export const TYPE_CONFIGS = [
'color-selector': [
'tableHeaderBgColor',
'tableItemBgColor',
'enableTableCrossBG',
'tableItemSubBgColor',
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
@ -1975,6 +1981,8 @@ export const TYPE_CONFIGS = [
'color-selector': [
'tableHeaderBgColor',
'tableItemBgColor',
'enableTableCrossBG',
'tableItemSubBgColor',
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
@ -2018,6 +2026,8 @@ export const TYPE_CONFIGS = [
'color-selector': [
'tableHeaderBgColor',
'tableItemBgColor',
'enableTableCrossBG',
'tableItemSubBgColor',
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',

22
core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
View File

@ -212,6 +212,28 @@
@change="changeColorCase('tableItemBgColor')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('enableTableCrossBG')"
:label="$t('chart.table_item_sub_enable')"
class="form-item"
>
<el-checkbox
v-model="colorForm.enableTableCrossBG"
@change="changeColorCase('enableTableCrossBG')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableItemSubBgColor') && colorForm.enableTableCrossBG"
:label="$t('chart.table_item_sub_bg')"
class="form-item"
>
<el-color-picker
v-model="colorForm.tableItemSubBgColor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeColorCase('tableItemSubBgColor')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableHeaderFontColor')"
:label="$t('chart.table_header_font_color')"

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

@ -481,6 +481,9 @@ export default {
// }
// }
// }
if (customAttr.color.enableTableCrossBG) {
this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemSubBgColor, customAttr.color.alpha)
}
}
if (this.chart.customStyle) {
const customStyle = JSON.parse(this.chart.customStyle)