vxe-gantt 3.0.0-beta.3 → 3.0.0-beta.5

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

@@ -42,7 +42,7 @@ function createInternalData (): GanttViewInternalData {
   }
 }
 const maxYHeight = 5e6
-const maxXWidth = 5e6
+// const maxXWidth = 5e6
 
 function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
   const $xeGantt = $xeGanttView.$xeGantt
@@ -361,61 +361,61 @@ function handleLazyRecalculate ($xeGanttView: VxeGanttViewConstructor & VxeGantt
   return $xeGanttView.$nextTick()
 }
 
-function updateScrollXSpace ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
-  const reactData = $xeGanttView.reactData
-  const internalData = $xeGanttView.internalData
-
-  const { scrollXLoad, scrollXWidth } = reactData
-  const { elemStore } = internalData
-  const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-  const bodyTableElem = getRefElem(elemStore['main-body-table'])
-
-  let xSpaceLeft = 0
-
-  let clientWidth = 0
-  if (bodyScrollElem) {
-    clientWidth = bodyScrollElem.clientWidth
-  }
-  // 虚拟渲染
-  let isScrollXBig = false
-  let ySpaceWidth = scrollXWidth
-  if (scrollXWidth > maxXWidth) {
-    // 触右
-    if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollLeft + clientWidth >= maxXWidth) {
-      xSpaceLeft = maxXWidth - bodyTableElem.clientWidth
-    } else {
-      xSpaceLeft = (maxXWidth - clientWidth) * (xSpaceLeft / (scrollXWidth - clientWidth))
-    }
-    ySpaceWidth = maxXWidth
-    isScrollXBig = true
-  }
-
-  if (bodyTableElem) {
-    bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`
-  }
-
-  const layoutList = ['header', 'body', 'footer']
-  layoutList.forEach(layout => {
-    const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`])
-    if (xSpaceElem) {
-      xSpaceElem.style.width = scrollXLoad ? `${ySpaceWidth}px` : ''
-    }
-  })
-
-  reactData.scrollXLeft = xSpaceLeft
-  reactData.scrollXWidth = ySpaceWidth
-  reactData.isScrollXBig = isScrollXBig
-
-  const scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem as HTMLDivElement
-  if (scrollXSpaceEl) {
-    scrollXSpaceEl.style.width = `${ySpaceWidth}px`
-  }
-
-  calcScrollbar($xeGanttView)
-  return $xeGanttView.$nextTick().then(() => {
-    updateStyle($xeGanttView)
-  })
-}
+// function updateScrollXSpace ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+//   const reactData = $xeGanttView.reactData
+//   const internalData = $xeGanttView.internalData
+
+//   const { scrollXLoad, scrollXWidth } = reactData
+//   const { elemStore } = internalData
+//   const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+//   const bodyTableElem = getRefElem(elemStore['main-body-table'])
+
+//   let xSpaceLeft = 0
+
+//   let clientWidth = 0
+//   if (bodyScrollElem) {
+//     clientWidth = bodyScrollElem.clientWidth
+//   }
+//   // 虚拟渲染
+//   let isScrollXBig = false
+//   let ySpaceWidth = scrollXWidth
+//   if (scrollXWidth > maxXWidth) {
+//     // 触右
+//     if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollLeft + clientWidth >= maxXWidth) {
+//       xSpaceLeft = maxXWidth - bodyTableElem.clientWidth
+//     } else {
+//       xSpaceLeft = (maxXWidth - clientWidth) * (xSpaceLeft / (scrollXWidth - clientWidth))
+//     }
+//     ySpaceWidth = maxXWidth
+//     isScrollXBig = true
+//   }
+
+//   if (bodyTableElem) {
+//     bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`
+//   }
+
+//   const layoutList = ['header', 'body', 'footer']
+//   layoutList.forEach(layout => {
+//     const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`])
+//     if (xSpaceElem) {
+//       xSpaceElem.style.width = scrollXLoad ? `${ySpaceWidth}px` : ''
+//     }
+//   })
+
+//   reactData.scrollXLeft = xSpaceLeft
+//   reactData.scrollXWidth = ySpaceWidth
+//   reactData.isScrollXBig = isScrollXBig
+
+//   const scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem as HTMLDivElement
+//   if (scrollXSpaceEl) {
+//     scrollXSpaceEl.style.width = `${ySpaceWidth}px`
+//   }
+
+//   calcScrollbar($xeGanttView)
+//   return $xeGanttView.$nextTick().then(() => {
+//     updateStyle($xeGanttView)
+//   })
+// }
 
 function updateScrollYSpace ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
   const reactData = $xeGanttView.reactData
