vxe-gantt 4.1.17 → 4.1.19
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.
- package/es/gantt/src/emits.js +4 -1
- package/es/gantt/src/gantt-chart.js +75 -53
- package/es/gantt/src/gantt-view.js +49 -20
- package/es/gantt/src/gantt.js +79 -39
- package/es/gantt/src/util.js +0 -3
- package/es/gantt/style.css +16 -2
- package/es/gantt/style.min.css +1 -1
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/ui/index.js +2 -1
- package/es/ui/src/log.js +1 -1
- package/es/vxe-gantt/style.css +16 -2
- package/es/vxe-gantt/style.min.css +1 -1
- package/lib/gantt/src/emits.js +1 -1
- package/lib/gantt/src/emits.min.js +1 -1
- package/lib/gantt/src/gantt-chart.js +72 -44
- package/lib/gantt/src/gantt-chart.min.js +1 -1
- package/lib/gantt/src/gantt-view.js +49 -24
- package/lib/gantt/src/gantt-view.min.js +1 -1
- package/lib/gantt/src/gantt.js +89 -38
- package/lib/gantt/src/gantt.min.js +1 -1
- package/lib/gantt/src/util.js +0 -4
- package/lib/gantt/src/util.min.js +1 -1
- package/lib/gantt/style/style.css +16 -2
- package/lib/gantt/style/style.min.css +1 -1
- package/lib/index.umd.js +210 -106
- package/lib/index.umd.min.js +1 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/ui/index.js +2 -1
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/lib/vxe-gantt/style/style.css +16 -2
- package/lib/vxe-gantt/style/style.min.css +1 -1
- package/package.json +3 -3
- package/packages/gantt/src/emits.ts +4 -1
- package/packages/gantt/src/gantt-chart.ts +78 -53
- package/packages/gantt/src/gantt-view.ts +51 -20
- package/packages/gantt/src/gantt.ts +84 -40
- package/packages/gantt/src/util.ts +0 -4
- package/packages/ui/index.ts +1 -0
- package/styles/components/gantt-module/gantt-chart.scss +14 -2
- package/styles/theme/base.scss +1 -0
package/es/gantt/src/emits.js
CHANGED
|
@@ -12,15 +12,14 @@ export default defineVxeComponent({
|
|
|
12
12
|
setup() {
|
|
13
13
|
const $xeGantt = inject('$xeGantt', {});
|
|
14
14
|
const $xeGanttView = inject('$xeGanttView', {});
|
|
15
|
-
const { props: ganttProps, internalData: ganttInternalData } = $xeGantt;
|
|
15
|
+
const { props: ganttProps, reactData: ganttReactData, internalData: ganttInternalData } = $xeGantt;
|
|
16
16
|
const { reactData: ganttViewReactData, internalData: ganttViewInternalData } = $xeGanttView;
|
|
17
17
|
const { computeProgressField, computeTitleField, computeTypeField, computeTaskBarOpts, computeScaleUnit, computeTaskLinkOpts, computeTaskBarMilestoneOpts } = $xeGantt.getComputeMaps();
|
|
18
18
|
const refElem = ref();
|
|
19
19
|
const refTaskWrapperElem = ref();
|
|
20
|
-
const
|
|
20
|
+
const refChartBeforeWrapperElem = ref();
|
|
21
|
+
const refChartAfterWrapperElem = ref();
|
|
21
22
|
const renderTaskBar = ($xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex) => {
|
|
22
|
-
const tableProps = $xeTable.props;
|
|
23
|
-
const { treeConfig } = tableProps;
|
|
24
23
|
const tableReactData = $xeTable.reactData;
|
|
25
24
|
const { resizeHeightFlag } = tableReactData;
|
|
26
25
|
const tableInternalData = $xeTable.internalData;
|
|
@@ -32,6 +31,7 @@ export default defineVxeComponent({
|
|
|
32
31
|
const ganttSlots = $xeGantt.context.slots;
|
|
33
32
|
const taskBarSlot = ganttSlots.taskBar || ganttSlots['task-bar'];
|
|
34
33
|
const { taskBarMilestoneConfig } = ganttProps;
|
|
34
|
+
const { activeLink, activeBarRowid } = ganttReactData;
|
|
35
35
|
const titleField = computeTitleField.value;
|
|
36
36
|
const progressField = computeProgressField.value;
|
|
37
37
|
const typeField = computeTypeField.value;
|
|
@@ -75,21 +75,9 @@ export default defineVxeComponent({
|
|
|
75
75
|
rowIndex,
|
|
76
76
|
_rowIndex
|
|
77
77
|
};
|
|
78
|
-
const
|
|
79
|
-
onClick(evnt) {
|
|
80
|
-
$xeGantt.handleTaskBarClickEvent(evnt, barParams);
|
|
81
|
-
},
|
|
82
|
-
onDblclick(evnt) {
|
|
83
|
-
$xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
|
|
84
|
-
},
|
|
85
|
-
onMousedown(evnt) {
|
|
86
|
-
if ($xeGantt.handleTaskBarMousedownEvent) {
|
|
87
|
-
$xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
};
|
|
78
|
+
const ctOns = {};
|
|
91
79
|
if (showTooltip) {
|
|
92
|
-
|
|
80
|
+
ctOns.onMouseover = (evnt) => {
|
|
93
81
|
const { dragBarRow } = ganttInternalData;
|
|
94
82
|
const ttParams = Object.assign({ $event: evnt }, ctParams);
|
|
95
83
|
if (!dragBarRow) {
|
|
@@ -97,7 +85,7 @@ export default defineVxeComponent({
|
|
|
97
85
|
}
|
|
98
86
|
$xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt);
|
|
99
87
|
};
|
|
100
|
-
|
|
88
|
+
ctOns.onMouseleave = (evnt) => {
|
|
101
89
|
const { dragBarRow } = ganttInternalData;
|
|
102
90
|
const ttParams = Object.assign({ $event: evnt }, ctParams);
|
|
103
91
|
if (!dragBarRow) {
|
|
@@ -112,23 +100,19 @@ export default defineVxeComponent({
|
|
|
112
100
|
isMilestone,
|
|
113
101
|
title,
|
|
114
102
|
vbStyle,
|
|
115
|
-
vpStyle
|
|
103
|
+
vpStyle,
|
|
104
|
+
rowid,
|
|
105
|
+
ctOns
|
|
116
106
|
});
|
|
117
107
|
}
|
|
118
108
|
else if (taskBarSlot) {
|
|
119
|
-
cbVNs.push(h('div', {
|
|
120
|
-
key: 'cbc',
|
|
121
|
-
class: 'vxe-gantt-view--chart-custom-bar-content'
|
|
122
|
-
}, $xeGantt.callSlot(taskBarSlot, barParams)));
|
|
109
|
+
cbVNs.push(h('div', Object.assign({ key: 'cbc', class: 'vxe-gantt-view--chart-custom-bar-content-wrapper' }, ctOns), $xeGantt.callSlot(taskBarSlot, barParams)));
|
|
123
110
|
}
|
|
124
111
|
else {
|
|
125
112
|
if (isMilestone) {
|
|
126
113
|
const { icon, iconStatus, iconStyle } = taskBarMilestoneOpts;
|
|
127
114
|
const tbmParams = { $gantt: $xeGantt, row };
|
|
128
|
-
cbVNs.push(h('div', {
|
|
129
|
-
key: 'vcm',
|
|
130
|
-
class: 'vxe-gantt-view--chart-milestone-wrapper'
|
|
131
|
-
}, [
|
|
115
|
+
cbVNs.push(h('div', Object.assign({ key: 'vcm', class: 'vxe-gantt-view--chart-milestone-wrapper' }, ctOns), [
|
|
132
116
|
h('div', {
|
|
133
117
|
class: ['vxe-gantt-view--chart-milestone-icon', iconStatus ? `theme--${XEUtils.isFunction(iconStatus) ? iconStatus(tbmParams) : iconStatus}` : ''],
|
|
134
118
|
style: iconStyle ? Object.assign({}, XEUtils.isFunction(iconStyle) ? iconStyle(tbmParams) : iconStyle) : undefined
|
|
@@ -145,22 +129,25 @@ export default defineVxeComponent({
|
|
|
145
129
|
]));
|
|
146
130
|
}
|
|
147
131
|
else {
|
|
148
|
-
cbVNs.push(
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
132
|
+
cbVNs.push(h('div', Object.assign({ key: 'vbc', class: 'vxe-gantt-view--chart-bar-content-wrapper' }, ctOns), [
|
|
133
|
+
showProgress
|
|
134
|
+
? h('div', {
|
|
135
|
+
key: 'vcp',
|
|
136
|
+
class: 'vxe-gantt-view--chart-progress',
|
|
137
|
+
style: vpStyle
|
|
138
|
+
})
|
|
139
|
+
: renderEmptyElement($xeGantt),
|
|
140
|
+
showContent
|
|
141
|
+
? h('div', {
|
|
142
|
+
key: 'vcc',
|
|
143
|
+
class: 'vxe-gantt-view--chart-content'
|
|
144
|
+
}, title)
|
|
145
|
+
: renderEmptyElement($xeGantt)
|
|
146
|
+
]));
|
|
160
147
|
}
|
|
161
148
|
}
|
|
162
149
|
return h('div', {
|
|
163
|
-
key:
|
|
150
|
+
key: rowid,
|
|
164
151
|
rowid,
|
|
165
152
|
class: ['vxe-gantt-view--chart-row', `is--${gettaskType(typeValue)}`, {
|
|
166
153
|
'is--round': round,
|
|
@@ -173,7 +160,25 @@ export default defineVxeComponent({
|
|
|
173
160
|
$xeGantt.handleTaskBarContextmenuEvent(evnt, ctParams);
|
|
174
161
|
}
|
|
175
162
|
}, [
|
|
176
|
-
h('div',
|
|
163
|
+
h('div', {
|
|
164
|
+
class: [taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar', `is--${gettaskType(typeValue)}`, {
|
|
165
|
+
'is--active': activeBarRowid === rowid,
|
|
166
|
+
'active--link': activeLink && (rowid === `${activeLink.from}` || rowid === `${activeLink.to}`)
|
|
167
|
+
}],
|
|
168
|
+
style: vbStyle,
|
|
169
|
+
rowid,
|
|
170
|
+
onClick(evnt) {
|
|
171
|
+
$xeGantt.handleTaskBarClickEvent(evnt, barParams);
|
|
172
|
+
},
|
|
173
|
+
onDblclick(evnt) {
|
|
174
|
+
$xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
|
|
175
|
+
},
|
|
176
|
+
onMousedown(evnt) {
|
|
177
|
+
if ($xeGantt.handleTaskBarMousedownEvent) {
|
|
178
|
+
$xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}, cbVNs)
|
|
177
182
|
]);
|
|
178
183
|
};
|
|
179
184
|
const renderTaskRows = ($xeTable, tableData) => {
|
|
@@ -214,38 +219,55 @@ export default defineVxeComponent({
|
|
|
214
219
|
};
|
|
215
220
|
const renderVN = () => {
|
|
216
221
|
const $xeTable = ganttViewInternalData.xeTable;
|
|
222
|
+
const { dragLinkFromStore } = ganttReactData;
|
|
217
223
|
const { tableData } = ganttViewReactData;
|
|
218
224
|
const taskLinkOpts = computeTaskLinkOpts.value;
|
|
219
|
-
const
|
|
225
|
+
const taskBarOpts = computeTaskBarOpts.value;
|
|
226
|
+
const { isCurrent, isHover } = taskLinkOpts;
|
|
227
|
+
const { linkCreatable } = taskBarOpts;
|
|
220
228
|
return h('div', {
|
|
221
229
|
ref: refElem,
|
|
222
|
-
class: 'vxe-gantt-view--chart-wrapper'
|
|
230
|
+
class: ['vxe-gantt-view--chart-wrapper', {
|
|
231
|
+
'is--cl-drag': dragLinkFromStore.rowid
|
|
232
|
+
}]
|
|
223
233
|
}, [
|
|
224
|
-
$xeGantt.
|
|
234
|
+
$xeGantt.renderGanttTaskChartBefores
|
|
225
235
|
? h('div', {
|
|
226
|
-
ref:
|
|
227
|
-
class: ['vxe-gantt-view--chart-
|
|
228
|
-
'
|
|
236
|
+
ref: refChartBeforeWrapperElem,
|
|
237
|
+
class: ['vxe-gantt-view--chart-before-wrapper', {
|
|
238
|
+
'link--current': isCurrent,
|
|
239
|
+
'link--hover': isHover
|
|
229
240
|
}]
|
|
230
|
-
}, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.
|
|
241
|
+
}, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskChartBefores() : [])
|
|
231
242
|
: renderEmptyElement($xeGantt),
|
|
232
243
|
h('div', {
|
|
233
244
|
ref: refTaskWrapperElem,
|
|
234
|
-
class: 'vxe-gantt-view--chart-task-wrapper'
|
|
235
|
-
|
|
245
|
+
class: ['vxe-gantt-view--chart-task-wrapper', {
|
|
246
|
+
'link--current': isCurrent,
|
|
247
|
+
'link--create': linkCreatable
|
|
248
|
+
}]
|
|
249
|
+
}, $xeTable ? renderTaskRows($xeTable, tableData) : []),
|
|
250
|
+
$xeGantt.renderGanttTaskChartAfters
|
|
251
|
+
? h('div', {
|
|
252
|
+
ref: refChartAfterWrapperElem,
|
|
253
|
+
class: 'vxe-gantt-view--chart-after-wrapper'
|
|
254
|
+
}, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskChartAfters() : [])
|
|
255
|
+
: renderEmptyElement($xeGantt)
|
|
236
256
|
]);
|
|
237
257
|
};
|
|
238
258
|
onMounted(() => {
|
|
239
259
|
const { elemStore } = ganttViewInternalData;
|
|
240
260
|
const prefix = 'main-chart-';
|
|
241
261
|
elemStore[`${prefix}task-wrapper`] = refTaskWrapperElem;
|
|
242
|
-
elemStore[`${prefix}
|
|
262
|
+
elemStore[`${prefix}before-wrapper`] = refChartBeforeWrapperElem;
|
|
263
|
+
elemStore[`${prefix}after-wrapper`] = refChartAfterWrapperElem;
|
|
243
264
|
});
|
|
244
265
|
onUnmounted(() => {
|
|
245
266
|
const { elemStore } = ganttViewInternalData;
|
|
246
267
|
const prefix = 'main-chart-';
|
|
247
268
|
elemStore[`${prefix}task-wrapper`] = null;
|
|
248
|
-
elemStore[`${prefix}
|
|
269
|
+
elemStore[`${prefix}before-wrapper`] = null;
|
|
270
|
+
elemStore[`${prefix}after-wrapper`] = null;
|
|
249
271
|
});
|
|
250
272
|
return renderVN;
|
|
251
273
|
}
|
|
@@ -274,15 +274,8 @@ export default defineVxeComponent({
|
|
|
274
274
|
const q = Math.ceil((itemDate.getMonth() + 1) / 3);
|
|
275
275
|
const W = `${XEUtils.getYearWeek(itemDate, weekScale ? weekScale.startDay : undefined)}`;
|
|
276
276
|
const WW = XEUtils.padStart(W, 2, '0');
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
// '2024-12-31' 'yyyy-MM-dd W' >> '2024-12-31 1'
|
|
280
|
-
// '2025-01-01' 'yyyy-MM-dd W' >> '2025-01-01 1'
|
|
281
|
-
if (W === '1' && MM === '12') {
|
|
282
|
-
wYear = `${Number(yyyy) + 1}`;
|
|
283
|
-
if (isMinWeek) {
|
|
284
|
-
yyyy = wYear;
|
|
285
|
-
}
|
|
277
|
+
if (isMinWeek && checkWeekOfsetYear(W, M)) {
|
|
278
|
+
yyyy = `${Number(yyyy) + 1}`;
|
|
286
279
|
}
|
|
287
280
|
const dateObj = { date: itemDate, yy, yyyy, M, MM, d, dd, H, HH, m, mm, s, ss, q, W, WW, E, e };
|
|
288
281
|
const colMaps = {
|
|
@@ -388,6 +381,30 @@ export default defineVxeComponent({
|
|
|
388
381
|
groupCols
|
|
389
382
|
};
|
|
390
383
|
};
|
|
384
|
+
/**
|
|
385
|
+
* 判断周的年份是否跨年
|
|
386
|
+
*/
|
|
387
|
+
const checkWeekOfsetYear = (W, M) => {
|
|
388
|
+
return `${W}` === '1' && `${M}` === '12';
|
|
389
|
+
};
|
|
390
|
+
/**
|
|
391
|
+
* 周维度,由于年份和第几周是冲突的行为,所以需要特殊处理,判断是否跨年,例如
|
|
392
|
+
* '2024-12-31' 'yyyy-MM-dd W' >> '2024-12-31 1'
|
|
393
|
+
* '2025-01-01' 'yyyy-MM-dd W' >> '2025-01-01 1'
|
|
394
|
+
*/
|
|
395
|
+
const parseWeekObj = (date, firstDay) => {
|
|
396
|
+
const currDate = XEUtils.toStringDate(date);
|
|
397
|
+
let yyyy = currDate.getFullYear();
|
|
398
|
+
const month = currDate.getMonth();
|
|
399
|
+
const weekNum = XEUtils.getYearWeek(currDate, firstDay);
|
|
400
|
+
if (checkWeekOfsetYear(weekNum, month + 1)) {
|
|
401
|
+
yyyy++;
|
|
402
|
+
}
|
|
403
|
+
return {
|
|
404
|
+
yyyy,
|
|
405
|
+
W: weekNum
|
|
406
|
+
};
|
|
407
|
+
};
|
|
391
408
|
const createChartRender = (fullCols) => {
|
|
392
409
|
const { minViewDate } = reactData;
|
|
393
410
|
const minScale = computeMinScale.value;
|
|
@@ -472,9 +489,11 @@ export default defineVxeComponent({
|
|
|
472
489
|
return (startValue, endValue) => {
|
|
473
490
|
const startDate = parseStringDate(startValue);
|
|
474
491
|
const endDate = parseStringDate(endValue);
|
|
475
|
-
const
|
|
492
|
+
const startWeekObj = parseWeekObj(startDate, weekScale ? weekScale.startDay : undefined);
|
|
493
|
+
const startStr = `${startWeekObj.yyyy}-${startWeekObj.W}`;
|
|
476
494
|
const startFirstDate = XEUtils.getWhatWeek(startDate, 0, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined);
|
|
477
|
-
const
|
|
495
|
+
const endWeekObj = parseWeekObj(endDate, weekScale ? weekScale.startDay : undefined);
|
|
496
|
+
const endStr = `${endWeekObj.yyyy}-${endWeekObj.W}`;
|
|
478
497
|
const endFirstDate = XEUtils.getWhatWeek(endDate, 0, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined);
|
|
479
498
|
const dateSize = Math.floor((XEUtils.getWhatWeek(endDate, 1, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined).getTime() - endFirstDate.getTime()) / dayMs);
|
|
480
499
|
const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize;
|
|
@@ -878,7 +897,7 @@ export default defineVxeComponent({
|
|
|
878
897
|
reactData.scrollXWidth = viewTableWidth;
|
|
879
898
|
return Promise.all([
|
|
880
899
|
updateTaskChart(),
|
|
881
|
-
$xeGantt.
|
|
900
|
+
$xeGantt.handleUpdateTaskLinkStyle ? $xeGantt.handleUpdateTaskLinkStyle($xeGanttView) : null
|
|
882
901
|
]);
|
|
883
902
|
};
|
|
884
903
|
const handleRecalculateStyle = () => {
|
|
@@ -1027,10 +1046,15 @@ export default defineVxeComponent({
|
|
|
1027
1046
|
if (scrollXSpaceEl) {
|
|
1028
1047
|
scrollXSpaceEl.style.width = `${scrollXWidth}px`;
|
|
1029
1048
|
}
|
|
1030
|
-
const
|
|
1031
|
-
const
|
|
1032
|
-
if (
|
|
1033
|
-
|
|
1049
|
+
const beforeWrapper = getRefElem(elemStore['main-chart-before-wrapper']);
|
|
1050
|
+
const beforeSvgElem = beforeWrapper ? beforeWrapper.firstElementChild : null;
|
|
1051
|
+
if (beforeSvgElem) {
|
|
1052
|
+
beforeSvgElem.style.width = `${scrollXWidth}px`;
|
|
1053
|
+
}
|
|
1054
|
+
const afterWrapper = getRefElem(elemStore['main-chart-after-wrapper']);
|
|
1055
|
+
const afterSvgElem = afterWrapper ? afterWrapper.firstElementChild : null;
|
|
1056
|
+
if (afterSvgElem) {
|
|
1057
|
+
afterSvgElem.style.width = `${scrollXWidth}px`;
|
|
1034
1058
|
}
|
|
1035
1059
|
calcScrollbar();
|
|
1036
1060
|
return nextTick();
|
|
@@ -1083,10 +1107,15 @@ export default defineVxeComponent({
|
|
|
1083
1107
|
if (scrollYSpaceEl) {
|
|
1084
1108
|
scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
|
|
1085
1109
|
}
|
|
1086
|
-
const
|
|
1087
|
-
const
|
|
1088
|
-
if (
|
|
1089
|
-
|
|
1110
|
+
const beforeWrapper = getRefElem(elemStore['main-chart-before-wrapper']);
|
|
1111
|
+
const beforeSvgElem = beforeWrapper ? beforeWrapper.firstElementChild : null;
|
|
1112
|
+
if (beforeSvgElem) {
|
|
1113
|
+
beforeSvgElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
|
|
1114
|
+
}
|
|
1115
|
+
const afterWrapper = getRefElem(elemStore['main-chart-after-wrapper']);
|
|
1116
|
+
const afterSvgElem = afterWrapper ? afterWrapper.firstElementChild : null;
|
|
1117
|
+
if (afterSvgElem) {
|
|
1118
|
+
afterSvgElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
|
|
1090
1119
|
}
|
|
1091
1120
|
reactData.scrollYTop = scrollYTop;
|
|
1092
1121
|
reactData.scrollYHeight = scrollYHeight;
|
package/es/gantt/src/gantt.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h, ref, computed, provide, reactive, onUnmounted, watch, nextTick, onMounted } from 'vue';
|
|
1
|
+
import { h, ref, computed, provide, reactive, onBeforeUnmount, onUnmounted, watch, nextTick, onMounted } from 'vue';
|
|
2
2
|
import { defineVxeComponent } from '../../ui/src/comp';
|
|
3
3
|
import XEUtils from 'xe-utils';
|
|
4
4
|
import { getLastZIndex, nextZIndex, isEnableConf, formatText } from '../../ui/src/utils';
|
|
@@ -21,9 +21,52 @@ function createInternalData() {
|
|
|
21
21
|
linkFromKeyMaps: {},
|
|
22
22
|
linkUniqueMaps: {},
|
|
23
23
|
uFoot: false,
|
|
24
|
-
resizeTableWidth: 0
|
|
25
|
-
// barTipTimeout: null
|
|
26
|
-
// dragBarRow: null
|
|
24
|
+
resizeTableWidth: 0,
|
|
25
|
+
// barTipTimeout: null,
|
|
26
|
+
// dragBarRow: null,
|
|
27
|
+
// dragLineRow: null,
|
|
28
|
+
dragLinkToStore: {
|
|
29
|
+
rowid: null,
|
|
30
|
+
type: 0
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
function createReactData() {
|
|
35
|
+
var _a;
|
|
36
|
+
return {
|
|
37
|
+
tableLoading: false,
|
|
38
|
+
proxyInited: false,
|
|
39
|
+
isZMax: false,
|
|
40
|
+
tableLinks: [],
|
|
41
|
+
tableData: [],
|
|
42
|
+
filterData: [],
|
|
43
|
+
formData: {},
|
|
44
|
+
sortData: [],
|
|
45
|
+
footerData: [],
|
|
46
|
+
tZindex: 0,
|
|
47
|
+
tablePage: {
|
|
48
|
+
total: 0,
|
|
49
|
+
pageSize: ((_a = getConfig().pager) === null || _a === void 0 ? void 0 : _a.pageSize) || 10,
|
|
50
|
+
currentPage: 1
|
|
51
|
+
},
|
|
52
|
+
showLeftView: true,
|
|
53
|
+
showRightView: true,
|
|
54
|
+
taskScaleList: [],
|
|
55
|
+
barTipStore: {
|
|
56
|
+
row: null,
|
|
57
|
+
content: '',
|
|
58
|
+
visible: false,
|
|
59
|
+
params: null
|
|
60
|
+
},
|
|
61
|
+
dragLinkFromStore: {
|
|
62
|
+
rowid: null,
|
|
63
|
+
type: 0
|
|
64
|
+
},
|
|
65
|
+
activeBarRowid: null,
|
|
66
|
+
activeLink: null,
|
|
67
|
+
isActiveCeLe: false,
|
|
68
|
+
linkList: [],
|
|
69
|
+
upLinkFlag: 0
|
|
27
70
|
};
|
|
28
71
|
}
|
|
29
72
|
const viewTypeLevelMaps = {
|
|
@@ -49,7 +92,6 @@ export default defineVxeComponent({
|
|
|
49
92
|
} }),
|
|
50
93
|
emits: ganttEmits,
|
|
51
94
|
setup(props, context) {
|
|
52
|
-
var _a;
|
|
53
95
|
const { slots, emit } = context;
|
|
54
96
|
const xID = XEUtils.uniqueId();
|
|
55
97
|
// 使用已安装的组件,如果未安装则不渲染
|
|
@@ -59,34 +101,7 @@ export default defineVxeComponent({
|
|
|
59
101
|
const VxeToolbarComponent = VxeUI.getComponent('VxeToolbar');
|
|
60
102
|
const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
|
|
61
103
|
const { computeSize } = useFns.useSize(props);
|
|
62
|
-
const reactData = reactive(
|
|
63
|
-
tableLoading: false,
|
|
64
|
-
proxyInited: false,
|
|
65
|
-
isZMax: false,
|
|
66
|
-
tableLinks: [],
|
|
67
|
-
tableData: [],
|
|
68
|
-
filterData: [],
|
|
69
|
-
formData: {},
|
|
70
|
-
sortData: [],
|
|
71
|
-
footerData: [],
|
|
72
|
-
tZindex: 0,
|
|
73
|
-
tablePage: {
|
|
74
|
-
total: 0,
|
|
75
|
-
pageSize: ((_a = getConfig().pager) === null || _a === void 0 ? void 0 : _a.pageSize) || 10,
|
|
76
|
-
currentPage: 1
|
|
77
|
-
},
|
|
78
|
-
showLeftView: true,
|
|
79
|
-
showRightView: true,
|
|
80
|
-
taskScaleList: [],
|
|
81
|
-
barTipStore: {
|
|
82
|
-
row: null,
|
|
83
|
-
content: '',
|
|
84
|
-
visible: false,
|
|
85
|
-
params: null
|
|
86
|
-
},
|
|
87
|
-
linkList: [],
|
|
88
|
-
upLinkFlag: 0
|
|
89
|
-
});
|
|
104
|
+
const reactData = reactive(createReactData());
|
|
90
105
|
const internalData = createInternalData();
|
|
91
106
|
const refElem = ref();
|
|
92
107
|
const refTable = ref();
|
|
@@ -197,6 +212,10 @@ export default defineVxeComponent({
|
|
|
197
212
|
const { scales } = taskViewOpts;
|
|
198
213
|
return scales;
|
|
199
214
|
});
|
|
215
|
+
const computeTaskLinkStyle = computed(() => {
|
|
216
|
+
const { lineType, lineWidth, lineStatus, lineColor } = computeTaskLinkOpts.value;
|
|
217
|
+
return `${lineType || ''}_${lineWidth || ''}_${lineStatus || ''}_${lineColor || ''}`;
|
|
218
|
+
});
|
|
200
219
|
const computeTitleField = computed(() => {
|
|
201
220
|
const taskOpts = computeTaskOpts.value;
|
|
202
221
|
return taskOpts.titleField || 'title';
|
|
@@ -1646,21 +1665,34 @@ export default defineVxeComponent({
|
|
|
1646
1665
|
$xeTable.handleToggleCheckRowEvent(evnt, params);
|
|
1647
1666
|
}
|
|
1648
1667
|
}
|
|
1668
|
+
reactData.isActiveCeLe = false;
|
|
1669
|
+
reactData.activeBarRowid = null;
|
|
1670
|
+
reactData.activeLink = null;
|
|
1649
1671
|
$xeGantt.dispatchEvent('task-cell-click', params, evnt);
|
|
1650
1672
|
},
|
|
1651
1673
|
handleTaskCellDblclickEvent(evnt, params) {
|
|
1652
1674
|
$xeGantt.dispatchEvent('task-cell-dblclick', params, evnt);
|
|
1653
1675
|
},
|
|
1654
1676
|
handleTaskBarClickEvent(evnt, params) {
|
|
1677
|
+
const $xeTable = refTable.value;
|
|
1678
|
+
const taskBarOpts = computeTaskBarOpts.value;
|
|
1679
|
+
const { linkCreatable } = taskBarOpts;
|
|
1680
|
+
const { row } = params;
|
|
1681
|
+
reactData.isActiveCeLe = !!linkCreatable;
|
|
1682
|
+
reactData.activeBarRowid = $xeTable ? $xeTable.getRowid(row) : row;
|
|
1683
|
+
reactData.activeLink = null;
|
|
1655
1684
|
$xeGantt.dispatchEvent('task-bar-click', params, evnt);
|
|
1656
1685
|
},
|
|
1657
1686
|
handleTaskBarDblclickEvent(evnt, params) {
|
|
1658
1687
|
$xeGantt.dispatchEvent('task-bar-dblclick', params, evnt);
|
|
1659
1688
|
},
|
|
1660
1689
|
triggerTaskBarTooltipEvent(evnt, params) {
|
|
1661
|
-
const { barTipStore } = reactData;
|
|
1662
|
-
const { dragBarRow } = internalData;
|
|
1663
|
-
if (dragBarRow) {
|
|
1690
|
+
const { barTipStore, activeLink } = reactData;
|
|
1691
|
+
const { dragBarRow, dragLineRow } = internalData;
|
|
1692
|
+
if (dragBarRow || dragLineRow) {
|
|
1693
|
+
return;
|
|
1694
|
+
}
|
|
1695
|
+
if (activeLink) {
|
|
1664
1696
|
return;
|
|
1665
1697
|
}
|
|
1666
1698
|
const taskBarTooltipOpts = computeTaskBarTooltipOpts.value;
|
|
@@ -2246,6 +2278,11 @@ export default defineVxeComponent({
|
|
|
2246
2278
|
handleTaskScaleConfig();
|
|
2247
2279
|
$xeGantt.refreshTaskView();
|
|
2248
2280
|
});
|
|
2281
|
+
watch(computeTaskLinkStyle, () => {
|
|
2282
|
+
if ($xeGantt.handleUpdateTaskLinkData) {
|
|
2283
|
+
$xeGantt.handleUpdateTaskLinkData();
|
|
2284
|
+
}
|
|
2285
|
+
});
|
|
2249
2286
|
hooks.forEach((options) => {
|
|
2250
2287
|
const { setupGantt } = options;
|
|
2251
2288
|
if (setupGantt) {
|
|
@@ -2255,15 +2292,15 @@ export default defineVxeComponent({
|
|
|
2255
2292
|
}
|
|
2256
2293
|
}
|
|
2257
2294
|
});
|
|
2258
|
-
if ($xeGantt.
|
|
2295
|
+
if ($xeGantt.handleTaskLoadLinks) {
|
|
2259
2296
|
if (props.links) {
|
|
2260
|
-
$xeGantt.
|
|
2297
|
+
$xeGantt.handleTaskLoadLinks(props.links);
|
|
2261
2298
|
}
|
|
2262
2299
|
}
|
|
2263
2300
|
handleTaskScaleConfig();
|
|
2264
2301
|
initPages();
|
|
2265
2302
|
onMounted(() => {
|
|
2266
|
-
if (!$xeGantt.
|
|
2303
|
+
if (!$xeGantt.handleUpdateTaskLinkData) {
|
|
2267
2304
|
if (props.links) {
|
|
2268
2305
|
warnLog('vxe.error.notProp', ['links']);
|
|
2269
2306
|
}
|
|
@@ -2314,6 +2351,9 @@ export default defineVxeComponent({
|
|
|
2314
2351
|
initGanttView();
|
|
2315
2352
|
globalEvents.on($xeGantt, 'keydown', handleGlobalKeydownEvent);
|
|
2316
2353
|
});
|
|
2354
|
+
onBeforeUnmount(() => {
|
|
2355
|
+
XEUtils.assign(reactData, createReactData());
|
|
2356
|
+
});
|
|
2317
2357
|
onUnmounted(() => {
|
|
2318
2358
|
globalEvents.off($xeGantt, 'keydown');
|
|
2319
2359
|
XEUtils.assign(internalData, createInternalData());
|
package/es/gantt/src/util.js
CHANGED
|
@@ -33,9 +33,6 @@ export function getTaskBarLeft(chartRest, viewCellWidth) {
|
|
|
33
33
|
export function getTaskBarWidth(chartRest, viewCellWidth) {
|
|
34
34
|
return Math.max(1, chartRest ? (Math.floor(viewCellWidth * chartRest.oWidthSize) - 1) : 0);
|
|
35
35
|
}
|
|
36
|
-
export function getTaskLinkKey(from, to) {
|
|
37
|
-
return `${from}_${to}`;
|
|
38
|
-
}
|
|
39
36
|
const taskTypeMaps = {
|
|
40
37
|
milestone: true
|
|
41
38
|
};
|
package/es/gantt/style.css
CHANGED
|
@@ -14,6 +14,11 @@
|
|
|
14
14
|
.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar {
|
|
15
15
|
border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
|
|
16
16
|
}
|
|
17
|
+
.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar .vxe-gantt-view--chart-bar-content-wrapper,
|
|
18
|
+
.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar .vxe-gantt-view--chart-custom-bar-content-wrapper, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar .vxe-gantt-view--chart-bar-content-wrapper,
|
|
19
|
+
.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar .vxe-gantt-view--chart-custom-bar-content-wrapper {
|
|
20
|
+
border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
|
|
21
|
+
}
|
|
17
22
|
.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar:hover::after, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar:hover::after {
|
|
18
23
|
border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
|
|
19
24
|
}
|
|
@@ -26,7 +31,6 @@
|
|
|
26
31
|
top: 50%;
|
|
27
32
|
left: 0;
|
|
28
33
|
transform: translateY(-50%);
|
|
29
|
-
overflow: hidden;
|
|
30
34
|
pointer-events: all;
|
|
31
35
|
}
|
|
32
36
|
.vxe-gantt-view--chart-bar.is--default,
|
|
@@ -35,8 +39,18 @@
|
|
|
35
39
|
background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
|
|
36
40
|
}
|
|
37
41
|
|
|
38
|
-
.vxe-gantt-view--chart-
|
|
42
|
+
.vxe-gantt-view--chart-bar-content-wrapper,
|
|
43
|
+
.vxe-gantt-view--chart-custom-bar-content-wrapper {
|
|
39
44
|
width: 100%;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.vxe-gantt-view--chart-bar-content-wrapper {
|
|
49
|
+
width: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: row;
|
|
53
|
+
align-items: center;
|
|
40
54
|
}
|
|
41
55
|
|
|
42
56
|
.vxe-gantt-view--chart-bar {
|