vxe-gantt 4.0.4 → 4.0.6

package/lib/index.umd.js

@@ -44,6 +44,45 @@ module.exports = function (argument, usingIterator) {
 };
 
 
+/***/ }),
+
+/***/ 116:
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+
+var $ = __webpack_require__(6518);
+var call = __webpack_require__(9565);
+var iterate = __webpack_require__(2652);
+var aCallable = __webpack_require__(9306);
+var anObject = __webpack_require__(8551);
+var getIteratorDirect = __webpack_require__(1767);
+var iteratorClose = __webpack_require__(9539);
+var iteratorHelperWithoutClosingOnEarlyError = __webpack_require__(4549);
+
+var findWithoutClosingOnEarlyError = iteratorHelperWithoutClosingOnEarlyError('find', TypeError);
+
+// `Iterator.prototype.find` method
+// https://tc39.es/ecma262/#sec-iterator.prototype.find
+$({ target: 'Iterator', proto: true, real: true, forced: findWithoutClosingOnEarlyError }, {
+  find: function find(predicate) {
+    anObject(this);
+    try {
+      aCallable(predicate);
+    } catch (error) {
+      iteratorClose(this, 'throw', error);
+    }
+
+    if (findWithoutClosingOnEarlyError) return call(findWithoutClosingOnEarlyError, this, predicate);
+
+    var record = getIteratorDirect(this);
+    var counter = 0;
+    return iterate(record, function (value, stop) {
+      if (predicate(value, counter++)) return stop(value);
+    }, { IS_RECORD: true, INTERRUPTED: true }).result;
+  }
+});
+
+
 /***/ }),
 
 /***/ 283:
@@ -2741,7 +2780,7 @@ var core_ = __webpack_require__(4345);
 const {
   log
 } = core_.VxeUI;
-const version = `gantt v${"4.0.4"}`;
+const version = `gantt v${"4.0.6"}`;
 const warnLog = log.create('warn', version);
 const errLog = log.create('error', version);
 ;// ./packages/ui/index.ts
@@ -2752,7 +2791,7 @@ const {
   setIcon,
   checkVersion
 } = core_.VxeUI;
-core_.VxeUI.ganttVersion = "4.0.4";
+core_.VxeUI.ganttVersion = "4.0.6";
 setConfig({
   gantt: {
     // size: null,
@@ -2791,6 +2830,11 @@ setConfig({
       // beforeSave: null,
       // afterSave: null
     },
+    taskViewScaleConfs: {
+      week: {
+        startDay: 1
+      }
+    },
     taskSplitConfig: {
       enabled: true,
       resize: true,
@@ -3245,7 +3289,9 @@ const tableEmits = ['update:data', 'keydown-start', 'keydown', 'keydown-end', 'p
 const gridEmits = [...tableEmits, 'page-change', 'form-submit', 'form-submit-invalid', 'form-reset', 'form-collapse', 'form-toggle-collapse', 'proxy-query', 'proxy-delete', 'proxy-save', 'toolbar-button-click', 'toolbar-tool-click', 'zoom'];
 ;// ./packages/gantt/src/emits.ts
 
-const ganttEmits = [...gridEmits, 'task-cell-click', 'task-cell-dblclick', 'task-bar-click', 'task-bar-dblclick'];
+const ganttEmits = [...gridEmits, 'task-cell-click', 'task-cell-dblclick', 'task-bar-click', 'task-bar-dblclick', 'task-view-cell-click', 'task-view-cell-dblclick'];
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.find.js
+var es_iterator_find = __webpack_require__(116);
 ;// ./packages/gantt/src/util.ts
 function getRefElem(refEl) {
   if (refEl) {
@@ -3256,6 +3302,12 @@ function getRefElem(refEl) {
   }
   return null;
 }
+function getCalcHeight(height) {
+  if (height === 'unset') {
+    return 0;
+  }
+  return height || 0;
+}
 function getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight) {
   return rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
 }
@@ -3264,9 +3316,14 @@ function getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight) {
 
 
 
+
+const {
+  getI18n
+} = core_.VxeUI;
 /* harmony default export */ var gantt_header = (defineVxeComponent({
   name: 'VxeGanttViewHeader',
   setup() {
+    const $xeGantt = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeGantt', {});
     const $xeGanttView = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeGanttView', {});
     const {
       reactData,
@@ -3302,16 +3359,49 @@ function getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight) {
             width: `${viewCellWidth}px`
           }
         });
-      })), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('thead', {}, headerGroups.map((cols, rIndex) => {
+      })), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('thead', {}, headerGroups.map(({
+        scaleItem,
+        columns
+      }, $rowIndex) => {
+        const {
+          type,
+          titleMethod,
+          slots
+        } = scaleItem;
+        const titleSlot = slots ? slots.title : null;
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {
-          key: rIndex
-        }, cols.map((column, cIndex) => {
+          key: $rowIndex
+        }, columns.map((column, cIndex) => {
+          const {
+            childCount,
+            dateObj
+          } = column;
+          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);
+            }
+          }
+          let cellVNs = label;
+          const ctParams = {
+            scaleObj: scaleItem,
+            title: label,
+            dateObj: dateObj,
+            $rowIndex
+          };
+          if (titleSlot) {
+            cellVNs = $xeGantt.callSlot(titleSlot, ctParams);
+          } else if (titleMethod) {
+            cellVNs = `${titleMethod(ctParams)}`;
+          }
           return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {
             key: cIndex,
             class: 'vxe-gantt-view--header-column',
-            colspan: column.children ? column.children.length : null,
-            title: `${column.field}`
-          }, column.title);
+            colspan: childCount || null,
+            title: titleSlot ? null : label
+          }, cellVNs);
         }));
       }))])])]);
     };
