vxe-gantt 3.0.4 → 3.0.6

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

@@ -41,13 +41,28 @@ export default defineVxeComponent({
             const progressField = $xeGantt.computeProgressField;
             const taskBarOpts = $xeGantt.computeTaskBarOpts;
             const { showProgress, showContent, contentMethod, barStyle } = taskBarOpts;
-            const { round } = barStyle || {};
+            const isBarRowStyle = XEUtils.isFunction(barStyle);
+            const barStyObj = (barStyle ? (isBarRowStyle ? barStyle({ row, $gantt: $xeGantt }) : barStyle) : {}) || {};
+            const { round } = barStyObj;
             const rowRest = fullAllDataRowIdData[rowid] || {};
             const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0;
             const isRsHeight = resizeHeight > 0;
             const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
             let title = getStringValue(XEUtils.get(row, titleField));
             const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0;
+            const vbStyle = {};
+            const vpStyle = {
+                width: `${progressValue || 0}%`
+            };
+            if (isBarRowStyle) {
+                const { bgColor, completedBgColor } = barStyObj;
+                if (bgColor) {
+                    vbStyle.backgroundColor = bgColor;
+                }
+                if (completedBgColor) {
+                    vpStyle.backgroundColor = completedBgColor;
+                }
+            }
             if (contentMethod) {
                 title = getStringValue(contentMethod({ row, title }));
             }
@@ -66,6 +81,7 @@ export default defineVxeComponent({
             }, [
                 h('div', {
                     class: taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar',
+                    style: vbStyle,
                     attrs: {
                         rowid
                     },
@@ -83,9 +99,7 @@ export default defineVxeComponent({
                         showProgress
                             ? h('div', {
                                 class: 'vxe-gantt-view--chart-progress',
-                                style: {
-                                    width: `${progressValue}%`
-                                }
+                                style: vpStyle
                             })
                             : renderEmptyElement($xeGantt),
                         showContent

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

@@ -1,4 +1,6 @@
 import { defineVxeComponent } from '../../ui/src/comp';
+import { VxeUI } from '@vxe-ui/core';
+const { getI18n } = VxeUI;
 export default defineVxeComponent({
     name: 'VxeGanttViewHeader',
     inject: {
@@ -16,6 +18,7 @@ export default defineVxeComponent({
         //
         renderVN(h) {
             const _vm = this;
+            const $xeGantt = _vm.$xeGantt;
             const $xeGanttView = _vm.$xeGanttView;
             const { reactData } = $xeGanttView;
             const { tableColumn, headerGroups, viewCellWidth } = reactData;
@@ -46,18 +49,38 @@ export default defineVxeComponent({
                                 }
                             });
                         })),
-                        h('thead', {}, headerGroups.map((cols, rIndex) => {
+                        h('thead', {}, headerGroups.map(({ scaleItem, columns }, $rowIndex) => {
+                            const { type, titleMethod, slots } = scaleItem;
+                            const titleSlot = slots ? slots.title : null;
                             return h('tr', {
-                                key: rIndex
-                            }, cols.map((column, cIndex) => {
+                                key: $rowIndex
+                            }, columns.map((column, cIndex) => {
+                                const { childCount, dateObj } = column;
+                                let label = `${column.title}`;
+                                if ($rowIndex < headerGroups.length - 1) {
+                                    if (scaleItem.type === 'day') {
+                                        label = getI18n(`vxe.gantt.dayss.w${dateObj.e}`);
+                                    }
+                                    else {
+                                        label = getI18n(`vxe.gantt.${!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat'}.${type}`, dateObj);
+                                    }
+                                }
+                                let cellVNs = label;
+                                const ctParams = { scaleObj: scaleItem, title: label, dateObj: dateObj, $rowIndex };
+                                if (titleSlot) {
+                                    cellVNs = $xeGantt.callSlot(titleSlot, ctParams, h);
+                                }
+                                else if (titleMethod) {
+                                    cellVNs = `${titleMethod(ctParams)}`;
+                                }
                                 return h('th', {
                                     key: cIndex,
                                     class: 'vxe-gantt-view--header-column',
                                     attrs: {
-                                        colspan: column.children ? column.children.length : null,
-                                        title: `${column.field}`
+                                        colspan: childCount || null,
+                                        title: titleSlot ? null : label
                                     }
-                                }, column.title);
+                                }, cellVNs);
                             }));
                         }))
                     ])

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

@@ -49,91 +49,242 @@ function handleParseColumn($xeGanttView) {
     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 taskViewOpts = $xeGantt.computeTaskViewOpts;
+    const minScale = XEUtils.last(taskScaleList);
     const fullCols = [];
     const groupCols = [];
-    switch (taskViewOpts.mode) {
-        case 'year':
-            break;
-        case 'quarter':
-            break;
-        case 'month':
-            break;
-        case 'week':
-            break;
-        default: {
-            if (minViewDate && maxViewDate) {
-                const currTime = minViewDate.getTime();
-                const diffDayNum = maxViewDate.getTime() - minViewDate.getTime();
-                const countDayNum = Math.max(6, Math.floor(diffDayNum / 86400000) + 1);
-                const groupList = [];
-                const colList = [];
-                const groupMaps = {};
-                for (let i = 0; i < countDayNum; i++) {
-                    const itemDate = new Date(currTime + (i * 86400000));
-                    const yyyyy = `${itemDate.getFullYear()}-${itemDate.getMonth() + 1}`;
-                    const mmDd = `${itemDate.getDate()}`;
-                    let groupCol = groupMaps[yyyyy];
-                    const column = {
-                        field: `${yyyyy}-${mmDd}`,
-                        title: mmDd
-                    };
-                    if (groupCol) {
-                        groupCol.children.push(column);
-                        fullCols.push(groupCol);
-                    }
-                    else {
-                        groupCol = {
-                            field: yyyyy,
-                            title: yyyyy,
-                            children: [column]
-                        };
-                        groupList.push(groupCol);
-                        fullCols.push(groupCol);
-                        groupMaps[yyyyy] = groupCol;
-                    }
-                    colList.push(column);
+    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);
+        switch (minScale.type) {
+            case 'day':
+            case 'date':
+                if (diffDayNum > (1000 * 60 * 60 * 24 * 366 * 3)) {
+                    reactData.tableColumn = [];
+                    reactData.headerGroups = [];
+                    return;
                 }
-                groupCols.push(groupList, colList);
-                const $xeTable = internalData.xeTable;
-                if ($xeTable) {
-                    const startField = $xeGantt.computeStartField;
-                    const endField = $xeGantt.computeEndField;
-                    const tableInternalData = $xeTable;
-                    const { afterFullData, afterTreeFullData } = tableInternalData;
-                    const treeOpts = $xeTable.computeTreeOpts;
-                    const { transform } = treeOpts;
-                    const childrenField = treeOpts.children || treeOpts.childrenField;
-                    const ctMaps = {};
-                    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()) / 86400000);
-                            const oWidthSize = Math.floor((endDate.getTime() - startDate.getTime()) / 86400000) + 1;
-                            ctMaps[rowid] = {
-                                row,
-                                rowid,
-                                oLeftSize,
-                                oWidthSize
-                            };
-                        }
+                break;
+            case 'hour':
+                if (diffDayNum > (1000 * 60 * 60 * 24 * 31 * 3)) {
+                    reactData.tableColumn = [];
+                    reactData.headerGroups = [];
+                    return;
+                }
+                break;
+            case 'minute':
+                if (diffDayNum > (1000 * 60 * 60 * 24 * 3)) {
+                    reactData.tableColumn = [];
+                    reactData.headerGroups = [];
+                    return;
+                }
+                break;
+            case 'second':
+                if (diffDayNum > (1000 * 60 * 60 * 3)) {
+                    reactData.tableColumn = [];
+                    reactData.headerGroups = [];
+                    return;
+                }
+                break;
+        }
+        const renderListMaps = {
+            year: [],
+            quarter: [],
+            month: [],
+            week: [],
+            day: [],
+            date: [],
+            hour: [],
+            minute: [],
+            second: []
+        };
+        const tempTypeMaps = {
+            year: {},
+            quarter: {},
+            month: {},
+            week: {},
+            day: {},
+            date: {},
+            hour: {},
+            minute: {},
+            second: {}
+        };
+        const handleData = (type, colMaps, minCol) => {
+            if (minSType === type) {
+                return;
+            }
+            const currCol = colMaps[type];
+            const currKey = `${currCol.field}`;
+            let currGpCol = tempTypeMaps[type][currKey];
+            if (!currGpCol) {
+                currGpCol = currCol;
+                tempTypeMaps[type][currKey] = currGpCol;
+                renderListMaps[type].push(currGpCol);
+            }
+            if (currGpCol) {
+                if (!currGpCol.children) {
+                    currGpCol.children = [];
+                }
+                currGpCol.children.push(minCol);
+            }
+        };
+        for (let i = 0; i < countSize; i++) {
+            const itemDate = new Date(currTime + (i * gapTime));
+            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 colMaps = {
+                year: {
+                    field: yyyy,
+                    title: yyyy,
+                    dateObj
+                },
+                quarter: {
+                    field: `${yyyy}_q${q}`,
+                    title: `${q}`,
+                    dateObj
+                },
+                month: {
+                    field: `${yyyy}_${MM}`,
+                    title: MM,
+                    dateObj
+                },
+                week: {
+                    field: `${yyyy}_W${W}`,
+                    title: `${W}`,
+                    dateObj
+                },
+                day: {
+                    field: `${yyyy}_${MM}_${dd}_E${E}`,
+                    title: `${E}`,
+                    dateObj
+                },
+                date: {
+                    field: `${yyyy}_${MM}_${dd}`,
+                    title: dd,
+                    dateObj
+                },
+                hour: {
+                    field: `${yyyy}_${MM}_${dd}_${HH}`,
+                    title: HH,
+                    dateObj
+                },
+                minute: {
+                    field: `${yyyy}_${MM}_${dd}_${HH}_${mm}`,
+                    title: mm,
+                    dateObj
+                },
+                second: {
+                    field: `${yyyy}_${MM}_${dd}_${HH}_${mm}_${ss}`,
+                    title: ss,
+                    dateObj
+                }
+            };
+            const minCol = colMaps[minSType];
+            if (minScale.level < 19) {
+                handleData('year', colMaps, minCol);
+            }
+            if (minScale.level < 17) {
+                handleData('quarter', colMaps, minCol);
+            }
+            if (minScale.level < 14) {
+                handleData('month', colMaps, minCol);
+            }
+            if (minScale.level < 13) {
+                handleData('week', colMaps, minCol);
+            }
+            if (minScale.level < 11) {
+                handleData('day', colMaps, minCol);
+            }
+            if (minScale.level < 12) {
+                handleData('date', colMaps, minCol);
+            }
+            if (minScale.level < 7) {
+                handleData('hour', colMaps, minCol);
+            }
+            if (minScale.level < 5) {
+                handleData('minute', colMaps, minCol);
+            }
+            fullCols.push(minCol);
+        }
+        taskScaleList.forEach(scaleItem => {
+            if (scaleItem.type === minSType) {
+                groupCols.push({
+                    scaleItem,
+                    columns: fullCols
+                });
+                return;
+            }
+            const list = renderListMaps[scaleItem.type] || [];
+            if (list) {
+                list.forEach(item => {
+                    item.childCount = item.children ? item.children.length : 0;
+                    item.children = undefined;
+                });
+            }
+            groupCols.push({
+                scaleItem,
+                columns: list
+            });
+        });
+        const $xeTable = internalData.xeTable;
+        if ($xeTable) {
+            const startField = $xeGantt.computeStartField;
+            const endField = $xeGantt.computeEndField;
+            const tableInternalData = $xeTable;
+            const { afterFullData, afterTreeFullData } = tableInternalData;
+            const treeOpts = $xeTable.computeTreeOpts;
+            const { transform } = treeOpts;
+            const childrenField = treeOpts.children || treeOpts.childrenField;
+            const ctMaps = {};
+            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;
+                    ctMaps[rowid] = {
+                        row,
+                        rowid,
+                        oLeftSize,
+                        oWidthSize
                     };
-                    if (treeConfig) {
-                        XEUtils.eachTree(afterTreeFullData, handleParseRender, { children: transform ? treeOpts.mapChildrenField : childrenField });
-                    }
-                    else {
-                        afterFullData.forEach(handleParseRender);
-                    }
-                    internalData.chartMaps = ctMaps;
                 }
+            };
+            if (treeConfig) {
+                XEUtils.eachTree(afterTreeFullData, handleParseRender, { children: transform ? treeOpts.mapChildrenField : childrenField });
             }
-            break;
+            else {
+                afterFullData.forEach(handleParseRender);
+            }
+            internalData.chartMaps = ctMaps;
         }
     }
     reactData.tableColumn = fullCols;
@@ -535,14 +686,7 @@ export default defineVxeComponent({
             tableData: [],
             tableColumn: [],
             headerGroups: [],
-            viewCellWidth: 40,
-            rowHeightStore: {
-                large: 52,
-                default: 48,
-                medium: 44,
-                small: 40,
-                mini: 36
-            }
+            viewCellWidth: 20
         };
         const internalData = createInternalData();
         return {
@@ -862,11 +1006,10 @@ export default defineVxeComponent({
             const $xeGantt = $xeGanttView.$xeGantt;
             const reactData = $xeGanttView.reactData;
             const { overflowX, overflowY, scrollXLoad, scrollYLoad } = reactData;
-            const taskViewOpts = $xeGantt.computeTaskViewOpts;
             const scrollbarXToTop = $xeGantt.computeScrollbarXToTop;
             return h('div', {
                 ref: 'refElem',
-                class: ['vxe-gantt-view', `mode--${taskViewOpts.mode || 'day'}`, {
+                class: ['vxe-gantt-view', {
                         'is--scroll-y': overflowY,
                         'is--scroll-x': overflowX,
                         'is--virtual-x': scrollXLoad,

package/es/gantt/src/gantt.js

@@ -12,6 +12,20 @@ const tableProps = VxeTableComponent.props;
 const tableMethods = {};
 const propKeys = Object.keys(tableProps);
 const defaultLayouts = [['Form'], ['Toolbar', 'Top', 'Gantt', 'Bottom', 'Pager']];
+const viewTypeLevelMaps = {
+    year: 19,
+    quarter: 17,
+    month: 15,
+    week: 13,
+    day: 11,
+    date: 9,
+    hour: 7,
+    minute: 5,
+    second: 3
+};
+function getViewTypeLevel(type) {
+    return viewTypeLevelMaps[type || 'date'] || viewTypeLevelMaps.date;
+}
 function getTableOns($xeGantt) {
     const _vm = $xeGantt;
     const $listeners = _vm.$listeners;
@@ -53,7 +67,7 @@ export default {
     mixins: [
         globalMixins.sizeMixin
     ],
-    props: Object.assign(Object.assign({}, tableProps), { columns: Array, pagerConfig: Object, proxyConfig: Object, toolbarConfig: Object, formConfig: Object, zoomConfig: Object, layouts: Array, taskConfig: Object, taskViewConfig: Object, taskBarConfig: Object, taskSplitConfig: Object, size: {
+    props: Object.assign(Object.assign({}, tableProps), { columns: Array, pagerConfig: Object, proxyConfig: Object, toolbarConfig: Object, formConfig: Object, zoomConfig: Object, layouts: Array, taskConfig: Object, taskViewScaleConfs: Object, taskViewConfig: Object, taskBarConfig: Object, taskSplitConfig: Object, size: {
             type: String,
             default: () => getConfig().gantt.size || getConfig().size
         } }),
@@ -83,7 +97,8 @@ export default {
                 currentPage: 1
             },
             showLeftView: true,
-            showRightView: true
+            showRightView: true,
+            taskScaleList: []
         };
         const internalData = createInternalData();
         return {
@@ -132,6 +147,11 @@ export default {
             const props = $xeGantt;
             return Object.assign({}, getConfig().gantt.taskConfig, props.taskConfig);
         },
+        computeTaskViewScaleMapsOpts() {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            return XEUtils.merge({}, getConfig().gantt.taskViewScaleConfs, props.taskViewScaleConfs);
+        },
         computeTaskViewOpts() {
             const $xeGantt = this;
             const props = $xeGantt;
@@ -147,6 +167,12 @@ export default {
             const props = $xeGantt;
             return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig);
         },
+        computeTaskScaleConfs() {
+            const $xeGantt = this;
+            const taskViewOpts = $xeGantt.computeTaskViewOpts;
+            const { scales } = taskViewOpts;
+            return scales;
+        },
         computeTitleField() {
             const $xeGantt = this;
             const taskOpts = $xeGantt.computeTaskOpts;
@@ -204,7 +230,7 @@ export default {
                     stys.maxHeight = maxHeight === 'auto' || maxHeight === '100%' ? '100%' : toCssUnit(maxHeight);
                 }
             }
-            if (barStyle) {
+            if (barStyle && !XEUtils.isFunction(barStyle)) {
                 const { bgColor, completedBgColor } = barStyle;
                 if (bgColor) {
                     stys['--vxe-ui-gantt-view-task-bar-background-color'] = bgColor;
@@ -383,12 +409,46 @@ export default {
         proxyConfig() {
             const $xeGantt = this;
             $xeGantt.initProxy();
+        },
+        computeTaskScaleConfs() {
+            const $xeGantt = this;
+            $xeGantt.handleTaskScaleConfig();
         }
     },
     methods: Object.assign(Object.assign({}, tableMethods), { dispatchEvent(type, params, evnt) {
             const $xeGantt = this;
             $xeGantt.$emit(type, createEvent(evnt, { $grid: null, $gantt: $xeGantt }, params));
         },
+        handleTaskScaleConfig() {
+            const $xeGantt = this;
+            const reactData = $xeGantt.reactData;
+            const taskScaleConfs = $xeGantt.computeTaskScaleConfs;
+            const taskViewScaleMapsOpts = $xeGantt.computeTaskViewScaleMapsOpts;
+            const scaleConfs = [];
+            if (taskScaleConfs) {
+                const keyMaps = {};
+                taskScaleConfs.forEach(conf => {
+                    const sConf = !conf || XEUtils.isString(conf) ? { type: conf } : conf;
+                    const { type } = sConf;
+                    if (!type || !viewTypeLevelMaps[type]) {
+                        errLog('vxe.error.errProp', [`type=${type}`, XEUtils.keys(viewTypeLevelMaps).join(',')]);
+                        return;
+                    }
+                    if (keyMaps[type]) {
+                        errLog('vxe.error.repeatProp', ['type', type]);
+                        return;
+                    }
+                    keyMaps[type] = true;
+                    scaleConfs.push(Object.assign({}, type ? taskViewScaleMapsOpts[type] || {} : {}, sConf, {
+                        level: getViewTypeLevel(type)
+                    }));
+                });
+            }
+            if (!scaleConfs.length) {
+                scaleConfs.push({ type: 'month', level: viewTypeLevelMaps.month }, { type: 'day', level: viewTypeLevelMaps.day });
+            }
+            reactData.taskScaleList = XEUtils.orderBy(scaleConfs, { field: 'level', order: 'desc' });
+        },
         initToolbar() {
             const $xeGantt = this;
             $xeGantt.$nextTick(() => {
@@ -1991,6 +2051,7 @@ export default {
                 }
             }
         });
+        $xeGantt.handleTaskScaleConfig();
         $xeGantt.initPages();
     },
     mounted() {

package/es/gantt/style.css

@@ -8,6 +8,8 @@
 
 .vxe-gantt-view--chart-row {
   position: relative;
+  width: 100%;
+  height: 0;
 }
 .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar {
   border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);