vxe-gantt 0.0.3 → 3.0.0-beta.1

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

@@ -1,92 +1,143 @@
-import { h, inject, VNode, ref, Ref, onMounted, onUnmounted } from 'vue'
+import { VNode, CreateElement } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
+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
+
 export default defineVxeComponent({
   name: 'VxeGanttViewChart',
-  setup () {
-    const $xeGantt = inject('$xeGantt', {} as (VxeGanttConstructor & VxeGanttPrivateMethods))
-    const $xeGanttView = inject('$xeGanttView', {} as VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
-
-    const { reactData, internalData } = $xeGanttView
-    const { refTable } = $xeGantt.getRefMaps()
-    const { computeProgressField } = $xeGantt.getComputeMaps()
-
-    const refElem = ref() as Ref<HTMLDivElement>
-
-    const renderVN = () => {
-      const $xeTable = refTable.value
+  inject: {
+    $xeGantt: {
+      default: null
+    },
+    $xeGanttView: {
+      default: null
+    }
+  },
+  props: {},
+  data () {
+    return {}
+  },
+  computed: {
+    ...({} as {
+      $xeGantt(): (VxeGanttConstructor & VxeGanttPrivateMethods)
+      $xeGanttView(): (VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
+    })
+  },
+  methods: {
+    //
+    // Render
+    //
+    renderVN (h: CreateElement) {
+      const _vm = this
+      const $xeGantt = _vm.$xeGantt
+      const $xeGanttView = _vm.$xeGanttView
+      const $xeTable = $xeGanttView.internalData.xeTable
 
-      const fullAllDataRowIdData = $xeTable ? $xeTable.internalData.fullAllDataRowIdData : {}
+      const tableInternalData = ($xeTable ? $xeTable as unknown : {}) as TableInternalData
+      const fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData || {}
       let cellOpts: VxeTablePropTypes.CellConfig = {}
       let rowOpts : VxeTablePropTypes.RowConfig = {}
       let defaultRowHeight = 0
       if ($xeTable) {
-        const { computeCellOpts, computeRowOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
-        cellOpts = computeCellOpts.value
-        rowOpts = computeRowOpts.value
-        defaultRowHeight = computeDefaultRowHeight.value
+        cellOpts = $xeTable.computeCellOpts
+        rowOpts = $xeTable.computeRowOpts
+        defaultRowHeight = $xeTable.computeDefaultRowHeight
       }
 
+      const { reactData } = $xeGanttView
       const { tableData } = reactData
-      const progressField = computeProgressField.value
+      const titleField = $xeGantt.computeTitleField
+      const progressField = $xeGantt.computeProgressField
+      const taskBarOpts = $xeGantt.computeTaskBarOpts
+      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 = XEUtils.get(row, progressField)
+        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',
+            attrs: {
+              rowid
+            },
+            class: ['vxe-gantt-view--chart-row', {
+              'is--round': round
+            }],
             style: {
               height: `${cellHeight}px`
             }
           }, [
             h('div', {
               class: 'vxe-gantt-view--chart-bar',
-              rowid
+              attrs: {
+                rowid
+              },
+              on: {
+                click (evnt: MouseEvent) {
+                  $xeGantt.handleTaskBarClickEvent(evnt, { row })
+                },
+                dblclick (evnt: MouseEvent) {
+                  $xeGantt.handleTaskBarDblclickEvent(evnt, { row })
+                }
+              }
             }, [
-              h('div', {
-                class: 'vxe-gantt-view--chart-progress',
-                style: progressValue
-                  ? {
-                      width: `${progressValue}%`
-                    }
-                  : undefined
-              }),
-              h('div', {
-                class: 'vxe-gantt-view--chart-content'
-              })
+              showProgress
+                ? h('div', {
+                  class: 'vxe-gantt-view--chart-progress',
+                  style: {
+                    width: `${progressValue || 0}%`
+                  }
+                })
+                : renderEmptyElement($xeGantt),
+              showContent
+                ? h('div', {
+                  class: 'vxe-gantt-view--chart-content'
+                }, title)
+                : renderEmptyElement($xeGantt)
             ])
           ])
         )
       })
       return h('div', {
-        ref: refElem,
+        ref: 'refElem',
         class: 'vxe-gantt-view--chart-wrapper'
       }, trVNs)
     }
+  },
+  mounted () {
+    const _vm = this
+    const $xeGanttView = _vm.$xeGanttView
+    const { internalData } = $xeGanttView
 
-    onMounted(() => {
-      const { elemStore } = internalData
-      const prefix = 'main-chart-'
-      elemStore[`${prefix}wrapper`] = refElem
-    })
-
-    onUnmounted(() => {
-      const { elemStore } = internalData
-      const prefix = 'main-chart-'
-      elemStore[`${prefix}wrapper`] = null
-    })
+    const { elemStore } = internalData
+    const prefix = 'main-chart-'
+    elemStore[`${prefix}wrapper`] = _vm.$refs.refElem as HTMLDivElement
+  },
+  destroyed () {
+    const _vm = this
+    const $xeGanttView = _vm.$xeGanttView
+    const { internalData } = $xeGanttView
 
-    return renderVN
+    const { elemStore } = internalData
+    const prefix = 'main-chart-'
+    elemStore[`${prefix}wrapper`] = null
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
   }
 })

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

