352 lines
9.7 KiB
Vue
352 lines
9.7 KiB
Vue
<template>
|
||
<div
|
||
style="width: 100%; height: 100%"
|
||
class="bs-design-wrap"
|
||
>
|
||
<!-- <span style="color: aliceblue;font-size: 40px;">
|
||
{{ columnData }}
|
||
</span> -->
|
||
<!-- :border="this.config.customize.border" -->
|
||
<el-table
|
||
:id="config.code"
|
||
ref="table"
|
||
:key="updateKey"
|
||
class="custom-table"
|
||
height="100%"
|
||
:stripe="config.customize.stripe"
|
||
:data="config.option.tableData"
|
||
:header-cell-style="headerCellStyle"
|
||
:cell-style="cellStyle"
|
||
:row-style="rowStyle"
|
||
@row-click="rowClick"
|
||
>
|
||
<el-table-column
|
||
v-for="(col, index) in config.option.columnData"
|
||
:key="index"
|
||
show-overflow-tooltip
|
||
:prop="col.alias"
|
||
:label="getLabel(col)"
|
||
align="center"
|
||
/>
|
||
</el-table>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
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],
|
||
props: {
|
||
id: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
config: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
updateKey: 0,
|
||
headerCellStyleObj: {
|
||
backgroundColor: 'transparent'
|
||
},
|
||
cellStyleObj: {
|
||
backgroundColor: 'transparent'
|
||
},
|
||
columnData: {},
|
||
// 第一次获取
|
||
isInit: true
|
||
}
|
||
},
|
||
computed: {
|
||
headerCellStyle () {
|
||
const headerBackgroundColor = {
|
||
light: '#ffffff',
|
||
dark: 'transparent'
|
||
}
|
||
if (document.getElementById(this.config.code)?.querySelector('tr')) {
|
||
document
|
||
.getElementById(this.config.code)
|
||
.querySelector('tr').style.backgroundColor =
|
||
this.customTheme !== 'custom'
|
||
? this.config.customize.headerBackgroundColor ||
|
||
headerBackgroundColor[this.customTheme]
|
||
: this.headerCellStyleObj.backgroundColor
|
||
}
|
||
const style = {
|
||
height: '48px',
|
||
borderBottom: 'solid 2px #007aff',
|
||
backgroundColor:
|
||
this.customTheme !== 'custom'
|
||
? this.config.customize.headerBackgroundColor ||
|
||
headerBackgroundColor[this.customTheme]
|
||
: this.headerCellStyleObj.backgroundColor,
|
||
color:
|
||
this.customTheme === 'light'
|
||
? '#000000'
|
||
: this.config.customize.headerFontColor || '#000000',
|
||
fontSize: this.config.customize.headerFontSize + 'px' || '14px'
|
||
}
|
||
return style
|
||
}
|
||
},
|
||
watch: {
|
||
activeItemConfig (val) {
|
||
console.dir(val)
|
||
}
|
||
},
|
||
created () {},
|
||
mounted () {
|
||
this.chartInit()
|
||
},
|
||
beforeDestroy () { },
|
||
methods: {
|
||
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
||
const bodyBackgroundColor = {
|
||
light: '#ffffff',
|
||
dark: 'transparent'
|
||
}
|
||
const initColor = this.customTheme === 'light' ? '#000000' : '#ffffff'
|
||
const style = {
|
||
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
|
||
},
|
||
|
||
rowStyle ({ row, rowIndex }) {
|
||
if (rowIndex % 2) {
|
||
return {
|
||
backgroundColor: this.config.customize.evenRowBackgroundColor
|
||
}
|
||
} else {
|
||
return {
|
||
backgroundColor: this.config.customize.oddRowBackgroundColor
|
||
}
|
||
}
|
||
},
|
||
// 表格点击事件
|
||
rowClick (row) {
|
||
this.linkage(row)
|
||
},
|
||
changeStyle (config) {
|
||
config = { ...this.config, ...config }
|
||
// 样式改变时更新主题配置
|
||
config.theme = settingToTheme(cloneDeep(config), this.customTheme)
|
||
this.changeChartConfig(config)
|
||
if (config.code === this.activeCode) {
|
||
this.changeActiveItemConfig(config)
|
||
}
|
||
return config
|
||
},
|
||
dataFormatting (config, data) {
|
||
config.option.tableData =
|
||
data?.data && data.data.length > 0 ? data.data : []
|
||
const filteredData = {}
|
||
const columnData = data?.columnData || {}
|
||
const dimensionFieldList = config.dataSource.dimensionFieldList || []
|
||
if (
|
||
config.dataSource.dimensionFieldList &&
|
||
config.dataSource.dimensionFieldList.length > 0
|
||
) {
|
||
// 根据config.dataSource.dimensionFieldList 数据的顺序将表格列顺序调整，使其初始化的时候，顺序和组件配置面板中的一致
|
||
const sortedColumnData = {}
|
||
dimensionFieldList.forEach((item, index) => {
|
||
sortedColumnData[item] = columnData[item]
|
||
})
|
||
Object?.keys(sortedColumnData).forEach((key) => {
|
||
if (
|
||
config.dataSource.dimensionFieldList.includes(
|
||
sortedColumnData[key]?.alias
|
||
)
|
||
) {
|
||
filteredData[key] = sortedColumnData[key]
|
||
}
|
||
})
|
||
config.option.columnData = filteredData
|
||
} else {
|
||
config.option.columnData = columnData
|
||
}
|
||
this.columnData = cloneDeep(config.option.columnData)
|
||
this.updateKey = new Date().getTime()
|
||
return config
|
||
},
|
||
// 将样式字符串转成对象, 用于自定义主题，表格头部样式
|
||
headerCellStyleToObj () {
|
||
const str = this.themeJson.themeCss
|
||
// 匹配包含header-cell-style的样式字符串
|
||
// 匹配包含header-cell-style的样式字符串
|
||
const regex = /\.header-cell-style\{([^{}]+)\}/
|
||
const match = str.match(regex)
|
||
if (match) {
|
||
// 将样式字符串转成对象
|
||
const styleStr = match[1].trim().replace(/\s*;\s*$/, '') // 去掉末尾的空格和分号
|
||
// const styleObj = {};
|
||
styleStr.split(';').forEach((s) => {
|
||
const [key, value] = s.split(':')
|
||
if (key && value) {
|
||
// 判断是否为空字符串
|
||
this.headerCellStyleObj[key.trim()] = value.trim()
|
||
}
|
||
})
|
||
} else {
|
||
this.headerCellStyleObj = {}
|
||
}
|
||
},
|
||
// 将样式字符串转成对象, 用于自定义主题，表格主体样式
|
||
cellStyleToObj () {
|
||
const str = this.themeJson.themeCss
|
||
// 匹配包含header-cell-style的样式字符串
|
||
// 匹配包含header-cell-style的样式字符串
|
||
const regex = /\.cell-style\{([^{}]+)\}/
|
||
const match = str.match(regex)
|
||
|
||
if (match) {
|
||
// 将样式字符串转成对象
|
||
const styleStr = match[1].trim().replace(/\s*;\s*$/, '') // 去掉末尾的空格和分号
|
||
styleStr.split(';').forEach((s) => {
|
||
const [key, value] = s.split(':')
|
||
if (key && value) {
|
||
// 判断是否为空字符串
|
||
this.cellStyleObj[key.trim()] = value.trim()
|
||
}
|
||
})
|
||
} else {
|
||
this.cellStyleObj = {}
|
||
}
|
||
},
|
||
getLabel (data) {
|
||
return data.remark || data.originalColumn
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.bs-design-wrap {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: transparent;
|
||
border-radius: 4px;
|
||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
::v-deep .el-table {
|
||
// height: 100%;
|
||
background-color: transparent;
|
||
}
|
||
::v-deep .el-table tr {
|
||
background-color: transparent;
|
||
}
|
||
|
||
// ::v-deep .el-table th.gutter {
|
||
// border-bottom: 2px solid var(--bs-el-color-primary) !important;
|
||
// }
|
||
::v-deep .el-table__body {
|
||
height: 100%;
|
||
}
|
||
|
||
::v-deep .el-table .el-table__header tr {
|
||
background-color: transparent;
|
||
}
|
||
|
||
::v-deep tr.el-table__row--striped {
|
||
z-index: 1;
|
||
/*将容器的 z-index 设为 1，以便其在蒙版之上*/
|
||
position: relative;
|
||
/*设置容器为相对定位*/
|
||
opacity: 0.9;
|
||
}
|
||
|
||
::v-deep tr.el-table__row--striped::before {
|
||
position: absolute;
|
||
/*设置蒙版为绝对定位*/
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
/*设置半透明的灰色背景色*/
|
||
z-index: 2;
|
||
/*将蒙版的 z-index 设为 2，以便其覆盖在容器之上*/
|
||
}
|
||
|
||
::v-deep .overlay {
|
||
position: absolute;
|
||
/*设置蒙版为绝对定位*/
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||
/*设置半透明的灰色背景色*/
|
||
z-index: 2;
|
||
/*将蒙版的 z-index 设为 2，以便其覆盖在容器之上*/
|
||
}
|
||
|
||
::v-deep .cell.el-tooltip {
|
||
z-index: 3;
|
||
min-width: 50px;
|
||
white-space: nowrap;
|
||
position: inherit;
|
||
}
|
||
|
||
::v-deep .el-table {
|
||
.el-table__cell {
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
&:before {
|
||
display: none !important;
|
||
}
|
||
|
||
th.gutter,
|
||
colgroup.gutter {
|
||
width: 0px !important; //此处的宽度值，对应你自定义滚动条的宽度即可
|
||
}
|
||
}
|
||
|
||
// 关键css代码
|
||
::v-deep .el-table__header colgroup col[name="gutter"] {
|
||
display: table-cell !important;
|
||
}
|
||
|
||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||
width: 10px; // 横向滚动条
|
||
height: 10px; // 纵向滚动条 必写
|
||
background-color: transparent;
|
||
}
|
||
|
||
// 滚动条的滑块
|
||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||
background-color: #9093994d;
|
||
border-radius: 5px;
|
||
|
||
&:hover {
|
||
background-color: #90939980;
|
||
}
|
||
}
|
||
</style>
|