vxe-gantt 3.6.2 → 3.6.4

package/packages/gantt/src/gantt.ts

@@ -98,6 +98,14 @@ function createReactData (): GanttReactData {
   return {
     tableLoading: false,
     proxyInited: false,
+    // 是否存在纵向滚动条
+    overflowY: false,
+    // 是否存在横向滚动条
+    overflowX: false,
+    // 纵向滚动条的宽度
+    scrollbarWidth: 0,
+    // 横向滚动条的高度
+    scrollbarHeight: 0,
     isZMax: false,
     tableLinks: [],
     tableData: [],
@@ -436,13 +444,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const scrollbarOpts = $xeGantt.computeScrollbarOpts as VxeTablePropTypes.ScrollbarConfig
       return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left')
     },
-    computeStyles () {
+    computeWrapperStyle () {
       const $xeGantt = this
       const props = $xeGantt
       const reactData = $xeGantt.reactData
 
       const { height, maxHeight, taskBarSubviewConfig } = props
-      const { isZMax, tZindex } = reactData
+      const { isZMax, tZindex, overflowY, scrollbarWidth } = reactData
       const taskViewOpts = $xeGantt.computeTaskViewOpts as VxeGanttPropTypes.TaskViewConfig
       const { viewStyle, tableStyle } = taskViewOpts
       const taskBarOpts = $xeGantt.computeTaskBarOpts as VxeGanttPropTypes.TaskBarConfig
@@ -450,7 +458,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const taskBarSubviewOpts = $xeGantt.computeTaskBarSubviewOpts
       const taskNowLineOpts = $xeGantt.computeTaskNowLineOpts
       const { fontColor: nlfColor, bgColor: nlbgColor, width: nlWidth } = taskNowLineOpts
-      const stys: VxeComponentStyleType = {}
+      const stys: VxeComponentStyleType = {
+        '--vxe-ui-gantt-scrollbar-width': (overflowY && scrollbarWidth ? scrollbarWidth : 0) + 'px'
+      }
       if (isZMax) {
         stys.zIndex = tZindex
       } else {
@@ -2628,8 +2638,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     renderChildLayout (h: CreateElement, layoutKeys: VxeGanttDefines.LayoutKey[]) {
       const $xeGantt = this
+      const reactData = $xeGantt.reactData
 
+      const { showLeftView, showRightView } = reactData
       const taskSplitOpts = $xeGantt.computeTaskSplitOpts
+      const scrollbarXToTop = $xeGantt.computeScrollbarXToTop
+      const scrollbarYToLeft = $xeGantt.computeScrollbarYToLeft
       const { autoHideCollapseButton } = taskSplitOpts
       const childVNs: VNode[] = []
       layoutKeys.forEach(key => {
@@ -2648,7 +2662,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
               h('div', {
                 ref: 'refGanttContainerElem',
                 key: 'tv',
-                class: ['vxe-gantt--gantt-container', {
+                class: ['vxe-gantt--gantt-container', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+                  'show--left': showLeftView,
+                  'hide--left': !showLeftView,
+                  'show--right': showRightView,
+                  'hide--right': !showRightView,
                   'is--ah-split-btn': autoHideCollapseButton
                 }]
               }, [
@@ -2777,9 +2795,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeGantt
       const reactData = $xeGantt.reactData
 
-      const { showLeftView, showRightView, showSplitAnimat } = reactData
+      const { showLeftView, showRightView, overflowY, overflowX, showSplitAnimat } = reactData
       const vSize = $xeGantt.computeSize
-      const styles = $xeGantt.computeStyles
+      const wrapperStyle = $xeGantt.computeWrapperStyle
       const isLoading = $xeGantt.computeIsLoading
       const taskSplitOpts = $xeGantt.computeTaskSplitOpts
       const tableBorder = $xeGantt.computeTableBorder
@@ -2797,9 +2815,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
           'show--left': showLeftView,
           'hide--left': !showLeftView,
           'show--right': showRightView,
-          'hide--right': !showRightView
+          'hide--right': !showRightView,
+          'is--scroll-y': overflowY,
+          'is--scroll-x': overflowX
         }],
-        style: styles
+        style: wrapperStyle
       }, $xeGantt.renderLayout(h))
     }
   },

package/styles/components/gantt.scss

@@ -1,6 +1,11 @@
 @use '../helpers/baseMixin.scss';
 @use './gantt-module/all.scss';
 
+// 局部变量
+.vxe-gantt {
+  --vxe-ui-gantt-current-split-bar-action-btn-offset-left: 0px;
+}
+
 .vxe-gantt {
   position: relative;
   display: flex;
@@ -73,13 +78,6 @@
     flex-grow: 1;
     overflow: hidden;
   }
-  .vxe-gantt--view-split-bar {
-    flex-shrink: 0;
-    width: var(--vxe-ui-gantt-view-split-bar-width);
-    &.is--resize {
-      cursor: col-resize;
-    }
-  }
   .vxe-gantt--view-split-bar-handle {
     background-color: var(--vxe-ui-gantt-view-split-bar-background-color);
     &:hover,
@@ -87,8 +85,25 @@
       background-color: var(--vxe-ui-gantt-view-split-bar-hover-background-color);
     }
   }
+  &.is--animat {
+    & .vxe-gantt--table-wrapper {
+      @include baseMixin.createAnimationTransition(width, .3s);
+    }
+  }
+  &.show--animat {
+    &.hide--right {
+      .vxe-gantt--table-wrapper {
+        width: calc(100% - var(--vxe-ui-gantt-view-split-bar-width)) !important;
+        flex-shrink: 0;
+        flex-grow: unset;
+      }
+    }
+  }
+}
+
+.vxe-gantt--gantt-container {
   &.hide--left {
-    .vxe-gantt--table-wrapper {
+    & > .vxe-gantt--table-wrapper {
       width: 0px !important;
       flex-shrink: 0;
       flex-grow: unset;
@@ -96,7 +111,7 @@
   }
   &.show--left {
     &.show--right {
-      .vxe-gantt--table-wrapper {
+      & > .vxe-gantt--table-wrapper {
         flex-grow: unset;
         flex-shrink: 0;
         width: var(--vxe-ui-gantt-view-table-default-width);
@@ -104,28 +119,29 @@
     }
   }
   &.hide--right {
-    .vxe-gantt--view-wrapper {
+    & > .vxe-gantt--view-wrapper {
       width: 0px !important;
       flex-shrink: 0;
       flex-grow: unset;
     }
   }
-  &.is--animat {
-    & .vxe-gantt--table-wrapper {
-      @include baseMixin.createAnimationTransition(width, .3s);
-    }
-  }
-  &.show--animat {
-    &.hide--right {
-      .vxe-gantt--table-wrapper {
-        width: calc(100% - var(--vxe-ui-gantt-view-split-bar-width)) !important;
-        flex-shrink: 0;
-        flex-grow: unset;
+  &.show--left {
+    &.show--right {
+      .vxe-gantt--view-split-bar {
+        width: var(--vxe-ui-gantt-view-split-bar-width);
       }
     }
   }
 }
 
+.vxe-gantt--view-split-bar {
+  width: 0;
+  flex-shrink: 0;
+  &.is--resize {
+    cursor: col-resize;
+  }
+}
+
 .vxe-gantt--layout-body-wrapper {
   display: flex;
   flex-direction: row;
@@ -323,9 +339,9 @@
 }
 .vxe-gantt--view-split-bar-btn-wrapper {
   position: absolute;
-  left: 50%;
+  width: 100%;
   top: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateY(-50%);
   z-index: 5;
   pointer-events: none;
 }
@@ -352,15 +368,27 @@
     transform: scale(0.9);
   }
   &.is--prev {
-    left: calc(var(--vxe-ui-gantt-view-split-bar-action-btn-width) * -1 - 0.2em);
+    left: calc(var(--vxe-ui-gantt-view-split-bar-action-btn-width) * -1 - var(--vxe-ui-gantt-current-split-bar-action-btn-offset-left) - 0.2em);
   }
   &.is--next {
-    right: calc(var(--vxe-ui-gantt-view-split-bar-action-btn-width) * -1 - 0.2em);
+    right: calc(var(--vxe-ui-gantt-view-split-bar-action-btn-width) * -1 - var(--vxe-ui-gantt-current-split-bar-action-btn-offset-left) - 0.2em);
   }
   i {
     font-size: 0.5em;
   }
 }
+.vxe-gantt--gantt-container {
+  &.sy-pos--right {
+    &.hide--right {
+      --vxe-ui-gantt-current-split-bar-action-btn-offset-left: var(--vxe-ui-gantt-scrollbar-width);
+    }
+  }
+  &.sy-pos--left {
+    &.hide--left {
+      --vxe-ui-gantt-current-split-bar-action-btn-offset-left: var(--vxe-ui-gantt-scrollbar-width);
+    }
+  }
+}
 
 .vxe-gantt--resizable-split-tip {
   display: none;