diff --git a/packages/vtable-gantt/examples/gantt/gantt-default-minDate-maxDate.ts b/packages/vtable-gantt/examples/gantt/gantt-default-minDate-maxDate.ts new file mode 100644 index 0000000000..4ebf5bb54a --- /dev/null +++ b/packages/vtable-gantt/examples/gantt/gantt-default-minDate-maxDate.ts @@ -0,0 +1,335 @@ +import type { ColumnsDefine } from '@visactor/vtable'; +import type { GanttConstructorOptions, TYPES } from '../../src/index'; +import { Gantt, VRender } from '../../src/index'; +import { bindDebugTool } from '../../../vtable/src/scenegraph/debug-tool'; +const CONTAINER_ID = 'vTable'; +export function createTable() { + const records = [ + { + id: 1, + title: 'Software Development', + developer: 'liufangfang.jane@bytedance.com', + progress: 31, + priority: 'P0' + }, + { + id: 2, + title: 'Scope', + developer: 'liufangfang.jane@bytedance.com', + progress: 60, + priority: 'P0' + }, + { + id: 3, + title: 'Determine project scope', + developer: 'liufangfang.jane@bytedance.com', + progress: 100, + priority: 'P1' + }, + { + id: 1, + title: 'Software Development', + developer: 'liufangfang.jane@bytedance.com', + progress: 90, + priority: 'P0' + }, + { + id: 2, + title: 'Scope', + developer: 'liufangfang.jane@bytedance.com', + start: '07/14/2024', + end: '07/24/2024', + progress: 60, + priority: 'P0' + }, + { + id: 3, + title: 'Determine project scope', + developer: 'liufangfang.jane@bytedance.com', + start: '2024-07-10', + end: '2024-07-14', + progress: 100, + priority: 'P1' + }, + { + id: 1, + title: 'Software Development', + developer: 'liufangfang.jane@bytedance.com', + start: '2024-07-24', + end: '2024-08-04', + progress: 31, + priority: 'P0' + }, + { + id: 2, + title: 'Scope', + developer: 'liufangfang.jane@bytedance.com', + start: '2024.07.06', + end: '2024.07.08', + progress: 60, + priority: 'P0' + }, + { + id: 3, + title: 'Determine project scope', + developer: 'liufangfang.jane@bytedance.com', + start: '2024/07/09', + end: '2024/07/11', + progress: 100, + priority: 'P1' + }, + { + id: 1, + title: 'Software Development', + developer: 'liufangfang.jane@bytedance.com', + start: '07.24.2024', + end: '08.04.2024', + progress: 31, + priority: 'P0' + } + ]; + + const columns = [ + // { + // field: 'id', + // title: 'ID', + // width: 80, + // sort: true + // }, + { + field: 'title', + title: 'title', + width: 200, + sort: true + }, + { + field: 'start', + title: 'start', + width: 150, + sort: true + }, + { + field: 'end', + title: 'end', + width: 150, + sort: true + }, + { + field: 'priority', + title: 'priority', + width: 100, + sort: true + }, + + { + field: 'progress', + title: 'progress', + width: 200, + sort: true + } + ]; + const option: GanttConstructorOptions = { + records, + taskListTable: { + columns: columns, + tableWidth: 400, + minTableWidth: 100, + maxTableWidth: 600 + }, + resizeLineStyle: { + lineColor: 'green', + lineWidth: 3 + }, + + frame: { + verticalSplitLineMoveable: true, + outerFrameStyle: { + borderLineWidth: 2, + borderColor: 'red', + cornerRadius: 8 + }, + verticalSplitLine: { + lineWidth: 3, + lineColor: '#e1e4e8' + }, + verticalSplitLineHighlight: { + lineColor: 'green', + lineWidth: 3 + } + }, + grid: { + // backgroundColor: 'gray', + verticalLine: { + lineWidth: 1, + lineColor: '#e1e4e8' + }, + horizontalLine: { + lineWidth: 1, + lineColor: '#e1e4e8' + } + }, + defaultHeaderRowHeight: 60, + defaultRowHeight: 40, + timelineHeader: { + verticalLine: { + lineWidth: 1, + lineColor: '#e1e4e8' + }, + horizontalLine: { + lineWidth: 1, + lineColor: '#e1e4e8' + }, + backgroundColor: '#EEF1F5', + colWidth: 60, + scales: [ + { + unit: 'week', + step: 1, + startOfWeek: 'sunday', + format(date) { + return `Week ${date.dateIndex}`; + }, + style: { + fontSize: 20, + fontWeight: 'bold', + color: 'red', + backgroundColor: '#EEF1F5' + } + }, + { + unit: 'day', + step: 1, + format(date) { + return date.dateIndex.toString(); + }, + style: { + fontSize: 20, + fontWeight: 'bold', + color: 'red', + backgroundColor: '#EEF1F5' + } + } + ] + }, + // maxDate: '2024-06-01', + // minDate: '2024-06-01', + maxDate: '2024-10-15', + + taskBar: { + startDateField: 'start', + endDateField: 'end' + }, + markLine: [ + { + date: '2024-10-06', + content: '我的啊啊得的', + contentStyle: { + color: '#fff' + // fontSize: 40 + }, + style: { + lineWidth: 1, + lineColor: 'red' + } + } + ], + scrollStyle: { + visible: 'scrolling' + }, + overscrollBehavior: 'none', + markLineCreateOptions: { + markLineCreatable: true, + markLineCreationHoverToolTip: { + position: 'top', + tipContent: '创建里程碑', + style: { + contentStyle: { + fill: '#fff' + }, + panelStyle: { + background: '#14161c', + cornerRadius: 4 + } + } + }, + markLineCreationStyle: { + fill: '#ccc', + size: 30, + iconSize: 12, + svg: '' + } + } + }; + + const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID)!, option); + window.ganttInstance = ganttInstance; + ganttInstance.on('click_markline_create', ({ data, position }) => { + createPopup({ date: data.startDate, content: '' }, position, value => { + ganttInstance.addMarkLine({ + date: formatDate(data.startDate), + content: value, + contentStyle: { + color: '#fff' + }, + style: { + lineWidth: 1, + lineColor: 'red' + } + }); + }); + }); + ganttInstance.on('click_markline_content', ({ data, position }) => { + createPopup({ date: data.date, content: data.content }, position, value => { + ganttInstance.updateCurrentMarkLine({ date: data.date, content: value }); + }); + }); + // bindDebugTool(ganttInstance.scenegraph.stage as any, { + // customGrapicKeys: ['role', '_updateTag'] + // }); +} + +function formatDate(date) { + const year = date.getFullYear(); + const month = ('0' + (date.getMonth() + 1)).slice(-2); // 补零技巧 + const day = ('0' + date.getDate()).slice(-2); + return year + '-' + month + '-' + day; +} + +function createPopup({ date, content }, position, callback) { + const container = document.getElementById('article'); + + // 创建弹窗元素 + const popup = document.createElement('div'); + popup.className = 'popup'; + + // 设置定位参数 + popup.style.top = `${position.top}px`; + popup.style.left = `${position.left}px`; + popup.style.position = 'absolute'; + popup.style.background = '#ccc'; + popup.style.padding = '10px'; + popup.style.zIndex = '10000'; + + // 日期显示格式化 + const dateString = typeof date === 'string' ? date : formatDate(date); + + // 弹窗内容 + popup.innerHTML = ` + × +
日期：${dateString}
+ + + `; + + const confirmBtn = popup.querySelector('.confirm-btn')!; + confirmBtn.addEventListener('click', () => { + const inputValue = popup.querySelector('.popup-input')!.value; + popup.remove(); + if (typeof callback === 'function') { + callback(inputValue); + } + }); + + // 添加弹窗到容器 + container!.appendChild(popup); +} diff --git a/packages/vtable-gantt/examples/menu.ts b/packages/vtable-gantt/examples/menu.ts index e54d40215b..20031acb04 100644 --- a/packages/vtable-gantt/examples/menu.ts +++ b/packages/vtable-gantt/examples/menu.ts @@ -38,6 +38,10 @@ export const menus = [ path: 'gantt', name: 'gantt-month' }, + { + path: 'gantt', + name: 'gantt-default-minDate-maxDate' + }, { path: 'gantt', name: 'gantt-createButton' diff --git a/packages/vtable-gantt/src/data/DataSource.ts b/packages/vtable-gantt/src/data/DataSource.ts index 06ad8ca99d..7db60c22d5 100644 --- a/packages/vtable-gantt/src/data/DataSource.ts +++ b/packages/vtable-gantt/src/data/DataSource.ts @@ -60,6 +60,18 @@ export class DataSource { this._gantt.parsedOptions.minDate = getStartDateByTimeUnit(new Date(minDate), minTimeUnit, startOfWeek); this._gantt.parsedOptions._minDateTime = this._gantt.parsedOptions.minDate.getTime(); } + + // 提供了最大值，没有提供最小值，因为最大值依赖最小值，所以应该重新计算 + if (needMinDate && !needMaxDate) { + this._gantt.parsedOptions.maxDate = getEndDateByTimeUnit( + this._gantt.parsedOptions.minDate, + new Date(this._gantt.options.maxDate), + minTimeUnit, + step + ); + this._gantt.parsedOptions._maxDateTime = this._gantt.parsedOptions.maxDate.getTime(); + } + if (needMaxDate) { this._gantt.parsedOptions.maxDate = getEndDateByTimeUnit( this._gantt.parsedOptions.minDate, diff --git a/packages/vtable-gantt/src/gantt-helper.ts b/packages/vtable-gantt/src/gantt-helper.ts index b5f32eade7..8677e06101 100644 --- a/packages/vtable-gantt/src/gantt-helper.ts +++ b/packages/vtable-gantt/src/gantt-helper.ts @@ -139,9 +139,13 @@ export function initOptions(gantt: Gantt) { gantt.parsedOptions.minDate = options?.minDate ? getStartDateByTimeUnit(new Date(options.minDate), minTimeUnit, startOfWeek) : undefined; - gantt.parsedOptions.maxDate = options?.maxDate - ? getEndDateByTimeUnit(gantt.parsedOptions.minDate, new Date(options.maxDate), minTimeUnit, step) - : undefined; + + // processRecords函数中，重新计算了是否缺失minDate，maxDate 的情况 + gantt.parsedOptions.maxDate = + options?.maxDate && gantt.parsedOptions?.minDate + ? getEndDateByTimeUnit(gantt.parsedOptions?.minDate, new Date(options.maxDate), minTimeUnit, step) + : undefined; + gantt.parsedOptions._minDateTime = gantt.parsedOptions.minDate?.getTime(); gantt.parsedOptions._maxDateTime = gantt.parsedOptions.maxDate?.getTime(); gantt.parsedOptions.overscrollBehavior = options?.overscrollBehavior ?? 'auto';