Skip to content

Commit 83b4503

Browse files
xuliangzhanxuliangzhan
committed
releases 4.2.0
1 parent 726ffdb commit 83b4503

File tree

3 files changed

+137
-105
lines changed

3 files changed

+137
-105
lines changed

‎examples/views/gantt/GanttTest8.vue‎

Lines changed: 76 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<template>
22
<div>
3-
<vxe-gantt ref="ganttRef" v-bind="ganttOptions" v-on="ganttEvents"></vxe-gantt>
3+
<vxe-select v-model="rowSize" :options="dataOptions" @change="changeRowSizeEvent"></vxe-select>
4+
5+
<vxe-gantt v-bind="ganttOptions"></vxe-gantt>
46
</div>
57
</template>
68

79
<script lang="ts" setup>
810
import { ref, reactive } from 'vue'
9-
import { VxeUI } from 'vxe-pc-ui'
10-
import type { VxeGanttInstance, VxeGanttProps, VxeGanttListeners } from '../../../types'
11+
import { VxeGanttProps } from '../../../types'
1112
1213
interface RowVO {
1314
id: number
@@ -17,73 +18,98 @@ interface RowVO {
1718
progress: number
1819
}
1920
20-
const ganttRef = ref<VxeGanttInstance<RowVO>>()
21+
const rowSize = ref(500)
22+
23+
const dataOptions = ref([
24+
{ label: '加载 3 行', value: 3 },
25+
{ label: '加载 20 行', value: 20 },
26+
{ label: '加载 100 行', value: 100 },
27+
{ label: '加载 500 行', value: 500 },
28+
{ label: '加载 1000 行', value: 1000 },
29+
{ label: '加载 5000 行', value: 5000 },
30+
{ label: '加载 10000 行', value: 10000 },
31+
{ label: '加载 50000 行', value: 50000 },
32+
{ label: '加载 100000 行', value: 100000 }
33+
])
2134
2235
const ganttOptions = reactive<VxeGanttProps<RowVO>>({
2336
border: true,
24-
showFooter: true,
37+
loading: false,
38+
showOverflow: true,
39+
showHeaderOverflow: true,
40+
showFooterOverflow: true,
41+
height: 600,
2542
rowConfig: {
26-
keyField: 'id',
27-
isCurrent: true
28-
},
29-
columnConfig: {
30-
resizable: true
43+
keyField: 'id' // 行主键
3144
},
3245
taskBarConfig: {
33-
showProgress: true,
34-
showContent: true
46+
showProgress: true, // 是否显示进度条
47+
showContent: true, // 是否在任务条显示内容
48+
moveable: true, // 是否允许拖拽任务移动日期
49+
resizable: true, // 是否允许拖拽任务调整日期
50+
barStyle: {
51+
round: true, // 圆角
52+
bgColor: '#fca60b', // 任务条的背景颜色
53+
completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
54+
}
3555
},
3656
taskViewConfig: {
37-
scales: ['year', 'quarter', 'month', 'date'],
3857
tableStyle: {
39-
width: 480
58+
width: 480 // 表格宽度
4059
}
4160
},
42-
taskViewScaleConfig: {
43-
// scaleUnit: 'week'
61+
virtualYConfig: {
62+
gt: 0,
63+
enabled: true
4464
},
4565
columns: [
46-
{ type: 'seq' },
66+
{ type: 'seq', width: 70 },
4767
{ field: 'title', title: '任务名称' },
4868
{ field: 'start', title: '开始时间', width: 100 },
49-
{ field: 'end', title: '结束时间', width: 100 }
69+
{ field: 'end', title: '结束时间', width: 100 },
70+
{ field: 'progress', title: '进度(%)', width: 80 }
5071
],
5172
data: [
52-
{ id: 10001, title: 'A项目', start: '2024-03-01', end: '2024-03-04', progress: 3 },
53-
{ id: 10002, title: '城市道路修理进度', start: '2024-03-03', end: '2024-03-08', progress: 10 },
54-
{ id: 10003, title: 'B大工程', start: '2024-03-03', end: '2024-03-11', progress: 90 },
55-
{ id: 10004, title: '超级大工程', start: '2024-02-26 07:30:00', end: '2024-02-28 09:00:00', progress: 15 },
56-
{ id: 10005, title: '地球净化项目', start: '2024-03-01', end: '2024-03-05', progress: 100 },
57-
{ id: 10006, title: '一个小目标项目', start: '2024-03-04', end: '2024-03-08', progress: 5 },
58-
{ id: 10007, title: '某某计划7', start: '2024-03-05', end: '2024-03-09', progress: 70 },
59-
{ id: 10008, title: '某某科技项目8', start: '2024-03-01', end: '2024-03-03', progress: 50 },
60-
{ id: 10009, title: '地铁建设工程9', start: '2024-03-02', end: '2024-03-04', progress: 5 },
61-
{ id: 10010, title: '铁路修建计划10', start: '2024-03-01', end: '2024-03-03', progress: 10 },
62-
{ id: 10011, title: '铁路修建计划11', start: '2024-03-04', end: '2024-03-08', progress: 10 },
63-
{ id: 10012, title: '铁路修建计划12', start: '2024-03-02', end: '2024-03-04', progress: 10 },
64-
{ id: 10013, title: '铁路修建计划13', start: '2024-03-08', end: '2024-03-12', progress: 10 },
65-
{ id: 10014, title: '铁路修建计划14', start: '2024-03-11', end: '2024-03-19', progress: 10 },
66-
{ id: 10015, title: '铁路修建计划15', start: '2024-03-01', end: '2024-03-03', progress: 10 },
67-
{ id: 10016, title: '铁路修建计划16', start: '2024-03-01', end: '2024-03-03', progress: 10 },
68-
{ id: 10017, title: '铁路修建计划17', start: '2024-03-01', end: '2024-03-03', progress: 10 },
69-
{ id: 10018, title: '铁路修建计划18', start: '2024-03-01', end: '2024-03-03', progress: 10 },
70-
{ id: 10019, title: '铁路修建计划19', start: '2024-03-01', end: '2024-03-03', progress: 10 }
71-
],
72-
footerData: [
73-
{ title: '合计', start: 111, end: 222 }
73+
{ id: 10001, title: '任务1', start: '2024-03-01', end: '2024-03-04', progress: 3 },
74+
{ id: 10002, title: '任务2', start: '2024-03-03', end: '2024-03-08', progress: 10 },
75+
{ id: 10003, title: '任务3', start: '2024-03-03', end: '2024-03-11', progress: 90 },
76+
{ id: 10004, title: '任务4', start: '2024-03-05', end: '2024-03-11', progress: 15 },
77+
{ id: 10005, title: '任务5', start: '2024-03-08', end: '2024-03-15', progress: 100 },
78+
{ id: 10006, title: '任务6', start: '2024-03-10', end: '2024-03-21', progress: 5 },
79+
{ id: 10007, title: '任务7', start: '2024-03-15', end: '2024-03-24', progress: 70 },
80+
{ id: 10008, title: '任务8', start: '2024-03-05', end: '2024-03-15', progress: 50 },
81+
{ id: 10009, title: '任务9', start: '2024-03-19', end: '2024-03-20', progress: 5 },
82+
{ id: 10010, title: '任务10', start: '2024-03-12', end: '2024-03-20', progress: 10 },
83+
{ id: 10011, title: '任务11', start: '2024-03-01', end: '2024-03-08', progress: 90 },
84+
{ id: 10012, title: '任务12', start: '2024-03-03', end: '2024-03-06', progress: 60 },
85+
{ id: 10013, title: '任务13', start: '2024-03-02', end: '2024-03-05', progress: 50 },
86+
{ id: 10014, title: '任务14', start: '2024-03-04', end: '2024-03-15', progress: 0 },
87+
{ id: 10015, title: '任务15', start: '2024-03-01', end: '2024-03-05', progress: 30 }
7488
]
7589
})
7690
77-
const ganttEvents: VxeGanttListeners<RowVO> = {
78-
cellMenu ({ row }) {
79-
const $gantt = ganttRef.value
80-
if ($gantt) {
81-
$gantt.setCurrentRow(row)
91+
// 模拟行数据
92+
const loadList = (size = 200) => {
93+
ganttOptions.loading = true
94+
setTimeout(() => {
95+
const dataList: RowVO[] = []
96+
for (let i = 0; i < size; i++) {
97+
dataList.push({
98+
id: 10000 + i,
99+
title: `任务${i + 1}`,
100+
start: i % 3 ? '2024-03-03' : i % 2 ? '2024-03-10' : '2024-03-22',
101+
end: i % 3 ? '2024-03-11' : i % 2 ? '2024-03-19' : '2024-04-04',
102+
progress: i % 2 ? 50 : 30
103+
})
82104
}
83-
},
84-
menuClick (e) {
85-
console.log(e)
86-
VxeUI.modal.message({ content: `点击了 ${e.menu.code}`, status: 'success' })
87-
}
105+
ganttOptions.data = dataList
106+
ganttOptions.loading = false
107+
}, 150)
108+
}
109+
110+
const changeRowSizeEvent = () => {
111+
loadList(rowSize.value)
88112
}
113+
114+
loadList(rowSize.value)
89115
</script>

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vxe-gantt",
3-
"version": "4.1.20",
3+
"version": "4.2.0",
44
"description": "A vue based gantt component",
55
"scripts": {
66
"update": "npm install --legacy-peer-deps",
@@ -59,8 +59,8 @@
5959
"typescript": "~4.9.5",
6060
"vue": "3.4.27",
6161
"vue-router": "~4.5.1",
62-
"vxe-pc-ui": "^4.11.24",
63-
"vxe-table": "^4.17.36"
62+
"vxe-pc-ui": "^4.11.25",
63+
"vxe-table": "^4.17.37"
6464
},
6565
"vetur": {
6666
"tags": "helper/vetur/tags.json",

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

Lines changed: 58 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { h, ref, reactive, nextTick, inject, watch, provide, computed, onMounted, onUnmounted } from 'vue'
1+
import { h, ref, reactive, nextTick, inject, onBeforeUnmount, provide, computed, onMounted, onUnmounted } from 'vue'
22
import { defineVxeComponent } from '../../ui/src/comp'
33
import { setScrollTop, setScrollLeft, removeClass, addClass, hasClass } from '../../ui/src/dom'
44
import { VxeUI } from '@vxe-ui/core'
@@ -41,6 +41,43 @@ function createInternalData (): GanttViewInternalData {
4141
}
4242
}
4343

44+
function createReactData (): GanttViewReactData {
45+
return {
46+
// 是否启用了横向 X 可视渲染方式加载
47+
scrollXLoad: false,
48+
// 是否启用了纵向 Y 可视渲染方式加载
49+
scrollYLoad: false,
50+
// 是否存在纵向滚动条
51+
overflowY: true,
52+
// 是否存在横向滚动条
53+
overflowX: true,
54+
// 纵向滚动条的宽度
55+
scrollbarWidth: 0,
56+
// 横向滚动条的高度
57+
scrollbarHeight: 0,
58+
59+
// 最后滚动时间戳
60+
lastScrollTime: 0,
61+
lazScrollLoading: false,
62+
63+
scrollVMLoading: false,
64+
scrollYHeight: 0,
65+
scrollYTop: 0,
66+
isScrollYBig: false,
67+
scrollXLeft: 0,
68+
scrollXWidth: 0,
69+
isScrollXBig: false,
70+
71+
minViewDate: null,
72+
maxViewDate: null,
73+
tableData: [],
74+
tableColumn: [],
75+
headerGroups: [],
76+
77+
viewCellWidth: 40
78+
}
79+
}
80+
4481
const maxYHeight = 5e6
4582
// const maxXWidth = 5e6
4683

@@ -71,40 +108,7 @@ export default defineVxeComponent({
71108

72109
const refColInfoElem = ref<HTMLDivElement>()
73110

74-
const reactData = reactive<GanttViewReactData>({
75-
// 是否启用了横向 X 可视渲染方式加载
76-
scrollXLoad: false,
77-
// 是否启用了纵向 Y 可视渲染方式加载
78-
scrollYLoad: false,
79-
// 是否存在纵向滚动条
80-
overflowY: true,
81-
// 是否存在横向滚动条
82-
overflowX: true,
83-
// 纵向滚动条的宽度
84-
scrollbarWidth: 0,
85-
// 横向滚动条的高度
86-
scrollbarHeight: 0,
87-
88-
// 最后滚动时间戳
89-
lastScrollTime: 0,
90-
lazScrollLoading: false,
91-
92-
scrollVMLoading: false,
93-
scrollYHeight: 0,
94-
scrollYTop: 0,
95-
isScrollYBig: false,
96-
scrollXLeft: 0,
97-
scrollXWidth: 0,
98-
isScrollXBig: false,
99-
100-
minViewDate: null,
101-
maxViewDate: null,
102-
tableData: [],
103-
tableColumn: [],
104-
headerGroups: [],
105-
106-
viewCellWidth: 40
107-
})
111+
const reactData = reactive(createReactData())
108112

109113
const internalData = createInternalData()
110114

@@ -1102,30 +1106,35 @@ export default defineVxeComponent({
11021106
// footerTableElem.style.transform = `translate(${xSpaceLeft}px, 0px)`
11031107
// }
11041108

1109+
const ySpaceWidth = scrollXWidth
1110+
11051111
const layoutList = ['header', 'body', 'footer']
11061112
layoutList.forEach(layout => {
11071113
const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`])
11081114
if (xSpaceElem) {
1109-
xSpaceElem.style.width = scrollXLoad ? `${scrollXWidth}px` : ''
1115+
xSpaceElem.style.width = scrollXLoad ? `${ySpaceWidth}px` : ''
11101116
}
11111117
})
11121118

11131119
const scrollXSpaceEl = refScrollXSpaceElem.value
11141120
if (scrollXSpaceEl) {
1115-
scrollXSpaceEl.style.width = `${scrollXWidth}px`
1121+
scrollXSpaceEl.style.width = `${ySpaceWidth}px`
11161122
}
11171123

11181124
const beforeWrapper = getRefElem(elemStore['main-chart-before-wrapper'])
11191125
const beforeSvgElem = beforeWrapper ? beforeWrapper.firstElementChild as HTMLDivElement : null
11201126
if (beforeSvgElem) {
1121-
beforeSvgElem.style.width = `${scrollXWidth}px`
1127+
beforeSvgElem.style.width = `${ySpaceWidth}px`
11221128
}
11231129
const afterWrapper = getRefElem(elemStore['main-chart-after-wrapper'])
11241130
const afterSvgElem = afterWrapper ? afterWrapper.firstElementChild as HTMLDivElement : null
11251131
if (afterSvgElem) {
1126-
afterSvgElem.style.width = `${scrollXWidth}px`
1132+
afterSvgElem.style.width = `${ySpaceWidth}px`
11271133
}
11281134

1135+
reactData.scrollXLeft = xSpaceLeft
1136+
reactData.scrollXWidth = ySpaceWidth
1137+
11291138
calcScrollbar()
11301139
return nextTick()
11311140
}
@@ -1172,7 +1181,7 @@ export default defineVxeComponent({
11721181
bodyTableElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`
11731182
}
11741183
if (bodyChartWrapperElem) {
1175-
bodyChartWrapperElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`
1184+
bodyChartWrapperElem.style.transform = `translateY(${scrollYTop}px)`
11761185
}
11771186

11781187
const bodyYSpaceElem = getRefElem(elemStore['main-body-ySpace'])
@@ -1334,12 +1343,16 @@ export default defineVxeComponent({
13341343
}
13351344
})
13361345
},
1337-
updateViewData () {
1346+
updateViewData (force?: boolean) {
13381347
const $xeTable = internalData.xeTable
13391348
if ($xeTable) {
13401349
const tableReactData = $xeTable.reactData
13411350
const { tableData } = tableReactData
13421351
reactData.tableData = tableData
1352+
if (force) {
1353+
handleUpdateData()
1354+
}
1355+
handleRecalculateStyle()
13431356
}
13441357
return nextTick()
13451358
},
@@ -1655,21 +1668,14 @@ export default defineVxeComponent({
16551668
])
16561669
}
16571670

1658-
const tdFlag = ref(0)
1659-
watch(() => reactData.tableData, () => {
1660-
tdFlag.value++
1661-
})
1662-
watch(() => reactData.tableData.length, () => {
1663-
tdFlag.value++
1664-
})
1665-
watch(tdFlag, () => {
1666-
handleUpdateData()
1667-
})
1668-
16691671
onMounted(() => {
16701672
globalEvents.on($xeGanttView, 'resize', handleGlobalResizeEvent)
16711673
})
16721674

1675+
onBeforeUnmount(() => {
1676+
XEUtils.assign(reactData, createReactData())
1677+
})
1678+
16731679
onUnmounted(() => {
16741680
globalEvents.off($xeGanttView, 'keydown')
16751681
XEUtils.assign(internalData, createInternalData())

0 commit comments

Comments
 (0)