vxe-gantt 4.0.3 → 4.0.5

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

@@ -8,7 +8,7 @@ import GanttViewHeaderComponent from './gantt-header'
 import GanttViewBodyComponent from './gantt-body'
 import GanttViewFooterComponent from './gantt-footer'
 
-import type { VxeGanttViewConstructor, GanttViewReactData, GanttViewPrivateRef, VxeGanttPropTypes, VxeGanttDefines, VxeGanttViewPrivateMethods, GanttViewInternalData, VxeGanttViewMethods, GanttViewPrivateComputed, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
+import type { VxeGanttViewConstructor, GanttViewReactData, GanttViewPrivateRef, VxeGanttDefines, VxeGanttViewPrivateMethods, GanttViewInternalData, VxeGanttViewMethods, GanttViewPrivateComputed, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
 
 const { globalEvents } = VxeUI
 
@@ -41,6 +41,7 @@ function createInternalData (): GanttViewInternalData {
     }
   }
 }
+
 const maxYHeight = 5e6
 // const maxXWidth = 5e6
 
@@ -51,7 +52,7 @@ export default defineVxeComponent({
 
     const $xeGantt = inject('$xeGantt', {} as (VxeGanttConstructor & VxeGanttPrivateMethods))
 
-    const { computeTaskOpts, computeTaskViewOpts, computeStartField, computeEndField, computeScrollbarOpts, computeScrollbarXToTop, computeScrollbarYToLeft } = $xeGantt.getComputeMaps()
+    const { computeTaskOpts, computeStartField, computeEndField, computeScrollbarOpts, computeScrollbarXToTop, computeScrollbarYToLeft } = $xeGantt.getComputeMaps()
 
     const refElem = ref<HTMLDivElement>()
 
@@ -100,15 +101,7 @@ export default defineVxeComponent({
       tableColumn: [],
       headerGroups: [],
 
-      viewCellWidth: 40,
-
-      rowHeightStore: {
-        large: 52,
-        default: 48,
-        medium: 44,
-        small: 40,
-        mini: 36
-      }
+      viewCellWidth: 20
     })
 
     const internalData = createInternalData()
@@ -139,93 +132,251 @@ export default defineVxeComponent({
 
     const handleParseColumn = () => {
       const ganttProps = $xeGantt.props
+      const ganttReactData = $xeGantt.reactData
       const { treeConfig } = ganttProps
+      const { taskScaleList } = ganttReactData
       const { minViewDate, maxViewDate } = reactData
-      const taskViewOpts = computeTaskViewOpts.value
-      const fullCols: VxeGanttPropTypes.Column[] = []
-      const groupCols: VxeGanttPropTypes.Column[][] = []
-      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: VxeGanttDefines.GroupHeaderColumn[] = []
-            const colList: VxeGanttPropTypes.Column[] = []
-            const groupMaps: Record<string, VxeGanttDefines.GroupHeaderColumn> = {}
-            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)
+      const minScale = XEUtils.last(taskScaleList)
+      const fullCols: VxeGanttDefines.ViewColumn[] = []
+      const groupCols: VxeGanttDefines.HeaderColumn[] = []
+      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 = computeStartField.value
-              const endField = computeEndField.value
-              const { computeTreeOpts } = $xeTable.getComputeMaps()
-              const tableInternalData = $xeTable.internalData
-              const { afterFullData, afterTreeFullData } = tableInternalData
-              const treeOpts = computeTreeOpts.value
-              const { transform } = treeOpts
-              const childrenField = treeOpts.children || treeOpts.childrenField
-
-              const ctMaps: Record<string, VxeGanttDefines.RowCacheItem> = {}
-              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(startValue)
-                  const endDate = parseStringDate(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: Record<VxeGanttDefines.ColumnScaleType, VxeGanttDefines.ViewColumn[]> = {
+          year: [],
+          quarter: [],
+          month: [],
+          week: [],
+          day: [],
+          date: [],
+          hour: [],
+          minute: [],
+          second: []
+        }
+
+        const tempTypeMaps: Record<VxeGanttDefines.ColumnScaleType, Record<string, VxeGanttDefines.ViewColumn>> = {
+          year: {},
+          quarter: {},
+          month: {},
+          week: {},
+          day: {},
+          date: {},
+          hour: {},
+          minute: {},
+          second: {}
+        }
+
+        const handleData = (type: VxeGanttDefines.ColumnScaleType, colMaps: Record<VxeGanttDefines.ColumnScaleType, VxeGanttDefines.ViewColumn>, minCol: VxeGanttDefines.ViewColumn) => {
+          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: VxeGanttDefines.ScaleDateObj = { 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,
+              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
+          })
+        })
 
-              if (treeConfig) {
-                XEUtils.eachTree(afterTreeFullData, handleParseRender, { children: transform ? treeOpts.mapChildrenField : childrenField })
-              } else {
-                afterFullData.forEach(handleParseRender)
+        const $xeTable = internalData.xeTable
+        if ($xeTable) {
+          const startField = computeStartField.value
+          const endField = computeEndField.value
+          const { computeTreeOpts } = $xeTable.getComputeMaps()
+          const tableInternalData = $xeTable.internalData
+          const { afterFullData, afterTreeFullData } = tableInternalData
+          const treeOpts = computeTreeOpts.value
+          const { transform } = treeOpts
+          const childrenField = treeOpts.children || treeOpts.childrenField
+
+          const ctMaps: Record<string, VxeGanttDefines.RowCacheItem> = {}
+          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(startValue)
+              const endDate = parseStringDate(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
               }
-              internalData.chartMaps = ctMaps
             }
           }
-          break
+
+          if (treeConfig) {
+            XEUtils.eachTree(afterTreeFullData, handleParseRender, { children: transform ? treeOpts.mapChildrenField : childrenField })
+          } else {
+            afterFullData.forEach(handleParseRender)
+          }
+          internalData.chartMaps = ctMaps
         }
       }
       reactData.tableColumn = fullCols
@@ -826,11 +977,10 @@ export default defineVxeComponent({
 
     const renderVN = () => {
       const { overflowX, overflowY, scrollXLoad, scrollYLoad } = reactData
-      const taskViewOpts = computeTaskViewOpts.value
       const scrollbarXToTop = computeScrollbarXToTop.value
       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/packages/gantt/src/gantt.ts

@@ -30,6 +30,22 @@ function createInternalData (): GanttInternalData {
   }
 }
 
+const viewTypeLevelMaps = {
+  year: 19,
+  quarter: 17,
+  month: 15,
+  week: 13,
+  day: 11,
+  date: 9,
+  hour: 7,
+  minute: 5,
+  second: 3
+}
+
+function getViewTypeLevel (type: VxeGanttDefines.ColumnScaleType) {
+  return viewTypeLevelMaps[type || 'date'] || viewTypeLevelMaps.date
+}
+
 export default defineVxeComponent({
   name: 'VxeGantt',
   props: {
@@ -62,6 +78,7 @@ export default defineVxeComponent({
 
     layouts: Array as PropType<VxeGanttPropTypes.Layouts>,
     taskConfig: Object as PropType<VxeGanttPropTypes.TaskConfig>,
+    taskViewScaleConfs: Object as PropType<VxeGanttPropTypes.TaskViewScaleConfs>,
     taskViewConfig: Object as PropType<VxeGanttPropTypes.TaskViewConfig>,
     taskBarConfig: Object as PropType<VxeGanttPropTypes.TaskBarConfig>,
     taskSplitConfig: Object as PropType<VxeGanttPropTypes.TaskSplitConfig>,
@@ -99,7 +116,8 @@ export default defineVxeComponent({
         currentPage: 1
       },
       showLeftView: true,
-      showRightView: true
+      showRightView: true,
+      taskScaleList: []
     })
 
     const internalData = createInternalData()
@@ -181,6 +199,10 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().gantt.taskConfig, props.taskConfig)
     })
 
+    const computeTaskViewScaleMapsOpts = computed(() => {
+      return XEUtils.merge({}, getConfig().gantt.taskViewScaleConfs, props.taskViewScaleConfs)
+    })
+
     const computeTaskViewOpts = computed(() => {
       return Object.assign({}, getConfig().gantt.taskViewConfig, props.taskViewConfig)
     })
@@ -193,6 +215,12 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig)
     })
 
+    const computeTaskScaleConfs = computed(() => {
+      const taskViewOpts = computeTaskViewOpts.value
+      const { scales } = taskViewOpts
+      return scales
+    })
+
     const computeTitleField = computed(() => {
       const taskOpts = computeTaskOpts.value
       return taskOpts.titleField || 'title'
@@ -401,9 +429,11 @@ export default defineVxeComponent({
       computeToolbarOpts,
       computeZoomOpts,
       computeTaskOpts,
+      computeTaskViewScaleMapsOpts,
       computeTaskViewOpts,
       computeTaskBarOpts,
       computeTaskSplitOpts,
+      computeTaskScaleConfs,
       computeTitleField,
       computeStartField,
       computeEndField,
@@ -423,6 +453,38 @@ export default defineVxeComponent({
       getComputeMaps: () => computeMaps
     } as VxeGanttConstructor & VxeGanttPrivateMethods
 
+    const handleTaskScaleConfig = () => {
+      const taskScaleConfs = computeTaskScaleConfs.value
+      const taskViewScaleMapsOpts = computeTaskViewScaleMapsOpts.value
+      const scaleConfs: VxeGanttDefines.ColumnScaleObj[] = []
+      if (taskScaleConfs) {
+        const keyMaps: Record<string, boolean> = {}
+        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: 'date', level: viewTypeLevelMaps.date }
+        )
+      }
+      reactData.taskScaleList = XEUtils.orderBy(scaleConfs, { field: 'level', order: 'desc' })
+    }
+
     const initToolbar = () => {
       const toolbarOpts = computeToolbarOpts.value
       if (props.toolbarConfig && isEnableConf(toolbarOpts)) {
@@ -1978,6 +2040,10 @@ export default defineVxeComponent({
       initProxy()
     })
 
+    watch(computeTaskScaleConfs, () => {
+      handleTaskScaleConfig()
+    })
+
     hooks.forEach((options) => {
       const { setupGantt } = options
       if (setupGantt) {
@@ -1988,6 +2054,7 @@ export default defineVxeComponent({
       }
     })
 
+    handleTaskScaleConfig()
     initPages()
 
     onMounted(() => {

package/packages/gantt/src/util.ts

@@ -10,6 +10,13 @@ export function getRefElem (refEl: any) {
   return null
 }
 
+export function getCalcHeight (height: number | 'unset' | undefined | null) {
+  if (height === 'unset') {
+    return 0
+  }
+  return height || 0
+}
+
 export function getCellRestHeight (rowRest: VxeTableDefines.RowCacheItem, cellOpts: VxeTablePropTypes.CellConfig, rowOpts: VxeTablePropTypes.RowConfig, defaultRowHeight: number) {
   return rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
 }

package/packages/ui/index.ts

@@ -43,6 +43,11 @@ setConfig({
       // beforeSave: null,
       // afterSave: null
     },
+    taskViewScaleConfs: {
+      week: {
+        startDay: 1
+      }
+    },
     taskSplitConfig: {
       enabled: true,
       resize: true,

package/styles/components/gantt-module/gantt-chart.scss

@@ -65,4 +65,14 @@
   white-space: nowrap;
   font-size: 0.9em;
   padding: 0 0.6em;
+}
+
+/*行拖拽*/
+.vxe-gantt-view--chart-row {
+  &.row--drag-move {
+    transition: transform 0.5s ease;
+  }
+  &.row--drag-origin {
+    opacity: 0.3;
+  }
 }

package/styles/components/gantt.scss

@@ -289,7 +289,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 13;
+  z-index: 3;
 }
 .vxe-gantt--view-split-bar-btn-wrapper {
   display: flex;
@@ -299,7 +299,7 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  z-index: 15;
+  z-index: 5;
   pointer-events: none;
   & > div {
     margin-top: 1em;
@@ -339,7 +339,7 @@
   left: 0;
   width: 1px;
   height: 100%;
-  z-index: 18;
+  z-index: 7;
   pointer-events: none;
   user-select: none;
   cursor: col-resize;
@@ -624,6 +624,40 @@
   }
 }
 
+/*行拖拽*/
+.vxe-gantt-view--body-row {
+  &.row--drag-move {
+    transition: transform 0.5s ease;
+  }
+  &.row--drag-origin {
+    & > .vxe-gantt-view--body-column {
+      opacity: 0.3;
+    }
+  }
+}
+.vxe-gantt-view--body-column {
+  .vxe-gantt-view-cell--row-resizable {
+    position: absolute;
+    left: 0;
+    bottom: -0.4em;
+    height: 0.8em;
+    width: 100%;
+    text-align: center;
+    z-index: 1;
+    cursor: row-resize;
+  }
+}
+.vxe-gantt-view--body-row {
+  &:last-child {
+    .vxe-gantt-view--body-column {
+      .vxe-gantt-view-cell--row-resizable {
+        height: 0.4em;
+        bottom: -0px;
+      }
+    }
+  }
+}
+
 .vxe-gantt {
   font-size: var(--vxe-ui-font-size-default);
   &.size--medium {

package/styles/theme/base.scss

@@ -1,6 +1,6 @@
 :root {
   /*gantt*/
-  --vxe-ui-gantt-view-default-cell-width: 40px;
+  --vxe-ui-gantt-view-default-cell-width: 2.2em;
   --vxe-ui-gantt-view-chart-bar-height: 1.6em;
   --vxe-ui-gantt-view-split-bar-width: 10px;
   --vxe-ui-gantt-view-split-bar-height: 6.8em;