@@ -3398,15 +3488,36 @@ const {
         contentMethod,
         barStyle
       } = taskBarOpts;
+      const isBarRowStyle = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(barStyle);
+      const barStyObj = (barStyle ? isBarRowStyle ? barStyle({
+        row,
+        $gantt: $xeGantt
+      }) : barStyle : {}) || {};
       const {
         round
-      } = barStyle || {};
+      } = barStyObj;
       const rowRest = fullAllDataRowIdData[rowid] || {};
       const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0;
       const isRsHeight = resizeHeight > 0;
       const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
       let title = getStringValue(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, titleField));
       const progressValue = showProgress ? Math.min(100, Math.max(0, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, progressField)))) : 0;
+      const vbStyle = {};
+      const vpStyle = {
+        width: `${progressValue || 0}%`
+      };
+      if (isBarRowStyle) {
+        const {
+          bgColor,
+          completedBgColor
+        } = barStyObj;
+        if (bgColor) {
+          vbStyle.backgroundColor = bgColor;
+        }
+        if (completedBgColor) {
+          vpStyle.backgroundColor = completedBgColor;
+        }
+      }
       if (contentMethod) {
         title = getStringValue(contentMethod({
           row,
@@ -3425,6 +3536,7 @@ const {
         }
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar',
+        style: vbStyle,
         rowid,
         onClick(evnt) {
           $xeGantt.handleTaskBarClickEvent(evnt, {
@@ -3440,9 +3552,7 @@ const {
         row
       }) : [showProgress ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-gantt-view--chart-progress',
-        style: {
-          width: `${progressValue || 0}%`
-        }
+        style: vpStyle
       }) : renderEmptyElement($xeGantt), showContent ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-gantt-view--chart-content'
       }, title) : renderEmptyElement($xeGantt)])]);
@@ -3827,6 +3937,7 @@ const {
 
 
 
+
 const {
   globalEvents
 } = core_.VxeUI;
@@ -3868,7 +3979,6 @@ const maxYHeight = 5e6;
     const $xeGantt = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeGantt', {});
     const {
       computeTaskOpts,
-      computeTaskViewOpts,
       computeStartField,
       computeEndField,
       computeScrollbarOpts,
@@ -3915,14 +4025,7 @@ const maxYHeight = 5e6;
       tableData: [],
       tableColumn: [],
       headerGroups: [],
-      viewCellWidth: 40,
-      rowHeightStore: {
-        large: 52,
-        default: 48,
-        medium: 44,
-        small: 40,
-        mini: 36
-      }
+      viewCellWidth: 20
     });
     const internalData = createInternalData();
     const refMaps = {
@@ -3947,106 +4050,271 @@ const maxYHeight = 5e6;
     };
     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 minScale = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().last(taskScaleList);
       const fullCols = [];
       const groupCols = [];
