vxe-gantt 3.0.0-beta.0 → 3.0.0-beta.2

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 { TableInternalData, TableReactData, VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from 'vxe-table'
 import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
 
 const { renderEmptyElement } = VxeUI
@@ -34,89 +34,122 @@ export default defineVxeComponent({
     //
     // Render
     //
-    renderVN (h: CreateElement) {
+    renderTaskBar (h: CreateElement, $xeTable: VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods, row: any, rowid: string, $rowIndex: number) {
       const _vm = this
       const $xeGantt = _vm.$xeGantt
-      const $xeGanttView = _vm.$xeGanttView
-      const $xeTable = $xeGanttView.internalData.xeTable
 
-      const tableInternalData = ($xeTable ? $xeTable as unknown : {}) as TableInternalData
-      const fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData || {}
-      let cellOpts: VxeTablePropTypes.CellConfig = {}
-      let rowOpts : VxeTablePropTypes.RowConfig = {}
-      let defaultRowHeight = 0
-      if ($xeTable) {
-        cellOpts = $xeTable.computeCellOpts
-        rowOpts = $xeTable.computeRowOpts
-        defaultRowHeight = $xeTable.computeDefaultRowHeight
-      }
+      const tableProps = $xeTable
+      const { treeConfig } = tableProps
+      const tableInternalData = $xeTable as unknown as TableInternalData
+      const { fullAllDataRowIdData } = tableInternalData
+      const cellOpts = $xeTable.computeCellOpts
+      const rowOpts = $xeTable.computeRowOpts
+      const defaultRowHeight = $xeTable.computeDefaultRowHeight
 
-      const { reactData } = $xeGanttView
-      const { tableData } = reactData
       const titleField = $xeGantt.computeTitleField
       const progressField = $xeGantt.computeProgressField
       const taskBarOpts = $xeGantt.computeTaskBarOpts
       const { showProgress, showContent, contentMethod, barStyle } = taskBarOpts
       const { round } = barStyle || {}
 
-      const trVNs: VNode[] = []
-      tableData.forEach((row, rIndex) => {
-        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 }))
+      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,
+        attrs: {
+          rowid
+        },
+        class: ['vxe-gantt-view--chart-row', {
+          'is--round': round
+        }],
+        style: {
+          height: `${cellHeight}px`
         }
-        trVNs.push(
-          h('div', {
-            key: rIndex,
-            attrs: {
-              rowid
+      }, [
+        h('div', {
+          class: 'vxe-gantt-view--chart-bar',
+          attrs: {
+            rowid
+          },
+          on: {
+            click (evnt: MouseEvent) {
+              $xeGantt.handleTaskBarClickEvent(evnt, { row })
             },
-            class: ['vxe-gantt-view--chart-row', {
-              'is--round': round
-            }],
-            style: {
-              height: `${cellHeight}px`
+            dblclick (evnt: MouseEvent) {
+              $xeGantt.handleTaskBarDblclickEvent(evnt, { row })
             }
-          }, [
-            h('div', {
-              class: 'vxe-gantt-view--chart-bar',
-              attrs: {
-                rowid
-              },
-              on: {
-                click (evnt: MouseEvent) {
-                  $xeGantt.handleTaskBarClickEvent(evnt, { row })
-                },
-                dblclick (evnt: MouseEvent) {
-                  $xeGantt.handleTaskBarDblclickEvent(evnt, { row })
-                }
+          }
+        }, [
+          showProgress
+            ? h('div', {
+              class: 'vxe-gantt-view--chart-progress',
+              style: {
+                width: `${progressValue || 0}%`
               }
-            }, [
-              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)
-            ])
-          ])
-        )
+            })
+            : renderEmptyElement($xeGantt),
+          showContent
+            ? h('div', {
+              class: 'vxe-gantt-view--chart-content'
+            }, title)
+            : renderEmptyElement($xeGantt)
+        ])
+      ])
+    },
+    renderRows (h: CreateElement, $xeTable: VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods, tableData: any[]) {
+      const _vm = this
+      const $xeGanttView = _vm.$xeGanttView
+      const { reactData } = $xeGanttView
+
+      const tableProps = $xeTable
+      const { treeConfig } = tableProps
+      const tableReactData = $xeTable as unknown as TableReactData
+      const { treeExpandedFlag } = tableReactData
+      const tableInternalData = $xeTable as unknown as TableInternalData
+      const { treeExpandedMaps } = tableInternalData
+      const treeOpts = $xeTable.computeTreeOpts
+      const { transform } = treeOpts
+      const childrenField = treeOpts.children || treeOpts.childrenField
+
+      const { scrollYLoad } = reactData
+
+      const trVNs: VNode[] = []
+      tableData.forEach((row, $rowIndex) => {
+        const rowid = $xeTable ? $xeTable.getRowid(row) : ''
+        trVNs.push(_vm.renderTaskBar(h, $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(..._vm.renderRows(h, $xeTable, rowChildren))
+        }
       })
+      return trVNs
+    },
+    renderVN (h: CreateElement): VNode {
+      const _vm = this
+      const $xeGanttView = _vm.$xeGanttView
+      const { reactData } = $xeGanttView
+
+      const $xeTable = $xeGanttView.internalData.xeTable
+
+      const { tableData } = reactData
+
       return h('div', {
         ref: 'refElem',
         class: 'vxe-gantt-view--chart-wrapper'
-      }, trVNs)
+      }, $xeTable ? _vm.renderRows(h, $xeTable, tableData) : [])
     }
   },
   mounted () {

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

@@ -1,7 +1,7 @@
 import { VNode, CreateElement } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { VxeUI } from '@vxe-ui/core'
-import { setScrollTop, setScrollLeft } from '../../ui/src/dom'
+import { setScrollTop, setScrollLeft, removeClass, addClass } from '../../ui/src/dom'
 import { getRefElem } from './util'
 import XEUtils from 'xe-utils'
 import GanttViewHeaderComponent from './gantt-header'
@@ -49,6 +49,8 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
   const reactData = $xeGanttView.reactData
   const internalData = $xeGanttView.internalData
 
+  const ganttProps = $xeGantt
+  const { treeConfig } = ganttProps
   const { minViewDate, maxViewDate } = reactData
   const taskViewOpts = $xeGantt.computeTaskViewOpts
   const fullCols: VxeGanttPropTypes.Column[] = []
@@ -101,9 +103,13 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
           const startField = $xeGantt.computeStartField
           const endField = $xeGantt.computeEndField
           const tableInternalData = $xeTable as unknown as TableInternalData
-          const { afterFullData } = tableInternalData
+          const { afterFullData, afterTreeFullData } = tableInternalData
+          const treeOpts = $xeTable.computeTreeOpts
+          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)
@@ -119,7 +125,13 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
                 oWidthSize
               }
             }
