vxe-gantt 3.3.0 → 3.3.2
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/gantt-chart.js +121 -76
- package/es/gantt/style.css +27 -16
- 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 +1 -1
- package/es/ui/src/log.js +1 -1
- package/es/vxe-gantt/style.css +27 -16
- package/es/vxe-gantt/style.min.css +1 -1
- package/lib/gantt/src/gantt-chart.js +134 -88
- package/lib/gantt/src/gantt-chart.min.js +1 -1
- package/lib/gantt/style/style.css +27 -16
- package/lib/gantt/style/style.min.css +1 -1
- package/lib/index.umd.js +136 -90
- 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 +1 -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 +27 -16
- package/lib/vxe-gantt/style/style.min.css +1 -1
- package/package.json +3 -3
- package/packages/gantt/src/gantt-chart.ts +125 -79
- package/styles/components/gantt-module/gantt-chart.scss +22 -11
|
@@ -54,8 +54,10 @@ export default defineVxeComponent({
|
|
|
54
54
|
|
|
55
55
|
const ganttProps = $xeGantt
|
|
56
56
|
const ganttReactData = $xeGantt.reactData
|
|
57
|
+
const ganttInternalData = $xeGantt.internalData
|
|
57
58
|
const ganttSlots = $xeGantt.$scopedSlots
|
|
58
59
|
const taskBarSlot = ganttSlots.taskBar || ganttSlots['task-bar']
|
|
60
|
+
const taskBarOverviewSlot = ganttSlots.taskBarOverview || ganttSlots['task-bar-overview']
|
|
59
61
|
|
|
60
62
|
const { treeConfig, taskBarMilestoneConfig, taskBarSubviewConfig } = ganttProps
|
|
61
63
|
const { activeLink, activeBarRowid } = ganttReactData
|
|
@@ -125,50 +127,54 @@ export default defineVxeComponent({
|
|
|
125
127
|
} = {}
|
|
126
128
|
if (showTooltip) {
|
|
127
129
|
ctOns.mouseover = (evnt: MouseEvent) => {
|
|
130
|
+
const { dragBarRow } = ganttInternalData
|
|
128
131
|
const ttParams = Object.assign({ $event: evnt }, ctParams)
|
|
132
|
+
if (!dragBarRow) {
|
|
133
|
+
$xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams)
|
|
134
|
+
}
|
|
129
135
|
$xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt)
|
|
130
136
|
}
|
|
131
137
|
ctOns.mouseleave = (evnt: MouseEvent) => {
|
|
138
|
+
const { dragBarRow } = ganttInternalData
|
|
132
139
|
const ttParams = Object.assign({ $event: evnt }, ctParams)
|
|
140
|
+
if (!dragBarRow) {
|
|
141
|
+
$xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams)
|
|
142
|
+
}
|
|
133
143
|
$xeGantt.dispatchEvent('task-bar-mouseleave', ttParams, evnt)
|
|
134
144
|
}
|
|
135
145
|
}
|
|
136
146
|
|
|
137
|
-
if (
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
} else {
|
|
146
|
-
if (isSubview && treeConfig && rowChildren && rowChildren.length) {
|
|
147
|
-
if (isExpandTree) {
|
|
148
|
-
if (taskBarSubviewOpts.showOverview) {
|
|
149
|
-
cbVNs.push(
|
|
147
|
+
if (isSubview && treeConfig && rowChildren && rowChildren.length) {
|
|
148
|
+
if (isExpandTree) {
|
|
149
|
+
if (taskBarSubviewOpts.showOverview) {
|
|
150
|
+
cbVNs.push(
|
|
151
|
+
h('div', {
|
|
152
|
+
key: 'vcso',
|
|
153
|
+
class: 'vxe-gantt-view--chart-subview-wrapper is--overview'
|
|
154
|
+
}, [
|
|
150
155
|
h('div', {
|
|
151
|
-
key:
|
|
152
|
-
|
|
156
|
+
key: rowid,
|
|
157
|
+
attrs: {
|
|
158
|
+
rowid: rowid
|
|
159
|
+
},
|
|
160
|
+
class: ['vxe-gantt-view--chart-subview-row', {
|
|
161
|
+
'is--progress': showProgress,
|
|
162
|
+
'is--round': round,
|
|
163
|
+
'is--move': moveable
|
|
164
|
+
}]
|
|
153
165
|
}, [
|
|
154
166
|
h('div', {
|
|
155
|
-
key: rowid,
|
|
156
167
|
attrs: {
|
|
157
168
|
rowid: rowid
|
|
158
169
|
},
|
|
159
|
-
class: ['vxe-gantt-view--chart-subview-
|
|
160
|
-
'is--progress': showProgress,
|
|
161
|
-
'is--round': round,
|
|
162
|
-
'is--move': moveable
|
|
163
|
-
}]
|
|
170
|
+
class: [taskBarOverviewSlot ? 'vxe-gantt-view--chart-subview-custom-bar' : 'vxe-gantt-view--chart-subview-bar', `is--${renderTaskType}`]
|
|
164
171
|
}, [
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
h('div', {
|
|
172
|
+
taskBarOverviewSlot
|
|
173
|
+
? h('div', {
|
|
174
|
+
key: 'cbc',
|
|
175
|
+
class: 'vxe-gantt-view--chart-subview-custom-bar-content-wrapper'
|
|
176
|
+
}, $xeGantt.callSlot(taskBarOverviewSlot, barParams, h))
|
|
177
|
+
: h('div', {
|
|
172
178
|
class: 'vxe-gantt-view--chart-subview-bar-content-wrapper'
|
|
173
179
|
}, [
|
|
174
180
|
showContent
|
|
@@ -177,64 +183,95 @@ export default defineVxeComponent({
|
|
|
177
183
|
}, title)
|
|
178
184
|
: renderEmptyElement($xeGantt)
|
|
179
185
|
])
|
|
180
|
-
])
|
|
181
186
|
])
|
|
182
187
|
])
|
|
183
|
-
)
|
|
188
|
+
])
|
|
189
|
+
)
|
|
190
|
+
}
|
|
191
|
+
} else {
|
|
192
|
+
const cbcVNs: VNode[] = []
|
|
193
|
+
XEUtils.eachTree(rowChildren, childRow => {
|
|
194
|
+
const childBarParams = { $gantt: $xeGantt, row: childRow, scaleType: scaleUnit }
|
|
195
|
+
const childBarStyObj = (barStyle ? (isBarRowStyle ? barStyle(childBarParams) : barStyle) : {}) || {}
|
|
196
|
+
const { round } = childBarStyObj
|
|
197
|
+
|
|
198
|
+
const childRowid = $xeTable.getRowid(childRow)
|
|
199
|
+
let childTitle = getStringValue(XEUtils.get(childRow, titleField))
|
|
200
|
+
const childProgressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(childRow, progressField)))) : 0
|
|
201
|
+
const childRenderTaskType = getTaskType(XEUtils.get(childRow, typeField))
|
|
202
|
+
const isChildSubview = !!(hasEnableConf(taskBarSubviewConfig, taskBarSubviewOpts) && hasSubviewTask(childRenderTaskType))
|
|
203
|
+
|
|
204
|
+
if (isChildSubview) {
|
|
205
|
+
return
|
|
184
206
|
}
|
|
185
|
-
} else {
|
|
186
|
-
const cbcVNs: VNode[] = []
|
|
187
|
-
XEUtils.eachTree(rowChildren, childRow => {
|
|
188
|
-
const childRowid = $xeTable.getRowid(childRow)
|
|
189
|
-
let childTitle = getStringValue(XEUtils.get(childRow, titleField))
|
|
190
|
-
const childProgressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(childRow, progressField)))) : 0
|
|
191
|
-
const childRenderTaskType = getTaskType(XEUtils.get(childRow, typeField))
|
|
192
|
-
const isChildSubview = !!(hasEnableConf(taskBarSubviewConfig, taskBarSubviewOpts) && hasSubviewTask(childRenderTaskType))
|
|
193
|
-
|
|
194
|
-
if (isChildSubview) {
|
|
195
|
-
return
|
|
196
|
-
}
|
|
197
207
|
|
|
198
|
-
|
|
199
|
-
|
|
208
|
+
const childVbStyle: VxeComponentStyleType = {}
|
|
209
|
+
const childVpStyle: VxeComponentStyleType = {
|
|
210
|
+
width: `${childProgressValue || 0}%`
|
|
211
|
+
}
|
|
212
|
+
if (isBarRowStyle) {
|
|
213
|
+
const { bgColor, completedBgColor } = childBarStyObj
|
|
214
|
+
if (bgColor) {
|
|
215
|
+
childVbStyle.backgroundColor = bgColor
|
|
200
216
|
}
|
|
201
|
-
if (
|
|
202
|
-
|
|
203
|
-
if (completedBgColor) {
|
|
204
|
-
vpcStyle.backgroundColor = completedBgColor
|
|
205
|
-
}
|
|
217
|
+
if (completedBgColor) {
|
|
218
|
+
childVpStyle.backgroundColor = completedBgColor
|
|
206
219
|
}
|
|
220
|
+
}
|
|
207
221
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
222
|
+
if (contentMethod) {
|
|
223
|
+
childTitle = getStringValue(contentMethod({ row: childRow, title: childTitle, scaleType: scaleUnit }))
|
|
224
|
+
}
|
|
211
225
|
|
|
212
|
-
|
|
226
|
+
cbcVNs.push(
|
|
227
|
+
h('div', {
|
|
228
|
+
key: childRowid,
|
|
229
|
+
attrs: {
|
|
230
|
+
rowid: childRowid
|
|
231
|
+
},
|
|
232
|
+
class: ['vxe-gantt-view--chart-subview-row', `is--${childRenderTaskType}`, {
|
|
233
|
+
'is--progress': showProgress,
|
|
234
|
+
'is--round': round,
|
|
235
|
+
'is--move': moveable,
|
|
236
|
+
'row--pending': !!pendingRowFlag && !!pendingRowMaps[childRowid]
|
|
237
|
+
}]
|
|
238
|
+
}, [
|
|
213
239
|
h('div', {
|
|
214
|
-
key: childRowid,
|
|
215
240
|
attrs: {
|
|
216
241
|
rowid: childRowid
|
|
217
242
|
},
|
|
218
|
-
class: ['vxe-gantt-view--chart-subview-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
}]
|
|
224
|
-
}, [
|
|
225
|
-
h('div', {
|
|
226
|
-
attrs: {
|
|
227
|
-
rowid: childRowid
|
|
243
|
+
class: [taskBarSlot ? 'vxe-gantt-view--chart-subview-custom-bar' : 'vxe-gantt-view--chart-subview-bar', `is--${childRenderTaskType}`],
|
|
244
|
+
on: {
|
|
245
|
+
click (evnt: MouseEvent) {
|
|
246
|
+
evnt.stopPropagation()
|
|
247
|
+
$xeGantt.handleTaskBarClickEvent(evnt, barParams)
|
|
228
248
|
},
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
249
|
+
dblclick (evnt: MouseEvent) {
|
|
250
|
+
evnt.stopPropagation()
|
|
251
|
+
$xeGantt.handleTaskBarDblclickEvent(evnt, barParams)
|
|
252
|
+
},
|
|
253
|
+
mousedown (evnt: MouseEvent) {
|
|
254
|
+
evnt.stopPropagation()
|
|
255
|
+
if ($xeGantt.handleTaskBarMousedownEvent) {
|
|
256
|
+
$xeGantt.handleTaskBarMousedownEvent(evnt, barParams)
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
}, [
|
|
261
|
+
taskBarSlot
|
|
262
|
+
? h('div', {
|
|
263
|
+
key: 'cbc',
|
|
264
|
+
class: 'vxe-gantt-view--chart-subview-custom-bar-content-wrapper',
|
|
265
|
+
on: ctOns
|
|
266
|
+
}, $xeGantt.callSlot(taskBarSlot, childBarParams, h))
|
|
267
|
+
: h('div', {
|
|
268
|
+
class: 'vxe-gantt-view--chart-subview-bar-content-wrapper',
|
|
269
|
+
on: ctOns
|
|
233
270
|
}, [
|
|
234
271
|
showProgress
|
|
235
272
|
? h('div', {
|
|
236
273
|
class: 'vxe-gantt-view--chart-progress',
|
|
237
|
-
style:
|
|
274
|
+
style: childVpStyle
|
|
238
275
|
})
|
|
239
276
|
: renderEmptyElement($xeGantt),
|
|
240
277
|
showContent
|
|
@@ -243,18 +280,27 @@ export default defineVxeComponent({
|
|
|
243
280
|
}, childTitle)
|
|
244
281
|
: renderEmptyElement($xeGantt)
|
|
245
282
|
])
|
|
246
|
-
])
|
|
247
283
|
])
|
|
248
|
-
)
|
|
249
|
-
}, { children: childrenField })
|
|
250
|
-
|
|
251
|
-
cbVNs.push(
|
|
252
|
-
h('div', {
|
|
253
|
-
key: 'vcsc',
|
|
254
|
-
class: 'vxe-gantt-view--chart-subview-wrappe is--inliner'
|
|
255
|
-
}, cbcVNs)
|
|
284
|
+
])
|
|
256
285
|
)
|
|
257
|
-
}
|
|
286
|
+
}, { children: childrenField })
|
|
287
|
+
|
|
288
|
+
cbVNs.push(
|
|
289
|
+
h('div', {
|
|
290
|
+
key: 'vcsc',
|
|
291
|
+
class: 'vxe-gantt-view--chart-subview-wrappe is--inliner'
|
|
292
|
+
}, cbcVNs)
|
|
293
|
+
)
|
|
294
|
+
}
|
|
295
|
+
} else {
|
|
296
|
+
if (taskBarSlot) {
|
|
297
|
+
cbVNs.push(
|
|
298
|
+
h('div', {
|
|
299
|
+
key: 'cbc',
|
|
300
|
+
class: 'vxe-gantt-view--chart-custom-bar-content-wrapper',
|
|
301
|
+
on: ctOns
|
|
302
|
+
}, $xeGantt.callSlot(taskBarSlot, barParams, h))
|
|
303
|
+
)
|
|
258
304
|
} else if (isMilestone) {
|
|
259
305
|
const { icon, iconStatus, iconStyle } = taskBarMilestoneOpts
|
|
260
306
|
const tbmParams = { $gantt: $xeGantt, row }
|
|
@@ -40,16 +40,19 @@
|
|
|
40
40
|
}
|
|
41
41
|
.vxe-gantt-view--chart-subview-row {
|
|
42
42
|
&.row--pending {
|
|
43
|
-
.vxe-gantt-view--chart-subview-bar
|
|
43
|
+
.vxe-gantt-view--chart-subview-bar,
|
|
44
|
+
.vxe-gantt-view--chart-subview-custom-bar {
|
|
44
45
|
color: var(--vxe-ui-font-disabled-color);
|
|
45
46
|
opacity: 0.5;
|
|
46
47
|
text-decoration: line-through;
|
|
47
48
|
}
|
|
48
49
|
}
|
|
49
50
|
&.is--round {
|
|
50
|
-
& > .vxe-gantt-view--chart-subview-bar
|
|
51
|
+
& > .vxe-gantt-view--chart-subview-bar,
|
|
52
|
+
& > .vxe-gantt-view--chart-subview-custom-bar {
|
|
51
53
|
border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
|
|
52
|
-
.vxe-gantt-view--chart-subview-bar-content-wrapper
|
|
54
|
+
.vxe-gantt-view--chart-subview-bar-content-wrapper,
|
|
55
|
+
.vxe-gantt-view--chart-subview-custom-bar-content-wrapper {
|
|
53
56
|
border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
|
|
54
57
|
}
|
|
55
58
|
&:hover {
|
|
@@ -72,8 +75,9 @@
|
|
|
72
75
|
}
|
|
73
76
|
|
|
74
77
|
.vxe-gantt-view--chart-bar,
|
|
78
|
+
.vxe-gantt-view--chart-custom-bar,
|
|
75
79
|
.vxe-gantt-view--chart-subview-bar,
|
|
76
|
-
.vxe-gantt-view--chart-custom-bar {
|
|
80
|
+
.vxe-gantt-view--chart-subview-custom-bar {
|
|
77
81
|
display: flex;
|
|
78
82
|
flex-direction: row;
|
|
79
83
|
position: absolute;
|
|
@@ -85,7 +89,8 @@
|
|
|
85
89
|
|
|
86
90
|
.vxe-gantt-view--chart-row {
|
|
87
91
|
&.is--progress {
|
|
88
|
-
& > .vxe-gantt-view--chart-bar
|
|
92
|
+
& > .vxe-gantt-view--chart-bar,
|
|
93
|
+
& > .vxe-gantt-view--chart-custom-bar {
|
|
89
94
|
&.is--default {
|
|
90
95
|
color: #ffffff;
|
|
91
96
|
background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
|
|
@@ -93,7 +98,8 @@
|
|
|
93
98
|
}
|
|
94
99
|
}
|
|
95
100
|
&:not(.is--progress) {
|
|
96
|
-
& > .vxe-gantt-view--chart-bar
|
|
101
|
+
& > .vxe-gantt-view--chart-bar,
|
|
102
|
+
& > .vxe-gantt-view--chart-custom-bar {
|
|
97
103
|
&.is--default {
|
|
98
104
|
color: #ffffff;
|
|
99
105
|
background-color: var(--vxe-ui-gantt-view-task-bar-completed-background-color);
|
|
@@ -103,7 +109,8 @@
|
|
|
103
109
|
}
|
|
104
110
|
.vxe-gantt-view--chart-subview-row {
|
|
105
111
|
&.is--progress {
|
|
106
|
-
& > .vxe-gantt-view--chart-subview-bar
|
|
112
|
+
& > .vxe-gantt-view--chart-subview-bar,
|
|
113
|
+
& > .vxe-gantt-view--chart-subview-custom-bar {
|
|
107
114
|
&.is--subview {
|
|
108
115
|
color: #ffffff;
|
|
109
116
|
background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
|
|
@@ -115,7 +122,8 @@
|
|
|
115
122
|
}
|
|
116
123
|
}
|
|
117
124
|
&:not(.is--progress) {
|
|
118
|
-
& > .vxe-gantt-view--chart-subview-bar
|
|
125
|
+
& > .vxe-gantt-view--chart-subview-bar,
|
|
126
|
+
& > .vxe-gantt-view--chart-subview-custom-bar {
|
|
119
127
|
&.is--subview {
|
|
120
128
|
color: #ffffff;
|
|
121
129
|
background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
|
|
@@ -130,7 +138,8 @@
|
|
|
130
138
|
|
|
131
139
|
.vxe-gantt-view--chart-bar-content-wrapper,
|
|
132
140
|
.vxe-gantt-view--chart-custom-bar-content-wrapper,
|
|
133
|
-
.vxe-gantt-view--chart-subview-bar-content-wrapper
|
|
141
|
+
.vxe-gantt-view--chart-subview-bar-content-wrapper,
|
|
142
|
+
.vxe-gantt-view--chart-subview-custom-bar-content-wrapper {
|
|
134
143
|
width: 100%;
|
|
135
144
|
overflow: hidden;
|
|
136
145
|
}
|
|
@@ -143,9 +152,11 @@
|
|
|
143
152
|
align-items: center;
|
|
144
153
|
}
|
|
145
154
|
.vxe-gantt-view--chart-bar,
|
|
146
|
-
.vxe-gantt-view--chart-
|
|
155
|
+
.vxe-gantt-view--chart-custom-bar,
|
|
156
|
+
.vxe-gantt-view--chart-subview-bar,
|
|
157
|
+
.vxe-gantt-view--chart-subview-custom-bar {
|
|
147
158
|
align-items: center;
|
|
148
|
-
height: var(--vxe-ui-gantt-view-chart-bar-height);
|
|
159
|
+
min-height: var(--vxe-ui-gantt-view-chart-bar-height);
|
|
149
160
|
&.is--default {
|
|
150
161
|
&:hover {
|
|
151
162
|
&::after {
|