vxe-gantt 4.0.0-beta.0 → 4.0.0-beta.2

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

@@ -1,10 +1,11 @@
 import { h, inject, VNode, ref, Ref, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { VxeUI } from '../../ui'
+import { VxeUI } from '@vxe-ui/core'
 import XEUtils from 'xe-utils'
 import { getCellRestHeight } from './util'
+import { getStringValue } from '../../ui/src/utils'
 
-import type { VxeTablePropTypes } from 'vxe-table'
+import type { VxeTablePropTypes, TableInternalData } from 'vxe-table'
 import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
 
 const { renderEmptyElement } = VxeUI
@@ -16,15 +17,15 @@ export default defineVxeComponent({
     const $xeGanttView = inject('$xeGanttView', {} as VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
 
     const { reactData, internalData } = $xeGanttView
-    const { refTable } = $xeGantt.getRefMaps()
-    const { computeProgressField, computeTaskBarOpts } = $xeGantt.getComputeMaps()
+    const { computeProgressField, computeTitleField, computeTaskBarOpts } = $xeGantt.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
 
     const renderVN = () => {
-      const $xeTable = refTable.value
+      const $xeTable = $xeGanttView.internalData.xeTable
 
-      const fullAllDataRowIdData = $xeTable ? $xeTable.internalData.fullAllDataRowIdData : {}
+      const tableInternalData = $xeTable ? $xeTable.internalData : {} as TableInternalData
+      const fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData || {}
       let cellOpts: VxeTablePropTypes.CellConfig = {}
       let rowOpts : VxeTablePropTypes.RowConfig = {}
       let defaultRowHeight = 0
@@ -36,28 +37,42 @@ export default defineVxeComponent({
       }
 
       const { tableData } = reactData
+      const titleField = computeTitleField.value
       const progressField = computeProgressField.value
       const taskBarOpts = computeTaskBarOpts.value
-      const { showProgress } = taskBarOpts
+      const { showProgress, showContent, contentMethod, barStyle } = taskBarOpts
+      const { round } = barStyle || {}
 
-      const trVNs:VNode[] = []
+      const trVNs: VNode[] = []
       tableData.forEach((row, rIndex) => {
         const rowid = $xeTable ? $xeTable.getRowid(row) : ''
         const rowRest = fullAllDataRowIdData[rowid] || {}
         const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight)
-        const progressValue = showProgress ? XEUtils.get(row, progressField) : 0
+        let title = getStringValue(XEUtils.get(row, titleField))
+        const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0
+        if (contentMethod) {
+          title = getStringValue(contentMethod({ row, title }))
+        }
         trVNs.push(
           h('div', {
             key: rIndex,
             rowid,
-            class: 'vxe-gantt-view--chart-row',
+            class: ['vxe-gantt-view--chart-row', {
+              'is--round': round
+            }],
             style: {
               height: `${cellHeight}px`
             }
           }, [
             h('div', {
               class: 'vxe-gantt-view--chart-bar',
-              rowid
+              rowid,
+              onClick (evnt) {
+                $xeGantt.handleTaskBarClickEvent(evnt, { row })
+              },
+              onDblclick (evnt) {
+                $xeGantt.handleTaskBarDblclickEvent(evnt, { row })
+              }
             }, [
               showProgress
                 ? h('div', {
@@ -67,9 +82,11 @@ export default defineVxeComponent({
                   }
                 })
                 : renderEmptyElement($xeGantt),
-              h('div', {
-                class: 'vxe-gantt-view--chart-content'
-              })
+              showContent
+                ? h('div', {
+                  class: 'vxe-gantt-view--chart-content'
+                }, title)
+                : renderEmptyElement($xeGantt)
             ])
           ])
         )

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

@@ -1,6 +1,8 @@
 import { h, inject, ref, Ref, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
+import { getCellHeight } from './util'
 
+import type { VxeTablePropTypes } from 'vxe-table'
 import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods } from '../../../types'
 
 export default defineVxeComponent({
@@ -16,7 +18,20 @@ export default defineVxeComponent({
     const refHeaderXSpace = ref() as Ref<HTMLDivElement>
 
     const renderVN = () => {
-      const { tableColumn, headerGroups } = reactData
+      const $xeTable = $xeGanttView.internalData.xeTable
+
+      const { tableColumn, headerGroups, viewCellWidth } = reactData
+
+      let defaultRowHeight: number = 0
+      let headerCellOpts : VxeTablePropTypes.HeaderCellConfig = {}
+      let currCellHeight = 0
+      if ($xeTable) {
+        const { computeDefaultRowHeight, computeHeaderCellOpts } = $xeTable.getComputeMaps()
+        defaultRowHeight = computeDefaultRowHeight.value
+        headerCellOpts = computeHeaderCellOpts.value
+        currCellHeight = getCellHeight(headerCellOpts.height) || defaultRowHeight
+      }
+
       return h('div', {
         ref: refElem,
         class: 'vxe-gantt-view--header-wrapper'
@@ -32,11 +47,17 @@ export default defineVxeComponent({
           }),
           h('table', {
             ref: refHeaderTable,
-            class: 'vxe-gantt-view--header-table'
+            class: 'vxe-gantt-view--header-table',
+            style: {
+              height: `${currCellHeight}px`
+            }
           }, [
             h('colgroup', {}, tableColumn.map((column, cIndex) => {
               return h('col', {
-                key: cIndex
+                key: cIndex,
+                style: {
+                  width: `${viewCellWidth}px`
+                }
               })
             })),
             h('thead', {}, headerGroups.map((cols, rIndex) => {

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

@@ -1,7 +1,7 @@
 import { h, ref, reactive, nextTick, inject, watch, provide, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { setScrollTop, setScrollLeft } from '../../ui/src/dom'
-import { VxeUI } from '../../ui'
+import { VxeUI } from '@vxe-ui/core'
 import { getRefElem } from './util'
 import XEUtils from 'xe-utils'
 import GanttViewHeaderComponent from './gantt-header'
@@ -295,6 +295,7 @@ export default defineVxeComponent({
       const { scrollbarWidth, scrollbarHeight, tableColumn } = reactData
       const { elemStore } = internalData
       const $xeTable = internalData.xeTable
+
       const el = refElem.value
       if (!el || !el.clientHeight) {
         return
@@ -544,6 +545,10 @@ export default defineVxeComponent({
     }
 
     const ganttViewMethods: VxeGanttViewMethods = {
+      refreshData () {
+        handleUpdateData()
+        return handleLazyRecalculate()
+      },
       updateViewData () {
         const $xeTable = internalData.xeTable
         if ($xeTable) {

package/packages/gantt/src/gantt.ts

@@ -1,25 +1,28 @@
-import { h, ref, computed, provide, reactive, onUnmounted, watch, nextTick, VNode, ComponentPublicInstance, onMounted } from 'vue'
+import { h, ref, PropType, computed, provide, reactive, onUnmounted, watch, nextTick, VNode, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils'
 import { getOffsetHeight, getPaddingTopBottomSize, getDomNode, toCssUnit, addClass, removeClass } from '../../ui/src/dom'
-import { VxeUI } from '../../ui'
-import { ganttProps } from './props'
+import { VxeUI } from '@vxe-ui/core'
 import { ganttEmits } from './emits'
 import { tableEmits } from './table-emits'
-import { tableProps } from './table-props'
 import { warnLog, errLog } from '../../ui/src/log'
 import GanttViewComponent from './gantt-view'
+import { VxeTable as VxeTableComponent } from 'vxe-table'
 
 import type { VxeGanttConstructor, VxeGanttEmits, GanttReactData, GanttInternalData, VxeGanttPropTypes, GanttMethods, GanttPrivateMethods, VxeGanttPrivateMethods, GanttPrivateRef, VxeGanttProps, VxeGanttPrivateComputed, VxeGanttViewInstance, VxeGanttDefines } from '../../../types'
 import type { ValueOf, VxeFormEvents, VxeFormInstance, VxePagerEvents, VxeFormItemProps, VxePagerInstance, VxeComponentStyleType } from 'vxe-pc-ui'
-import type { VxeTableMethods, VxeToolbarPropTypes, VxeTableProps, VxeTableConstructor, VxeTablePrivateMethods, VxeTableEvents, VxeTableDefines, VxeTableEventProps, VxeToolbarInstance } from 'vxe-table'
+import type { VxeTableMethods, VxeToolbarPropTypes, VxeTableProps, VxeTablePropTypes, VxeTableConstructor, VxeTablePrivateMethods, VxeTableEvents, VxeTableDefines, VxeTableEventProps, VxeToolbarInstance, VxeGridPropTypes } from 'vxe-table'
 
 const { getConfig, getIcon, getI18n, commands, hooks, useFns, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement, getSlotVNs } = VxeUI
 
+const tableProps = (VxeTableComponent as any).props
+
 const tableComponentPropKeys = Object.keys(tableProps) as (keyof VxeTableProps)[]
 const tableComponentMethodKeys: (keyof VxeTableMethods)[] = ['clearAll', 'syncData', 'updateData', 'loadData', 'reloadData', 'reloadRow', 'loadColumn', 'reloadColumn', 'getRowNode', 'getColumnNode', 'getRowIndex', 'getVTRowIndex', 'getVMRowIndex', 'getColumnIndex', 'getVTColumnIndex', 'getVMColumnIndex', 'setRow', 'createData', 'createRow', 'revertData', 'clearData', 'isRemoveByRow', 'isInsertByRow', 'isUpdateByRow', 'getColumns', 'getColumnById', 'getColumnByField', 'getTableColumn', 'getFullColumns', 'getData', 'getCheckboxRecords', 'getParentRow', 'getTreeRowChildren', 'getTreeParentRow', 'getRowSeq', 'getRowById', 'getRowid', 'getTableData', 'getFullData', 'setColumnFixed', 'clearColumnFixed', 'setColumnWidth', 'getColumnWidth', 'recalcRowHeight', 'setRowHeightConf', 'getRowHeightConf', 'setRowHeight', 'getRowHeight', 'hideColumn', 'showColumn', 'resetColumn', 'refreshColumn', 'refreshScroll', 'recalculate', 'closeTooltip', 'isAllCheckboxChecked', 'isAllCheckboxIndeterminate', 'getCheckboxIndeterminateRecords', 'setCheckboxRow', 'setCheckboxRowKey', 'isCheckedByCheckboxRow', 'isCheckedByCheckboxRowKey', 'isIndeterminateByCheckboxRow', 'isIndeterminateByCheckboxRowKey', 'toggleCheckboxRow', 'setAllCheckboxRow', 'getRadioReserveRecord', 'clearRadioReserve', 'getCheckboxReserveRecords', 'clearCheckboxReserve', 'toggleAllCheckboxRow', 'clearCheckboxRow', 'setCurrentRow', 'isCheckedByRadioRow', 'isCheckedByRadioRowKey', 'setRadioRow', 'setRadioRowKey', 'clearCurrentRow', 'clearRadioRow', 'getCurrentRecord', 'getRadioRecord', 'getCurrentColumn', 'setCurrentColumn', 'clearCurrentColumn', 'setPendingRow', 'togglePendingRow', 'hasPendingByRow', 'isPendingByRow', 'getPendingRecords', 'clearPendingRow', 'setFilterByEvent', 'sort', 'setSort', 'setSortByEvent', 'clearSort', 'clearSortByEvent', 'isSort', 'getSortColumns', 'closeFilter', 'isFilter', 'clearFilterByEvent', 'isActiveFilterByColumn', 'isRowExpandLoaded', 'clearRowExpandLoaded', 'reloadRowExpand', 'reloadRowExpand', 'toggleRowExpand', 'setAllRowExpand', 'setRowExpand', 'isExpandByRow', 'isRowExpandByRow', 'clearRowExpand', 'clearRowExpandReserve', 'getRowExpandRecords', 'getTreeExpandRecords', 'isTreeExpandLoaded', 'clearTreeExpandLoaded', 'reloadTreeExpand', 'reloadTreeChilds', 'toggleTreeExpand', 'setAllTreeExpand', 'setTreeExpand', 'isTreeExpandByRow', 'clearTreeExpand', 'clearTreeExpandReserve', 'getScroll', 'scrollTo', 'scrollToRow', 'scrollToColumn', 'clearScroll', 'updateFooter', 'updateStatus', 'setMergeCells', 'removeInsertRow', 'removeMergeCells', 'getMergeCells', 'clearMergeCells', 'setMergeFooterItems', 'removeMergeFooterItems', 'getMergeFooterItems', 'clearMergeFooterItems', 'getCustomStoreData', 'setRowGroupExpand', 'setAllRowGroupExpand', 'clearRowGroupExpand', 'isRowGroupExpandByRow', 'isRowGroupRecord', 'isAggregateRecord', 'isAggregateExpandByRow', 'getAggregateContentByRow', 'getAggregateRowChildren', 'setRowGroups', 'clearRowGroups', 'openTooltip', 'moveColumnTo', 'moveRowTo', 'getCellLabel', 'getCellElement', 'focus', 'blur', 'connect']
 
+const defaultLayouts: VxeGanttPropTypes.Layouts = [['Form'], ['Toolbar', 'Top', 'Gantt', 'Bottom', 'Pager']]
+
 function createInternalData (): GanttInternalData {
   return {
     resizeTableWidth: 0
@@ -28,7 +31,42 @@ function createInternalData (): GanttInternalData {
 
 export default defineVxeComponent({
   name: 'VxeGantt',
-  props: ganttProps,
+  props: {
+    ...(tableProps as {
+      border: PropType<VxeTablePropTypes.Border>
+      round: PropType<VxeTablePropTypes.Round>
+      loading: PropType<VxeTablePropTypes.Loading>
+      height: PropType<VxeTablePropTypes.Height>
+      minHeight: PropType<VxeTablePropTypes.MinHeight>
+      maxHeight: PropType<VxeTablePropTypes.MaxHeight>
+      seqConfig: PropType<VxeTablePropTypes.SeqConfig>
+      editConfig: PropType<VxeTablePropTypes.EditConfig>
+      sortConfig: PropType<VxeTablePropTypes.SortConfig>
+      filterConfig: PropType<VxeTablePropTypes.FilterConfig>
+      validConfig: PropType<VxeTablePropTypes.ValidConfig>
+      editRules: PropType<VxeTablePropTypes.EditRules>
+      animat: PropType<VxeTablePropTypes.Animat>
+      scrollbarConfig: PropType<VxeTablePropTypes.ScrollbarConfig>
+      params: PropType<VxeTablePropTypes.Params>
+    }),
+
+    columns: Array as PropType<VxeGridPropTypes.Columns<any>>,
+    pagerConfig: Object as PropType<VxeGridPropTypes.PagerConfig>,
+    proxyConfig: Object as PropType<VxeGridPropTypes.ProxyConfig<any>>,
+    toolbarConfig: Object as PropType<VxeGridPropTypes.ToolbarConfig>,
+    formConfig: Object as PropType<VxeGridPropTypes.FormConfig>,
+    zoomConfig: Object as PropType<VxeGridPropTypes.ZoomConfig>,
+
+    layouts: Array as PropType<VxeGanttPropTypes.Layouts>,
+    taskConfig: Object as PropType<VxeGanttPropTypes.TaskConfig>,
+    taskViewConfig: Object as PropType<VxeGanttPropTypes.TaskViewConfig>,
+    taskBarConfig: Object as PropType<VxeGanttPropTypes.TaskBarConfig>,
+    taskSplitConfig: Object as PropType<VxeGanttPropTypes.TaskSplitConfig>,
+    size: {
+      type: String as PropType<VxeGridPropTypes.Size>,
+      default: () => getConfig().gantt.size || getConfig().size
+    }
+  },
   emits: ganttEmits,
   setup (props, context) {
     const { slots, emit } = context
@@ -41,8 +79,6 @@ export default defineVxeComponent({
     const VxeTableComponent = VxeUI.getComponent('VxeTable')
     const VxeToolbarComponent = VxeUI.getComponent('VxeToolbar')
 
-    const defaultLayouts: VxeGanttPropTypes.Layouts = [['Form'], ['Toolbar', 'Top', 'Gantt', 'Bottom', 'Pager']]
-
     const { computeSize } = useFns.useSize(props)
 
     const reactData = reactive<GanttReactData>({
@@ -66,7 +102,7 @@ export default defineVxeComponent({
     const internalData = createInternalData()
 
     const refElem = ref<HTMLDivElement>()
-    const refTable = ref<ComponentPublicInstance<VxeTableProps, VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods>>()
+    const refTable = ref<VxeTableConstructor & VxeTablePrivateMethods>()
     const refForm = ref<VxeFormInstance>()
     const refToolbar = ref<VxeToolbarInstance>()
     const refPager = ref<VxePagerInstance>()
@@ -149,6 +185,10 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().gantt.taskBarConfig, props.taskBarConfig)
     })
 
+    const computeTaskSplitOpts = computed(() => {
+      return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig)
+    })
+
     const computeTitleField = computed(() => {
       const taskOpts = computeTaskOpts.value
       return taskOpts.titleField || 'title'
@@ -186,6 +226,10 @@ export default defineVxeComponent({
     const computeStyles = computed(() => {
       const { height, maxHeight } = props
       const { isZMax, tZindex } = reactData
+      const taskViewOpts = computeTaskViewOpts.value
+      const { tableStyle } = taskViewOpts
+      const taskBarOpts = computeTaskBarOpts.value
+      const { barStyle } = taskBarOpts
       const stys: VxeComponentStyleType = {}
       if (isZMax) {
         stys.zIndex = tZindex
@@ -197,13 +241,28 @@ export default defineVxeComponent({
           stys.maxHeight = maxHeight === 'auto' || maxHeight === '100%' ? '100%' : toCssUnit(maxHeight)
         }
       }
+      if (barStyle) {
+        const { bgColor, completedBgColor } = barStyle
+        if (bgColor) {
+          stys['--vxe-ui-gantt-view-task-bar-background-color'] = bgColor
+        }
+        if (completedBgColor) {
+          stys['--vxe-ui-gantt-view-task-bar-completed-background-color'] = completedBgColor
+        }
+      }
+      if (tableStyle) {
+        const { width: defTbWidth } = tableStyle
+        if (defTbWidth) {
+          stys['--vxe-ui-gantt-view-table-default-width'] = toCssUnit(defTbWidth)
+        }
+      }
       return stys
     })
 
     const computeTableExtendProps = computed(() => {
       const rest: Record<string, any> = {}
       tableComponentPropKeys.forEach((key) => {
-        rest[key] = props[key]
+        rest[key] = (props as any)[key]
       })
       return rest
     })
@@ -323,6 +382,7 @@ export default defineVxeComponent({
       computeTaskOpts,
       computeTaskViewOpts,
       computeTaskBarOpts,
+      computeTaskSplitOpts,
       computeTitleField,
       computeStartField,
       computeEndField,
@@ -1249,7 +1309,7 @@ export default defineVxeComponent({
           }
         }
         return null
-      }
+      },
       // setProxyInfo (options) {
       //   if (props.proxyConfig && options) {
       //     const { pager, form } = options
@@ -1267,7 +1327,14 @@ export default defineVxeComponent({
       //     }
       //   }
       //   return nextTick()
-      // }
+      // },
+      refreshTaskView () {
+        const $ganttView = refGanttView.value
+        if ($ganttView) {
+          return $ganttView.refreshData()
+        }
+        return nextTick()
+      }
     }
 
     const ganttPrivateMethods: GanttPrivateMethods = {
@@ -1328,6 +1395,18 @@ export default defineVxeComponent({
       triggerZoomEvent (evnt) {
         $xeGantt.zoom()
         $xeGantt.dispatchEvent('zoom', { type: reactData.isZMax ? 'max' : 'revert' }, evnt)
+      },
+      handleTaskCellClickEvent (evnt, params) {
+        $xeGantt.dispatchEvent('task-cell-click', params, evnt)
+      },
+      handleTaskCellDblclickEvent (evnt, params) {
+        $xeGantt.dispatchEvent('task-cell-dblclick', params, evnt)
+      },
+      handleTaskBarClickEvent (evnt, params) {
+        $xeGantt.dispatchEvent('task-bar-click', params, evnt)
+      },
+      handleTaskBarDblclickEvent (evnt, params) {
+        $xeGantt.dispatchEvent('task-bar-dblclick', params, evnt)
       }
     }
 
@@ -1625,37 +1704,52 @@ export default defineVxeComponent({
 
     const renderSplitBar = () => {
       const { showLeftView, showRightView } = reactData
+      const taskSplitOpts = computeTaskSplitOpts.value
+      const { enabled, resize, showCollapseTableButton, showCollapseTaskButton } = taskSplitOpts
+      if (!enabled) {
+        return renderEmptyElement($xeGantt)
+      }
+      const ons: {
+        onMousedown?: typeof dragSplitEvent
+      } = {}
+      if (resize) {
+        ons.onMousedown = dragSplitEvent
+      }
       return h('div', {
-        class: 'vxe-gantt--view-split-bar'
+        class: ['vxe-gantt--view-split-bar', {
+          'is--resize': resize,
+          ...ons
+        }]
       }, [
         h('div', {
-          class: 'vxe-gantt--view-split-bar-handle',
-          onMousedown: dragSplitEvent
+          class: 'vxe-gantt--view-split-bar-handle'
         }),
-        h('div', {
-          class: 'vxe-gantt--view-split-bar-btn-wrapper'
-        }, [
-          showRightView
-            ? h('div', {
-              class: 'vxe-gantt--view-split-bar-left-btn',
-              onClick: handleSplitLeftViewEvent
-            }, [
-              h('i', {
-                class: showLeftView ? getIcon().GANTT_VIEW_LEFT_OPEN : getIcon().GANTT_VIEW_LEFT_CLOSE
-              })
-            ])
-            : renderEmptyElement($xeGantt),
-          showLeftView
-            ? h('div', {
-              class: 'vxe-gantt--view-split-bar-right-btn',
-              onClick: handleSplitRightViewEvent
-            }, [
-              h('i', {
-                class: showRightView ? getIcon().GANTT_VIEW_RIGHT_OPEN : getIcon().GANTT_VIEW_RIGHT_CLOSE
-              })
-            ])
-            : renderEmptyElement($xeGantt)
-        ])
+        showCollapseTableButton || showCollapseTaskButton
+          ? h('div', {
+            class: 'vxe-gantt--view-split-bar-btn-wrapper'
+          }, [
+            showCollapseTableButton && showRightView
+              ? h('div', {
+                class: 'vxe-gantt--view-split-bar-left-btn',
+                onClick: handleSplitLeftViewEvent
+              }, [
+                h('i', {
+                  class: showLeftView ? getIcon().GANTT_VIEW_LEFT_OPEN : getIcon().GANTT_VIEW_LEFT_CLOSE
+                })
+              ])
+              : renderEmptyElement($xeGantt),
+            showCollapseTaskButton && showLeftView
+              ? h('div', {
+                class: 'vxe-gantt--view-split-bar-right-btn',
+                onClick: handleSplitRightViewEvent
+              }, [
+                h('i', {
+                  class: showRightView ? getIcon().GANTT_VIEW_RIGHT_OPEN : getIcon().GANTT_VIEW_RIGHT_CLOSE
+                })
+              ])
+              : renderEmptyElement($xeGantt)
+          ])
+          : renderEmptyElement($xeGantt)
       ])
     }
 

package/packages/gantt/src/util.ts

@@ -10,6 +10,13 @@ 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/packages/index.ts

@@ -1,4 +1,4 @@
-import * as VxeUIExport from './components'
+import * as VxeUIGanttExport from './components'
 
 export * from './components'
-export default VxeUIExport
+export default VxeUIGanttExport

package/packages/ui/index.ts

@@ -1,4 +1,6 @@
-import { VxeUI, setConfig, setIcon } from '@vxe-ui/core'
+import { VxeUI } from '@vxe-ui/core'
+
+const { setConfig, setIcon } = VxeUI
 
 VxeUI.ganttVersion = process.env.VUE_APP_VXE_VERSION as string
 
@@ -39,6 +41,12 @@ setConfig({
       // afterDelete: null,
       // beforeSave: null,
       // afterSave: null
+    },
+    taskSplitConfig: {
+      enabled: true,
+      resize: true,
+      showCollapseTableButton: true,
+      showCollapseTaskButton: true
     }
   }
 })
@@ -51,8 +59,6 @@ setIcon({
   GANTT_VIEW_LEFT_CLOSE: iconPrefix + 'arrow-right',
   GANTT_VIEW_RIGHT_OPEN: iconPrefix + 'arrow-right',
   GANTT_VIEW_RIGHT_CLOSE: iconPrefix + 'arrow-left'
-
 })
 
-export * from '@vxe-ui/core'
 export default VxeUI

package/packages/ui/src/log.ts

@@ -1,4 +1,6 @@
-import { log } from '@vxe-ui/core'
+import { VxeUI } from '@vxe-ui/core'
+
+const { log } = VxeUI
 
 const version = `gantt v${process.env.VUE_APP_VXE_VERSION}`
 

package/packages/ui/src/utils.ts

@@ -48,3 +48,7 @@ export function formatText (value: any, placeholder?: any) {
 export function eqEmptyValue (cellValue: any) {
   return cellValue === '' || XEUtils.eqNull(cellValue)
 }
+
+export function getStringValue (cellValue: any) {
+  return eqEmptyValue(cellValue) ? '' : cellValue
+}

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

@@ -6,19 +6,31 @@
 }
 .vxe-gantt-view--chart-row {
   position: relative;
+  &.is--round {
+    & > .vxe-gantt-view--chart-bar {
+      border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
+      &:hover {
+        &::after {
+          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);
+      }
+    }
+  }
 }
 .vxe-gantt-view--chart-bar {
   display: flex;
   flex-direction: row;
+  align-items: center;
   position: absolute;
-  width: 0;
   top: 50%;
   left: 0;
   color: #ffffff;
   transform: translateY(-50%);
-  border-radius: var(--vxe-ui-base-border-radius);
   height: var(--vxe-ui-gantt-view-chart-bar-height);
-  background-color: var(--vxe-ui-font-primary-lighten-color);
+  background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
   pointer-events: all;
   &:hover {
     &::after {
@@ -29,18 +41,25 @@
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.1);
-      border-radius: var(--vxe-ui-base-border-radius);
     }
   }
 }
 .vxe-gantt-view--chart-progress {
   flex-shrink: 0;
-  width: 40px;
+  width: 0;
+  height: 100%;
   text-align: left;
-  border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);
-  background-color: var(--vxe-ui-font-primary-color);
+  background-color: var(--vxe-ui-gantt-view-task-bar-completed-background-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .vxe-gantt-view--chart-content {
-  flex-grow: 1;
-  text-align: right;
+  position: absolute;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.9em;
+  padding: 0 0.6em;
 }