@@ -457,17 +457,18 @@ function updateScrollYSpace ($xeGanttView: VxeGanttViewConstructor & VxeGanttVie
     scrollYTop = 0
   }
 
+  const bodyChartWrapperElem = getRefElem(elemStore['main-chart-wrapper'])
   if (bodyTableElem) {
     bodyTableElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`
   }
+  if (bodyChartWrapperElem) {
+    bodyChartWrapperElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`
+  }
 
-  const layoutList = ['header', 'body', 'footer']
-  layoutList.forEach(layout => {
-    const ySpaceElem = getRefElem(elemStore[`main-${layout}-ySpace`])
-    if (ySpaceElem) {
-      ySpaceElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
-    }
-  })
+  const bodyYSpaceElem = getRefElem(elemStore['main-body-ySpace'])
+  if (bodyYSpaceElem) {
+    bodyYSpaceElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
+  }
 
   const scrollYSpaceEl = $xeGanttView.$refs.refScrollYSpaceElem as HTMLDivElement
   if (scrollYSpaceEl) {
@@ -552,9 +553,9 @@ export default defineVxeComponent({
       // 是否启用了纵向 Y 可视渲染方式加载
       scrollYLoad: false,
       // 是否存在纵向滚动条
-      overflowY: false,
+      overflowY: true,
       // 是否存在横向滚动条
-      overflowX: false,
+      overflowX: true,
       // 纵向滚动条的宽度
       scrollbarWidth: 0,
       // 横向滚动条的高度
@@ -789,16 +790,41 @@ export default defineVxeComponent({
         handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft)
       }
     },
-    updateScrollXSpace () {
+    handleUpdateSXSpace () {
       const $xeGanttView = this
+      const reactData = $xeGanttView.reactData
+      const internalData = $xeGanttView.internalData
 
-      return updateScrollXSpace($xeGanttView)
+      const { scrollXLoad, scrollXWidth } = reactData
+      const { elemStore } = internalData
+
+      const layoutList = ['header', 'body', 'footer']
+      layoutList.forEach(layout => {
+        const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`])
+        if (xSpaceElem) {
+          xSpaceElem.style.width = scrollXLoad ? `${scrollXWidth}px` : ''
+        }
+      })
+
+      const scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem as HTMLDivElement
+      if (scrollXSpaceEl) {
+        scrollXSpaceEl.style.width = `${scrollXWidth}px`
+      }
+
+      calcScrollbar($xeGanttView)
+      return $xeGanttView.$nextTick()
     },
-    updateScrollYSpace () {
+    handleUpdateSYSpace () {
       const $xeGanttView = this
 
       return updateScrollYSpace($xeGanttView)
     },
+    handleUpdateSYStatus (sYLoad: boolean) {
+      const $xeGanttView = this
+      const reactData = $xeGanttView.reactData
+
+      reactData.scrollYLoad = sYLoad
+    },
     handleGlobalResizeEvent () {
       const $xeGanttView = this
 

package/packages/gantt/src/gantt.ts

@@ -10,8 +10,8 @@ import GanttViewComponent from './gantt-view'
 import { VxeTable as VxeTableComponent } from 'vxe-table'
 
 import type { ValueOf, VxeFormInstance, VxeFormItemProps, VxePagerInstance, VxePagerDefines, VxeComponentStyleType, VxeComponentSizeType, VxeFormDefines, VxeFormItemPropTypes } from 'vxe-pc-ui'
-import type { VxeTableMethods, VxeToolbarPropTypes, VxeTableProps, VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines, VxeToolbarInstance, TableInternalData, VxeTablePropTypes, VxeGridPropTypes } from 'vxe-table'
-import type { VxeGanttEmits, GanttReactData, GanttInternalData, VxeGanttPropTypes, VxeGanttViewInstance, VxeGanttDefines } from '../../../types'
+import type { VxeTableMethods, VxeToolbarPropTypes, VxeTableProps, VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines, TableReactData, VxeToolbarInstance, TableInternalData, VxeTablePropTypes, VxeGridPropTypes } from 'vxe-table'
+import type { VxeGanttEmits, GanttReactData, GanttInternalData, VxeGanttPropTypes, VxeGanttViewInstance, VxeGanttDefines, VxeGanttConstructor } from '../../../types'
 
 const { getConfig, getIcon, getI18n, commands, globalMixins, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI
 
@@ -22,12 +22,18 @@ const propKeys = Object.keys(tableProps) as (keyof VxeTableProps)[]
 
 const defaultLayouts: VxeGanttPropTypes.Layouts = [['Form'], ['Toolbar', 'Top', 'Gantt', 'Bottom', 'Pager']]
 
-function getTableOns (_vm: any) {
-  const { $listeners, proxyConfig, proxyOpts } = _vm
+function getTableOns ($xeGantt: VxeGanttConstructor) {
+  const _vm = $xeGantt as any
+  const $listeners = _vm.$listeners
+
+  const props = $xeGantt
+
+  const { proxyConfig } = props
+  const proxyOpts = $xeGantt.computeProxyOpts
   const ons: any = {}
   XEUtils.each($listeners, (cb: any, type: any) => {
     ons[type] = (...args: any[]) => {
-      _vm.$emit(type, ...args)
+      $xeGantt.$emit(type, ...args)
     }
   })
   if (proxyConfig) {
@@ -1508,6 +1514,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if ($xeTable) {
         const tableProps = $xeTable
         const { highlightCurrentRow } = tableProps
+        const tableReactData = $xeTable as unknown as TableReactData
+        const { radioColumn, checkboxColumn } = tableReactData
+        const radioOpts = $xeTable.computeRadioOpts
+        const checkboxOpts = $xeTable.computeCheckboxOpts
         const rowOpts = $xeTable.computeRowOpts
         const { row } = params
         // 如果是当前行
@@ -1518,6 +1528,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
             $rowIndex: $xeTable.getVMRowIndex(row)
           }, params))
         }
+        // 如果是单选框
+        if ((radioColumn && radioOpts.trigger === 'row')) {
+          $xeTable.triggerRadioRowEvent(evnt, params)
+        }
+        // 如果是复选框
+        if ((checkboxColumn && checkboxOpts.trigger === 'row')) {
+          $xeTable.handleToggleCheckRowEvent(evnt, params)
+        }
       }
       $xeGantt.dispatchEvent('task-cell-click', params, evnt)
     },
@@ -1797,7 +1815,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         h(VxeTableComponent as Component, {
           key: 'table',
           props: tableProps,
-          on: getTableOns($xeGantt),
+          on: getTableOns($xeGantt as VxeGanttConstructor),
           scopedSlots: slots,
           ref: 'refTable'
         })
@@ -1965,7 +1983,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
                       class: 'vxe-gantt--resizable-split-number-right'
                     }, '20px')
                   ])
-                ])
+                ]),
+                h('div', {
+                  class: 'vxe-gantt--border-line'
+                })
               ])
             )
             break
@@ -2013,10 +2034,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         ]),
         h('div', {
           class: 'vxe-gantt--layout-footer-wrapper'
-        }, $xeGantt.renderChildLayout(h, footKeys)),
-        h('div', {
-          class: 'vxe-gantt--border-line'
-        })
+        }, $xeGantt.renderChildLayout(h, footKeys))
       ]
     },
     renderVN (h: CreateElement): VNode {

package/styles/components/gantt.scss

@@ -531,6 +531,9 @@
     float: left;
   }
 }
+.vxe-gantt-view--header-table {
+  height: 100%;
+}
 .vxe-gantt-view--header-table,
 .vxe-gantt-view--body-table {
   border: 0;
@@ -583,6 +586,12 @@
   &.row--stripe {
     background-color: var(--vxe-ui-table-row-striped-background-color);
   }
+  &.row--radio {
+    background-color: var(--vxe-ui-table-row-radio-checked-background-color);
+  }
+  &.row--checked {
+    background-color: var(--vxe-ui-table-row-checkbox-checked-background-color);
+  }
   &.row--current {
     background-color: var(--vxe-ui-table-row-current-background-color);
   }
@@ -591,6 +600,12 @@
     &.row--stripe {
       background-color: var(--vxe-ui-table-row-hover-striped-background-color);
     }
+    &.row--radio {
+      background-color: var(--vxe-ui-table-row-hover-radio-checked-background-color);
+    }
+    &.row--checked {
+      background-color: var(--vxe-ui-table-row-hover-checkbox-checked-background-color);
+    }
     &.row--current {
       background-color: var(--vxe-ui-table-row-hover-current-background-color);
     }