vxe-gantt 3.7.3 → 3.8.0

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

@@ -3,22 +3,46 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import { VxeUI } from '@vxe-ui/core'
 import { setScrollTop, setScrollLeft, removeClass, addClass, hasClass } from '../../ui/src/dom'
 import { getRefElem, getTaskBarLeft, getTaskBarWidth, hasMilestoneTask, getTaskType, hasSubviewTask } from './util'
+import { VxeGanttDependencyType } from './static'
 import XEUtils from 'xe-utils'
 import GanttViewHeaderComponent from './gantt-header'
 import GanttViewBodyComponent from './gantt-body'
 import GanttViewFooterComponent from './gantt-footer'
 
 import type { TableReactData, TableInternalData, VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from 'vxe-table'
-import type { VxeGanttViewConstructor, GanttViewReactData, VxeGanttDefines, VxeGanttViewPrivateMethods, GanttViewInternalData, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
+import type { VxeGanttViewConstructor, GanttViewReactData, VxeGanttDefines, VxeGanttPropTypes, VxeGanttViewPrivateMethods, GanttViewInternalData, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
+
+interface CpmLink extends VxeGanttPropTypes.Link {
+  raw: VxeGanttPropTypes.Link
+}
+
+interface CpmItem {
+  row: any
+  rowid: string
+  duration: number
+  incoming: CpmLink[]
+  outgoing: CpmLink[]
+  indeg: number
+  ES: number
+  EF: number
+  LS: number
+  LF: number
+}
 
 const { globalEvents } = VxeUI
 
+const { FinishToStart, StartToFinish, StartToStart, FinishToFinish } = VxeGanttDependencyType
+
 const sourceType = 'gantt'
 const secondMs = 1000
 const minuteMs = 1000 * 60
 const hourMs = 1000 * 60 * 60
 const dayMs = hourMs * 24
 
+function getTaskLinkKey (from: string | number, to: string | number, type?: VxeGanttDependencyType) {
+  return from + '_' + to + '_' + (type || 0)
+}
+
 function createInternalData (): GanttViewInternalData {
   return {
     xeTable: null,
@@ -827,6 +851,9 @@ function handleUpdateData ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewP
   const internalData = $xeGanttView.internalData
 
   const ganttProps = $xeGantt
+  const ganttReactData = $xeGantt.reactData
+
+  const { linkList } = ganttReactData
   const { treeConfig } = ganttProps
   const { scrollXStore } = internalData
   const $xeTable = internalData.xeTable
@@ -834,6 +861,7 @@ function handleUpdateData ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewP
   const edMaps: Record<string, any> = {}
   let minDate: Date | null = null
   let maxDate: Date | null = null
+  const allList: any[] = []
   if ($xeTable) {
     const startField = $xeGantt.computeStartField
     const endField = $xeGantt.computeEndField
@@ -870,6 +898,7 @@ function handleUpdateData ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewP
           maxDate = endDate
         }
       }
+      allList.push(row)
     }
 
     if (isRowGroupStatus) {
@@ -892,6 +921,239 @@ function handleUpdateData ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewP
   internalData.startMaps = sdMaps
   internalData.endMaps = edMaps
   handleParseColumn($xeGanttView)
+  handleCriticalPath($xeGanttView, allList, linkList)
+}
+
+/**
+ * 正向：后置 ES 的下连接线
+ */
+function forwardCriticalPathLowerBound (linkType: VxeGanttDependencyType, predES: number, predEF: number, duration: number): number {
+  switch (linkType) {
+    case FinishToStart:
+      return predEF
+    case StartToFinish:
+      return predES - duration
+    case StartToStart:
+      return predES
+    case FinishToFinish:
+      return predEF - duration
+    default:
+      return 0
+  }
+}
+
+/**
+ * 反向：前置 LF 的上连接线
+ */
+function backwardCriticalPathUpperBound (linkType: VxeGanttDependencyType, succLS: number, succLF: number, duration: number): number {
+  switch (linkType) {
+    case FinishToStart:
+      return succLS
+    case StartToFinish:
+      return succLF + duration
+    case StartToStart:
+      return succLS + duration
+    case FinishToFinish:
+      return succLF
+    default:
+      return -1
+  }
+}
+
+/**
+ * 关键边：两端都关键时，约束是否连接
+ */
+function isCriticalPathLinkTight (linkType: VxeGanttDependencyType, fromES: number, fromEF: number, toES: number, toEF: number, tolerance: number) {
+  switch (linkType) {
+    case FinishToStart:
+      return Math.abs(fromEF - toES) < tolerance
+    case StartToFinish:
+      return Math.abs(fromES - toEF) < tolerance
+    case StartToStart:
+      return Math.abs(fromES - toES) < tolerance
+    case FinishToFinish:
+      return Math.abs(fromEF - toEF) < tolerance
+    default:
+      return false
+  }
+}
+
+export function handleCriticalPath ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods, data: any[], links: VxeGanttPropTypes.Links) {
+  const $xeGantt = $xeGanttView.$xeGantt
+  const internalData = $xeGanttView.internalData
+  const ganttReactData = $xeGantt.reactData
+  const ganttInternalData = $xeGantt.internalData
+
+  const taskBarOpts = $xeGantt.computeTaskBarOpts
+  const $xeTable = internalData.xeTable
+
+  const criticalRowList: any[] = []
+  const criticalRowMaps = new Map<string, any>()
+  const criticalLinkKeyMaps = new Map<string, VxeGanttPropTypes.Link>()
+
+  ganttInternalData.criticalRowList = criticalRowList
+  ganttInternalData.criticalRowMaps = criticalRowMaps
+  ganttInternalData.criticalLinkKeyMaps = criticalLinkKeyMaps
+  if (!taskBarOpts.showCriticalPath || !links.length || !data.length || !$xeTable) {
+    if (ganttReactData.criticalRowIds.length || ganttReactData.criticalLinks.length) {
+      ganttReactData.criticalPathFlag++
+    }
+    ganttReactData.criticalLinks = []
+    ganttReactData.criticalRowIds = []
+    return
+  }
+  const { chartMaps } = internalData
+  const tolerance = 1e-6
+
+  const nodeMap = new Map<string, CpmItem>()
+  for (const row of data) {
+    const rowid = $xeTable.getRowid(row)
+    const chartRest = chartMaps[rowid]
+    nodeMap.set(rowid, {
+      row,
+      rowid: rowid,
+      duration: chartRest ? chartRest.oWidthSize : 0,
+      incoming: [],
+      outgoing: [],
+      indeg: 0,
+      ES: 0,
+      EF: 0,
+      LS: 0,
+      LF: 0
+    })
+  }
+
+  // 边界
+  const linkList: CpmLink[] = []
+  for (const link of links) {
+    const fromKey = '' + link.from
+    const toKey = '' + link.to
+    if (!nodeMap.has(fromKey) || !nodeMap.has(toKey) || fromKey === toKey) {
+      continue
+    }
+    const lkItemitem: CpmLink = {
+      from: link.from,
+      to: link.to,
+      type: XEUtils.toNumber(link.type) || 0,
+      raw: link
+    }
+    linkList.push(lkItemitem)
+    const toObjItem = nodeMap.get('' + link.to)
+    const fromObjItem = nodeMap.get('' + link.from)
+    if (fromObjItem) {
+      fromObjItem.outgoing.push(lkItemitem)
+    }
+    if (toObjItem) {
+      toObjItem.incoming.push(lkItemitem)
+      toObjItem.indeg++
+    }
+  }
+
+  // 拓扑排序 + 环检测
+  const queueList: CpmItem[] = []
+  nodeMap.forEach(nodeitem => {
+    if (nodeitem.indeg === 0) {
+      queueList.push(nodeitem)
+    }
+  })
+
+  const orderList: CpmItem[] = []
+  for (let head = 0; head < queueList.length; head++) {
+    const node = queueList[head]
+    orderList.push(node)
+    for (const lkItemitem of node.outgoing) {
+      const toObjItem = nodeMap.get('' + lkItemitem.to)
+      if (toObjItem) {
+        const nextDeg = toObjItem.indeg - 1
+        toObjItem.indeg = nextDeg
+        if (nextDeg === 0) {
+          queueList.push(nodeMap.get('' + lkItemitem.to)!)
+        }
+      }
+    }
+  }
+
+  if (orderList.length !== nodeMap.size) {
+    // 异常数据，依赖图中存在环
+    if (ganttReactData.criticalRowIds.length || ganttReactData.criticalLinks.length) {
+      ganttReactData.criticalPathFlag++
+    }
+    ganttReactData.criticalLinks = []
+    ganttReactData.criticalRowIds = []
+    return
+  }
+
+  // 正向：ES / EF
+  let criticalDuration = 0
+  for (const node of orderList) {
+    let earliestStart = 0
+    for (const lkItem of node.incoming) {
+      const fromObjItem = nodeMap.get('' + lkItem.from)
+      if (fromObjItem) {
+        const need = forwardCriticalPathLowerBound(lkItem.type, fromObjItem.ES, fromObjItem.EF, node.duration)
+        if (need > earliestStart) {
+          earliestStart = need
+        }
+      }
+    }
+    node.ES = earliestStart
+    node.EF = earliestStart + node.duration
+    if (node.EF > criticalDuration) {
+      criticalDuration = node.EF
+    }
+  }
+
+  // 反向：LS / LF
+  for (let i = orderList.length - 1; i >= 0; i--) {
+    const node = orderList[i]
+    let latestFinish = criticalDuration
+    for (const lkItem of node.outgoing) {
+      const toObjItem = nodeMap.get('' + lkItem.to)
+      if (toObjItem) {
+        const need = backwardCriticalPathUpperBound(lkItem.type, toObjItem.LS, toObjItem.LF, node.duration)
+        if (need < latestFinish) {
+          latestFinish = need
+        }
+      }
+    }
+    node.LF = latestFinish
+    node.LS = latestFinish - node.duration
+  }
+
+  // 关键任务
+  const criticalSet = new Set<string>()
+  const criticalRowIds: string[] = []
+  for (const nodeItem of orderList) {
+    if (Math.abs(nodeItem.LS - nodeItem.ES) < tolerance) {
+      criticalSet.add(nodeItem.rowid)
+      criticalRowIds.push(nodeItem.rowid)
+      criticalRowList.push(nodeItem.row)
+      criticalRowMaps.set(nodeItem.rowid, nodeItem.row)
+    }
+  }
+
+  // 关键连接线
+  const criticalLinks: VxeGanttPropTypes.Links = []
+  for (const lkItem of linkList) {
+    const toObjItem = nodeMap.get('' + lkItem.to)
+    const fromObjItem = nodeMap.get('' + lkItem.from)
+    if (!toObjItem || !fromObjItem) {
+      continue
+    }
+    // 两端必须都是关键任务
+    if (!criticalSet.has(fromObjItem.rowid) || !criticalSet.has(toObjItem.rowid)) {
+      continue
+    }
+    // 约束必须是连接的
+    if (isCriticalPathLinkTight(lkItem.type, fromObjItem.ES, fromObjItem.EF, toObjItem.ES, toObjItem.EF, tolerance)) {
+      criticalLinks.push(lkItem.raw)
+      criticalLinkKeyMaps.set(getTaskLinkKey(lkItem.from, lkItem.to, lkItem.type), lkItem.raw)
+    }
+  }
+
+  ganttReactData.criticalLinks = criticalLinks
+  ganttReactData.criticalRowIds = criticalRowIds
+  ganttReactData.criticalPathFlag++
 }
 
 function calcScrollbar ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {

package/packages/gantt/src/gantt.ts

@@ -90,7 +90,11 @@ function createInternalData (): GanttInternalData {
     dragLinkToStore: {
       rowid: null,
       type: 0
-    }
+    },
+    // 关键路径
+    criticalRowList: [],
+    criticalRowMaps: new Map(),
+    criticalLinkKeyMaps: new Map()
   }
 }
 
@@ -144,7 +148,12 @@ function createReactData (): GanttReactData {
 
     nowTime: 0,
     currLeftSpacing: 0,
-    currRightSpacing: 0
+    currRightSpacing: 0,
+
+    // 关键路径
+    criticalLinks: [],
+    criticalRowIds: [],
+    criticalPathFlag: 0
   }
 }
 
