vxe-gantt 3.0.3 → 3.0.5

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

@@ -9,7 +9,7 @@ import GanttViewBodyComponent from './gantt-body'
 import GanttViewFooterComponent from './gantt-footer'
 
 import type { TableReactData, TableInternalData, VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from 'vxe-table'
-import type { VxeGanttViewConstructor, GanttViewReactData, VxeGanttPropTypes, VxeGanttDefines, VxeGanttViewPrivateMethods, GanttViewInternalData, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
+import type { VxeGanttViewConstructor, GanttViewReactData, VxeGanttDefines, VxeGanttViewPrivateMethods, GanttViewInternalData, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
 
 const { globalEvents } = VxeUI
 
@@ -59,92 +59,251 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
   const internalData = $xeGanttView.internalData
 
   const ganttProps = $xeGantt
+  const ganttReactData = $xeGantt.reactData
   const { treeConfig } = ganttProps
+  const { taskScaleList } = ganttReactData
   const { minViewDate, maxViewDate } = reactData
-  const taskViewOpts = $xeGantt.computeTaskViewOpts
-  const 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 = $xeGantt.computeStartField
-          const endField = $xeGantt.computeEndField
-          const tableInternalData = $xeTable as unknown as TableInternalData
-          const { afterFullData, afterTreeFullData } = tableInternalData
-          const treeOpts = $xeTable.computeTreeOpts
-          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($xeGanttView, startValue)
-              const endDate = parseStringDate($xeGanttView, endValue)
-              const oLeftSize = Math.floor((startDate.getTime() - minViewDate.getTime()) / 86400000)
-              const oWidthSize = Math.floor((endDate.getTime() - startDate.getTime()) / 86400000) + 1
-              ctMaps[rowid] = {
-                row,
-                rowid,
-                oLeftSize,
-                oWidthSize
-              }
-            }
-          }
+        break
+      case 'hour':
+        if (diffDayNum > (1000 * 60 * 60 * 24 * 31 * 3)) {
+          reactData.tableColumn = []
+          reactData.headerGroups = []
+          return
+        }
+        break
+      case 'minute':
+        if (diffDayNum > (1000 * 60 * 60 * 24 * 3)) {
+          reactData.tableColumn = []
+          reactData.headerGroups = []
+          return
+        }
+        break
+      case 'second':
+        if (diffDayNum > (1000 * 60 * 60 * 3)) {
+          reactData.tableColumn = []
+          reactData.headerGroups = []
+          return
+        }
+        break
+    }
+
+    const renderListMaps: 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)
+      }
+    }
 
