vxe-gantt 4.0.5 → 4.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/es/gantt/src/emits.js +3 -1
  2. package/es/gantt/src/gantt-chart.js +18 -4
  3. package/es/gantt/src/gantt-header.js +17 -9
  4. package/es/gantt/src/gantt-view.js +259 -106
  5. package/es/gantt/src/gantt.js +9 -9
  6. package/es/gantt/style.css +7 -1
  7. package/es/gantt/style.min.css +1 -1
  8. package/es/style.css +1 -1
  9. package/es/style.min.css +1 -1
  10. package/es/ui/index.js +1 -1
  11. package/es/ui/src/log.js +1 -1
  12. package/es/vxe-gantt/style.css +7 -1
  13. package/es/vxe-gantt/style.min.css +1 -1
  14. package/lib/gantt/src/emits.js +1 -1
  15. package/lib/gantt/src/emits.min.js +1 -1
  16. package/lib/gantt/src/gantt-chart.js +24 -4
  17. package/lib/gantt/src/gantt-chart.min.js +1 -1
  18. package/lib/gantt/src/gantt-header.js +26 -14
  19. package/lib/gantt/src/gantt-header.min.js +1 -1
  20. package/lib/gantt/src/gantt-view.js +317 -116
  21. package/lib/gantt/src/gantt-view.min.js +1 -1
  22. package/lib/gantt/src/gantt.js +7 -7
  23. package/lib/gantt/src/gantt.min.js +1 -1
  24. package/lib/gantt/style/style.css +7 -1
  25. package/lib/gantt/style/style.min.css +1 -1
  26. package/lib/index.umd.js +377 -144
  27. package/lib/index.umd.min.js +1 -1
  28. package/lib/style.css +1 -1
  29. package/lib/style.min.css +1 -1
  30. package/lib/ui/index.js +1 -1
  31. package/lib/ui/index.min.js +1 -1
  32. package/lib/ui/src/log.js +1 -1
  33. package/lib/ui/src/log.min.js +1 -1
  34. package/lib/vxe-gantt/style/style.css +7 -1
  35. package/lib/vxe-gantt/style/style.min.css +1 -1
  36. package/package.json +3 -3
  37. package/packages/gantt/src/emits.ts +3 -1
  38. package/packages/gantt/src/gantt-chart.ts +20 -4
  39. package/packages/gantt/src/gantt-header.ts +18 -10
  40. package/packages/gantt/src/gantt-view.ts +273 -110
  41. package/packages/gantt/src/gantt.ts +7 -7
  42. package/styles/components/gantt-module/gantt-chart.scss +2 -0
  43. package/styles/components/gantt.scss +6 -1
  44. package/styles/theme/base.scss +1 -1
  45. package/styles/theme/dark.scss +1 -0
  46. package/styles/theme/light.scss +1 -0
package/es/gantt/src/emits.js CHANGED
@@ -4,5 +4,7 @@ export const ganttEmits = [
4
4
  'task-cell-click',
5
5
  'task-cell-dblclick',
6
6
  'task-bar-click',
7
- 'task-bar-dblclick'
7
+ 'task-bar-dblclick',
8
+ 'task-view-cell-click',
9
+ 'task-view-cell-dblclick'
8
10
  ];
