vxe-gantt 3.0.27 → 3.1.1

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

@@ -2,7 +2,7 @@ import { VNode, CreateElement } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { VxeUI } from '@vxe-ui/core'
 import { setScrollTop, setScrollLeft, removeClass, addClass } from '../../ui/src/dom'
-import { getRefElem } from './util'
+import { getRefElem, getStandardGapTime } from './util'
 import XEUtils from 'xe-utils'
 import GanttViewHeaderComponent from './gantt-header'
 import GanttViewBodyComponent from './gantt-body'
@@ -14,6 +14,8 @@ import type { VxeGanttViewConstructor, GanttViewReactData, VxeGanttDefines, VxeG
 const { globalEvents } = VxeUI
 
 const sourceType = 'gantt'
+const minuteMs = 1000 * 60
+const dayMs = minuteMs * 60 * 24
 
 function createInternalData (): GanttViewInternalData {
   return {
@@ -76,41 +78,19 @@ function updateTodayData ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPr
   }
 }
 
-function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+function handleColumnHeader ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
   const $xeGantt = $xeGanttView.$xeGantt
-  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 minScale = XEUtils.last(taskScaleList)
+  const scaleUnit = $xeGantt.computeScaleUnit
+  const minScale = $xeGantt.computeMinScale
+  const weekScale = $xeGantt.computeWeekScale
+  const scaleDateList = $xeGanttView.computeScaleDateList
   const fullCols: VxeGanttDefines.ViewColumn[] = []
   const groupCols: VxeGanttDefines.GroupColumn[] = []
-  if (minScale && minViewDate && maxViewDate) {
-    const minSType = minScale.type
-    const weekScale = taskScaleList.find(item => item.type === 'week')
-    let gapTime = 1000 * 60 * 60 * 24
-    switch (minScale.type) {
-      case 'hour':
-        gapTime = 1000 * 60 * 60
-        break
-      case 'minute':
-        gapTime = 1000 * 60
-        break
-      case 'second':
-        gapTime = 1000
-        break
-      default: {
-        break
-      }
-    }
-    const currTime = minViewDate.getTime()
-    const diffDayNum = maxViewDate.getTime() - minViewDate.getTime()
-    const countSize = Math.max(5, Math.floor(diffDayNum / gapTime) + 1)
 
+  if (minScale && scaleUnit && scaleDateList.length) {
     const renderListMaps: Record<VxeGanttDefines.ColumnScaleType, VxeGanttDefines.ViewColumn[]> = {
       year: [],
       quarter: [],
@@ -136,7 +116,7 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
     }
 
     const handleData = (type: VxeGanttDefines.ColumnScaleType, colMaps: Record<VxeGanttDefines.ColumnScaleType, VxeGanttDefines.ViewColumn>, minCol: VxeGanttDefines.ViewColumn) => {
-      if (minSType === type) {
+      if (minScale.type === type) {
         return
       }
       const currCol = colMaps[type]
@@ -154,14 +134,15 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
         currGpCol.children.push(minCol)
       }
     }
-    for (let i = 0; i < countSize; i++) {
-      const itemDate = new Date(currTime + (i * gapTime))
+
+    for (let i = 0; i < scaleDateList.length; i++) {
+      const itemDate = scaleDateList[i]
       const [yyyy, MM, dd, HH, mm, ss] = XEUtils.toDateString(itemDate, 'yyyy-M-d-H-m-s').split('-')
       const e = itemDate.getDay()
       const E = e + 1
       const q = Math.ceil((itemDate.getMonth() + 1) / 3)
       const W = XEUtils.getYearWeek(itemDate, weekScale ? weekScale.startDay : undefined)
-      const dateObj: VxeGanttDefines.ScaleDateObj = { yy: yyyy, M: MM, d: dd, H: HH, m: mm, s: ss, q, W, E, e }
+      const dateObj: VxeGanttDefines.ScaleDateObj = { date: itemDate, yy: yyyy, M: MM, d: dd, H: HH, m: mm, s: ss, q, W, E, e }
       const colMaps: Record<VxeGanttDefines.ColumnScaleType, VxeGanttDefines.ViewColumn> = {
         year: {
           field: yyyy,
@@ -209,14 +190,14 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
           dateObj
         }
       }
-      const minCol = colMaps[minSType]
+      const minCol = colMaps[minScale.type]
       if (minScale.level < 19) {
         handleData('year', colMaps, minCol)
       }
       if (minScale.level < 17) {
         handleData('quarter', colMaps, minCol)
       }
-      if (minScale.level < 14) {
+      if (minScale.level < 15) {
         handleData('month', colMaps, minCol)
       }
       if (minScale.level < 13) {
@@ -225,7 +206,7 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
       if (minScale.level < 11) {
         handleData('day', colMaps, minCol)
       }
-      if (minScale.level < 12) {
+      if (minScale.level < 9) {
         handleData('date', colMaps, minCol)
       }
       if (minScale.level < 7) {
@@ -234,12 +215,15 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
       if (minScale.level < 5) {
         handleData('minute', colMaps, minCol)
       }
+      if (minScale.level < 3) {
+        handleData('second', colMaps, minCol)
+      }
 
       fullCols.push(minCol)
     }
 
     taskScaleList.forEach(scaleItem => {
-      if (scaleItem.type === minSType) {
+      if (scaleItem.type === minScale.type) {
         groupCols.push({
           scaleItem,
           columns: fullCols
@@ -258,7 +242,221 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
         columns: list
       })
     })
+  }
 
+  return {
+    fullCols,
+    groupCols
+  }
+}
+
+function createChartRender ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods, fullCols: VxeGanttDefines.ViewColumn[]) {
+  const $xeGantt = $xeGanttView.$xeGantt
+  const reactData = $xeGanttView.reactData
+
+  const { minViewDate } = reactData
+  const minScale = $xeGantt.computeMinScale
+  const scaleUnit = $xeGantt.computeScaleUnit
+  const weekScale = $xeGantt.computeWeekScale
+  switch (scaleUnit) {
+    case 'year': {
+      const indexMaps: Record<string, number> = {}
+      fullCols.forEach(({ dateObj }, i) => {
+        const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy')
+        indexMaps[yyyyMM] = i
+      })
+      return (startValue: any, endValue: any) => {
+        const startDate = parseStringDate($xeGanttView, startValue)
+        const endDate = parseStringDate($xeGanttView, endValue)
+        const startStr = XEUtils.toDateString(startDate, 'yyyy')
+        const startFirstDate = XEUtils.getWhatYear(startDate, 0, 'first')
+        const endStr = XEUtils.toDateString(endDate, 'yyyy')
+        const endFirstDate = XEUtils.getWhatYear(endDate, 0, 'first')
+        const dateSize = Math.floor((XEUtils.getWhatYear(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / dayMs)
+        const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize
+        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / dayMs + 1) / dateSize
+        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract
+        return {
+          offsetLeftSize,
+          offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+        }
+      }
+    }
+    case 'quarter': {
+      const indexMaps: Record<string, number> = {}
+      fullCols.forEach(({ dateObj }, i) => {
+        const q = XEUtils.toDateString(dateObj.date, 'yyyy-q')
+        indexMaps[q] = i
+      })
+      return (startValue: any, endValue: any) => {
+        const startDate = parseStringDate($xeGanttView, startValue)
+        const endDate = parseStringDate($xeGanttView, endValue)
+        const startStr = XEUtils.toDateString(startDate, 'yyyy-q')
+        const startFirstDate = XEUtils.getWhatQuarter(startDate, 0, 'first')
+        const endStr = XEUtils.toDateString(endDate, 'yyyy-q')
+        const endFirstDate = XEUtils.getWhatQuarter(endDate, 0, 'first')
+        const dateSize = Math.floor((XEUtils.getWhatQuarter(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / dayMs)
+        const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize
+        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / dayMs + 1) / dateSize
+        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract
+        return {
+          offsetLeftSize,
+          offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+        }
+      }
+    }
+    case 'month': {
+      const indexMaps: Record<string, number> = {}
+      fullCols.forEach(({ dateObj }, i) => {
+        const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy-MM')
+        indexMaps[yyyyMM] = i
+      })
+      return (startValue: any, endValue: any) => {
+        const startDate = parseStringDate($xeGanttView, startValue)
+        const endDate = parseStringDate($xeGanttView, endValue)
+        const startStr = XEUtils.toDateString(startDate, 'yyyy-MM')
+        const startFirstDate = XEUtils.getWhatMonth(startDate, 0, 'first')
+        const endStr = XEUtils.toDateString(endDate, 'yyyy-MM')
+        const endFirstDate = XEUtils.getWhatMonth(endDate, 0, 'first')
+        const dateSize = Math.floor((XEUtils.getWhatMonth(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / dayMs)
+        const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize
+        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / dayMs + 1) / dateSize
+        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract
+        return {
+          offsetLeftSize,
+          offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+        }
+      }
+    }
+    case 'week': {
+      const indexMaps: Record<string, number> = {}
+      fullCols.forEach(({ dateObj }, i) => {
+        const yyyyW = XEUtils.toDateString(dateObj.date, 'yyyy-W', { firstDay: weekScale ? weekScale.startDay : undefined })
+        indexMaps[yyyyW] = i
+      })
+      return (startValue: any, endValue: any) => {
+        const startDate = parseStringDate($xeGanttView, startValue)
+        const endDate = parseStringDate($xeGanttView, endValue)
+        const startStr = XEUtils.toDateString(startDate, 'yyyy-W', { firstDay: weekScale ? weekScale.startDay : undefined })
+        const startFirstDate = XEUtils.getWhatWeek(startDate, 0, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined)
+        const endStr = XEUtils.toDateString(endDate, 'yyyy-W', { firstDay: weekScale ? weekScale.startDay : undefined })
+        const endFirstDate = XEUtils.getWhatWeek(endDate, 0, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined)
+        const dateSize = Math.floor((XEUtils.getWhatWeek(endDate, 1, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined).getTime() - endFirstDate.getTime()) / dayMs)
+        const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize
+        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / dayMs + 1) / dateSize
+        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract
+        return {
+          offsetLeftSize,
+          offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+        }
+      }
+    }
+    case 'day':
+    case 'date': {
+      const indexMaps: Record<string, number> = {}
+      fullCols.forEach(({ dateObj }, i) => {
+        const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy-MM-dd')
+        indexMaps[yyyyMM] = i
+      })
+      return (startValue: any, endValue: any) => {
+        const startDate = parseStringDate($xeGanttView, startValue)
+        const endDate = parseStringDate($xeGanttView, endValue)
+        const startStr = XEUtils.toDateString(startDate, 'yyyy-MM-dd')
+        const startFirstDate = XEUtils.getWhatDay(startDate, 0, 'first')
+        const endStr = XEUtils.toDateString(endDate, 'yyyy-MM-dd')
+        const endFirstDate = XEUtils.getWhatDay(endDate, 0, 'first')
+        const minuteSize = Math.floor((XEUtils.getWhatDay(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / minuteMs)
+        const subtract = (startDate.getTime() - startFirstDate.getTime()) / minuteMs / minuteSize
+        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / minuteMs + 1) / minuteSize
+        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract
+        return {
+          offsetLeftSize,
+          offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+        }
+      }
+    }
+    case 'hour': {
+      const indexMaps: Record<string, number> = {}
+      fullCols.forEach(({ dateObj }, i) => {
+        const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy-MM-dd HH')
+        indexMaps[yyyyMM] = i
+      })
+      return (startValue: any, endValue: any) => {
+        const startDate = parseStringDate($xeGanttView, startValue)
+        const endDate = parseStringDate($xeGanttView, endValue)
+        const startStr = XEUtils.toDateString(startDate, 'yyyy-MM-dd HH')
+        const startFirstDate = XEUtils.getWhatHours(startDate, 0, 'first')
+        const endStr = XEUtils.toDateString(endDate, 'yyyy-MM-dd HH')
+        const endFirstDate = XEUtils.getWhatHours(endDate, 0, 'first')
+        const minuteSize = Math.floor((XEUtils.getWhatHours(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / minuteMs)
+        const subtract = (startDate.getTime() - startFirstDate.getTime()) / minuteMs / minuteSize
+        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / minuteMs + 1) / minuteSize
+        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract
+        return {
+          offsetLeftSize,
+          offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+        }
+      }
+    }
+    case 'minute': {
+      const indexMaps: Record<string, number> = {}
+      fullCols.forEach(({ dateObj }, i) => {
+        const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy-MM-dd HH:mm')
+        indexMaps[yyyyMM] = i
+      })
+      return (startValue: any, endValue: any) => {
+        const startDate = parseStringDate($xeGanttView, startValue)
+        const endDate = parseStringDate($xeGanttView, endValue)
+        const startStr = XEUtils.toDateString(startDate, 'yyyy-MM-dd HH:mm')
+        const startFirstDate = XEUtils.getWhatMinutes(startDate, 0, 'first')
+        const endStr = XEUtils.toDateString(endDate, 'yyyy-MM-dd HH:mm')
+        const endFirstDate = XEUtils.getWhatMinutes(endDate, 0, 'first')
+        const minuteSize = Math.floor((XEUtils.getWhatMinutes(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / minuteMs)
+        const subtract = (startDate.getTime() - startFirstDate.getTime()) / minuteMs / minuteSize
+        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / minuteMs + 1) / minuteSize
+        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract
+        return {
+          offsetLeftSize,
+          offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+        }
+      }
+    }
+    case 'second': {
+      const gapTime = getStandardGapTime(minScale.type)
+      return (startValue: any, endValue: any) => {
+        const startDate = parseStringDate($xeGanttView, startValue)
+        const endDate = parseStringDate($xeGanttView, endValue)
+        let offsetLeftSize = 0
+        let offsetWidthSize = 0
+        if (minViewDate) {
+          offsetLeftSize = (startDate.getTime() - minViewDate.getTime()) / gapTime
+          offsetWidthSize = ((endDate.getTime() - startDate.getTime()) / gapTime) + 1
+        }
+        return {
+          offsetLeftSize,
+          offsetWidthSize
+        }
+      }
+    }
+  }
+  return () => {
+    return {
+      offsetLeftSize: 0,
+      offsetWidthSize: 0
+    }
+  }
+}
+
+function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+  const $xeGantt = $xeGanttView.$xeGantt
+  const reactData = $xeGanttView.reactData
+  const internalData = $xeGanttView.internalData
+
+  const ganttProps = $xeGantt
+  const { treeConfig } = ganttProps
+  const { minViewDate, maxViewDate } = reactData
+  const { fullCols, groupCols } = handleColumnHeader($xeGanttView)
+  if (minViewDate && maxViewDate) {
     const $xeTable = internalData.xeTable
     if ($xeTable) {
       const startField = $xeGantt.computeStartField
@@ -273,32 +471,30 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
       const childrenField = treeOpts.children || treeOpts.childrenField
 
       const ctMaps: Record<string, VxeGanttDefines.RowCacheItem> = {}
+      const renderFn = createChartRender($xeGanttView, fullCols)
       const handleParseRender = (row: any) => {
         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
+          const { offsetLeftSize, offsetWidthSize } = renderFn(startValue, endValue)
           ctMaps[rowid] = {
             row,
             rowid,
-            oLeftSize,
-            oWidthSize
+            oLeftSize: offsetLeftSize,
+            oWidthSize: offsetWidthSize
           }
         }
       }
 
       if (isRowGroupStatus) {
-      // 行分组
+        // 行分组
         const mapChildrenField = aggregateOpts.mapChildrenField
         if (mapChildrenField) {
           XEUtils.eachTree(afterGroupFullData, handleParseRender, { children: mapChildrenField })
         }
       } else if (treeConfig) {
-      // 树结构
+        // 树结构
         XEUtils.eachTree(afterTreeFullData, handleParseRender, { children: transform ? treeOpts.mapChildrenField : childrenField })
       } else {
         afterFullData.forEach(handleParseRender)
@@ -572,10 +768,10 @@ function handleLazyRecalculate ($xeGanttView: VxeGanttViewConstructor & VxeGantt
   return new Promise<void>(resolve => {
     const { rceTimeout, rceRunTime } = internalData
     const $xeTable = internalData.xeTable
-    let refreshDelay = 50
+    let refreshDelay = 30
     if ($xeTable) {
       const resizeOpts = $xeTable.computeResizeOpts
-      refreshDelay = resizeOpts.refreshDelay || 50
+      refreshDelay = resizeOpts.refreshDelay || refreshDelay
     }
     if (rceTimeout) {
       clearTimeout(rceTimeout)
@@ -1009,7 +1205,75 @@ export default defineVxeComponent({
   computed: {
     ...({} as {
       $xeGantt(): (VxeGanttConstructor & VxeGanttPrivateMethods)
-    })
+    }),
+    computeScaleDateList () {
+      const $xeGanttView = this
+      const $xeGantt = $xeGanttView.$xeGantt
+      const reactData = $xeGanttView.reactData
+
+      const { minViewDate, maxViewDate } = reactData
+      const minScale = $xeGantt.computeMinScale
+      const dateList: Date[] = []
+      if (!minViewDate || !maxViewDate) {
+        return dateList
+      }
+
+      const startTime = minViewDate.getTime()
+      const endTime = maxViewDate.getTime()
+      switch (minScale.type) {
+        case 'year': {
+          let currDate = XEUtils.getWhatYear(minViewDate, 0, 'first')
+          while (currDate <= maxViewDate) {
+            const itemDate = currDate
+            dateList.push(itemDate)
+            currDate = XEUtils.getWhatYear(currDate, 1)
+          }
+          break
+        }
+        case 'quarter': {
+          let currDate = XEUtils.getWhatQuarter(minViewDate, 0, 'first')
+          while (currDate <= maxViewDate) {
+            const itemDate = currDate
+            dateList.push(itemDate)
+            currDate = XEUtils.getWhatQuarter(currDate, 1)
+          }
+          break
+        }
+        case 'month': {
+          let currDate = XEUtils.getWhatMonth(minViewDate, 0, 'first')
+          while (currDate <= maxViewDate) {
+            const itemDate = currDate
+            dateList.push(itemDate)
+            currDate = XEUtils.getWhatMonth(currDate, 1)
+          }
+          break
+        }
+        case 'week': {
+          let currDate = XEUtils.getWhatWeek(minViewDate, 0, minScale.startDay, minScale.startDay)
+          while (currDate <= maxViewDate) {
+            const itemDate = currDate
+            dateList.push(itemDate)
+            currDate = XEUtils.getWhatWeek(currDate, 1)
+          }
+          break
+        }
+        case 'day':
+        case 'date':
+        case 'hour':
+        case 'minute':
+        case 'second': {
+          const gapTime = getStandardGapTime(minScale.type)
+          let currTime = startTime
+          while (currTime <= endTime) {
+            const itemDate = new Date(currTime)
+            dateList.push(itemDate)
+            currTime += gapTime
+          }
+          break
+        }
+      }
+      return dateList
+    }
   },
   methods: {
     //
@@ -1017,9 +1281,17 @@ export default defineVxeComponent({
     //
     refreshData (): Promise<void> {
       const $xeGanttView = this
+      const internalData = $xeGanttView.internalData
 
       handleUpdateData($xeGanttView)
-      return handleLazyRecalculate($xeGanttView)
+      handleRecalculateStyle($xeGanttView)
+      return $xeGanttView.$nextTick().then(() => {
+        const $xeTable = internalData.xeTable
+        handleRecalculateStyle($xeGanttView)
+        if ($xeTable) {
+          return $xeTable.recalculate()
+        }
+      })
     },
     updateViewData (): Promise<void> {
       const $xeGanttView = this