vxe-gantt 4.0.27 → 4.1.1

package/packages/gantt/src/gantt.ts

@@ -1,7 +1,7 @@
 import { h, ref, PropType, computed, provide, reactive, onUnmounted, watch, nextTick, VNode, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/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 { VxeUI } from '@vxe-ui/core'
@@ -12,7 +12,7 @@ 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 { ValueOf, VxeFormEvents, VxeFormInstance, VxePagerEvents, VxeFormItemProps, VxePagerInstance, VxeComponentStyleType } from 'vxe-pc-ui'
+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'
 
 const { getConfig, getIcon, getI18n, commands, hooks, useFns, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI
@@ -28,6 +28,7 @@ function createInternalData (): GanttInternalData {
   return {
     uFoot: false,
     resizeTableWidth: 0
+    // barTipTimeout: undefined
   }
 }
 
@@ -84,6 +85,7 @@ export default defineVxeComponent({
     taskViewScaleConfig: Object as PropType<VxeGanttPropTypes.TaskViewScaleConfig>,
     taskViewConfig: Object as PropType<VxeGanttPropTypes.TaskViewConfig>,
     taskBarConfig: Object as PropType<VxeGanttPropTypes.TaskBarConfig>,
+    taskBarTooltipConfig: Object as PropType<VxeGanttPropTypes.TaskBarTooltipConfig>,
     taskSplitConfig: Object as PropType<VxeGanttPropTypes.TaskSplitConfig>,
     taskBarResizeConfig: Object as PropType<VxeGanttPropTypes.TaskBarResizeConfig>,
     taskBarDragConfig: Object as PropType<VxeGanttPropTypes.TaskBarDragConfig>,
@@ -103,6 +105,7 @@ export default defineVxeComponent({
     const VxeUIPagerComponent = VxeUI.getComponent('VxePager')
     const VxeTableComponent = VxeUI.getComponent('VxeTable')
     const VxeToolbarComponent = VxeUI.getComponent('VxeToolbar')
+    const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip')
 
     const { computeSize } = useFns.useSize(props)
 
@@ -123,7 +126,14 @@ export default defineVxeComponent({
       },
       showLeftView: true,
       showRightView: true,
-      taskScaleList: []
+      taskScaleList: [],
+
+      barTipStore: {
+        row: null,
+        content: '',
+        visible: false,
+        params: null
+      }
     })
 
     const internalData = createInternalData()
@@ -147,6 +157,8 @@ export default defineVxeComponent({
     const refTableWrapper = ref<HTMLDivElement>()
     const refGanttWrapper = ref<HTMLDivElement>()
 
+    const refTooltip = ref<VxeTooltipInstance>()
+
     const refResizableSplitTip = ref<HTMLDivElement>()
 
     const extendTableMethods = <T>(methodKeys: T[]) => {
@@ -231,7 +243,26 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig)
     })
 
-    const computeTaskScaleConfs = computed(() => {
+    const computeTaskBarTooltipOpts = computed(() => {
+      return Object.assign({}, getConfig().gantt.taskBarTooltipConfig, props.taskBarTooltipConfig)
+    })
+
+    const computeScaleUnit = computed(() => {
+      const minScale = computeMinScale.value
+      return minScale ? minScale.type : 'date'
+    })
+
+    const computeMinScale = computed(() => {
+      const { taskScaleList } = reactData
+      return XEUtils.last(taskScaleList)
+    })
+
+    const computeWeekScale = computed(() => {
+      const { taskScaleList } = reactData
+      return taskScaleList.find(item => item.type === 'week')
+    })
+
+    const computeTaskViewScales = computed(() => {
       const taskViewOpts = computeTaskViewOpts.value
       const { scales } = taskViewOpts
       return scales
@@ -462,7 +493,11 @@ export default defineVxeComponent({
       computeTaskBarDragOpts,
       computeTaskBarResizeOpts,
       computeTaskSplitOpts,
-      computeTaskScaleConfs,
+      computeTaskBarTooltipOpts,
+      computeTaskViewScales,
+      computeScaleUnit,
+      computeMinScale,
+      computeWeekScale,
       computeTitleField,
       computeStartField,
       computeEndField,
@@ -472,6 +507,12 @@ export default defineVxeComponent({
       computeScrollbarYToLeft
     }
 
+    /**
+     * 已废弃，保留兼容
+     * @deprecated
+     */
+    ;(computeMaps as any).computeTaskScaleConfs = computeTaskViewScales
+
     const $xeGantt = {
       xID,
       props: props as VxeGanttProps,
@@ -483,7 +524,7 @@ export default defineVxeComponent({
     } as VxeGanttConstructor & VxeGanttPrivateMethods
 
     const handleTaskScaleConfig = () => {
-      const taskScaleConfs = computeTaskScaleConfs.value
+      const taskScaleConfs = computeTaskViewScales.value
       const taskViewScaleOpts = computeTaskViewScaleOpts.value
       const scaleConfs: VxeGanttDefines.ColumnScaleObj[] = []
       if (taskScaleConfs) {
@@ -962,6 +1003,18 @@ export default defineVxeComponent({
       emit(type, createEvent(evnt, { $grid: null, $gantt: $xeGantt }, params))
     }
 
+    const handleTargetEnterEvent = (isClear: boolean) => {
+      const $tooltip = refTooltip.value
+      clearTimeout(internalData.barTipTimeout)
+      if (isClear) {
+        $xeGantt.closeTaskBarTooltip()
+      } else {
+        if ($tooltip && $tooltip.setActived) {
+          $tooltip.setActived(true)
+        }
+      }
+    }
+
     const ganttMethods: GanttMethods = {
       dispatchEvent,
       getEl () {
@@ -1564,6 +1617,25 @@ export default defineVxeComponent({
       hideTaskView () {
         reactData.showRightView = false
         return nextTick()
+      },
+      /**
+       * 关闭 bar tooltip
+       */
+      closeTaskBarTooltip () {
+        const { barTipStore } = reactData
+        const $tooltip = refTooltip.value
+        if (barTipStore.visible) {
+          Object.assign(barTipStore, {
+            row: null,
+            content: null,
+            visible: false,
+            params: {}
+          })
+          if ($tooltip && $tooltip.close) {
+            $tooltip.close()
+          }
+        }
+        return nextTick()
       }
     }
 
@@ -1682,6 +1754,52 @@ export default defineVxeComponent({
       handleTaskBarDblclickEvent (evnt, params) {
         $xeGantt.dispatchEvent('task-bar-dblclick', params, evnt)
       },
+      triggerTaskBarTooltipEvent (evnt, params) {
+        const { barTipStore } = reactData
+        const taskBarTooltipOpts = computeTaskBarTooltipOpts.value
+        const titleField = computeTitleField.value
+        const { contentMethod } = taskBarTooltipOpts
+        const { row } = params
+        let content = formatText(XEUtils.get(row, titleField))
+        if (contentMethod) {
+          content = formatText(contentMethod(params))
+        }
+        handleTargetEnterEvent(barTipStore.row !== row)
+        const tipContent = formatText(content)
+        Object.assign(barTipStore, {
+          row,
+          visible: true,
+          content: tipContent,
+          params
+        })
+        nextTick(() => {
+          const $tooltip = refTooltip.value
+          if ($tooltip) {
+            if ($tooltip.openByEvent) {
+              $tooltip.openByEvent(evnt, evnt.currentTarget, tipContent)
+            } else if ($tooltip.open) {
+              $tooltip.open(evnt.currentTarget, tipContent)
+            }
+          }
+        })
+      },
+      handleTaskBarTooltipLeaveEvent () {
+        const taskBarTooltipOpts = computeTaskBarTooltipOpts.value
+        let $tooltip = refTooltip.value
+        if ($tooltip && $tooltip.setActived) {
+          $tooltip.setActived(false)
+        }
+        if (taskBarTooltipOpts.enterable) {
+          internalData.barTipTimeout = setTimeout(() => {
+            $tooltip = refTooltip.value
+            if ($tooltip && $tooltip.isActived && !$tooltip.isActived()) {
+              $xeGantt.closeTaskBarTooltip()
+            }
+          }, taskBarTooltipOpts.leaveDelay)
+        } else {
+          $xeGantt.closeTaskBarTooltip()
+        }
+      },
       handleTaskHeaderContextmenuEvent (evnt, params) {
         const $xeTable = refTable.value
         if ($xeTable) {
@@ -2156,10 +2274,13 @@ export default defineVxeComponent({
     }
 
     const renderLayout = () => {
+      const { barTipStore } = reactData
       const currLayoutConf = computeCurrLayoutConf.value
       const { headKeys, bodyKeys, footKeys } = currLayoutConf
+      const taskBarTooltipOpts = computeTaskBarTooltipOpts.value
       const asideLeftSlot = slots.asideLeft || slots['aside-left']
       const asideRightSlot = slots.asideRight || slots['aside-right']
+      const taskBarTooltipSlot = slots.taskBarTooltip || slots['task-bar-tooltip']
       return [
         h('div', {
           class: 'vxe-gantt--layout-header-wrapper'
@@ -2186,7 +2307,39 @@ export default defineVxeComponent({
         }, renderChildLayout(footKeys)),
         h('div', {
           ref: refPopupContainerElem
-        })
+        }),
+        h('div', {}, [
+          /**
+            * 任务条提示
+            */
+          h(VxeUITooltipComponent, {
+            key: 'gtp',
+            ref: refTooltip,
+            theme: taskBarTooltipOpts.theme,
+            enterable: taskBarTooltipOpts.enterable,
+            enterDelay: taskBarTooltipOpts.enterDelay,
+            leaveDelay: taskBarTooltipOpts.leaveDelay,
+            useHTML: taskBarTooltipOpts.useHTML,
+            width: taskBarTooltipOpts.width,
+            height: taskBarTooltipOpts.height,
+            minWidth: taskBarTooltipOpts.minWidth,
+            minHeight: taskBarTooltipOpts.minHeight,
+            maxWidth: taskBarTooltipOpts.maxWidth,
+            maxHeight: taskBarTooltipOpts.maxHeight,
+            isArrow: false
+          }, taskBarTooltipSlot
+            ? {
+                content: () => {
+                  const { row, content: tooltipContent } = barTipStore
+                  if (row) {
+                    return h('div', {
+                    }, taskBarTooltipSlot(Object.assign({ tooltipContent, $gantt: $xeGantt }, barTipStore.params)))
+                  }
+                  return renderEmptyElement($xeGantt)
+                }
+              }
+            : {})
+        ])
       ]
     }
 
@@ -2243,8 +2396,9 @@ export default defineVxeComponent({
       initProxy()
     })
 
-    watch(computeTaskScaleConfs, () => {
+    watch(computeTaskViewScales, () => {
       handleTaskScaleConfig()
+      $xeGantt.refreshTaskView()
     })
 
     hooks.forEach((options) => {

package/packages/gantt/src/util.ts

@@ -1,3 +1,4 @@
+import type { VxeGanttDefines } from '../../../types'
 import type { VxeTableDefines, VxeTablePropTypes } from 'vxe-table'
 
 export function getRefElem (refEl: any) {
@@ -20,3 +21,15 @@ export function getCalcHeight (height: number | 'unset' | undefined | null) {
 export function getCellRestHeight (rowRest: VxeTableDefines.RowCacheItem, cellOpts: VxeTablePropTypes.CellConfig, rowOpts: VxeTablePropTypes.RowConfig, defaultRowHeight: number) {
   return rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
 }
+
+export function getStandardGapTime (type: VxeGanttDefines.ColumnScaleType) {
+  switch (type) {
+    case 'hour':
+      return 1000 * 60 * 60
+    case 'minute':
+      return 1000 * 60
+    case 'second':
+      return 1000
+  }
+  return 1000 * 60 * 60 * 24
+}

package/packages/ui/index.ts

@@ -43,6 +43,9 @@ setConfig({
       // beforeSave: null,
       // afterSave: null
     },
+    taskBarTooltipConfig: {
+      enterable: true
+    },
     taskViewScaleConfig: {
       week: {
         startDay: 1