vxe-gantt 3.1.11 → 3.1.13

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

@@ -1,8 +1,8 @@
 import { VNode, CreateElement } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { VxeUI } from '@vxe-ui/core'
-import { setScrollTop, setScrollLeft, removeClass, addClass } from '../../ui/src/dom'
-import { getRefElem, getStandardGapTime, getTaskBarLeft, getTaskBarWidth } from './util'
+import { setScrollTop, setScrollLeft, removeClass, addClass, hasClass } from '../../ui/src/dom'
+import { getRefElem, getStandardGapTime, getTaskBarLeft, getTaskBarWidth, hasMilestoneTask } from './util'
 import XEUtils from 'xe-utils'
 import GanttViewHeaderComponent from './gantt-header'
 import GanttViewBodyComponent from './gantt-body'
@@ -462,6 +462,7 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
     if ($xeTable) {
       const startField = $xeGantt.computeStartField
       const endField = $xeGantt.computeEndField
+      const typeField = $xeGantt.computeTypeField
       const tableReactData = $xeTable as unknown as TableReactData
       const { isRowGroupStatus } = tableReactData
       const tableInternalData = $xeTable as unknown as TableInternalData
@@ -475,8 +476,15 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
       const renderFn = createChartRender($xeGanttView, 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] = {
@@ -538,11 +546,13 @@ function handleUpdateData ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewP
     const handleMinMaxData = (row: any) => {
       const startValue = XEUtils.get(row, startField)
       const endValue = XEUtils.get(row, endField)
-      if (startValue && endValue) {
+      if (startValue) {
         const startDate = parseStringDate($xeGanttView, startValue)
         if (!minDate || minDate.getTime() > startDate.getTime()) {
           minDate = startDate
         }
+      }
+      if (endValue) {
         const endDate = parseStringDate($xeGanttView, endValue)
         if (!maxDate || maxDate.getTime() < endDate.getTime()) {
           maxDate = endDate
@@ -624,7 +634,9 @@ function updateTaskChart ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPr
       }
       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 $xeGanttView.$nextTick()
@@ -734,13 +746,16 @@ function updateStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivat
   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

@@ -147,6 +147,7 @@ export default /* define-vxe-component start */ 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>,
@@ -295,6 +296,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig)
     },
+    computeTaskBarMilestoneOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
+
+      return Object.assign({}, getConfig().gantt.taskBarMilestoneConfig, props.taskBarMilestoneConfig)
+    },
     computeTaskBarTooltipOpts () {
       const $xeGantt = this
       const props = $xeGantt
@@ -359,6 +366,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const taskOpts = $xeGantt.computeTaskOpts as VxeGanttPropTypes.TaskConfig
       return taskOpts.endField || 'end'
     },
+    computeTypeField () {
+      const $xeGantt = this
+
+      const taskOpts = $xeGantt.computeTaskOpts as VxeGanttPropTypes.TaskConfig
+      return taskOpts.typeField || 'type'
+    },
     computeProgressField () {
       const $xeGantt = this
 

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

@@ -35,3 +35,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 {