vxe-gantt 4.1.2 → 4.1.4

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

@@ -12,6 +12,7 @@ export default defineVxeComponent({
     setup() {
         const $xeGantt = inject('$xeGantt', {});
         const $xeGanttView = inject('$xeGanttView', {});
+        const { internalData: ganttInternalData } = $xeGantt;
         const { reactData, internalData } = $xeGanttView;
         const { computeProgressField, computeTitleField, computeTaskBarOpts, computeScaleUnit } = $xeGantt.getComputeMaps();
         const refElem = ref();
@@ -84,13 +85,19 @@ export default defineVxeComponent({
             };
             if (showTooltip) {
                 ons.onMouseover = (evnt) => {
+                    const { dragBarRow } = ganttInternalData;
                     const ttParams = Object.assign({ $event: evnt }, ctParams);
-                    $xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams);
+                    if (!dragBarRow) {
+                        $xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams);
+                    }
                     $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt);
                 };
                 ons.onMouseleave = (evnt) => {
+                    const { dragBarRow } = ganttInternalData;
                     const ttParams = Object.assign({ $event: evnt }, ctParams);
-                    $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams);
+                    if (!dragBarRow) {
+                        $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams);
+                    }
                     $xeGantt.dispatchEvent('task-bar-mouseleave', ttParams, evnt);
                 };
             }

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

