vxe-gantt 3.0.3 → 3.0.5

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

@@ -16,20 +16,56 @@ export default defineVxeComponent({
         //
         // Render
         //
-        renderColumn(h, $xeTable, row, rowid, $rowIndex, column, $columnIndex) {
+        renderColumn(h, $xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex, column, $columnIndex) {
             const _vm = this;
             const $xeGantt = _vm.$xeGantt;
             const tableReactData = $xeTable;
             const { resizeHeightFlag } = tableReactData;
             const tableInternalData = $xeTable;
-            const { fullAllDataRowIdData } = tableInternalData;
+            const { fullAllDataRowIdData, visibleColumn } = tableInternalData;
             const cellOpts = $xeTable.computeCellOpts;
             const rowOpts = $xeTable.computeRowOpts;
             const defaultRowHeight = $xeTable.computeDefaultRowHeight;
+            const resizableOpts = $xeTable.computeResizableOpts;
+            const { isAllRowDrag } = resizableOpts;
             const rowRest = fullAllDataRowIdData[rowid] || {};
             const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0;
             const isRsHeight = resizeHeight > 0;
             const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
+            const tdVNs = [];
+            if (isAllRowDrag && rowOpts.resizable) {
+                const cellParams = {
+                    $table: $xeTable,
+                    $grid: null,
+                    $gantt: $xeGantt,
+                    seq: -1,
+                    rowid,
+                    row,
+                    rowIndex,
+                    $rowIndex,
+                    _rowIndex,
+                    column: visibleColumn[0],
+                    columnIndex: 0,
+                    $columnIndex: 0,
+                    _columnIndex: 0,
+                    fixed: '',
+                    type: '',
+                    isHidden: false,
+                    isEdit: false,
+                    level: -1,
+                    // 已废弃属性
+                    visibleData: [],
+                    data: [],
+                    items: []
+                };
+                tdVNs.push(h('div', {
+                    class: 'vxe-gantt-view-cell--row-resizable',
+                    on: {
+                        mousedown: (evnt) => $xeTable.handleRowResizeMousedownEvent(evnt, cellParams),
+                        dblclick: (evnt) => $xeTable.handleRowResizeDblclickEvent(evnt, cellParams)
+                    }
+                }));
+            }
             return h('td', {
                 key: $columnIndex,
                 class: ['vxe-gantt-view--body-column', {
@@ -46,7 +82,7 @@ export default defineVxeComponent({
                         $xeGantt.handleTaskCellDblclickEvent(evnt, { row, column });
                     }
                 }
-            });
+            }, tdVNs);
         },
         renderRows(h, $xeTable, tableData) {
             const _vm = this;
@@ -55,7 +91,7 @@ export default defineVxeComponent({
             const tableProps = $xeTable;
             const { treeConfig, stripe, highlightHoverRow, editConfig } = tableProps;
             const tableReactData = $xeTable;
-            const { treeExpandedFlag, selectRadioRow, pendingRowFlag } = tableReactData;
+            const { treeExpandedFlag, selectRadioRow, pendingRowFlag, isRowGroupStatus } = tableReactData;
             const tableInternalData = $xeTable;
             const { fullAllDataRowIdData, treeExpandedMaps, pendingRowMaps } = tableInternalData;
             const radioOpts = $xeTable.computeRadioOpts;
@@ -90,6 +126,12 @@ export default defineVxeComponent({
                         $xeTable.clearHoverRow();
                     };
                 }
+                // 拖拽行事件
+                if (rowOpts.drag && !isRowGroupStatus && (!treeConfig || transform)) {
+                    trOns.dragstart = $xeTable.handleRowDragDragstartEvent;
+                    trOns.dragend = $xeTable.handleRowDragDragendEvent;
+                    trOns.dragover = $xeTable.handleRowDragDragoverEvent;
+                }
                 trVNs.push(h('tr', {
                     key: treeConfig ? rowid : $rowIndex,
                     class: ['vxe-gantt-view--body-row', {
@@ -103,7 +145,7 @@ export default defineVxeComponent({
                         rowid
                     },
                     on: trOns
-                }, tableColumn.map((column, $columnIndex) => _vm.renderColumn(h, $xeTable, row, rowid, $rowIndex, column, $columnIndex))));
+                }, tableColumn.map((column, $columnIndex) => _vm.renderColumn(h, $xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex, column, $columnIndex))));
                 let isExpandTree = false;
                 let rowChildren = [];
                 if (treeConfig && !scrollYLoad && !transform) {

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: {
@@ -46,18 +48,32 @@ export default defineVxeComponent({
                                 }
                             });
                         })),
-                        h('thead', {}, headerGroups.map((cols, rIndex) => {
+                        h('thead', {}, headerGroups.map(({ scaleItem, columns }, $rowIndex) => {
+                            const { type, titleMethod } = scaleItem;
                             return h('tr', {
-                                key: rIndex
-                            }, cols.map((column, cIndex) => {
+                                key: $rowIndex
+                            }, columns.map((column, cIndex) => {
+                                const dateObj = column.params;
+                                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);
+                                    }
+                                }
+                                if (titleMethod) {
+                                    label = `${titleMethod({ scaleObj: scaleItem, title: label, dateObj: dateObj, $rowIndex })}`;
+                                }
                                 return h('th', {
                                     key: cIndex,
                                     class: 'vxe-gantt-view--header-column',
                                     attrs: {
-                                        colspan: column.children ? column.children.length : null,
-                                        title: `${column.field}`
+                                        colspan: column.childCount || null,
+                                        title: label
                                     }
-                                }, column.title);
+                                }, label);
                             }));
                         }))
                     ])

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,
+                    params: dateObj
+                },
+                quarter: {
+                    field: `${yyyy}_q${q}`,
+                    title: q,
+                    params: dateObj
+                },
+                month: {
+                    field: `${yyyy}_${MM}`,
+                    title: MM,
+                    params: dateObj
+                },
+                week: {
+                    field: `${yyyy}_W${W}`,
+                    title: W,
+                    params: dateObj
+                },
+                day: {
+                    field: `${yyyy}_${MM}_${dd}_E${E}`,
+                    title: E,
+                    params: dateObj
+                },
+                date: {
+                    field: `${yyyy}_${MM}_${dd}`,
+                    title: dd,
+                    params: dateObj
+                },
+                hour: {
+                    field: `${yyyy}_${MM}_${dd}_${HH}`,
+                    title: HH,
+                    params: dateObj
+                },
+                minute: {
+                    field: `${yyyy}_${MM}_${dd}_${HH}_${mm}`,
+                    title: mm,
+                    params: dateObj
+                },
+                second: {
+                    field: `${yyyy}_${MM}_${dd}_${HH}_${mm}_${ss}`,
+                    title: ss,
+                    params: 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;
@@ -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(() => {
@@ -1709,6 +1769,7 @@ export default {
             const slots = $xeGantt.$scopedSlots;
             const tableProps = $xeGantt.computeTableProps;
             return h('div', {
+                ref: 'refTableWrapper',
                 class: 'vxe-gantt--table-wrapper'
             }, [
                 h(VxeTableComponent, {
@@ -1990,6 +2051,7 @@ export default {
                 }
             }
         });
+        $xeGantt.handleTaskScaleConfig();
         $xeGantt.initPages();
     },
     mounted() {