vxe-gantt 4.1.11 → 4.1.13

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

@@ -1,8 +1,8 @@
 import { h, ref, reactive, nextTick, inject, watch, provide, computed, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { setScrollTop, setScrollLeft, removeClass, addClass } from '../../ui/src/dom'
+import { setScrollTop, setScrollLeft, removeClass, addClass, hasClass } from '../../ui/src/dom'
 import { VxeUI } from '@vxe-ui/core'
-import { getRefElem, getStandardGapTime, getTaskBarLeft, getTaskBarWidth } from './util'
+import { getRefElem, getStandardGapTime, getTaskBarLeft, getTaskBarWidth, hasMilestoneTask } from './util'
 import XEUtils from 'xe-utils'
 import GanttViewHeaderComponent from './gantt-header'
 import GanttViewBodyComponent from './gantt-body'
@@ -52,7 +52,7 @@ export default defineVxeComponent({
     const $xeGantt = inject('$xeGantt', {} as (VxeGanttConstructor & VxeGanttPrivateMethods))
 
     const { internalData: ganttInternalData } = $xeGantt
-    const { computeTaskOpts, computeTaskViewOpts, computeStartField, computeEndField, computeScrollbarOpts, computeScrollbarXToTop, computeScrollbarYToLeft, computeScaleUnit, computeWeekScale, computeMinScale } = $xeGantt.getComputeMaps()
+    const { computeTaskOpts, computeTaskViewOpts, computeStartField, computeEndField, computeTypeField, computeScrollbarOpts, computeScrollbarXToTop, computeScrollbarYToLeft, computeScaleUnit, computeWeekScale, computeMinScale } = $xeGantt.getComputeMaps()
 
     const refElem = ref<HTMLDivElement>()
 
@@ -612,6 +612,7 @@ export default defineVxeComponent({
         if ($xeTable) {
           const startField = computeStartField.value
           const endField = computeEndField.value
+          const typeField = computeTypeField.value
           const { computeAggregateOpts, computeTreeOpts } = $xeTable.getComputeMaps()
           const tableReactData = $xeTable.reactData
           const { isRowGroupStatus } = tableReactData
@@ -626,8 +627,15 @@ export default defineVxeComponent({
           const renderFn = createChartRender(fullCols)
           const handleParseRender = (row: any) => {
             const rowid = $xeTable.getRowid(row)
-            const startValue = XEUtils.get(row, startField)
-            const endValue = XEUtils.get(row, endField)
+            let startValue = XEUtils.get(row, startField)
+            let endValue = XEUtils.get(row, endField)
+            const isMilestone = hasMilestoneTask(XEUtils.get(row, typeField))
+            if (isMilestone) {
+              if (!startValue) {
+                startValue = endValue
+              }
+              endValue = startValue
+            }
             if (startValue && endValue) {
               const { offsetLeftSize, offsetWidthSize } = renderFn(startValue, endValue)
               ctMaps[rowid] = {
@@ -686,11 +694,13 @@ export default defineVxeComponent({
         const handleMinMaxData = (row: any) => {
           const startValue = XEUtils.get(row, startField)
           const endValue = XEUtils.get(row, endField)
-          if (startValue && endValue) {
+          if (startValue) {
             const startDate = parseStringDate(startValue)
             if (!minDate || minDate.getTime() > startDate.getTime()) {
               minDate = startDate
             }
+          }
+          if (endValue) {
             const endDate = parseStringDate(endValue)
             if (!maxDate || maxDate.getTime() < endDate.getTime()) {
               maxDate = endDate
@@ -763,7 +773,9 @@ export default defineVxeComponent({
           }
           const chartRest = rowid ? chartMaps[rowid] : null
           barEl.style.left = `${getTaskBarLeft(chartRest, viewCellWidth)}px`
-          barEl.style.width = `${getTaskBarWidth(chartRest, viewCellWidth)}px`
+          if (!hasClass(barEl, 'is--milestone')) {
+            barEl.style.width = `${getTaskBarWidth(chartRest, viewCellWidth)}px`
+          }
         })
       }
       return nextTick()
@@ -869,13 +881,16 @@ export default defineVxeComponent({
       if (colInfoElem) {
         viewCellWidth = colInfoElem.clientWidth || 40
       }
-      let viewTableWidth = viewCellWidth * visibleColumn.length
-      if (bodyScrollElem) {
-        const viewWidth = bodyScrollElem.clientWidth
-        const remainWidth = viewWidth - viewTableWidth
-        if (remainWidth > 0) {
-          viewCellWidth += remainWidth / visibleColumn.length
-          viewTableWidth = viewWidth
+      let viewTableWidth = viewCellWidth
+      if (visibleColumn.length) {
+        viewTableWidth = Math.max(0, viewCellWidth * visibleColumn.length)
+        if (bodyScrollElem) {
+          const viewWidth = bodyScrollElem.clientWidth
+          const remainWidth = viewWidth - viewTableWidth
+          if (remainWidth > 0) {
+            viewCellWidth += Math.max(0, remainWidth / visibleColumn.length)
+            viewTableWidth = viewWidth
+          }
         }
       }
       reactData.viewCellWidth = viewCellWidth

package/packages/gantt/src/gantt.ts

@@ -92,6 +92,7 @@ export default defineVxeComponent({
     taskViewConfig: Object as PropType<VxeGanttPropTypes.TaskViewConfig>,
     taskLinkConfig: Object as PropType<VxeGanttPropTypes.TaskLinkConfig>,
     taskBarConfig: Object as PropType<VxeGanttPropTypes.TaskBarConfig>,
+    taskBarMilestoneConfig: Object as PropType<VxeGanttPropTypes.TaskBarMilestoneConfig>,
     taskBarTooltipConfig: Object as PropType<VxeGanttPropTypes.TaskBarTooltipConfig>,
     taskSplitConfig: Object as PropType<VxeGanttPropTypes.TaskSplitConfig>,
     taskBarResizeConfig: Object as PropType<VxeGanttPropTypes.TaskBarResizeConfig>,
@@ -254,6 +255,10 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig)
     })
 
+    const computeTaskBarMilestoneOpts = computed(() => {
+      return Object.assign({}, getConfig().gantt.taskBarMilestoneConfig, props.taskBarMilestoneConfig)
+    })
+
     const computeTaskBarTooltipOpts = computed(() => {
       return Object.assign({}, getConfig().gantt.taskBarTooltipConfig, props.taskBarTooltipConfig)
     })
@@ -298,6 +303,11 @@ export default defineVxeComponent({
       return taskOpts.endField || 'end'
     })
 
+    const computeTypeField = computed(() => {
+      const taskOpts = computeTaskOpts.value
+      return taskOpts.typeField || 'type'
+    })
+
     const computeProgressField = computed(() => {
       const taskOpts = computeTaskOpts.value
       return taskOpts.progressField || 'progress'
@@ -509,6 +519,7 @@ export default defineVxeComponent({
       computeTaskBarMoveOpts,
       computeTaskBarResizeOpts,
       computeTaskSplitOpts,
+      computeTaskBarMilestoneOpts,
       computeTaskBarTooltipOpts,
       computeTaskLinkOpts,
       computeTaskViewScales,
@@ -518,6 +529,7 @@ export default defineVxeComponent({
       computeTitleField,
       computeStartField,
       computeEndField,
+      computeTypeField,
       computeProgressField,
       computeScrollbarOpts,
       computeScrollbarXToTop,

package/packages/gantt/src/static.ts

@@ -19,3 +19,13 @@ export enum VxeGanttDependencyType {
    */
   FinishToFinish = 3
 }
+
+/**
+ * 任务类型
+ */
+export enum VxeGanttTaskType {
+  /**
+   * 里程碑
+   */
+  Milestone = 'milestone'
+}

package/packages/gantt/src/util.ts

@@ -45,3 +45,14 @@ export function getTaskBarWidth (chartRest: VxeGanttDefines.RowCacheItem | null,
 export function getTaskLinkKey (from: string | number, to: string | number) {
   return `${from}_${to}`
 }
+
+export function hasMilestoneTask (type: string) {
+  return type === 'milestone'
+}
+
+const taskTypeMaps: Record<string, number> = {
+  milestone: 1
+}
+export function gettaskType (type: string) {
+  return taskTypeMaps[type] ? type : 'default'
+}

package/packages/ui/index.ts

@@ -105,7 +105,8 @@ setIcon({
   GANTT_VIEW_LEFT_OPEN: iconPrefix + 'arrow-left',
   GANTT_VIEW_LEFT_CLOSE: iconPrefix + 'arrow-right',
   GANTT_VIEW_RIGHT_OPEN: iconPrefix + 'arrow-right',
-  GANTT_VIEW_RIGHT_CLOSE: iconPrefix + 'arrow-left'
+  GANTT_VIEW_RIGHT_CLOSE: iconPrefix + 'arrow-left',
+  GANTT_VIEW_TASK_MILESTONE: iconPrefix + 'square-fill rotate45'
 })
 
 export {

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

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:list";
+
 .vxe-gantt-view--chart-task-wrapper {
   position: absolute;
   top: 0;
@@ -20,12 +23,6 @@
       }
     }
   }
-  &.is--move {
-    & > .vxe-gantt-view--chart-bar,
-    & > .vxe-gantt-view--chart-custom-bar {
-      user-select: none;
-    }
-  }
 }
 .vxe-gantt-view--chart-bar,
 .vxe-gantt-view--chart-custom-bar {
@@ -35,10 +32,12 @@
   top: 50%;
   left: 0;
   transform: translateY(-50%);
-  color: #ffffff;
-  background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
   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 {
   width: 100%;
@@ -46,18 +45,23 @@
 .vxe-gantt-view--chart-bar {
   align-items: center;
   height: var(--vxe-ui-gantt-view-chart-bar-height);
-  &:hover {
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.1);
-      pointer-events: none;
+  &.is--default {
+    &:hover {
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.1);
+        pointer-events: none;
+      }
     }
   }
+  &.is--milestone {
+    white-space: nowrap;
+  }
 }
 .vxe-gantt-view--chart-progress {
   flex-shrink: 0;
@@ -79,6 +83,55 @@
   padding: 0 0.6em;
 }
 
+$iconThemeList: (
+  (
+    name: "primary",
+    color: var(--vxe-ui-font-primary-color),
+  ),
+  (
+    name: "success",
+    color: var(--vxe-ui-status-success-color),
+  ),
+  (
+    name: "info",
+    color: var(--vxe-ui-status-info-color),
+  ),
+  (
+    name: "warning",
+    color: var(--vxe-ui-status-warning-color),
+  ),
+  (
+    name: "danger",
+    color: var(--vxe-ui-status-danger-color),
+  ),
+  (
+    name: "error",
+    color: var(--vxe-ui-status-error-color),
+  )
+);
+.vxe-gantt-view--chart-milestone-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.vxe-gantt-view--chart-milestone-icon {
+  flex-shrink: 0;
+  padding: 0 0.3em;
+  color: var(--vxe-ui-font-primary-color);
+  @for $index from 0 to list.length($iconThemeList) {
+    $item: list.nth($iconThemeList, $index + 1);
+    &.theme--#{map.get($item, name)} {
+      color: map.get($item, color);
+    }
+  }
+  i {
+    display: inline-block;
+  }
+}
+.vxe-gantt-view--chart-milestone-content {
+  flex-grow: 1;
+}
+
 /*行拖拽*/
 .vxe-gantt-view--chart-row {
   &.row--drag-move {