@@ -192,6 +201,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     taskLinkConfig: Object as PropType<VxeGanttPropTypes.TaskLinkConfig>,
     taskBarConfig: Object as PropType<VxeGanttPropTypes.TaskBarConfig>,
     taskBarMilestoneConfig: Object as PropType<VxeGanttPropTypes.TaskBarMilestoneConfig>,
+    taskCriticalPathConfig: Object as PropType<VxeGanttPropTypes.TaskCriticalPathConfig>,
     taskBarSubviewConfig: Object as PropType<VxeGanttPropTypes.TaskBarSubviewConfig>,
     taskBarTooltipConfig: Object as PropType<VxeGanttPropTypes.TaskBarTooltipConfig>,
     taskSplitConfig: Object as PropType<VxeGanttPropTypes.TaskSplitConfig>,
@@ -223,7 +233,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
     return {
       xID,
       reactData,
-      internalData
+      internalData,
+      reViewFlag: 0
     }
   },
   computed: {
@@ -338,6 +349,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       return Object.assign({}, getConfig().gantt.taskBarMilestoneConfig, props.taskBarMilestoneConfig)
     },
+    computeTaskCriticalPathOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
+
+      return Object.assign({}, getConfig().gantt.taskCriticalPathConfig, props.taskCriticalPathConfig)
+    },
     computeTaskBarSubviewOpts () {
       const $xeGantt = this
       const props = $xeGantt
@@ -458,6 +475,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const scrollbarOpts = $xeGantt.computeScrollbarOpts as VxeTablePropTypes.ScrollbarConfig
       return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left')
     },
