From bdda2f2877c83ea2c3b10e773cd1c768344aa226 Mon Sep 17 00:00:00 2001 From: yiwenZhou <67539158+ywywZhou@users.noreply.github.com> Date: Wed, 6 Mar 2024 15:54:01 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E8=8A=82=E7=82=B9=E6=89=A7=E8=A1=8C?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=87=8D=E6=9E=84=20--ignore=20(#73?= =?UTF-8?q?71)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: 节点执行详情页重构 --ignore # Reviewed, transaction id: 3390 * fix: 代码comment问题修复 --ignore # Reviewed, transaction id: 3410 --- .../pages/task/TaskExecute/ExecuteInfo.vue | 2094 ----------------- .../TaskExecute/ExecuteInfo/ExecuteLog.vue | 318 --- .../components/NodeAction/index.vue | 264 +++ .../components/NodeCanvas/index.vue | 426 ++++ .../components}/ExecuteInfoForm.vue | 36 +- .../ExecuteRecord/components}/InputParams.vue | 2 +- .../components}/OutputParams.vue | 0 .../components/ExecuteRecord/index.vue} | 320 +-- .../NodeExecuteInfo/components}/NodeLog.vue | 0 .../components}/NodeOperationFlow.vue | 0 .../components/TaskCondition.vue | 262 +++ .../components/common}/JsonschemaForm.vue | 52 +- .../components/NodeExecuteInfo/index.vue | 690 ++++++ .../NodeTree/components/NodeTreeItem.vue | 407 ++++ .../ExecuteInfo/components/NodeTree/index.vue | 856 +++++++ .../task/TaskExecute/ExecuteInfo/index.vue | 859 +++++++ .../pages/task/TaskExecute/TaskOperation.vue | 602 +---- 17 files changed, 3984 insertions(+), 3204 deletions(-) delete mode 100644 frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue delete mode 100644 frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteLog.vue create mode 100644 frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeAction/index.vue create mode 100644 frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeCanvas/index.vue rename frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/{ => components/NodeExecuteInfo/components}/ExecuteInfoForm.vue (95%) rename frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/{ => components/NodeExecuteInfo/components/ExecuteRecord/components}/InputParams.vue (99%) rename frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/{ => components/NodeExecuteInfo/components/ExecuteRecord/components}/OutputParams.vue (100%) rename frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/{ExecuteRecord.vue => components/NodeExecuteInfo/components/ExecuteRecord/index.vue} (60%) rename frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/{ => components/NodeExecuteInfo/components}/NodeLog.vue (100%) rename frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/{ => components/NodeExecuteInfo/components}/NodeOperationFlow.vue (100%) create mode 100644 frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/TaskCondition.vue rename frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/{ => components/NodeExecuteInfo/components/common}/JsonschemaForm.vue (61%) create mode 100644 frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/index.vue create mode 100644 frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/components/NodeTreeItem.vue create mode 100644 frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/index.vue create mode 100644 frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/index.vue diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue deleted file mode 100644 index 55a3dc0640..0000000000 --- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue +++ /dev/null @@ -1,2094 +0,0 @@ -/** -* Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community -* Edition) available. -* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. -* Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License. -* You may obtain a copy of the License at -* http://opensource.org/licenses/MIT -* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on -* an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the -* specific language governing permissions and limitations under the License. -*/ - - - - diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteLog.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteLog.vue deleted file mode 100644 index 629719f040..0000000000 --- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteLog.vue +++ /dev/null @@ -1,318 +0,0 @@ - - - - - diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeAction/index.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeAction/index.vue new file mode 100644 index 0000000000..a09ae83911 --- /dev/null +++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeAction/index.vue @@ -0,0 +1,264 @@ + + + diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeCanvas/index.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeCanvas/index.vue new file mode 100644 index 0000000000..a9843280a5 --- /dev/null +++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeCanvas/index.vue @@ -0,0 +1,426 @@ + + + + + diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteInfoForm.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/ExecuteInfoForm.vue similarity index 95% rename from frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteInfoForm.vue rename to frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/ExecuteInfoForm.vue index 8fef9f58b5..f288eceecf 100644 --- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteInfoForm.vue +++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/ExecuteInfoForm.vue @@ -15,11 +15,11 @@
  • @@ -87,12 +87,11 @@ @@ -141,13 +140,13 @@ import tools from '@/utils/tools.js' import atomFilter from '@/utils/atomFilter.js' import RenderForm from '@/components/common/RenderForm/RenderForm.vue' - import JsonschemaInputParams from '@/pages/template/TemplateEdit/NodeConfig/JsonschemaInputParams.vue' + import JsonschemaForm from './common/JsonschemaForm.vue' import NoData from '@/components/common/base/NoData.vue' export default { components: { RenderForm, - JsonschemaInputParams, + JsonschemaForm, NoData }, props: { @@ -200,7 +199,9 @@ subflowForms: {}, taskNodeLoading: false, subflowLoading: false, - constantsLoading: false + constantsLoading: false, + pluginVersion: '', + pluginName: '' } }, computed: { @@ -210,7 +211,8 @@ }), ...mapState({ 'pluginConfigs': state => state.atomForm.config, - 'pluginOutput': state => state.atomForm.output + 'pluginOutput': state => state.atomForm.output, + 'atomFormInfo': state => state.atomForm.form }), timeoutTextValue () { const timeoutConfig = this.nodeActivity['timeout_config'] @@ -264,11 +266,23 @@ ]), ...mapActions('atomForm/', [ 'loadAtomConfig', - 'loadPluginServiceDetail' + 'loadPluginServiceDetail', + 'loadPluginServiceAppDetail' ]), // 初始化节点数据 async initData () { try { + // 获取插件名称和版本 + const { component_code: componentCode, version } = this.nodeDetailConfig + this.pluginVersion = this.isThirdPartyNode ? this.executeInfo.inputs.plugin_version : version + if (this.isThirdPartyNode) { + const resp = await this.loadPluginServiceAppDetail({ plugin_code: this.thirdPartyNodeCode }) + this.pluginName = resp.data.name + } else if (atomFilter.isConfigExists(componentCode, version, this.atomFormInfo)) { + const pluginInfo = this.atomFormInfo[componentCode][version] + this.pluginName = `${pluginInfo.group_name}-${pluginInfo.name}` + } + // 获取对应模板配置 const tplConfig = await this.getNodeSnapshotConfig(this.nodeDetailConfig) this.templateConfig = tplConfig.data || { ...this.nodeActivity, isOldData: true } || {} diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/InputParams.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/ExecuteRecord/components/InputParams.vue similarity index 99% rename from frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/InputParams.vue rename to frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/ExecuteRecord/components/InputParams.vue index 63f7354ce0..1397754dab 100644 --- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/InputParams.vue +++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/ExecuteRecord/components/InputParams.vue @@ -49,7 +49,7 @@ import VueJsonPretty from 'vue-json-pretty' import NoData from '@/components/common/base/NoData.vue' import RenderForm from '@/components/common/RenderForm/RenderForm.vue' - import JsonschemaForm from './JsonschemaForm.vue' + import JsonschemaForm from '../../common/JsonschemaForm.vue' import FullCodeEditor from '@/components/common/FullCodeEditor.vue' import tools from '@/utils/tools.js' export default { diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/OutputParams.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/ExecuteRecord/components/OutputParams.vue similarity index 100% rename from frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/OutputParams.vue rename to frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/ExecuteRecord/components/OutputParams.vue diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteRecord.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/ExecuteRecord/index.vue similarity index 60% rename from frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteRecord.vue rename to frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/ExecuteRecord/index.vue index 14ea4238c1..941a80753f 100644 --- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteRecord.vue +++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/ExecuteRecord/index.vue @@ -55,8 +55,8 @@ + + diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/JsonschemaForm.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/common/JsonschemaForm.vue similarity index 61% rename from frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/JsonschemaForm.vue rename to frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/common/JsonschemaForm.vue index b03274472a..e1d7c50bfd 100644 --- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/JsonschemaForm.vue +++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/common/JsonschemaForm.vue @@ -44,30 +44,30 @@ } diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/index.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/index.vue new file mode 100644 index 0000000000..14a3d475a1 --- /dev/null +++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/index.vue @@ -0,0 +1,690 @@ + + + + + diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/components/NodeTreeItem.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/components/NodeTreeItem.vue new file mode 100644 index 0000000000..51be5985e9 --- /dev/null +++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/components/NodeTreeItem.vue @@ -0,0 +1,407 @@ + + + + + diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/index.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/index.vue new file mode 100644 index 0000000000..0e0573adad --- /dev/null +++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/index.vue @@ -0,0 +1,856 @@ +/** +* Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community +* Edition) available. +* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. +* Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* http://opensource.org/licenses/MIT +* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on +* an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the +* specific language governing permissions and limitations under the License. +*/ + + + diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/index.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/index.vue new file mode 100644 index 0000000000..c4b42a1c3f --- /dev/null +++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/index.vue @@ -0,0 +1,859 @@ +/** +* Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community +* Edition) available. +* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. +* Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* http://opensource.org/licenses/MIT +* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on +* an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the +* specific language governing permissions and limitations under the License. +*/ + + + diff --git a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue index d9c2bd5260..e0c276a8ed 100644 --- a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue +++ b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue @@ -102,7 +102,6 @@ v-if="nodeInfoType === 'executeInfo'" ref="executeInfo" :state="state" - :node-data="nodeData" :engine-ver="engineVer" :node-display-status="nodeDisplayStatus" :admin-view="adminView" @@ -116,6 +115,7 @@ :gateways="pipelineData.gateways" :condition-data="conditionData" :sidebar-width="sidebarWidth" + :instance-flow="instanceFlow" @close="onCloseConfigPanel" @onRetryClick="onRetryClick" @onSkipClick="onSkipClick" @@ -222,11 +222,11 @@ import { mapActions, mapMutations, mapState } from 'vuex' import axios from 'axios' import tools from '@/utils/tools.js' - import { TASK_STATE_DICT, NODE_DICT } from '@/constants/index.js' + import { TASK_STATE_DICT } from '@/constants/index.js' import dom from '@/utils/dom.js' import TemplateCanvas from '@/components/common/TemplateCanvas/index.vue' import ModifyParams from './ModifyParams.vue' - import ExecuteInfo from './ExecuteInfo.vue' + import ExecuteInfo from './ExecuteInfo/index.vue' import RetryNode from './RetryNode.vue' import ModifyTime from './ModifyTime.vue' import OperationFlow from './OperationFlow.vue' @@ -394,19 +394,12 @@ isExecRecordOpen: false, nodeExecRecordInfo: {}, isInjectVarDialogShow: false, - nodeIds: {}, nodeDisplayStatus: {}, showNodeList: [0, 1, 2], - converNodeList: [], isCondition: false, conditionOutgoing: [], unrenderedCoverNode: [], subProcessTaskId: null, - nodeData: [], - convergeInfo: {}, - nodeSourceMaps: {}, - nodeTargetMaps: {}, - allCheckoutNodes: {}, isSourceDetailSideBar: false, // 节点重试侧栏是否从节点详情打开 retryNodeName: '' } @@ -1154,6 +1147,8 @@ } this.nodeDetailConfig = { component_code: code, + type: node && node.type, + name: node && node.name, version: version, node_id: id, instance_id: this.instance_id, @@ -1632,586 +1627,6 @@ break } }, - getOrderedTree (data, pipelineInfo = {}) { - const startNode = tools.deepClone(data.start_event) - const endNode = tools.deepClone(data.end_event) - const fstLine = startNode.outgoing - const nodeId = data.flows[fstLine].target - const { parentId, independentId, parentLevel, lastLevelStyle, taskId } = pipelineInfo - let marginLeft - if (lastLevelStyle) { - marginLeft = lastLevelStyle.match(/[0-9]+/g)[0] - marginLeft = Number(marginLeft) - marginLeft = marginLeft + 42 - } else { - marginLeft = 0 - } - let subprocessStack - if (parentId) { - subprocessStack = independentId ? parentId.split(independentId)[1] : parentId - subprocessStack = subprocessStack?.split('-') || [] - subprocessStack = subprocessStack.filter(item => item) - } - const orderedData = [Object.assign({}, startNode, { - title: this.$t('开始节点'), - name: this.$t('开始节点'), - nodeLevel: 1, - parentId, - subprocessStack, - expanded: false, - taskId, - style: `margin-left: ${marginLeft}px` - })] - const endEvent = Object.assign({}, endNode, { - title: this.$t('结束节点'), - name: this.$t('结束节点'), - nodeLevel: 1, - parentId, - subprocessStack, - expanded: false, - taskId, - style: `margin-left: ${marginLeft}px` - }) - this.convergeInfo = {} - this.allCheckoutNodes = {} - this.getNodeTargetMaps(data) - this.getNodeSourceMaps(data) - const nodeInfo = { id: nodeId, parentId, independentId, parentLevel, lastLevelStyle, taskId } - this.retrieveLines(data.id, data, nodeInfo, orderedData) - orderedData.push(endEvent) - // 过滤root最上层汇聚网关 - return orderedData - }, - /** - * 根据节点连线遍历任务节点，返回按广度优先排序的节点数据 - * @param {String} flowId 画布id - * @param {Object} data 画布数据 - * @param {Object} nodeInfo 节点属性 - * @param {Array} ordered 排序后的节点数据 - * @param {Array} parentOrdered 父级排序 - * - */ - retrieveLines (flowId, data, nodeInfo, ordered, parentOrdered) { - const { - id, - gatewayId, - branchId, - nodeLevel = 1, - parentId, - independentId, - parentLevel, - lastLevelStyle, - lastId, - taskId, - isLevelUp, - style - } = nodeInfo - const { activities, gateways, flows } = data - const nodeConfig = activities[id] || gateways[id] - 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) - lastNode.isCallback = true - lastNode.callbackInfo = { - ...existNode, - children: [] - } - } else { - const isConverge = Object.values(this.convergeInfo).find(item => item.convergeNode === id) - if (isConverge) { // 网关汇聚 - return - } else { // 分支汇聚 - const existNode = this.getMatchOrderedNode(ordered, id, false) - const isSameLevel = existNode && existNode.nodeLevel === nodeLevel - if (isSameLevel) { // 同层次汇聚 - const gatewayOrdered = this.getMatchOrderedNode(ordered, gatewayId, false) - 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) - parentOrdered.push({ - ...existNode, - isLevelUp: lastNode.isLevelUp, - style: lastNode.style, - isDifferLevelConverge: true, - children: [] - }) - } - } - } - return - } - if (nodeConfig) { - const targetNodes = this.nodeTargetMaps[id] - const taskAndGwNodeMap = Object.assign({}, activities, gateways) - const treeItem = { - id: id, - type: nodeConfig.type, - parentId, - expanded: false, - nodeLevel: parentLevel ? parentLevel + nodeLevel : nodeLevel, - isLevelUp, - taskId - } - if (parentId) { - let subprocessStack = independentId ? parentId.split(independentId)[1] : parentId - subprocessStack = subprocessStack?.split('-') || [] - treeItem.subprocessStack = subprocessStack.filter(item => item) - } - let marginLeft = 0 - if (treeItem.nodeLevel === 1) { - marginLeft = 0 - } else if (lastLevelStyle) { - marginLeft = lastLevelStyle.match(/[0-9]+/g)[0] - marginLeft = Number(marginLeft) - if (treeItem.parentId) { - marginLeft = marginLeft + 42 - } else { - marginLeft = marginLeft + 33 - } - } - treeItem.style = style || `margin-left: ${marginLeft}px` - let conditions = [] - - if (id in gateways) { // 网关节点 - const name = NODE_DICT[nodeConfig.type.toLowerCase()] - treeItem.title = name - treeItem.name = name - treeItem.isGateway = true - treeItem.children = [] - // 分支，条件并行 - if (['ExclusiveGateway', 'ConditionalParallelGateway'].includes(nodeConfig.type)) { - treeItem.gatewayId = parentOrdered ? gatewayId : id - this.getGatewayConvergeNodes({ - id, - parentId: id, - convergeInfo: this.convergeInfo - }) - const loopList = [] // 需要打回的node的incoming - targetNodes.forEach(item => { - const curNode = taskAndGwNodeMap[item] - if (curNode && this.nodeIds[flowId]?.find(ite => ite === curNode.id)) { - loopList.push(...curNode.incoming) - } - }) - conditions = Object.keys(nodeConfig.conditions).map((key, index) => { - const { name: branchName, evaluate } = nodeConfig.conditions[key] - return { - id: id + '-' + key, - name: branchName, - title: branchName, - value: evaluate, - nodeLevel: treeItem.nodeLevel + 1, - parentId, - conditionType: 'condition', // 条件、条件并行网关 - expanded: false, - target: flows[key].target, - gatewayId: id, - children: [], - taskId - } - }) - // 添加条件分支默认节点 - if (nodeConfig.default_condition) { - const { name: branchName, flow_id, evaluate } = nodeConfig.default_condition - // 默认条件置顶 - conditions.unshift({ - id: id + '-' + flow_id, - name: branchName, - title: branchName, - value: evaluate, - nodeLevel: treeItem.nodeLevel + 1, - parentId, - conditionType: 'default', - expanded: false, - target: flows[flow_id].target, - gatewayId: id, - children: [], - taskId - }) - } - } else if (nodeConfig.type === 'ParallelGateway') { - treeItem.gatewayId = gatewayId || id - this.getGatewayConvergeNodes({ - id, - parentId: id, - convergeInfo: this.convergeInfo - }) - // 添加并行默认条件 - conditions = nodeConfig.outgoing.map((key, index) => { - const branchName = this.$t('并行') + (index + 1) - return { - id: branchName + '-' + id, - name, - title: this.$t('并行'), - nodeLevel: treeItem.nodeLevel + 1, - parentId, - expanded: false, - conditionType: 'parallel', - target: flows[key].target, - gatewayId: id, - children: [], - taskId - } - }) - if (this.nodeIds[flowId]) { - this.nodeIds[flowId].push(id) - } else { - this.nodeIds[flowId] = [id] - } - } - } else { // 任务节点 - if (nodeConfig.type === 'SubProcess' || nodeConfig.component.code === 'subprocess_plugin') { - const parentInfo = { - parentId: parentId ? parentId + '-' + id : id, - parentLevel: nodeLevel, - lastLevelStyle: 'margin-left: 0px' - } - // 兼容旧数据 - if (nodeConfig.pipeline) { - this.getNodeTargetMaps(nodeConfig.pipeline) - this.getNodeSourceMaps(nodeConfig.pipeline) - treeItem.children = this.getOrderedTree(nodeConfig.pipeline, parentInfo) - } else { - let { data: componentData } = nodeConfig.component - componentData = componentData && componentData.subprocess - componentData = componentData && componentData.value - componentData = componentData && componentData.pipeline - if (componentData) { - this.getNodeTargetMaps(componentData) - this.getNodeSourceMaps(componentData) - if (this.nodeIds[componentData.id]) { - delete this.nodeIds[componentData.id] - } - parentInfo.independentId = id - treeItem.children = this.getOrderedTree(componentData, parentInfo) - } - treeItem.type = 'SubProcess' - treeItem.dynamicLoad = true - } - treeItem.isSubProcess = true - } - treeItem.gatewayId = gatewayId - treeItem.name = nodeConfig.name - treeItem.title = nodeConfig.name - } - if (this.nodeIds[flowId]) { - this.nodeIds[flowId].push(id) - } else { - this.nodeIds[flowId] = [id] - } - const nextNodeInfo = { ...nodeInfo } - let newOrdered = parentOrdered - if (parentOrdered) { - if (nodeConfig.incoming.length > 1) { - 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) - const { gatewayId, nodeLevel } = result[0] - treeItem.nodeLevel = nodeLevel - treeItem.style = gatewayInfo.style - treeItem.isLevelUp = gatewayInfo.isLevelUp - // 添加同级的汇聚网关标识 - if (gateways[id]?.type === 'ConvergeGateway') { - gatewayInfo.hasConvergeGW = true - } - result.push(treeItem) - newOrdered = result - nextNodeInfo.gatewayId = gatewayId - nextNodeInfo.nodeLevel = nodeLevel - nextNodeInfo.isLevelUp = treeItem.isLevelUp - nextNodeInfo.style = treeItem.style - } else { - result = this.getMatchOrderedNode(ordered, gatewayId, false) - // 如果该多个输入连线节点是循环上的节点则不进行层级提升 - if (result && !this.judgeNodeBack(id, id, [])) { - treeItem.nodeLevel = result.children[0].nodeLevel - treeItem.style = result.children[0].style - treeItem.isLevelUp = true - result.children.push(treeItem) - newOrdered = result.children - nextNodeInfo.gatewayId = result.gatewayId - nextNodeInfo.nodeLevel = treeItem.nodeLevel - nextNodeInfo.isLevelUp = true - nextNodeInfo.style = treeItem.style - } else { - parentOrdered.push(treeItem) - } - } - // 汇聚节点层级会提高 - if (treeItem.nodeLevel === 1 && !parentId) { - treeItem.style = 'margin-left: 0px' - } - } else { - parentOrdered.push(treeItem) - } - } else { - ordered.push(treeItem) - newOrdered = null - } - - if (conditions.length) { - conditions.forEach(item => { - item.style = `margin-left: ${item.parentId ? 16 : marginLeft + 33}px` - item.subprocessStack = treeItem.subprocessStack - treeItem.children.push(item) - this.retrieveLines( - flowId, - data, - { - id: item.target, - branchId: item.id, - nodeLevel: item.nodeLevel, - parentId, - independentId, - gatewayId: id, - lastId: item.id, - taskId - }, - ordered, - item.children - ) - }) - } else { - targetNodes.forEach(node => { - this.retrieveLines( - flowId, - data, - { - ...nextNodeInfo, - id: node, - lastId: id - }, - ordered, - newOrdered - ) - }) - } - } - }, - getMatchOrderedNode (ordered, id, isParent) { - let result - ordered.some(item => { - if (item.id === id) { - result = isParent ? ordered : item - return true - } else if (item.children?.length) { - result = this.getMatchOrderedNode(item.children, id, isParent) - return result && !!Object.keys(result).length - } - return false - }) - return result - }, - - getNodeSourceMaps (pipelineData) { - const sourceMap = pipelineData.line.reduce((acc, cur) => { - const { source, target } = cur - if (acc[target.id]) { - acc[target.id].push(source.id) - } else { - acc[target.id] = [source.id] - } - return acc - }, {}) - Object.assign(this.nodeSourceMaps, sourceMap) - }, - getNodeTargetMaps (pipelineData) { - const targetMap = pipelineData.line.reduce((acc, cur) => { - const { source, target } = cur - if (acc[source.id]) { - acc[source.id].push(target.id) - } else { - acc[source.id] = [target.id] - } - return acc - }, {}) - Object.assign(this.nodeTargetMaps, targetMap) - }, - /** - * id: 当前查找的id - * parentId: 最外层的网关id - * convergeInfo: { 汇聚详情 - * id: '', 网关节点 - * checkedNodes: [], 已经查找过的节点 - * convergeNode: '', 最终汇聚的节点 - * branchCount: 1 总共有多少条分支 - * } - * index: 当前节点属于哪条分支下的 - * isDeep: 是否递归 - */ - getGatewayConvergeNodes (data) { - const { - id, - parentId, - convergeInfo = {}, - index = 0, - isDeep, - isLastBranch - } = data - if (!id) return - if (!convergeInfo[parentId]) { - convergeInfo[parentId] = { - id: parentId, - checkedNodes: [], - convergeNode: '', - branchCount: 1 // 默认是一条分支 - } - } - // 如果该节点的查找次数大于输入连线的数量则退出递归 - if (this.allCheckoutNodes[parentId]) { - this.allCheckoutNodes[parentId].push(id) - } else { - this.allCheckoutNodes[parentId] = [id] - } - const checkedCount = this.allCheckoutNodes[parentId].filter(item => item === id).length - const sourceCount = this.nodeSourceMaps[id].length - if (checkedCount > sourceCount) return - - const targetNodes = this.nodeTargetMaps[id] || [] - // 多条输出分支 - if (targetNodes.length > 1) { - // 子网关 - if (!convergeInfo[id]) { - const subConvergeInfo = {} - this.getGatewayConvergeNodes({ - id: id, - parentId: id, - convergeInfo: subConvergeInfo - }) - const { convergeNode: subConvergeNodes } = subConvergeInfo[id] - convergeInfo[parentId].checkedNodes.push(subConvergeNodes) - const branchConvergeNode = convergeInfo[parentId][`branch${index}`] - if (!branchConvergeNode) { - convergeInfo[parentId][`branch${index}`] = [subConvergeNodes] - } else if (!branchConvergeNode.includes(subConvergeNodes)) { - branchConvergeNode.push(subConvergeNodes) - } - // 如果是最后一条分支，则需要判断是否找到最终汇聚节点 - if (isLastBranch) { - this.getGatewayConvergeNodes({ - id: this.pipelineData.end_event.id, - parentId, - convergeInfo, - index, - isDeep, - isLastBranch - }) - } - return - } - convergeInfo[parentId].branchCount = targetNodes.length - targetNodes.forEach((targetId, branchIndex) => { - // 非递归时使用传入的分支数 - const newIndex = isDeep ? index : branchIndex - this.getGatewayConvergeNodes({ - id: targetId, - parentId, - convergeInfo, - index: newIndex, - isDeep, - isLastBranch: branchIndex === targetNodes.length - 1 - }) - }) - } else { - // 单条输出分支 - const { checkedNodes, branchCount = 0 } = convergeInfo[parentId] - const countArr = [...Array(branchCount).keys()] - const { end_event } = this.pipelineData - // 已查找过的节点、结束节点、汇聚节点 - if ([...checkedNodes, end_event.id].includes(id) || (this.nodeSourceMaps[id].length > 1 && id !== parentId)) { - // 记录分支下的汇聚节点 - const branchConvergeNode = convergeInfo[parentId][`branch${index}`] - if (!branchConvergeNode) { - convergeInfo[parentId][`branch${index}`] = [id] - } else if (!branchConvergeNode.includes(id)) { - branchConvergeNode.push(id) - } - // 记录查找过的节点 - if (!checkedNodes.includes(id)) { - checkedNodes.push(id) - } - // 所有分支下的汇聚节点 - const convergeNodes = countArr.map(item => { - const data = convergeInfo[parentId][`branch${item}`] || [] - return [...new Set(data)] - }).flat() - // 如果重复出现汇聚节点的最大次数等于分支数则表示已经找到最终的汇聚节点了 - const countMap = this.getCountMap(convergeNodes) - const matchNode = Object.keys(countMap).filter(key => countMap[key] === branchCount) - if (matchNode[0]) { - convergeInfo[parentId].convergeNode = matchNode[0] - } else if (index === branchCount - 1 && (isDeep ? isLastBranch : true)) { // 最后一条分支 - // 没找到汇聚节点则继续向下递归 - if (!convergeInfo[parentId].convergeNode) { - countArr.forEach(idx => { - // 根据各条分支最后的汇聚节点继续查找 - const data = convergeInfo[parentId][`branch${idx}`] || [] - const [lastId] = data.slice(-1) - const targetIds = this.nodeTargetMaps[lastId] || [lastId] - // 向下递归 - targetIds.forEach(targetId => { - this.getGatewayConvergeNodes({ - id: targetId, - parentId, - convergeInfo, - index: idx, - isDeep: true, - isLastBranch: idx === countArr.length - 1 - }) - }) - }) - } - } - } else { - checkedNodes.push(id) - const targetId = targetNodes[0] - this.getGatewayConvergeNodes({ - id: targetId, - parentId, - convergeInfo, - index, - isDeep, - isLastBranch - }) - } - } - }, - getCountMap (arr) { - if (!arr.length) return {} - const countMap = arr.reduce((acc, cur) => { - acc[cur] ? acc[cur] += 1 : acc[cur] = 1 - return acc - }, {}) - return countMap - }, - judgeNodeBack (id, backId, checked) { - if (checked.includes(id)) return id === backId - const targetNodes = this.nodeTargetMaps[id] - if (!targetNodes) return false - checked.push(id) - if (targetNodes.length > 1) { - if (targetNodes.includes(backId)) { - return true - } - return targetNodes.some(targetId => { - return this.judgeNodeBack(targetId, backId, checked) - }) - } else { - const targetId = targetNodes[0] - if (targetId === backId) { - return true - } else { - return this.judgeNodeBack(targetId, backId, checked) - } - } - }, updateNodeActived (id, isActived) { this.$refs.templateCanvas.onUpdateNodeInfo(id, { isActived }) }, @@ -2356,9 +1771,6 @@ this.updateNodeActived(id, true) // 如果为子流程节点则需要重置pipelineData的constants this.nodePipelineData = { ...this.nodeTreePipelineData } - this.convergeInfo = {} - this.nodeIds = {} - this.nodeData = this.getOrderedTree(this.completePipelineData) // 如果选中节点为子流程节点则侧栏宽度默认为最大值 if (this.hasSubprocessNode) { this.sidebarWidth = window.innerWidth - 400 @@ -2522,6 +1934,8 @@ } this.nodeDetailConfig = { component_code: code, + type: nodeInfo && nodeInfo.type, + name: nodeInfo && nodeInfo.name, version: version, node_id: nodeId, instance_id: taskId || this.instance_id, @@ -2872,7 +2286,7 @@ } } // 获取独立子流程任务状态 - execInfoInstance.loadSubprocessStatus() + execInfoInstance.loadSubprocessState() } } catch (error) { execInfoInstance.loading = false