vxe-gantt 3.2.6 → 3.3.0

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

@@ -49,14 +49,15 @@ export default defineVxeComponent({
       const cellOpts = $xeTable.computeCellOpts
       const rowOpts = $xeTable.computeRowOpts
       const defaultRowHeight = $xeTable.computeDefaultRowHeight
+      const treeOpts = $xeTable.computeTreeOpts
+      const childrenField = treeOpts.children || treeOpts.childrenField
 
       const ganttProps = $xeGantt
       const ganttReactData = $xeGantt.reactData
-      const ganttInternalData = $xeGantt.internalData
       const ganttSlots = $xeGantt.$scopedSlots
       const taskBarSlot = ganttSlots.taskBar || ganttSlots['task-bar']
 
-      const { taskBarMilestoneConfig, taskBarSubviewConfig } = ganttProps
+      const { treeConfig, taskBarMilestoneConfig, taskBarSubviewConfig } = ganttProps
       const { activeLink, activeBarRowid } = ganttReactData
       const titleField = $xeGantt.computeTitleField
       const progressField = $xeGantt.computeProgressField
@@ -77,8 +78,6 @@ export default defineVxeComponent({
       let title = getStringValue(XEUtils.get(row, titleField))
       const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0
       const renderTaskType = getTaskType(XEUtils.get(row, typeField))
-      const isMilestone = !!(hasEnableConf(taskBarMilestoneConfig, taskBarMilestoneOpts) && hasMilestoneTask(renderTaskType))
-      const isSubview = !!(hasEnableConf(taskBarSubviewConfig, taskBarSubviewOpts) && hasSubviewTask(renderTaskType))
 
       const vbStyle: VxeComponentStyleType = {}
       const vpStyle: VxeComponentStyleType = {
@@ -94,10 +93,6 @@ export default defineVxeComponent({
         }
       }
 
-      if (contentMethod) {
-        title = getStringValue(contentMethod({ row, title, scaleType: scaleUnit }))
-      }
-
       const ctParams = {
         $gantt: $xeGantt,
         source: sourceType,
@@ -108,89 +103,97 @@ export default defineVxeComponent({
         rowIndex,
         _rowIndex
       }
-      const ctOns: {
-        mouseover?: any
-        mouseleave?: any
-      } = {}
-      if (showTooltip) {
-        ctOns.mouseover = (evnt: MouseEvent) => {
-          const { dragBarRow } = ganttInternalData
-          const ttParams = Object.assign({ $event: evnt }, ctParams)
-          if (!dragBarRow) {
-            $xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams)
-          }
-          $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt)
-        }
-        ctOns.mouseleave = (evnt: MouseEvent) => {
-          const { dragBarRow } = ganttInternalData
-          const ttParams = Object.assign({ $event: evnt }, ctParams)
-          if (!dragBarRow) {
-            $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams)
-          }
-          $xeGantt.dispatchEvent('task-bar-mouseleave', ttParams, evnt)
-        }
-      }
 
       let cbVNs: VNode[] = []
       if ($xeGantt.renderGanttTaskBarContent) {
         cbVNs = $xeGantt.renderGanttTaskBarContent(h, ctParams, {
-          isMilestone,
-          title,
-          vbStyle,
-          vpStyle,
-          rowid,
-          ctOns
+          $gantt: $xeGantt,
+          $table: $xeTable,
+          rowid
         })
-      } else if (taskBarSlot) {
-        cbVNs.push(
-          h('div', {
-            key: 'cbc',
-            class: 'vxe-gantt-view--chart-custom-bar-content-wrapper',
-            on: ctOns
-          }, $xeGantt.callSlot(taskBarSlot, barParams, h))
-        )
       } else {
-        if (isSubview && rowChildren && rowChildren.length) {
-          if (isExpandTree) {
-            if (taskBarSubviewOpts.showOverview) {
-              cbVNs.push(
-                h('div', {
-                  key: 'vcso',
-                  class: ['vxe-gantt-view--chart-subview-wrapper is--overview', {
-                    'is--round': round,
-                    'is--move': moveable
-                  }]
-                }, [
+        const isMilestone = !!(hasEnableConf(taskBarMilestoneConfig, taskBarMilestoneOpts) && hasMilestoneTask(renderTaskType))
+        const isSubview = !!(hasEnableConf(taskBarSubviewConfig, taskBarSubviewOpts) && hasSubviewTask(renderTaskType))
+
+        if (contentMethod) {
+          title = getStringValue(contentMethod({ row, title, scaleType: scaleUnit }))
+        }
+
+        const ctOns: {
+          mouseover?: any
+          mouseleave?: any
+        } = {}
+        if (showTooltip) {
+          ctOns.mouseover = (evnt: MouseEvent) => {
+            const ttParams = Object.assign({ $event: evnt }, ctParams)
+            $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt)
+          }
+          ctOns.mouseleave = (evnt: MouseEvent) => {
+            const ttParams = Object.assign({ $event: evnt }, ctParams)
+            $xeGantt.dispatchEvent('task-bar-mouseleave', ttParams, evnt)
+          }
+        }
+
+        if (taskBarSlot) {
+          cbVNs.push(
+            h('div', {
+              key: 'cbc',
+              class: 'vxe-gantt-view--chart-custom-bar-content-wrapper',
+              on: ctOns
+            }, $xeGantt.callSlot(taskBarSlot, barParams, h))
+          )
+        } else {
+          if (isSubview && treeConfig && rowChildren && rowChildren.length) {
+            if (isExpandTree) {
+              if (taskBarSubviewOpts.showOverview) {
+                cbVNs.push(
                   h('div', {
-                    key: rowid,
-                    attrs: {
-                      rowid: rowid
-                    },
-                    class: 'vxe-gantt-view--chart-subview-bar'
+                    key: 'vcso',
+                    class: 'vxe-gantt-view--chart-subview-wrapper is--overview'
                   }, [
                     h('div', {
-                      class: 'vxe-gantt-view--chart-subview-bar-content-wrapper'
+                      key: rowid,
+                      attrs: {
+                        rowid: rowid
+                      },
+                      class: ['vxe-gantt-view--chart-subview-row', {
+                        'is--progress': showProgress,
+                        'is--round': round,
+                        'is--move': moveable
+                      }]
                     }, [
-                      showContent
-                        ? h('div', {
-                          class: 'vxe-gantt-view--chart-content'
-                        }, title)
-                        : renderEmptyElement($xeGantt)
+                      h('div', {
+                        attrs: {
+                          rowid: rowid
+                        },
+                        class: 'vxe-gantt-view--chart-subview-bar'
+                      }, [
+                        h('div', {
+                          class: 'vxe-gantt-view--chart-subview-bar-content-wrapper'
+                        }, [
+                          showContent
+                            ? h('div', {
+                              class: 'vxe-gantt-view--chart-content'
+                            }, title)
+                            : renderEmptyElement($xeGantt)
+                        ])
+                      ])
                     ])
                   ])
-                ])
-              )
-            }
-          } else {
-            cbVNs.push(
-              h('div', {
-                key: 'vcsc',
-                class: 'vxe-gantt-view--chart-subview-wrapper is--inline'
-              }, rowChildren.map(childRow => {
+                )
+              }
+            } else {
+              const cbcVNs: VNode[] = []
+              XEUtils.eachTree(rowChildren, childRow => {
                 const childRowid = $xeTable.getRowid(childRow)
                 let childTitle = getStringValue(XEUtils.get(childRow, titleField))
                 const childProgressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(childRow, progressField)))) : 0
                 const childRenderTaskType = getTaskType(XEUtils.get(childRow, typeField))
+                const isChildSubview = !!(hasEnableConf(taskBarSubviewConfig, taskBarSubviewOpts) && hasSubviewTask(childRenderTaskType))
+
+                if (isChildSubview) {
+                  return
+                }
 
                 const vpcStyle: VxeComponentStyleType = {
                   width: `${childProgressValue || 0}%`
@@ -206,76 +209,97 @@ export default defineVxeComponent({
                   childTitle = getStringValue(contentMethod({ row: childRow, title: childTitle, scaleType: scaleUnit }))
                 }
 
-                return h('div', {
-                  key: childRowid,
-                  attrs: {
-                    rowid: childRowid
-                  },
-                  class: ['vxe-gantt-view--chart-subview-bar', `is--${childRenderTaskType}`]
-                }, [
+                cbcVNs.push(
                   h('div', {
-                    class: 'vxe-gantt-view--chart-subview-bar-content-wrapper'
+                    key: childRowid,
+                    attrs: {
+                      rowid: childRowid
+                    },
+                    class: ['vxe-gantt-view--chart-subview-row', `is--${childRenderTaskType}`, {
+                      'is--progress': showProgress,
+                      'is--round': round,
+                      'is--move': moveable,
+                      'row--pending': !!pendingRowFlag && !!pendingRowMaps[childRowid]
+                    }]
                   }, [
-                    showProgress
-                      ? h('div', {
-                        class: 'vxe-gantt-view--chart-progress',
-                        style: vpcStyle
-                      })
-                      : renderEmptyElement($xeGantt),
-                    showContent
-                      ? h('div', {
-                        class: 'vxe-gantt-view--chart-content'
-                      }, childTitle)
-                      : renderEmptyElement($xeGantt)
+                    h('div', {
+                      attrs: {
+                        rowid: childRowid
+                      },
+                      class: 'vxe-gantt-view--chart-subview-bar'
+                    }, [
+                      h('div', {
+                        class: 'vxe-gantt-view--chart-subview-bar-content-wrapper'
+                      }, [
+                        showProgress
+                          ? h('div', {
+                            class: 'vxe-gantt-view--chart-progress',
+                            style: vpcStyle
+                          })
+                          : renderEmptyElement($xeGantt),
+                        showContent
+                          ? h('div', {
+                            class: 'vxe-gantt-view--chart-content'
+                          }, childTitle)
+                          : renderEmptyElement($xeGantt)
+                      ])
+                    ])
                   ])
-                ])
-              }))
+                )
+              }, { children: childrenField })
+
+              cbVNs.push(
+                h('div', {
+                  key: 'vcsc',
+                  class: 'vxe-gantt-view--chart-subview-wrappe is--inliner'
+                }, cbcVNs)
+              )
+            }
+          } else if (isMilestone) {
+            const { icon, iconStatus, iconStyle } = taskBarMilestoneOpts
+            const tbmParams = { $gantt: $xeGantt, row }
+            cbVNs.push(
+              h('div', {
+                key: 'vcm',
+                class: 'vxe-gantt-view--chart-milestone-wrapper',
+                on: ctOns
+              }, [
+                h('div', {
+                  class: ['vxe-gantt-view--chart-milestone-icon', iconStatus ? `theme--${XEUtils.isFunction(iconStatus) ? iconStatus(tbmParams) : iconStatus}` : ''],
+                  style: iconStyle ? Object.assign({}, XEUtils.isFunction(iconStyle) ? iconStyle(tbmParams) : iconStyle) : undefined
+                }, [
+                  h('i', {
+                    class: (icon ? (XEUtils.isFunction(icon) ? icon(tbmParams) : icon) : '') || getIcon().GANTT_VIEW_TASK_MILESTONE
+                  })
+                ]),
+                showContent
+                  ? h('div', {
+                    class: 'vxe-gantt-view--chart-milestone-content'
+                  }, title)
+                  : renderEmptyElement($xeGantt)
+              ])
             )
-          }
-        } else if (isMilestone) {
-          const { icon, iconStatus, iconStyle } = taskBarMilestoneOpts
-          const tbmParams = { $gantt: $xeGantt, row }
-          cbVNs.push(
-            h('div', {
-              key: 'vcm',
-              class: 'vxe-gantt-view--chart-milestone-wrapper',
-              on: ctOns
-            }, [
+          } else {
+            cbVNs.push(
               h('div', {
-                class: ['vxe-gantt-view--chart-milestone-icon', iconStatus ? `theme--${XEUtils.isFunction(iconStatus) ? iconStatus(tbmParams) : iconStatus}` : ''],
-                style: iconStyle ? Object.assign({}, XEUtils.isFunction(iconStyle) ? iconStyle(tbmParams) : iconStyle) : undefined
+                key: 'vbc',
+                class: 'vxe-gantt-view--chart-bar-content-wrapper',
+                on: ctOns
               }, [
-                h('i', {
-                  class: (icon ? (XEUtils.isFunction(icon) ? icon(tbmParams) : icon) : '') || getIcon().GANTT_VIEW_TASK_MILESTONE
-                })
-              ]),
-              showContent
-                ? h('div', {
-                  class: 'vxe-gantt-view--chart-milestone-content'
-                }, title)
-                : renderEmptyElement($xeGantt)
-            ])
-          )
-        } else {
-          cbVNs.push(
-            h('div', {
-              key: 'vbc',
-              class: 'vxe-gantt-view--chart-bar-content-wrapper',
-              on: ctOns
-            }, [
-              showProgress
-                ? h('div', {
-                  class: 'vxe-gantt-view--chart-progress',
-                  style: vpStyle
-                })
-                : renderEmptyElement($xeGantt),
-              showContent
-                ? h('div', {
-                  class: 'vxe-gantt-view--chart-content'
-                }, title)
-                : renderEmptyElement($xeGantt)
-            ])
-          )
+                showProgress
+                  ? h('div', {
+                    class: 'vxe-gantt-view--chart-progress',
+                    style: vpStyle
+                  })
+                  : renderEmptyElement($xeGantt),
+                showContent
+                  ? h('div', {
+                    class: 'vxe-gantt-view--chart-content'
+                  }, title)
+                  : renderEmptyElement($xeGantt)
+              ])
+            )
+          }
         }
       }
 
@@ -285,6 +309,7 @@ export default defineVxeComponent({
           rowid
         },
         class: ['vxe-gantt-view--chart-row', `is--${renderTaskType}`, {
+          'is--progress': showProgress,
           'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid],
           'is--round': round,
           'is--move': moveable

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

@@ -707,6 +707,35 @@ function calcScrollbar ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPriv
   }
 }
 
+function handleSubTaskMinMaxSize ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods, $xeTable: VxeTableConstructor, list: any[]) {
+  const $xeGantt = $xeGanttView.$xeGantt
+  const internalData = $xeGanttView.internalData
+
+  const { chartMaps } = internalData
+  const treeOpts = $xeTable.computeTreeOpts
+  const childrenField = treeOpts.children || treeOpts.childrenField
+
+  const typeField = $xeGantt.computeTypeField
+  let minChildLeftSize = 0
+  let maxChildLeftSize = 0
+  XEUtils.eachTree(list, childRow => {
+    const childRowid = $xeTable.getRowid(childRow)
+    const renderTaskType = XEUtils.get(childRow, typeField)
+    if (hasSubviewTask(renderTaskType)) {
+      return
+    }
+    const childChartRest = childRowid ? chartMaps[childRowid] : null
+    if (childChartRest) {
+      maxChildLeftSize = Math.max(maxChildLeftSize, childChartRest.oLeftSize + childChartRest.oWidthSize)
+      minChildLeftSize = minChildLeftSize ? Math.min(minChildLeftSize, childChartRest.oLeftSize) : childChartRest.oLeftSize
+    }
+  }, { children: childrenField })
+  return {
+    minSize: minChildLeftSize,
+    maxSize: maxChildLeftSize
+  }
+}
+
 function updateTaskChartStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
   const $xeGantt = $xeGanttView.$xeGantt
   const reactData = $xeGanttView.reactData
@@ -719,6 +748,8 @@ function updateTaskChartStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttV
   const { elemStore, chartMaps } = internalData
   const chartWrapper = getRefElem(elemStore['main-chart-task-wrapper'])
   if (chartWrapper && $xeTable) {
+    const treeOpts = $xeTable.computeTreeOpts
+    const childrenField = treeOpts.children || treeOpts.childrenField
     XEUtils.arrayEach(chartWrapper.children, (rowEl) => {
       const barEl = rowEl.children[0] as HTMLDivElement
       if (!barEl) {
@@ -729,20 +760,45 @@ function updateTaskChartStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttV
         return
       }
       const chartRest = rowid ? chartMaps[rowid] : null
+      const row = chartRest ? chartRest.row : null
       // 子任务视图
       if (hasClass(barEl, 'is--subview')) {
         const childWrapperEl = barEl.firstElementChild as HTMLDivElement
         if (childWrapperEl) {
-          XEUtils.arrayEach(childWrapperEl.children, (childEl) => {
-            const childBarEl = childEl as HTMLDivElement
-            const childRowid = childBarEl.getAttribute('rowid') || ''
-            const childChartRest = childRowid ? chartMaps[childRowid] : null
-            childBarEl.style.left = `${getTaskBarLeft(childChartRest, viewCellWidth)}px`
-            // 里程碑不需要宽度
-            if (!hasClass(childBarEl, 'is--milestone')) {
-              childBarEl.style.width = `${getTaskBarWidth(childChartRest, viewCellWidth)}px`
+          // 行内展示
+          if (hasClass(childWrapperEl, 'is--inline')) {
+            XEUtils.arrayEach(childWrapperEl.children, (childRowEl) => {
+              const childBarEl = childRowEl.children[0] as HTMLDivElement
+              const childRowid = childBarEl.getAttribute('rowid') || ''
+              const childChartRest = childRowid ? chartMaps[childRowid] : null
+              if (childChartRest) {
+                const childRow = childChartRest.row
+                // 如果是子视图
+                if (hasClass(childBarEl, 'is--subview')) {
+                  const subChildren: any[] = childRow[childrenField]
+                  const { minSize: minChildLeftSize, maxSize: maxChildLeftSize } = handleSubTaskMinMaxSize($xeGanttView, $xeTable, subChildren)
+                  childBarEl.style.left = `${viewCellWidth * minChildLeftSize}px`
+                  childBarEl.style.width = `${viewCellWidth * (maxChildLeftSize - minChildLeftSize)}px`
+                } else {
+                  childBarEl.style.left = `${getTaskBarLeft(childChartRest, viewCellWidth)}px`
+                  if (!hasClass(childBarEl, 'is--milestone')) {
+                    // 里程碑不需要宽度
+                    childBarEl.style.width = `${getTaskBarWidth(childChartRest, viewCellWidth)}px`
+                  }
+                }
+              }
+            })
+          } else {
+            // 如果展开子任务
+            const childRowEl = childWrapperEl.children[0] as HTMLDivElement
+            const childBarEl = childRowEl ? childRowEl.children[0] as HTMLDivElement : null
+            if (childBarEl) {
+              const rowChildren: any[] = row ? row[childrenField] : []
+              const { minSize: minChildLeftSize, maxSize: maxChildLeftSize } = handleSubTaskMinMaxSize($xeGanttView, $xeTable, rowChildren)
+              childBarEl.style.left = `${viewCellWidth * minChildLeftSize}px`
+              childBarEl.style.width = `${viewCellWidth * (maxChildLeftSize - minChildLeftSize)}px`
             }
-          })
+          }
         }
       } else {
         barEl.style.left = `${getTaskBarLeft(chartRest, viewCellWidth)}px`

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

@@ -8,13 +8,15 @@
   pointer-events: none;
 }
 
-.vxe-gantt-view--chart-row {
+.vxe-gantt-view--chart-row,
+.vxe-gantt-view--chart-subview-row {
   position: relative;
   width: 100%;
   height: 0;
+}
+.vxe-gantt-view--chart-row {
   &.row--pending {
-    .vxe-gantt-view--chart-bar,
-    .vxe-gantt-view--chart-subview-bar {
+    .vxe-gantt-view--chart-bar {
       color: var(--vxe-ui-font-disabled-color);
       opacity: 0.5;
       text-decoration: line-through;
@@ -36,7 +38,14 @@
     }
   }
 }
-.vxe-gantt-view--chart-subview-wrapper {
+.vxe-gantt-view--chart-subview-row {
+  &.row--pending {
+    .vxe-gantt-view--chart-subview-bar {
+      color: var(--vxe-ui-font-disabled-color);
+      opacity: 0.5;
+      text-decoration: line-through;
+    }
+  }
   &.is--round {
     & > .vxe-gantt-view--chart-subview-bar {
       border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
@@ -50,10 +59,14 @@
       }
     }
   }
+}
+.vxe-gantt-view--chart-subview-wrapper {
   &.is--overview {
-    & > .vxe-gantt-view--chart-subview-bar {
-      color: #ffffff;
-      background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
+    & > .vxe-gantt-view--chart-subview-row {
+      .vxe-gantt-view--chart-subview-bar {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
+      }
     }
   }
 }
@@ -68,11 +81,53 @@
   left: 0;
   transform: translateY(-50%);
   pointer-events: all;
-  &.is--default {
-    color: #ffffff;
-    background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
+}
+
+.vxe-gantt-view--chart-row {
+  &.is--progress {
+    & > .vxe-gantt-view--chart-bar {
+      &.is--default {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
+      }
+    }
+  }
+  &:not(.is--progress) {
+    & > .vxe-gantt-view--chart-bar {
+      &.is--default {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-completed-background-color);
+      }
+    }
   }
 }
+.vxe-gantt-view--chart-subview-row {
+  &.is--progress {
+    & > .vxe-gantt-view--chart-subview-bar {
+      &.is--subview {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
+      }
+      &.is--default {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
+      }
+    }
+  }
+  &:not(.is--progress) {
+    & > .vxe-gantt-view--chart-subview-bar {
+      &.is--subview {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
+      }
+      &.is--default {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-completed-background-color);
+      }
+    }
+  }
+}
+
 .vxe-gantt-view--chart-bar-content-wrapper,
 .vxe-gantt-view--chart-custom-bar-content-wrapper,
 .vxe-gantt-view--chart-subview-bar-content-wrapper {
@@ -179,7 +234,8 @@ $iconThemeList: (
 }
 
 /*行拖拽*/
-.vxe-gantt-view--chart-row {
+.vxe-gantt-view--chart-row,
+.vxe-gantt-view--chart-subview-row {
   &.row--drag-move {
     transition: transform 0.5s ease;
   }

package/styles/theme/base.scss

@@ -8,7 +8,7 @@
   --vxe-ui-gantt-view-task-bar-border-radius: calc(var(--vxe-ui-gantt-view-split-bar-height) / 2);
   --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-bar-overview-background-color: var(--vxe-ui-font-primary-darken-color);
+  --vxe-ui-gantt-view-task-bar-overview-background-color: var(--vxe-ui-font-disabled-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;