-          })
+          }
+
+          if (treeConfig) {
+            XEUtils.eachTree(afterTreeFullData, handleParseRender, { children: transform ? treeOpts.mapChildrenField : childrenField })
+          } else {
+            afterFullData.forEach(handleParseRender)
+          }
           internalData.chartMaps = ctMaps
         }
       }
@@ -135,6 +147,8 @@ function handleUpdateData ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewP
   const reactData = $xeGanttView.reactData
   const internalData = $xeGanttView.internalData
 
+  const ganttProps = $xeGantt
+  const { treeConfig } = ganttProps
   const $xeTable = internalData.xeTable
   const sdMaps: Record<string, any> = {}
   const edMaps: Record<string, any> = {}
@@ -144,8 +158,12 @@ function handleUpdateData ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewP
     const startField = $xeGantt.computeStartField
     const endField = $xeGantt.computeEndField
     const tableInternalData = $xeTable as unknown as TableInternalData
-    const { afterFullData } = tableInternalData
-    afterFullData.forEach(row => {
+    const { afterFullData, afterTreeFullData } = tableInternalData
+    const treeOpts = $xeTable.computeTreeOpts
+    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) {
@@ -158,7 +176,13 @@ function handleUpdateData ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewP
           maxDate = endDate
         }
       }
-    })
+    }
+
+    if (treeConfig) {
+      XEUtils.eachTree(afterTreeFullData, handleMinMaxData, { children: transform ? treeOpts.mapChildrenField : childrenField })
+    } else {
+      afterFullData.forEach(handleMinMaxData)
+    }
   }
   reactData.minViewDate = minDate
   reactData.maxViewDate = maxDate
@@ -333,6 +357,7 @@ function updateStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivat
 function handleLazyRecalculate ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
   calcScrollbar($xeGanttView)
   updateStyle($xeGanttView)
+  updateChart($xeGanttView)
   return $xeGanttView.$nextTick()
 }
 
