feat: 子流程节点高亮 #ignore (#527)

* feat: 子流程节点高亮 #ignore
# Reviewed, transaction id: 67547

* feat: 子流程节点高亮 #ignore
# Reviewed, transaction id: 67548

Author: cjyscjys

frontend/src/components/canvas/StageCanvas/SubStageCanvas.vue

@@ -62,10 +62,14 @@
         type: Boolean,
         default: false,
       },
+      activeNodeId: {
+        type: String,
+        default: null,
+      },
     },
     data() {
       return {
-        activeNode: null,
+
         loadedTemplate: false,
         pluginsDetail: { component: {}, uniform_api: {}, blueking: {} },
       };
@@ -77,6 +81,12 @@
       activities() {
         return this.pipelineTree.activities || {};
       },
+      activeNode() {
+        if (this.activeNodeId) {
+          return this.activities[this.activeNodeId];
+        }
+        return null;
+      },
     },
     watch: {
        async templateId() {
@@ -111,8 +121,8 @@
       onUpdateNodeInfo() {
         // 外部依赖不能删
       },
-      setActiveItem(node) {
-        this.activeNode = node;
+      setActiveItem() {
+        // this.activeNode = node;
       },
       cancelJobAndStageEidtSld() {
         this.setActiveItem(null);

frontend/src/components/canvas/StageCanvas/components/JobNode.vue

@@ -63,6 +63,7 @@
           :nodes="job.nodes"
           :plugins-detail="pluginsDetail"
           :editable="editable"
+          :active-node="activeNode"
           :show-not-allow-move="notAllowMoveIndex === nodeIndex"
           :is-execute="isExecute"
           :activities="activities"

frontend/src/components/canvas/StageCanvas/components/StepNode.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="node"
-    :class="{ active:activeNode?.id === node.id,isPreview:!editable,isExecute,[ETaskStatusTypeMap[status].class]:true, isSkip }"
+    :class="{ active:activeNode?.id === currentNode?.id,isPreview:!editable,isExecute,[ETaskStatusTypeMap[status].class]:true, isSkip }"
     @click="handleNode(currentNode)">
     <div class="node-icon">
       <span
@@ -139,7 +139,6 @@
   </div>
 </template>
 <script>
-import { mapState } from 'vuex';
 import { ETaskStatusType, ETaskStatusTypeMap } from '../data';
 import { SYSTEM_GROUP_ICON } from '@/constants/index.js';
 import { getDurationTime } from '../utils';
@@ -177,6 +176,10 @@ export default {
           type: Boolean,
           default: true,
         },
+        activeNode: {
+          type: Object,
+          default: null,
+        },
     },
     data() {
         return {
@@ -214,9 +217,6 @@ export default {
         };
     },
     computed: {
-      ...mapState({
-        activeNode: state => state.stageCanvas.activeNode,
-      }),
       status() {
         return this.node.state || ETaskStatusType.PENDING;
       },
@@ -248,6 +248,7 @@ export default {
             this.node.state === ETaskStatusType.RUNNING ? new Date().toString() : this.node.finish_time,
           );
       },
+
     },
     methods: {
         handleNode(node) {
@@ -327,8 +328,11 @@ export default {
         }
     }
     &.active {
-        border: 1px solid #3A83FF;
-        background-color: rgba(58, 131, 255, 0.05);
+        // border: 1px solid #3A83FF;
+        // background-color: rgba(58, 131, 255, 0.05);
+        .node-title {
+          color: #2050d2;
+        }
     }
     .info-icon{
         .info-icon-item{

frontend/src/views/task/TaskExecute/SideDrawerExecuteInfo.vue

@@ -99,6 +99,7 @@
               :is-stage-canvas-task-execute="!!currentSubflowTaskId"
               :space-id="spaceId"
               :gateways="processGateway"
+              :active-node-id="defaultActiveId"
               :instance-id="currentSubflowTaskId"
               :pipeline-tree="subCanvasData"
               :template-id="subTemplateId"

frontend/src/views/task/TaskExecute/TaskOperationHeader.vue

@@ -82,10 +82,18 @@
         class="sub-task-btns">
         <i class="common-icon-box-top-right-corner icon-link-to-father" />
         <p
-          class="view-father-process"
-          @click="onViewFatherProcessExecute">
-          {{ $t('查看父流程') }}
+          class="view-father-process">
+          <JumpLinkBKFlowOrExternal
+            :get-target-url="onViewFatherProcessExecute"
+            :query="{
+              id:parentTaskInfo.task_id,
+              type:'jumpParentTask'
+            }">
+            {{ $t('查看父流程') }}
+          </JumpLinkBKFlowOrExternal>
         </p>
+
+
         <span class="dividing-line" />
         <span :class="statusMap[parentTaskInfo.state].icon" />
         <span class="state-text">{{ statusMap[parentTaskInfo.state].text }}</span>
@@ -140,11 +148,13 @@
   // import PageHeader from '@/components/layout/PageHeader.vue'
   import { mapState } from 'vuex';
   import i18n from '@/config/i18n/index.js';
+  import JumpLinkBKFlowOrExternal from '@/components/common/JumpLinkBKFlowOrExternal.vue';
 
   export default {
     name: 'TaskOperationHeader',
     components: {
       // PageHeader,
+      JumpLinkBKFlowOrExternal,
     },
     mixins: [permission],
     props: {
@@ -315,7 +325,7 @@
               instanceId: this.parentTaskInfo.task_id,
             },
         });
-        window.open(href, '_blank');
+        return href;
       },
     },
   };