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

refactor(图表): 明细表合并单元格和行列冻结互斥

Browse Source
This commit is contained in:
wisonic 2024-11-06 15:17:36 +08:00
parent 5d3ca89ca5
commit 0a6cf7ed13
2 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
View File

@ -4,6 +4,7 @@ import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
import { computed, onMounted, PropType, reactive, watch } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_PANEL, DEFAULT_TABLE_CELL } from '@/views/chart/components/editor/util/chart'
@ -321,6 +322,7 @@ onMounted(() => {
<el-checkbox
size="small"
:effect="themes"
:disabled="state.tableCellForm.mergeCells"
v-model="state.tableCellForm.tableFreeze"
@change="changeTableCell('tableFreeze')"
>
@ -339,7 +341,7 @@ onMounted(() => {
:effect="themes"
controls-position="right"
v-model="state.tableCellForm.tableColumnFreezeHead"
:disabled="!state.tableCellForm.tableFreeze"
:disabled="!state.tableCellForm.tableFreeze || state.tableCellForm.mergeCells"
:min="0"
:max="100"
@change="changeTableCell('tableColumnFreezeHead')"
@ -357,7 +359,7 @@ onMounted(() => {
:effect="themes"
controls-position="right"
v-model="state.tableCellForm.tableRowFreezeHead"
:disabled="!state.tableCellForm.tableFreeze"
:disabled="!state.tableCellForm.tableFreeze || state.tableCellForm.mergeCells"
:min="0"
:max="100"
@change="changeTableCell('tableRowFreezeHead')"
@ -376,7 +378,17 @@ onMounted(() => {
v-model="state.tableCellForm.mergeCells"
@change="changeTableCell('mergeCells')"
>
{{ t('chart.merge_cells') }}
<span class="data-area-label">
<span style="margin-right: 4px">{{ t('chart.merge_cells') }}</span>
<el-tooltip class="item" effect="dark" placement="bottom">
<template #content>
<div>合并单元格后行列冻结会失效</div>
</template>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
</span>
</el-checkbox>
</el-form-item>
<el-form-item
@ -482,4 +494,12 @@ onMounted(() => {
.mobile-style {
margin-top: 25px;
}
.data-area-label {
text-align: left;
position: relative;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
</style>

6
core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
View File

@ -1430,12 +1430,14 @@ export function configMergeCells(chart: Chart, options: S2Options, dataConfig: S
const { mergeCells } = parseJson(chart.customAttr).tableCell
const { showIndex } = parseJson(chart.customAttr).tableHeader
if (mergeCells) {
options.frozenColCount = 0
options.frozenRowCount = 0
const fields = chart.data.fields || []
const fielsMap = fields.reduce((p, n) => {
const fieldsMap = fields.reduce((p, n) => {
p[n.dataeaseName] = n
return p
}, {}) || {}
const quotaIndex = dataConfig.meta.findIndex(m => fielsMap[m.field].groupType === 'q')
const quotaIndex = dataConfig.meta.findIndex(m => fieldsMap[m.field].groupType === 'q')
const data = chart.data?.tableRow
if (quotaIndex === 0 || !data?.length) {
return