vxe-gantt 4.0.4 → 4.0.5

package/lib/ui/index.js

@@ -17,7 +17,7 @@ const {
   setIcon,
   checkVersion
 } = _core.VxeUI;
-_core.VxeUI.ganttVersion = "4.0.4";
+_core.VxeUI.ganttVersion = "4.0.5";
 setConfig({
   gantt: {
     // size: null,
@@ -56,6 +56,11 @@ setConfig({
       // beforeSave: null,
       // afterSave: null
     },
+    taskViewScaleConfs: {
+      week: {
+        startDay: 1
+      }
+    },
     taskSplitConfig: {
       enabled: true,
       resize: true,

package/lib/ui/index.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"VxeUI",{enumerable:!0,get:function(){return _core.VxeUI}}),exports.default=void 0;var _core=require("@vxe-ui/core"),_log=require("./src/log");let{setConfig,setIcon,checkVersion}=_core.VxeUI,iconPrefix=(_core.VxeUI.ganttVersion="4.0.4",setConfig({gantt:{formConfig:{enabled:!0},pagerConfig:{enabled:!0},toolbarConfig:{enabled:!0},proxyConfig:{enabled:!0,autoLoad:!0,showLoading:!0,showResponseMsg:!0,showActionMsg:!0,response:{list:null,result:"result",total:"page.total",message:"message"}},taskSplitConfig:{enabled:!0,resize:!0,showCollapseTableButton:!0,showCollapseTaskButton:!0}}}),"vxe-icon-"),pVersion=(setIcon({GANTT_VIEW_LEFT_OPEN:iconPrefix+"arrow-left",GANTT_VIEW_LEFT_CLOSE:iconPrefix+"arrow-right",GANTT_VIEW_RIGHT_OPEN:iconPrefix+"arrow-right",GANTT_VIEW_RIGHT_CLOSE:iconPrefix+"arrow-left"}),4),sVersion=16;checkVersion?checkVersion(_core.VxeUI.tableVersion,pVersion,sVersion)||(0,_log.errLog)("vxe.error.errorVersion",["vxe-table@"+(_core.VxeUI.tableVersion||"?"),`vxe-table v${pVersion}.${sVersion}+`]):(0,_log.errLog)(`Requires vxe-table v${pVersion}.${sVersion}+`);var _default=exports.default=_core.VxeUI;
+Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"VxeUI",{enumerable:!0,get:function(){return _core.VxeUI}}),exports.default=void 0;var _core=require("@vxe-ui/core"),_log=require("./src/log");let{setConfig,setIcon,checkVersion}=_core.VxeUI,iconPrefix=(_core.VxeUI.ganttVersion="4.0.5",setConfig({gantt:{formConfig:{enabled:!0},pagerConfig:{enabled:!0},toolbarConfig:{enabled:!0},proxyConfig:{enabled:!0,autoLoad:!0,showLoading:!0,showResponseMsg:!0,showActionMsg:!0,response:{list:null,result:"result",total:"page.total",message:"message"}},taskViewScaleConfs:{week:{startDay:1}},taskSplitConfig:{enabled:!0,resize:!0,showCollapseTableButton:!0,showCollapseTaskButton:!0}}}),"vxe-icon-"),pVersion=(setIcon({GANTT_VIEW_LEFT_OPEN:iconPrefix+"arrow-left",GANTT_VIEW_LEFT_CLOSE:iconPrefix+"arrow-right",GANTT_VIEW_RIGHT_OPEN:iconPrefix+"arrow-right",GANTT_VIEW_RIGHT_CLOSE:iconPrefix+"arrow-left"}),4),sVersion=16;checkVersion?checkVersion(_core.VxeUI.tableVersion,pVersion,sVersion)||(0,_log.errLog)("vxe.error.errorVersion",["vxe-table@"+(_core.VxeUI.tableVersion||"?"),`vxe-table v${pVersion}.${sVersion}+`]):(0,_log.errLog)(`Requires vxe-table v${pVersion}.${sVersion}+`);var _default=exports.default=_core.VxeUI;

package/lib/ui/src/log.js

@@ -8,6 +8,6 @@ var _core = require("@vxe-ui/core");
 const {
   log
 } = _core.VxeUI;
-const version = `gantt v${"4.0.4"}`;
+const version = `gantt v${"4.0.5"}`;
 const warnLog = exports.warnLog = log.create('warn', version);
 const errLog = exports.errLog = log.create('error', version);

package/lib/ui/src/log.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.warnLog=exports.errLog=void 0;var _core=require("@vxe-ui/core");let log=_core.VxeUI.log,version="gantt v4.0.4",warnLog=exports.warnLog=log.create("warn",version),errLog=exports.errLog=log.create("error",version);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.warnLog=exports.errLog=void 0;var _core=require("@vxe-ui/core");let log=_core.VxeUI.log,version="gantt v4.0.5",warnLog=exports.warnLog=log.create("warn",version),errLog=exports.errLog=log.create("error",version);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-gantt",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "A vue based gantt component",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -63,8 +63,8 @@
     "typescript": "~4.9.5",
     "vue": "3.4.27",
     "vue-router": "~4.5.1",
-    "vxe-pc-ui": "^4.8.22",
-    "vxe-table": "^4.16.0-beta.7"
+    "vxe-pc-ui": "^4.8.23",
+    "vxe-table": "^4.16.0-beta.8"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

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

@@ -1,7 +1,10 @@
 import { h, inject, ref, Ref, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
+import { VxeUI } from '@vxe-ui/core'
 
-import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods } from '../../../types'
+import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods, VxeGanttDefines } from '../../../types'
+
+const { getI18n } = VxeUI
 
 export default defineVxeComponent({
   name: 'VxeGanttViewHeader',
@@ -42,16 +45,29 @@ export default defineVxeComponent({
                 }
               })
             })),
-            h('thead', {}, headerGroups.map((cols, rIndex) => {
+            h('thead', {}, headerGroups.map(({ scaleItem, columns }, $rowIndex) => {
+              const { type, titleMethod } = scaleItem
               return h('tr', {
-                key: rIndex
-              }, cols.map((column, cIndex) => {
+                key: $rowIndex
+              }, columns.map((column, cIndex) => {
+                const dateObj: VxeGanttDefines.ScaleDateObj = column.params
+                let label = `${column.title}`
+                if ($rowIndex < headerGroups.length - 1) {
+                  if (scaleItem.type === 'day') {
+                    label = getI18n(`vxe.gantt.dayss.w${dateObj.e}`)
+                  } else {
+                    label = getI18n(`vxe.gantt.${!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat'}.${type}`, dateObj)
+                  }
+                }
+                if (titleMethod) {
+                  label = `${titleMethod({ scaleObj: scaleItem, title: label, dateObj: dateObj, $rowIndex })}`
+                }
                 return h('th', {
                   key: cIndex,
                   class: 'vxe-gantt-view--header-column',
-                  colspan: column.children ? column.children.length : null,
-                  title: `${column.field}`
-                }, column.title)
+                  colspan: column.childCount || null,
+                  title: label
+                }, label)
               }))
             }))
           ])

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/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;