vxe-gantt 4.0.27 → 4.1.0

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

@@ -47,9 +47,10 @@ 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) => {
@@ -63,6 +64,11 @@ export default defineVxeComponent({
                                         label = getI18n(`vxe.gantt.${!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat'}.${type}`, dateObj);
                                     }
                                 }
+                                else {
+                                    if (isLast && scaleItem.type === 'week') {
+                                        label = getI18n(`vxe.gantt.tSimpleFormat.${type}`, dateObj);
+                                    }
+                                }
                                 let cellVNs = label;
                                 const ctParams = { source: sourceType, type: viewType, column, scaleObj: scaleItem, title: label, dateObj: dateObj, $rowIndex };
                                 if (titleSlot) {
@@ -71,6 +77,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,14 +1,16 @@
-import { h, ref, reactive, nextTick, inject, watch, provide, onMounted, onUnmounted } from 'vue';
+import { h, ref, reactive, nextTick, inject, watch, provide, computed, onMounted, onUnmounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import { setScrollTop, setScrollLeft, removeClass, addClass } from '../../ui/src/dom';
 import { VxeUI } from '@vxe-ui/core';
-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,
@@ -40,7 +42,7 @@ export default defineVxeComponent({
     setup(props, context) {
         const xID = XEUtils.uniqueId();
         const $xeGantt = inject('$xeGantt', {});
-        const { computeTaskOpts, computeStartField, computeEndField, computeScrollbarOpts, computeScrollbarXToTop, computeScrollbarYToLeft } = $xeGantt.getComputeMaps();
+        const { computeTaskOpts, computeStartField, computeEndField, computeScrollbarOpts, computeScrollbarXToTop, computeScrollbarYToLeft, computeScaleUnit, computeWeekScale, computeMinScale } = $xeGantt.getComputeMaps();
         const refElem = ref();
         const refScrollXVirtualElem = ref();
         const refScrollYVirtualElem = ref();
@@ -89,7 +91,72 @@ export default defineVxeComponent({
         const refMaps = {
             refElem
         };
-        const computeMaps = {};
+        const computeScaleDateList = computed(() => {
+            const { minViewDate, maxViewDate } = reactData;
+            const minScale = computeMinScale.value;
+            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;
+        });
+        const computeMaps = {
+            computeScaleDateList
+        };
         const $xeGanttView = {
             xID,
             props,
@@ -126,36 +193,16 @@ export default defineVxeComponent({
                 second: `${yyyy}_${MM}_${dd}_${HH}_${mm}_${ss}`
             };
         };
-        const handleParseColumn = () => {
-            const ganttProps = $xeGantt.props;
+        const handleColumnHeader = () => {
             const ganttReactData = $xeGantt.reactData;
-            const { treeConfig } = ganttProps;
             const { taskScaleList } = ganttReactData;
-            const { minViewDate, maxViewDate } = reactData;
-            const minScale = XEUtils.last(taskScaleList);
+            const scaleUnit = computeScaleUnit.value;
+            const minScale = computeMinScale.value;
+            const weekScale = computeWeekScale.value;
+            const scaleDateList = computeScaleDateList.value;
             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: [],
@@ -179,7 +226,7 @@ export default defineVxeComponent({
                     second: {}
                 };
                 const handleData = (type, colMaps, minCol) => {
-                    if (minSType === type) {
+                    if (minScale.type === type) {
                         return;
                     }
                     const currCol = colMaps[type];
@@ -197,14 +244,14 @@ export default defineVxeComponent({
                         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,
@@ -252,7 +299,7 @@ export default defineVxeComponent({
                             dateObj
                         }
                     };
-                    const minCol = colMaps[minSType];
+                    const minCol = colMaps[minScale.type];
                     if (minScale.level < 19) {
                         handleData('year', colMaps, minCol);
                     }
@@ -280,7 +327,7 @@ export default defineVxeComponent({
                     fullCols.push(minCol);
                 }
                 taskScaleList.forEach(scaleItem => {
-                    if (scaleItem.type === minSType) {
+                    if (scaleItem.type === minScale.type) {
                         groupCols.push({
                             scaleItem,
                             columns: fullCols
@@ -299,6 +346,211 @@ export default defineVxeComponent({
                         columns: list
                     });
                 });
+            }
+            return {
+                fullCols,
+                groupCols
+            };
+        };
+        const createChartRender = (fullCols) => {
+            const { minViewDate } = reactData;
+            const minScale = computeMinScale.value;
+            const scaleUnit = computeScaleUnit.value;
+            const weekScale = computeWeekScale.value;
+            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(startValue);
+                        const endDate = parseStringDate(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(startValue);
+                        const endDate = parseStringDate(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(startValue);
+                        const endDate = parseStringDate(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(startValue);
+                        const endDate = parseStringDate(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(startValue);
+                        const endDate = parseStringDate(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(startValue);
+                        const endDate = parseStringDate(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(startValue);
+                        const endDate = parseStringDate(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(startValue);
+                        const endDate = parseStringDate(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
+                };
+            };
+        };
+        const handleParseColumn = () => {
+            const ganttProps = $xeGantt.props;
+            const { treeConfig } = ganttProps;
+            const { minViewDate, maxViewDate } = reactData;
+            const { fullCols, groupCols } = handleColumnHeader();
+            if (minViewDate && maxViewDate && fullCols.length) {
                 const $xeTable = internalData.xeTable;
                 if ($xeTable) {
                     const startField = computeStartField.value;
@@ -313,20 +565,18 @@ export default defineVxeComponent({
                     const { transform } = treeOpts;
                     const childrenField = treeOpts.children || treeOpts.childrenField;
                     const ctMaps = {};
+                    const renderFn = createChartRender(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(startValue);
-                            const endDate = parseStringDate(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
                             };
                         }
                     };
@@ -575,11 +825,11 @@ export default defineVxeComponent({
             return new Promise(resolve => {
                 const { rceTimeout, rceRunTime } = internalData;
                 const $xeTable = internalData.xeTable;
-                let refreshDelay = 50;
+                let refreshDelay = 30;
                 if ($xeTable) {
                     const { computeResizeOpts } = $xeTable.getComputeMaps();
                     const resizeOpts = computeResizeOpts.value;
-                    refreshDelay = resizeOpts.refreshDelay || 50;
+                    refreshDelay = resizeOpts.refreshDelay || refreshDelay;
                 }
                 if (rceTimeout) {
                     clearTimeout(rceTimeout);
@@ -880,7 +1130,14 @@ export default defineVxeComponent({
         const ganttViewMethods = {
             refreshData() {
                 handleUpdateData();
-                return handleLazyRecalculate();
+                handleRecalculateStyle();
+                return nextTick().then(() => {
+                    const $xeTable = internalData.xeTable;
+                    handleRecalculateStyle();
+                    if ($xeTable) {
+                        return $xeTable.recalculate();
+                    }
+                });
             },
             updateViewData() {
                 const $xeTable = internalData.xeTable;

package/es/gantt/src/gantt.js

@@ -155,6 +155,18 @@ export default defineVxeComponent({
         const computeTaskSplitOpts = computed(() => {
             return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig);
         });
+        const computeScaleUnit = computed(() => {
+            const minScale = computeMinScale.value;
+            return minScale ? minScale.type : 'date';
+        });
+        const computeMinScale = computed(() => {
+            const { taskScaleList } = reactData;
+            return XEUtils.last(taskScaleList);
+        });
+        const computeWeekScale = computed(() => {
+            const { taskScaleList } = reactData;
+            return taskScaleList.find(item => item.type === 'week');
+        });
         const computeTaskScaleConfs = computed(() => {
             const taskViewOpts = computeTaskViewOpts.value;
             const { scales } = taskViewOpts;
@@ -373,6 +385,9 @@ export default defineVxeComponent({
             computeTaskBarResizeOpts,
             computeTaskSplitOpts,
             computeTaskScaleConfs,
+            computeScaleUnit,
+            computeMinScale,
+            computeWeekScale,
             computeTitleField,
             computeStartField,
             computeEndField,
@@ -2075,6 +2090,7 @@ export default defineVxeComponent({
         });
         watch(computeTaskScaleConfs, () => {
             handleTaskScaleConfig();
+            $xeGantt.refreshTaskView();
         });
         hooks.forEach((options) => {
             const { setupGantt } = options;

package/es/gantt/src/util.js

@@ -16,3 +16,14 @@ export function getCalcHeight(height) {
 export function getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight) {
     return rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
 }
+export function getStandardGapTime(type) {
+    switch (type) {
+        case 'hour':
+            return 1000 * 60 * 60;
+        case 'minute':
+            return 1000 * 60;
+        case 'second':
+            return 1000;
+    }
+    return 1000 * 60 * 60 * 24;
+}

package/es/ui/index.js

@@ -1,7 +1,7 @@
 import { VxeUI } from '@vxe-ui/core';
 import { errLog } from './src/log';
 const { setConfig, setIcon, checkVersion } = VxeUI;
-VxeUI.ganttVersion = "4.0.27";
+VxeUI.ganttVersion = "4.1.0";
 setConfig({
     gantt: {
         // size: null,

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const version = `gantt v${"4.0.27"}`;
+const version = `gantt v${"4.1.0"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

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

@@ -69,12 +69,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }, $rowIndex) => {
         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 (0, _vue.h)('tr', {
           key: $rowIndex
         }, columns.map((column, cIndex) => {
@@ -90,6 +92,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             } else {
               label = getI18n(`vxe.gantt.${!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat'}.${type}`, dateObj);
             }
+          } else {
+            if (isLast && scaleItem.type === 'week') {
+              label = getI18n(`vxe.gantt.tSimpleFormat.${type}`, dateObj);
+            }
           }
           let cellVNs = label;
           const ctParams = {
@@ -105,6 +111,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             cellVNs = $xeGantt.callSlot(titleSlot, ctParams);
           } else if (titleMethod) {
             cellVNs = `${titleMethod(ctParams)}`;
+          } else if (titleFormat) {
+            cellVNs = _xeUtils.default.toDateString(dateObj.date, titleFormat);
           }
           let cellStys = {};
           if (headerCellStyle) {

package/lib/gantt/src/gantt-header.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let getI18n=_core.VxeUI.getI18n,sourceType="gantt",viewType="header";var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeGanttViewHeader",setup(){let w=(0,_vue.inject)("$xeGantt",{}),t=(0,_vue.inject)("$xeGanttView",{}),a=w.getComputeMaps().computeTaskViewOpts,{reactData:n,internalData:u}=t,o=(0,_vue.ref)(),i=(0,_vue.ref)(),v=(0,_vue.ref)(),s=(0,_vue.ref)();return(0,_vue.onMounted)(()=>{var e=u.elemStore,t="main-header-";e[t+"wrapper"]=o,e[t+"scroll"]=i,e[t+"table"]=v,e[t+"xSpace"]=s}),(0,_vue.onUnmounted)(()=>{var e=u.elemStore,t="main-header-";e[t+"wrapper"]=null,e[t+"scroll"]=null,e[t+"table"]=null,e[t+"xSpace"]=null}),()=>{let{headerGroups:x,viewCellWidth:l}=n,{todayDateMaps:r,visibleColumn:e}=u;let m=a.value.showNowLine;return(0,_vue.h)("div",{ref:o,class:"vxe-gantt-view--header-wrapper"},[(0,_vue.h)("div",{ref:i,class:"vxe-gantt-view--header-inner-wrapper",onScroll:t.triggerHeaderScrollEvent},[(0,_vue.h)("div",{ref:s,class:"vxe-body--x-space"}),(0,_vue.h)("table",{ref:v,class:"vxe-gantt-view--header-table"},[(0,_vue.h)("colgroup",{},e.map((e,t)=>(0,_vue.h)("col",{key:t,style:{width:l+"px"}}))),(0,_vue.h)("thead",{},x.map(({scaleItem:v,columns:e},s)=>{let{type:p,titleMethod:d,headerCellStyle:c,slots:t}=v,_=t?t.title:null,h=m&&s===x.length-1?r[p]:null;return(0,_vue.h)("tr",{key:s},e.map((e,t)=>{var{field:l,childCount:r,dateObj:a}=e;let n=""+e.title,u=n=s<x.length-1?"day"===v.type?getI18n("vxe.gantt.dayss.w"+a.e):getI18n(`vxe.gantt.${!s&&1<x.length?"tFullFormat":"tSimpleFormat"}.`+p,a):n,o={source:sourceType,type:viewType,column:e,scaleObj:v,title:n,dateObj:a,$rowIndex:s},i=(_?u=w.callSlot(_,o):d&&(u=""+d(o)),{});return c&&(i=_xeUtils.default.isFunction(c)?c(o):c),(0,_vue.h)("th",{key:t,class:["vxe-gantt-view--header-column",{"is--now":m&&h&&h===l}],colspan:r||null,title:_?null:n,style:i,onContextmenu(e){w.handleTaskHeaderContextmenuEvent(e,o)}},u)}))}))])])])}}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let getI18n=_core.VxeUI.getI18n,sourceType="gantt",viewType="header";var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeGanttViewHeader",setup(){let f=(0,_vue.inject)("$xeGantt",{}),t=(0,_vue.inject)("$xeGanttView",{}),r=f.getComputeMaps().computeTaskViewOpts,{reactData:n,internalData:u}=t,o=(0,_vue.ref)(),i=(0,_vue.ref)(),v=(0,_vue.ref)(),s=(0,_vue.ref)();return(0,_vue.onMounted)(()=>{var e=u.elemStore,t="main-header-";e[t+"wrapper"]=o,e[t+"scroll"]=i,e[t+"table"]=v,e[t+"xSpace"]=s}),(0,_vue.onUnmounted)(()=>{var e=u.elemStore,t="main-header-";e[t+"wrapper"]=null,e[t+"scroll"]=null,e[t+"table"]=null,e[t+"xSpace"]=null}),()=>{let{headerGroups:g,viewCellWidth:l}=n,{todayDateMaps:a,visibleColumn:e}=u;let w=r.value.showNowLine;return(0,_vue.h)("div",{ref:o,class:"vxe-gantt-view--header-wrapper"},[(0,_vue.h)("div",{ref:i,class:"vxe-gantt-view--header-inner-wrapper",onScroll:t.triggerHeaderScrollEvent},[(0,_vue.h)("div",{ref:s,class:"vxe-body--x-space"}),(0,_vue.h)("table",{ref:v,class:"vxe-gantt-view--header-table"},[(0,_vue.h)("colgroup",{},e.map((e,t)=>(0,_vue.h)("col",{key:t,style:{width:l+"px"}}))),(0,_vue.h)("thead",{},g.map(({scaleItem:v,columns:e},s)=>{let{type:p,titleFormat:d,titleMethod:c,headerCellStyle:_,slots:t}=v,h=t?t.title:null,m=s===g.length-1,x=m&&w?a[p]:null;return(0,_vue.h)("tr",{key:s},e.map((e,t)=>{var{field:l,childCount:a,dateObj:r}=e;let n=""+e.title,u=(s<g.length-1?n="day"===v.type?getI18n("vxe.gantt.dayss.w"+r.e):getI18n(`vxe.gantt.${!s&&1<g.length?"tFullFormat":"tSimpleFormat"}.`+p,r):m&&"week"===v.type&&(n=getI18n("vxe.gantt.tSimpleFormat."+p,r)),n),o={source:sourceType,type:viewType,column:e,scaleObj:v,title:n,dateObj:r,$rowIndex:s},i=(h?u=f.callSlot(h,o):c?u=""+c(o):d&&(u=_xeUtils.default.toDateString(r.date,d)),{});return _&&(i=_xeUtils.default.isFunction(_)?_(o):_),(0,_vue.h)("th",{key:t,class:["vxe-gantt-view--header-column",{"is--now":w&&x&&x===l}],colspan:a||null,title:h?null:n,style:i,onContextmenu(e){f.handleTaskHeaderContextmenuEvent(e,o)}},u)}))}))])])])}}});