VTable icon indicating copy to clipboard operation
VTable copied to clipboard

[Bug] ganttInstance.setRecords后,甘特图起止时间异常

Open MR-Robot-Lee opened this issue 2 months ago • 2 comments

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

  1. 添加任务后,能自动更新树形表格上层的起止时间;(如有其他方法能达到此目的,烦请告知)
  2. 甘特图重新setRecords后,所有任务条的起止日期能正常显示

Environment

- OS: WIN10
- Browser: Edge最新版、Chrome最新版
- Framework: 无

Any additional comments?

No response

MR-Robot-Lee avatar Oct 30 '25 09:10 MR-Robot-Lee

可以把复现问题的完整option贴出来

fangsmile avatar Oct 31 '25 01:10 fangsmile

可以把复现问题的完整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);

MR-Robot-Lee avatar Oct 31 '25 01:10 MR-Robot-Lee