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

fix(图表): 表格自适应列宽拖拽宽度后未铺满

Browse Source
This commit is contained in:
wisonic 2024-10-12 20:21:30 +08:00
parent 6f6365e032
commit eec7f92b86
2 changed files with 48 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts
View File

@ -207,28 +207,24 @@ export class TableInfo extends S2ChartView<TableSheet> {
newChart.store.set('lastLayoutResult', newChart.facet.layoutResult)
})
newChart.on(S2Event.LAYOUT_AFTER_HEADER_LAYOUT, (ev: LayoutResult) => {
const status = newChart.store.get('status')
if (status === 'default') {
return
}
const lastLayoutResult = newChart.store.get('lastLayoutResult') as LayoutResult
if (status === 'expanded' && lastLayoutResult) {
// 拖拽表头定义宽度，和上一次布局对比，保留除已拖拽列之外的宽度
if (lastLayoutResult) {
// 拖动表头 resize
const widthByFieldValue = newChart.options.style?.colCfg?.widthByFieldValue
const lastLayoutWidthMap: Record<string, number> = lastLayoutResult?.colLeafNodes.reduce(
(p, n) => {
const lastLayoutWidthMap: Record<string, number> =
lastLayoutResult?.colLeafNodes.reduce((p, n) => {
p[n.value] = widthByFieldValue?.[n.value] ?? n.width
return p
},
{}
)
}, {}) || {}
const totalWidth = ev.colLeafNodes.reduce((p, n) => {
n.width = lastLayoutWidthMap[n.value]
n.width = lastLayoutWidthMap[n.value] || n.width
n.x = p
return p + n.width
}, 0)
ev.colsHierarchy.width = totalWidth
} else {
newChart.store.set('lastLayoutResult', undefined)
return
}
// 第一次渲染初始化，把图片字段固定为 120 进行计算
const urlFields = fields.filter(field => field.deType === 7).map(f => f.dataeaseName)
const totalWidthWithImg = ev.colLeafNodes.reduce((p, n) => {
@ -236,7 +232,6 @@ export class TableInfo extends S2ChartView<TableSheet> {
}, 0)
if (containerDom.offsetWidth <= totalWidthWithImg) {
// 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，不处理
newChart.store.set('status', 'default')
return
}
// 图片字段固定 120, 剩余宽度按比例均摊到其他字段进行扩大
@ -251,8 +246,6 @@ export class TableInfo extends S2ChartView<TableSheet> {
return p + n.width
}, 0)
ev.colsHierarchy.width = Math.min(containerDom.offsetWidth, totalWidth)
newChart.store.set('status', 'expanded')
}
})
}
// click

25
core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts
View File

@ -228,32 +228,27 @@ export class TableNormal extends S2ChartView<TableSheet> {
newChart.store.set('lastLayoutResult', newChart.facet.layoutResult)
})
newChart.on(S2Event.LAYOUT_AFTER_HEADER_LAYOUT, (ev: LayoutResult) => {
const status = newChart.store.get('status')
if (status === 'default') {
return
}
const lastLayoutResult = newChart.store.get('lastLayoutResult') as LayoutResult
if (status === 'expanded' && lastLayoutResult) {
// 拖拽表头定义宽度，和上一次布局对比，保留除已拖拽列之外的宽度
if (lastLayoutResult) {
// 拖动表头 resize
const widthByFieldValue = newChart.options.style?.colCfg?.widthByFieldValue
const lastLayoutWidthMap: Record<string, number> = lastLayoutResult?.colLeafNodes.reduce(
(p, n) => {
const lastLayoutWidthMap: Record<string, number> =
lastLayoutResult?.colLeafNodes.reduce((p, n) => {
p[n.value] = widthByFieldValue?.[n.value] ?? n.width
return p
},
{}
)
}, {}) || {}
const totalWidth = ev.colLeafNodes.reduce((p, n) => {
n.width = lastLayoutWidthMap[n.value]
n.width = lastLayoutWidthMap[n.value] || n.width
n.x = p
return p + n.width
}, 0)
ev.colsHierarchy.width = totalWidth
} else {
newChart.store.set('lastLayoutResult', undefined)
return
}
const scale = containerDom.offsetWidth / ev.colsHierarchy.width
if (scale <= 1) {
// 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，不处理
newChart.store.set('status', 'default')
return
}
const totalWidth = ev.colLeafNodes.reduce((p, n) => {
@ -262,8 +257,6 @@ export class TableNormal extends S2ChartView<TableSheet> {
return p + n.width
}, 0)
ev.colsHierarchy.width = Math.min(containerDom.offsetWidth, totalWidth)
newChart.store.set('status', 'expanded')
}
})
}
// click