vxe-gantt 4.0.0-beta.2 → 4.0.0-beta.4

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

@@ -5,7 +5,7 @@ import XEUtils from 'xe-utils'
 import { getCellRestHeight } from './util'
 import { getStringValue } from '../../ui/src/utils'
 
-import type { VxeTablePropTypes, TableInternalData } from 'vxe-table'
+import type { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from 'vxe-table'
 import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
 
 const { renderEmptyElement } = VxeUI
@@ -21,80 +21,109 @@ export default defineVxeComponent({
 
     const refElem = ref() as Ref<HTMLDivElement>
 
-    const renderVN = () => {
-      const $xeTable = $xeGanttView.internalData.xeTable
-
-      const tableInternalData = $xeTable ? $xeTable.internalData : {} as TableInternalData
-      const fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData || {}
-      let cellOpts: VxeTablePropTypes.CellConfig = {}
-      let rowOpts : VxeTablePropTypes.RowConfig = {}
-      let defaultRowHeight = 0
-      if ($xeTable) {
-        const { computeCellOpts, computeRowOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
-        cellOpts = computeCellOpts.value
-        rowOpts = computeRowOpts.value
-        defaultRowHeight = computeDefaultRowHeight.value
-      }
+    const renderTaskBar = ($xeTable: VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods, row: any, rowid: string, $rowIndex: number) => {
+      const tableProps = $xeTable.props
+      const { treeConfig } = tableProps
+      const tableInternalData = $xeTable.internalData
+      const { fullAllDataRowIdData } = tableInternalData
+      const { computeCellOpts, computeRowOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
+      const cellOpts = computeCellOpts.value
+      const rowOpts = computeRowOpts.value
+      const defaultRowHeight = computeDefaultRowHeight.value
 
-      const { tableData } = reactData
       const titleField = computeTitleField.value
       const progressField = computeProgressField.value
       const taskBarOpts = computeTaskBarOpts.value
       const { showProgress, showContent, contentMethod, barStyle } = taskBarOpts
       const { round } = barStyle || {}
 
+      const rowRest = fullAllDataRowIdData[rowid] || {}
+      const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight)
+      let title = getStringValue(XEUtils.get(row, titleField))
+      const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0
+
+      if (contentMethod) {
+        title = getStringValue(contentMethod({ row, title }))
+      }
+      return h('div', {
+        key: treeConfig ? rowid : $rowIndex,
+        rowid,
+        class: ['vxe-gantt-view--chart-row', {
+          'is--round': round
+        }],
+        style: {
+          height: `${cellHeight}px`
+        }
+      }, [
+        h('div', {
+          class: 'vxe-gantt-view--chart-bar',
+          rowid,
+          onClick (evnt) {
+            $xeGantt.handleTaskBarClickEvent(evnt, { row })
+          },
+          onDblclick (evnt) {
+            $xeGantt.handleTaskBarDblclickEvent(evnt, { row })
+          }
+        }, [
+          showProgress
+            ? h('div', {
+              class: 'vxe-gantt-view--chart-progress',
+              style: {
+                width: `${progressValue || 0}%`
+              }
+            })
+            : renderEmptyElement($xeGantt),
+          showContent
+            ? h('div', {
+              class: 'vxe-gantt-view--chart-content'
+            }, title)
+            : renderEmptyElement($xeGantt)
+        ])
+      ])
+    }
+
+    const renderRows = ($xeTable: VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods, tableData: any[]) => {
+      const tableProps = $xeTable.props
+      const { treeConfig } = tableProps
+      const tableReactData = $xeTable.reactData
+      const { treeExpandedFlag } = tableReactData
+      const tableInternalData = $xeTable.internalData
+      const { treeExpandedMaps } = tableInternalData
+      const { computeTreeOpts } = $xeTable.getComputeMaps()
+      const treeOpts = computeTreeOpts.value
+      const { transform } = treeOpts
+      const childrenField = treeOpts.children || treeOpts.childrenField
+
+      const { scrollYLoad } = reactData
+
       const trVNs: VNode[] = []
-      tableData.forEach((row, rIndex) => {
+      tableData.forEach((row, $rowIndex) => {
         const rowid = $xeTable ? $xeTable.getRowid(row) : ''
-        const rowRest = fullAllDataRowIdData[rowid] || {}
-        const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight)
-        let title = getStringValue(XEUtils.get(row, titleField))
-        const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0
-        if (contentMethod) {
-          title = getStringValue(contentMethod({ row, title }))
+        trVNs.push(renderTaskBar($xeTable, row, rowid, $rowIndex))
+        let isExpandTree = false
+        let rowChildren: any[] = []
+
+        if (treeConfig && !scrollYLoad && !transform) {
+          rowChildren = row[childrenField]
+          isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid]
+        }
+        // 如果是树形表格
+        if (isExpandTree) {
+          trVNs.push(...renderRows($xeTable, rowChildren))
         }
-        trVNs.push(
-          h('div', {
-            key: rIndex,
-            rowid,
-            class: ['vxe-gantt-view--chart-row', {
-              'is--round': round
-            }],
-            style: {
-              height: `${cellHeight}px`
-            }
-          }, [
-            h('div', {
-              class: 'vxe-gantt-view--chart-bar',
-              rowid,
-              onClick (evnt) {
-                $xeGantt.handleTaskBarClickEvent(evnt, { row })
-              },
-              onDblclick (evnt) {
-                $xeGantt.handleTaskBarDblclickEvent(evnt, { row })
-              }
-            }, [
-              showProgress
-                ? h('div', {
-                  class: 'vxe-gantt-view--chart-progress',
-                  style: {
-                    width: `${progressValue || 0}%`
-                  }
-                })
-                : renderEmptyElement($xeGantt),
-              showContent
-                ? h('div', {
-                  class: 'vxe-gantt-view--chart-content'
-                }, title)
-                : renderEmptyElement($xeGantt)
-            ])
-          ])
-        )
       })
+      return trVNs
+    }
+
+    const renderVN = () => {
+      const $xeTable = $xeGanttView.internalData.xeTable
+
+      const { tableData } = reactData
+
       return h('div', {
         ref: refElem,
         class: 'vxe-gantt-view--chart-wrapper'
-      }, trVNs)
+      }, $xeTable ? renderRows($xeTable, tableData) : [])
     }
 
     onMounted(() => {

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

@@ -1,6 +1,6 @@
 import { h, ref, reactive, nextTick, inject, watch, provide, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { setScrollTop, setScrollLeft } from '../../ui/src/dom'
+import { setScrollTop, setScrollLeft, removeClass, addClass } from '../../ui/src/dom'
 import { VxeUI } from '@vxe-ui/core'
 import { getRefElem } from './util'
 import XEUtils from 'xe-utils'
@@ -131,6 +131,8 @@ export default defineVxeComponent({
     } as unknown as VxeGanttViewConstructor & VxeGanttViewPrivateMethods
 
     const handleParseColumn = () => {
+      const ganttProps = $xeGantt.props
+      const { treeConfig } = ganttProps
       const { minViewDate, maxViewDate } = reactData
       const taskViewOpts = computeTaskViewOpts.value
       const fullCols: VxeGanttPropTypes.Column[] = []
@@ -182,10 +184,15 @@ export default defineVxeComponent({
             if ($xeTable) {
               const startField = computeStartField.value
               const endField = computeEndField.value
+              const { computeTreeOpts } = $xeTable.getComputeMaps()
               const tableInternalData = $xeTable.internalData
-              const { afterFullData } = tableInternalData
+              const { afterFullData, afterTreeFullData } = tableInternalData
+              const treeOpts = computeTreeOpts.value
+              const { transform } = treeOpts
+              const childrenField = treeOpts.children || treeOpts.childrenField
+
               const ctMaps: Record<string, VxeGanttDefines.RowCacheItem> = {}
-              afterFullData.forEach(row => {
+              const handleParseRender = (row: any) => {
                 const rowid = $xeTable.getRowid(row)
                 const startValue = XEUtils.get(row, startField)
                 const endValue = XEUtils.get(row, endField)
@@ -201,7 +208,13 @@ export default defineVxeComponent({
                     oWidthSize
                   }
                 }
-              })
+              }
+
+              if (treeConfig) {
+                XEUtils.eachTree(afterTreeFullData, handleParseRender, { children: transform ? treeOpts.mapChildrenField : childrenField })
+              } else {
+                afterFullData.forEach(handleParseRender)
+              }
               internalData.chartMaps = ctMaps
             }
           }
@@ -213,6 +226,8 @@ export default defineVxeComponent({
     }
 
     const handleUpdateData = () => {
+      const ganttProps = $xeGantt.props
+      const { treeConfig } = ganttProps
       const $xeTable = internalData.xeTable
       const sdMaps: Record<string, any> = {}
       const edMaps: Record<string, any> = {}
@@ -221,9 +236,14 @@ export default defineVxeComponent({
       if ($xeTable) {
         const startField = computeStartField.value
         const endField = computeEndField.value
+        const { computeTreeOpts } = $xeTable.getComputeMaps()
         const tableInternalData = $xeTable.internalData
-        const { afterFullData } = tableInternalData
-        afterFullData.forEach(row => {
+        const { afterFullData, afterTreeFullData } = tableInternalData
+        const treeOpts = computeTreeOpts.value
+        const { transform } = treeOpts
+        const childrenField = treeOpts.children || treeOpts.childrenField
+
+        const handleMinMaxData = (row: any) => {
           const startValue = XEUtils.get(row, startField)
           const endValue = XEUtils.get(row, endField)
           if (startValue && endValue) {
@@ -236,7 +256,13 @@ export default defineVxeComponent({
               maxDate = endDate
             }
           }
-        })
+        }
+
+        if (treeConfig) {
+          XEUtils.eachTree(afterTreeFullData, handleMinMaxData, { children: transform ? treeOpts.mapChildrenField : childrenField })
+        } else {
+          afterFullData.forEach(handleMinMaxData)
+        }
       }
       reactData.minViewDate = minDate
       reactData.maxViewDate = maxDate
@@ -400,6 +426,7 @@ export default defineVxeComponent({
     const handleLazyRecalculate = () => {
       calcScrollbar()
       updateStyle()
+      updateChart()
       return nextTick()
     }
 
@@ -584,6 +611,34 @@ export default defineVxeComponent({
     const ganttViewPrivateMethods: VxeGanttViewPrivateMethods = {
       handleUpdateStyle: updateStyle,
       handleLazyRecalculate,
+      handleUpdateCurrentRow (row) {
+        const $xeTable = internalData.xeTable
+        const el = refElem.value
+        if ($xeTable && el) {
+          if (row) {
+            const tableProps = $xeTable.props
+            const { highlightCurrentRow } = tableProps
+            const { computeRowOpts } = $xeTable.getComputeMaps()
+            const rowOpts = computeRowOpts.value
+            if (rowOpts.isCurrent || highlightCurrentRow) {
+              XEUtils.arrayEach(el.querySelectorAll(`.vxe-gantt-view--body-row[rowid="${$xeTable.getRowid(row)}"]`), elem => addClass(elem, 'row--current'))
+            }
+          } else {
+            XEUtils.arrayEach(el.querySelectorAll('.vxe-gantt-view--body-row.row--current'), elem => removeClass(elem, 'row--current'))
+          }
+        }
+      },
+      handleUpdateHoverRow (row) {
+        const $xeTable = internalData.xeTable
+        const el = refElem.value
+        if ($xeTable && el) {
+          if (row) {
+            XEUtils.arrayEach(el.querySelectorAll(`.vxe-gantt-view--body-row[rowid="${$xeTable.getRowid(row)}"]`), elem => addClass(elem, 'row--hover'))
+          } else {
+            XEUtils.arrayEach(el.querySelectorAll('.vxe-gantt-view--body-row.row--hover'), elem => removeClass(elem, 'row--hover'))
+          }
+        }
+      },
       triggerHeaderScrollEvent (evnt) {
         const { elemStore, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData
         if (inVirtualScroll) {

package/packages/gantt/src/gantt.ts

@@ -1397,6 +1397,22 @@ export default defineVxeComponent({
         $xeGantt.dispatchEvent('zoom', { type: reactData.isZMax ? 'max' : 'revert' }, evnt)
       },
       handleTaskCellClickEvent (evnt, params) {
+        const $xeTable = refTable.value
+        if ($xeTable) {
+          const tableProps = $xeTable.props
+          const { highlightCurrentRow } = tableProps
+          const { computeRowOpts } = $xeTable.getComputeMaps()
+          const rowOpts = computeRowOpts.value
+          const { row } = params
+          // 如果是当前行
+          if (rowOpts.isCurrent || highlightCurrentRow) {
+            $xeTable.triggerCurrentRowEvent(evnt, Object.assign({
+              $table: $xeTable,
+              rowIndex: $xeTable.getRowIndex(row),
+              $rowIndex: $xeTable.getVMRowIndex(row)
+            }, params))
+          }
+        }
         $xeGantt.dispatchEvent('task-cell-click', params, evnt)
       },
       handleTaskCellDblclickEvent (evnt, params) {
@@ -1501,7 +1517,8 @@ export default defineVxeComponent({
     const renderToolbar = () => {
       const { toolbarConfig } = props
       const toolbarOpts = computeToolbarOpts.value
-      if ((toolbarConfig && isEnableConf(toolbarOpts)) || slots.toolbar) {
+      const toolbarSlot = slots.toolbar
+      if ((toolbarConfig && isEnableConf(toolbarOpts)) || toolbarSlot) {
         let slotVNs: VNode[] = []
         if (slots.toolbar) {
           slotVNs = slots.toolbar({ $grid: null, $gantt: $xeGantt })
@@ -1709,20 +1726,21 @@ export default defineVxeComponent({
       if (!enabled) {
         return renderEmptyElement($xeGantt)
       }
+      const isResize = resize && showLeftView && showRightView
       const ons: {
         onMousedown?: typeof dragSplitEvent
       } = {}
-      if (resize) {
+      if (isResize) {
         ons.onMousedown = dragSplitEvent
       }
       return h('div', {
         class: ['vxe-gantt--view-split-bar', {
-          'is--resize': resize,
-          ...ons
+          'is--resize': isResize
         }]
       }, [
         h('div', {
-          class: 'vxe-gantt--view-split-bar-handle'
+          class: 'vxe-gantt--view-split-bar-handle',
+          ...ons
         }),
         showCollapseTableButton || showCollapseTaskButton
           ? h('div', {

package/packages/ui/index.ts

@@ -1,6 +1,7 @@
 import { VxeUI } from '@vxe-ui/core'
+import { errLog } from './src/log'
 
-const { setConfig, setIcon } = VxeUI
+const { setConfig, setIcon, checkVersion } = VxeUI
 
 VxeUI.ganttVersion = process.env.VUE_APP_VXE_VERSION as string
 
@@ -61,4 +62,11 @@ setIcon({
   GANTT_VIEW_RIGHT_CLOSE: iconPrefix + 'arrow-left'
 })
 
+if (!checkVersion(VxeUI.tableVersion, 4, 16)) {
+  errLog('vxe.error.errorVersion', [`vxe-table@${VxeUI.tableVersion || '?'}`, 'vxe-table v4.16+'])
+}
+
+export {
+  VxeUI
+}
 export default VxeUI

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

@@ -41,6 +41,7 @@
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.1);
+      pointer-events: none;
     }
   }
 }

package/styles/components/gantt.scss

@@ -130,13 +130,6 @@
   border: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
 }
 .vxe-gantt {
-  &.border--default,
-  &.border--full,
-  &.border--outer {
-    .vxe-gantt-view--header-wrapper {
-      background-color: var(--vxe-ui-table-header-background-color);
-    }
-  }
   &.border--full {
     .vxe-gantt-view--header-column,
     .vxe-gantt-view--body-column,
@@ -203,7 +196,6 @@
       }
     }
   }
-  
   &.border--default,
   &.border--full {
     .vxe-gantt-view--scroll-y-top-corner {
@@ -256,6 +248,27 @@
       }
     }
   }
+  &.border--default,
+  &.border--inner {
+    .vxe-gantt-view--header-column,
+    .vxe-gantt-view--body-column,
+    .vxe-gantt-view--footer-column {
+      background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
+      background-repeat: no-repeat;
+      background-size: 100% var(--vxe-ui-table-border-width);
+      background-position: right bottom;
+    }
+  }
+  &.border--inner {
+    .vxe-gantt--border-line {
+      border-width: 0 0 1px 0;
+    }
+  }
+  &.border--none {
+    .vxe-gantt--border-line {
+      display: none;
+    }
+  }
 }
 
 /*分割条*/
@@ -528,6 +541,9 @@
     width: var(--vxe-ui-gantt-view-default-cell-width);
   }
 }
+.vxe-gantt-view--header-wrapper {
+  background-color: var(--vxe-ui-table-header-background-color);
+}
 .vxe-gantt-view--header-wrapper,
 .vxe-gantt-view--body-wrapper {
   overflow: hidden;
@@ -562,6 +578,25 @@
   white-space: nowrap;
 }
 
+// 行高亮
+.vxe-gantt-view--body-row {
+  &.row--stripe {
+    background-color: var(--vxe-ui-table-row-striped-background-color);
+  }
+  &.row--current {
+    background-color: var(--vxe-ui-table-row-current-background-color);
+  }
+  &.row--hover {
+    background-color: var(--vxe-ui-table-row-hover-background-color);
+    &.row--stripe {
+      background-color: var(--vxe-ui-table-row-hover-striped-background-color);
+    }
+    &.row--current {
+      background-color: var(--vxe-ui-table-row-hover-current-background-color);
+    }
+  }
+}
+
 .vxe-gantt-view {
   &.mode--day {
     .vxe-gantt-view--header-column {