vxe-gantt 4.1.0 → 4.1.2

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

@@ -17,7 +17,7 @@ export default defineVxeComponent({
     const $xeGantt = inject('$xeGantt', {} as (VxeGanttConstructor & VxeGanttPrivateMethods))
     const $xeGanttView = inject('$xeGanttView', {} as VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
 
-    const { computeTaskViewOpts } = $xeGantt.getComputeMaps()
+    const { computeTaskViewOpts, computeScaleUnit } = $xeGantt.getComputeMaps()
     const { reactData, internalData } = $xeGanttView
 
     const refElem = ref() as Ref<HTMLDivElement>
@@ -42,6 +42,7 @@ export default defineVxeComponent({
       const { todayDateMaps } = internalData
       const taskViewOpts = computeTaskViewOpts.value
       const { showNowLine, viewStyle } = taskViewOpts
+      const scaleUnit = computeScaleUnit.value
       const { scaleItem } = headerGroups[headerGroups.length - 1] || {}
       const { field, dateObj } = column
       const { cellClassName, cellStyle } = viewStyle || {}
@@ -88,7 +89,18 @@ export default defineVxeComponent({
           })
         )
       }
-      const ctParams = { source: sourceType, type: viewType, dateObj, row, column, $rowIndex, rowIndex, _rowIndex }
+      const ctParams = {
+        $gantt: $xeGantt,
+        source: sourceType,
+        type: viewType,
+        scaleType: scaleUnit,
+        dateObj,
+        row,
+        column,
+        $rowIndex,
+        rowIndex,
+        _rowIndex
+      }
       return h('td', {
         key: $columnIndex,
         class: [
@@ -133,6 +145,7 @@ export default defineVxeComponent({
       const { transform } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
 
+      const scaleUnit = computeScaleUnit.value
       const taskViewOpts = computeTaskViewOpts.value
       const { viewStyle } = taskViewOpts
       const { rowClassName, rowStyle } = viewStyle || {}
@@ -170,7 +183,16 @@ export default defineVxeComponent({
           trOns.onDragend = $xeTable.handleRowDragDragendEvent
           trOns.onDragover = $xeTable.handleRowDragDragoverEvent
         }
-        const rowParams = { source: sourceType, type: viewType, row, rowIndex, $rowIndex, _rowIndex }
+        const rowParams = {
+          $gantt: $xeGantt,
+          source: sourceType,
+          type: viewType,
+          scaleType: scaleUnit,
+          row,
+          rowIndex,
+          $rowIndex,
+          _rowIndex
+        }
         trVNs.push(
           h('tr', {
             key: treeConfig ? rowid : $rowIndex,

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

@@ -21,7 +21,7 @@ export default defineVxeComponent({
     const $xeGanttView = inject('$xeGanttView', {} as VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
 
     const { reactData, internalData } = $xeGanttView
-    const { computeProgressField, computeTitleField, computeTaskBarOpts } = $xeGantt.getComputeMaps()
+    const { computeProgressField, computeTitleField, computeTaskBarOpts, computeScaleUnit } = $xeGantt.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
 
@@ -43,8 +43,9 @@ export default defineVxeComponent({
       const titleField = computeTitleField.value
       const progressField = computeProgressField.value
       const taskBarOpts = computeTaskBarOpts.value
-      const barParams = { $gantt: $xeGantt, row }
-      const { showProgress, showContent, contentMethod, barStyle, drag } = taskBarOpts
+      const scaleUnit = computeScaleUnit.value
+      const barParams = { $gantt: $xeGantt, row, scaleType: scaleUnit }
+      const { showProgress, showContent, contentMethod, barStyle, drag, showTooltip } = taskBarOpts
       const isBarRowStyle = XEUtils.isFunction(barStyle)
       const barStyObj = (barStyle ? (isBarRowStyle ? barStyle(barParams) : barStyle) : {}) || {}
       const { round } = barStyObj
@@ -72,10 +73,50 @@ export default defineVxeComponent({
       }
 
       if (contentMethod) {
-        title = getStringValue(contentMethod({ row, title }))
+        title = getStringValue(contentMethod({ row, title, scaleType: scaleUnit }))
       }
 
-      const ctParams = { source: sourceType, type: viewType, row, $rowIndex, rowIndex, _rowIndex }
+      const ctParams = {
+        $gantt: $xeGantt,
+        source: sourceType,
+        type: viewType,
+        scaleType: scaleUnit,
+        row,
+        $rowIndex,
+        rowIndex,
+        _rowIndex
+      }
+      const ons: {
+        onClick: any
+        onDblclick: any
+        onMousedown: any
+        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) => {
+          const ttParams = Object.assign({ $event: evnt }, ctParams)
+          $xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams)
+          $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt)
+        }
+        ons.onMouseleave = (evnt: MouseEvent) => {
+          const ttParams = Object.assign({ $event: evnt }, ctParams)
+          $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams)
+          $xeGantt.dispatchEvent('task-bar-mouseleave', ttParams, evnt)
+        }
+      }
       return h('div', {
         key: treeConfig ? rowid : $rowIndex,
         rowid,
@@ -95,17 +136,7 @@ export default defineVxeComponent({
           class: taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar',
           style: vbStyle,
           rowid,
-          onClick (evnt: MouseEvent) {
-            $xeGantt.handleTaskBarClickEvent(evnt, barParams)
-          },
-          onDblclick (evnt: MouseEvent) {
-            $xeGantt.handleTaskBarDblclickEvent(evnt, barParams)
-          },
-          onMousedown (evnt: MouseEvent) {
-            if ($xeGantt.handleTaskBarMousedownEvent) {
-              $xeGantt.handleTaskBarMousedownEvent(evnt, barParams)
-            }
-          }
+          ...ons
         }, taskBarSlot
           ? $xeGantt.callSlot(taskBarSlot, barParams)
           : [

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

@@ -65,15 +65,17 @@ export default defineVxeComponent({
               }, columns.map((column, cIndex) => {
                 const { field, childCount, dateObj } = column
                 let label = `${column.title}`
-                if ($rowIndex < headerGroups.length - 1) {
-                  if (scaleItem.type === 'day') {
-                    label = getI18n(`vxe.gantt.dayss.w${dateObj.e}`)
-                  } else {
-                    label = getI18n(`vxe.gantt.${!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat'}.${type}`, dateObj)
-                  }
+                if (scaleItem.type === 'day') {
+                  label = getI18n(`vxe.gantt.dayss.w${dateObj.e}`)
                 } else {
-                  if (isLast && scaleItem.type === 'week') {
+                  if ($rowIndex) {
                     label = getI18n(`vxe.gantt.tSimpleFormat.${type}`, dateObj)
+                  } else {
+                    if (isLast && scaleItem.type === 'week') {
+                      label = getI18n(`vxe.gantt.tSimpleFormat.${type}`, dateObj)
+                    } else {
+                      label = getI18n(`vxe.gantt.tFullFormat.${type}`, dateObj)
+                    }
                   }
                 }
                 let cellVNs: string | VxeComponentSlotType[] = label

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

@@ -337,7 +337,7 @@ export default defineVxeComponent({
           if (minScale.level < 17) {
             handleData('quarter', colMaps, minCol)
           }
-          if (minScale.level < 14) {
+          if (minScale.level < 15) {
             handleData('month', colMaps, minCol)
           }
           if (minScale.level < 13) {
@@ -346,7 +346,7 @@ export default defineVxeComponent({
           if (minScale.level < 11) {
             handleData('day', colMaps, minCol)
           }
-          if (minScale.level < 12) {
+          if (minScale.level < 9) {
             handleData('date', colMaps, minCol)
           }
           if (minScale.level < 7) {
@@ -355,6 +355,9 @@ export default defineVxeComponent({
           if (minScale.level < 5) {
             handleData('minute', colMaps, minCol)
           }
+          if (minScale.level < 3) {
+            handleData('second', colMaps, minCol)
+          }
 
           fullCols.push(minCol)
         }

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,6 +243,10 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig)
     })
 
+    const computeTaskBarTooltipOpts = computed(() => {
+      return Object.assign({}, getConfig().gantt.taskBarTooltipConfig, props.taskBarTooltipConfig)
+    })
+
     const computeScaleUnit = computed(() => {
       const minScale = computeMinScale.value
       return minScale ? minScale.type : 'date'
@@ -246,7 +262,7 @@ export default defineVxeComponent({
       return taskScaleList.find(item => item.type === 'week')
     })
 
-    const computeTaskScaleConfs = computed(() => {
+    const computeTaskViewScales = computed(() => {
       const taskViewOpts = computeTaskViewOpts.value
       const { scales } = taskViewOpts
       return scales
@@ -477,7 +493,8 @@ export default defineVxeComponent({
       computeTaskBarDragOpts,
       computeTaskBarResizeOpts,
       computeTaskSplitOpts,
-      computeTaskScaleConfs,
+      computeTaskBarTooltipOpts,
+      computeTaskViewScales,
       computeScaleUnit,
       computeMinScale,
       computeWeekScale,
@@ -490,6 +507,12 @@ export default defineVxeComponent({
       computeScrollbarYToLeft
     }
 
+    /**
+     * 已废弃，保留兼容
+     * @deprecated
+     */
+    ;(computeMaps as any).computeTaskScaleConfs = computeTaskViewScales
+
     const $xeGantt = {
       xID,
       props: props as VxeGanttProps,
@@ -501,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) {
@@ -980,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 () {
@@ -1582,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()
       }
     }
 
@@ -1700,6 +1754,55 @@ 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) {
+          const customContnet = contentMethod(params)
+          if (!XEUtils.eqNull(customContnet)) {
+            content = `${customContnet}`
+          }
+        }
+        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) {
@@ -2174,10 +2277,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'
@@ -2204,7 +2310,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)
+                }
+              }
+            : {})
+        ])
       ]
     }
 
@@ -2261,7 +2399,7 @@ export default defineVxeComponent({
       initProxy()
     })
 
-    watch(computeTaskScaleConfs, () => {
+    watch(computeTaskViewScales, () => {
       handleTaskScaleConfig()
       $xeGantt.refreshTaskView()
     })

package/packages/ui/index.ts

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