vxe-gantt 4.1.6 → 4.1.8

package/packages/gantt/src/gantt.ts

@@ -5,13 +5,14 @@ import { getLastZIndex, nextZIndex, isEnableConf, formatText } from '../../ui/sr
 import { getOffsetHeight, getPaddingTopBottomSize, getDomNode, toCssUnit, addClass, removeClass } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
 import { VxeUI } from '@vxe-ui/core'
+import { getTaskLinkKey } from './util'
 import { ganttEmits } from './emits'
 import { tableEmits } from './table-emits'
 import { warnLog, errLog } from '../../ui/src/log'
 import GanttViewComponent from './gantt-view'
 import { VxeTable as VxeTableComponent } from 'vxe-table'
 
-import type { VxeGanttConstructor, VxeGanttEmits, GanttReactData, GanttInternalData, VxeGanttPropTypes, GanttMethods, GanttPrivateMethods, VxeGanttPrivateMethods, GanttPrivateRef, VxeGanttProps, VxeGanttPrivateComputed, VxeGanttViewInstance, VxeGanttDefines } from '../../../types'
+import type { VxeGanttConstructor, VxeGanttEmits, GanttReactData, GanttInternalData, VxeGanttPropTypes, GanttMethods, GanttPrivateMethods, VxeGanttPrivateMethods, GanttPrivateRef, VxeGanttProps, VxeGanttPrivateComputed, VxeGanttViewInstance, VxeGanttDefines, VxeGanttViewPrivateMethods } from '../../../types'
 import type { ValueOf, VxeFormEvents, VxeFormInstance, VxeTooltipInstance, VxePagerEvents, VxeFormItemProps, VxePagerInstance, VxeComponentStyleType } from 'vxe-pc-ui'
 import type { VxeTableMethods, VxeToolbarPropTypes, VxeTableProps, VxeTablePropTypes, VxeTableConstructor, VxeTablePrivateMethods, VxeTableEvents, VxeTableDefines, VxeTableEventProps, VxeToolbarInstance, VxeGridPropTypes, VxeGridDefines } from 'vxe-table'
 
@@ -26,6 +27,9 @@ const defaultLayouts: VxeGanttPropTypes.Layouts = [['Form'], ['Toolbar', 'Top',
 
 function createInternalData (): GanttInternalData {
   return {
+    linkFromConfMaps: {},
+    linkFromKeyMaps: {},
+    linkUniqueMaps: {},
     uFoot: false,
     resizeTableWidth: 0
     // barTipTimeout: null
@@ -74,17 +78,19 @@ export default 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>,
@@ -114,6 +120,7 @@ export default defineVxeComponent({
       tableLoading: false,
       proxyInited: false,
       isZMax: false,
+      tableLinks: [],
       tableData: [],
       filterData: [],
       formData: {},
@@ -134,7 +141,10 @@ export default defineVxeComponent({
         content: '',
         visible: false,
         params: null
-      }
+      },
+
+      linkList: [],
+      upLinkFlag: 0
     })
 
     const internalData = createInternalData()
@@ -146,7 +156,7 @@ export default defineVxeComponent({
     const refPager = ref<VxePagerInstance>()
     const refGanttContainerElem = ref<HTMLDivElement>()
     const refClassifyWrapperElem = ref<HTMLDivElement>()
-    const refGanttView = ref<VxeGanttViewInstance>()
+    const refGanttView = ref<VxeGanttViewInstance & VxeGanttViewPrivateMethods>()
 
     const refPopupContainerElem = ref<HTMLDivElement>()
 
@@ -248,6 +258,10 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().gantt.taskBarTooltipConfig, props.taskBarTooltipConfig)
     })
 
+    const computeTaskLinkOpts = computed(() => {
+      return Object.assign({}, getConfig().gantt.taskLinkConfig, props.taskLinkConfig)
+    })
+
     const computeScaleUnit = computed(() => {
       const minScale = computeMinScale.value
       return minScale ? minScale.type : 'date'
@@ -496,6 +510,7 @@ export default defineVxeComponent({
       computeTaskBarResizeOpts,
       computeTaskSplitOpts,
       computeTaskBarTooltipOpts,
+      computeTaskLinkOpts,
       computeTaskViewScales,
       computeScaleUnit,
       computeMinScale,
@@ -918,6 +933,45 @@ export default defineVxeComponent({
       reactData.showRightView = !reactData.showRightView
     }
 
+    const handleTableLinks = () => {
+      const { linkList } = reactData
+      reactData.tableLinks = linkList.slice(0)
+    }
+
+    const 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, lineType, 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, lineType, lineWidth, showArrow }
+          confs.push(confObj)
+          linkConfs.push(confObj)
+          fromKeyMaps[from] = confObj
+          uniqueMaps[tlKey] = confObj
+        }
+      }
+    }
+
+    const handleTaskUpdateLinks = (links: VxeGanttPropTypes.Links) => {
+      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 nextTick()
+    }
+
     const tableCompEvents: VxeTableEventProps = {}
     tableEmits.forEach(name => {
       const type = XEUtils.camelCase(`on-${name}`) as keyof VxeTableEventProps
@@ -1798,6 +1852,9 @@ export default defineVxeComponent({
           $xeGantt.closeTaskBarTooltip()
         }
       },
+      handleTableLinks,
+      handleTaskAddLink,
+      handleTaskUpdateLinks,
       handleTaskHeaderContextmenuEvent (evnt, params) {
         const $xeTable = refTable.value
         if ($xeTable) {
@@ -2409,10 +2466,21 @@ export default defineVxeComponent({
       }
     })
 
+    if (props.links) {
+      $xeGantt.handleTaskUpdateLinks(props.links)
+    }
     handleTaskScaleConfig()
     initPages()
 
     onMounted(() => {
+      if (!$xeGantt.handleUpdateTaskLink) {
+        if (props.links) {
+          warnLog('vxe.error.notProp', ['links'])
+        }
+        if (props.taskLinkConfig) {
+          warnLog('vxe.error.notProp', ['task-link-config'])
+        }
+      }
       nextTick(() => {
         const { columns } = props
         const proxyOpts = computeProxyOpts.value

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/table-emits.ts

@@ -12,6 +12,7 @@ export const tableEmits: VxeTableEmits = [
   'paste',
   'copy',
   'cut',
+  'context-menu',
 
   'columns-change',
   'data-change',

package/packages/gantt/src/util.ts

@@ -33,3 +33,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;
 }