vxe-gantt 4.1.18 → 4.1.20

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

@@ -20,17 +20,16 @@ export default defineVxeComponent({
     const $xeGantt = inject('$xeGantt', {} as (VxeGanttConstructor & VxeGanttPrivateMethods))
     const $xeGanttView = inject('$xeGanttView', {} as VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
 
-    const { props: ganttProps, internalData: ganttInternalData } = $xeGantt
+    const { props: ganttProps, reactData: ganttReactData, internalData: ganttInternalData } = $xeGantt
     const { reactData: ganttViewReactData, internalData: ganttViewInternalData } = $xeGanttView
     const { computeProgressField, computeTitleField, computeTypeField, computeTaskBarOpts, computeScaleUnit, computeTaskLinkOpts, computeTaskBarMilestoneOpts } = $xeGantt.getComputeMaps()
 
     const refElem = ref<HTMLDivElement>()
     const refTaskWrapperElem = ref() as Ref<HTMLDivElement>
-    const reflineWrapperElem = ref() as Ref<HTMLDivElement>
+    const refChartBeforeWrapperElem = ref() as Ref<HTMLDivElement>
+    const refChartAfterWrapperElem = ref() as Ref<HTMLDivElement>
 
     const renderTaskBar = ($xeTable: VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods, row: any, rowid: string, rowIndex: number, $rowIndex: number, _rowIndex: number) => {
-      const tableProps = $xeTable.props
-      const { treeConfig } = tableProps
       const tableReactData = $xeTable.reactData
       const { resizeHeightFlag } = tableReactData
       const tableInternalData = $xeTable.internalData
@@ -44,6 +43,7 @@ export default defineVxeComponent({
       const taskBarSlot = ganttSlots.taskBar || ganttSlots['task-bar']
 
       const { taskBarMilestoneConfig } = ganttProps
+      const { activeLink, activeBarRowid } = ganttReactData
       const titleField = computeTitleField.value
       const progressField = computeProgressField.value
       const typeField = computeTypeField.value
@@ -92,27 +92,12 @@ export default defineVxeComponent({
         rowIndex,
         _rowIndex
       }
-      const ons: {
-        onClick: any
-        onDblclick: any
-        onMousedown: any
+      const ctOns: {
         onMouseover?: any
         onMouseleave?: any
-      } = {
-        onClick (evnt: MouseEvent) {
-          $xeGantt.handleTaskBarClickEvent(evnt, barParams)
-        },
-        onDblclick (evnt: MouseEvent) {
-          $xeGantt.handleTaskBarDblclickEvent(evnt, barParams)
-        },
-        onMousedown (evnt: MouseEvent) {
-          if ($xeGantt.handleTaskBarMousedownEvent) {
-            $xeGantt.handleTaskBarMousedownEvent(evnt, barParams)
-          }
-        }
-      }
+      } = {}
       if (showTooltip) {
-        ons.onMouseover = (evnt: MouseEvent) => {
+        ctOns.onMouseover = (evnt: MouseEvent) => {
           const { dragBarRow } = ganttInternalData
           const ttParams = Object.assign({ $event: evnt }, ctParams)
           if (!dragBarRow) {
@@ -120,7 +105,7 @@ export default defineVxeComponent({
           }
           $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt)
         }
-        ons.onMouseleave = (evnt: MouseEvent) => {
+        ctOns.onMouseleave = (evnt: MouseEvent) => {
           const { dragBarRow } = ganttInternalData
           const ttParams = Object.assign({ $event: evnt }, ctParams)
           if (!dragBarRow) {
@@ -136,13 +121,16 @@ export default defineVxeComponent({
           isMilestone,
           title,
           vbStyle,
-          vpStyle
+          vpStyle,
+          rowid,
+          ctOns
         })
       } else if (taskBarSlot) {
         cbVNs.push(
           h('div', {
             key: 'cbc',
-            class: 'vxe-gantt-view--chart-custom-bar-content'
+            class: 'vxe-gantt-view--chart-custom-bar-content-wrapper',
+            ...ctOns
           }, $xeGantt.callSlot(taskBarSlot, barParams))
         )
       } else {
@@ -152,7 +140,8 @@ export default defineVxeComponent({
           cbVNs.push(
             h('div', {
               key: 'vcm',
-              class: 'vxe-gantt-view--chart-milestone-wrapper'
+              class: 'vxe-gantt-view--chart-milestone-wrapper',
+              ...ctOns
             }, [
               h('div', {
                 class: ['vxe-gantt-view--chart-milestone-icon', iconStatus ? `theme--${XEUtils.isFunction(iconStatus) ? iconStatus(tbmParams) : iconStatus}` : ''],
@@ -171,25 +160,31 @@ export default defineVxeComponent({
           )
         } else {
           cbVNs.push(
-            showProgress
-              ? h('div', {
-                key: 'vcp',
-                class: 'vxe-gantt-view--chart-progress',
-                style: vpStyle
-              })
-              : renderEmptyElement($xeGantt),
-            showContent
-              ? h('div', {
-                key: 'vcc',
-                class: 'vxe-gantt-view--chart-content'
-              }, title)
-              : renderEmptyElement($xeGantt)
+            h('div', {
+              key: 'vbc',
+              class: 'vxe-gantt-view--chart-bar-content-wrapper',
+              ...ctOns
+            }, [
+              showProgress
+                ? h('div', {
+                  key: 'vcp',
+                  class: 'vxe-gantt-view--chart-progress',
+                  style: vpStyle
+                })
+                : renderEmptyElement($xeGantt),
+              showContent
+                ? h('div', {
+                  key: 'vcc',
+                  class: 'vxe-gantt-view--chart-content'
+                }, title)
+                : renderEmptyElement($xeGantt)
+            ])
           )
         }
       }
 
       return h('div', {
-        key: treeConfig ? rowid : $rowIndex,
+        key: rowid,
         rowid,
         class: ['vxe-gantt-view--chart-row', `is--${gettaskType(typeValue)}`, {
           'is--round': round,
@@ -203,10 +198,23 @@ export default defineVxeComponent({
         }
       }, [
         h('div', {
-          class: [taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar', `is--${gettaskType(typeValue)}`],
+          class: [taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar', `is--${gettaskType(typeValue)}`, {
+            'is--active': activeBarRowid === rowid,
+            'active--link': activeLink && (rowid === `${activeLink.from}` || rowid === `${activeLink.to}`)
+          }],
           style: vbStyle,
           rowid,
-          ...ons
+          onClick (evnt: MouseEvent) {
+            $xeGantt.handleTaskBarClickEvent(evnt, barParams)
+          },
+          onDblclick (evnt: MouseEvent) {
+            $xeGantt.handleTaskBarDblclickEvent(evnt, barParams)
+          },
+          onMousedown (evnt: MouseEvent) {
+            if ($xeGantt.handleTaskBarMousedownEvent) {
+              $xeGantt.handleTaskBarMousedownEvent(evnt, barParams)
+            }
+          }
         }, cbVNs)
       ])
     }
@@ -254,26 +262,41 @@ export default defineVxeComponent({
     const renderVN = () => {
       const $xeTable = ganttViewInternalData.xeTable
 
+      const { dragLinkFromStore } = ganttReactData
       const { tableData } = ganttViewReactData
       const taskLinkOpts = computeTaskLinkOpts.value
-      const { showArrow } = taskLinkOpts
+      const taskBarOpts = computeTaskBarOpts.value
+      const { isCurrent, isHover } = taskLinkOpts
+      const { linkCreatable } = taskBarOpts
 
       return h('div', {
         ref: refElem,
-        class: 'vxe-gantt-view--chart-wrapper'
+        class: ['vxe-gantt-view--chart-wrapper', {
+          'is--cl-drag': dragLinkFromStore.rowid
+        }]
       }, [
-        $xeGantt.renderGanttTaskLines
+        $xeGantt.renderGanttTaskChartBefores
           ? h('div', {
-            ref: reflineWrapperElem,
-            class: ['vxe-gantt-view--chart-line-wrapper', {
-              'show-arrow': showArrow
+            ref: refChartBeforeWrapperElem,
+            class: ['vxe-gantt-view--chart-before-wrapper', {
+              'link--current': isCurrent,
+              'link--hover': isHover
             }]
-          }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskLines() : [])
+          }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskChartBefores() : [])
           : renderEmptyElement($xeGantt),
         h('div', {
           ref: refTaskWrapperElem,
-          class: 'vxe-gantt-view--chart-task-wrapper'
-        }, $xeTable ? renderTaskRows($xeTable, tableData) : [])
+          class: ['vxe-gantt-view--chart-task-wrapper', {
+            'link--current': isCurrent,
+            'link--create': linkCreatable
+          }]
+        }, $xeTable ? renderTaskRows($xeTable, tableData) : []),
+        $xeGantt.renderGanttTaskChartAfters
+          ? h('div', {
+            ref: refChartAfterWrapperElem,
+            class: 'vxe-gantt-view--chart-after-wrapper'
+          }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskChartAfters() : [])
+          : renderEmptyElement($xeGantt)
       ])
     }
 
@@ -281,14 +304,16 @@ export default defineVxeComponent({
       const { elemStore } = ganttViewInternalData
       const prefix = 'main-chart-'
       elemStore[`${prefix}task-wrapper`] = refTaskWrapperElem
-      elemStore[`${prefix}line-wrapper`] = reflineWrapperElem
+      elemStore[`${prefix}before-wrapper`] = refChartBeforeWrapperElem
+      elemStore[`${prefix}after-wrapper`] = refChartAfterWrapperElem
     })
 
     onUnmounted(() => {
       const { elemStore } = ganttViewInternalData
       const prefix = 'main-chart-'
       elemStore[`${prefix}task-wrapper`] = null
-      elemStore[`${prefix}line-wrapper`] = null
+      elemStore[`${prefix}before-wrapper`] = null
+      elemStore[`${prefix}after-wrapper`] = null
     })
 
     return renderVN

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

@@ -951,7 +951,7 @@ export default defineVxeComponent({
 
       return Promise.all([
         updateTaskChart(),
-        $xeGantt.handleUpdateTaskLink ? $xeGantt.handleUpdateTaskLink($xeGanttView) : null
+        $xeGantt.handleUpdateTaskLinkStyle ? $xeGantt.handleUpdateTaskLinkStyle($xeGanttView) : null
       ])
     }
 
@@ -1115,10 +1115,15 @@ export default defineVxeComponent({
         scrollXSpaceEl.style.width = `${scrollXWidth}px`
       }
 
-      const lineWrapper = getRefElem(elemStore['main-chart-line-wrapper'])
-      const svgElem = lineWrapper ? lineWrapper.firstElementChild as HTMLDivElement : null
-      if (svgElem) {
-        svgElem.style.width = `${scrollXWidth}px`
+      const beforeWrapper = getRefElem(elemStore['main-chart-before-wrapper'])
+      const beforeSvgElem = beforeWrapper ? beforeWrapper.firstElementChild as HTMLDivElement : null
+      if (beforeSvgElem) {
+        beforeSvgElem.style.width = `${scrollXWidth}px`
+      }
+      const afterWrapper = getRefElem(elemStore['main-chart-after-wrapper'])
+      const afterSvgElem = afterWrapper ? afterWrapper.firstElementChild as HTMLDivElement : null
+      if (afterSvgElem) {
+        afterSvgElem.style.width = `${scrollXWidth}px`
       }
 
       calcScrollbar()
@@ -1180,10 +1185,15 @@ export default defineVxeComponent({
         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` : ''
+      const beforeWrapper = getRefElem(elemStore['main-chart-before-wrapper'])
+      const beforeSvgElem = beforeWrapper ? beforeWrapper.firstElementChild as HTMLDivElement : null
+      if (beforeSvgElem) {
+        beforeSvgElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
+      }
+      const afterWrapper = getRefElem(elemStore['main-chart-after-wrapper'])
+      const afterSvgElem = afterWrapper ? afterWrapper.firstElementChild as HTMLDivElement : null
+      if (afterSvgElem) {
+        afterSvgElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
       }
 
       reactData.scrollYTop = scrollYTop

package/packages/gantt/src/gantt.ts

@@ -1,4 +1,4 @@
-import { h, ref, PropType, computed, provide, reactive, onUnmounted, watch, nextTick, VNode, onMounted } from 'vue'
+import { h, ref, PropType, computed, provide, reactive, onBeforeUnmount, onUnmounted, watch, nextTick, VNode, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getLastZIndex, nextZIndex, isEnableConf, formatText } from '../../ui/src/utils'
@@ -30,9 +30,54 @@ function createInternalData (): GanttInternalData {
     linkFromKeyMaps: {},
     linkUniqueMaps: {},
     uFoot: false,
-    resizeTableWidth: 0
-    // barTipTimeout: null
-    // dragBarRow: null
+    resizeTableWidth: 0,
+    // barTipTimeout: null,
+    // dragBarRow: null,
+    // dragLineRow: null,
+    dragLinkToStore: {
+      rowid: null,
+      type: 0
+    }
+  }
+}
+
+function createReactData (): GanttReactData {
+  return {
+    tableLoading: false,
+    proxyInited: false,
+    isZMax: false,
+    tableLinks: [],
+    tableData: [],
+    filterData: [],
+    formData: {},
+    sortData: [],
+    footerData: [],
+    tZindex: 0,
+    tablePage: {
+      total: 0,
+      pageSize: getConfig().pager?.pageSize || 10,
+      currentPage: 1
+    },
+    showLeftView: true,
+    showRightView: true,
+    taskScaleList: [],
+
+    barTipStore: {
+      row: null,
+      content: '',
+      visible: false,
+      params: null
+    },
+
+    dragLinkFromStore: {
+      rowid: null,
+      type: 0
+    },
+    activeBarRowid: null,
+    activeLink: null,
+    isActiveCeLe: false,
+    linkList: [],
+    upLinkFlag: 0
   }
 }
 
@@ -117,36 +162,7 @@ export default defineVxeComponent({
 
     const { computeSize } = useFns.useSize(props)
 
-    const reactData = reactive<GanttReactData>({
-      tableLoading: false,
-      proxyInited: false,
-      isZMax: false,
-      tableLinks: [],
-      tableData: [],
-      filterData: [],
-      formData: {},
-      sortData: [],
-      footerData: [],
-      tZindex: 0,
-      tablePage: {
-        total: 0,
-        pageSize: getConfig().pager?.pageSize || 10,
-        currentPage: 1
-      },
-      showLeftView: true,
-      showRightView: true,
-      taskScaleList: [],
-
-      barTipStore: {
-        row: null,
-        content: '',
-        visible: false,
-        params: null
-      },
-
-      linkList: [],
-      upLinkFlag: 0
-    })
+    const reactData = reactive(createReactData())
 
     const internalData = createInternalData()
 
@@ -288,6 +304,11 @@ export default defineVxeComponent({
       return scales
     })
 
+    const computeTaskLinkStyle = computed(() => {
+      const { lineType, lineWidth, lineStatus, lineColor } = computeTaskLinkOpts.value
+      return `${lineType || ''}_${lineWidth || ''}_${lineStatus || ''}_${lineColor || ''}`
+    })
+
     const computeTitleField = computed(() => {
       const taskOpts = computeTaskOpts.value
       return taskOpts.titleField || 'title'
@@ -1768,21 +1789,34 @@ export default defineVxeComponent({
             $xeTable.handleToggleCheckRowEvent(evnt, params)
           }
         }
+        reactData.isActiveCeLe = false
+        reactData.activeBarRowid = null
+        reactData.activeLink = null
         $xeGantt.dispatchEvent('task-cell-click', params, evnt)
       },
       handleTaskCellDblclickEvent (evnt, params) {
         $xeGantt.dispatchEvent('task-cell-dblclick', params, evnt)
       },
       handleTaskBarClickEvent (evnt, params) {
+        const $xeTable = refTable.value
+        const taskBarOpts = computeTaskBarOpts.value
+        const { linkCreatable } = taskBarOpts
+        const { row } = params
+        reactData.isActiveCeLe = !!linkCreatable
+        reactData.activeBarRowid = $xeTable ? $xeTable.getRowid(row) : row
+        reactData.activeLink = null
         $xeGantt.dispatchEvent('task-bar-click', params, evnt)
       },
       handleTaskBarDblclickEvent (evnt, params) {
         $xeGantt.dispatchEvent('task-bar-dblclick', params, evnt)
       },
       triggerTaskBarTooltipEvent (evnt, params) {
-        const { barTipStore } = reactData
-        const { dragBarRow } = internalData
-        if (dragBarRow) {
+        const { barTipStore, activeLink } = reactData
+        const { dragBarRow, dragLineRow } = internalData
+        if (dragBarRow || dragLineRow) {
+          return
+        }
+        if (activeLink) {
           return
         }
         const taskBarTooltipOpts = computeTaskBarTooltipOpts.value
@@ -2433,6 +2467,12 @@ export default defineVxeComponent({
       $xeGantt.refreshTaskView()
     })
 
+    watch(computeTaskLinkStyle, () => {
+      if ($xeGantt.handleUpdateTaskLinkData) {
+        $xeGantt.handleUpdateTaskLinkData()
+      }
+    })
+
     hooks.forEach((options) => {
       const { setupGantt } = options
       if (setupGantt) {
@@ -2443,16 +2483,16 @@ export default defineVxeComponent({
       }
     })
 
-    if ($xeGantt.handleTaskUpdateLinks) {
+    if ($xeGantt.handleTaskLoadLinks) {
       if (props.links) {
-        $xeGantt.handleTaskUpdateLinks(props.links)
+        $xeGantt.handleTaskLoadLinks(props.links)
       }
     }
     handleTaskScaleConfig()
     initPages()
 
     onMounted(() => {
-      if (!$xeGantt.handleUpdateTaskLink) {
+      if (!$xeGantt.handleUpdateTaskLinkData) {
         if (props.links) {
           warnLog('vxe.error.notProp', ['links'])
         }
@@ -2508,6 +2548,10 @@ export default defineVxeComponent({
       globalEvents.on($xeGantt, 'keydown', handleGlobalKeydownEvent)
     })
 
+    onBeforeUnmount(() => {
+      XEUtils.assign(reactData, createReactData())
+    })
+
     onUnmounted(() => {
       globalEvents.off($xeGantt, 'keydown')
       XEUtils.assign(internalData, createInternalData())

package/packages/gantt/src/util.ts

@@ -42,10 +42,6 @@ export function getTaskBarWidth (chartRest: VxeGanttDefines.RowCacheItem | null,
   return Math.max(1, chartRest ? (Math.floor(viewCellWidth * chartRest.oWidthSize) - 1) : 0)
 }
 
-export function getTaskLinkKey (from: string | number, to: string | number) {
-  return `${from}_${to}`
-}
-
 const taskTypeMaps: Record<string, boolean> = {
   milestone: true
 }

package/packages/ui/index.ts

@@ -50,6 +50,7 @@ setConfig({
     },
     taskLinkConfig: {
       enabled: true,
+      isHover: true,
       showArrow: true
     },
     taskViewScaleConfig: {

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

@@ -16,6 +16,10 @@
     & > .vxe-gantt-view--chart-bar,
     & > .vxe-gantt-view--chart-custom-bar {
       border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
+      .vxe-gantt-view--chart-bar-content-wrapper,
+      .vxe-gantt-view--chart-custom-bar-content-wrapper {
+        border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
+      }
       &:hover {
         &::after {
           border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
@@ -32,15 +36,23 @@
   top: 50%;
   left: 0;
   transform: translateY(-50%);
-  overflow: hidden;
   pointer-events: all;
   &.is--default {
     color: #ffffff;
     background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
   }
 }
-.vxe-gantt-view--chart-custom-bar-content {
+.vxe-gantt-view--chart-bar-content-wrapper,
+.vxe-gantt-view--chart-custom-bar-content-wrapper {
+  width: 100%;
+  overflow: hidden;
+}
+.vxe-gantt-view--chart-bar-content-wrapper {
   width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 .vxe-gantt-view--chart-bar {
   align-items: center;

package/styles/theme/base.scss

@@ -9,5 +9,6 @@
   --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-width: 2px;
   --vxe-ui-gantt-view-task-line-arrow-width: 5;
 }