vxe-gantt 3.1.6 → 3.1.7

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

@@ -1,8 +1,8 @@
 import { VNode, CreateElement } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { VxeUI } from '@vxe-ui/core'
-import { setScrollTop, setScrollLeft, removeClass, addClass, hasClass } from '../../ui/src/dom'
-import { getRefElem, getStandardGapTime } from './util'
+import { setScrollTop, setScrollLeft, removeClass, addClass } from '../../ui/src/dom'
+import { getRefElem, getStandardGapTime, getTaskBarLeft, getTaskBarWidth } from './util'
 import XEUtils from 'xe-utils'
 import GanttViewHeaderComponent from './gantt-header'
 import GanttViewBodyComponent from './gantt-body'
@@ -601,30 +601,37 @@ function calcScrollbar ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPriv
   }
 }
 
-function updateChart ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+function updateTaskChart ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+  const $xeGantt = $xeGanttView.$xeGantt
   const reactData = $xeGanttView.reactData
   const internalData = $xeGanttView.internalData
+  const ganttInternalData = $xeGantt.internalData
+  const $xeTable = internalData.xeTable
 
+  const { dragBarRow } = ganttInternalData
   const { viewCellWidth } = reactData
   const { elemStore, chartMaps } = internalData
-  const chartWrapper = getRefElem(elemStore['main-chart-wrapper'])
-  if (chartWrapper) {
+  const chartWrapper = getRefElem(elemStore['main-chart-task-wrapper'])
+  if (chartWrapper && $xeTable) {
     XEUtils.arrayEach(chartWrapper.children, (rowEl) => {
       const barEl = rowEl.children[0] as HTMLDivElement
-      if (!barEl || hasClass(barEl, 'is--drag')) {
+      if (!barEl) {
         return
       }
       const rowid = rowEl.getAttribute('rowid')
-      const rowRest = rowid ? chartMaps[rowid] : null
-      barEl.style.left = `${rowRest ? viewCellWidth * rowRest.oLeftSize : 0}px`
-      barEl.style.width = `${Math.max(1, rowRest ? (Math.floor(viewCellWidth * rowRest.oWidthSize) - 1) : 0)}px`
+      if (dragBarRow && $xeTable.getRowid(dragBarRow) === rowid) {
+        return
+      }
+      const chartRest = rowid ? chartMaps[rowid] : null
+      barEl.style.left = `${getTaskBarLeft(chartRest, viewCellWidth)}px`
+      barEl.style.width = `${getTaskBarWidth(chartRest, viewCellWidth)}px`
     })
   }
   return $xeGanttView.$nextTick()
 }
 
 function updateStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
-  const $xeGantt = $xeGanttView.$xeGantt
+  const $xeGantt = $xeGanttView.$xeGantt as VxeGanttConstructor & VxeGanttPrivateMethods
   const reactData = $xeGanttView.reactData
   const internalData = $xeGanttView.internalData
 
@@ -636,6 +643,9 @@ function updateStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivat
   if (!el) {
     return
   }
+  if (!$xeGantt) {
+    return
+  }
 
   const scrollbarOpts = $xeGantt.computeScrollbarOpts
   const scrollbarXToTop = $xeGantt.computeScrollbarXToTop
@@ -746,20 +756,26 @@ function updateStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivat
 
   reactData.scrollXWidth = viewTableWidth
 
-  return updateChart($xeGanttView)
+  return Promise.all([
+    updateTaskChart($xeGanttView),
+    $xeGantt.handleUpdateTaskLink ? $xeGantt.handleUpdateTaskLink($xeGanttView) : null
+  ])
 }
 
 function handleRecalculateStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
   const internalData = $xeGanttView.internalData
+  const $xeGantt = $xeGanttView.$xeGantt
 
   const el = $xeGanttView.$refs.refElem as HTMLDivElement
   internalData.rceRunTime = Date.now()
   if (!el || !el.clientWidth) {
     return $xeGanttView.$nextTick()
   }
