From bdf8ee416ccdb5a23c8594f92715736adb32271e Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Fri, 18 Nov 2022 14:24:28 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=B7=A8=E9=A1=B9=E7=9B=AE=E5=BC=95=E7=94=A8?=
 =?UTF-8?q?=E5=9C=BA=E6=99=AF=E5=B1=95=E7=A4=BA=E4=B8=8D=E6=98=8E=E7=A1=AE?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1019804 --user=赵勇 【接口测试】接口自动化-场景中跨项目引用其他场景-项目名称显示不清晰 https://www.tapd.cn/55049933/s/1298191
---
 .../scenario/common/ApiBaseComponent.vue      | 261 ++++++++++------
 .../component/ApiScenarioComponent.vue        | 291 ++++++++++++------
 2 files changed, 366 insertions(+), 186 deletions(-)

diff --git a/api-test/frontend/src/business/automation/scenario/common/ApiBaseComponent.vue b/api-test/frontend/src/business/automation/scenario/common/ApiBaseComponent.vue
index 43d6ed5b70..235f15191e 100644
--- a/api-test/frontend/src/business/automation/scenario/common/ApiBaseComponent.vue
+++ b/api-test/frontend/src/business/automation/scenario/common/ApiBaseComponent.vue
@@ -1,79 +1,141 @@
 <template>
-  <el-card :style="{'border-color':colorStyle}" class="ms-base-card">
+  <el-card :style="{ 'border-color': colorStyle }" class="ms-base-card">
     <div class="ms-base-header" @click="active(data)">
       <slot name="beforeHeaderLeft">
-        <div v-if="data.index" class="el-step__icon is-text"
-             :style="{'color': color, 'background-color': backgroundColor}">
-          <div class="el-step__icon-inner" :key="forceRerenderIndex">{{ data.index }}</div>
+        <div
+          v-if="data.index"
+          class="el-step__icon is-text"
+          :style="{ color: color, 'background-color': backgroundColor }"
+        >
+          <div class="el-step__icon-inner" :key="forceRerenderIndex">
+            {{ data.index }}
+          </div>
         </div>
-        <el-tag class="ms-left-btn" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{
-            title
-          }}
+        <el-tag
+          class="ms-left-btn"
+          size="small"
+          :style="{ color: color, 'background-color': backgroundColor }"
+          >{{ title }}
         </el-tag>
         <slot name="behindHeaderLeft" v-if="!isMax"></slot>
       </slot>
 
       <span v-show="!isMax">
         <slot name="headerLeft">
-          <i class="icon el-icon-arrow-right" :class="{'is-active': data.active}" @click="active(data)"
-             v-if="data.type!='scenario' && !isMax " @click.stop/>
+          <i
+            class="icon el-icon-arrow-right"
+            :class="{ 'is-active': data.active }"
+            @click="active(data)"
+            v-if="data.type != 'scenario' && !isMax"
+            @click.stop
+          />
           <span @click.stop v-if="isShowInput && isShowNameInput">
-            <el-input :draggable="draggable" size="mini" v-model="data.name" class="name-input" @focus="active(data)"
-                      @blur="isShowInput = false" :placeholder="$t('commons.input_name')" ref="nameEdit"
-                      :disabled="data.disabled"/>
+            <el-input
+              :draggable="draggable"
+              size="mini"
+              v-model="data.name"
+              class="name-input"
+              @focus="active(data)"
+              @blur="isShowInput = false"
+              :placeholder="$t('commons.input_name')"
+              ref="nameEdit"
+              :disabled="data.disabled"
+            />
           </span>
 
