Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: 节点切换时记录小画布高度 && 子画布-节点树联动问题修复 #7395

Merged
merged 3 commits into from
Mar 18, 2024
Merged

fix: 节点切换时记录小画布高度 && 子画布-节点树联动问题修复 #7395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
08c0989
fix: 节点切换时记录小画布高度 #7390
ywywZhou Mar 18, 2024
7b3cd05
fix: 独立子流程任务操作后未刷新节点配置问题修复 #7393
ywywZhou Mar 18, 2024
9ce6e26
fix: 子画布-节点树联动问题修复 #7394
ywywZhou Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 13 additions & 8 deletions frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeCanvas/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div
class="sub-process"
:style="{ height: `${subProcessHeight}px` }"
:style="{ height: `${subprocessHeight}px` }"
v-bkloading="{ isLoading: loading, opacity: 1, zIndex: 100 }">
<TemplateCanvas
ref="subProcessCanvas"
Expand Down Expand Up @@ -30,7 +30,7 @@
<!--可拖拽-->
<template v-if="!loading">
<div class="resize-trigger" @mousedown.left="handleMousedown($event)"></div>
<i :class="['resize-proxy', 'top']" ref="resizeProxy"></i>
<i :class="['resize-proxy', 'top']" :style="{ top: `${subprocessHeight}px` }" ref="resizeProxy"></i>
<div class="resize-mask" ref="resizeMask"></div>
</template>
</div>
Expand Down Expand Up @@ -62,12 +62,15 @@
subprocessState: {
type: String,
value: ''
},
subprocessHeight: {
type: [Number, String],
default: 0
}
},
data () {
return {
subprocessLoading: false,
subProcessHeight: 160,
zoom: 0.75
}
},
Expand Down Expand Up @@ -183,9 +186,11 @@
setCanvasZoomPosition () {
if (!this.canvasData.locations) return
// 设置默认高度
const subprocessDom = document.querySelector('.sub-process')
const { top } = subprocessDom.getBoundingClientRect()
this.subProcessHeight = window.innerHeight - top - 320
if (!this.subprocessHeight) {
const subprocessDom = document.querySelector('.sub-process')
const { top } = subprocessDom.getBoundingClientRect()
this.$emit('updateSubprocessHeight', window.innerHeight - top - 320)
}
// 设置缩放比例
let jsFlowInstance = this.$refs.subProcessCanvas
jsFlowInstance = jsFlowInstance && jsFlowInstance.$refs.jsFlow
Expand Down Expand Up @@ -258,7 +263,7 @@
const resizeProxy = this.$refs.resizeProxy
resizeProxy.style.visibility = 'hidden'
resizeMask.style.display = 'none'
this.subProcessHeight = resizeProxy.style.top.slice(0, -2)
this.$emit('updateSubprocessHeight', resizeProxy.style.top.slice(0, -2))
document.removeEventListener('mousemove', this.handleMouseMove)
document.removeEventListener('mouseup', this.handleMouseUp)
},
Expand Down Expand Up @@ -326,7 +331,7 @@
}
}
.state-icon {
display: none;
display: none !important;
}
.task-node {
&.actived {
Expand Down
4 changes: 0 additions & 4 deletions ...ages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/TaskCondition.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,6 @@
}
}
.condition-form {
height: calc(100vh - 60px);
.form-wrap {
height: calc(100% - 49px);
}
.form-item {
margin-bottom: 20px;
.label {
Expand Down
2 changes: 1 addition & 1 deletion frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@
data () {
return {
randomKey: null,
isRecordLoading: true,
isRecordLoading: false,
curActiveTab: 'record',
loop: 1,
theExecuteTime: undefined,
Expand Down
66 changes: 51 additions & 15 deletions frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,10 @@
loading: {
type: Boolean,
default: true
},
subprocessId: {
type: String,
default: ''
}
},
data () {
Expand All @@ -69,7 +73,8 @@
nodeTargetMaps: {},
allCheckoutNodes: [],
subprocessLoading: false,
subNodesExpanded: [] // 节点树展开的独立子流程节点
subNodesExpanded: [], // 节点树展开的独立子流程节点
sourceCanvas: false // 是否通过子画布选中节点
}
},
watch: {
Expand Down Expand Up @@ -187,6 +192,7 @@
name: this.$t('开始节点'),
nodeLevel: 1,
parentId,
belongFlow: data.id,
subprocessStack,
expanded: false,
taskId,
Expand All @@ -197,6 +203,7 @@
name: this.$t('结束节点'),
nodeLevel: 1,
parentId,
belongFlow: data.id,
subprocessStack,
expanded: false,
taskId,
Expand Down Expand Up @@ -239,8 +246,8 @@
if (this.nodeIds[flowId] && this.nodeIds[flowId].includes(id)) {
const isBack = this.judgeNodeBack(id, id, [])
if (isBack) { // 打回节点
const lastNode = this.getMatchOrderedNode(ordered, lastId, false)
const existNode = this.getMatchOrderedNode(ordered, id, false)
const lastNode = this.getMatchOrderedNode(ordered, lastId, false, flowId)
const existNode = this.getMatchOrderedNode(ordered, id, false, flowId)
lastNode.isCallback = true
lastNode.callbackInfo = {
...existNode,
Expand All @@ -251,16 +258,16 @@
if (isConverge) { // 网关汇聚
return
} else { // 分支汇聚
const existNode = this.getMatchOrderedNode(ordered, id, false)
const existNode = this.getMatchOrderedNode(ordered, id, false, flowId)
const isSameLevel = existNode && existNode.nodeLevel === nodeLevel
if (isSameLevel) { // 同层次汇聚
const gatewayOrdered = this.getMatchOrderedNode(ordered, gatewayId, false)
const gatewayOrdered = this.getMatchOrderedNode(ordered, gatewayId, false, flowId)
const convergeIndex = gatewayOrdered.children.findIndex(item => item.id === id)
const branchIndex = gatewayOrdered.children.findIndex(item => item.id === branchId)
const branchInfo = gatewayOrdered.children.splice(branchIndex, 1)
gatewayOrdered.children.splice(convergeIndex, 0, branchInfo[0])
} else if (existNode) { // 跨层级汇聚
const lastNode = this.getMatchOrderedNode(ordered, lastId, false)
const lastNode = this.getMatchOrderedNode(ordered, lastId, false, flowId)
parentOrdered.push({
...existNode,
isLevelUp: lastNode.isLevelUp,
Expand All @@ -283,6 +290,7 @@
expanded: false,
nodeLevel: parentLevel ? parentLevel + nodeLevel : nodeLevel,
isLevelUp,
belongFlow: flowId, // 当前节点属于哪个画布下
taskId
}
if (parentId) {
Expand Down Expand Up @@ -335,6 +343,7 @@
value: evaluate,
nodeLevel: treeItem.nodeLevel + 1,
parentId,
belongFlow: flowId,
conditionType: 'condition', // 条件、条件并行网关
expanded: false,
target: flows[key].target,
Expand All @@ -354,6 +363,7 @@
value: evaluate,
nodeLevel: treeItem.nodeLevel + 1,
parentId,
belongFlow: flowId,
conditionType: 'default',
expanded: false,
target: flows[flow_id].target,
Expand All @@ -378,6 +388,7 @@
title: this.$t('并行'),
nodeLevel: treeItem.nodeLevel + 1,
parentId,
belongFlow: flowId,
expanded: false,
conditionType: 'parallel',
target: flows[key].target,
Expand Down Expand Up @@ -439,8 +450,8 @@
let result
const convergeNode = Object.values(this.convergeInfo).find(item => item.convergeNode === id)
if (convergeNode) {
result = this.getMatchOrderedNode(ordered, convergeNode.id, true)
const gatewayInfo = this.getMatchOrderedNode(ordered, convergeNode.id, false)
result = this.getMatchOrderedNode(ordered, convergeNode.id, true, flowId)
const gatewayInfo = this.getMatchOrderedNode(ordered, convergeNode.id, false, flowId)
const { gatewayId, nodeLevel } = result[0]
treeItem.nodeLevel = nodeLevel
treeItem.style = gatewayInfo.style
Expand All @@ -456,7 +467,7 @@
nextNodeInfo.isLevelUp = treeItem.isLevelUp
nextNodeInfo.style = treeItem.style
} else {
result = this.getMatchOrderedNode(ordered, gatewayId, false)
result = this.getMatchOrderedNode(ordered, gatewayId, false, flowId)
if (result) {
treeItem.nodeLevel = result.children[0].nodeLevel
treeItem.style = result.children[0].style
Expand Down Expand Up @@ -487,6 +498,7 @@
conditions.forEach(item => {
item.style = `margin-left: ${item.parentId ? 16 : marginLeft + 33}px`
item.subprocessStack = treeItem.subprocessStack
item.belongFlow = flowId
treeItem.children.push(item)
this.retrieveLines(
flowId,
Expand Down Expand Up @@ -522,14 +534,14 @@
}
}
},
getMatchOrderedNode (ordered, id, isParent) {
getMatchOrderedNode (ordered, id, isParent, flowId) {
let result
ordered.some(item => {
if (item.id === id) {
if (item.id === id && item.belongFlow === flowId) {
result = isParent ? ordered : item
return true
} else if (item.children?.length) {
result = this.getMatchOrderedNode(item.children, id, isParent)
result = this.getMatchOrderedNode(item.children, id, isParent, flowId)
return result && !!Object.keys(result).length
}
return false
Expand Down Expand Up @@ -882,7 +894,7 @@
}
},
// 获取节点树节点详情
getNodeInfo (data, rootId, nodeId) {
getNodeInfo (data, rootId, nodeId, eventSource) {
let nodes = data
if (rootId) {
rootId.split('-').forEach(id => {
Expand All @@ -896,11 +908,24 @@
}
let nodeInfo
nodes.some(item => {
/**
* 由子画布获取节点详情，可能出现多个节点id相同的问题
* 例如：流程套娃、多个相同的子流程
* 故额外判断节点所属的画布是否匹配
*/
if (item.id === nodeId) {
if (eventSource === 'canvas') {
this.sourceCanvas = true
if (item.belongFlow === this.subprocessId) {
nodeInfo = item
return true
}
return false
}
nodeInfo = item
return true
} else if (item.children?.length) {
nodeInfo = this.getNodeInfo(item.children, '', nodeId)
nodeInfo = this.getNodeInfo(item.children, '', nodeId, eventSource)
return !!nodeInfo
}
})
Expand All @@ -912,8 +937,19 @@
},
setDefaultActiveId (treeData = [], id) {
return treeData.some(item => {
// 由子画布设置默认id时需要判断节点所属的画布是否匹配
if (item.id === id) {
item.expanded = !!item.isSubProcess || !!item.conditionType || item.isGateway
const isExpand = !!item.isSubProcess || !!item.conditionType || item.isGateway
// sourceCanvas: 是否通过子画布设置默认id
if (this.sourceCanvas) {
this.sourceCanvas = false
if (item.belongFlow === this.subprocessId) {
item.expanded = isExpand
return true
}
return false
}
item.expanded = isExpand
return true
} else if (item.children?.length) {
if (item.expanded) {
Expand Down
10 changes: 7 additions & 3 deletions frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
:execute-info="executeInfo"
:node-state-mapping="nodeStateMapping"
:node-detail-config="nodeDetailConfig"
:subprocess-id="subprocessPipeline && subprocessPipeline.id"
@updateSubprocessLoading="subprocessLoading = $event"
@updateParentPipelineData="updateParentPipelineData"
@updateSubprocessState="updateSubprocessState"
Expand All @@ -44,6 +45,8 @@
:node-state-mapping="nodeStateMapping"
:subprocess-state="subprocessState"
:subprocess-pipeline="subprocessPipeline"
:subprocess-height="subprocessHeight"
@updateSubprocessHeight="subprocessHeight = $event"
@onNodeClick="handleSubCanvasNodeClick">
</NodeCanvas>
<NodeExecuteInfo
Expand Down Expand Up @@ -156,6 +159,7 @@
return {
canvasRandomKey: null,
executeInfoRandomKey: null,
subprocessHeight: 0,
loading: true,
executeInfo: {},
theExecuteTime: undefined,
Expand Down Expand Up @@ -415,7 +419,7 @@
if (nodeId === this.subprocessPipeline.id) {
parentId = rootNode ? `${rootNode}-${nodeId}` : nodeId
}
const nodeInfo = this.getNodeInfo(parentId, node)
const nodeInfo = this.getNodeInfo(parentId, node, 'canvas')
if (nodeInfo) {
nodeInfo && this.onSelectNode(nodeInfo)
const parentInstance = this.$parent.$parent
Expand Down Expand Up @@ -518,11 +522,11 @@
this.loadSubprocessState()
},
// 获取节点树节点详情
getNodeInfo (rootId, nodeId) {
getNodeInfo (rootId, nodeId, eventSource) {
let nodeInfo = null
const nodeTreeRef = this.$refs.nodeTree
if (nodeTreeRef) {
nodeInfo = nodeTreeRef.getNodeInfo(nodeTreeRef.nodeData, rootId, nodeId)
nodeInfo = nodeTreeRef.getNodeInfo(nodeTreeRef.nodeData, rootId, nodeId, eventSource)
}
return nodeInfo
},
Expand Down
6 changes: 2 additions & 4 deletions frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2246,10 +2246,8 @@
const { root_node, component_code, taskId } = this.nodeDetailConfig
// 重新拉取父流程状态
await this.loadTaskStatus()
// 非独立子流程节点重新加载节点配置
if (component_code !== 'subprocess_plugin') {
await execInfoInstance.loadNodeInfo()
}
// 重新加载节点配置
await execInfoInstance.loadNodeInfo()
// 重新拉取所有独立子流程状态
execInfoInstance.suspendLines = []
Object.values(execInfoInstance.subprocessTasks).forEach(item => {
Expand Down
Loading