diff --git a/data-room-ui/packages/BasicComponents/Tables/index.vue b/data-room-ui/packages/BasicComponents/Tables/index.vue index d69baa27..9149bb52 100644 --- a/data-room-ui/packages/BasicComponents/Tables/index.vue +++ b/data-room-ui/packages/BasicComponents/Tables/index.vue @@ -33,6 +33,7 @@ import commonMixins from 'data-room-ui/js/mixins/commonMixins' import paramsMixins from 'data-room-ui/js/mixins/paramsMixins' import linkageMixins from 'data-room-ui/js/mixins/linkageMixins' import cloneDeep from 'lodash/cloneDeep' +import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting' export default { name: 'TableChart', mixins: [paramsMixins, commonMixins, linkageMixins], @@ -86,35 +87,34 @@ export default { fontSize: this.config.customize.headerFontSize + 'px' || '14px' } return style - }, - cellStyle () { + } + }, + created () { }, + mounted () { + this.chartInit() + }, + methods: { + cellStyle ({ row, column, rowIndex, columnIndex }) { const bodyBackgroundColor = { dark: '#141414', light: '#ffffff', auto: 'transparent' } + const initColor = this.customTheme === 'light' ? '#000000' : '#ffffff' const style = { - backgroundColor: - this.customTheme !== 'custom' - ? this.config.customize.bodyBackgroundColor || bodyBackgroundColor[this.customTheme] - : this.headerCellStyleObj.backgroundColor, - color: - this.customTheme === 'light' - ? '#000000' - : this.config.customize.bodyFontColor || '#ffffff', - fontSize: this.config.customize.bodyFontSize + 'px' || '14px', - border: `solid 1px ${this.customTheme !== 'custom' - ? this.config.customize.bodyBackgroundColor || bodyBackgroundColor[this.customTheme] - : this.headerCellStyleObj.backgroundColor}` + backgroundColor: '', + color: this.config.customize.bodyFontColor || initColor, + fontSize: this.config.customize.bodyFontSize + 'px' || '14px' + } + if (rowIndex % 2 && this.config.customize.evenRowBackgroundColor) { + style.backgroundColor = this.config.customize.evenRowBackgroundColor + } else if (!(rowIndex % 2) && this.config.customize.oddRowBackgroundColor) { + style.backgroundColor = this.config.customize.oddRowBackgroundColor + } else { + style.backgroundColor = this.config.customize.bodyBackgroundColor || bodyBackgroundColor[this.customTheme] } return style - } - }, - created () { }, - mounted () { - this.chartInit() - }, - methods: { + }, rowStyle ({ row, rowIndex }) { if (rowIndex % 2) { return { @@ -130,16 +130,23 @@ export default { rowClick (row) { this.linkage(row) }, - changeStyle (oldConfig) { - const config = cloneDeep(oldConfig) - if (this.customTheme === 'custom') { - this.headerCellStyleToObj() - this.cellStyleToObj() - } - if (this.customTheme === 'custom') { - this.headerCellStyleToObj() - this.cellStyleToObj() + changeStyle (config) { + config = { ...this.config, ...config } + // 样式改变时更新主题配置 + config.theme = settingToTheme(cloneDeep(config), this.customTheme) + this.changeChartConfig(config) + if (config.code === this.activeCode) { + this.changeActiveItemConfig(config) } + // const config = cloneDeep(oldConfig) + // if (this.customTheme === 'custom') { + // this.headerCellStyleToObj() + // this.cellStyleToObj() + // } + // if (this.customTheme === 'custom') { + // this.headerCellStyleToObj() + // this.cellStyleToObj() + // } // if (config.customize.stripe) { // const trs = document // .getElementById(this.config.code) @@ -173,14 +180,14 @@ export default { // // }); // } // this.chartInit(); - if (config.customize.evenRowBackgroundColor && !config.customize.oddRowBackgroundColor) { - config.customize.oddRowBackgroundColor = config.customize.bodyBackgroundColor - } else if (!config.customize.evenRowBackgroundColor && config.customize.oddRowBackgroundColor) { - config.customize.evenRowBackgroundColor = config.customize.bodyBackgroundColor - } else if (!(!config.customize.evenRowBackgroundColor && !config.customize.oddRowBackgroundColor)) { - config.customize.bodyBackgroundColor = '' - } - this.updateKey = new Date().getTime() + // if (config.customize.evenRowBackgroundColor && !config.customize.oddRowBackgroundColor) { + // config.customize.oddRowBackgroundColor = config.customize.bodyBackgroundColor + // } else if (!config.customize.evenRowBackgroundColor && config.customize.oddRowBackgroundColor) { + // config.customize.evenRowBackgroundColor = config.customize.bodyBackgroundColor + // } else if (!(!config.customize.evenRowBackgroundColor && !config.customize.oddRowBackgroundColor)) { + // config.customize.bodyBackgroundColor = '' + // } + // this.updateKey = new Date().getTime() return config }, dataFormatting (config, data) {