@@ -619,6 +644,39 @@ export default defineVxeComponent({
 
       return handleLazyRecalculate($xeGanttView)
     },
+    handleUpdateCurrentRow (row: any) {
+      const $xeGanttView = this
+      const internalData = $xeGanttView.internalData
+
+      const $xeTable = internalData.xeTable
+      const el = $xeGanttView.$refs.refElem as HTMLDivElement
+      if ($xeTable && el) {
+        if (row) {
+          const tableProps = $xeTable
+          const { highlightCurrentRow } = tableProps
+          const rowOpts = $xeTable.computeRowOpts
+          if (rowOpts.isCurrent || highlightCurrentRow) {
+            XEUtils.arrayEach(el.querySelectorAll(`[rowid="${$xeTable.getRowid(row)}"]`), elem => addClass(elem, 'row--current'))
+          }
+        } else {
+          XEUtils.arrayEach(el.querySelectorAll('.row--current'), elem => removeClass(elem, 'row--current'))
+        }
+      }
+    },
+    handleUpdateHoverRow (row: any) {
+      const $xeGanttView = this
+      const internalData = $xeGanttView.internalData
+
+      const $xeTable = internalData.xeTable
+      const el = $xeGanttView.$refs.refElem as HTMLDivElement
+      if ($xeTable && el) {
+        if (row) {
+          XEUtils.arrayEach(el.querySelectorAll(`.vxe-body--row[rowid="${$xeTable.getRowid(row)}"]`), elem => addClass(elem, 'row--hover'))
+        } else {
+          XEUtils.arrayEach(el.querySelectorAll('.vxe-body--row.row--hover'), elem => removeClass(elem, 'row--hover'))
+        }
+      }
+    },
     triggerHeaderScrollEvent (evnt: Event) {
       const $xeGanttView = this
       const internalData = $xeGanttView.internalData

package/packages/gantt/src/gantt.ts

@@ -307,7 +307,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const proxyOpts = $xeGantt.computeProxyOpts
       const pagerOpts = $xeGantt.computePagerOpts
       const isLoading = $xeGantt.computeIsLoading
-      const tProps = Object.assign({}, tableExtendProps)
+      const tProps = Object.assign({}, tableExtendProps, {
+        showOverflow: true,
+        showHeaderOverflow: true,
+        showFooterOverflow: true,
+        showFooter: false
+      })
       if (isZMax) {
         if (tableExtendProps.maxHeight) {
           tProps.maxHeight = '100%'
@@ -1495,7 +1500,22 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     handleTaskCellClickEvent (evnt: MouseEvent, params: VxeGanttDefines.TaskCellClickParams) {
       const $xeGantt = this
+      const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
 
+      if ($xeTable) {
+        const tableProps = $xeTable
+        const { highlightCurrentRow } = tableProps
+        const rowOpts = $xeTable.computeRowOpts
+        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: MouseEvent, params: VxeGanttDefines.TaskCellClickParams) {
@@ -1706,10 +1726,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { toolbarConfig } = props
       const toolbarSlot = slots.toolbar
-      const hasToolbar = !!(toolbarSlot || isEnableConf(toolbarConfig) || toolbar)
       const toolbarOpts = $xeGantt.computeToolbarOpts
 
-      if (hasToolbar) {
+      if ((toolbarConfig && isEnableConf(toolbarOpts)) || toolbarSlot) {
         return h('div', {
           key: 'toolbar',
           ref: 'refToolbarWrapper',
@@ -1854,20 +1873,21 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if (!enabled) {
         return renderEmptyElement($xeGantt)
       }
+      const isResize = resize && showLeftView && showRightView
       const ons: {
         mousedown?: any
       } = {}
-      if (resize) {
+      if (isResize) {
         ons.mousedown = $xeGantt.dragSplitEvent
       }
       return h('div', {
         class: ['vxe-gantt--view-split-bar', {
-          'is--resize': resize,
-          on: ons
+          'is--resize': isResize
         }]
       }, [
         h('div', {
-          class: 'vxe-gantt--view-split-bar-handle'
+          class: 'vxe-gantt--view-split-bar-handle',
+          on: 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, 3, 18)) {
+  errLog('vxe.error.errorVersion', [`vxe-table@${VxeUI.tableVersion || '?'}`, 'vxe-table v3.18+'])
+}
+
+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;
+    }
+  }
 }
 
 /*分割条*/
@@ -518,9 +531,6 @@
     float: left;
   }
 }
-.vxe-gantt-view--header-table {
-  height: 100%;
-}
 .vxe-gantt-view--header-table,
 .vxe-gantt-view--body-table {
   border: 0;
@@ -531,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;
@@ -556,9 +569,6 @@
   text-align: center;
   font-size: 1em;
 }
-.vxe-gantt-view--body-column {
-  height: 48px;
-}
 .vxe-gantt-view--header-column,
 .vxe-gantt-view--body-column,
 .vxe-gantt-view--footer-column {
@@ -568,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 {