+    computeCriticalPathVisible () {
+      const $xeGantt = this
+
+      const taskBarOpts = $xeGantt.computeTaskBarOpts as VxeGanttPropTypes.TaskBarConfig
+      return taskBarOpts.showCriticalPath
+    },
     computeWrapperStyle () {
       const $xeGantt = this
       const props = $xeGantt
@@ -469,12 +492,17 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { viewStyle, tableStyle } = taskViewOpts
       const taskBarOpts = $xeGantt.computeTaskBarOpts as VxeGanttPropTypes.TaskBarConfig
       const { barStyle } = taskBarOpts
+      const taskCriticalPathOpts = $xeGantt.computeTaskCriticalPathOpts
+      const { lineColor: cpLineColor } = taskCriticalPathOpts
       const taskBarSubviewOpts = $xeGantt.computeTaskBarSubviewOpts
       const taskNowLineOpts = $xeGantt.computeTaskNowLineOpts
       const { fontColor: nlfColor, bgColor: nlbgColor, width: nlWidth } = taskNowLineOpts
       const stys: VxeComponentStyleType = {
         '--vxe-ui-gantt-scrollbar-width': (overflowY && scrollbarWidth ? scrollbarWidth : 0) + 'px'
       }
+      if (cpLineColor) {
+        stys['--vxe-ui-gantt-view-bar-critical-path-line-color'] = cpLineColor
+      }
       if (isZMax) {
         stys.zIndex = tZindex
       } else {
@@ -710,6 +738,16 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeGantt = this
 
       $xeGantt.handleTaskScaleConfig()
+      $xeGantt.reViewFlag++
+    },
+    computeCriticalPathVisible () {
+      const $xeGantt = this
+
+      $xeGantt.reViewFlag++
+    },
+    reViewFlag () {
+      const $xeGantt = this
+
       $xeGantt.refreshTaskView()
     },
     computeTaskLinkStyle () {
@@ -1764,6 +1802,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const formOpts = $xeGantt.computeFormOpts
       return proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data
     },
+    /**
+     * 已废弃，被 getFormFlatItems 替换
+     * @deprecated
+     */
     getFormItems (itemIndex?: number): any {
       const $xeGantt = this
       const props = $xeGantt
@@ -1775,8 +1817,36 @@ export default /* define-vxe-component start */ defineVxeComponent({
       XEUtils.eachTree(formConfig && isEnableConf(formOpts) && items ? items : [], item => {
         itemList.push(item)
       }, { children: 'children' })
+      // errLog('vxe.error.delFunc', ['getFormItems', 'getFormFlatItems'])
       return XEUtils.isUndefined(itemIndex) ? itemList : itemList[itemIndex]
     },
+    getFormFlatItems () {
+      const $xeGantt = this
+
+      const $form = $xeGantt.$refs.refForm as VxeFormInstance
+      if ($form) {
+        return $form.getFlatItems()
+      }
+      return []
+    },
+    getFormNestedItems () {
+      const $xeGantt = this
+
+      const $form = $xeGantt.$refs.refForm as VxeFormInstance
+      if ($form) {
+        return $form.getNestedItems()
+      }
+      return []
+    },
+    getFormItemByField (field: string) {
+      const $xeGantt = this
+
+      const $form = $xeGantt.$refs.refForm as VxeFormInstance
+      if ($form) {
+        return $form.getItemByField(field)
+      }
+      return null
+    },
     resetForm () {
       const $xeGantt = this
 
@@ -2065,6 +2135,19 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       return $xeGantt.$nextTick()
     },
+    getCriticalPath () {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+      const internalData = $xeGantt.internalData
+
+      const { criticalRowIds, criticalLinks } = reactData
+      const { criticalRowMaps } = internalData
+      return {
+        rowIds: criticalRowIds.slice(0),
+        rows: Array.from(criticalRowMaps.values()),
+        links: criticalLinks.slice(0)
+      }
+    },
     /**
      * 获取需要排除的高度
      */
@@ -2485,7 +2568,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         // 处理插槽
         formOpts.items.forEach((item) => {
           XEUtils.each(item.slots, (func) => {
-            if (!XEUtils.isFunction(func)) {
+            if (func && !XEUtils.isFunction(func)) {
               if (slots[func]) {
                 formSlots[func] = slots[func]
               }

package/packages/gantt/src/util.ts

@@ -1,5 +1,5 @@
-import type { VxeGanttDefines, VxeGanttTaskType } from '../../../types'
 import type { VxeTableDefines, VxeTablePropTypes } from 'vxe-table'
+import type { VxeGanttDefines, VxeGanttTaskType } from '../../../types'
 
 export function getRefElem (refEl: any) {
   if (refEl) {

package/packages/ui/index.ts

@@ -100,6 +100,13 @@ setConfig({
     taskBarSubviewConfig: {
       // showOverview: false
     },
+    taskBarMoveConfig: {
+      isLimitByLink: true
+    },
+    taskBarResizeConfig: {
+      minWidthSize: 0.5,
+      isLimitByLink: true
+    },
     taskBarMoveTooltipConfig: {
       enterable: true,
       enterDelay: 0

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

@@ -15,6 +15,18 @@
   height: 0;
 }
 .vxe-gantt-view--chart-row {
+  &.is--critical {
+    & > .vxe-gantt-view--chart-bar {
+      .vxe-gantt-view--chart-bar-content-wrapper {
+        border: var(--vxe-ui-gantt-view-task-line-width) solid var(--vxe-ui-gantt-view-bar-critical-path-line-color);
+      }
+    }
+    & > .vxe-gantt-view--chart-custom-bar {
+      .vxe-gantt-view--chart-custom-bar-content-wrapper {
+        border: var(--vxe-ui-gantt-view-task-line-width) solid var(--vxe-ui-gantt-view-bar-critical-path-line-color);
+      }
+    }
+  }
   &.row--pending {
     .vxe-gantt-view--chart-bar {
       color: var(--vxe-ui-font-disabled-color);

package/styles/components/gantt.scss

@@ -4,12 +4,29 @@
 // 局部变量
 .vxe-gantt {
   --vxe-ui-gantt-current-split-bar-action-btn-offset-left: 0px;
+  --vxe-ui-gantt-current-font-size: var(--vxe-ui-font-size-default);
+  &.size--xlarge {
+    --vxe-ui-gantt-current-font-size: var(--vxe-ui-font-size-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-gantt-current-font-size: var(--vxe-ui-font-size-large);
+  }
+  &.size--medium {
+    --vxe-ui-gantt-current-font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    --vxe-ui-gantt-current-font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    --vxe-ui-gantt-current-font-size: var(--vxe-ui-font-size-mini);
+  }
 }
 
 .vxe-gantt {
   position: relative;
   display: flex;
   flex-direction: column;
+  font-size: var(--vxe-ui-gantt-current-font-size);
   &.is--loading {
     &:before {
       content: "";
@@ -752,16 +769,3 @@
     }
   }
 }
-
-.vxe-gantt {
-  font-size: var(--vxe-ui-font-size-default);
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-  }
-}

package/styles/theme/base.scss

@@ -14,6 +14,8 @@
   --vxe-ui-gantt-view-task-bar-background-color: var(--vxe-ui-font-primary-lighten-color);
   --vxe-ui-gantt-view-task-bar-completed-background-color: var(--vxe-ui-font-primary-color);
   --vxe-ui-gantt-view-task-bar-overview-background-color: var(--vxe-ui-font-disabled-color);
+  
+  --vxe-ui-gantt-view-bar-critical-path-line-color: var(--vxe-ui-status-error-darken-color);
 
   --vxe-ui-gantt-view-task-line-color: var(--vxe-ui-font-primary-color);
   --vxe-ui-gantt-view-task-line-width: 2px;