-      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 = [];
-              const colList = [];
-              const groupMaps = {};
-              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);
-              }
-              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 = {};
-                const handleParseRender = row => {
-                  const rowid = $xeTable.getRowid(row);
-                  const startValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, startField);
-                  const endValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().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
-                    };
-                  }
-                };
-                if (treeConfig) {
-                  external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(afterTreeFullData, handleParseRender, {
-                    children: transform ? treeOpts.mapChildrenField : childrenField
-                  });
-                } else {
-                  afterFullData.forEach(handleParseRender);
-                }
-                internalData.chartMaps = ctMaps;
-              }
+      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;
             }
             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 = {
+          year: [],
+          quarter: [],
+          month: [],
+          week: [],
+          day: [],
+          date: [],
+          hour: [],
+          minute: [],
+          second: []
+        };
+        const tempTypeMaps = {
+          year: {},
+          quarter: {},
+          month: {},
+          week: {},
+          day: {},
+          date: {},
+          hour: {},
+          minute: {},
+          second: {}
+        };
+        const handleData = (type, colMaps, minCol) => {
+          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] = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getYearWeek(itemDate, weekScale ? weekScale.startDay : undefined);
+          const dateObj = {
+            yy: yyyy,
+            M: MM,
+            d: dd,
+            H: HH,
+            m: mm,
+            s: ss,
+            q,
+            W,
+            E,
+            e
+          };
+          const colMaps = {
+            year: {
+              field: yyyy,
+              title: yyyy,
+              dateObj
+            },
+            quarter: {
+              field: `${yyyy}_q${q}`,
+              title: `${q}`,
+              dateObj
+            },
+            month: {
+              field: `${yyyy}_${MM}`,
+              title: MM,
+              dateObj
+            },
+            week: {
+              field: `${yyyy}_W${W}`,
+              title: `${W}`,
+              dateObj
+            },
+            day: {
+              field: `${yyyy}_${MM}_${dd}_E${E}`,
+              title: `${E}`,
+              dateObj
+            },
+            date: {
+              field: `${yyyy}_${MM}_${dd}`,
+              title: dd,
+              dateObj
+            },
+            hour: {
+              field: `${yyyy}_${MM}_${dd}_${HH}`,
+              title: HH,
+              dateObj
+            },
+            minute: {
+              field: `${yyyy}_${MM}_${dd}_${HH}_${mm}`,
+              title: mm,
+              dateObj
+            },
+            second: {
+              field: `${yyyy}_${MM}_${dd}_${HH}_${mm}_${ss}`,
+              title: ss,
+              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 = 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 = {};
+          const handleParseRender = row => {
+            const rowid = $xeTable.getRowid(row);
+            const startValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, startField);
+            const endValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().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
+              };
+            }
+          };
+          if (treeConfig) {
+            external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(afterTreeFullData, handleParseRender, {
+              children: transform ? treeOpts.mapChildrenField : childrenField
+            });
+          } else {
+            afterFullData.forEach(handleParseRender);
+          }
+          internalData.chartMaps = ctMaps;
+        }
       }
       reactData.tableColumn = fullCols;
       reactData.headerGroups = groupCols;
@@ -4646,11 +4914,10 @@ const maxYHeight = 5e6;
         scrollXLoad,
         scrollYLoad
       } = reactData;
-      const taskViewOpts = computeTaskViewOpts.value;
       const scrollbarXToTop = computeScrollbarXToTop.value;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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,
@@ -4713,7 +4980,7 @@ var external_root_VxeUITable_commonjs_vxe_table_commonjs2_vxe_table_amd_vxe_tabl
 const {
   getConfig,
   getIcon,
-  getI18n,
+  getI18n: gantt_getI18n,
   commands,
   hooks,
   useFns,
@@ -4731,6 +4998,20 @@ function gantt_createInternalData() {
     resizeTableWidth: 0
   };
 }
+const viewTypeLevelMaps = {
+  year: 19,
+  quarter: 17,
+  month: 15,
+  week: 13,
+  day: 11,
+  date: 9,
+  hour: 7,
+  minute: 5,
+  second: 3
+};
+function getViewTypeLevel(type) {
+  return viewTypeLevelMaps[type || 'date'] || viewTypeLevelMaps.date;
+}
 /* harmony default export */ var gantt = (defineVxeComponent({
   name: 'VxeGantt',
   props: {
@@ -4743,6 +5024,7 @@ function gantt_createInternalData() {
     zoomConfig: Object,
     layouts: Array,
     taskConfig: Object,
+    taskViewScaleConfs: Object,
     taskViewConfig: Object,
     taskBarConfig: Object,
     taskSplitConfig: Object,
@@ -4781,7 +5063,8 @@ function gantt_createInternalData() {
         currentPage: 1
       },
       showLeftView: true,
-      showRightView: true
+      showRightView: true,
+      taskScaleList: []
     });
     const internalData = gantt_createInternalData();
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -4847,6 +5130,9 @@ function gantt_createInternalData() {
     const computeTaskOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().gantt.taskConfig, props.taskConfig);
     });
+    const computeTaskViewScaleMapsOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().merge({}, getConfig().gantt.taskViewScaleConfs, props.taskViewScaleConfs);
+    });
     const computeTaskViewOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().gantt.taskViewConfig, props.taskViewConfig);
     });
@@ -4856,6 +5142,13 @@ function gantt_createInternalData() {
     const computeTaskSplitOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig);
     });
