vxe-gantt 0.0.2 → 0.0.3

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

@@ -0,0 +1,119 @@
+import { h, inject, VNode, ref, Ref, onMounted, onUnmounted } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import { getCellRestHeight } from './util'
+import GanttViewChartComponent from './gantt-chart'
+
+import type { VxeTablePropTypes } from 'vxe-table'
+import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeGanttViewBody',
+  setup () {
+    const $xeGantt = inject('$xeGantt', {} as (VxeGanttConstructor & VxeGanttPrivateMethods))
+    const $xeGanttView = inject('$xeGanttView', {} as VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
+
+    const { reactData, internalData } = $xeGanttView
+    const { refTable } = $xeGantt.getRefMaps()
+
+    const refElem = ref() as Ref<HTMLDivElement>
+    const refBodyScroll = ref() as Ref<HTMLDivElement>
+    const refBodyTable = ref() as Ref<HTMLTableElement>
+    const refBodyXSpace = ref() as Ref<HTMLDivElement>
+    const refBodyYSpace = ref() as Ref<HTMLDivElement>
+
+    const renderRows = () => {
+      const $xeTable = refTable.value
+
+      const fullAllDataRowIdData = $xeTable ? $xeTable.internalData.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
+      }
+
+      const { tableData, tableColumn } = reactData
+
+      const trVNs:VNode[] = []
+      tableData.forEach((row, rIndex) => {
+        const rowid = $xeTable ? $xeTable.getRowid(row) : ''
+        const rowRest = fullAllDataRowIdData[rowid] || {}
+        const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight)
+        trVNs.push(
+          h('tr', {
+            key: rIndex
+          }, tableColumn.map((column, cIndex) => {
+            return h('td', {
+              key: cIndex,
+              class: 'vxe-gantt-view--body-column',
+              style: {
+                height: `${cellHeight}px`
+              }
+            })
+          }))
+        )
+      })
+      return trVNs
+    }
+
+    const renderVN = () => {
+      const { tableColumn } = reactData
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-gantt-view--body-wrapper'
+      }, [
+        h('div', {
+          ref: refBodyScroll,
+          class: 'vxe-gantt-view--body-inner-wrapper',
+          onScroll: $xeGanttView.triggerBodyScrollEvent
+        }, [
+          h('div', {
+            ref: refBodyXSpace,
+            class: 'vxe-body--x-space'
+          }),
+          h('div', {
+            ref: refBodyYSpace,
+            class: 'vxe-body--y-space'
+          }),
+          h('table', {
+            ref: refBodyTable,
+            class: 'vxe-gantt-view--body-table'
+          }, [
+            h('colgroup', {}, tableColumn.map((column, cIndex) => {
+              return h('col', {
+                key: cIndex
+              })
+            })),
+            h('tbody', {}, renderRows())
+          ]),
+          h(GanttViewChartComponent)
+        ])
+      ])
+    }
+
+    onMounted(() => {
+      const { elemStore } = internalData
+      const prefix = 'main-body-'
+      elemStore[`${prefix}wrapper`] = refElem
+      elemStore[`${prefix}scroll`] = refBodyScroll
+      elemStore[`${prefix}table`] = refBodyTable
+      elemStore[`${prefix}xSpace`] = refBodyXSpace
+      elemStore[`${prefix}ySpace`] = refBodyYSpace
+    })
+
+    onUnmounted(() => {
+      const { elemStore } = internalData
+      const prefix = 'main-body-'
+      elemStore[`${prefix}wrapper`] = null
+      elemStore[`${prefix}scroll`] = null
+      elemStore[`${prefix}table`] = null
+      elemStore[`${prefix}xSpace`] = null
+      elemStore[`${prefix}ySpace`] = null
+    })
+
+    return renderVN
+  }
+})

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

@@ -0,0 +1,92 @@
+import { h, inject, VNode, ref, Ref, onMounted, onUnmounted } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getCellRestHeight } from './util'
+
+import type { VxeTablePropTypes } from 'vxe-table'
+import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
+
+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
+
+      const fullAllDataRowIdData = $xeTable ? $xeTable.internalData.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
+      }
+
+      const { tableData } = reactData
+      const progressField = computeProgressField.value
+
+      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)
+        trVNs.push(
+          h('div', {
+            key: rIndex,
+            rowid,
+            class: 'vxe-gantt-view--chart-row',
+            style: {
+              height: `${cellHeight}px`
+            }
+          }, [
+            h('div', {
+              class: 'vxe-gantt-view--chart-bar',
+              rowid
+            }, [
+              h('div', {
+                class: 'vxe-gantt-view--chart-progress',
+                style: progressValue
+                  ? {
+                      width: `${progressValue}%`
+                    }
+                  : undefined
+              }),
+              h('div', {
+                class: 'vxe-gantt-view--chart-content'
+              })
+            ])
+          ])
+        )
+      })
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-gantt-view--chart-wrapper'
+      }, trVNs)
+    }
+
+    onMounted(() => {
+      const { elemStore } = internalData
+      const prefix = 'main-chart-'
+      elemStore[`${prefix}wrapper`] = refElem
+    })
+
+    onUnmounted(() => {
+      const { elemStore } = internalData
+      const prefix = 'main-chart-'
+      elemStore[`${prefix}wrapper`] = null
+    })
+
+    return renderVN
+  }
+})

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

@@ -0,0 +1,79 @@
+import { h, inject, ref, Ref, onMounted, onUnmounted } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+
+import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods } 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>
+
+    const renderVN = () => {
+      const { tableColumn, headerGroups } = reactData
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-gantt-view--header-wrapper'
+      }, [
+        h('div', {
+          ref: refHeaderScroll,
+          class: 'vxe-gantt-view--header-inner-wrapper',
+          onScroll: $xeGanttView.triggerHeaderScrollEvent
+        }, [
+          h('div', {
+            ref: refHeaderXSpace,
+            class: 'vxe-body--x-space'
+          }),
+          h('table', {
+            ref: refHeaderTable,
+            class: 'vxe-gantt-view--header-table'
+          }, [
+            h('colgroup', {}, tableColumn.map((column, cIndex) => {
+              return h('col', {
+                key: cIndex
+              })
+            })),
+            h('thead', {}, headerGroups.map((cols, rIndex) => {
+              return h('tr', {
+                key: rIndex
+              }, cols.map((column, cIndex) => {
+                return h('th', {
+                  key: cIndex,
+                  class: 'vxe-gantt-view--header-column',
+                  colspan: column.children ? column.children.length : null,
+                  title: `${column.field}`
+                }, column.title)
+              }))
+            }))
+          ])
+        ])
+      ])
+    }
+
+    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
+    })
+
+    return renderVN
+  }
+})