-          if (treeConfig) {
-            XEUtils.eachTree(afterTreeFullData, handleParseRender, { children: transform ? treeOpts.mapChildrenField : childrenField })
-          } else {
-            afterFullData.forEach(handleParseRender)
+    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
+      })
+    })
+
+    const $xeTable = internalData.xeTable
+    if ($xeTable) {
+      const startField = $xeGantt.computeStartField
+      const endField = $xeGantt.computeEndField
+      const tableInternalData = $xeTable as unknown as TableInternalData
+      const { afterFullData, afterTreeFullData } = tableInternalData
+      const treeOpts = $xeTable.computeTreeOpts
+      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($xeGanttView, startValue)
+          const endDate = parseStringDate($xeGanttView, endValue)
+          const oLeftSize = Math.floor((startDate.getTime() - minViewDate.getTime()) / gapTime)
+          const oWidthSize = Math.floor((endDate.getTime() - startDate.getTime()) / gapTime) + 1
+          ctMaps[rowid] = {
+            row,
+            rowid,
+            oLeftSize,
+            oWidthSize
           }
-          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
@@ -599,15 +758,7 @@ export default defineVxeComponent({
       tableColumn: [],
       headerGroups: [],
 
-      viewCellWidth: 40,
-
-      rowHeightStore: {
-        large: 52,
-        default: 48,
-        medium: 44,
-        small: 40,
-        mini: 36
-      }
+      viewCellWidth: 20
     }
 
     const internalData = createInternalData()
@@ -957,11 +1108,10 @@ export default defineVxeComponent({
       const reactData = $xeGanttView.reactData
 
       const { overflowX, overflowY, scrollXLoad, scrollYLoad } = reactData
-      const taskViewOpts = $xeGantt.computeTaskViewOpts
       const scrollbarXToTop = $xeGantt.computeScrollbarXToTop
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-gantt-view', `mode--${taskViewOpts.mode || 'day'}`, {
+        class: ['vxe-gantt-view', {
           'is--scroll-y': overflowY,
           'is--scroll-x': overflowX,
           'is--virtual-x': scrollXLoad,

package/packages/gantt/src/gantt.ts

@@ -22,6 +22,22 @@ const propKeys = Object.keys(tableProps) as (keyof VxeTableProps)[]
 
 const defaultLayouts: VxeGanttPropTypes.Layouts = [['Form'], ['Toolbar', 'Top', 'Gantt', 'Bottom', 'Pager']]
 
+const viewTypeLevelMaps = {
+  year: 19,
+  quarter: 17,
+  month: 15,
+  week: 13,
+  day: 11,
+  date: 9,
+  hour: 7,
+  minute: 5,
+  second: 3
+}
+
+function getViewTypeLevel (type: VxeGanttDefines.ColumnScaleType) {
+  return viewTypeLevelMaps[type || 'date'] || viewTypeLevelMaps.date
+}
+
 function getTableOns ($xeGantt: VxeGanttConstructor) {
   const _vm = $xeGantt as any
   const $listeners = _vm.$listeners
@@ -99,6 +115,7 @@ export default /* define-vxe-component start */ 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>,
@@ -134,7 +151,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
         currentPage: 1
       },
       showLeftView: true,
-      showRightView: true
+      showRightView: true,
+      taskScaleList: []
     }
 
     const internalData = createInternalData()
@@ -197,6 +215,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       return Object.assign({}, getConfig().gantt.taskConfig, props.taskConfig)
     },
+    computeTaskViewScaleMapsOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
+
+      return XEUtils.merge({}, getConfig().gantt.taskViewScaleConfs, props.taskViewScaleConfs)
+    },
     computeTaskViewOpts () {
       const $xeGantt = this
       const props = $xeGantt
@@ -215,6 +239,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig)
     },
+    computeTaskScaleConfs () {
+      const $xeGantt = this
+
+      const taskViewOpts = $xeGantt.computeTaskViewOpts as VxeGanttPropTypes.TaskViewConfig
+      const { scales } = taskViewOpts
+      return scales
+    },
     computeTitleField () {
       const $xeGantt = this
 
@@ -472,6 +503,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeGantt = this
 
       $xeGantt.initProxy()
+    },
+    computeTaskScaleConfs () {
+      const $xeGantt = this
+
+      $xeGantt.handleTaskScaleConfig()
     }
   },
   methods: {
@@ -481,6 +517,40 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       $xeGantt.$emit(type, createEvent(evnt, { $grid: null, $gantt: $xeGantt }, params))
     },
+    handleTaskScaleConfig () {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+
+      const taskScaleConfs = $xeGantt.computeTaskScaleConfs
+      const taskViewScaleMapsOpts = $xeGantt.computeTaskViewScaleMapsOpts
+      const scaleConfs: 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: 'day', level: viewTypeLevelMaps.day }
+        )
+      }
+      reactData.taskScaleList = XEUtils.orderBy(scaleConfs, { field: 'level', order: 'desc' })
+    },
     initToolbar () {
       const $xeGantt = this
 
@@ -1871,6 +1941,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const tableProps = $xeGantt.computeTableProps
       return h('div', {
+        ref: 'refTableWrapper',
         class: 'vxe-gantt--table-wrapper'
       }, [
         h(VxeTableComponent as Component, {
@@ -2172,6 +2243,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
     })
 
+    $xeGantt.handleTaskScaleConfig()
     $xeGantt.initPages()
   },
   mounted () {

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;