@@ -42,7 +42,8 @@ export default defineVxeComponent({
     setup(props, context) {
         const xID = XEUtils.uniqueId();
         const $xeGantt = inject('$xeGantt', {});
-        const { computeTaskOpts, computeStartField, computeEndField, computeScrollbarOpts, computeScrollbarXToTop, computeScrollbarYToLeft, computeScaleUnit, computeWeekScale, computeMinScale } = $xeGantt.getComputeMaps();
+        const { internalData: ganttInternalData } = $xeGantt;
+        const { computeTaskOpts, computeTaskViewOpts, computeStartField, computeEndField, computeScrollbarOpts, computeScrollbarXToTop, computeScrollbarYToLeft, computeScaleUnit, computeWeekScale, computeMinScale } = $xeGantt.getComputeMaps();
         const refElem = ref();
         const refScrollXVirtualElem = ref();
         const refScrollYVirtualElem = ref();
@@ -93,17 +94,20 @@ export default defineVxeComponent({
         };
         const computeScaleDateList = computed(() => {
             const { minViewDate, maxViewDate } = reactData;
+            const taskViewOpts = computeTaskViewOpts.value;
             const minScale = computeMinScale.value;
+            const { gridding } = taskViewOpts;
             const dateList = [];
             if (!minViewDate || !maxViewDate) {
                 return dateList;
             }
-            const startTime = minViewDate.getTime();
-            const endTime = maxViewDate.getTime();
+            const leftSize = -XEUtils.toNumber(gridding ? gridding.leftSpacing || 0 : 0);
+            const rightSize = XEUtils.toNumber(gridding ? gridding.rightSpacing || 0 : 0);
             switch (minScale.type) {
                 case 'year': {
-                    let currDate = XEUtils.getWhatYear(minViewDate, 0, 'first');
-                    while (currDate <= maxViewDate) {
+                    let currDate = XEUtils.getWhatYear(minViewDate, leftSize, 'first');
+                    const endDate = XEUtils.getWhatYear(maxViewDate, rightSize, 'first');
+                    while (currDate <= endDate) {
                         const itemDate = currDate;
                         dateList.push(itemDate);
                         currDate = XEUtils.getWhatYear(currDate, 1);
@@ -111,8 +115,9 @@ export default defineVxeComponent({
                     break;
                 }
                 case 'quarter': {
-                    let currDate = XEUtils.getWhatQuarter(minViewDate, 0, 'first');
-                    while (currDate <= maxViewDate) {
+                    let currDate = XEUtils.getWhatQuarter(minViewDate, leftSize, 'first');
+                    const endDate = XEUtils.getWhatQuarter(maxViewDate, rightSize, 'first');
+                    while (currDate <= endDate) {
                         const itemDate = currDate;
                         dateList.push(itemDate);
                         currDate = XEUtils.getWhatQuarter(currDate, 1);
@@ -120,8 +125,9 @@ export default defineVxeComponent({
                     break;
                 }
                 case 'month': {
-                    let currDate = XEUtils.getWhatMonth(minViewDate, 0, 'first');
-                    while (currDate <= maxViewDate) {
+                    let currDate = XEUtils.getWhatMonth(minViewDate, leftSize, 'first');
+                    const endDate = XEUtils.getWhatMonth(maxViewDate, rightSize, 'first');
+                    while (currDate <= endDate) {
                         const itemDate = currDate;
                         dateList.push(itemDate);
                         currDate = XEUtils.getWhatMonth(currDate, 1);
@@ -129,8 +135,9 @@ export default defineVxeComponent({
                     break;
                 }
                 case 'week': {
-                    let currDate = XEUtils.getWhatWeek(minViewDate, 0, minScale.startDay, minScale.startDay);
-                    while (currDate <= maxViewDate) {
+                    let currDate = XEUtils.getWhatWeek(minViewDate, leftSize, minScale.startDay, minScale.startDay);
+                    const endDate = XEUtils.getWhatWeek(maxViewDate, rightSize, minScale.startDay, minScale.startDay);
+                    while (currDate <= endDate) {
                         const itemDate = currDate;
                         dateList.push(itemDate);
                         currDate = XEUtils.getWhatWeek(currDate, 1);
@@ -138,12 +145,22 @@ export default defineVxeComponent({
                     break;
                 }
                 case 'day':
-                case 'date':
+                case 'date': {
+                    let currDate = XEUtils.getWhatDay(minViewDate, leftSize, 'first');
+                    const endDate = XEUtils.getWhatDay(maxViewDate, rightSize, 'first');
+                    while (currDate <= endDate) {
+                        const itemDate = currDate;
+                        dateList.push(itemDate);
+                        currDate = XEUtils.getWhatDay(currDate, 1);
+                    }
+                    break;
+                }
                 case 'hour':
                 case 'minute':
                 case 'second': {
                     const gapTime = getStandardGapTime(minScale.type);
-                    let currTime = startTime;
+                    let currTime = minViewDate.getTime() + (leftSize * gapTime);
+                    const endTime = maxViewDate.getTime() + (rightSize * gapTime);
                     while (currTime <= endTime) {
                         const itemDate = new Date(currTime);
                         dateList.push(itemDate);
@@ -246,12 +263,13 @@ export default defineVxeComponent({
                 };
                 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 [yy, yyyy, M, MM, d, dd, H, HH, m, mm, s, ss] = XEUtils.toDateString(itemDate, 'yy-yyyy-M-MM-d-dd-H-HH-m-mm-s-ss').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 = { date: itemDate, yy: yyyy, M: MM, d: dd, H: HH, m: mm, s: ss, q, W, E, e };
+                    const W = `${XEUtils.getYearWeek(itemDate, weekScale ? weekScale.startDay : undefined)}`;
+                    const WW = XEUtils.padStart(W, 2, '0');
+                    const dateObj = { date: itemDate, yy, yyyy, M, MM, d, dd, H, HH, m, mm, s, ss, q, W, WW, E, e };
                     const colMaps = {
                         year: {
                             field: yyyy,
@@ -380,7 +398,7 @@ export default defineVxeComponent({
                         const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
                         return {
                             offsetLeftSize,
-                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
                         };
                     };
                 }
@@ -403,7 +421,7 @@ export default defineVxeComponent({
                         const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
                         return {
                             offsetLeftSize,
-                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
                         };
                     };
                 }
@@ -426,7 +444,7 @@ export default defineVxeComponent({
                         const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
                         return {
                             offsetLeftSize,
-                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
                         };
                     };
                 }
@@ -449,7 +467,7 @@ export default defineVxeComponent({
                         const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
                         return {
                             offsetLeftSize,
-                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
                         };
                     };
                 }
@@ -473,7 +491,7 @@ export default defineVxeComponent({
                         const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
                         return {
                             offsetLeftSize,
-                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
                         };
                     };
                 }
@@ -496,7 +514,7 @@ export default defineVxeComponent({
                         const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
                         return {
                             offsetLeftSize,
-                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
                         };
                     };
                 }
@@ -519,7 +537,7 @@ export default defineVxeComponent({
                         const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
                         return {
                             offsetLeftSize,
-                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
                         };
                     };
                 }
@@ -687,16 +705,21 @@ export default defineVxeComponent({
             }
         };
         const updateChart = () => {
+            const { dragBarRow } = ganttInternalData;
             const { viewCellWidth } = reactData;
             const { elemStore, chartMaps } = internalData;
+            const $xeTable = internalData.xeTable;
             const chartWrapper = getRefElem(elemStore['main-chart-wrapper']);
-            if (chartWrapper) {
+            if (chartWrapper && $xeTable) {
                 XEUtils.arrayEach(chartWrapper.children, (rowEl) => {
                     const barEl = rowEl.children[0];
                     if (!barEl) {
                         return;
                     }
                     const rowid = rowEl.getAttribute('rowid');
+                    if (dragBarRow && $xeTable.getRowid(dragBarRow) === rowid) {
+                        return;
+                    }
                     const rowRest = rowid ? chartMaps[rowid] : null;
                     barEl.style.left = `${rowRest ? viewCellWidth * rowRest.oLeftSize : 0}px`;
                     barEl.style.width = `${rowRest ? viewCellWidth * rowRest.oWidthSize : 0}px`;

package/es/gantt/src/gantt.js

@@ -19,7 +19,8 @@ function createInternalData() {
     return {
         uFoot: false,
         resizeTableWidth: 0
-        // barTipTimeout: undefined
+        // barTipTimeout: null
+        // dragBarRow: null
     };
 }
 const viewTypeLevelMaps = {
@@ -379,6 +380,7 @@ export default defineVxeComponent({
             refForm,
             refToolbar,
             refPager,
+            refGanttView,
             refGanttContainerElem,
             refClassifyWrapperElem,
             refPopupContainerElem
@@ -423,28 +425,24 @@ export default defineVxeComponent({
             const taskScaleConfs = computeTaskViewScales.value;
             const taskViewScaleOpts = computeTaskViewScaleOpts.value;
             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 ? taskViewScaleOpts[type] || {} : {}, sConf, {
-                        level: getViewTypeLevel(type)
-                    }));
-                });
-            }
-            if (!scaleConfs.length) {
-                scaleConfs.push({ type: 'month', level: viewTypeLevelMaps.month }, { type: 'date', level: viewTypeLevelMaps.date });
-            }
+            const keyMaps = {};
+            const scaleList = (taskScaleConfs && taskScaleConfs.length ? taskScaleConfs : ['month', 'date']);
+            scaleList.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 ? taskViewScaleOpts[type] || {} : {}, sConf, {
+                    level: getViewTypeLevel(type)
+                }));
+            });
             reactData.taskScaleList = XEUtils.orderBy(scaleConfs, { field: 'level', order: 'desc' });
         };
         const initToolbar = () => {

package/es/ui/index.js

@@ -1,7 +1,9 @@
 import { VxeUI } from '@vxe-ui/core';
 import { errLog } from './src/log';
 const { setConfig, setIcon, checkVersion } = VxeUI;
-VxeUI.ganttVersion = "4.1.2";
+VxeUI.ganttVersion = "4.1.4";
+const ymdFormat = 'yyyy-MM-dd';
+const ymdhmsFormat = 'yyyy-MM-dd HH:mm:ss';
 setConfig({
     gantt: {
         // size: null,
@@ -44,12 +46,41 @@ setConfig({
             enterable: true
         },
         taskViewScaleConfig: {
+            year: {
+                valueFormat: ymdFormat
+            },
+            quarter: {
+                valueFormat: ymdFormat
+            },
+            month: {
+                valueFormat: ymdFormat
+            },
             week: {
-                startDay: 1
+                startDay: 1,
+                valueFormat: ymdFormat
+            },
+            day: {
+                valueFormat: ymdFormat
+            },
+            date: {
+                valueFormat: ymdFormat
+            },
+            hour: {
+                valueFormat: ymdhmsFormat
+            },
+            minute: {
+                valueFormat: ymdhmsFormat
+            },
+            second: {
+                valueFormat: ymdhmsFormat
             }
         },
         taskViewConfig: {
-            showNowLine: true
+            showNowLine: true,
+            gridding: {
+            // leftSpacing: 0,
+            // rightSpacing: 0
+            }
         },
         taskSplitConfig: {
             enabled: true,

package/es/ui/src/log.js

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

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

@@ -21,6 +21,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
   setup() {
     const $xeGantt = (0, _vue.inject)('$xeGantt', {});
     const $xeGanttView = (0, _vue.inject)('$xeGanttView', {});
+    const {
+      internalData: ganttInternalData
+    } = $xeGantt;
     const {
       reactData,
       internalData
@@ -131,17 +134,27 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       };
       if (showTooltip) {
         ons.onMouseover = evnt => {
+          const {
+            dragBarRow
+          } = ganttInternalData;
           const ttParams = Object.assign({
             $event: evnt
           }, ctParams);
-          $xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams);
+          if (!dragBarRow) {
+            $xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams);
+          }
           $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt);
         };
         ons.onMouseleave = evnt => {
+          const {
+            dragBarRow
+          } = ganttInternalData;
           const ttParams = Object.assign({
             $event: evnt
           }, ctParams);
-          $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams);
+          if (!dragBarRow) {
+            $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams);
+          }
           $xeGantt.dispatchEvent('task-bar-mouseleave', ttParams, evnt);
         };
       }

package/lib/gantt/src/gantt-chart.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")),_util=require("./util"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let renderEmptyElement=_core.VxeUI.renderEmptyElement,sourceType="gantt",viewType="chart";var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeGanttViewChart",setup(){let C=(0,_vue.inject)("$xeGantt",{}),a=(0,_vue.inject)("$xeGanttView",{}),{reactData:r,internalData:t}=a,{computeProgressField:D,computeTitleField:M,computeTaskBarOpts:B,computeScaleUnit:q}=C.getComputeMaps(),l=(0,_vue.ref)(),w=(e,t,a,r,l,n)=>{var o=e.props.treeConfig,u=e.reactData.resizeHeightFlag,i=e.internalData.fullAllDataRowIdData,{computeCellOpts:e,computeRowOpts:s,computeDefaultRowHeight:c}=e.getComputeMaps(),e=e.value,s=s.value,c=c.value,v=C.context.slots,v=v.taskBar||v["task-bar"],d=M.value,p=D.value,g=B.value,h=q.value;let m={$gantt:C,row:t,scaleType:h};var{showProgress:g,showContent:w,contentMethod:x,barStyle:_,drag:f,showTooltip:T}=g,E=_xeUtils.default.isFunction(_),_=(_?E?_(m):_:{})||{},k=_.round,i=i[a]||{},u=0<(u?i.resizeHeight:0),i=(0,_util.getCellRestHeight)(i,e,s,c);let b=(0,_utils.getStringValue)(_xeUtils.default.get(t,d));e={},s={width:`${(g?Math.min(100,Math.max(0,_xeUtils.default.toNumber(_xeUtils.default.get(t,p)))):0)||0}%`};E&&({bgColor:c,completedBgColor:d}=_,c&&(e.backgroundColor=c),d)&&(s.backgroundColor=d),x&&(b=(0,_utils.getStringValue)(x({row:t,title:b,scaleType:h})));let y={$gantt:C,source:sourceType,type:viewType,scaleType:h,row:t,$rowIndex:l,rowIndex:r,_rowIndex:n};p={onClick(e){C.handleTaskBarClickEvent(e,m)},onDblclick(e){C.handleTaskBarDblclickEvent(e,m)},onMousedown(e){C.handleTaskBarMousedownEvent&&C.handleTaskBarMousedownEvent(e,m)}};return T&&(p.onMouseover=e=>{var t=Object.assign({$event:e},y);C.triggerTaskBarTooltipEvent(e,t),C.dispatchEvent("task-bar-mouseenter",t,e)},p.onMouseleave=e=>{var t=Object.assign({$event:e},y);C.handleTaskBarTooltipLeaveEvent(e,t),C.dispatchEvent("task-bar-mouseleave",t,e)}),(0,_vue.h)("div",{key:o?a:l,rowid:a,class:["vxe-gantt-view--chart-row",{"is--round":k,"is--drag":f,"col--rs-height":u}],style:{height:i+"px"},onContextmenu(e){C.handleTaskBarContextmenuEvent(e,y)}},[(0,_vue.h)("div",Object.assign({class:v?"vxe-gantt-view--chart-custom-bar":"vxe-gantt-view--chart-bar",style:e,rowid:a},p),v?C.callSlot(v,m):[g?(0,_vue.h)("div",{class:"vxe-gantt-view--chart-progress",style:s}):renderEmptyElement(C),w?(0,_vue.h)("div",{class:"vxe-gantt-view--chart-content"},b):renderEmptyElement(C)])])},x=(i,e)=>{let s=i.props.treeConfig,c=i.reactData.treeExpandedFlag,{fullAllDataRowIdData:v,treeExpandedMaps:d}=i.internalData;var t=i.getComputeMaps().computeTreeOpts,t=t.value;let p=t.transform,g=t.children||t.childrenField,h=r.scrollYLoad,m=[];return e.forEach((e,t)=>{var a=i?i.getRowid(e):"",r=v[a]||{};let l=t,n=-1,o=(r&&(l=r.index,n=r._index),m.push(w(i,e,a,l,t,n)),!1),u=[];!s||h||p||(u=e[g],o=!!c&&u&&0<u.length&&!!d[a]),o&&m.push(...x(i,u))}),m};return(0,_vue.onMounted)(()=>{var e=t.elemStore;e["main-chart-wrapper"]=l}),(0,_vue.onUnmounted)(()=>{var e=t.elemStore;e["main-chart-wrapper"]=null}),()=>{var e=a.internalData.xeTable,t=r.tableData;return(0,_vue.h)("div",{ref:l,class:"vxe-gantt-view--chart-wrapper"},e?x(e,t):[])}}});
+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")),_util=require("./util"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let renderEmptyElement=_core.VxeUI.renderEmptyElement,sourceType="gantt",viewType="chart";var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeGanttViewChart",setup(){let C=(0,_vue.inject)("$xeGantt",{}),a=(0,_vue.inject)("$xeGanttView",{}),D=C.internalData,{reactData:r,internalData:t}=a,{computeProgressField:M,computeTitleField:B,computeTaskBarOpts:R,computeScaleUnit:q}=C.getComputeMaps(),l=(0,_vue.ref)(),w=(e,t,a,r,l,n)=>{var o=e.props.treeConfig,u=e.reactData.resizeHeightFlag,i=e.internalData.fullAllDataRowIdData,{computeCellOpts:e,computeRowOpts:s,computeDefaultRowHeight:c}=e.getComputeMaps(),e=e.value,s=s.value,c=c.value,v=C.context.slots,v=v.taskBar||v["task-bar"],d=B.value,p=M.value,g=R.value,h=q.value;let m={$gantt:C,row:t,scaleType:h};var{showProgress:g,showContent:w,contentMethod:x,barStyle:_,drag:f,showTooltip:T}=g,E=_xeUtils.default.isFunction(_),_=(_?E?_(m):_:{})||{},k=_.round,i=i[a]||{},u=0<(u?i.resizeHeight:0),i=(0,_util.getCellRestHeight)(i,e,s,c);let b=(0,_utils.getStringValue)(_xeUtils.default.get(t,d));e={},s={width:`${(g?Math.min(100,Math.max(0,_xeUtils.default.toNumber(_xeUtils.default.get(t,p)))):0)||0}%`};E&&({bgColor:c,completedBgColor:d}=_,c&&(e.backgroundColor=c),d)&&(s.backgroundColor=d),x&&(b=(0,_utils.getStringValue)(x({row:t,title:b,scaleType:h})));let y={$gantt:C,source:sourceType,type:viewType,scaleType:h,row:t,$rowIndex:l,rowIndex:r,_rowIndex:n};p={onClick(e){C.handleTaskBarClickEvent(e,m)},onDblclick(e){C.handleTaskBarDblclickEvent(e,m)},onMousedown(e){C.handleTaskBarMousedownEvent&&C.handleTaskBarMousedownEvent(e,m)}};return T&&(p.onMouseover=e=>{var t=D.dragBarRow,a=Object.assign({$event:e},y);t||C.triggerTaskBarTooltipEvent(e,a),C.dispatchEvent("task-bar-mouseenter",a,e)},p.onMouseleave=e=>{var t=D.dragBarRow,a=Object.assign({$event:e},y);t||C.handleTaskBarTooltipLeaveEvent(e,a),C.dispatchEvent("task-bar-mouseleave",a,e)}),(0,_vue.h)("div",{key:o?a:l,rowid:a,class:["vxe-gantt-view--chart-row",{"is--round":k,"is--drag":f,"col--rs-height":u}],style:{height:i+"px"},onContextmenu(e){C.handleTaskBarContextmenuEvent(e,y)}},[(0,_vue.h)("div",Object.assign({class:v?"vxe-gantt-view--chart-custom-bar":"vxe-gantt-view--chart-bar",style:e,rowid:a},p),v?C.callSlot(v,m):[g?(0,_vue.h)("div",{class:"vxe-gantt-view--chart-progress",style:s}):renderEmptyElement(C),w?(0,_vue.h)("div",{class:"vxe-gantt-view--chart-content"},b):renderEmptyElement(C)])])},x=(i,e)=>{let s=i.props.treeConfig,c=i.reactData.treeExpandedFlag,{fullAllDataRowIdData:v,treeExpandedMaps:d}=i.internalData;var t=i.getComputeMaps().computeTreeOpts,t=t.value;let p=t.transform,g=t.children||t.childrenField,h=r.scrollYLoad,m=[];return e.forEach((e,t)=>{var a=i?i.getRowid(e):"",r=v[a]||{};let l=t,n=-1,o=(r&&(l=r.index,n=r._index),m.push(w(i,e,a,l,t,n)),!1),u=[];!s||h||p||(u=e[g],o=!!c&&u&&0<u.length&&!!d[a]),o&&m.push(...x(i,u))}),m};return(0,_vue.onMounted)(()=>{var e=t.elemStore;e["main-chart-wrapper"]=l}),(0,_vue.onUnmounted)(()=>{var e=t.elemStore;e["main-chart-wrapper"]=null}),()=>{var e=a.internalData.xeTable,t=r.tableData;return(0,_vue.h)("div",{ref:l,class:"vxe-gantt-view--chart-wrapper"},e?x(e,t):[])}}});

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

@@ -51,8 +51,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
   setup(props, context) {
     const xID = _xeUtils.default.uniqueId();
     const $xeGantt = (0, _vue.inject)('$xeGantt', {});
+    const {
+      internalData: ganttInternalData
+    } = $xeGantt;
     const {
       computeTaskOpts,
+      computeTaskViewOpts,
       computeStartField,
       computeEndField,
       computeScrollbarOpts,
@@ -115,18 +119,23 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         minViewDate,
         maxViewDate
       } = reactData;
+      const taskViewOpts = computeTaskViewOpts.value;
       const minScale = computeMinScale.value;
+      const {
+        gridding
+      } = taskViewOpts;
       const dateList = [];
       if (!minViewDate || !maxViewDate) {
         return dateList;
       }
-      const startTime = minViewDate.getTime();
-      const endTime = maxViewDate.getTime();
+      const leftSize = -_xeUtils.default.toNumber(gridding ? gridding.leftSpacing || 0 : 0);
+      const rightSize = _xeUtils.default.toNumber(gridding ? gridding.rightSpacing || 0 : 0);
       switch (minScale.type) {
         case 'year':
           {
-            let currDate = _xeUtils.default.getWhatYear(minViewDate, 0, 'first');
-            while (currDate <= maxViewDate) {
+            let currDate = _xeUtils.default.getWhatYear(minViewDate, leftSize, 'first');
+            const endDate = _xeUtils.default.getWhatYear(maxViewDate, rightSize, 'first');
+            while (currDate <= endDate) {
               const itemDate = currDate;
               dateList.push(itemDate);
               currDate = _xeUtils.default.getWhatYear(currDate, 1);
@@ -135,8 +144,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           }
         case 'quarter':
           {
-            let currDate = _xeUtils.default.getWhatQuarter(minViewDate, 0, 'first');
-            while (currDate <= maxViewDate) {
+            let currDate = _xeUtils.default.getWhatQuarter(minViewDate, leftSize, 'first');
+            const endDate = _xeUtils.default.getWhatQuarter(maxViewDate, rightSize, 'first');
+            while (currDate <= endDate) {
               const itemDate = currDate;
               dateList.push(itemDate);
               currDate = _xeUtils.default.getWhatQuarter(currDate, 1);
@@ -145,8 +155,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           }
         case 'month':
           {
-            let currDate = _xeUtils.default.getWhatMonth(minViewDate, 0, 'first');
-            while (currDate <= maxViewDate) {
+            let currDate = _xeUtils.default.getWhatMonth(minViewDate, leftSize, 'first');
+            const endDate = _xeUtils.default.getWhatMonth(maxViewDate, rightSize, 'first');
+            while (currDate <= endDate) {
               const itemDate = currDate;
               dateList.push(itemDate);
               currDate = _xeUtils.default.getWhatMonth(currDate, 1);
@@ -155,8 +166,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           }
         case 'week':
           {
-            let currDate = _xeUtils.default.getWhatWeek(minViewDate, 0, minScale.startDay, minScale.startDay);
-            while (currDate <= maxViewDate) {
+            let currDate = _xeUtils.default.getWhatWeek(minViewDate, leftSize, minScale.startDay, minScale.startDay);
+            const endDate = _xeUtils.default.getWhatWeek(maxViewDate, rightSize, minScale.startDay, minScale.startDay);
+            while (currDate <= endDate) {
               const itemDate = currDate;
               dateList.push(itemDate);
               currDate = _xeUtils.default.getWhatWeek(currDate, 1);
@@ -165,12 +177,23 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           }
         case 'day':
         case 'date':
+          {
+            let currDate = _xeUtils.default.getWhatDay(minViewDate, leftSize, 'first');
+            const endDate = _xeUtils.default.getWhatDay(maxViewDate, rightSize, 'first');
+            while (currDate <= endDate) {
+              const itemDate = currDate;
+              dateList.push(itemDate);
+              currDate = _xeUtils.default.getWhatDay(currDate, 1);
+            }
+            break;
+          }
         case 'hour':
         case 'minute':
         case 'second':
           {
             const gapTime = (0, _util.getStandardGapTime)(minScale.type);
-            let currTime = startTime;
+            let currTime = minViewDate.getTime() + leftSize * gapTime;
+            const endTime = maxViewDate.getTime() + rightSize * gapTime;
             while (currTime <= endTime) {
               const itemDate = new Date(currTime);
               dateList.push(itemDate);
@@ -279,21 +302,29 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         };
         for (let i = 0; i < scaleDateList.length; i++) {
           const itemDate = scaleDateList[i];
-          const [yyyy, MM, dd, HH, mm, ss] = _xeUtils.default.toDateString(itemDate, 'yyyy-M-d-H-m-s').split('-');
+          const [yy, yyyy, M, MM, d, dd, H, HH, m, mm, s, ss] = _xeUtils.default.toDateString(itemDate, 'yy-yyyy-M-MM-d-dd-H-HH-m-mm-s-ss').split('-');
           const e = itemDate.getDay();
           const E = e + 1;
           const q = Math.ceil((itemDate.getMonth() + 1) / 3);
-          const W = _xeUtils.default.getYearWeek(itemDate, weekScale ? weekScale.startDay : undefined);
+          const W = `${_xeUtils.default.getYearWeek(itemDate, weekScale ? weekScale.startDay : undefined)}`;
+          const WW = _xeUtils.default.padStart(W, 2, '0');
           const dateObj = {
             date: itemDate,
-            yy: yyyy,
-            M: MM,
-            d: dd,
-            H: HH,
-            m: mm,
-            s: ss,
+            yy,
+            yyyy,
+            M,
+            MM,
+            d,
+            dd,
+            H,
+            HH,
+            m,
+            mm,
+            s,
+            ss,
             q,
             W,
+            WW,
             E,
             e
           };
@@ -430,7 +461,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
               return {
                 offsetLeftSize,
-                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
               };
             };
           }
@@ -456,7 +487,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
               return {
                 offsetLeftSize,
-                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
               };
             };
           }
@@ -482,7 +513,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
               return {
                 offsetLeftSize,
-                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
               };
             };
           }
@@ -514,7 +545,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
               return {
                 offsetLeftSize,
-                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
               };
             };
           }
@@ -541,7 +572,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
               return {
                 offsetLeftSize,
-                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
               };
             };
           }
@@ -567,7 +598,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
               return {
                 offsetLeftSize,
-                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
               };
             };
           }
@@ -593,7 +624,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
               return {
                 offsetLeftSize,
-                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize + 1
               };
             };
           }
@@ -808,6 +839,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
     };
     const updateChart = () => {
+      const {
+        dragBarRow
+      } = ganttInternalData;
       const {
         viewCellWidth
       } = reactData;
@@ -815,14 +849,18 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         elemStore,
         chartMaps
       } = internalData;
+      const $xeTable = internalData.xeTable;
       const chartWrapper = (0, _util.getRefElem)(elemStore['main-chart-wrapper']);
-      if (chartWrapper) {
+      if (chartWrapper && $xeTable) {
         _xeUtils.default.arrayEach(chartWrapper.children, rowEl => {
           const barEl = rowEl.children[0];
           if (!barEl) {
             return;
           }
           const rowid = rowEl.getAttribute('rowid');
+          if (dragBarRow && $xeTable.getRowid(dragBarRow) === rowid) {
+            return;
+          }
           const rowRest = rowid ? chartMaps[rowid] : null;
           barEl.style.left = `${rowRest ? viewCellWidth * rowRest.oLeftSize : 0}px`;
           barEl.style.width = `${rowRest ? viewCellWidth * rowRest.oWidthSize : 0}px`;