vxe-gantt 4.0.0-beta.6 → 4.0.0

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

@@ -6,6 +6,7 @@ import { getRefElem } from './util'
 import XEUtils from 'xe-utils'
 import GanttViewHeaderComponent from './gantt-header'
 import GanttViewBodyComponent from './gantt-body'
+import GanttViewFooterComponent from './gantt-footer'
 
 import type { VxeGanttViewConstructor, GanttViewReactData, GanttViewPrivateRef, VxeGanttPropTypes, VxeGanttDefines, VxeGanttViewPrivateMethods, GanttViewInternalData, VxeGanttViewMethods, GanttViewPrivateComputed, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
 
@@ -327,13 +328,15 @@ export default defineVxeComponent({
         return
       }
 
+      const scrollbarOpts = computeScrollbarOpts.value
       const scrollbarXToTop = computeScrollbarXToTop.value
+      const scrollbarYToLeft = computeScrollbarYToLeft.value
 
       const xLeftCornerEl = refScrollXLeftCornerElem.value
       const xRightCornerEl = refScrollXRightCornerElem.value
       const scrollXVirtualEl = refScrollXVirtualElem.value
 
-      const osbWidth = scrollbarWidth
+      let osbWidth = scrollbarWidth
       const osbHeight = scrollbarHeight
 
       let tbHeight = 0
@@ -346,6 +349,12 @@ export default defineVxeComponent({
         tFooterHeight = tableInternalData.tFooterHeight
       }
 
+      let yScrollbarVisible = 'visible'
+      if (scrollbarYToLeft || (scrollbarOpts.y && scrollbarOpts.y.visible === false)) {
+        osbWidth = 0
+        yScrollbarVisible = 'hidden'
+      }
+
       const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
       if (headerScrollElem) {
         headerScrollElem.style.height = `${tHeaderHeight}px`
@@ -354,6 +363,10 @@ export default defineVxeComponent({
       if (bodyScrollElem) {
         bodyScrollElem.style.height = `${tbHeight}px`
       }
+      const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
+      if (footerScrollElem) {
+        footerScrollElem.style.height = `${tFooterHeight}px`
+      }
 
       if (scrollXVirtualEl) {
         scrollXVirtualEl.style.height = `${osbHeight}px`
@@ -377,7 +390,7 @@ export default defineVxeComponent({
       if (scrollYVirtualEl) {
         scrollYVirtualEl.style.width = `${osbWidth}px`
         scrollYVirtualEl.style.height = `${tbHeight + tHeaderHeight + tFooterHeight}px`
-        scrollYVirtualEl.style.visibility = 'visible'
+        scrollYVirtualEl.style.visibility = yScrollbarVisible
       }
       const yTopCornerEl = refScrollYTopCornerElem.value
       if (yTopCornerEl) {
@@ -431,56 +444,7 @@ export default defineVxeComponent({
     }
 
     // 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`
-    //   }
-
-    //   calcScrollbar()
-    //   return nextTick().then(() => {
-    //     updateStyle()
-    //   })
+
     // }
 
     const updateScrollYSpace = () => {
@@ -733,8 +697,28 @@ export default defineVxeComponent({
           handleScrollEvent(evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft)
         }
       },
-      updateScrollYSpace,
-      updateScrollYStatus (sYLoad) {
+      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
       }
     }
@@ -813,7 +797,8 @@ export default defineVxeComponent({
         class: 'vxe-gantt-view--viewport-wrapper'
       }, [
         h(GanttViewHeaderComponent),
-        h(GanttViewBodyComponent)
+        h(GanttViewBodyComponent),
+        h(GanttViewFooterComponent)
       ])
     }
 

package/packages/gantt/src/gantt.ts

@@ -44,6 +44,8 @@ export default defineVxeComponent({
       editConfig: PropType<VxeTablePropTypes.EditConfig>
       sortConfig: PropType<VxeTablePropTypes.SortConfig>
       filterConfig: PropType<VxeTablePropTypes.FilterConfig>
+      expandConfig: PropType<VxeTablePropTypes.ExpandConfig>
+      aggregateConfig: PropType<VxeTablePropTypes.AggregateConfig>
       validConfig: PropType<VxeTablePropTypes.ValidConfig>
       editRules: PropType<VxeTablePropTypes.EditRules>
       animat: PropType<VxeTablePropTypes.Animat>
@@ -276,10 +278,10 @@ export default defineVxeComponent({
       const pagerOpts = computePagerOpts.value
       const isLoading = computeIsLoading.value
       const tProps = Object.assign({}, tableExtendProps, {
+        // 不支持修改的属性
         showOverflow: true,
         showHeaderOverflow: true,
-        showFooterOverflow: true,
-        showFooter: false
+        showFooterOverflow: true
       })
       if (isZMax) {
         if (tableExtendProps.maxHeight) {
@@ -1402,7 +1404,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 +1419,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)
       },
@@ -1432,6 +1446,7 @@ export default defineVxeComponent({
       loadColumn (columns: any[]) {
         const $xeTable = refTable.value
         XEUtils.eachTree(columns, (column) => {
+          const { type } = column
           if (column.slots) {
             XEUtils.each(column.slots, (func) => {
               if (!XEUtils.isFunction(func)) {
@@ -1441,6 +1456,9 @@ export default defineVxeComponent({
               }
             })
           }
+          if (type === 'expand') {
+            errLog('vxe.error.errProp', ['type=expand', 'type=seq,radio,checkbox,html'])
+          }
         })
         if ($xeTable) {
           return $xeTable.loadColumn(columns)
@@ -1811,7 +1829,10 @@ export default defineVxeComponent({
                       class: 'vxe-gantt--resizable-split-number-right'
                     }, '20px')
                   ])
-                ])
+                ]),
+                h('div', {
+                  class: 'vxe-gantt--border-line'
+                })
               ])
             )
             break
@@ -1857,10 +1878,7 @@ export default defineVxeComponent({
         ]),
         h('div', {
           class: 'vxe-gantt--layout-footer-wrapper'
-        }, renderChildLayout(footKeys)),
-        h('div', {
-          class: 'vxe-gantt--border-line'
-        })
+        }, renderChildLayout(footKeys))
       ]
     }
 
@@ -1954,6 +1972,12 @@ export default defineVxeComponent({
         if (proxyOpts.props) {
           warnLog('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response'])
         }
+        if (props.expandConfig) {
+          warnLog('vxe.error.notProp', ['expand-config'])
+        }
+        if (props.aggregateConfig) {
+          warnLog('vxe.error.notProp', ['aggregate-config'])
+        }
 
         if (columns && columns.length) {
           $xeGantt.loadColumn(columns)

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

@@ -259,6 +259,13 @@
       background-position: right bottom;
     }
   }
+  &.border--default,
+  &.border--full,
+  &.border--inner {
+    .vxe-gantt-view--footer-wrapper {
+      border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+    }
+  }
   &.border--inner {
     .vxe-gantt--border-line {
       border-width: 0 0 1px 0;
@@ -531,6 +538,9 @@
     float: left;
   }
 }
+.vxe-gantt-view--header-table {
+  height: 100%;
+}
 .vxe-gantt-view--header-table,
 .vxe-gantt-view--body-table {
   border: 0;
@@ -544,6 +554,10 @@
 .vxe-gantt-view--header-wrapper {
   background-color: var(--vxe-ui-table-header-background-color);
 }
+.vxe-gantt-view--footer-wrapper {
+  margin-top: calc(var(--vxe-ui-table-border-width) * -1);
+  background-color: var(--vxe-ui-table-footer-background-color);
+}
 .vxe-gantt-view--header-wrapper,
 .vxe-gantt-view--body-wrapper {
   overflow: hidden;
@@ -583,6 +597,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 +611,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);
     }