-          <span :class="showVersion?'scenario-unscroll':'scenario-version'" id="moveout" @mouseenter="enter($event)"
-                @mouseleave="leave($event)" v-else>
-            <i class="el-icon-edit" style="cursor:pointer;" @click="editName"
-               v-show="data.referenced!='REF' && !data.disabled"/>
-              <span>{{ data.name }}</span>
-            <el-tag size="mini" v-if="data.method && !data.pluginId" style="margin-left: 1rem">{{
-                getMethod()
-              }}</el-tag>
-            <slot name="afterTitle"/>
+          <span
+            :class="showVersion ? 'scenario-unscroll' : 'scenario-version'"
+            id="moveout"
+            @mouseenter="enter($event)"
+            @mouseleave="leave($event)"
+            v-else
+          >
+            <i
+              class="el-icon-edit"
+              style="cursor: pointer"
+              @click="editName"
+              v-show="data.referenced != 'REF' && !data.disabled"
+            />
+            <span>{{ data.name }}</span>
+            <el-tag
+              size="mini"
+              v-if="data.method && !data.pluginId"
+              style="margin-left: 1rem"
+              >{{ getMethod() }}</el-tag
+            >
+            <slot name="afterTitle" />
           </span>
         </slot>
       </span>
       <span v-show="isMax">
         <slot name="headerLeft">
-            <span class="ms-step-name-width">{{ data.name }}</span>
+          <span class="ms-step-name-width">{{ data.name }}</span>
         </slot>
       </span>
 
-      <div v-if="!ifFromVariableAdvance" class="header-right" @click.stop
-           v-permission="['PROJECT_API_SCENARIO:READ+EDIT', 'PROJECT_API_SCENARIO:READ+CREATE', 'PROJECT_API_SCENARIO:READ+COPY']">
+      <div
+        v-if="!ifFromVariableAdvance"
+        class="header-right"
+        @click.stop
+        v-permission="[
+          'PROJECT_API_SCENARIO:READ+EDIT',
+          'PROJECT_API_SCENARIO:READ+CREATE',
+          'PROJECT_API_SCENARIO:READ+COPY',
+        ]"
+      >
         <slot name="message" v-show="!isMax"></slot>
         <slot name="debugStepCode"></slot>
 
         <slot name="button" v-if="showVersion"></slot>
 
-        <el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top" v-if="showBtn">
-          <el-switch v-model="data.enable" class="enable-switch" size="mini"
-                     :disabled="data.refEnable || !showVersion || isDeleted"/>
+        <el-tooltip
+          :content="$t('test_resource_pool.enable_disable')"
+          placement="top"
+          v-if="showBtn"
+        >
+          <el-switch
+            v-model="data.enable"
+            class="enable-switch"
+            size="mini"
+            :disabled="data.refEnable || !showVersion || isDeleted"
+          />
         </el-tooltip>
 
-        <el-button v-if="showVersion && showCopy" size="mini" icon="el-icon-copy-document" circle @click="copyRow"
-                   style="padding: 5px"
-                   :disabled="(data.disabled && !data.root) || !showVersion || isDeleted"/>
+        <el-button
+          v-if="showVersion && showCopy"
+          size="mini"
+          icon="el-icon-copy-document"
+          circle
+          @click="copyRow"
+          style="padding: 5px"
+          :disabled="(data.disabled && !data.root) || !showVersion || isDeleted"
+        />
 
-        <el-button v-show="isSingleButton" size="mini" icon="el-icon-delete" type="danger" style="padding: 5px" circle
-                   @click="remove"
-                   :disabled="(data.disabled && !data.root) || !showVersion || isDeleted"/>
+        <el-button
+          v-show="isSingleButton"
+          size="mini"
+          icon="el-icon-delete"
+          type="danger"
+          style="padding: 5px"
+          circle
+          @click="remove"
+          :disabled="(data.disabled && !data.root) || !showVersion || isDeleted"
+        />
 
-        <step-extend-btns style="display: contents"
-                          :data="data"
-                          :environmentType="environmentType"
-                          :environmentGroupId="environmentGroupId"
-                          :envMap="envMap"
-                          :is-scenario="true"
-                          @enable="enable"
-                          @copy="copyRow"
-                          @remove="remove"
-                          @openScenario="openScenario"
-                          v-show="isMoreButton"/>
+        <step-extend-btns
+          style="display: contents"
+          :data="data"
+          :environmentType="environmentType"
+          :environmentGroupId="environmentGroupId"
+          :envMap="envMap"
+          :is-scenario="true"
+          @enable="enable"
+          @copy="copyRow"
+          @remove="remove"
+          @openScenario="openScenario"
+          v-show="isMoreButton"
+        />
       </div>
