vxe-gantt 3.0.0-beta.4 → 3.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 { TableReactData, TableInternalData, VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from 'vxe-table'
 import type { VxeGanttViewConstructor, GanttViewReactData, VxeGanttPropTypes, VxeGanttDefines, VxeGanttViewPrivateMethods, GanttViewInternalData, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
@@ -258,13 +259,15 @@ function updateStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivat
     return
   }
 
+  const scrollbarOpts = $xeGantt.computeScrollbarOpts
   const scrollbarXToTop = $xeGantt.computeScrollbarXToTop
+  const scrollbarYToLeft = $xeGantt.computeScrollbarYToLeft
 
   const xLeftCornerEl = $xeGanttView.$refs.refScrollXLeftCornerElem as HTMLDivElement
   const xRightCornerEl = $xeGanttView.$refs.refScrollXRightCornerElem as HTMLDivElement
   const scrollXVirtualEl = $xeGanttView.$refs.refScrollXVirtualElem as HTMLDivElement
 
-  const osbWidth = scrollbarWidth
+  let osbWidth = scrollbarWidth
   const osbHeight = scrollbarHeight
 
   let tbHeight = 0
@@ -277,6 +280,12 @@ function updateStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivat
     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`
@@ -285,6 +294,10 @@ function updateStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivat
   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`
@@ -308,7 +321,7 @@ function updateStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivat
   if (scrollYVirtualEl) {
     scrollYVirtualEl.style.width = `${osbWidth}px`
     scrollYVirtualEl.style.height = `${tbHeight + tHeaderHeight + tFooterHeight}px`
-    scrollYVirtualEl.style.visibility = 'visible'
+    scrollYVirtualEl.style.visibility = yScrollbarVisible
   }
   const yTopCornerEl = $xeGanttView.$refs.refScrollYTopCornerElem as HTMLDivElement
   if (yTopCornerEl) {
@@ -790,12 +803,36 @@ export default defineVxeComponent({
         handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft)
       }
     },
-    updateScrollYSpace () {
+    handleUpdateSXSpace () {
+      const $xeGanttView = this
+      const reactData = $xeGanttView.reactData
+      const internalData = $xeGanttView.internalData
+
+      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()
+    },
+    handleUpdateSYSpace () {
       const $xeGanttView = this
 
       return updateScrollYSpace($xeGanttView)
     },
-    updateScrollYStatus (sYLoad: boolean) {
+    handleUpdateSYStatus (sYLoad: boolean) {
       const $xeGanttView = this
       const reactData = $xeGanttView.reactData
 
@@ -884,7 +921,8 @@ export default defineVxeComponent({
         class: 'vxe-gantt-view--viewport-wrapper'
       }, [
         h(GanttViewHeaderComponent),
-        h(GanttViewBodyComponent)
+        h(GanttViewBodyComponent),
+        h(GanttViewFooterComponent)
       ])
     },
     renderBody (h: CreateElement) {

package/packages/gantt/src/gantt.ts

@@ -10,7 +10,7 @@ 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 { 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
@@ -81,6 +81,8 @@ export default /* define-vxe-component start */ 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>
@@ -317,10 +319,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const pagerOpts = $xeGantt.computePagerOpts
       const isLoading = $xeGantt.computeIsLoading
       const tProps = Object.assign({}, tableExtendProps, {
+        // 不支持修改的属性
         showOverflow: true,
         showHeaderOverflow: true,
-        showFooterOverflow: true,
-        showFooter: false
+        showFooterOverflow: true
       })
       if (isZMax) {
         if (tableExtendProps.maxHeight) {
@@ -1514,6 +1516,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
         // 如果是当前行
@@ -1524,6 +1530,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)
     },
@@ -1548,6 +1562,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
 
       XEUtils.eachTree(columns, column => {
+        const { type } = column
         if (column.slots) {
           XEUtils.each(column.slots, (func) => {
             if (!XEUtils.isFunction(func)) {
@@ -1557,6 +1572,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
             }
           })
         }
+        if (type === 'expand') {
+          errLog('vxe.error.errProp', ['type=expand', 'type=seq,radio,checkbox,html'])
+        }
       })
       return $xeTable.loadColumn(columns)
     },
@@ -1971,7 +1989,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
                       class: 'vxe-gantt--resizable-split-number-right'
                     }, '20px')
                   ])
-                ])
+                ]),
+                h('div', {
+                  class: 'vxe-gantt--border-line'
+                })
               ])
             )
             break
@@ -2019,10 +2040,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 {
@@ -2071,6 +2089,12 @@ export default /* define-vxe-component start */ 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'])
+    }
 
     $xeGantt.$nextTick(() => {
       if (props.formConfig) {

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