package/es/gantt/src/gantt-chart.js CHANGED
@@ -30,13 +30,28 @@ export default defineVxeComponent({
30
30
  const progressField = computeProgressField.value;
31
31
  const taskBarOpts = computeTaskBarOpts.value;
32
32
  const { showProgress, showContent, contentMethod, barStyle } = taskBarOpts;
33
- const { round } = barStyle || {};
33
+ const isBarRowStyle = XEUtils.isFunction(barStyle);
34
+ const barStyObj = (barStyle ? (isBarRowStyle ? barStyle({ row, $gantt: $xeGantt }) : barStyle) : {}) || {};
35
+ const { round } = barStyObj;
34
36
  const rowRest = fullAllDataRowIdData[rowid] || {};
35
37
  const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0;
36
38
  const isRsHeight = resizeHeight > 0;
37
39
  const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
38
40
  let title = getStringValue(XEUtils.get(row, titleField));
39
41
  const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0;
42
+ const vbStyle = {};
43
+ const vpStyle = {
44
+ width: `${progressValue || 0}%`
45
+ };
46
+ if (isBarRowStyle) {
47
+ const { bgColor, completedBgColor } = barStyObj;
48
+ if (bgColor) {
49
+ vbStyle.backgroundColor = bgColor;
50
+ }
51
+ if (completedBgColor) {
52
+ vpStyle.backgroundColor = completedBgColor;
53
+ }
54
+ }
40
55
  if (contentMethod) {
41
56
  title = getStringValue(contentMethod({ row, title }));
42
57
  }
@@ -53,6 +68,7 @@ export default defineVxeComponent({
53
68
  }, [
54
69
  h('div', {
55
70
  class: taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar',
71
+ style: vbStyle,
56
72
  rowid,
57
73
  onClick(evnt) {
58
74
  $xeGantt.handleTaskBarClickEvent(evnt, { row });
@@ -66,9 +82,7 @@ export default defineVxeComponent({
66
82
  showProgress
67
83
  ? h('div', {
68
84
  class: 'vxe-gantt-view--chart-progress',
69
- style: {
70
- width: `${progressValue || 0}%`
71
- }
85
+ style: vpStyle
72
86
  })
73
87
  : renderEmptyElement($xeGantt),
74
88
  showContent
package/es/gantt/src/gantt-header.js CHANGED
@@ -5,6 +5,7 @@ const { getI18n } = VxeUI;
5
5
  export default defineVxeComponent({
6
6
  name: 'VxeGanttViewHeader',
7
7
  setup() {
8
+ const $xeGantt = inject('$xeGantt', {});
8
9
  const $xeGanttView = inject('$xeGanttView', {});
9
10
  const { reactData, internalData } = $xeGanttView;
10
11
  const refElem = ref();
@@ -12,7 +13,8 @@ export default defineVxeComponent({
12
13
  const refHeaderTable = ref();
13
14
  const refHeaderXSpace = ref();
14
15
  const renderVN = () => {
15
- const { tableColumn, headerGroups, viewCellWidth } = reactData;
16
+ const { headerGroups, viewCellWidth } = reactData;
17
+ const { visibleColumn } = internalData;
16
18
  return h('div', {
17
19
  ref: refElem,
18
20
  class: 'vxe-gantt-view--header-wrapper'
@@ -30,7 +32,7 @@ export default defineVxeComponent({
30
32
  ref: refHeaderTable,
31
33
  class: 'vxe-gantt-view--header-table'
32
34
  }, [
33
- h('colgroup', {}, tableColumn.map((column, cIndex) => {
35
+ h('colgroup', {}, visibleColumn.map((column, cIndex) => {
34
36
  return h('col', {
35
37
  key: cIndex,
36
38
  style: {
@@ -39,11 +41,12 @@ export default defineVxeComponent({
39
41
  });
40
42
  })),
41
43
  h('thead', {}, headerGroups.map(({ scaleItem, columns }, $rowIndex) => {
42
- const { type, titleMethod } = scaleItem;
44
+ const { type, titleMethod, slots } = scaleItem;
45
+ const titleSlot = slots ? slots.title : null;
43
46
  return h('tr', {
44
47
  key: $rowIndex
45
48
  }, columns.map((column, cIndex) => {
46
- const dateObj = column.params;
49
+ const { childCount, dateObj } = column;
47
50
  let label = `${column.title}`;
48
51
  if ($rowIndex < headerGroups.length - 1) {
49
52
  if (scaleItem.type === 'day') {
@@ -53,15 +56,20 @@ export default defineVxeComponent({
53
56
  label = getI18n(`vxe.gantt.${!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat'}.${type}`, dateObj);
54
57
  }
55
58
  }
56
- if (titleMethod) {
57
- label = `${titleMethod({ scaleObj: scaleItem, title: label, dateObj: dateObj, $rowIndex })}`;
59
+ let cellVNs = label;
60
+ const ctParams = { scaleObj: scaleItem, title: label, dateObj: dateObj, $rowIndex };
61
+ if (titleSlot) {
62
+ cellVNs = $xeGantt.callSlot(titleSlot, ctParams);
63
+ }
64
+ else if (titleMethod) {
65
+ cellVNs = `${titleMethod(ctParams)}`;
58
66
  }
59
67
  return h('th', {
60
68
  key: cIndex,
61
69
  class: 'vxe-gantt-view--header-column',
62
- colspan: column.childCount || null,
63
- title: label
64
- }, label);
70
+ colspan: childCount || null,
71
+ title: titleSlot ? null : label
72
+ }, cellVNs);
65
73
  }));
66
74
  }))
67
75
  ])
package/es/gantt/src/gantt-view.js CHANGED
@@ -11,6 +11,7 @@ const { globalEvents } = VxeUI;
11
11
  function createInternalData() {
12
12
  return {
13
13
  xeTable: null,
14
+ visibleColumn: [],
14
15
  startMaps: {},
15
16
  endMaps: {},
16
17
  chartMaps: {},
@@ -25,16 +26,9 @@ function createInternalData() {
25
26
  startIndex: 0,
26
27
  endIndex: 0
27
28
  },
28
- // 存放纵向 Y 虚拟滚动相关信息
29
- scrollYStore: {
30
- preloadSize: 0,
31
- offsetSize: 0,
32
- visibleSize: 0,
33
- visibleStartIndex: 0,
34
- visibleEndIndex: 0,
35
- startIndex: 0,
36
- endIndex: 0
37
- }
29
+ // 最后滚动位置
30
+ lastScrollTop: 0,
31
+ lastScrollLeft: 0
38
32
  };
39
33
  }
40
34
  const maxYHeight = 5e6;
@@ -72,6 +66,8 @@ export default defineVxeComponent({
72
66
  scrollbarWidth: 0,
73
67
  // 横向滚动条的高度
74
68
  scrollbarHeight: 0,
69
+ // 最后滚动时间戳
70
+ lastScrollTime: 0,
75
71
  lazScrollLoading: false,
76
72
  scrollVMLoading: false,
77
73
  scrollYHeight: 0,
@@ -112,9 +108,12 @@ export default defineVxeComponent({
112
108
  const { treeConfig } = ganttProps;
113
109
  const { taskScaleList } = ganttReactData;
114
110
  const { minViewDate, maxViewDate } = reactData;
111
+ const { scrollXStore } = internalData;
115
112
  const minScale = XEUtils.last(taskScaleList);
116
113
  const fullCols = [];
117
114
  const groupCols = [];
115
+ scrollXStore.startIndex = 0;
116
+ scrollXStore.endIndex = 1;
118
117
  if (minScale && minViewDate && maxViewDate) {
119
118
  const minSType = minScale.type;
120
119
  const weekScale = taskScaleList.find(item => item.type === 'week');
@@ -136,37 +135,37 @@ export default defineVxeComponent({
136
135
  const currTime = minViewDate.getTime();
137
136
  const diffDayNum = maxViewDate.getTime() - minViewDate.getTime();
138
137
  const countSize = Math.max(5, Math.floor(diffDayNum / gapTime) + 1);
139
- switch (minScale.type) {
140
- case 'day':
141
- case 'date':
142
- if (diffDayNum > (1000 * 60 * 60 * 24 * 366 * 3)) {
143
- reactData.tableColumn = [];
144
- reactData.headerGroups = [];
145
- return;
146
- }
147
- break;
148
- case 'hour':
149
- if (diffDayNum > (1000 * 60 * 60 * 24 * 31 * 3)) {
150
- reactData.tableColumn = [];
151
- reactData.headerGroups = [];
152
- return;
153
- }
154
- break;
155
- case 'minute':
156
- if (diffDayNum > (1000 * 60 * 60 * 24 * 3)) {
157
- reactData.tableColumn = [];
158
- reactData.headerGroups = [];
159
- return;
160
- }
161
- break;
162
- case 'second':
163
- if (diffDayNum > (1000 * 60 * 60 * 3)) {
164
- reactData.tableColumn = [];
165
- reactData.headerGroups = [];
166
- return;
167
- }
168
- break;
169
- }
138
+ // switch (minScale.type) {
139
+ // case 'day':
140
+ // case 'date':
141
+ // if (diffDayNum > (1000 * 60 * 60 * 24 * 366 * 3)) {
142
+ // reactData.tableColumn = []
143
+ // reactData.headerGroups = []
144
+ // return
145
+ // }
146
+ // break
147
+ // case 'hour':
148
+ // if (diffDayNum > (1000 * 60 * 60 * 24 * 31 * 3)) {
149
+ // reactData.tableColumn = []
150
+ // reactData.headerGroups = []
151
+ // return
152
+ // }
153
+ // break
154
+ // case 'minute':
155
+ // if (diffDayNum > (1000 * 60 * 60 * 24 * 3)) {
156
+ // reactData.tableColumn = []
157
+ // reactData.headerGroups = []
158
+ // return
159
+ // }
160
+ // break
161
+ // case 'second':
162
+ // if (diffDayNum > (1000 * 60 * 60 * 3)) {
163
+ // reactData.tableColumn = []
164
+ // reactData.headerGroups = []
165
+ // return
166
+ // }
167
+ // break
168
+ // }
170
169
  const renderListMaps = {
171
170
  year: [],
172
171
  quarter: [],
@@ -220,47 +219,47 @@ export default defineVxeComponent({
220
219
  year: {
221
220
  field: yyyy,
222
221
  title: yyyy,
223
- params: dateObj
222
+ dateObj
224
223
  },
225
224
  quarter: {
226
225
  field: `${yyyy}_q${q}`,
227
- title: q,
228
- params: dateObj
226
+ title: `${q}`,
227
+ dateObj
229
228
  },
230
229
  month: {
231
230
  field: `${yyyy}_${MM}`,
232
231
  title: MM,
233
- params: dateObj
232
+ dateObj
234
233
  },
235
234
  week: {
236
235
  field: `${yyyy}_W${W}`,
237
- title: W,
238
- params: dateObj
236
+ title: `${W}`,
237
+ dateObj
239
238
  },
240
239
  day: {
241
240
  field: `${yyyy}_${MM}_${dd}_E${E}`,
242
- title: E,
243
- params: dateObj
241
+ title: `${E}`,
242
+ dateObj
244
243
  },
245
244
  date: {
246
245
  field: `${yyyy}_${MM}_${dd}`,
247
246
  title: dd,
248
- params: dateObj
247
+ dateObj
249
248
  },
250
249
  hour: {
251
250
  field: `${yyyy}_${MM}_${dd}_${HH}`,
252
251
  title: HH,
253
- params: dateObj
252
+ dateObj
254
253
  },
255
254
  minute: {
256
255
  field: `${yyyy}_${MM}_${dd}_${HH}_${mm}`,
257
256
  title: mm,
258
- params: dateObj
257
+ dateObj
259
258
  },
260
259
  second: {
261
260
  field: `${yyyy}_${MM}_${dd}_${HH}_${mm}_${ss}`,
262
261
  title: ss,
263
- params: dateObj
262
+ dateObj
264
263
  }
265
264
  };
266
265
  const minCol = colMaps[minSType];
@@ -347,8 +346,10 @@ export default defineVxeComponent({
347
346
  internalData.chartMaps = ctMaps;
348
347
  }
349
348
  }
350
- reactData.tableColumn = fullCols;
349
+ internalData.visibleColumn = fullCols;
351
350
  reactData.headerGroups = groupCols;
351
+ updateScrollXStatus();
352
+ handleTableColumn();
352
353
  };
353
354
  const handleUpdateData = () => {
354
355
  const ganttProps = $xeGantt.props;
@@ -437,8 +438,8 @@ export default defineVxeComponent({
437
438
  return nextTick();
438
439
  };
439
440
  const updateStyle = () => {
440
- const { scrollbarWidth, scrollbarHeight, tableColumn, headerGroups } = reactData;
441
- const { elemStore } = internalData;
441
+ const { scrollbarWidth, scrollbarHeight, headerGroups, tableColumn } = reactData;
442
+ const { elemStore, visibleColumn } = internalData;
442
443
  const $xeTable = internalData.xeTable;
443
444
  const el = refElem.value;
444
445
  if (!el || !el.clientHeight) {
@@ -519,37 +520,182 @@ export default defineVxeComponent({
519
520
  yBottomCornerEl.style.display = tFooterHeight ? 'block' : '';
520
521
  }
521
522
  const colInfoElem = refColInfoElem.value;
523
+ let viewCellWidth = 40;
522
524
  if (colInfoElem) {
523
- reactData.viewCellWidth = colInfoElem.clientWidth || 40;
525
+ viewCellWidth = colInfoElem.clientWidth || 40;
524
526
  }
525
- let viewTableWidth = reactData.viewCellWidth * tableColumn.length;
527
+ let viewTableWidth = viewCellWidth * visibleColumn.length;
526
528
  if (bodyScrollElem) {
527
529
  const viewWidth = bodyScrollElem.clientWidth;
528
530
  const remainWidth = viewWidth - viewTableWidth;
529
531
  if (remainWidth > 0) {
530
- reactData.viewCellWidth += Math.floor(remainWidth / tableColumn.length);
532
+ viewCellWidth += Math.floor(remainWidth / visibleColumn.length);
531
533
  viewTableWidth = viewWidth;
532
534
  }
533
535
  }
536
+ reactData.viewCellWidth = viewCellWidth;
534
537
  const headerTableElem = getRefElem(elemStore['main-header-table']);
535
538
  const bodyTableElem = getRefElem(elemStore['main-body-table']);
539
+ const vmTableWidth = viewCellWidth * tableColumn.length;
536
540
  if (headerTableElem) {
537
541
  headerTableElem.style.width = `${viewTableWidth}px`;
538
542
  }
539
543
  if (bodyTableElem) {
540
- bodyTableElem.style.width = `${viewTableWidth}px`;
544
+ bodyTableElem.style.width = `${vmTableWidth}px`;
541
545
  }
542
546
  reactData.scrollXWidth = viewTableWidth;
543
547
  return updateChart();
544
548
  };
545
- const handleLazyRecalculate = () => {
549
+ const handleRecalculateStyle = () => {
550
+ const el = refElem.value;
551
+ internalData.rceRunTime = Date.now();
552
+ if (!el || !el.clientWidth) {
553
+ return nextTick();
554
+ }
546
555
  calcScrollbar();
547
556
  updateStyle();
548
557
  updateChart();
558
+ return computeScrollLoad();
559
+ };
560
+ const handleLazyRecalculate = () => {
561
+ return new Promise(resolve => {
562
+ const { rceTimeout, rceRunTime } = internalData;
563
+ const $xeTable = internalData.xeTable;
564
+ let refreshDelay = 50;
565
+ if ($xeTable) {
566
+ const { computeResizeOpts } = $xeTable.getComputeMaps();
567
+ const resizeOpts = computeResizeOpts.value;
568
+ refreshDelay = resizeOpts.refreshDelay || 50;
569
+ }
570
+ if (rceTimeout) {
571
+ clearTimeout(rceTimeout);
572
+ if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
573
+ resolve(handleRecalculateStyle());
574
+ }
575
+ else {
576
+ nextTick(() => {
577
+ resolve();
578
+ });
579
+ }
580
+ }
581
+ else {
582
+ resolve(handleRecalculateStyle());
583
+ }
584
+ internalData.rceTimeout = setTimeout(() => {
585
+ internalData.rceTimeout = undefined;
586
+ handleRecalculateStyle();
587
+ }, refreshDelay);
588
+ });
589
+ };
590
+ const computeScrollLoad = () => {
591
+ return nextTick().then(() => {
592
+ const { scrollXLoad } = reactData;
593
+ const { scrollXStore } = internalData;
594
+ // 计算 X 逻辑
595
+ if (scrollXLoad) {
596
+ const { toVisibleIndex: toXVisibleIndex, visibleSize: visibleXSize } = handleVirtualXVisible();
597
+ const offsetXSize = 2;
598
+ scrollXStore.preloadSize = 1;
599
+ scrollXStore.offsetSize = offsetXSize;
600
+ scrollXStore.visibleSize = visibleXSize;
601
+ scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
602
+ scrollXStore.visibleStartIndex = Math.max(scrollXStore.startIndex, toXVisibleIndex);
603
+ scrollXStore.visibleEndIndex = Math.min(scrollXStore.endIndex, toXVisibleIndex + visibleXSize);
604
+ updateScrollXData().then(() => {
605
+ loadScrollXData();
606
+ });
607
+ }
608
+ else {
609
+ updateScrollXSpace();
610
+ }
611
+ });
612
+ };
613
+ const handleVirtualXVisible = () => {
614
+ const { viewCellWidth } = reactData;
615
+ const { elemStore } = internalData;
616
+ const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
617
+ if (bodyScrollElem) {
618
+ const clientWidth = bodyScrollElem.clientWidth;
619
+ const scrollLeft = bodyScrollElem.scrollLeft;
620
+ const toVisibleIndex = Math.floor(scrollLeft / viewCellWidth) - 1;
621
+ const visibleSize = Math.ceil(clientWidth / viewCellWidth) + 1;
622
+ return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(1, visibleSize) };
623
+ }
624
+ return { toVisibleIndex: 0, visibleSize: 6 };
625
+ };
626
+ const loadScrollXData = () => {
627
+ const { isScrollXBig } = reactData;
628
+ const { scrollXStore } = internalData;
629
+ const { preloadSize, startIndex, endIndex, offsetSize } = scrollXStore;
630
+ const { toVisibleIndex, visibleSize } = handleVirtualXVisible();
631
+ const offsetItem = {
632
+ startIndex: Math.max(0, isScrollXBig ? toVisibleIndex - 1 : toVisibleIndex - 1 - offsetSize - preloadSize),
633
+ endIndex: isScrollXBig ? toVisibleIndex + visibleSize : toVisibleIndex + visibleSize + offsetSize + preloadSize
634
+ };
635
+ scrollXStore.visibleStartIndex = toVisibleIndex - 1;
636
+ scrollXStore.visibleEndIndex = toVisibleIndex + visibleSize + 1;
637
+ const { startIndex: offsetStartIndex, endIndex: offsetEndIndex } = offsetItem;
638
+ if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
639
+ if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
640
+ scrollXStore.startIndex = offsetStartIndex;
641
+ scrollXStore.endIndex = offsetEndIndex;
642
+ updateScrollXData();
643
+ }
644
+ }
645
+ };
646
+ const updateScrollXData = () => {
647
+ handleTableColumn();
648
+ updateScrollXSpace();
549
649
  return nextTick();
550
650
  };
551
- // const updateScrollXSpace = () => {
552
- // }
651
+ const updateScrollXStatus = () => {
652
+ const scrollXLoad = true;
653
+ reactData.scrollXLoad = scrollXLoad;
654
+ return scrollXLoad;
655
+ };
656
+ const handleTableColumn = () => {
657
+ const { scrollXLoad } = reactData;
658
+ const { visibleColumn, scrollXStore } = internalData;
659
+ const tableColumn = scrollXLoad ? visibleColumn.slice(scrollXStore.startIndex, scrollXStore.endIndex) : visibleColumn.slice(0);
660
+ reactData.tableColumn = tableColumn;
661
+ };
662
+ const updateScrollXSpace = () => {
663
+ const { scrollXLoad, scrollXWidth, viewCellWidth } = reactData;
664
+ const { elemStore, scrollXStore } = internalData;
665
+ const bodyTableElem = getRefElem(elemStore['main-body-table']);
666
+ // const headerTableElem = getRefElem(elemStore['main-header-table'])
667
+ // const footerTableElem = getRefElem(elemStore['main-footer-table'])
668
+ const { startIndex } = scrollXStore;
669
+ let xSpaceLeft = 0;
670
+ if (scrollXLoad) {
671
+ xSpaceLeft = Math.max(0, startIndex * viewCellWidth);
672
+ }
673
+ // if (headerTableElem) {
674
+ // headerTableElem.style.transform = `translate(${xSpaceLeft}px, 0px)`
675
+ // }
676
+ if (bodyTableElem) {
677
+ bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`;
678
+ }
679
+ // if (footerTableElem) {
680
+ // footerTableElem.style.transform = `translate(${xSpaceLeft}px, 0px)`
681
+ // }
682
+ const layoutList = ['header', 'body', 'footer'];
683
+ layoutList.forEach(layout => {
684
+ const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`]);
685
+ if (xSpaceElem) {
686
+ xSpaceElem.style.width = scrollXLoad ? `${scrollXWidth}px` : '';
687
+ }
688
+ });
689
+ const scrollXSpaceEl = refScrollXSpaceElem.value;
690
+ if (scrollXSpaceEl) {
691
+ scrollXSpaceEl.style.width = `${scrollXWidth}px`;
692
+ }
693
+ calcScrollbar();
694
+ return nextTick();
695
+ };
696
+ const triggerScrollXEvent = () => {
697
+ loadScrollXData();
698
+ };
553
699
  const updateScrollYSpace = () => {
554
700
  const { elemStore } = internalData;
555
701
  const $xeTable = internalData.xeTable;
@@ -624,6 +770,13 @@ export default defineVxeComponent({
624
770
  };
625
771
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
626
772
  const handleScrollEvent = (evnt, isRollY, isRollX, scrollTop, scrollLeft) => {
773
+ if (isRollX) {
774
+ internalData.lastScrollLeft = scrollLeft;
775
+ }
776
+ if (isRollY) {
777
+ internalData.lastScrollTop = scrollTop;
778
+ }
779
+ reactData.lastScrollTime = Date.now();
627
780
  checkLastSyncScroll(isRollX, isRollY);
628
781
  };
629
782
  const ganttViewMethods = {
@@ -716,7 +869,8 @@ export default defineVxeComponent({
716
869
  }
717
870
  },
718
871
  triggerBodyScrollEvent(evnt) {
719
- const { elemStore, inVirtualScroll, inHeaderScroll, inFooterScroll } = internalData;
872
+ const { scrollXLoad } = reactData;
873
+ const { elemStore, inVirtualScroll, inHeaderScroll, inFooterScroll, lastScrollLeft, lastScrollTop } = internalData;
720
874
  if (inVirtualScroll) {
721
875
  return;
722
876
  }
@@ -727,36 +881,44 @@ export default defineVxeComponent({
727
881
  const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
728
882
  const xHandleEl = refScrollXHandleElem.value;
729
883
  const yHandleEl = refScrollYHandleElem.value;
730
- if (headerScrollElem && wrapperEl) {
731
- const isRollX = true;
732
- const isRollY = true;
733
- const currLeftNum = wrapperEl.scrollLeft;
734
- const currTopNum = wrapperEl.scrollTop;
735
- internalData.inBodyScroll = true;
736
- setScrollLeft(xHandleEl, currLeftNum);
737
- setScrollLeft(headerScrollElem, currLeftNum);
738
- setScrollTop(yHandleEl, currTopNum);
739
- syncTableScrollTop(currTopNum);
740
- handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
884
+ const scrollLeft = wrapperEl.scrollLeft;
885
+ const scrollTop = wrapperEl.scrollTop;
886
+ const isRollX = scrollLeft !== lastScrollLeft;
887
+ const isRollY = scrollTop !== lastScrollTop;
888
+ internalData.inBodyScroll = true;
889
+ internalData.scrollRenderType = '';
890
+ if (isRollY) {
891
+ setScrollTop(yHandleEl, scrollTop);
892
+ syncTableScrollTop(scrollTop);
741
893
  }
742
- },
743
- triggerFooterScrollEvent(evnt) {
744
- const { inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData;
745
- if (inVirtualScroll) {
746
- return;
747
- }
748
- if (inHeaderScroll || inBodyScroll) {
749
- return;
750
- }
751
- const wrapperEl = evnt.currentTarget;
752
- if (wrapperEl) {
753
- const isRollX = true;
754
- const isRollY = false;
755
- const currLeftNum = wrapperEl.scrollLeft;
756
- handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
894
+ if (isRollX) {
895
+ internalData.inBodyScroll = true;
896
+ setScrollLeft(xHandleEl, scrollLeft);
897
+ setScrollLeft(headerScrollElem, scrollLeft);
898
+ if (scrollXLoad) {
899
+ triggerScrollXEvent();
900
+ }
757
901
  }
902
+ handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, scrollLeft);
758
903
  },
904
+ // triggerFooterScrollEvent (evnt) {
905
+ // const { inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData
906
+ // if (inVirtualScroll) {
907
+ // return
908
+ // }
909
+ // if (inHeaderScroll || inBodyScroll) {
910
+ // return
911
+ // }
912
+ // const wrapperEl = evnt.currentTarget as HTMLDivElement
913
+ // if (wrapperEl) {
914
+ // const isRollX = true
915
+ // const isRollY = false
916
+ // const currLeftNum = wrapperEl.scrollLeft
917
+ // handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
918
+ // }
919
+ // },
759
920
  triggerVirtualScrollXEvent(evnt) {
921
+ const { scrollXLoad } = reactData;
760
922
  const { elemStore, inHeaderScroll, inBodyScroll } = internalData;
761
923
  if (inHeaderScroll || inBodyScroll) {
762
924
  return;
@@ -771,6 +933,9 @@ export default defineVxeComponent({
771
933
  internalData.inVirtualScroll = true;
772
934
  setScrollLeft(headerScrollElem, currLeftNum);
773
935
  setScrollLeft(bodyScrollElem, currLeftNum);
936
+ if (scrollXLoad) {
937
+ triggerScrollXEvent();
938
+ }
774
939
  handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
775
940
  }
776
941
  },
@@ -792,23 +957,11 @@ export default defineVxeComponent({
792
957
  }
793
958
  },
794
959
  handleUpdateSXSpace() {
795
- const { scrollXLoad, scrollXWidth } = reactData;
796
- const { elemStore } = internalData;
797
- const layoutList = ['header', 'body', 'footer'];
798
- layoutList.forEach(layout => {
799
- const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`]);
800
- if (xSpaceElem) {
801
- xSpaceElem.style.width = scrollXLoad ? `${scrollXWidth}px` : '';
802
- }
803
- });
804
- const scrollXSpaceEl = refScrollXSpaceElem.value;
805
- if (scrollXSpaceEl) {
806
- scrollXSpaceEl.style.width = `${scrollXWidth}px`;
807
- }
808
- calcScrollbar();
809
- return nextTick();
960
+ return updateScrollXSpace();
961
+ },
962
+ handleUpdateSYSpace() {
963
+ return updateScrollYSpace();
810
964
  },
811
- handleUpdateSYSpace: updateScrollYSpace,
812
965
  handleUpdateSYStatus(sYLoad) {
813
966
  reactData.scrollYLoad = sYLoad;
814
967
  }