vxe-gantt 4.1.3 → 4.1.4

package/packages/gantt/src/gantt-chart.ts

@@ -20,6 +20,7 @@ export default defineVxeComponent({
     const $xeGantt = inject('$xeGantt', {} as (VxeGanttConstructor & VxeGanttPrivateMethods))
     const $xeGanttView = inject('$xeGanttView', {} as VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
 
+    const { internalData: ganttInternalData } = $xeGantt
     const { reactData, internalData } = $xeGanttView
     const { computeProgressField, computeTitleField, computeTaskBarOpts, computeScaleUnit } = $xeGantt.getComputeMaps()
 
@@ -107,13 +108,19 @@ export default defineVxeComponent({
       }
       if (showTooltip) {
         ons.onMouseover = (evnt: MouseEvent) => {
+          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: MouseEvent) => {
+          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/packages/gantt/src/gantt-view.ts

@@ -51,7 +51,8 @@ export default defineVxeComponent({
 
     const $xeGantt = inject('$xeGantt', {} as (VxeGanttConstructor & VxeGanttPrivateMethods))
 
-    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<HTMLDivElement>()
 
@@ -113,18 +114,21 @@ export default defineVxeComponent({
 
     const computeScaleDateList = computed(() => {
       const { minViewDate, maxViewDate } = reactData
+      const taskViewOpts = computeTaskViewOpts.value
       const minScale = computeMinScale.value
+      const { gridding } = taskViewOpts
       const dateList: Date[] = []
       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)
@@ -132,8 +136,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)
@@ -141,8 +146,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)
@@ -150,8 +156,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)
@@ -159,12 +166,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)
@@ -277,12 +294,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: VxeGanttDefines.ScaleDateObj = { 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: VxeGanttDefines.ScaleDateObj = { date: itemDate, yy, yyyy, M, MM, d, dd, H, HH, m, mm, s, ss, q, W, WW, E, e }
           const colMaps: Record<VxeGanttDefines.ColumnScaleType, VxeGanttDefines.ViewColumn> = {
             year: {
               field: yyyy,
@@ -415,7 +433,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
             }
           }
         }
@@ -438,7 +456,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
             }
           }
         }
@@ -461,7 +479,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
             }
           }
         }
@@ -484,7 +502,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
             }
           }
         }
@@ -508,7 +526,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
             }
           }
         }
@@ -531,7 +549,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
             }
           }
         }
@@ -554,7 +572,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
             }
           }
         }
@@ -728,16 +746,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] as HTMLDivElement
           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/packages/gantt/src/gantt.ts

@@ -28,7 +28,8 @@ function createInternalData (): GanttInternalData {
   return {
     uFoot: false,
     resizeTableWidth: 0
-    // barTipTimeout: undefined
+    // barTipTimeout: null
+    // dragBarRow: null
   }
 }
 

package/packages/ui/index.ts

@@ -80,7 +80,11 @@ setConfig({
       }
     },
     taskViewConfig: {
-      showNowLine: true
+      showNowLine: true,
+      gridding: {
+        // leftSpacing: 0,
+        // rightSpacing: 0
+      }
     },
     taskSplitConfig: {
       enabled: true,