+  if (!$xeGantt) {
+    return $xeGanttView.$nextTick()
+  }
   calcScrollbar($xeGanttView)
   updateStyle($xeGanttView)
-  updateChart($xeGanttView)
   return computeScrollLoad($xeGanttView)
 }
 
@@ -975,7 +991,7 @@ function updateScrollYSpace ($xeGanttView: VxeGanttViewConstructor & VxeGanttVie
     scrollYTop = 0
   }
 
-  const bodyChartWrapperElem = getRefElem(elemStore['main-chart-wrapper'])
+  const bodyChartWrapperElem = getRefElem(elemStore['main-chart-task-wrapper'])
   if (bodyTableElem) {
     bodyTableElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`
   }
@@ -992,6 +1008,13 @@ function updateScrollYSpace ($xeGanttView: VxeGanttViewConstructor & VxeGanttVie
   if (scrollYSpaceEl) {
     scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
   }
+
+  const lineWrapper = getRefElem(elemStore['main-chart-line-wrapper'])
+  const svgElem = lineWrapper ? lineWrapper.firstElementChild as HTMLDivElement : null
+  if (svgElem) {
+    svgElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
+  }
+
   reactData.scrollYTop = scrollYTop
   reactData.scrollYHeight = scrollYHeight
   reactData.isScrollYBig = isScrollYBig

package/packages/gantt/src/gantt.ts

@@ -5,13 +5,14 @@ import XEUtils from 'xe-utils'
 import { getLastZIndex, nextZIndex, isEnableConf, formatText } from '../../ui/src/utils'
 import { getOffsetHeight, getPaddingTopBottomSize, getDomNode, toCssUnit, addClass, removeClass } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
+import { getTaskLinkKey } from './util'
 import { warnLog, errLog } from '../../ui/src/log'
 import GanttViewComponent from './gantt-view'
 import { VxeTable as VxeTableComponent } from 'vxe-table'
 
 import type { ValueOf, VxeFormInstance, VxeFormItemProps, VxePagerInstance, VxePagerDefines, VxeComponentStyleType, VxeComponentSizeType, VxeFormDefines, VxeFormItemPropTypes } from 'vxe-pc-ui'
 import type { VxeTableMethods, VxeToolbarPropTypes, VxeTooltipInstance, VxeTableProps, VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines, TableReactData, VxeToolbarInstance, TableInternalData, VxeTablePropTypes, VxeGridPropTypes, VxeGridDefines } from 'vxe-table'
-import type { VxeGanttEmits, GanttReactData, GanttInternalData, VxeGanttPropTypes, VxeGanttViewInstance, VxeGanttDefines, VxeGanttConstructor } from '../../../types'
+import type { VxeGanttEmits, GanttReactData, GanttInternalData, VxeGanttPropTypes, VxeGanttViewInstance, VxeGanttDefines, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
 
 const { getConfig, getIcon, getI18n, commands, globalMixins, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI
 
@@ -74,8 +75,29 @@ XEUtils.each((VxeTableComponent as any).methods, (fn, name) => {
   }
 })
 
+function handleTaskAddLink (item: VxeGanttPropTypes.Link, linkConfs: VxeGanttDefines.LinkConfObj[], fromConfMaps: Record<string, VxeGanttDefines.LinkConfObj[]>, fromKeyMaps: Record<string, VxeGanttDefines.LinkConfObj>, uniqueMaps: Record<string, VxeGanttDefines.LinkConfObj>) {
+  if (item) {
+    const { type, from, to, lineStatus, lineColor, lineTyle, lineWidth, showArrow } = item
+    const tlKey = getTaskLinkKey(from, to)
+    if (from && to && !uniqueMaps[tlKey]) {
+      let confs = fromConfMaps[from]
+      if (!confs) {
+        confs = fromConfMaps[from] = []
+      }
+      const confObj: VxeGanttDefines.LinkConfObj = { type, from, to, lineStatus, lineColor, lineTyle, lineWidth, showArrow }
+      confs.push(confObj)
+      linkConfs.push(confObj)
+      fromKeyMaps[from] = confObj
+      uniqueMaps[tlKey] = confObj
+    }
+  }
+}
+
 function createInternalData (): GanttInternalData {
   return {
+    linkFromConfMaps: {},
+    linkFromKeyMaps: {},
+    linkUniqueMaps: {},
     uFoot: false,
     resizeTableWidth: 0
     // barTipTimeout: null
@@ -110,17 +132,19 @@ export default /* define-vxe-component start */ defineVxeComponent({
       params: PropType<VxeTablePropTypes.Params>
     }),
 
-    columns: Array as PropType<VxeGridPropTypes.Columns<any>>,
+    columns: Array as PropType<VxeGridPropTypes.Columns>,
     pagerConfig: Object as PropType<VxeGridPropTypes.PagerConfig>,
     proxyConfig: Object as PropType<VxeGridPropTypes.ProxyConfig<any>>,
     toolbarConfig: Object as PropType<VxeGridPropTypes.ToolbarConfig>,
     formConfig: Object as PropType<VxeGridPropTypes.FormConfig>,
     zoomConfig: Object as PropType<VxeGridPropTypes.ZoomConfig>,
 
+    links: Array as PropType<VxeGanttPropTypes.Links>,
     layouts: Array as PropType<VxeGanttPropTypes.Layouts>,
     taskConfig: Object as PropType<VxeGanttPropTypes.TaskConfig>,
     taskViewScaleConfig: Object as PropType<VxeGanttPropTypes.TaskViewScaleConfig>,
     taskViewConfig: Object as PropType<VxeGanttPropTypes.TaskViewConfig>,
+    taskLinkConfig: Object as PropType<VxeGanttPropTypes.TaskLinkConfig>,
     taskBarConfig: Object as PropType<VxeGanttPropTypes.TaskBarConfig>,
     taskBarTooltipConfig: Object as PropType<VxeGanttPropTypes.TaskBarTooltipConfig>,
     taskSplitConfig: Object as PropType<VxeGanttPropTypes.TaskSplitConfig>,
@@ -147,6 +171,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       tableLoading: false,
       proxyInited: false,
       isZMax: false,
+      tableLinks: [],
       tableData: [],
       filterData: [],
       formData: {},
@@ -167,7 +192,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
         content: '',
         visible: false,
         params: null
-      }
+      },
+
+      linkList: [],
+      upLinkFlag: 0
     }
 
     const internalData = createInternalData()
@@ -272,6 +300,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       return Object.assign({}, getConfig().gantt.taskBarTooltipConfig, props.taskBarTooltipConfig)
     },
+    computeTaskLinkOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
+
+      return Object.assign({}, getConfig().gantt.taskLinkConfig, props.taskLinkConfig)
+    },
     computeScaleUnit () {
       const $xeGantt = this
 
@@ -679,7 +713,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
     },
     getRespMsg (rest: any, defaultMsg: string) {
-      const $xeGantt = this
+      const $xeGantt = this as unknown as VxeGanttConstructor & VxeGanttPrivateMethods
 
       const proxyOpts = $xeGantt.computeProxyOpts
       const resConfigs = proxyOpts.response || proxyOpts.props || {}
@@ -1187,7 +1221,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
             const commitParams = {
               $table: $xeTable,
               $grid: null,
-              $gantt: $xeGantt,
+              $gantt: $xeGantt as unknown as VxeGanttConstructor & VxeGanttPrivateMethods,
               code,
               button,
               isInited,
@@ -1209,7 +1243,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
               let tableData: any[] = []
               reactData.tableLoading = false
               if (rest) {
-                const reParams = { data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }
+                const reParams = { data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt as unknown as VxeGanttConstructor & VxeGanttPrivateMethods }
                 if (pagerConfig && isEnableConf(pagerOpts)) {
                   const totalProp = resConfigs.total
                   const total = (XEUtils.isFunction(totalProp) ? totalProp(reParams) : XEUtils.get(rest, totalProp || 'page.total')) || 0
@@ -1278,7 +1312,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
             const commitParams = {
               $table: $xeTable,
               $grid: null,
-              $gantt: $xeGantt,
+              $gantt: $xeGantt as unknown as VxeGanttConstructor & VxeGanttPrivateMethods,
               code,
               button,
               filters: filterList,
@@ -1316,7 +1350,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
             const commitParams = {
               $table: $xeTable,
               $grid: null,
-              $gantt: $xeGantt,
+              $gantt: $xeGantt as unknown as VxeGanttConstructor & VxeGanttPrivateMethods,
               code,
               button,
               body,
@@ -1393,7 +1427,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
             const commitParams = {
               $table: $xeTable,
               $grid: null,
-              $gantt: $xeGantt,
+              $gantt: $xeGantt as unknown as VxeGanttConstructor & VxeGanttPrivateMethods,
               code,
               button,
               body,
@@ -1479,7 +1513,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           if (gCommandOpts) {
             const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod
             if (tCommandMethod) {
-              tCommandMethod({ code, button, $grid: null, $table: $xeTable, $gantt: $xeGantt }, ...args)
+              tCommandMethod({ code, button, $grid: null, $table: $xeTable, $gantt: $xeGantt as unknown as VxeGanttConstructor & VxeGanttPrivateMethods }, ...args)
             } else {
               errLog('vxe.error.notCommands', [code])
             }
@@ -1729,8 +1763,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
       return $xeGantt.$nextTick()
     },
     /**
-       * 关闭 bar tooltip
-       */
+     * 关闭 bar tooltip
+     */
     closeTaskBarTooltip () {
       const $xeGantt = this
       const reactData = $xeGantt.reactData
@@ -1953,6 +1987,33 @@ export default /* define-vxe-component start */ defineVxeComponent({
         $xeGantt.closeTaskBarTooltip()
       }
     },
+    handleTableLinks () {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+
+      const { linkList } = reactData
+      reactData.tableLinks = linkList.slice(0)
+    },
+    handleTaskAddLink,
+    handleTaskUpdateLinks (links: VxeGanttPropTypes.Links) {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+      const internalData = $xeGantt.internalData
+
+      const linkConfs: VxeGanttDefines.LinkConfObj[] = []
+      const fromConfMaps: Record<string, VxeGanttDefines.LinkConfObj[]> = {}
+      const fromKeyMaps: Record<string, VxeGanttDefines.LinkConfObj> = {}
+      const uniqueMaps: Record<string, VxeGanttDefines.LinkConfObj> = {}
+      XEUtils.each(links || [], item => {
+        handleTaskAddLink(item, linkConfs, fromConfMaps, fromKeyMaps, uniqueMaps)
+      })
+      reactData.linkList = linkConfs
+      internalData.linkFromConfMaps = fromConfMaps
+      internalData.linkFromKeyMaps = fromKeyMaps
+      internalData.linkUniqueMaps = uniqueMaps
+      $xeGantt.handleTableLinks()
+      return $xeGantt.$nextTick()
+    },
     handleTaskHeaderContextmenuEvent (evnt: Event, params: VxeGanttDefines.TaskHeaderContextmenuParams) {
       const $xeGantt = this
       const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
@@ -2260,7 +2321,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       return renderEmptyElement($xeGantt)
     },
     renderTable (h: CreateElement) {
-      const $xeGantt = this
+      const $xeGantt = this as unknown as VxeGanttConstructor & VxeGanttPrivateMethods
       const slots = $xeGantt.$scopedSlots
 
       const tableProps = $xeGantt.computeTableProps
@@ -2271,7 +2332,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         h(VxeTableComponent as Component, {
           key: 'table',
           props: tableProps,
-          on: getTableOns($xeGantt as VxeGanttConstructor),
+          on: getTableOns($xeGantt),
           scopedSlots: slots,
           ref: 'refTable'
         })
@@ -2590,6 +2651,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
       warnLog('vxe.error.notProp', ['expand-config'])
     }
 
+    if (!($xeGantt as unknown as VxeGanttConstructor & VxeGanttPrivateMethods).handleUpdateTaskLink) {
+      if (props.taskLinkConfig) {
+        warnLog('vxe.error.notProp', ['task-link-config'])
+      }
+      if (props.links) {
+        errLog('vxe.error.notProp', ['links'])
+      }
+    }
     $xeGantt.$nextTick(() => {
       if (props.formConfig) {
         if (!VxeUIFormComponent) {
@@ -2608,6 +2677,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
     })
 
+    if (props.links) {
+      $xeGantt.handleTaskUpdateLinks(props.links)
+    }
     $xeGantt.handleTaskScaleConfig()
     $xeGantt.initPages()
   },

package/packages/gantt/src/static.ts

@@ -0,0 +1,21 @@
+/**
+ * 依赖线枚举类型
+ */
+export enum VxeGanttDependencyType {
+  /**
+   * 结束后才开始，表示一个任务必须在另一个任务开始之前完成
+   */
+  FinishToStart = 0,
+  /**
+   * 开始到结束，表示从某个过程的开始到结束的整个过程
+   */
+  StartToFinish = 1,
+  /**
+   * 开始后才开始，表示一个活动结束了，另一个活动才能开始，它们之间按先后顺序进行
+   */
+  StartToStart = 2,
+  /**
+   * 完成到完成，表示一个任务必须在另一个任务完成之后才能完成
+   */
+  FinishToFinish = 3
+}

package/packages/gantt/src/util.ts

@@ -23,3 +23,15 @@ export function getStandardGapTime (type: VxeGanttDefines.ColumnScaleType) {
   }
   return 1000 * 60 * 60 * 24
 }
+
+export function getTaskBarLeft (chartRest: VxeGanttDefines.RowCacheItem | null, viewCellWidth: number) {
+  return chartRest ? viewCellWidth * chartRest.oLeftSize : 0
+}
+
+export function getTaskBarWidth (chartRest: VxeGanttDefines.RowCacheItem | null, viewCellWidth: number) {
+  return Math.max(1, chartRest ? (Math.floor(viewCellWidth * chartRest.oWidthSize) - 1) : 0)
+}
+
+export function getTaskLinkKey (from: string | number, to: string | number) {
+  return `${from}_${to}`
+}

package/packages/ui/index.ts

@@ -48,6 +48,10 @@ setConfig({
     taskBarTooltipConfig: {
       enterable: true
     },
+    taskLinkConfig: {
+      enabled: true,
+      showArrow: true
+    },
     taskViewScaleConfig: {
       year: {
         valueFormat: ymdFormat

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

@@ -1,9 +1,10 @@
-.vxe-gantt-view--chart-wrapper {
+.vxe-gantt-view--chart-task-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
 }
+
 .vxe-gantt-view--chart-row {
   position: relative;
   width: 100%;

package/styles/components/gantt.scss

@@ -683,4 +683,3 @@
     font-size: var(--vxe-ui-font-size-mini);
   }
 }
-

package/styles/theme/base.scss

@@ -8,4 +8,6 @@
   --vxe-ui-gantt-view-task-bar-border-radius: calc(var(--vxe-ui-gantt-view-split-bar-height) / 2);
   --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-line-color: var(--vxe-ui-font-primary-color);
+  --vxe-ui-gantt-view-task-line-arrow-width: 5;
 }