-
     </div>
     <!--最大化不显示具体内容-->
     <div v-if="!isMax">
@@ -92,26 +154,25 @@
         </div>
       </el-collapse-transition>
     </div>
-
   </el-card>
 </template>
 
 <script>
 import StepExtendBtns from "../component/StepExtendBtns";
-import {STEP} from "../Setting";
-import {useApiStore} from "@/store";
+import { STEP } from "../Setting";
+import { useApiStore } from "@/store";
 
 let store = useApiStore();
 
 export default {
   name: "ApiBaseComponent",
-  components: {StepExtendBtns},
+  components: { StepExtendBtns },
   data() {
     return {
       isShowInput: false,
       colorStyle: "",
-      stepFilter: new STEP,
-    }
+      stepFilter: new STEP(),
+    };
   },
   props: {
     draggable: Boolean,
@@ -134,32 +195,32 @@ export default {
     data: {
       type: Object,
       default() {
-        return {}
+        return {};
       },
     },
     color: {
       type: String,
       default() {
-        return "#B8741A"
-      }
+        return "#B8741A";
+      },
     },
     backgroundColor: {
       type: String,
       default() {
-        return "#F9F1EA"
-      }
+        return "#F9F1EA";
+      },
     },
     showCollapse: {
       type: Boolean,
       default() {
-        return true
-      }
+        return true;
+      },
     },
     isShowNameInput: {
       type: Boolean,
       default() {
-        return true
-      }
+        return true;
+      },
     },
     title: String,
     ifFromVariableAdvance: {
@@ -171,20 +232,23 @@ export default {
     envMap: Map,
     showEnable: {
       type: Boolean,
-      default: true
+      default: true,
     },
     showCopy: {
       type: Boolean,
-      default: true
+      default: true,
     },
     isDeleted: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   watch: {
-    'selectStep'() {
-      if (store.selectStep && store.selectStep.resourceId === this.data.resourceId) {
+    selectStep() {
+      if (
+        store.selectStep &&
+        store.selectStep.resourceId === this.data.resourceId
+      ) {
         this.colorStyle = this.color;
       } else {
         this.colorStyle = "";
@@ -200,7 +264,10 @@ export default {
         this.$refs.nameEdit.focus();
       });
     }
-    if (this.data && this.stepFilter.get("AllSamplerProxy").indexOf(this.data.type) != -1) {
+    if (
+      this.data &&
+      this.stepFilter.get("AllSamplerProxy").indexOf(this.data.type) != -1
+    ) {
       if (!this.data.method) {
         this.data.method = this.data.protocol;
       }
@@ -214,21 +281,45 @@ export default {
       return store.forceRerenderIndex;
     },
     isSingleButton() {
-      if (this.data.type === 'ConstantTimer' || this.data.type === 'Assertions') {
-        return (this.innerStep && this.showVersion && this.stepFilter.get('ALlSamplerStep').indexOf(this.data.type) !== -1)
+      if (
+        this.data.type === "ConstantTimer" ||
+        this.data.type === "Assertions"
+      ) {
+        return (
+          this.innerStep &&
+          this.showVersion &&
+          this.stepFilter.get("ALlSamplerStep").indexOf(this.data.type) !== -1
+        );
       }
-      return (this.showVersion && this.stepFilter.get('ALlSamplerStep').indexOf(this.data.type) !== -1);
+      return (
+        this.showVersion &&
+        this.stepFilter.get("ALlSamplerStep").indexOf(this.data.type) !== -1
+      );
     },
     isMoreButton() {
-      if (this.data.type === 'ConstantTimer' || this.data.type === 'Assertions') {
-        return (!this.innerStep || this.showBtn && (!this.data.disabled || this.data.root) && this.showVersion && this.stepFilter.get('ALlSamplerStep').indexOf(this.data.type) === -1);
+      if (
+        this.data.type === "ConstantTimer" ||
+        this.data.type === "Assertions"
+      ) {
+        return (
+          !this.innerStep ||
+          (this.showBtn &&
+            (!this.data.disabled || this.data.root) &&
+            this.showVersion &&
+            this.stepFilter.get("ALlSamplerStep").indexOf(this.data.type) === -1)
+        );
       }
-      return (this.showBtn && (!this.data.disabled || this.data.root || this.isDeleted) && this.showVersion && this.stepFilter.get('ALlSamplerStep').indexOf(this.data.type) === -1);
+      return (
+        this.showBtn &&
+        (!this.data.disabled || this.data.root || this.isDeleted) &&
+        this.showVersion &&
+        this.stepFilter.get("ALlSamplerStep").indexOf(this.data.type) === -1
+      );
     },
   },
   methods: {
     active() {
-      this.$emit('active');
+      this.$emit("active");
     },
     getMethod() {
       if (this.data.protocol === "HTTP") {
@@ -240,13 +331,13 @@ export default {
       }
     },
     copyRow() {
-      this.$emit('copy');
+      this.$emit("copy");
     },
     remove() {
-      this.$emit('remove');
+      this.$emit("remove");
     },
     openScenario(data) {
-      this.$emit('openScenario', data);
+      this.$emit("openScenario", data);
     },
     editName() {
       this.isShowInput = true;
@@ -256,28 +347,26 @@ export default {
     },
     enter($event) {
       if (this.showVersion) {
-        $event.currentTarget.className = "scenario-name"
+        $event.currentTarget.className = "scenario-name";
       } else {
-        $event.currentTarget.className = "scenario-version"
+        $event.currentTarget.className = "scenario-version";
       }
     },
     leave($event) {
       if (this.showVersion) {
-        $event.currentTarget.className = "scenario-unscroll"
+        $event.currentTarget.className = "scenario-unscroll";
       } else {
-        $event.currentTarget.className = "scenario-version"
+        $event.currentTarget.className = "scenario-version";
       }
     },
     enable() {
       this.data.enable = !this.data.enable;
-    }
-  }
-}
-
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 .icon.is-active {
   transform: rotate(90deg);
 }
diff --git a/api-test/frontend/src/business/automation/scenario/component/ApiScenarioComponent.vue b/api-test/frontend/src/business/automation/scenario/component/ApiScenarioComponent.vue
index fc811603e9..d580fbf878 100644
--- a/api-test/frontend/src/business/automation/scenario/component/ApiScenarioComponent.vue
+++ b/api-test/frontend/src/business/automation/scenario/component/ApiScenarioComponent.vue
@@ -11,7 +11,7 @@
     :is-disabled="true"
     :is-max="isMax"
     :show-btn="showBtn"
-    :is-deleted="scenario.referenced==='REF' && ! isShowNum"
+    :is-deleted="scenario.referenced === 'REF' && !isShowNum"
     :show-version="showVersion"
     color="#606266"
     background-color="#F4F4F5"
@@ -19,59 +19,111 @@
     :environmentType="environmentType"
     :environmentGroupId="environmentGroupId"
     :envMap="envMap"
-    :title="$t('commons.scenario')">
-
+    :title="$t('commons.scenario')"
+  >
     <template v-slot:afterTitle>
-      <span v-if="isShowNum" @click="clickResource(scenario)">{{ "（ ID: " + scenario.num + "）" }}</span>
+      <span v-if="isShowNum" @click="clickResource(scenario)">{{
+        "（ ID: " + scenario.num + "）"
+      }}</span>
       <span v-else>
-        <el-tooltip class="ms-num" effect="dark" :content="$t('api_test.automation.scenario.num_none')" placement="top">
-          <i class="el-icon-warning"/>
+        <el-tooltip
+          class="ms-num"
+          effect="dark"
+          :content="$t('api_test.automation.scenario.num_none')"
+          placement="top"
+        >
+          <i class="el-icon-warning" />
         </el-tooltip>
       </span>
-      <span v-xpack v-if="scenario.versionEnable">{{ $t('project.version.name') }}: {{ scenario.versionName }}</span>
+      <span v-xpack v-if="scenario.versionEnable"
+        >{{ $t("project.version.name") }}: {{ scenario.versionName }}</span
+      >
     </template>
 
     <template v-slot:behindHeaderLeft>
-      <el-tag size="small" class="ms-tag" v-if="scenario.referenced==='Deleted'" type="danger">
-        {{ $t('api_test.automation.reference_deleted') }}
+      <el-tag
+        size="small"
+        class="ms-tag"
+        v-if="scenario.referenced === 'Deleted'"
+        type="danger"
+      >
+        {{ $t("api_test.automation.reference_deleted") }}
       </el-tag>
-      <el-tag size="small" class="ms-tag" v-if="scenario.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
-      <el-tag size="small" class="ms-tag" v-if="scenario.referenced==='REF'">{{
-          $t('api_test.scenario.reference')
-        }}
+      <el-tag
+        size="small"
+        class="ms-tag"
+        v-if="scenario.referenced === 'Copy'"
+        >{{ $t("commons.copy") }}</el-tag
+      >
+      <el-tag size="small" class="ms-tag" v-if="scenario.referenced === 'REF'"
+        >{{ $t("api_test.scenario.reference") }}
       </el-tag>
-      <span class="ms-tag ms-step-name-api">{{ getProjectName(scenario.projectId) }}</span>
-      <el-tooltip v-if="(!scenario.hashTree || scenario.hashTree.length === 0) && scenario.referenced==='REF'"
-                  class="ms-num" effect="dark" :content="$t('api_test.scenario.base_scenario_step_is_empty')"
-                  placement="top" style="margin-left: 5px">
-        <i class="el-icon-warning"/>
+      <span class="ms-tag ms-step-name-api">{{
+        getProjectName(scenario.projectId)
+      }}</span>
+      <el-tooltip
+        v-if="
+          (!scenario.hashTree || scenario.hashTree.length === 0) &&
+          scenario.referenced === 'REF'
+        "
+        class="ms-num"
+        effect="dark"
+        :content="$t('api_test.scenario.base_scenario_step_is_empty')"
+        placement="top"
+        style="margin-left: 5px"
+      >
+        <i class="el-icon-warning" />
       </el-tooltip>
     </template>
     <template v-slot:debugStepCode>
-       <span v-if="node.data.testing" class="ms-test-running">
-         <i class="el-icon-loading" style="font-size: 16px"/>
-         {{ $t('commons.testing') }}
-       </span>
-      <span class="ms-step-debug-code" :class="node.data.code ==='ERROR'?'ms-req-error':'ms-req-success'"
-            v-if="!loading && node.data.debug && !node.data.testing">
+      <span v-if="node.data.testing" class="ms-test-running">
+        <i class="el-icon-loading" style="font-size: 16px" />
+        {{ $t("commons.testing") }}
+      </span>
+      <span
+        class="ms-step-debug-code"
+        :class="node.data.code === 'ERROR' ? 'ms-req-error' : 'ms-req-success'"
+        v-if="!loading && node.data.debug && !node.data.testing"
+      >
         {{ getCode() }}
       </span>
     </template>
     <template v-slot:button v-if="!ifFromVariableAdvance">
-      <el-tooltip :content="$t('api_test.run')" placement="top" v-if="!scenario.run">
-        <el-button :disabled="!scenario.enable" @click="run" icon="el-icon-video-play" style="padding: 5px"
-                   class="ms-btn" size="mini" circle/>
+      <el-tooltip
+        :content="$t('api_test.run')"
+        placement="top"
+        v-if="!scenario.run"
+      >
+        <el-button
+          :disabled="!scenario.enable"
+          @click="run"
+          icon="el-icon-video-play"
+          style="padding: 5px"
+          class="ms-btn"
+          size="mini"
+          circle
+        />
       </el-tooltip>
-      <el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
-        <el-button :disabled="!scenario.enable" @click.once="stop" size="mini"
-                   style="color:white;padding: 0 0.1px;width: 24px;height: 24px;" class="stop-btn" circle>
+      <el-tooltip
+        :content="$t('report.stop_btn')"
+        placement="top"
+        :enterable="false"
+        v-else
+      >
+        <el-button
+          :disabled="!scenario.enable"
+          @click.once="stop"
+          size="mini"
+          style="color: white; padding: 0 0.1px; width: 24px; height: 24px"
+          class="stop-btn"
+          circle
+        >
           <div style="transform: scale(0.66)">
-            <span style="margin-left: -4.5px;font-weight: bold;">STOP</span>
+            <span style="margin-left: -4.5px; font-weight: bold">STOP</span>
           </div>
         </el-button>
       </el-tooltip>
     </template>
-
   </api-base-component>
 </template>
 
@@ -81,11 +133,18 @@ import MsTcpBasisParameters from "../../../definition/components/request/tcp/Tcp
 import MsDubboBasisParameters from "../../../definition/components/request/dubbo/BasisParameters";
 import MsApiRequestForm from "../../../definition/components/request/http/ApiHttpRequestForm";
 import ApiBaseComponent from "../common/ApiBaseComponent";
-import {getCurrentProjectID, getCurrentWorkspaceId} from "metersphere-frontend/src/utils/token";
-import {getUUID, strMapToObj} from "metersphere-frontend/src/utils";
-import {STEP} from "@/business/automation/scenario/Setting";
-import {getOwnerProjectIds, getProject} from "@/api/project";
-import {checkScenarioEnv, getScenarioById, setScenarioDomain} from "@/api/scenario";
+import {
+  getCurrentProjectID,
+  getCurrentWorkspaceId,
+} from "metersphere-frontend/src/utils/token";
+import { getUUID, strMapToObj } from "metersphere-frontend/src/utils";
+import { STEP } from "@/business/automation/scenario/Setting";
+import { getOwnerProjectIds, getProject } from "@/api/project";
+import {
+  checkScenarioEnv,
+  getScenarioById,
+  setScenarioDomain,
+} from "@/api/scenario";
 
 export default {
   name: "ApiScenarioComponent",
@@ -117,63 +176,83 @@ export default {
     ifFromVariableAdvance: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   watch: {
     message() {
-      if (this.message === 'STOPPED') {
+      if (this.message === "STOPPED") {
         this.scenario.run = false;
       }
       this.reload();
     },
-    'node.data.isBatchProcess'() {
-      if (this.node.data && this.node.data.isBatchProcess && this.node.data.referenced === 'REF') {
+    "node.data.isBatchProcess"() {
+      if (
+        this.node.data &&
+        this.node.data.isBatchProcess &&
+        this.node.data.referenced === "REF"
+      ) {
         this.node.expanded = false;
       }
-    }
+    },
   },
   created() {
     this.isShowNum = this.scenario.num ? true : false;
-    if (this.scenario.id && this.scenario.referenced === 'REF' && !this.scenario.loaded && this.scenario.hashTree) {
+    if (
+      this.scenario.id &&
+      this.scenario.referenced === "REF" &&
+      !this.scenario.loaded &&
+      this.scenario.hashTree
+    ) {
       this.scenario.root = this.node.parent.parent ? false : true;
       this.scenario.disabled = true;
       this.recursive(this.scenario.hashTree, this.scenario.projectId, true);
     }
   },
-  components: {ApiBaseComponent, MsSqlBasisParameters, MsTcpBasisParameters, MsDubboBasisParameters, MsApiRequestForm},
+  components: {
+    ApiBaseComponent,
+    MsSqlBasisParameters,
+    MsTcpBasisParameters,
+    MsDubboBasisParameters,
+    MsApiRequestForm,
+  },
   data() {
     return {
       loading: false,
       isShowInput: false,
       isShowNum: false,
-      stepFilter: new STEP,
-    }
+      stepFilter: new STEP(),
+    };
   },
   computed: {
     isDeletedOrRef() {
-      return this.scenario.referenced && this.scenario.referenced === 'Deleted' || this.scenario.referenced === 'REF';
+      return (
+        (this.scenario.referenced && this.scenario.referenced === "Deleted") ||
+        this.scenario.referenced === "REF"
+      );
     },
   },
   methods: {
     run() {
       if (!this.scenario.enable) {
-        this.$warning(this.$t('api_test.automation.debug_message'));
+        this.$warning(this.$t("api_test.automation.debug_message"));
         return;
       }
       this.scenario.run = true;
       let runScenario = JSON.parse(JSON.stringify(this.scenario));
-      let variables = JSON.parse(JSON.stringify(this.currentScenario.variables));
+      let variables = JSON.parse(
+        JSON.stringify(this.currentScenario.variables)
+      );
 
       // 合并自身依赖场景变量
       if (runScenario && runScenario.variableEnable && runScenario.variables) {
         if (variables) {
           // 同名合并
-          runScenario.variables.forEach(data => {
-            variables.forEach(item => {
+          runScenario.variables.forEach((data) => {
+            variables.forEach((item) => {
               if (data.type === item.type && data.name === item.name) {
                 Object.assign(data, item);
               }
-            })
+            });
           });
         }
       } else {
@@ -182,18 +261,18 @@ export default {
 
       runScenario.hashTree = [this.scenario];
       runScenario.stepScenario = true;
-      this.$emit('runScenario', runScenario);
+      this.$emit("runScenario", runScenario);
     },
     stop() {
       this.scenario.run = false;
-      this.$emit('stopScenario');
+      this.$emit("stopScenario");
       this.reload();
     },
     checkEnv(val) {
-      checkScenarioEnv(this.scenario.id).then(res => {
+      checkScenarioEnv(this.scenario.id).then((res) => {
         if (this.scenario.environmentEnable && !res.data) {
           this.scenario.environmentEnable = false;
-          this.$warning(this.$t('commons.scenario_warning'));
+          this.$warning(this.$t("commons.scenario_warning"));
           return;
         }
         this.setDomain(val);
@@ -206,57 +285,72 @@ export default {
         environmentType: this.environmentType,
         environmentGroupId: this.environmentGroupId,
         environmentMap: strMapToObj(this.envMap),
-        definition: JSON.stringify(this.scenario)
-      }
-      setScenarioDomain(param).then(res => {
+        definition: JSON.stringify(this.scenario),
+      };
+      setScenarioDomain(param).then((res) => {
         if (res.data) {
           let data = JSON.parse(res.data);
           this.scenario.hashTree = data.hashTree;
         }
-      })
+      });
     },
     getCode() {
       if (this.node && this.node.data.code && this.node.data.debug) {
         let status = this.node.data.code;
-        return status.toLowerCase()[0].toUpperCase() + status.toLowerCase().substr(1);
+        return (
+          status.toLowerCase()[0].toUpperCase() + status.toLowerCase().substr(1)
+        );
       }
-      return '';
+      return "";
     },
     remove() {
-      this.$emit('remove', this.scenario, this.node);
+      this.$emit("remove", this.scenario, this.node);
     },
     active() {
       if (this.node) {
-        if (this.node.data && this.node.data.isBatchProcess && this.node.data.referenced === 'REF') {
+        if (
+          this.node.data &&
+          this.node.data.isBatchProcess &&
+          this.node.data.referenced === "REF"
+        ) {
           this.node.expanded = false;
         } else {
           this.node.expanded = !this.node.expanded;
         }
       }
       if (this.scenario && this.scenario.hashTree && this.node.expanded) {
-        this.scenario.disabled = (this.scenario.id && this.scenario.referenced === 'REF');
-        this.recursive(this.scenario.hashTree, this.scenario.projectId, (this.scenario.id && this.scenario.referenced === 'REF'));
+        this.scenario.disabled =
+          this.scenario.id && this.scenario.referenced === "REF";
+        this.recursive(
+          this.scenario.hashTree,
+          this.scenario.projectId,
+          this.scenario.id && this.scenario.referenced === "REF"
+        );
       }
       this.reload();
     },
     copyRow() {
-      this.$emit('copyRow', this.scenario, this.node);
+      this.$emit("copyRow", this.scenario, this.node);
     },
     openScenario(data) {
-      this.$emit('openScenario', data);
+      this.$emit("openScenario", data);
     },
     reload() {
-      this.loading = true
+      this.loading = true;
       this.$nextTick(() => {
-        this.loading = false
-      })
+        this.loading = false;
+      });
     },
     recursive(arr, id, disabled) {
       for (let i in arr) {
         arr[i].disabled = disabled;
         arr[i].projectId = this.calcProjectId(arr[i].projectId, id);
         // 处理子请求环境
-        let typeArray = ["JDBCPostProcessor", "JDBCSampler", "JDBCPreProcessor"]
+        let typeArray = [
+          "JDBCPostProcessor",
+          "JDBCSampler",
+          "JDBCPreProcessor",
+        ];
         if (typeArray.indexOf(arr[i].type) !== -1) {
           arr[i].refEevMap = new Map();
           arr[i].environmentEnable = this.scenario.environmentEnable;
@@ -273,7 +367,7 @@ export default {
       if (!projectId) {
         return parentId ? parentId : getCurrentProjectID();
       } else {
-        const project = this.projectList.find(p => p.id === projectId);
+        const project = this.projectList.find((p) => p.id === projectId);
         if (project) {
           return projectId;
         }
@@ -282,20 +376,19 @@ export default {
     },
     getProjectName(id) {
       if (id !== getCurrentProjectID()) {
-        const project = this.projectList.find(p => p.id === id);
-        return project ? project.name : "";
+        const project = this.projectList.find((p) => p.id === id);
+        return project ? project.name + " > " : "";
       }
-
     },
     clickResource(resource) {
       let workspaceId = getCurrentWorkspaceId();
-      let isTurnSpace = true
-      getScenarioById(resource.id).then(res => {
+      let isTurnSpace = true;
+      getScenarioById(resource.id).then((res) => {
         if (res.data) {
           resource.projectId = res.data.projectId;
           if (resource.projectId !== getCurrentProjectID()) {
             isTurnSpace = false;
-            getProject(resource.projectId).then(response => {
+            getProject(resource.projectId).then((response) => {
               if (response.data) {
                 workspaceId = response.data.workspaceId;
                 isTurnSpace = true;
@@ -306,40 +399,38 @@ export default {
             this.checkPermission(resource, workspaceId, isTurnSpace);
           }
         }
-      })
+      });
     },
     gotoTurn(resource, workspaceId, isTurnSpace) {
       let automationData = this.$router.resolve({
-        name: 'ApiAutomationWithQuery',
+        name: "ApiAutomationWithQuery",
         params: {
           redirectID: getUUID(),
           dataType: "scenario",
-          dataSelectRange: 'edit:' + resource.id,
+          dataSelectRange: "edit:" + resource.id,
           projectId: resource.projectId,
-          workspaceId: workspaceId
-        }
+          workspaceId: workspaceId,
+        },
       });
       if (isTurnSpace) {
-        window.open(automationData.href, '_blank');
+        window.open(automationData.href, "_blank");
       }
     },
     checkPermission(resource, workspaceId, isTurnSpace) {
-      getOwnerProjectIds().then(res => {
-        const project = res.data.find(p => p === resource.projectId);
+      getOwnerProjectIds().then((res) => {
+        const project = res.data.find((p) => p === resource.projectId);
         if (!project) {
-          this.$warning(this.$t('commons.no_permission'));
+          this.$warning(this.$t("commons.no_permission"));
         } else {
-          this.gotoTurn(resource, workspaceId, isTurnSpace)
+          this.gotoTurn(resource, workspaceId, isTurnSpace);
         }
-      })
-    }
-
-  }
-}
+      });
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 :deep(.el-card__body) {
   padding: 6px 10px;
 }
@@ -357,7 +448,7 @@ export default {
 }
 
 .ms-req-error {
-  color: #F56C6C;
+  color: #f56c6c;
 }
 
 .ms-test-running {
@@ -365,11 +456,11 @@ export default {
 }
 
 .ms-req-success {
-  color: #67C23A;
+  color: #67c23a;
 }
 
 .ms-btn {
-  background-color: #409EFF;
+  background-color: #409eff;
   color: white;
 }
 
@@ -379,8 +470,8 @@ export default {
 }
 
 .stop-btn {
-  background-color: #E62424;
-  border-color: #EE6161;
+  background-color: #e62424;
+  border-color: #ee6161;
   color: white;
 }