vxe-gantt 4.0.0-beta.5 → 4.0.0-beta.7

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

@@ -41,7 +41,7 @@ function createInternalData (): GanttViewInternalData {
   }
 }
 const maxYHeight = 5e6
-const maxXWidth = 5e6
+// const maxXWidth = 5e6
 
 export default defineVxeComponent({
   name: 'VxeGanttView',
@@ -75,9 +75,9 @@ export default defineVxeComponent({
       // 是否启用了纵向 Y 可视渲染方式加载
       scrollYLoad: false,
       // 是否存在纵向滚动条
-      overflowY: false,
+      overflowY: true,
       // 是否存在横向滚动条
-      overflowX: false,
+      overflowX: true,
       // 纵向滚动条的宽度
       scrollbarWidth: 0,
       // 横向滚动条的高度
@@ -430,61 +430,11 @@ export default defineVxeComponent({
       return nextTick()
     }
 
-    const updateScrollXSpace = () => {
-      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 = refScrollXSpaceElem.value
-      if (scrollXSpaceEl) {
-        scrollXSpaceEl.style.width = `${ySpaceWidth}px`
-      }
+    // const updateScrollXSpace = () => {
 
-      calcScrollbar()
-      return nextTick().then(() => {
-        updateStyle()
-      })
-    }
+    // }
 
     const updateScrollYSpace = () => {
-      const { scrollYLoad, overflowY } = reactData
       const { elemStore } = internalData
       const $xeTable = internalData.xeTable
       const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
@@ -516,21 +466,19 @@ export default defineVxeComponent({
         }
         ySpaceHeight = maxYHeight
       }
-      if (!(scrollYLoad && overflowY)) {
-        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 = refScrollYSpaceElem.value
       if (scrollYSpaceEl) {
@@ -736,8 +684,30 @@ export default defineVxeComponent({
           handleScrollEvent(evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft)
         }
       },
-      updateScrollXSpace,
-      updateScrollYSpace
+      handleUpdateSXSpace () {
+        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 = refScrollXSpaceElem.value
+        if (scrollXSpaceEl) {
+          scrollXSpaceEl.style.width = `${scrollXWidth}px`
+        }
+
+        calcScrollbar()
+        return nextTick()
+      },
+      handleUpdateSYSpace: updateScrollYSpace,
+      handleUpdateSYStatus (sYLoad) {
+        reactData.scrollYLoad = sYLoad
+      }
     }
 
     const handleGlobalResizeEvent = () => {

package/packages/gantt/src/gantt.ts

@@ -1402,7 +1402,11 @@ export default defineVxeComponent({
         if ($xeTable) {
           const tableProps = $xeTable.props
           const { highlightCurrentRow } = tableProps
-          const { computeRowOpts } = $xeTable.getComputeMaps()
+          const tableReactData = $xeTable.reactData
+          const { radioColumn, checkboxColumn } = tableReactData
+          const { computeRadioOpts, computeCheckboxOpts, computeRowOpts } = $xeTable.getComputeMaps()
+          const radioOpts = computeRadioOpts.value
+          const checkboxOpts = computeCheckboxOpts.value
           const rowOpts = computeRowOpts.value
           const { row } = params
           // 如果是当前行
@@ -1413,6 +1417,14 @@ export default 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)
       },
@@ -1811,7 +1823,10 @@ export default defineVxeComponent({
                       class: 'vxe-gantt--resizable-split-number-right'
                     }, '20px')
                   ])
-                ])
+                ]),
+                h('div', {
+                  class: 'vxe-gantt--border-line'
+                })
               ])
             )
             break
@@ -1857,10 +1872,7 @@ export default defineVxeComponent({
         ]),
         h('div', {
           class: 'vxe-gantt--layout-footer-wrapper'
-        }, renderChildLayout(footKeys)),
-        h('div', {
-          class: 'vxe-gantt--border-line'
-        })
+        }, renderChildLayout(footKeys))
       ]
     }
 

package/packages/gantt/src/util.ts

@@ -10,13 +10,6 @@ export function getRefElem (refEl: any) {
   return null
 }
 
-export function getCellHeight (height: number | 'unset' | undefined | null) {
-  if (height === 'unset') {
-    return 0
-  }
-  return height || 0
-}
-
 export function getCellRestHeight (rowRest: VxeTableDefines.RowCacheItem, cellOpts: VxeTablePropTypes.CellConfig, rowOpts: VxeTablePropTypes.RowConfig, defaultRowHeight: number) {
   return rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
 }

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

@@ -14,9 +14,6 @@
           border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
         }
       }
-      & > .vxe-gantt-view--chart-progress {
-        border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius) 0 0 var(--vxe-ui-gantt-view-task-bar-border-radius);
-      }
     }
   }
 }
@@ -31,6 +28,7 @@
   transform: translateY(-50%);
   height: var(--vxe-ui-gantt-view-chart-bar-height);
   background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
+  overflow: hidden;
   pointer-events: all;
   &:hover {
     &::after {

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);
     }