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

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

@ -207,52 +207,45 @@ 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 {
// 第一次渲染初始化，把图片字段固定为 120 进行计算
const urlFields = fields.filter(field => field.deType === 7).map(f => f.dataeaseName)
const totalWidthWithImg = ev.colLeafNodes.reduce((p, n) => {
return p + (urlFields.includes(n.field) ? 120 : n.width)
}, 0)
if (containerDom.offsetWidth <= totalWidthWithImg) {
// 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，不处理
newChart.store.set('status', 'default')
return
}
// 图片字段固定 120, 剩余宽度按比例均摊到其他字段进行扩大
const totalWidthWithoutImg = ev.colLeafNodes.reduce((p, n) => {
return p + (urlFields.includes(n.field) ? 0 : n.width)
}, 0)
const restWidth = containerDom.offsetWidth - urlFields.length * 120
const scale = restWidth / totalWidthWithoutImg
const totalWidth = ev.colLeafNodes.reduce((p, n) => {
n.width = urlFields.includes(n.field) ? 120 : n.width * scale
n.x = p
return p + n.width
}, 0)
ev.colsHierarchy.width = Math.min(containerDom.offsetWidth, totalWidth)
newChart.store.set('status', 'expanded')
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) => {
return p + (urlFields.includes(n.field) ? 120 : n.width)
}, 0)
if (containerDom.offsetWidth <= totalWidthWithImg) {
// 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，不处理
return
}
// 图片字段固定 120, 剩余宽度按比例均摊到其他字段进行扩大
const totalWidthWithoutImg = ev.colLeafNodes.reduce((p, n) => {
return p + (urlFields.includes(n.field) ? 0 : n.width)
}, 0)
const restWidth = containerDom.offsetWidth - urlFields.length * 120
const scale = restWidth / totalWidthWithoutImg
const totalWidth = ev.colLeafNodes.reduce((p, n) => {
n.width = urlFields.includes(n.field) ? 120 : n.width * scale
n.x = p
return p + n.width
}, 0)
ev.colsHierarchy.width = Math.min(containerDom.offsetWidth, totalWidth)
})
}
// click

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

@ -228,42 +228,35 @@ 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 {
const scale = containerDom.offsetWidth / ev.colsHierarchy.width
if (scale <= 1) {
// 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，不处理
newChart.store.set('status', 'default')
return
}
const totalWidth = ev.colLeafNodes.reduce((p, n) => {
n.width = n.width * scale
n.x = p
return p + n.width
}, 0)
ev.colsHierarchy.width = Math.min(containerDom.offsetWidth, totalWidth)
newChart.store.set('status', 'expanded')
newChart.store.set('lastLayoutResult', undefined)
return
}
const scale = containerDom.offsetWidth / ev.colsHierarchy.width
if (scale <= 1) {
// 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，不处理
return
}
const totalWidth = ev.colLeafNodes.reduce((p, n) => {
n.width = n.width * scale
n.x = p
return p + n.width
}, 0)
ev.colsHierarchy.width = Math.min(containerDom.offsetWidth, totalWidth)
})
}
// click