+    const computeTaskScaleConfs = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const taskViewOpts = computeTaskViewOpts.value;
+      const {
+        scales
+      } = taskViewOpts;
+      return scales;
+    });
     const computeTitleField = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const taskOpts = computeTaskOpts.value;
       return taskOpts.titleField || 'title';
@@ -4911,7 +5204,7 @@ function gantt_createInternalData() {
           stys.maxHeight = maxHeight === 'auto' || maxHeight === '100%' ? '100%' : toCssUnit(maxHeight);
         }
       }
-      if (barStyle) {
+      if (barStyle && !external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(barStyle)) {
         const {
           bgColor,
           completedBgColor
@@ -5090,9 +5383,11 @@ function gantt_createInternalData() {
       computeToolbarOpts,
       computeZoomOpts,
       computeTaskOpts,
+      computeTaskViewScaleMapsOpts,
       computeTaskViewOpts,
       computeTaskBarOpts,
       computeTaskSplitOpts,
+      computeTaskScaleConfs,
       computeTitleField,
       computeStartField,
       computeEndField,
@@ -5110,6 +5405,47 @@ function gantt_createInternalData() {
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     };
+    const handleTaskScaleConfig = () => {
+      const taskScaleConfs = computeTaskScaleConfs.value;
+      const taskViewScaleMapsOpts = computeTaskViewScaleMapsOpts.value;
+      const scaleConfs = [];
+      if (taskScaleConfs) {
+        const keyMaps = {};
+        taskScaleConfs.forEach(conf => {
+          const sConf = !conf || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(conf) ? {
+            type: conf
+          } : conf;
+          const {
+            type
+          } = sConf;
+          if (!type || !viewTypeLevelMaps[type]) {
+            errLog('vxe.error.errProp', [`type=${type}`, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().orderBy(scaleConfs, {
+        field: 'level',
+        order: 'desc'
+      });
+    };
     const initToolbar = () => {
       const toolbarOpts = computeToolbarOpts.value;
       if (props.toolbarConfig && isEnableConf(toolbarOpts)) {
@@ -5185,7 +5521,7 @@ function gantt_createInternalData() {
           if (core_.VxeUI.modal) {
             core_.VxeUI.modal.message({
               id: code,
-              content: getI18n('vxe.grid.selectOneRecord'),
+              content: gantt_getI18n('vxe.grid.selectOneRecord'),
               status: 'warning'
             });
           }
@@ -5206,7 +5542,7 @@ function gantt_createInternalData() {
           $gantt: $xeGantt
         }) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(rest, messageProp);
       }
-      return msg || getI18n(defaultMsg);
+      return msg || gantt_getI18n(defaultMsg);
     };
     const handleDeleteRow = (code, alertKey, callback) => {
       const isActiveMsg = computeIsActiveMsg.value;
@@ -5216,7 +5552,7 @@ function gantt_createInternalData() {
           if (core_.VxeUI.modal) {
             return core_.VxeUI.modal.confirm({
               id: `cfm_${code}`,
-              content: getI18n(alertKey),
+              content: gantt_getI18n(alertKey),
               escClosable: true
             }).then(type => {
               if (type === 'confirm') {
@@ -5228,7 +5564,7 @@ function gantt_createInternalData() {
           if (core_.VxeUI.modal) {
             core_.VxeUI.modal.message({
               id: `msg_${code}`,
-              content: getI18n('vxe.grid.selectOneRecord'),
+              content: gantt_getI18n('vxe.grid.selectOneRecord'),
               status: 'warning'
             });
           }
@@ -5918,7 +6254,7 @@ function gantt_createInternalData() {
                     if (core_.VxeUI.modal) {
                       core_.VxeUI.modal.message({
                         id: code,
-                        content: getI18n('vxe.grid.selectOneRecord'),
+                        content: gantt_getI18n('vxe.grid.selectOneRecord'),
                         status: 'warning'
                       });
                     }
@@ -6023,7 +6359,7 @@ function gantt_createInternalData() {
                       if (core_.VxeUI.modal) {
                         core_.VxeUI.modal.message({
                           id: code,
-                          content: getI18n('vxe.grid.dataUnchanged'),
+                          content: gantt_getI18n('vxe.grid.dataUnchanged'),
                           status: 'info'
                         });
                       }
@@ -6824,6 +7160,9 @@ function gantt_createInternalData() {
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.proxyConfig, () => {
       initProxy();
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeTaskScaleConfs, () => {
+      handleTaskScaleConfig();
+    });
     hooks.forEach(options => {
       const {
         setupGantt
@@ -6835,6 +7174,7 @@ function gantt_createInternalData() {
         }
       }
     });
+    handleTaskScaleConfig();
     initPages();
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {