VTable
VTable copied to clipboard
[Bug] ganttInstance.setRecords后,甘特图起止时间异常
Version
1.22.2
Link to Minimal Reproduction
参照下面的示意图
Steps to Reproduce
tableInstance.addRecord(records, recordIndex); ganttInstance.setRecords(tableInstance.records);
Current Behavior
甘特图添加任务(task)后,树形表格的上级未更新起止时间,甘特图的任务条也无法突破初始化时的最小时间和最大时间区间,详见下图
https://osstest.azhu.co/upload/10094/20251030/p_1761814644091f82862c4-728f-42ef-86aa-6d79eb467946.png

Expected Behavior
- 添加任务后,能自动更新树形表格上层的起止时间;(如有其他方法能达到此目的,烦请告知)
- 甘特图重新setRecords后,所有任务条的起止日期能正常显示
Environment
- OS: WIN10
- Browser: Edge最新版、Chrome最新版
- Framework: 无
Any additional comments?
No response
可以把复现问题的完整option贴出来
可以把复现问题的完整option贴出来
感谢回复,如果还需要其他信息,我随时在线。
const option = {
overscrollBehavior: 'none',
records: records,
taskListTable: {
hierarchyExpandLevel: 5,
menu:{
contextMenuItems: (field, row, col, table) => {
const record = table.getRecordByCell(col, row);
console.log('contextMenuItems record: ', record);
return generateDropDownMenu(record);
}
},
tooltip: {
isShowOverflowTextTooltip: true
},
keyboardOptions: {
copySelected: true,
cutSelected: true,
showCopyCellBorder: true,
pasteValueToCell: true,
ctrlMultiSelect: true
},
columns,
tableWidth: 'auto',
minTableWidth: 100,
theme: {
headerStyle: {
fontSize: 12,
}
}
},
frame: {
outerFrameStyle: {
borderLineWidth: 1,
borderColor: '#e1e4e8',
cornerRadius: 0
},
verticalSplitLine: {
lineColor: '#e1e4e8',
lineWidth: 3
},
horizontalSplitLine: {
lineColor: '#e1e4e8',
lineWidth: 1
},
verticalSplitLineMoveable: true,
verticalSplitLineHighlight: {
lineColor: '#00cb62',
lineWidth: 3
}
},
grid: {
weekendBackgroundColor: '#f8f7f9',
horizontalLine: {
lineWidth: 1,
lineColor: '#e1e4e8'
},
verticalLine: {
lineWidth: 1,
lineColor: '#e1e4e8'
},
},
headerRowHeight: 40,
rowHeight: 40,
taskBar: {
startDateField: 'planBeginStr',
endDateField: 'planEndStr',
progressField: 'completePer',
resizable: true,
moveable: true,
hoverBarStyle: {
barOverlayColor: 'rgba(99, 144, 0, 0.4)'
},
labelText: '{step_name} {completePer}%',
labelTextStyle: {
color: '#fff',
fontSize: 12,
textAlign: 'left',
textOverflow: 'visible',
orientHandleWithOverflow: 'right',
},
barStyle: {
barColor: '#00cb62',
completedBarColor: '#009441',
cornerRadius: 4,
},
projectStyle: {
barColor: '#537cfa',
completedBarColor: '#476ad5',
},
},
timelineHeader: {
colWidth: 60,
backgroundColor: '#EEF1F5',
horizontalLine: {
lineWidth: 1,
lineColor: '#e1e4e8'
},
verticalLine: {
lineWidth: 1,
lineColor: '#e1e4e8'
},
scales: [
{
unit: 'month',
step: 1,
format: date => date.dateIndex,
style: {
fontSize: 12,
textAlign: 'right',
textStick: true
}
},
{
unit: 'day',
step: 1,
format: date => date.dateIndex,
style: {
fontSize: 12,
textAlign: 'right',
}
}
],
},
markLine: [
{
content: '项目开始',
contentStyle: {
color: '#fff'
},
date: '2024/07/18',
scrollToMarkLine: true,
position: 'left',
style: {
lineColor: '#00cb62',
lineWidth: 2
}
},
{
content: '今天',
contentStyle: {
color: '#fff'
},
date: '2024/8/02',
scrollToMarkLine: true,
position: 'right',
style: {
lineColor: '#fca104',
lineWidth: 2
}
}
],
rowSeriesNumber: {
title: '序号',
dragOrder: true,
headerStyle: {
bgColor: '#EEF1F5',
borderColor: '#e1e4e8'
},
style: {
borderColor: '#e1e4e8'
}
},
scrollStyle: {
scrollRailColor: 'RGBA(246,246,246,0.5)',
visible: 'scrolling',
width: 10,
scrollSliderCornerRadius: 2,
},
markLineCreateOptions: {
markLineCreatable: true,
markLineCreationHoverToolTip: {
position: 'top',
tipContent: '创建里程碑',
style: {
contentStyle: {
fill: '#fff'
},
panelStyle: {
background: '#14161c',
cornerRadius: 4
}
}
},
markLineCreationStyle: {
fill: '#ccc',
size: 30,
iconSize: 12,
svg: '<svg t="1741145302032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2861" width="200" height="200"><path d="M967.68 558.08v-89.6H542.72V43.52h-87.04v424.96H30.72v89.6h424.96v422.4h87.04V558.08z" fill="" p-id="2862"></path></svg>'
}
},
};
const ganttInstance = new VTableGantt.Gantt(document.getElementById('gantt'), option);
const tableInstance = ganttInstance.taskListTableInstance;
tableInstance.addRecord(records, recordIndex);
/* 添加新数据后,结合新数据的日期,计算出所有日期中的最小、最大值,调用此方法更新甘特图展示的日期范围,
加上这一行代码,右侧的甘特图的日期视图就可以正常展示新的起止日期。不加的话,右侧甘特图的视图就会出问题。
期望可以不用加这一行,通过ganttInstance.setRecords就可以自动更新。*/
ganttInstance.updateDateRange(minDate, maxDate);
ganttInstance.setRecords(tableInstance.records);