vxe-gantt 3.0.27 → 3.1.1

package/es/gantt/src/gantt-chart.js

@@ -43,7 +43,7 @@ export default defineVxeComponent({
             const progressField = $xeGantt.computeProgressField;
             const taskBarOpts = $xeGantt.computeTaskBarOpts;
             const barParams = { $gantt: $xeGantt, row };
-            const { showProgress, showContent, contentMethod, barStyle, drag } = taskBarOpts;
+            const { showProgress, showContent, contentMethod, barStyle, drag, showTooltip } = taskBarOpts;
             const isBarRowStyle = XEUtils.isFunction(barStyle);
             const barStyObj = (barStyle ? (isBarRowStyle ? barStyle(barParams) : barStyle) : {}) || {};
             const { round } = barStyObj;
@@ -69,7 +69,28 @@ export default defineVxeComponent({
             if (contentMethod) {
                 title = getStringValue(contentMethod({ row, title }));
             }
-            const ctParams = { source: sourceType, type: viewType, row, $rowIndex, rowIndex, _rowIndex };
+            const ctParams = { source: sourceType, type: viewType, row, $rowIndex, rowIndex, _rowIndex, $gantt: $xeGantt };
+            const ons = {
+                click(evnt) {
+                    $xeGantt.handleTaskBarClickEvent(evnt, barParams);
+                },
+                dblclick(evnt) {
+                    $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
+                },
+                mousedown(evnt) {
+                    if ($xeGantt.handleTaskBarMousedownEvent) {
+                        $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
+                    }
+                }
+            };
+            if (showTooltip) {
+                ons.mouseover = (evnt) => {
+                    $xeGantt.triggerTaskBarTooltipEvent(evnt, Object.assign({ $event: evnt }, ctParams));
+                };
+                ons.mouseleave = (evnt) => {
+                    $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, Object.assign({ $event: evnt }, ctParams));
+                };
+            }
             return h('div', {
                 key: treeConfig ? rowid : $rowIndex,
                 attrs: {
@@ -95,19 +116,7 @@ export default defineVxeComponent({
                     attrs: {
                         rowid
                     },
-                    on: {
-                        click(evnt) {
-                            $xeGantt.handleTaskBarClickEvent(evnt, barParams);
-                        },
-                        dblclick(evnt) {
-                            $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
-                        },
-                        mousedown(evnt) {
-                            if ($xeGantt.handleTaskBarMousedownEvent) {
-                                $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
-                            }
-                        }
-                    }
+                    on: ons
                 }, taskBarSlot
                     ? $xeGantt.callSlot(taskBarSlot, barParams, h)
                     : [

package/es/gantt/src/gantt-header.js

@@ -57,20 +57,29 @@ export default defineVxeComponent({
                             });
                         })),
                         h('thead', {}, headerGroups.map(({ scaleItem, columns }, $rowIndex) => {
-                            const { type, titleMethod, headerCellStyle, slots } = scaleItem;
+                            const { type, titleFormat, titleMethod, headerCellStyle, slots } = scaleItem;
                             const titleSlot = slots ? slots.title : null;
-                            const todayValue = showNowLine && $rowIndex === headerGroups.length - 1 ? todayDateMaps[type] : null;
+                            const isLast = $rowIndex === headerGroups.length - 1;
+                            const todayValue = isLast && showNowLine ? todayDateMaps[type] : null;
                             return h('tr', {
                                 key: $rowIndex
                             }, columns.map((column, cIndex) => {
                                 const { field, childCount, dateObj } = column;
                                 let label = `${column.title}`;
-                                if ($rowIndex < headerGroups.length - 1) {
-                                    if (scaleItem.type === 'day') {
-                                        label = getI18n(`vxe.gantt.dayss.w${dateObj.e}`);
+                                if (scaleItem.type === 'day') {
+                                    label = getI18n(`vxe.gantt.dayss.w${dateObj.e}`);
+                                }
+                                else {
+                                    if ($rowIndex) {
+                                        label = getI18n(`vxe.gantt.tSimpleFormat.${type}`, dateObj);
                                     }
                                     else {
-                                        label = getI18n(`vxe.gantt.${!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat'}.${type}`, dateObj);
+                                        if (isLast && scaleItem.type === 'week') {
+                                            label = getI18n(`vxe.gantt.tSimpleFormat.${type}`, dateObj);
+                                        }
+                                        else {
+                                            label = getI18n(`vxe.gantt.tFullFormat.${type}`, dateObj);
+                                        }
                                     }
                                 }
                                 let cellVNs = label;
@@ -81,6 +90,9 @@ export default defineVxeComponent({
                                 else if (titleMethod) {
                                     cellVNs = `${titleMethod(ctParams)}`;
                                 }
+                                else if (titleFormat) {
+                                    cellVNs = XEUtils.toDateString(dateObj.date, titleFormat);
+                                }
                                 let cellStys = {};
                                 if (headerCellStyle) {
                                     if (XEUtils.isFunction(headerCellStyle)) {

package/es/gantt/src/gantt-view.js

@@ -1,13 +1,15 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import { VxeUI } from '@vxe-ui/core';
 import { setScrollTop, setScrollLeft, removeClass, addClass } from '../../ui/src/dom';
-import { getRefElem } from './util';
+import { getRefElem, getStandardGapTime } from './util';
 import XEUtils from 'xe-utils';
 import GanttViewHeaderComponent from './gantt-header';
 import GanttViewBodyComponent from './gantt-body';
 import GanttViewFooterComponent from './gantt-footer';
 const { globalEvents } = VxeUI;
 const sourceType = 'gantt';
+const minuteMs = 1000 * 60;
+const dayMs = minuteMs * 60 * 24;
 function createInternalData() {
     return {
         xeTable: null,
@@ -64,39 +66,17 @@ function updateTodayData($xeGanttView) {
         second: `${yyyy}_${MM}_${dd}_${HH}_${mm}_${ss}`
     };
 }
-function handleParseColumn($xeGanttView) {
+function handleColumnHeader($xeGanttView) {
     const $xeGantt = $xeGanttView.$xeGantt;
-    const reactData = $xeGanttView.reactData;
-    const internalData = $xeGanttView.internalData;
-    const ganttProps = $xeGantt;
     const ganttReactData = $xeGantt.reactData;
-    const { treeConfig } = ganttProps;
     const { taskScaleList } = ganttReactData;
-    const { minViewDate, maxViewDate } = reactData;
-    const minScale = XEUtils.last(taskScaleList);
+    const scaleUnit = $xeGantt.computeScaleUnit;
+    const minScale = $xeGantt.computeMinScale;
+    const weekScale = $xeGantt.computeWeekScale;
+    const scaleDateList = $xeGanttView.computeScaleDateList;
     const fullCols = [];
     const groupCols = [];
-    if (minScale && minViewDate && maxViewDate) {
-        const minSType = minScale.type;
-        const weekScale = taskScaleList.find(item => item.type === 'week');
-        let gapTime = 1000 * 60 * 60 * 24;
-        switch (minScale.type) {
-            case 'hour':
-                gapTime = 1000 * 60 * 60;
-                break;
-            case 'minute':
-                gapTime = 1000 * 60;
-                break;
-            case 'second':
-                gapTime = 1000;
-                break;
-            default: {
-                break;
-            }
-        }
-        const currTime = minViewDate.getTime();
-        const diffDayNum = maxViewDate.getTime() - minViewDate.getTime();
-        const countSize = Math.max(5, Math.floor(diffDayNum / gapTime) + 1);
+    if (minScale && scaleUnit && scaleDateList.length) {
         const renderListMaps = {
             year: [],
             quarter: [],
@@ -120,7 +100,7 @@ function handleParseColumn($xeGanttView) {
             second: {}
         };
         const handleData = (type, colMaps, minCol) => {
-            if (minSType === type) {
+            if (minScale.type === type) {
                 return;
             }
             const currCol = colMaps[type];
@@ -138,14 +118,14 @@ function handleParseColumn($xeGanttView) {
                 currGpCol.children.push(minCol);
             }
         };
-        for (let i = 0; i < countSize; i++) {
-            const itemDate = new Date(currTime + (i * gapTime));
+        for (let i = 0; i < scaleDateList.length; i++) {
+            const itemDate = scaleDateList[i];
             const [yyyy, MM, dd, HH, mm, ss] = XEUtils.toDateString(itemDate, 'yyyy-M-d-H-m-s').split('-');
             const e = itemDate.getDay();
             const E = e + 1;
             const q = Math.ceil((itemDate.getMonth() + 1) / 3);
             const W = XEUtils.getYearWeek(itemDate, weekScale ? weekScale.startDay : undefined);
-            const dateObj = { yy: yyyy, M: MM, d: dd, H: HH, m: mm, s: ss, q, W, E, e };
+            const dateObj = { date: itemDate, yy: yyyy, M: MM, d: dd, H: HH, m: mm, s: ss, q, W, E, e };
             const colMaps = {
                 year: {
                     field: yyyy,
@@ -193,14 +173,14 @@ function handleParseColumn($xeGanttView) {
                     dateObj
                 }
             };
-            const minCol = colMaps[minSType];
+            const minCol = colMaps[minScale.type];
             if (minScale.level < 19) {
                 handleData('year', colMaps, minCol);
             }
             if (minScale.level < 17) {
                 handleData('quarter', colMaps, minCol);
             }
-            if (minScale.level < 14) {
+            if (minScale.level < 15) {
                 handleData('month', colMaps, minCol);
             }
             if (minScale.level < 13) {
@@ -209,7 +189,7 @@ function handleParseColumn($xeGanttView) {
             if (minScale.level < 11) {
                 handleData('day', colMaps, minCol);
             }
-            if (minScale.level < 12) {
+            if (minScale.level < 9) {
                 handleData('date', colMaps, minCol);
             }
             if (minScale.level < 7) {
@@ -218,10 +198,13 @@ function handleParseColumn($xeGanttView) {
             if (minScale.level < 5) {
                 handleData('minute', colMaps, minCol);
             }
+            if (minScale.level < 3) {
+                handleData('second', colMaps, minCol);
+            }
             fullCols.push(minCol);
         }
         taskScaleList.forEach(scaleItem => {
-            if (scaleItem.type === minSType) {
+            if (scaleItem.type === minScale.type) {
                 groupCols.push({
                     scaleItem,
                     columns: fullCols
@@ -240,6 +223,216 @@ function handleParseColumn($xeGanttView) {
                 columns: list
             });
         });
+    }
+    return {
+        fullCols,
+        groupCols
+    };
+}
+function createChartRender($xeGanttView, fullCols) {
+    const $xeGantt = $xeGanttView.$xeGantt;
+    const reactData = $xeGanttView.reactData;
+    const { minViewDate } = reactData;
+    const minScale = $xeGantt.computeMinScale;
+    const scaleUnit = $xeGantt.computeScaleUnit;
+    const weekScale = $xeGantt.computeWeekScale;
+    switch (scaleUnit) {
+        case 'year': {
+            const indexMaps = {};
+            fullCols.forEach(({ dateObj }, i) => {
+                const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy');
+                indexMaps[yyyyMM] = i;
+            });
+            return (startValue, endValue) => {
+                const startDate = parseStringDate($xeGanttView, startValue);
+                const endDate = parseStringDate($xeGanttView, endValue);
+                const startStr = XEUtils.toDateString(startDate, 'yyyy');
+                const startFirstDate = XEUtils.getWhatYear(startDate, 0, 'first');
+                const endStr = XEUtils.toDateString(endDate, 'yyyy');
+                const endFirstDate = XEUtils.getWhatYear(endDate, 0, 'first');
+                const dateSize = Math.floor((XEUtils.getWhatYear(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / dayMs);
+                const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize;
+                const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / dayMs + 1) / dateSize;
+                const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                return {
+                    offsetLeftSize,
+                    offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                };
+            };
+        }
+        case 'quarter': {
+            const indexMaps = {};
+            fullCols.forEach(({ dateObj }, i) => {
+                const q = XEUtils.toDateString(dateObj.date, 'yyyy-q');
+                indexMaps[q] = i;
+            });
+            return (startValue, endValue) => {
+                const startDate = parseStringDate($xeGanttView, startValue);
+                const endDate = parseStringDate($xeGanttView, endValue);
+                const startStr = XEUtils.toDateString(startDate, 'yyyy-q');
+                const startFirstDate = XEUtils.getWhatQuarter(startDate, 0, 'first');
+                const endStr = XEUtils.toDateString(endDate, 'yyyy-q');
+                const endFirstDate = XEUtils.getWhatQuarter(endDate, 0, 'first');
+                const dateSize = Math.floor((XEUtils.getWhatQuarter(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / dayMs);
+                const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize;
+                const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / dayMs + 1) / dateSize;
+                const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                return {
+                    offsetLeftSize,
+                    offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                };
+            };
+        }
+        case 'month': {
+            const indexMaps = {};
+            fullCols.forEach(({ dateObj }, i) => {
+                const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy-MM');
+                indexMaps[yyyyMM] = i;
+            });
+            return (startValue, endValue) => {
+                const startDate = parseStringDate($xeGanttView, startValue);
+                const endDate = parseStringDate($xeGanttView, endValue);
+                const startStr = XEUtils.toDateString(startDate, 'yyyy-MM');
+                const startFirstDate = XEUtils.getWhatMonth(startDate, 0, 'first');
+                const endStr = XEUtils.toDateString(endDate, 'yyyy-MM');
+                const endFirstDate = XEUtils.getWhatMonth(endDate, 0, 'first');
+                const dateSize = Math.floor((XEUtils.getWhatMonth(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / dayMs);
+                const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize;
+                const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / dayMs + 1) / dateSize;
+                const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                return {
+                    offsetLeftSize,
+                    offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                };
+            };
+        }
+        case 'week': {
+            const indexMaps = {};
+            fullCols.forEach(({ dateObj }, i) => {
+                const yyyyW = XEUtils.toDateString(dateObj.date, 'yyyy-W', { firstDay: weekScale ? weekScale.startDay : undefined });
+                indexMaps[yyyyW] = i;
+            });
+            return (startValue, endValue) => {
+                const startDate = parseStringDate($xeGanttView, startValue);
+                const endDate = parseStringDate($xeGanttView, endValue);
+                const startStr = XEUtils.toDateString(startDate, 'yyyy-W', { firstDay: weekScale ? weekScale.startDay : undefined });
+                const startFirstDate = XEUtils.getWhatWeek(startDate, 0, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined);
+                const endStr = XEUtils.toDateString(endDate, 'yyyy-W', { firstDay: weekScale ? weekScale.startDay : undefined });
+                const endFirstDate = XEUtils.getWhatWeek(endDate, 0, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined);
+                const dateSize = Math.floor((XEUtils.getWhatWeek(endDate, 1, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined).getTime() - endFirstDate.getTime()) / dayMs);
+                const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize;
+                const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / dayMs + 1) / dateSize;
+                const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                return {
+                    offsetLeftSize,
+                    offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                };
+            };
+        }
+        case 'day':
+        case 'date': {
+            const indexMaps = {};
+            fullCols.forEach(({ dateObj }, i) => {
+                const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy-MM-dd');
+                indexMaps[yyyyMM] = i;
+            });
+            return (startValue, endValue) => {
+                const startDate = parseStringDate($xeGanttView, startValue);
+                const endDate = parseStringDate($xeGanttView, endValue);
+                const startStr = XEUtils.toDateString(startDate, 'yyyy-MM-dd');
+                const startFirstDate = XEUtils.getWhatDay(startDate, 0, 'first');
+                const endStr = XEUtils.toDateString(endDate, 'yyyy-MM-dd');
+                const endFirstDate = XEUtils.getWhatDay(endDate, 0, 'first');
+                const minuteSize = Math.floor((XEUtils.getWhatDay(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / minuteMs);
+                const subtract = (startDate.getTime() - startFirstDate.getTime()) / minuteMs / minuteSize;
+                const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / minuteMs + 1) / minuteSize;
+                const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                return {
+                    offsetLeftSize,
+                    offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                };
+            };
+        }
+        case 'hour': {
+            const indexMaps = {};
+            fullCols.forEach(({ dateObj }, i) => {
+                const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy-MM-dd HH');
+                indexMaps[yyyyMM] = i;
+            });
+            return (startValue, endValue) => {
+                const startDate = parseStringDate($xeGanttView, startValue);
+                const endDate = parseStringDate($xeGanttView, endValue);
+                const startStr = XEUtils.toDateString(startDate, 'yyyy-MM-dd HH');
+                const startFirstDate = XEUtils.getWhatHours(startDate, 0, 'first');
+                const endStr = XEUtils.toDateString(endDate, 'yyyy-MM-dd HH');
+                const endFirstDate = XEUtils.getWhatHours(endDate, 0, 'first');
+                const minuteSize = Math.floor((XEUtils.getWhatHours(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / minuteMs);
+                const subtract = (startDate.getTime() - startFirstDate.getTime()) / minuteMs / minuteSize;
+                const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / minuteMs + 1) / minuteSize;
+                const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                return {
+                    offsetLeftSize,
+                    offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                };
+            };
+        }
+        case 'minute': {
+            const indexMaps = {};
+            fullCols.forEach(({ dateObj }, i) => {
+                const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy-MM-dd HH:mm');
+                indexMaps[yyyyMM] = i;
+            });
+            return (startValue, endValue) => {
+                const startDate = parseStringDate($xeGanttView, startValue);
+                const endDate = parseStringDate($xeGanttView, endValue);
+                const startStr = XEUtils.toDateString(startDate, 'yyyy-MM-dd HH:mm');
+                const startFirstDate = XEUtils.getWhatMinutes(startDate, 0, 'first');
+                const endStr = XEUtils.toDateString(endDate, 'yyyy-MM-dd HH:mm');
+                const endFirstDate = XEUtils.getWhatMinutes(endDate, 0, 'first');
+                const minuteSize = Math.floor((XEUtils.getWhatMinutes(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / minuteMs);
+                const subtract = (startDate.getTime() - startFirstDate.getTime()) / minuteMs / minuteSize;
+                const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / minuteMs + 1) / minuteSize;
+                const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                return {
+                    offsetLeftSize,
+                    offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                };
+            };
+        }
+        case 'second': {
+            const gapTime = getStandardGapTime(minScale.type);
+            return (startValue, endValue) => {
+                const startDate = parseStringDate($xeGanttView, startValue);
+                const endDate = parseStringDate($xeGanttView, endValue);
+                let offsetLeftSize = 0;
+                let offsetWidthSize = 0;
+                if (minViewDate) {
+                    offsetLeftSize = (startDate.getTime() - minViewDate.getTime()) / gapTime;
+                    offsetWidthSize = ((endDate.getTime() - startDate.getTime()) / gapTime) + 1;
+                }
+                return {
+                    offsetLeftSize,
+                    offsetWidthSize
+                };
+            };
+        }
+    }
+    return () => {
+        return {
+            offsetLeftSize: 0,
+            offsetWidthSize: 0
+        };
+    };
+}
+function handleParseColumn($xeGanttView) {
+    const $xeGantt = $xeGanttView.$xeGantt;
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    const ganttProps = $xeGantt;
+    const { treeConfig } = ganttProps;
+    const { minViewDate, maxViewDate } = reactData;
+    const { fullCols, groupCols } = handleColumnHeader($xeGanttView);
+    if (minViewDate && maxViewDate) {
         const $xeTable = internalData.xeTable;
         if ($xeTable) {
             const startField = $xeGantt.computeStartField;
@@ -253,20 +446,18 @@ function handleParseColumn($xeGanttView) {
             const { transform } = treeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             const ctMaps = {};
+            const renderFn = createChartRender($xeGanttView, fullCols);
             const handleParseRender = (row) => {
                 const rowid = $xeTable.getRowid(row);
                 const startValue = XEUtils.get(row, startField);
                 const endValue = XEUtils.get(row, endField);
                 if (startValue && endValue) {
-                    const startDate = parseStringDate($xeGanttView, startValue);
-                    const endDate = parseStringDate($xeGanttView, endValue);
-                    const oLeftSize = Math.floor((startDate.getTime() - minViewDate.getTime()) / gapTime);
-                    const oWidthSize = Math.floor((endDate.getTime() - startDate.getTime()) / gapTime) + 1;
+                    const { offsetLeftSize, offsetWidthSize } = renderFn(startValue, endValue);
                     ctMaps[rowid] = {
                         row,
                         rowid,
-                        oLeftSize,
-                        oWidthSize
+                        oLeftSize: offsetLeftSize,
+                        oWidthSize: offsetWidthSize
                     };
                 }
             };
@@ -527,10 +718,10 @@ function handleLazyRecalculate($xeGanttView) {
     return new Promise(resolve => {
         const { rceTimeout, rceRunTime } = internalData;
         const $xeTable = internalData.xeTable;
-        let refreshDelay = 50;
+        let refreshDelay = 30;
         if ($xeTable) {
             const resizeOpts = $xeTable.computeResizeOpts;
-            refreshDelay = resizeOpts.refreshDelay || 50;
+            refreshDelay = resizeOpts.refreshDelay || refreshDelay;
         }
         if (rceTimeout) {
             clearTimeout(rceTimeout);
@@ -918,15 +1109,88 @@ export default defineVxeComponent({
             internalData
         };
     },
-    computed: Object.assign({}, {}),
+    computed: Object.assign(Object.assign({}, {}), { computeScaleDateList() {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const reactData = $xeGanttView.reactData;
+            const { minViewDate, maxViewDate } = reactData;
+            const minScale = $xeGantt.computeMinScale;
+            const dateList = [];
+            if (!minViewDate || !maxViewDate) {
+                return dateList;
+            }
+            const startTime = minViewDate.getTime();
+            const endTime = maxViewDate.getTime();
+            switch (minScale.type) {
+                case 'year': {
+                    let currDate = XEUtils.getWhatYear(minViewDate, 0, 'first');
+                    while (currDate <= maxViewDate) {
+                        const itemDate = currDate;
+                        dateList.push(itemDate);
+                        currDate = XEUtils.getWhatYear(currDate, 1);
+                    }
+                    break;
+                }
+                case 'quarter': {
+                    let currDate = XEUtils.getWhatQuarter(minViewDate, 0, 'first');
+                    while (currDate <= maxViewDate) {
+                        const itemDate = currDate;
+                        dateList.push(itemDate);
+                        currDate = XEUtils.getWhatQuarter(currDate, 1);
+                    }
+                    break;
+                }
+                case 'month': {
+                    let currDate = XEUtils.getWhatMonth(minViewDate, 0, 'first');
+                    while (currDate <= maxViewDate) {
+                        const itemDate = currDate;
+                        dateList.push(itemDate);
+                        currDate = XEUtils.getWhatMonth(currDate, 1);
+                    }
+                    break;
+                }
+                case 'week': {
+                    let currDate = XEUtils.getWhatWeek(minViewDate, 0, minScale.startDay, minScale.startDay);
+                    while (currDate <= maxViewDate) {
+                        const itemDate = currDate;
+                        dateList.push(itemDate);
+                        currDate = XEUtils.getWhatWeek(currDate, 1);
+                    }
+                    break;
+                }
+                case 'day':
+                case 'date':
+                case 'hour':
+                case 'minute':
+                case 'second': {
+                    const gapTime = getStandardGapTime(minScale.type);
+                    let currTime = startTime;
+                    while (currTime <= endTime) {
+                        const itemDate = new Date(currTime);
+                        dateList.push(itemDate);
+                        currTime += gapTime;
+                    }
+                    break;
+                }
+            }
+            return dateList;
+        } }),
     methods: {
         //
         // Method
         //
         refreshData() {
             const $xeGanttView = this;
+            const internalData = $xeGanttView.internalData;
             handleUpdateData($xeGanttView);
-            return handleLazyRecalculate($xeGanttView);
+            handleRecalculateStyle($xeGanttView);
+            return $xeGanttView.$nextTick().then(() => {
+                const $xeTable = internalData.xeTable;
+                handleRecalculateStyle($xeGanttView);
+                if ($xeTable) {
+                    return $xeTable.recalculate();
+                }
+            });
         },
         updateViewData() {
             const $xeGanttView = this;