@@ -1,42 +1,63 @@
-import { h, inject, ref, Ref, onMounted, onUnmounted } from 'vue'
+import { CreateElement } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 
-import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods } from '../../../types'
+import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
 
 export default defineVxeComponent({
   name: 'VxeGanttView',
-  setup () {
-    const $xeGanttView = inject('$xeGanttView', {} as VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
-
-    const { reactData, internalData } = $xeGanttView
-
-    const refElem = ref() as Ref<HTMLDivElement>
-    const refHeaderScroll = ref() as Ref<HTMLDivElement>
-    const refHeaderTable = ref() as Ref<HTMLTableElement>
-    const refHeaderXSpace = ref() as Ref<HTMLDivElement>
+  inject: {
+    $xeGantt: {
+      default: null
+    },
+    $xeGanttView: {
+      default: null
+    }
+  },
+  props: {},
+  data () {
+    return {}
+  },
+  computed: {
+    ...({} as {
+        $xeGantt(): (VxeGanttConstructor & VxeGanttPrivateMethods)
+        $xeGanttView(): (VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
+      })
+  },
+  methods: {
+    //
+    // Render
+    //
+    renderVN (h: CreateElement) {
+      const _vm = this
+      const $xeGanttView = _vm.$xeGanttView
+      const { reactData } = $xeGanttView
 
-    const renderVN = () => {
-      const { tableColumn, headerGroups } = reactData
+      const { tableColumn, headerGroups, viewCellWidth } = reactData
       return h('div', {
-        ref: refElem,
+        ref: 'refElem',
         class: 'vxe-gantt-view--header-wrapper'
       }, [
         h('div', {
-          ref: refHeaderScroll,
+          ref: 'refHeaderScroll',
           class: 'vxe-gantt-view--header-inner-wrapper',
-          onScroll: $xeGanttView.triggerHeaderScrollEvent
+          on: {
+            scroll: $xeGanttView.triggerHeaderScrollEvent
+          }
         }, [
           h('div', {
-            ref: refHeaderXSpace,
+            ref: 'refHeaderXSpace',
             class: 'vxe-body--x-space'
           }),
           h('table', {
-            ref: refHeaderTable,
+            ref: 'refHeaderTable',
             class: 'vxe-gantt-view--header-table'
           }, [
             h('colgroup', {}, tableColumn.map((column, cIndex) => {
               return h('col', {
-                key: cIndex
+                key: cIndex,
+                style: {
+                  width: `${viewCellWidth}px`
+                }
               })
             })),
             h('thead', {}, headerGroups.map((cols, rIndex) => {
@@ -46,8 +67,10 @@ export default defineVxeComponent({
                 return h('th', {
                   key: cIndex,
                   class: 'vxe-gantt-view--header-column',
-                  colspan: column.children ? column.children.length : null,
-                  title: `${column.field}`
+                  attrs: {
+                    colspan: column.children ? column.children.length : null,
+                    title: `${column.field}`
+                  }
                 }, column.title)
               }))
             }))
@@ -55,25 +78,32 @@ export default defineVxeComponent({
         ])
       ])
     }
+  },
+  mounted () {
+    const _vm = this
+    const $xeGanttView = _vm.$xeGanttView
+    const { internalData } = $xeGanttView
 
-    onMounted(() => {
-      const { elemStore } = internalData
-      const prefix = 'main-header-'
-      elemStore[`${prefix}wrapper`] = refElem
-      elemStore[`${prefix}scroll`] = refHeaderScroll
-      elemStore[`${prefix}table`] = refHeaderTable
-      elemStore[`${prefix}xSpace`] = refHeaderXSpace
-    })
-
-    onUnmounted(() => {
-      const { elemStore } = internalData
-      const prefix = 'main-header-'
-      elemStore[`${prefix}wrapper`] = null
-      elemStore[`${prefix}scroll`] = null
-      elemStore[`${prefix}table`] = null
-      elemStore[`${prefix}xSpace`] = null
-    })
+    const { elemStore } = internalData
+    const prefix = 'main-header-'
+    elemStore[`${prefix}wrapper`] = _vm.$refs.refElem as HTMLDivElement
+    elemStore[`${prefix}scroll`] = _vm.$refs.refHeaderScroll as HTMLDivElement
+    elemStore[`${prefix}table`] = _vm.$refs.refHeaderTable as HTMLDivElement
+    elemStore[`${prefix}xSpace`] = _vm.$refs.refHeaderXSpace as HTMLDivElement
+  },
+  destroyed () {
+    const _vm = this
+    const $xeGanttView = _vm.$xeGanttView
+    const { internalData } = $xeGanttView
 
-    return renderVN
+    const { elemStore } = internalData
+    const prefix = 'main-header-'
+    elemStore[`${prefix}wrapper`] = null
+    elemStore[`${prefix}scroll`] = null
+    elemStore[`${prefix}table`] = null
+    elemStore[`${prefix}xSpace`] = null
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
   }
 })