diff --git a/frontend/src/business/components/api/automation/report/ApiReportDetail.vue b/frontend/src/business/components/api/automation/report/ApiReportDetail.vue
index 5f3bba8a44..ec80eb4a03 100644
--- a/frontend/src/business/components/api/automation/report/ApiReportDetail.vue
+++ b/frontend/src/business/components/api/automation/report/ApiReportDetail.vue
@@ -30,365 +30,365 @@
 
 <script>
 
-  import MsRequestResult from "./components/RequestResult";
-  import MsRequestResultTail from "./components/RequestResultTail";
-  import MsScenarioResult from "./components/ScenarioResult";
-  import MsMetricChart from "./components/MetricChart";
-  import MsScenarioResults from "./components/ScenarioResults";
-  import MsContainer from "@/business/components/common/components/MsContainer";
-  import MsMainContainer from "@/business/components/common/components/MsMainContainer";
-  import MsApiReportExport from "./ApiReportExport";
-  import MsApiReportViewHeader from "./ApiReportViewHeader";
-  import {RequestFactory} from "../../definition/model/ApiTestModel";
-  import {windowPrint, getUUID, getCurrentProjectID} from "@/common/js/utils";
+import MsRequestResult from "./components/RequestResult";
+import MsRequestResultTail from "./components/RequestResultTail";
+import MsScenarioResult from "./components/ScenarioResult";
+import MsMetricChart from "./components/MetricChart";
+import MsScenarioResults from "./components/ScenarioResults";
+import MsContainer from "@/business/components/common/components/MsContainer";
+import MsMainContainer from "@/business/components/common/components/MsMainContainer";
+import MsApiReportExport from "./ApiReportExport";
+import MsApiReportViewHeader from "./ApiReportViewHeader";
+import {RequestFactory} from "../../definition/model/ApiTestModel";
+import {windowPrint, getUUID, getCurrentProjectID} from "@/common/js/utils";
 
-  export default {
-    name: "MsApiReport",
-    components: {
-      MsApiReportViewHeader,
-      MsApiReportExport,
-      MsMainContainer,
-      MsContainer, MsScenarioResults, MsRequestResultTail, MsMetricChart, MsScenarioResult, MsRequestResult
-    },
-    data() {
-      return {
-        activeName: "total",
-        content: {},
-        report: {},
-        loading: true,
-        fails: [],
-        failsTreeNodes: [],
-        totalTime: 0,
-        isRequestResult: false,
-        request: {},
-        isActive: false,
-        scenarioName: null,
-        reportExportVisible: false,
-        requestType: undefined,
-        fullTreeNodes: [],
-      }
-    },
-    activated() {
+export default {
+  name: "MsApiReport",
+  components: {
+    MsApiReportViewHeader,
+    MsApiReportExport,
+    MsMainContainer,
+    MsContainer, MsScenarioResults, MsRequestResultTail, MsMetricChart, MsScenarioResult, MsRequestResult
+  },
+  data() {
+    return {
+      activeName: "total",
+      content: {},
+      report: {},
+      loading: true,
+      fails: [],
+      failsTreeNodes: [],
+      totalTime: 0,
+      isRequestResult: false,
+      request: {},
+      isActive: false,
+      scenarioName: null,
+      reportExportVisible: false,
+      requestType: undefined,
+      fullTreeNodes: [],
+    }
+  },
+  activated() {
+    this.isRequestResult = false;
+  },
+  props: {
+    reportId: String,
+    currentProjectId: String,
+    infoDb: Boolean,
+    debug: Boolean,
+  },
+  watch: {
+    reportId() {
+      this.getReport();
+    }
+  },
+  methods: {
+    init() {
+      this.loading = true;
+      this.report = {};
+      this.content = {};
+      this.fails = [];
+      this.report = {};
+      this.fullTreeNodes = [];
+      this.failsTreeNodes = [];
       this.isRequestResult = false;
     },
-    props: {
-      reportId: String,
-      currentProjectId: String,
-      infoDb: Boolean,
-      debug: Boolean,
+    handleClick(tab, event) {
+      this.isRequestResult = false
     },
-    watch: {
-      reportId() {
-        this.getReport();
+    active() {
+      this.isActive = !this.isActive;
+    },
+    formatResult(res) {
+      let resMap = new Map;
+      let array = [];
+      if (res && res.scenarios) {
+        res.scenarios.forEach(item => {
+          if (item && item.requestResults) {
+            item.requestResults.forEach(req => {
+              resMap.set(req.id + req.name, req);
+              req.name = item.name + "^@~@^" + req.name + "UUID=" + getUUID();
+              array.push(req);
+            })
+          }
+        })
+      }
+      this.formatTree(array, this.fullTreeNodes);
+      this.sort(this.fullTreeNodes);
+      this.$emit('refresh', resMap);
+    },
+    formatTree(array, tree) {
+      array.map((item) => {
+        let key = item.name;
+        let nodeArray = key.split('^@~@^');
+        let children = tree;
+
+        //运行场景中如果连续将1个场景引入多次，会出现运行结果合并的情况。
+        //为了解决这种问题，在转hashTree的时候给场景放了个新ID，前台加载解析的时候也要做处理
+        let scenarioId = "";
+        if (item.scenario !== null) {
+          let scenarioArr = JSON.parse(item.scenario);
+          if (scenarioArr.length > 1) {
+            let scenarioIdArr = scenarioArr[0].split("_");
+            scenarioId = scenarioIdArr[0];
+          }
+        }
+        // 循环构建子节点
+        for (let i = 0; i < nodeArray.length; i++) {
+          if (!nodeArray[i]) {
+            continue;
+          }
+          let node = {
+            label: nodeArray[i],
+            value: item,
+          };
+          if (i !== nodeArray.length) {
+            node.children = [];
+          }
+
+          if (children.length === 0) {
+            children.push(node);
+          }
+
+          let isExist = false;
+          for (let j in children) {
+            if (children[j].label === node.label) {
+
+              let idIsPath = true;
+              //判断ID是否匹配  目前发现问题的只有重复场景，而重复场景是在第二个节点开始合并的。所以这里暂时只判断第二个场景问题。
+              //如果出现了其他问题，则需要检查其他问题的数据结构。暂时采用具体问题具体分析的策略
+              if (i === nodeArray.length - 2) {
+                idIsPath = false;
+                let childId = "";
+                if (children[j].value != null && children[j].value.scenario !== null) {
+                  let scenarioArr = JSON.parse(children[j].value.scenario);
+                  if (scenarioArr.length > 1) {
+                    let childArr = scenarioArr[0].split("_");
+                    childId = childArr[0];
+                  }
+                }
+                if (scenarioId === "") {
+                  idIsPath = true;
+                } else if (scenarioId === childId) {
+                  idIsPath = true;
+                }
+              }
+              if (idIsPath) {
+                if (i !== nodeArray.length - 1 && !children[j].children) {
+                  children[j].children = [];
+                }
+                children = (i === nodeArray.length - 1 ? children : children[j].children);
+                isExist = true;
+                break;
+              }
+            }
+          }
+          if (!isExist) {
+            children.push(node);
+            if (i !== nodeArray.length - 1 && !children[children.length - 1].children) {
+              children[children.length - 1].children = [];
+            }
+            children = (i === nodeArray.length - 1 ? children : children[children.length - 1].children);
+          }
+        }
+      })
+    },
+    recursiveSorting(arr) {
+      for (let i in arr) {
+        if (arr[i]) {
+          arr[i].index = Number(i) + 1;
+          if (arr[i].children && arr[i].children.length > 0) {
+            this.recursiveSorting(arr[i].children);
+          }
+        }
       }
     },
-    methods: {
-      init() {
-        this.loading = true;
-        this.report = {};
-        this.content = {};
+    sort(scenarioDefinition) {
+      for (let i in scenarioDefinition) {
+        // 排序
+        if (scenarioDefinition[i]) {
+          scenarioDefinition[i].index = Number(i) + 1;
+          if (scenarioDefinition[i].children && scenarioDefinition[i].children.length > 0) {
+            this.recursiveSorting(scenarioDefinition[i].children);
+          }
+        }
+      }
+    },
+    getReport() {
+      this.init();
+      if (this.reportId) {
+        let url = "/api/scenario/report/get/" + this.reportId;
+        this.$get(url, response => {
+          this.report = response.data || {};
+          if (response.data) {
+            if (this.isNotRunning) {
+              try {
+                this.content = JSON.parse(this.report.content);
+                if (!this.content) {
+                  this.content = {scenarios: []};
+                }
+                this.formatResult(this.content);
+              } catch (e) {
+                throw e;
+              }
+              this.getFails();
+              this.computeTotalTime();
+              this.loading = false;
+            } else {
+              setTimeout(this.getReport, 2000)
+            }
+          } else {
+            this.loading = false;
+            this.$error(this.$t('api_report.not_exist'));
+          }
+        });
+      }
+    },
+    getFails() {
+      if (this.isNotRunning) {
         this.fails = [];
-        this.report = {};
-        this.fullTreeNodes = [];
-        this.failsTreeNodes = [];
-        this.isRequestResult = false;
-      },
-      handleClick(tab, event) {
-        this.isRequestResult = false
-      },
-      active() {
-        this.isActive = !this.isActive;
-      },
-      formatResult(res) {
-        let resMap = new Map;
         let array = [];
-        if (res && res.scenarios) {
-          res.scenarios.forEach(item => {
-            if (item && item.requestResults) {
-              item.requestResults.forEach(req => {
-                resMap.set(req.id, req);
-                req.name = item.name + "^@~@^" + req.name+ "UUID="+getUUID();
-                array.push(req);
+        this.totalTime = 0
+        if (this.content.scenarios) {
+          this.content.scenarios.forEach((scenario) => {
+            this.totalTime = this.totalTime + Number(scenario.responseTime)
+            let failScenario = Object.assign({}, scenario);
+            if (scenario.error > 0) {
+              this.fails.push(failScenario);
+              failScenario.requestResults = [];
+              scenario.requestResults.forEach((request) => {
+                if (!request.success) {
+                  let failRequest = Object.assign({}, request);
+                  failScenario.requestResults.push(failRequest);
+                  array.push(request);
+                }
               })
             }
           })
         }
-        this.formatTree(array, this.fullTreeNodes);
-        this.sort(this.fullTreeNodes);
-        this.$emit('refresh', resMap);
-      },
-      formatTree(array, tree) {
-        array.map((item) => {
-          let key = item.name;
-          let nodeArray = key.split('^@~@^');
-          let children = tree;
-
-          //运行场景中如果连续将1个场景引入多次，会出现运行结果合并的情况。
-          //为了解决这种问题，在转hashTree的时候给场景放了个新ID，前台加载解析的时候也要做处理
-          let scenarioId = "";
-          if(item.scenario !== null){
-            let scenarioArr = JSON.parse(item.scenario);
-            if(scenarioArr.length>1){
-              let scenarioIdArr = scenarioArr[0].split("_");
-              scenarioId = scenarioIdArr[0];
-            }
-          }
-          // 循环构建子节点
-          for (let i = 0;i < nodeArray.length;i++) {
-            if (!nodeArray[i]) {
-              continue;
-            }
-            let node = {
-              label: nodeArray[i],
-              value: item,
-            };
-            if (i !== nodeArray.length) {
-              node.children = [];
-            }
-
-            if (children.length === 0) {
-              children.push(node);
-            }
-
-            let isExist = false;
-            for (let j in children) {
-              if (children[j].label === node.label) {
-
-                let idIsPath = true;
-                //判断ID是否匹配  目前发现问题的只有重复场景，而重复场景是在第二个节点开始合并的。所以这里暂时只判断第二个场景问题。
-                //如果出现了其他问题，则需要检查其他问题的数据结构。暂时采用具体问题具体分析的策略
-                if(i === nodeArray.length-2){
-                  idIsPath = false;
-                  let childId = "";
-                  if(children[j].value != null && children[j].value.scenario !== null){
-                    let scenarioArr = JSON.parse(children[j].value.scenario);
-                    if(scenarioArr.length>1){
-                      let childArr = scenarioArr[0].split("_");
-                      childId = childArr[0];
-                    }
-                  }
-                  if(scenarioId === ""){
-                    idIsPath = true;
-                  }else if(scenarioId === childId){
-                    idIsPath = true;
-                  }
-                }
-                if(idIsPath){
-                  if (i !== nodeArray.length - 1 && !children[j].children) {
-                    children[j].children = [];
-                  }
-                  children = (i === nodeArray.length - 1 ? children : children[j].children);
-                  isExist = true;
-                  break;
-                }
-              }
-            }
-            if (!isExist) {
-              children.push(node);
-              if (i !== nodeArray.length - 1 && !children[children.length - 1].children) {
-                children[children.length - 1].children = [];
-              }
-              children = (i === nodeArray.length - 1 ? children : children[children.length - 1].children);
-            }
-          }
-        })
-      },
-      recursiveSorting(arr) {
-        for (let i in arr) {
-          if (arr[i]) {
-            arr[i].index = Number(i) + 1;
-            if (arr[i].children && arr[i].children.length > 0) {
-              this.recursiveSorting(arr[i].children);
-            }
-          }
-        }
-      },
-      sort(scenarioDefinition) {
-        for (let i in scenarioDefinition) {
-          // 排序
-          if (scenarioDefinition[i]) {
-            scenarioDefinition[i].index = Number(i) + 1;
-            if (scenarioDefinition[i].children && scenarioDefinition[i].children.length > 0) {
-              this.recursiveSorting(scenarioDefinition[i].children);
-            }
-          }
-        }
-      },
-      getReport() {
-        this.init();
-        if (this.reportId) {
-          let url = "/api/scenario/report/get/" + this.reportId;
-          this.$get(url, response => {
-            this.report = response.data || {};
-            if (response.data) {
-              if (this.isNotRunning) {
-                try {
-                  this.content = JSON.parse(this.report.content);
-                  if (!this.content) {
-                    this.content = {scenarios: []};
-                  }
-                  this.formatResult(this.content);
-                } catch (e) {
-                  throw e;
-                }
-                this.getFails();
-                this.computeTotalTime();
-                this.loading = false;
-              } else {
-                setTimeout(this.getReport, 2000)
-              }
-            } else {
-              this.loading = false;
-              this.$error(this.$t('api_report.not_exist'));
-            }
-          });
-        }
-      },
-      getFails() {
-        if (this.isNotRunning) {
-          this.fails = [];
-          let array = [];
-          this.totalTime = 0
-          if (this.content.scenarios) {
-            this.content.scenarios.forEach((scenario) => {
-              this.totalTime = this.totalTime + Number(scenario.responseTime)
-              let failScenario = Object.assign({}, scenario);
-              if (scenario.error > 0) {
-                this.fails.push(failScenario);
-                failScenario.requestResults = [];
-                scenario.requestResults.forEach((request) => {
-                  if (!request.success) {
-                    let failRequest = Object.assign({}, request);
-                    failScenario.requestResults.push(failRequest);
-                    array.push(request);
-                  }
-                })
-              }
-            })
-          }
-          this.formatTree(array, this.failsTreeNodes);
-          this.sort(this.failsTreeNodes);
-        }
-      },
-      computeTotalTime() {
-        if (this.content.scenarios) {
-          let startTime = 99991611737506593;
-          let endTime = 0;
-          this.content.scenarios.forEach((scenario) => {
-            scenario.requestResults.forEach((request) => {
-              if (request.startTime && Number(request.startTime) < startTime) {
-                startTime = request.startTime;
-              }
-              if (request.endTime && Number(request.endTime) > endTime) {
-                endTime = request.endTime;
-              }
-            })
-          })
-          if (startTime < endTime) {
-            this.totalTime = endTime - startTime + 100;
-          }
-        }
-      },
-      requestResult(requestResult) {
-        this.active();
-        this.isRequestResult = false;
-        this.requestType = undefined;
-        if (requestResult.request.body.indexOf('[Callable Statement]') > -1) {
-          this.requestType = RequestFactory.TYPES.SQL;
-        }
-        this.$nextTick(function () {
-          this.isRequestResult = true;
-          this.request = requestResult.request;
-          this.scenarioName = requestResult.scenarioName;
-        });
-      },
-      handleExport() {
-        this.reportExportVisible = true;
-        let reset = this.exportReportReset;
-        this.$nextTick(() => {
-          windowPrint('apiTestReport', 0.57);
-          reset();
-        });
-      },
-      handleSave() {
-        if (!this.report.name) {
-          this.$warning(this.$t('api_test.automation.report_name_info'));
-          return;
-        }
-        this.loading = true;
-        this.report.projectId = this.projectId;
-        let url = "/api/scenario/report/update";
-        this.result = this.$post(url, this.report, response => {
-          this.$success(this.$t('commons.save_success'));
-          this.loading = false;
-          this.$emit('refresh');
-        }, error => {
-          this.loading = false;
-        });
-      },
-      exportReportReset() {
-        this.$router.go(0);
+        this.formatTree(array, this.failsTreeNodes);
+        this.sort(this.failsTreeNodes);
       }
     },
-
-    created() {
-      this.getReport();
+    computeTotalTime() {
+      if (this.content.scenarios) {
+        let startTime = 99991611737506593;
+        let endTime = 0;
+        this.content.scenarios.forEach((scenario) => {
+          scenario.requestResults.forEach((request) => {
+            if (request.startTime && Number(request.startTime) < startTime) {
+              startTime = request.startTime;
+            }
+            if (request.endTime && Number(request.endTime) > endTime) {
+              endTime = request.endTime;
+            }
+          })
+        })
+        if (startTime < endTime) {
+          this.totalTime = endTime - startTime + 100;
+        }
+      }
     },
-
-    computed: {
-      path() {
-        return "/api/test/edit?id=" + this.report.testId;
-      },
-      isNotRunning() {
-        return "Running" !== this.report.status;
-      },
-      projectId() {
-        return getCurrentProjectID();
-      },
+    requestResult(requestResult) {
+      this.active();
+      this.isRequestResult = false;
+      this.requestType = undefined;
+      if (requestResult.request.body.indexOf('[Callable Statement]') > -1) {
+        this.requestType = RequestFactory.TYPES.SQL;
+      }
+      this.$nextTick(function () {
+        this.isRequestResult = true;
+        this.request = requestResult.request;
+        this.scenarioName = requestResult.scenarioName;
+      });
+    },
+    handleExport() {
+      this.reportExportVisible = true;
+      let reset = this.exportReportReset;
+      this.$nextTick(() => {
+        windowPrint('apiTestReport', 0.57);
+        reset();
+      });
+    },
+    handleSave() {
+      if (!this.report.name) {
+        this.$warning(this.$t('api_test.automation.report_name_info'));
+        return;
+      }
+      this.loading = true;
+      this.report.projectId = this.projectId;
+      let url = "/api/scenario/report/update";
+      this.result = this.$post(url, this.report, response => {
+        this.$success(this.$t('commons.save_success'));
+        this.loading = false;
+        this.$emit('refresh');
+      }, error => {
+        this.loading = false;
+      });
+    },
+    exportReportReset() {
+      this.$router.go(0);
     }
+  },
+
+  created() {
+    this.getReport();
+  },
+
+  computed: {
+    path() {
+      return "/api/test/edit?id=" + this.report.testId;
+    },
+    isNotRunning() {
+      return "Running" !== this.report.status;
+    },
+    projectId() {
+      return getCurrentProjectID();
+    },
   }
+}
 </script>
 <style>
-  .report-container .el-tabs__header {
-    margin-bottom: 1px;
-  }
+.report-container .el-tabs__header {
+  margin-bottom: 1px;
+}
 </style>
 
 <style scoped>
 
-  .report-container {
-    height: calc(100vh - 155px);
-    min-height: 600px;
-    overflow-y: auto;
-  }
+.report-container {
+  height: calc(100vh - 155px);
+  min-height: 600px;
+  overflow-y: auto;
+}
 
-  .report-header {
-    font-size: 15px;
-  }
+.report-header {
+  font-size: 15px;
+}
 
-  .report-header a {
-    text-decoration: none;
-  }
+.report-header a {
+  text-decoration: none;
+}
 
-  .report-header .time {
-    color: #909399;
-    margin-left: 10px;
-  }
+.report-header .time {
+  color: #909399;
+  margin-left: 10px;
+}
 
-  .report-container .fail {
-    color: #F56C6C;
-  }
+.report-container .fail {
+  color: #F56C6C;
+}
 
-  .report-container .is-active .fail {
-    color: inherit;
-  }
+.report-container .is-active .fail {
+  color: inherit;
+}
 
-  .export-button {
-    float: right;
-  }
+.export-button {
+  float: right;
+}
 
-  .scenario-result .icon.is-active {
-    transform: rotate(90deg);
-  }
+.scenario-result .icon.is-active {
+  transform: rotate(90deg);
+}
 
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index 5e46b1025d..3519d621c9 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -5,7 +5,7 @@
 
         <!--操作按钮-->
         <div class="ms-opt-btn">
-          <el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="path === '/api/automation/update'">{{$t('operating_log.change_history')}}</el-link>
+          <el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="path === '/api/automation/update'">{{ $t('operating_log.change_history') }}</el-link>
 
           <el-button id="inputDelay" type="primary" size="small" v-prevent-re-click @click="editScenario"
                      title="ctrl + s">
@@ -118,7 +118,7 @@
                   </el-tooltip>
                 </el-col>
                 <el-col :span="3" class="ms-col-one ms-font">
-                  {{$t('api_test.automation.step_total')}}：{{scenarioDefinition.length}}
+                  {{ $t('api_test.automation.step_total') }}：{{ scenarioDefinition.length }}
                 </el-col>
                 <el-col :span="3" class="ms-col-one ms-font">
                   <el-link class="head" @click="showScenarioParameters">{{ $t('api_test.automation.scenario_total') }}
@@ -148,10 +148,10 @@
             <!-- 场景步骤内容 -->
             <div>
               <el-button class="el-icon-files ms-open-btn ms-open-btn-left" size="mini" v-prevent-re-click @click="openExpansion">
-                {{$t('api_test.automation.open_expansion')}}
+                {{ $t('api_test.automation.open_expansion') }}
               </el-button>
               <el-button class=" el-icon-notebook-1 ms-open-btn" size="mini" @click="closeExpansion">
-                {{$t('api_test.automation.close_expansion')}}
+                {{ $t('api_test.automation.close_expansion') }}
               </el-button>
               <el-tree node-key="resourceId" :props="props" :data="scenarioDefinition" class="ms-tree"
                        :default-expanded-keys="expandedNode"
@@ -239,1101 +239,1100 @@
 </template>
 
 <script>
-  import {API_STATUS, PRIORITY} from "../../definition/model/JsonData";
-  import {WORKSPACE_ID} from '@/common/js/constants';
-  import {
-    Assertions,
-    ConstantTimer,
-    Extract,
-    IfController,
-    JSR223Processor,
-    LoopController,
-    TransactionController
-  } from "../../definition/model/ApiTestModel";
-  import {parseEnvironment} from "../../definition/model/EnvironmentModel";
-  import {ELEMENT_TYPE, ELEMENTS} from "./Setting";
-  import MsApiCustomize from "./ApiCustomize";
-  import {getUUID, objToStrMap, strMapToObj, handleCtrlSEvent, getCurrentProjectID} from "@/common/js/utils";
-  import ApiEnvironmentConfig from "@/business/components/api/test/components/ApiEnvironmentConfig";
-  import MsInputTag from "./MsInputTag";
-  import MsRun from "./DebugRun";
-  import MsApiReportDetail from "../report/ApiReportDetail";
-  import MsVariableList from "./variable/VariableList";
-  import ApiImport from "../../definition/components/import/ApiImport";
-  import "@/common/css/material-icons.css"
-  import OutsideClick from "@/common/js/outside-click";
-  import ScenarioApiRelevance from "./api/ApiRelevance";
-  import ScenarioRelevance from "./api/ScenarioRelevance";
-  import MsComponentConfig from "./component/ComponentConfig";
-  import EnvPopover from "@/business/components/api/automation/scenario/EnvPopover";
-  import MaximizeScenario from "./maximize/MaximizeScenario";
-  import ScenarioHeader from "./maximize/ScenarioHeader";
-  import MsDrawer from "../../../common/components/MsDrawer";
-  import MsSelectTree from "../../../common/select-tree/SelectTree";
-  import {saveScenario} from "@/business/components/api/automation/api-automation";
-  import MsChangeHistory from "../../../history/ChangeHistory";
+import {API_STATUS, PRIORITY} from "../../definition/model/JsonData";
+import {WORKSPACE_ID} from '@/common/js/constants';
+import {
+  Assertions,
+  ConstantTimer,
+  Extract,
+  IfController,
+  JSR223Processor,
+  LoopController,
+  TransactionController
+} from "../../definition/model/ApiTestModel";
+import {parseEnvironment} from "../../definition/model/EnvironmentModel";
+import {ELEMENT_TYPE, ELEMENTS} from "./Setting";
+import MsApiCustomize from "./ApiCustomize";
+import {getUUID, objToStrMap, strMapToObj, handleCtrlSEvent, getCurrentProjectID} from "@/common/js/utils";
+import ApiEnvironmentConfig from "@/business/components/api/test/components/ApiEnvironmentConfig";
+import MsInputTag from "./MsInputTag";
+import MsRun from "./DebugRun";
+import MsApiReportDetail from "../report/ApiReportDetail";
+import MsVariableList from "./variable/VariableList";
+import ApiImport from "../../definition/components/import/ApiImport";
+import "@/common/css/material-icons.css"
+import OutsideClick from "@/common/js/outside-click";
+import ScenarioApiRelevance from "./api/ApiRelevance";
+import ScenarioRelevance from "./api/ScenarioRelevance";
+import MsComponentConfig from "./component/ComponentConfig";
+import EnvPopover from "@/business/components/api/automation/scenario/EnvPopover";
+import MaximizeScenario from "./maximize/MaximizeScenario";
+import ScenarioHeader from "./maximize/ScenarioHeader";
+import MsDrawer from "../../../common/components/MsDrawer";
+import MsSelectTree from "../../../common/select-tree/SelectTree";
+import {saveScenario} from "@/business/components/api/automation/api-automation";
+import MsChangeHistory from "../../../history/ChangeHistory";
 
-  let jsonPath = require('jsonpath');
-  export default {
-    name: "EditApiScenario",
-    props: {
-      moduleOptions: Array,
-      currentScenario: {},
-      type: String,
-      customNum: {
-        type: Boolean,
-        default: false
-      }
-    },
-    components: {
-      MsVariableList,
-      ScenarioRelevance,
-      ScenarioApiRelevance,
-      ApiEnvironmentConfig,
-      MsApiReportDetail,
-      MsInputTag, MsRun,
-      MsApiCustomize,
-      ApiImport,
-      MsComponentConfig,
-      EnvPopover,
-      MaximizeScenario,
-      ScenarioHeader,
-      MsDrawer,
-      MsSelectTree,
-      MsChangeHistory
-    },
-    data() {
-      return {
-        props: {
-          label: "label",
-          children: "hashTree"
-        },
-        moduleObj: {
-          id: 'id',
-          label: 'name',
-        },
-        rules: {
-          name: [
-            {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
-            {max: 100, message: this.$t('test_track.length_less_than') + '100', trigger: 'blur'}
-          ],
-          userId: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
-          apiScenarioModuleId: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
-          status: [{required: true, message: this.$t('commons.please_select'), trigger: 'change'}],
-          principal: [{required: true, message: this.$t('api_test.definition.request.responsible'), trigger: 'change'}],
-          customNum: [
-            {required: true, message: "ID必填", trigger: 'blur'},
-            {max: 50, message: this.$t('test_track.length_less_than') + '50', trigger: 'blur'}
-          ],
-        },
-        environments: [],
-        currentEnvironmentId: "",
-        maintainerOptions: [],
-        value: API_STATUS[0].id,
-        options: API_STATUS,
-        levels: PRIORITY,
-        scenario: {},
-        loading: false,
-        apiListVisible: false,
-        customizeVisible: false,
-        isBtnHide: false,
-        debugVisible: false,
-        customizeRequest: {protocol: "HTTP", type: "API", hashTree: [], referenced: 'Created', active: false},
-        operatingElements: [],
-        currentRow: {cases: [], apis: [], referenced: true},
-        selectedTreeNode: undefined,
-        selectedNode: undefined,
-        expandedNode: [],
-        scenarioDefinition: [],
-        path: "/api/automation/create",
-        debugData: {},
-        reportId: "",
-        enableCookieShare: false,
-        globalOptions: {
-          spacing: 30
-        },
-        response: {},
-        projectIds: new Set,
-        projectEnvMap: new Map,
-        projectList: [],
-        debugResult: new Map,
-        drawer: false,
-        isFullUrl: true,
-        expandedStatus: false,
-        envResult: {
-          loading: false
-        }
-      }
-    },
-    created() {
-      if (!this.currentScenario.apiScenarioModuleId) {
-        this.currentScenario.apiScenarioModuleId = "";
-      }
-      this.operatingElements = ELEMENTS.get("ALL");
-      this.getWsProjects();
-      this.getMaintainerOptions();
-      this.getApiScenario();
-      this.addListener(); //  添加 ctrl s 监听
-    },
-    directives: {OutsideClick},
-    computed: {
-      buttons() {
-        let buttons = [
-          {
-            title: this.$t('api_test.definition.request.extract_param'),
-            show: this.showButton("Extract"),
-            titleColor: "#015478",
-            titleBgColor: "#E6EEF2",
-            icon: "colorize",
-            click: () => {
-              this.addComponent('Extract')
-            }
-          },
-          {
-            title: this.$t('api_test.definition.request.post_script'),
-            show: this.showButton("JSR223PostProcessor"),
-            titleColor: "#783887",
-            titleBgColor: "#F2ECF3",
-            icon: "skip_next",
-            click: () => {
-              this.addComponent('JSR223PostProcessor')
-            }
-          },
-          {
-            title: this.$t('api_test.definition.request.pre_script'),
-            show: this.showButton("JSR223PreProcessor"),
-            titleColor: "#B8741A",
-            titleBgColor: "#F9F1EA",
-            icon: "skip_previous",
-            click: () => {
-              this.addComponent('JSR223PreProcessor')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.customize_script'),
-            show: this.showButton("JSR223Processor"),
-            titleColor: "#7B4D12",
-            titleBgColor: "#F1EEE9",
-            icon: "code",
-            click: () => {
-              this.addComponent('JSR223Processor')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.if_controller'),
-            show: this.showButton("IfController"),
-            titleColor: "#E6A23C",
-            titleBgColor: "#FCF6EE",
-            icon: "alt_route",
-            click: () => {
-              this.addComponent('IfController')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.loop_controller'),
-            show: this.showButton("LoopController"),
-            titleColor: "#02A7F0",
-            titleBgColor: "#F4F4F5",
-            icon: "next_plan",
-            click: () => {
-              this.addComponent('LoopController')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.transcation_controller'),
-            show: this.showButton("TransactionController"),
-            titleColor: "#6D317C",
-            titleBgColor: "#F4F4F5",
-            icon: "alt_route",
-            click: () => {
-              this.addComponent('TransactionController')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.wait_controller'),
-            show: this.showButton("ConstantTimer"),
-            titleColor: "#67C23A",
-            titleBgColor: "#F2F9EE",
-            icon: "access_time",
-            click: () => {
-              this.addComponent('ConstantTimer')
-            }
-          },
-          {
-            title: this.$t('api_test.definition.request.assertions_rule'),
-            show: this.showButton("Assertions"),
-            titleColor: "#A30014",
-            titleBgColor: "#F7E6E9",
-            icon: "next_plan",
-            click: () => {
-              this.addComponent('Assertions')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.customize_req'),
-            show: this.showButton("CustomizeReq"),
-            titleColor: "#008080",
-            titleBgColor: "#EBF2F2",
-            icon: "tune",
-            click: () => {
-              this.addComponent('CustomizeReq')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.scenario_import'),
-            show: this.showButton("scenario"),
-            titleColor: "#606266",
-            titleBgColor: "#F4F4F5",
-            icon: "movie",
-            click: () => {
-              this.addComponent('scenario')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.api_list_import'),
-            show: this.showButton("HTTPSamplerProxy", "DubboSampler", "JDBCSampler", "TCPSampler"),
-            titleColor: "#F56C6C",
-            titleBgColor: "#FCF1F1",
-            icon: "api",
-            click: this.apiListImport
-          }
-        ];
-        return buttons.filter(btn => btn.show);
+let jsonPath = require('jsonpath');
+export default {
+  name: "EditApiScenario",
+  props: {
+    moduleOptions: Array,
+    currentScenario: {},
+    type: String,
+    customNum: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    MsVariableList,
+    ScenarioRelevance,
+    ScenarioApiRelevance,
+    ApiEnvironmentConfig,
+    MsApiReportDetail,
+    MsInputTag, MsRun,
+    MsApiCustomize,
+    ApiImport,
+    MsComponentConfig,
+    EnvPopover,
+    MaximizeScenario,
+    ScenarioHeader,
+    MsDrawer,
+    MsSelectTree,
+    MsChangeHistory
+  },
+  data() {
+    return {
+      props: {
+        label: "label",
+        children: "hashTree"
       },
-      projectId() {
-        return getCurrentProjectID();
+      moduleObj: {
+        id: 'id',
+        label: 'name',
       },
-    },
-    methods: {
-      openHis() {
-        this.$refs.changeHistory.open(this.currentScenario.id);
+      rules: {
+        name: [
+          {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
+          {max: 100, message: this.$t('test_track.length_less_than') + '100', trigger: 'blur'}
+        ],
+        userId: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
+        apiScenarioModuleId: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
+        status: [{required: true, message: this.$t('commons.please_select'), trigger: 'change'}],
+        principal: [{required: true, message: this.$t('api_test.definition.request.responsible'), trigger: 'change'}],
+        customNum: [
+          {required: true, message: "ID必填", trigger: 'blur'},
+          {max: 50, message: this.$t('test_track.length_less_than') + '50', trigger: 'blur'}
+        ],
       },
-      setModule(id, data) {
-        this.currentScenario.apiScenarioModuleId = id;
-        this.currentScenario.modulePath = data.path;
+      environments: [],
+      currentEnvironmentId: "",
+      maintainerOptions: [],
+      value: API_STATUS[0].id,
+      options: API_STATUS,
+      levels: PRIORITY,
+      scenario: {},
+      loading: false,
+      apiListVisible: false,
+      customizeVisible: false,
+      isBtnHide: false,
+      debugVisible: false,
+      customizeRequest: {protocol: "HTTP", type: "API", hashTree: [], referenced: 'Created', active: false},
+      operatingElements: [],
+      currentRow: {cases: [], apis: [], referenced: true},
+      selectedTreeNode: undefined,
+      selectedNode: undefined,
+      expandedNode: [],
+      scenarioDefinition: [],
+      path: "/api/automation/create",
+      debugData: {},
+      reportId: "",
+      enableCookieShare: false,
+      globalOptions: {
+        spacing: 30
       },
-      setHideBtn() {
-        this.isBtnHide = false;
-      },
-      // 打开引用的场景
-      openScenario(data) {
-        this.$emit('openScenario', data);
-      },
-      setCookieShare(cookie) {
-        this.enableCookieShare = cookie;
-      },
-      showAllBtn() {
-        this.$refs.maximizeScenario.showAll();
-      },
-      addListener() {
-        document.addEventListener("keydown", this.createCtrlSHandle);
-        // document.addEventListener("keydown", (even => handleCtrlSEvent(even, this.$refs.httpApi.saveApi)));
-      },
-      removeListener() {
-        document.removeEventListener("keydown", this.createCtrlSHandle);
-      },
-      createCtrlSHandle(event) {
-        handleCtrlSEvent(event, this.editScenario);
-      },
-      getIdx(index) {
-        return index - 0.33
-      },
-      setVariables(v, headers) {
-        this.currentScenario.variables = v;
-        this.currentScenario.headers = headers;
-        if (this.path.endsWith("/update")) {
-          // 直接更新场景防止编辑内容丢失
-          this.editScenario();
-        }
-        if (this.$refs.maximizeHeader) {
-          this.$refs.maximizeHeader.getVariableSize();
-        }
-        this.reload();
-      },
-      showButton(...names) {
-        for (const name of names) {
-          if (name && this.operatingElements && this.operatingElements.includes(name)) {
-            return true;
-          }
-        }
-        return false;
-      },
-      outsideClick(e) {
-        e.stopPropagation();
-        this.showAll();
-      },
-      fabClick() {
-        if (this.operatingElements.length < 1) {
-          this.$info("引用的场景或接口无法添加配置");
-        }
-      },
-      addComponent(type) {
-        switch (type) {
-          case ELEMENT_TYPE.IfController:
-            this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new IfController()) :
-              this.scenarioDefinition.push(new IfController());
-            break;
-          case ELEMENT_TYPE.ConstantTimer:
-            this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new ConstantTimer()) :
-              this.scenarioDefinition.push(new ConstantTimer());
-            break;
-          case ELEMENT_TYPE.JSR223Processor:
-            this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new JSR223Processor()) :
-              this.scenarioDefinition.push(new JSR223Processor());
-            break;
-          case ELEMENT_TYPE.JSR223PreProcessor:
-            this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new JSR223Processor({type: "JSR223PreProcessor"})) :
-              this.scenarioDefinition.push(new JSR223Processor({type: "JSR223PreProcessor"}));
-            break;
-          case ELEMENT_TYPE.JSR223PostProcessor:
-            this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new JSR223Processor({type: "JSR223PostProcessor"})) :
-              this.scenarioDefinition.push(new JSR223Processor({type: "JSR223PostProcessor"}));
-            break;
-          case ELEMENT_TYPE.Assertions:
-            this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new Assertions()) :
-              this.scenarioDefinition.push(new Assertions());
-            break;
-          case ELEMENT_TYPE.Extract:
-            this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new Extract()) :
-              this.scenarioDefinition.push(new Extract());
-            break;
-          case ELEMENT_TYPE.CustomizeReq:
-            this.customizeRequest = {protocol: "HTTP", type: "API", hashTree: [], referenced: 'Created', active: false};
-            this.customizeVisible = true;
-            break;
-          case  ELEMENT_TYPE.LoopController:
-            this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new LoopController()) :
-              this.scenarioDefinition.push(new LoopController());
-            break;
-          case ELEMENT_TYPE.TransactionController:
-            this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new TransactionController()) :
-              this.scenarioDefinition.push(new TransactionController());
-            break;
-          case ELEMENT_TYPE.scenario:
-            this.isBtnHide = true;
-            this.$refs.scenarioRelevance.open();
-            break;
-          default:
-            this.$refs.apiImport.open();
-            break;
-        }
-        if (this.selectedNode) {
-          this.selectedNode.expanded = true;
-        }
-        this.sort();
-      },
-      nodeClick(data, node) {
-        if (data.referenced != 'REF' && data.referenced != 'Deleted' && !data.disabled) {
-          this.operatingElements = ELEMENTS.get(data.type);
-        } else {
-          this.operatingElements = [];
-        }
-        this.selectedTreeNode = data;
-        this.selectedNode = node;
-      },
-      suggestClick(node) {
-        this.response = {};
-        if (node.parent && node.parent.data.requestResult) {
-          this.response = node.parent.data.requestResult;
-        }
-      },
-      showAll() {
-        // 控制当有弹出页面操作时禁止刷新按钮列表
-        if (!this.customizeVisible && !this.isBtnHide) {
-          this.operatingElements = ELEMENTS.get("ALL");
-          this.selectedTreeNode = undefined;
-        }
-      },
-      apiListImport() {
-        this.isBtnHide = true;
-        this.$refs.scenarioApiRelevance.open();
-      },
-      recursiveSorting(arr, scenarioProjectId) {
-        for (let i in arr) {
-          arr[i].index = Number(i) + 1;
-          if (!arr[i].resourceId) {
-            arr[i].resourceId = getUUID();
-          }
-          if (arr[i].type === ELEMENT_TYPE.LoopController && arr[i].loopType === "LOOP_COUNT" && arr[i].hashTree && arr[i].hashTree.length > 1) {
-            arr[i].countController.proceed = true;
-          }
-          if (!arr[i].projectId) {
-            // 如果自身没有ID并且场景有ID则赋值场景ID，否则赋值当前项目ID
-            arr[i].projectId = scenarioProjectId ? scenarioProjectId : this.projectId;
-          } else {
-            const project = this.projectList.find(p => p.id === arr[i].projectId);
-            if (!project) {
-              arr[i].projectId = scenarioProjectId ? scenarioProjectId : this.projectId;
-            }
-          }
-
-          if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) {
-            this.recursiveSorting(arr[i].hashTree, arr[i].projectId);
-          }
-          // 添加debug结果
-          if (this.debugResult && this.debugResult.get(arr[i].id)) {
-            arr[i].requestResult = this.debugResult.get(arr[i].id);
-          }
-        }
-      },
-      sort() {
-        for (let i in this.scenarioDefinition) {
-          // 排序
-          this.scenarioDefinition[i].index = Number(i) + 1;
-          if (!this.scenarioDefinition[i].resourceId) {
-            this.scenarioDefinition[i].resourceId = getUUID();
-          }
-          // 设置循环控制
-          if (this.scenarioDefinition[i].type === ELEMENT_TYPE.LoopController && this.scenarioDefinition[i].hashTree
-            && this.scenarioDefinition[i].hashTree.length > 1) {
-            this.scenarioDefinition[i].countController.proceed = true;
-          }
-          // 设置项目ID
-          if (!this.scenarioDefinition[i].projectId) {
-            this.scenarioDefinition[i].projectId = this.projectId;
-          } else {
-            const project = this.projectList.find(p => p.id === this.scenarioDefinition[i].projectId);
-            if (!project) {
-              this.scenarioDefinition[i].projectId = this.projectId;
-            }
-          }
-
-          if (this.scenarioDefinition[i].hashTree != undefined && this.scenarioDefinition[i].hashTree.length > 0) {
-            this.recursiveSorting(this.scenarioDefinition[i].hashTree, this.scenarioDefinition[i].projectId);
-          }
-          // 添加debug结果
-          if (this.debugResult && this.debugResult.get(this.scenarioDefinition[i].id)) {
-            this.scenarioDefinition[i].requestResult = this.debugResult.get(this.scenarioDefinition[i].id);
-          }
-        }
-      },
-      addCustomizeApi(request) {
-        this.customizeVisible = false;
-        request.enable === undefined ? request.enable = true : request.enable;
-        if (this.selectedTreeNode != undefined) {
-          this.selectedTreeNode.hashTree.push(request);
-        } else {
-          this.scenarioDefinition.push(request);
-        }
-        this.customizeRequest = {};
-        this.sort();
-        this.reload();
-      },
-      addScenario(arr) {
-        if (arr && arr.length > 0) {
-          arr.forEach(item => {
-            if (item.id === this.currentScenario.id) {
-              this.$error("不能引用或复制自身！");
-              return;
-            }
-            if (!item.hashTree) {
-              item.hashTree = [];
-            }
-            item.enable === undefined ? item.enable = true : item.enable;
-            if (this.selectedTreeNode != undefined) {
-              this.selectedTreeNode.hashTree.push(item);
-            } else {
-              this.scenarioDefinition.push(item);
-            }
-          })
-        }
-        this.isBtnHide = false;
-        this.sort();
-        this.reload();
-      },
-      setApiParameter(item, refType, referenced) {
-        let request = {};
-        if (Object.prototype.toString.call(item.request).indexOf("String") > 0) {
-          request = JSON.parse(item.request);
-        } else {
-          request = item.request;
-        }
-        if (item.protocol) {
-          request.protocol = item.protocol;
-        }
-        if (request.protocol === "DUBBO") {
-          request.protocol = "dubbo://";
-        }
-        request.id = item.id;
-        request.name = item.name;
-        request.refType = refType;
-        request.referenced = referenced;
-        request.enable === undefined ? request.enable = true : request.enable;
-        request.active = false;
-        request.resourceId = getUUID();
-        request.projectId = item.projectId;
-        if (!request.url) {
-          request.url = "";
-        }
-        if (referenced === 'REF' || !request.hashTree) {
-          request.hashTree = [];
-        }
-        if (this.selectedTreeNode != undefined) {
-          this.selectedTreeNode.hashTree.push(request);
-        } else {
-          this.scenarioDefinition.push(request);
-        }
-      },
-      pushApiOrCase(data, refType, referenced) {
-        data.forEach(item => {
-          this.setApiParameter(item, refType, referenced);
-        });
-        this.isBtnHide = false;
-        this.sort();
-        this.reload();
-      },
-      getMaintainerOptions() {
-        this.$post('/user/project/member/tester/list', {projectId: getCurrentProjectID()},response => {
-          this.maintainerOptions = response.data;
-        });
-      },
-      openTagConfig() {
-        if (!this.projectId) {
-          this.$error(this.$t('api_test.select_project'));
-          return;
-        }
-        this.$refs.tag.open();
-      },
-      remove(row, node) {
-        let name = row === undefined || row.name === undefined ? "" : row.name;
-        this.$alert(this.$t('api_test.definition.request.delete_confirm_step') + ' ' + name + " ？", '', {
-          confirmButtonText: this.$t('commons.confirm'),
-          callback: (action) => {
-            if (action === 'confirm') {
-              const parent = node.parent
-              const hashTree = parent.data.hashTree || parent.data;
-              const index = hashTree.findIndex(d => d.resourceId != undefined && row.resourceId != undefined && d.resourceId === row.resourceId)
-              hashTree.splice(index, 1);
-              this.sort();
-              this.reload();
-            }
-          }
-        });
-      },
-      copyRow(row, node) {
-        const parent = node.parent
-        const hashTree = parent.data.hashTree || parent.data;
-        // 深度复制
-        let obj = JSON.parse(JSON.stringify(row));
-        obj.resourceId = getUUID();
-        if (obj.name) {
-          obj.name = obj.name + '_copy';
-        }
-        const index = hashTree.findIndex(d => d.resourceId === row.resourceId);
-        if (index != -1) {
-          hashTree.splice(index + 1, 0, obj);
-        } else {
-          hashTree.push(obj);
-        }
-        this.sort();
-        this.reload();
-      },
-      reload() {
-        this.loading = true
-        this.$nextTick(() => {
-          this.loading = false
-        });
-      },
-      runDebug() {
-        /*触发执行操作*/
-        this.$refs['currentScenario'].validate((valid) => {
-          if (valid) {
-            let definition = JSON.parse(JSON.stringify(this.currentScenario));
-            definition.hashTree = this.scenarioDefinition;
-            this.getEnv(JSON.stringify(definition)).then(() => {
-              let promise = this.$refs.envPopover.initEnv();
-              promise.then(() => {
-                let sign = this.$refs.envPopover.checkEnv(this.isFullUrl);
-                if (!sign) {
-                  return;
-                }
-                //调试时不再保存
-                this.debugData = {
-                  id: this.currentScenario.id,
-                  name: this.currentScenario.name,
-                  type: "scenario",
-                  variables: this.currentScenario.variables,
-                  referenced: 'Created',
-                  enableCookieShare: this.enableCookieShare,
-                  headers: this.currentScenario.headers,
-                  environmentMap: this.projectEnvMap,
-                  hashTree: this.scenarioDefinition
-                };
-                this.reportId = getUUID().substring(0, 8);
-                // this.editScenario().then(() => {
-                //
-                // })
-              })
-
-            })
-          }
-        })
-      },
-      getEnvironments() {
-        if (this.projectId) {
-          this.$get('/api/environment/list/' + this.projectId, response => {
-            this.environments = response.data;
-            this.environments.forEach(environment => {
-              parseEnvironment(environment);
-            });
-            let hasEnvironment = false;
-            for (let i in this.environments) {
-              if (this.environments[i].id === this.currentEnvironmentId) {
-                hasEnvironment = true;
-                break;
-              }
-            }
-            if (!hasEnvironment) {
-              this.currentEnvironmentId = '';
-            }
-            //检查场景是否需要先进行保存
-            this.checkDataIsCopy();
-          });
-        }
-      },
-
-      checkDataIsCopy() {
-        //  如果是复制按钮创建的场景，直接进行保存
-        if (this.currentScenario.copy) {
-          this.editScenario(false);
-        }
-      },
-
-      openEnvironmentConfig() {
-        if (!this.projectId) {
-          this.$error(this.$t('api_test.select_project'));
-          return;
-        }
-        this.$refs.environmentConfig.open(this.projectId);
-      },
-      environmentConfigClose() {
-        this.getEnvironments();
-      },
-      allowDrop(draggingNode, dropNode, dropType) {
-        if (dropType != "inner") {
-          return true;
-        }
-        else if (dropType === "inner" && dropNode.data.referenced != 'REF' && dropNode.data.referenced != 'Deleted'
-          && ELEMENTS.get(dropNode.data.type).indexOf(draggingNode.data.type) != -1) {
-          return true;
-        }
-        return false;
-      },
-      allowDrag(draggingNode, dropNode, dropType) {
-        if (dropNode && draggingNode && dropType) {
-          this.sort();
-          this.reload();
-        }
-      },
-      nodeExpand(data, node) {
-        if (data && data.resourceId && this.expandedNode.indexOf(data.resourceId) === -1) {
-          this.expandedNode.push(data.resourceId);
-        }
-      },
-      nodeCollapse(data, node) {
-        if (data && data.resourceId) {
-          this.expandedNode.splice(this.expandedNode.indexOf(data.resourceId), 1);
-        }
-      },
-      editScenario() {
-        if (!document.getElementById("inputDelay")) {
-          return;
-        }
-        return new Promise((resolve) => {
-          document.getElementById("inputDelay").focus();  //  保存前在input框自动失焦，以免保存失败
-          this.$refs['currentScenario'].validate((valid) => {
-            if (valid) {
-              this.setParameter();
-              saveScenario(this.path, this.currentScenario, this.scenarioDefinition, (response) => {
-                this.$success(this.$t('commons.save_success'));
-                this.path = "/api/automation/update";
-                if (response.data) {
-                  this.currentScenario.id = response.data.id;
-                }
-                if (this.currentScenario.tags instanceof String) {
-                  this.currentScenario.tags = JSON.parse(this.currentScenario.tags);
-                }
-                this.$emit('refresh', this.currentScenario);
-                resolve();
-              });
-            }
-          })
-        });
-      },
-      getEnv(definition) {
-        return new Promise((resolve) => {
-          this.$post("/api/automation/getApiScenarioEnv", {definition: definition}, res => {
-            if (res.data) {
-              this.projectIds = new Set(res.data.projectIds);
-              this.projectIds.add(this.projectId);
-              this.isFullUrl = res.data.fullUrl;
-            }
-            resolve();
-          })
-        });
-      },
-      getApiScenario() {
-        this.loading = true;
-        if (this.currentScenario.tags != undefined && this.currentScenario.tags && !(this.currentScenario.tags instanceof Array)) {
-          this.currentScenario.tags = JSON.parse(this.currentScenario.tags);
-        }
-        if (!this.currentScenario.variables) {
-          this.currentScenario.variables = [];
-        }
-        if (!this.currentScenario.headers) {
-          this.currentScenario.headers = [];
-        }
-        if (this.currentScenario.id) {
-          this.result = this.$get("/api/automation/getApiScenario/" + this.currentScenario.id, response => {
-            if (response.data) {
-              this.path = "/api/automation/update";
-              if (response.data.scenarioDefinition != null) {
-                // this.getEnv(response.data.scenarioDefinition);
-                let obj = JSON.parse(response.data.scenarioDefinition);
-                if (obj) {
-                  this.currentEnvironmentId = obj.environmentId;
-                  if (obj.environmentMap) {
-                    this.projectEnvMap = objToStrMap(obj.environmentMap);
-                  } else {
-                    // 兼容历史数据
-                    this.projectEnvMap.set(this.projectId, obj.environmentId);
-                  }
-                  this.currentScenario.variables = [];
-                  let index = 1;
-                  if (obj.variables) {
-                    obj.variables.forEach(item => {
-                      // 兼容历史数据
-                      if (item.name) {
-                        if (!item.type) {
-                          item.type = "CONSTANT";
-                          item.id = getUUID();
-                        }
-                        item.num = index;
-                        this.currentScenario.variables.push(item);
-                        index++;
-                      }
-                    })
-                  }
-                  if (obj.headers) {
-                    this.currentScenario.headers = obj.headers;
-                  }
-                  this.enableCookieShare = obj.enableCookieShare;
-                  if (obj.hashTree) {
-                    obj.hashTree.forEach(item => {
-                      if (!item.hashTree) {
-                        item.hashTree = [];
-                      }
-                    });
-                  }
-                  this.scenarioDefinition = obj.hashTree;
-                }
-              }
-              if (this.currentScenario.copy) {
-                this.path = "/api/automation/create";
-              }
-            }
-            this.loading = false;
-            this.sort();
-          })
-        }
-      },
-      setParameter() {
-        this.currentScenario.stepTotal = this.scenarioDefinition.length;
-        this.currentScenario.projectId = this.projectId;
-        // 构建一个场景对象 方便引用处理
-        let scenario = {
-          id: this.currentScenario.id,
-          enableCookieShare: this.enableCookieShare,
-          name: this.currentScenario.name,
-          type: "scenario",
-          variables: this.currentScenario.variables,
-          headers: this.currentScenario.headers,
-          referenced: 'Created',
-          environmentMap: strMapToObj(this.projectEnvMap),
-          hashTree: this.scenarioDefinition,
-          projectId: this.projectId,
-        };
-        this.currentScenario.scenarioDefinition = scenario;
-        if (this.currentScenario.tags instanceof Array) {
-          this.currentScenario.tags = JSON.stringify(this.currentScenario.tags);
-        }
-        if (this.currentModule != null) {
-          this.currentScenario.modulePath = this.currentModule.method !== undefined ? this.currentModule.method : null;
-          this.currentScenario.apiScenarioModuleId = this.currentModule.id;
-        }
-        this.currentScenario.projectId = this.projectId;
-      }
-      ,
-      runRefresh() {
-        this.debugVisible = true;
-        this.loading = false;
-      },
-      showScenarioParameters() {
-        this.$refs.scenarioParameters.open(this.currentScenario.variables, this.currentScenario.headers);
-      },
-      apiImport(importData) {
-        if (importData && importData.data) {
-          importData.data.forEach(item => {
-            this.setApiParameter(item, "API", "OT_IMPORT");
-          })
-          this.sort();
-          this.reload();
-        }
-      },
-      getVariableSize() {
-        let size = 0;
-        if (this.currentScenario.variables) {
-          size += this.currentScenario.variables.length;
-        }
-        if (this.currentScenario.headers && this.currentScenario.headers.length > 1) {
-          size += this.currentScenario.headers.length - 1;
-        }
-        return size;
-      },
-      handleEnv() {
-        this.$refs.apiScenarioEnv.open();
-      },
-      setProjectEnvMap(projectEnvMap) {
-        this.projectEnvMap = projectEnvMap;
-      },
-      getWsProjects() {
-        this.$get("/project/listAll", res => {
-          this.projectList = res.data;
-        })
-      },
-      refReload() {
-        this.reload();
-      },
-      detailRefresh(result) {
-        // 把执行结果分发给各个请求
-        this.debugResult = result;
-        this.sort()
-      },
-      fullScreen() {
-        this.drawer = true;
-      },
-      unFullScreen() {
-        this.drawer = false;
-      },
-      close(name) {
-        this.drawer = false;
-        this.$emit('closePage', name);
-      },
-      showPopover() {
-        let definition = JSON.parse(JSON.stringify(this.currentScenario));
-        definition.hashTree = this.scenarioDefinition;
-        this.envResult.loading = true;
-        this.getEnv(JSON.stringify(definition)).then(() => {
-          this.$refs.envPopover.openEnvSelect();
-          this.envResult.loading = false;
-        })
-      },
-      shrinkTreeNode() {
-        //改变每个节点的状态
-        for (let i in this.scenarioDefinition) {
-          if (this.scenarioDefinition[i]) {
-            if (this.expandedStatus && this.expandedNode.indexOf(this.scenarioDefinition[i].resourceId) === -1) {
-              this.expandedNode.push(this.scenarioDefinition[i].resourceId);
-            }
-            this.scenarioDefinition[i].active = this.expandedStatus;
-            if (this.scenarioDefinition[i].hashTree && this.scenarioDefinition[i].hashTree.length > 0) {
-              this.changeNodeStatus(this.scenarioDefinition[i].hashTree);
-            }
-          }
-        }
-      },
-      changeNodeStatus(nodes) {
-        for (let i in nodes) {
-          if (nodes[i]) {
-            if (this.expandedStatus) {
-              this.expandedNode.push(nodes[i].resourceId);
-            }
-            nodes[i].active = this.expandedStatus;
-            if (nodes[i].hashTree != undefined && nodes[i].hashTree.length > 0) {
-              this.changeNodeStatus(nodes[i].hashTree);
-            }
-          }
-        }
-      },
-      openExpansion() {
-        this.expandedNode = [];
-        this.expandedStatus = true;
-        this.shrinkTreeNode();
-      },
-      closeExpansion() {
-        this.expandedStatus = false;
-        this.expandedNode = [];
-        this.shrinkTreeNode();
-        this.reload();
+      response: {},
+      projectIds: new Set,
+      projectEnvMap: new Map,
+      projectList: [],
+      debugResult: new Map,
+      drawer: false,
+      isFullUrl: true,
+      expandedStatus: false,
+      envResult: {
+        loading: false
       }
     }
+  },
+  created() {
+    if (!this.currentScenario.apiScenarioModuleId) {
+      this.currentScenario.apiScenarioModuleId = "";
+    }
+    this.operatingElements = ELEMENTS.get("ALL");
+    this.getWsProjects();
+    this.getMaintainerOptions();
+    this.getApiScenario();
+    this.addListener(); //  添加 ctrl s 监听
+  },
+  directives: {OutsideClick},
+  computed: {
+    buttons() {
+      let buttons = [
+        {
+          title: this.$t('api_test.definition.request.extract_param'),
+          show: this.showButton("Extract"),
+          titleColor: "#015478",
+          titleBgColor: "#E6EEF2",
+          icon: "colorize",
+          click: () => {
+            this.addComponent('Extract')
+          }
+        },
+        {
+          title: this.$t('api_test.definition.request.post_script'),
+          show: this.showButton("JSR223PostProcessor"),
+          titleColor: "#783887",
+          titleBgColor: "#F2ECF3",
+          icon: "skip_next",
+          click: () => {
+            this.addComponent('JSR223PostProcessor')
+          }
+        },
+        {
+          title: this.$t('api_test.definition.request.pre_script'),
+          show: this.showButton("JSR223PreProcessor"),
+          titleColor: "#B8741A",
+          titleBgColor: "#F9F1EA",
+          icon: "skip_previous",
+          click: () => {
+            this.addComponent('JSR223PreProcessor')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.customize_script'),
+          show: this.showButton("JSR223Processor"),
+          titleColor: "#7B4D12",
+          titleBgColor: "#F1EEE9",
+          icon: "code",
+          click: () => {
+            this.addComponent('JSR223Processor')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.if_controller'),
+          show: this.showButton("IfController"),
+          titleColor: "#E6A23C",
+          titleBgColor: "#FCF6EE",
+          icon: "alt_route",
+          click: () => {
+            this.addComponent('IfController')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.loop_controller'),
+          show: this.showButton("LoopController"),
+          titleColor: "#02A7F0",
+          titleBgColor: "#F4F4F5",
+          icon: "next_plan",
+          click: () => {
+            this.addComponent('LoopController')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.transcation_controller'),
+          show: this.showButton("TransactionController"),
+          titleColor: "#6D317C",
+          titleBgColor: "#F4F4F5",
+          icon: "alt_route",
+          click: () => {
+            this.addComponent('TransactionController')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.wait_controller'),
+          show: this.showButton("ConstantTimer"),
+          titleColor: "#67C23A",
+          titleBgColor: "#F2F9EE",
+          icon: "access_time",
+          click: () => {
+            this.addComponent('ConstantTimer')
+          }
+        },
+        {
+          title: this.$t('api_test.definition.request.assertions_rule'),
+          show: this.showButton("Assertions"),
+          titleColor: "#A30014",
+          titleBgColor: "#F7E6E9",
+          icon: "next_plan",
+          click: () => {
+            this.addComponent('Assertions')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.customize_req'),
+          show: this.showButton("CustomizeReq"),
+          titleColor: "#008080",
+          titleBgColor: "#EBF2F2",
+          icon: "tune",
+          click: () => {
+            this.addComponent('CustomizeReq')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.scenario_import'),
+          show: this.showButton("scenario"),
+          titleColor: "#606266",
+          titleBgColor: "#F4F4F5",
+          icon: "movie",
+          click: () => {
+            this.addComponent('scenario')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.api_list_import'),
+          show: this.showButton("HTTPSamplerProxy", "DubboSampler", "JDBCSampler", "TCPSampler"),
+          titleColor: "#F56C6C",
+          titleBgColor: "#FCF1F1",
+          icon: "api",
+          click: this.apiListImport
+        }
+      ];
+      return buttons.filter(btn => btn.show);
+    },
+    projectId() {
+      return getCurrentProjectID();
+    },
+  },
+  methods: {
+    openHis() {
+      this.$refs.changeHistory.open(this.currentScenario.id);
+    },
+    setModule(id, data) {
+      this.currentScenario.apiScenarioModuleId = id;
+      this.currentScenario.modulePath = data.path;
+    },
+    setHideBtn() {
+      this.isBtnHide = false;
+    },
+    // 打开引用的场景
+    openScenario(data) {
+      this.$emit('openScenario', data);
+    },
+    setCookieShare(cookie) {
+      this.enableCookieShare = cookie;
+    },
+    showAllBtn() {
+      this.$refs.maximizeScenario.showAll();
+    },
+    addListener() {
+      document.addEventListener("keydown", this.createCtrlSHandle);
+      // document.addEventListener("keydown", (even => handleCtrlSEvent(even, this.$refs.httpApi.saveApi)));
+    },
+    removeListener() {
+      document.removeEventListener("keydown", this.createCtrlSHandle);
+    },
+    createCtrlSHandle(event) {
+      handleCtrlSEvent(event, this.editScenario);
+    },
+    getIdx(index) {
+      return index - 0.33
+    },
+    setVariables(v, headers) {
+      this.currentScenario.variables = v;
+      this.currentScenario.headers = headers;
+      if (this.path.endsWith("/update")) {
+        // 直接更新场景防止编辑内容丢失
+        this.editScenario();
+      }
+      if (this.$refs.maximizeHeader) {
+        this.$refs.maximizeHeader.getVariableSize();
+      }
+      this.reload();
+    },
+    showButton(...names) {
+      for (const name of names) {
+        if (name && this.operatingElements && this.operatingElements.includes(name)) {
+          return true;
+        }
+      }
+      return false;
+    },
+    outsideClick(e) {
+      e.stopPropagation();
+      this.showAll();
+    },
+    fabClick() {
+      if (this.operatingElements.length < 1) {
+        this.$info("引用的场景或接口无法添加配置");
+      }
+    },
+    addComponent(type) {
+      switch (type) {
+        case ELEMENT_TYPE.IfController:
+          this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new IfController()) :
+            this.scenarioDefinition.push(new IfController());
+          break;
+        case ELEMENT_TYPE.ConstantTimer:
+          this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new ConstantTimer()) :
+            this.scenarioDefinition.push(new ConstantTimer());
+          break;
+        case ELEMENT_TYPE.JSR223Processor:
+          this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new JSR223Processor()) :
+            this.scenarioDefinition.push(new JSR223Processor());
+          break;
+        case ELEMENT_TYPE.JSR223PreProcessor:
+          this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new JSR223Processor({type: "JSR223PreProcessor"})) :
+            this.scenarioDefinition.push(new JSR223Processor({type: "JSR223PreProcessor"}));
+          break;
+        case ELEMENT_TYPE.JSR223PostProcessor:
+          this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new JSR223Processor({type: "JSR223PostProcessor"})) :
+            this.scenarioDefinition.push(new JSR223Processor({type: "JSR223PostProcessor"}));
+          break;
+        case ELEMENT_TYPE.Assertions:
+          this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new Assertions()) :
+            this.scenarioDefinition.push(new Assertions());
+          break;
+        case ELEMENT_TYPE.Extract:
+          this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new Extract()) :
+            this.scenarioDefinition.push(new Extract());
+          break;
+        case ELEMENT_TYPE.CustomizeReq:
+          this.customizeRequest = {protocol: "HTTP", type: "API", hashTree: [], referenced: 'Created', active: false};
+          this.customizeVisible = true;
+          break;
+        case  ELEMENT_TYPE.LoopController:
+          this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new LoopController()) :
+            this.scenarioDefinition.push(new LoopController());
+          break;
+        case ELEMENT_TYPE.TransactionController:
+          this.selectedTreeNode !== undefined ? this.selectedTreeNode.hashTree.push(new TransactionController()) :
+            this.scenarioDefinition.push(new TransactionController());
+          break;
+        case ELEMENT_TYPE.scenario:
+          this.isBtnHide = true;
+          this.$refs.scenarioRelevance.open();
+          break;
+        default:
+          this.$refs.apiImport.open();
+          break;
+      }
+      if (this.selectedNode) {
+        this.selectedNode.expanded = true;
+      }
+      this.sort();
+    },
+    nodeClick(data, node) {
+      if (data.referenced != 'REF' && data.referenced != 'Deleted' && !data.disabled) {
+        this.operatingElements = ELEMENTS.get(data.type);
+      } else {
+        this.operatingElements = [];
+      }
+      this.selectedTreeNode = data;
+      this.selectedNode = node;
+    },
+    suggestClick(node) {
+      this.response = {};
+      if (node.parent && node.parent.data.requestResult) {
+        this.response = node.parent.data.requestResult;
+      }
+    },
+    showAll() {
+      // 控制当有弹出页面操作时禁止刷新按钮列表
+      if (!this.customizeVisible && !this.isBtnHide) {
+        this.operatingElements = ELEMENTS.get("ALL");
+        this.selectedTreeNode = undefined;
+      }
+    },
+    apiListImport() {
+      this.isBtnHide = true;
+      this.$refs.scenarioApiRelevance.open();
+    },
+    recursiveSorting(arr, scenarioProjectId) {
+      for (let i in arr) {
+        arr[i].index = Number(i) + 1;
+        if (!arr[i].resourceId) {
+          arr[i].resourceId = getUUID();
+        }
+        if (arr[i].type === ELEMENT_TYPE.LoopController && arr[i].loopType === "LOOP_COUNT" && arr[i].hashTree && arr[i].hashTree.length > 1) {
+          arr[i].countController.proceed = true;
+        }
+        if (!arr[i].projectId) {
+          // 如果自身没有ID并且场景有ID则赋值场景ID，否则赋值当前项目ID
+          arr[i].projectId = scenarioProjectId ? scenarioProjectId : this.projectId;
+        } else {
+          const project = this.projectList.find(p => p.id === arr[i].projectId);
+          if (!project) {
+            arr[i].projectId = scenarioProjectId ? scenarioProjectId : this.projectId;
+          }
+        }
+
+        if (arr[i].hashTree !== undefined && arr[i].hashTree.length > 0) {
+          this.recursiveSorting(arr[i].hashTree, arr[i].projectId);
+        }
+        // 添加debug结果
+        if (this.debugResult && this.debugResult.get(arr[i].id + arr[i].name)) {
+          arr[i].requestResult = this.debugResult.get(arr[i].id + arr[i].name);
+        }
+      }
+    },
+    sort() {
+      for (let i in this.scenarioDefinition) {
+        // 排序
+        this.scenarioDefinition[i].index = Number(i) + 1;
+        if (!this.scenarioDefinition[i].resourceId) {
+          this.scenarioDefinition[i].resourceId = getUUID();
+        }
+        // 设置循环控制
+        if (this.scenarioDefinition[i].type === ELEMENT_TYPE.LoopController && this.scenarioDefinition[i].hashTree
+          && this.scenarioDefinition[i].hashTree.length > 1) {
+          this.scenarioDefinition[i].countController.proceed = true;
+        }
+        // 设置项目ID
+        if (!this.scenarioDefinition[i].projectId) {
+          this.scenarioDefinition[i].projectId = this.projectId;
+        } else {
+          const project = this.projectList.find(p => p.id === this.scenarioDefinition[i].projectId);
+          if (!project) {
+            this.scenarioDefinition[i].projectId = this.projectId;
+          }
+        }
+
+        if (this.scenarioDefinition[i].hashTree !== undefined && this.scenarioDefinition[i].hashTree.length > 0) {
+          this.recursiveSorting(this.scenarioDefinition[i].hashTree, this.scenarioDefinition[i].projectId);
+        }
+        // 添加debug结果
+        if (this.debugResult && this.debugResult.get(this.scenarioDefinition[i].id + this.scenarioDefinition[i].name)) {
+          this.scenarioDefinition[i].requestResult = this.debugResult.get(this.scenarioDefinition[i].id + this.scenarioDefinition[i].name);
+        }
+      }
+    },
+    addCustomizeApi(request) {
+      this.customizeVisible = false;
+      request.enable === undefined ? request.enable = true : request.enable;
+      if (this.selectedTreeNode !== undefined) {
+        this.selectedTreeNode.hashTree.push(request);
+      } else {
+        this.scenarioDefinition.push(request);
+      }
+      this.customizeRequest = {};
+      this.sort();
+      this.reload();
+    },
+    addScenario(arr) {
+      if (arr && arr.length > 0) {
+        arr.forEach(item => {
+          if (item.id === this.currentScenario.id) {
+            this.$error("不能引用或复制自身！");
+            return;
+          }
+          if (!item.hashTree) {
+            item.hashTree = [];
+          }
+          item.enable === undefined ? item.enable = true : item.enable;
+          if (this.selectedTreeNode !== undefined) {
+            this.selectedTreeNode.hashTree.push(item);
+          } else {
+            this.scenarioDefinition.push(item);
+          }
+        })
+      }
+      this.isBtnHide = false;
+      this.sort();
+      this.reload();
+    },
+    setApiParameter(item, refType, referenced) {
+      let request = {};
+      if (Object.prototype.toString.call(item.request).indexOf("String") > 0) {
+        request = JSON.parse(item.request);
+      } else {
+        request = item.request;
+      }
+      if (item.protocol) {
+        request.protocol = item.protocol;
+      }
+      if (request.protocol === "DUBBO") {
+        request.protocol = "dubbo://";
+      }
+      request.id = item.id;
+      request.name = item.name;
+      request.refType = refType;
+      request.referenced = referenced;
+      request.enable === undefined ? request.enable = true : request.enable;
+      request.active = false;
+      request.resourceId = getUUID();
+      request.projectId = item.projectId;
+      if (!request.url) {
+        request.url = "";
+      }
+      if (referenced === 'REF' || !request.hashTree) {
+        request.hashTree = [];
+      }
+      if (this.selectedTreeNode !== undefined) {
+        this.selectedTreeNode.hashTree.push(request);
+      } else {
+        this.scenarioDefinition.push(request);
+      }
+    },
+    pushApiOrCase(data, refType, referenced) {
+      data.forEach(item => {
+        this.setApiParameter(item, refType, referenced);
+      });
+      this.isBtnHide = false;
+      this.sort();
+      this.reload();
+    },
+    getMaintainerOptions() {
+      this.$post('/user/project/member/tester/list', {projectId: getCurrentProjectID()}, response => {
+        this.maintainerOptions = response.data;
+      });
+    },
+    openTagConfig() {
+      if (!this.projectId) {
+        this.$error(this.$t('api_test.select_project'));
+        return;
+      }
+      this.$refs.tag.open();
+    },
+    remove(row, node) {
+      let name = row === undefined || row.name === undefined ? "" : row.name;
+      this.$alert(this.$t('api_test.definition.request.delete_confirm_step') + ' ' + name + " ？", '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        callback: (action) => {
+          if (action === 'confirm') {
+            const parent = node.parent
+            const hashTree = parent.data.hashTree || parent.data;
+            const index = hashTree.findIndex(d => d.resourceId !== undefined && row.resourceId !== undefined && d.resourceId === row.resourceId)
+            hashTree.splice(index, 1);
+            this.sort();
+            this.reload();
+          }
+        }
+      });
+    },
+    copyRow(row, node) {
+      const parent = node.parent
+      const hashTree = parent.data.hashTree || parent.data;
+      // 深度复制
+      let obj = JSON.parse(JSON.stringify(row));
+      obj.resourceId = getUUID();
+      if (obj.name) {
+        obj.name = obj.name + '_copy';
+      }
+      const index = hashTree.findIndex(d => d.resourceId === row.resourceId);
+      if (index !== -1) {
+        hashTree.splice(index + 1, 0, obj);
+      } else {
+        hashTree.push(obj);
+      }
+      this.sort();
+      this.reload();
+    },
+    reload() {
+      this.loading = true
+      this.$nextTick(() => {
+        this.loading = false
+      });
+    },
+    runDebug() {
+      /*触发执行操作*/
+      this.$refs['currentScenario'].validate((valid) => {
+        if (valid) {
+          let definition = JSON.parse(JSON.stringify(this.currentScenario));
+          definition.hashTree = this.scenarioDefinition;
+          this.getEnv(JSON.stringify(definition)).then(() => {
+            let promise = this.$refs.envPopover.initEnv();
+            promise.then(() => {
+              let sign = this.$refs.envPopover.checkEnv(this.isFullUrl);
+              if (!sign) {
+                return;
+              }
+              //调试时不再保存
+              this.debugData = {
+                id: this.currentScenario.id,
+                name: this.currentScenario.name,
+                type: "scenario",
+                variables: this.currentScenario.variables,
+                referenced: 'Created',
+                enableCookieShare: this.enableCookieShare,
+                headers: this.currentScenario.headers,
+                environmentMap: this.projectEnvMap,
+                hashTree: this.scenarioDefinition
+              };
+              this.reportId = getUUID().substring(0, 8);
+              // this.editScenario().then(() => {
+              //
+              // })
+            })
+
+          })
+        }
+      })
+    },
+    getEnvironments() {
+      if (this.projectId) {
+        this.$get('/api/environment/list/' + this.projectId, response => {
+          this.environments = response.data;
+          this.environments.forEach(environment => {
+            parseEnvironment(environment);
+          });
+          let hasEnvironment = false;
+          for (let i in this.environments) {
+            if (this.environments[i].id === this.currentEnvironmentId) {
+              hasEnvironment = true;
+              break;
+            }
+          }
+          if (!hasEnvironment) {
+            this.currentEnvironmentId = '';
+          }
+          //检查场景是否需要先进行保存
+          this.checkDataIsCopy();
+        });
+      }
+    },
+
+    checkDataIsCopy() {
+      //  如果是复制按钮创建的场景，直接进行保存
+      if (this.currentScenario.copy) {
+        this.editScenario(false);
+      }
+    },
+
+    openEnvironmentConfig() {
+      if (!this.projectId) {
+        this.$error(this.$t('api_test.select_project'));
+        return;
+      }
+      this.$refs.environmentConfig.open(this.projectId);
+    },
+    environmentConfigClose() {
+      this.getEnvironments();
+    },
+    allowDrop(draggingNode, dropNode, dropType) {
+      if (dropType != "inner") {
+        return true;
+      } else if (dropType === "inner" && dropNode.data.referenced !== 'REF' && dropNode.data.referenced !== 'Deleted'
+        && ELEMENTS.get(dropNode.data.type).indexOf(draggingNode.data.type) != -1) {
+        return true;
+      }
+      return false;
+    },
+    allowDrag(draggingNode, dropNode, dropType) {
+      if (dropNode && draggingNode && dropType) {
+        this.sort();
+        this.reload();
+      }
+    },
+    nodeExpand(data, node) {
+      if (data && data.resourceId && this.expandedNode.indexOf(data.resourceId) === -1) {
+        this.expandedNode.push(data.resourceId);
+      }
+    },
+    nodeCollapse(data, node) {
+      if (data && data.resourceId) {
+        this.expandedNode.splice(this.expandedNode.indexOf(data.resourceId), 1);
+      }
+    },
+    editScenario() {
+      if (!document.getElementById("inputDelay")) {
+        return;
+      }
+      return new Promise((resolve) => {
+        document.getElementById("inputDelay").focus();  //  保存前在input框自动失焦，以免保存失败
+        this.$refs['currentScenario'].validate((valid) => {
+          if (valid) {
+            this.setParameter();
+            saveScenario(this.path, this.currentScenario, this.scenarioDefinition, (response) => {
+              this.$success(this.$t('commons.save_success'));
+              this.path = "/api/automation/update";
+              if (response.data) {
+                this.currentScenario.id = response.data.id;
+              }
+              if (this.currentScenario.tags instanceof String) {
+                this.currentScenario.tags = JSON.parse(this.currentScenario.tags);
+              }
+              this.$emit('refresh', this.currentScenario);
+              resolve();
+            });
+          }
+        })
+      });
+    },
+    getEnv(definition) {
+      return new Promise((resolve) => {
+        this.$post("/api/automation/getApiScenarioEnv", {definition: definition}, res => {
+          if (res.data) {
+            this.projectIds = new Set(res.data.projectIds);
+            this.projectIds.add(this.projectId);
+            this.isFullUrl = res.data.fullUrl;
+          }
+          resolve();
+        })
+      });
+    },
+    getApiScenario() {
+      this.loading = true;
+      if (this.currentScenario.tags != undefined && this.currentScenario.tags && !(this.currentScenario.tags instanceof Array)) {
+        this.currentScenario.tags = JSON.parse(this.currentScenario.tags);
+      }
+      if (!this.currentScenario.variables) {
+        this.currentScenario.variables = [];
+      }
+      if (!this.currentScenario.headers) {
+        this.currentScenario.headers = [];
+      }
+      if (this.currentScenario.id) {
+        this.result = this.$get("/api/automation/getApiScenario/" + this.currentScenario.id, response => {
+          if (response.data) {
+            this.path = "/api/automation/update";
+            if (response.data.scenarioDefinition != null) {
+              // this.getEnv(response.data.scenarioDefinition);
+              let obj = JSON.parse(response.data.scenarioDefinition);
+              if (obj) {
+                this.currentEnvironmentId = obj.environmentId;
+                if (obj.environmentMap) {
+                  this.projectEnvMap = objToStrMap(obj.environmentMap);
+                } else {
+                  // 兼容历史数据
+                  this.projectEnvMap.set(this.projectId, obj.environmentId);
+                }
+                this.currentScenario.variables = [];
+                let index = 1;
+                if (obj.variables) {
+                  obj.variables.forEach(item => {
+                    // 兼容历史数据
+                    if (item.name) {
+                      if (!item.type) {
+                        item.type = "CONSTANT";
+                        item.id = getUUID();
+                      }
+                      item.num = index;
+                      this.currentScenario.variables.push(item);
+                      index++;
+                    }
+                  })
+                }
+                if (obj.headers) {
+                  this.currentScenario.headers = obj.headers;
+                }
+                this.enableCookieShare = obj.enableCookieShare;
+                if (obj.hashTree) {
+                  obj.hashTree.forEach(item => {
+                    if (!item.hashTree) {
+                      item.hashTree = [];
+                    }
+                  });
+                }
+                this.scenarioDefinition = obj.hashTree;
+              }
+            }
+            if (this.currentScenario.copy) {
+              this.path = "/api/automation/create";
+            }
+          }
+          this.loading = false;
+          this.sort();
+        })
+      }
+    },
+    setParameter() {
+      this.currentScenario.stepTotal = this.scenarioDefinition.length;
+      this.currentScenario.projectId = this.projectId;
+      // 构建一个场景对象 方便引用处理
+      let scenario = {
+        id: this.currentScenario.id,
+        enableCookieShare: this.enableCookieShare,
+        name: this.currentScenario.name,
+        type: "scenario",
+        variables: this.currentScenario.variables,
+        headers: this.currentScenario.headers,
+        referenced: 'Created',
+        environmentMap: strMapToObj(this.projectEnvMap),
+        hashTree: this.scenarioDefinition,
+        projectId: this.projectId,
+      };
+      this.currentScenario.scenarioDefinition = scenario;
+      if (this.currentScenario.tags instanceof Array) {
+        this.currentScenario.tags = JSON.stringify(this.currentScenario.tags);
+      }
+      if (this.currentModule != null) {
+        this.currentScenario.modulePath = this.currentModule.method !== undefined ? this.currentModule.method : null;
+        this.currentScenario.apiScenarioModuleId = this.currentModule.id;
+      }
+      this.currentScenario.projectId = this.projectId;
+    }
+    ,
+    runRefresh() {
+      this.debugVisible = true;
+      this.loading = false;
+    },
+    showScenarioParameters() {
+      this.$refs.scenarioParameters.open(this.currentScenario.variables, this.currentScenario.headers);
+    },
+    apiImport(importData) {
+      if (importData && importData.data) {
+        importData.data.forEach(item => {
+          this.setApiParameter(item, "API", "OT_IMPORT");
+        })
+        this.sort();
+        this.reload();
+      }
+    },
+    getVariableSize() {
+      let size = 0;
+      if (this.currentScenario.variables) {
+        size += this.currentScenario.variables.length;
+      }
+      if (this.currentScenario.headers && this.currentScenario.headers.length > 1) {
+        size += this.currentScenario.headers.length - 1;
+      }
+      return size;
+    },
+    handleEnv() {
+      this.$refs.apiScenarioEnv.open();
+    },
+    setProjectEnvMap(projectEnvMap) {
+      this.projectEnvMap = projectEnvMap;
+    },
+    getWsProjects() {
+      this.$get("/project/listAll", res => {
+        this.projectList = res.data;
+      })
+    },
+    refReload() {
+      this.reload();
+    },
+    detailRefresh(result) {
+      // 把执行结果分发给各个请求
+      this.debugResult = result;
+      this.sort()
+    },
+    fullScreen() {
+      this.drawer = true;
+    },
+    unFullScreen() {
+      this.drawer = false;
+    },
+    close(name) {
+      this.drawer = false;
+      this.$emit('closePage', name);
+    },
+    showPopover() {
+      let definition = JSON.parse(JSON.stringify(this.currentScenario));
+      definition.hashTree = this.scenarioDefinition;
+      this.envResult.loading = true;
+      this.getEnv(JSON.stringify(definition)).then(() => {
+        this.$refs.envPopover.openEnvSelect();
+        this.envResult.loading = false;
+      })
+    },
+    shrinkTreeNode() {
+      //改变每个节点的状态
+      for (let i in this.scenarioDefinition) {
+        if (this.scenarioDefinition[i]) {
+          if (this.expandedStatus && this.expandedNode.indexOf(this.scenarioDefinition[i].resourceId) === -1) {
+            this.expandedNode.push(this.scenarioDefinition[i].resourceId);
+          }
+          this.scenarioDefinition[i].active = this.expandedStatus;
+          if (this.scenarioDefinition[i].hashTree && this.scenarioDefinition[i].hashTree.length > 0) {
+            this.changeNodeStatus(this.scenarioDefinition[i].hashTree);
+          }
+        }
+      }
+    },
+    changeNodeStatus(nodes) {
+      for (let i in nodes) {
+        if (nodes[i]) {
+          if (this.expandedStatus) {
+            this.expandedNode.push(nodes[i].resourceId);
+          }
+          nodes[i].active = this.expandedStatus;
+          if (nodes[i].hashTree != undefined && nodes[i].hashTree.length > 0) {
+            this.changeNodeStatus(nodes[i].hashTree);
+          }
+        }
+      }
+    },
+    openExpansion() {
+      this.expandedNode = [];
+      this.expandedStatus = true;
+      this.shrinkTreeNode();
+    },
+    closeExpansion() {
+      this.expandedStatus = false;
+      this.expandedNode = [];
+      this.shrinkTreeNode();
+      this.reload();
+    }
   }
+}
 </script>
 
 <style scoped>
-  .card-content {
-    height: calc(100vh - 196px);
-    overflow-y: auto;
-  }
+.card-content {
+  height: calc(100vh - 196px);
+  overflow-y: auto;
+}
 
-  .ms-scenario-input {
-    width: 100%;
-  }
+.ms-scenario-input {
+  width: 100%;
+}
 
-  .ms-main-div {
-    background-color: white;
-  }
+.ms-main-div {
+  background-color: white;
+}
 
-  .ms-debug-div {
-    border: 1px #DCDFE6 solid;
-    border-radius: 4px;
-    margin-right: 20px;
-  }
+.ms-debug-div {
+  border: 1px #DCDFE6 solid;
+  border-radius: 4px;
+  margin-right: 20px;
+}
 
-  .ms-scenario-button {
-    margin-left: 20px;
-    padding: 7px;
-  }
+.ms-scenario-button {
+  margin-left: 20px;
+  padding: 7px;
+}
 
-  .tip {
-    padding: 3px 5px;
-    font-size: 16px;
-    border-radius: 4px;
-    border-left: 4px solid #783887;
-  }
+.tip {
+  padding: 3px 5px;
+  font-size: 16px;
+  border-radius: 4px;
+  border-left: 4px solid #783887;
+}
 
-  .ms-api-col {
-    background-color: #7C3985;
-    border-color: #7C3985;
-    margin-right: 10px;
-    color: white;
-  }
+.ms-api-col {
+  background-color: #7C3985;
+  border-color: #7C3985;
+  margin-right: 10px;
+  color: white;
+}
 
-  .ms-font {
-    color: #303133;
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
-    font-size: 13px;
-  }
+.ms-font {
+  color: #303133;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
+  font-size: 13px;
+}
 
-  .ms-col-one {
-    margin-top: 5px;
-  }
+.ms-col-one {
+  margin-top: 5px;
+}
 
-  #fab {
-    right: 90px;
-    z-index: 5;
-  }
+#fab {
+  right: 90px;
+  z-index: 5;
+}
 
-  /deep/ .el-tree-node__content {
-    height: 100%;
-    margin-top: 3px;
-    vertical-align: center;
-  }
+/deep/ .el-tree-node__content {
+  height: 100%;
+  margin-top: 3px;
+  vertical-align: center;
+}
 
-  /deep/ .el-card__body {
-    padding: 10px;
-  }
+/deep/ .el-card__body {
+  padding: 10px;
+}
 
-  /deep/ .el-drawer__body {
-    overflow: auto;
-  }
+/deep/ .el-drawer__body {
+  overflow: auto;
+}
 
-  /deep/ .el-step__icon.is-text {
-    border: 1px solid;
-  }
+/deep/ .el-step__icon.is-text {
+  border: 1px solid;
+}
 
-  /deep/ .el-drawer__header {
-    margin-bottom: 0px;
-  }
+/deep/ .el-drawer__header {
+  margin-bottom: 0px;
+}
 
-  /deep/ .el-link {
-    font-weight: normal;
-  }
+/deep/ .el-link {
+  font-weight: normal;
+}
 
-  /deep/ .el-checkbox {
-    color: #303133;
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
-    font-size: 13px;
-    font-weight: normal;
-  }
+/deep/ .el-checkbox {
+  color: #303133;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
+  font-size: 13px;
+  font-weight: normal;
+}
 
-  /deep/ .el-checkbox__label {
-    padding-left: 5px;
-  }
+/deep/ .el-checkbox__label {
+  padding-left: 5px;
+}
 
-  .head {
-    border-bottom: 1px solid #303133;
-    color: #303133;
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
-    font-size: 13px;
-  }
+.head {
+  border-bottom: 1px solid #303133;
+  color: #303133;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
+  font-size: 13px;
+}
 
-  .ms-opt-btn {
-    position: fixed;
-    right: 50px;
-    z-index: 1;
-  }
+.ms-opt-btn {
+  position: fixed;
+  right: 50px;
+  z-index: 1;
+}
 
-  .ms-tree >>> .el-tree-node__expand-icon.expanded {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
+.ms-tree >>> .el-tree-node__expand-icon.expanded {
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
 
-  .ms-tree >>> .el-icon-caret-right:before {
-    content: '\e723';
-    font-size: 20px;
-  }
+.ms-tree >>> .el-icon-caret-right:before {
+  content: '\e723';
+  font-size: 20px;
+}
 
-  .ms-tree >>> .el-tree-node__expand-icon.is-leaf {
-    color: transparent;
-  }
+.ms-tree >>> .el-tree-node__expand-icon.is-leaf {
+  color: transparent;
+}
 
-  .ms-tree >>> .el-tree-node__expand-icon {
-    color: #7C3985;
-  }
+.ms-tree >>> .el-tree-node__expand-icon {
+  color: #7C3985;
+}
 
-  .ms-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
-    color: #7C3985;
-    content: "\e722";
-    font-size: 20px;
-  }
+.ms-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+  color: #7C3985;
+  content: "\e722";
+  font-size: 20px;
+}
 
-  .ms-sc-variable-header >>> .el-dialog__body {
-    padding: 0px 20px;
-  }
+.ms-sc-variable-header >>> .el-dialog__body {
+  padding: 0px 20px;
+}
 
-  .alt-ico {
-    font-size: 15px;
-    margin: 5px 10px 0px;
-    float: right;
-    color: #8c939d;
-  }
+.alt-ico {
+  font-size: 15px;
+  margin: 5px 10px 0px;
+  float: right;
+  color: #8c939d;
+}
 
-  .alt-ico:hover {
-    color: black;
-    cursor: pointer;
-    font-size: 18px;
-  }
+.alt-ico:hover {
+  color: black;
+  cursor: pointer;
+  font-size: 18px;
+}
 
-  .scenario-name {
-    display: inline-block;
-    margin: 0 5px;
-    overflow-x: hidden;
-    padding-bottom: 0;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    white-space: nowrap;
-    width: 200px;
-  }
+.scenario-name {
+  display: inline-block;
+  margin: 0 5px;
+  overflow-x: hidden;
+  padding-bottom: 0;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 200px;
+}
 
-  .ms-open-btn {
-    margin: 5px 5px 0px;
-    font-size: 10px;
-    background-color: #F2F9EE;
-    color: #67C23A;
-  }
+.ms-open-btn {
+  margin: 5px 5px 0px;
+  font-size: 10px;
+  background-color: #F2F9EE;
+  color: #67C23A;
+}
 
-  .ms-open-btn-left {
-    margin-left: 30px;
-  }
+.ms-open-btn-left {
+  margin-left: 30px;
+}
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
index ff1272a34b..0f535209c5 100644
--- a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
@@ -336,10 +336,10 @@ export default {
       if (this.node) {
         this.node.expanded = this.request.active;
       }
-      if (this.node.expanded && this.expandedNode.indexOf(this.request.resourceId) === -1) {
+      if (this.node.expanded && this.expandedNode && this.expandedNode.indexOf(this.request.resourceId) === -1) {
         this.expandedNode.push(this.request.resourceId);
       } else {
-        if (this.expandedNode.indexOf(this.request.resourceId) !== -1) {
+        if (this.expandedNode && this.expandedNode.indexOf(this.request.resourceId) !== -1) {
           this.expandedNode.splice(this.expandedNode.indexOf(this.request.resourceId), 1);
         }
       }
diff --git a/frontend/src/business/components/api/automation/scenario/maximize/MaximizeScenario.vue b/frontend/src/business/components/api/automation/scenario/maximize/MaximizeScenario.vue
index 4c6115de74..15eddbb5b3 100644
--- a/frontend/src/business/components/api/automation/scenario/maximize/MaximizeScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/maximize/MaximizeScenario.vue
@@ -6,10 +6,10 @@
         <!-- 场景步骤内容 -->
         <div v-loading="loading">
           <el-button class="el-icon-files ms-open-btn ms-open-btn-left" size="mini" @click="openExpansion">
-            {{$t('api_test.automation.open_expansion')}}
+            {{ $t('api_test.automation.open_expansion') }}
           </el-button>
           <el-button class="el-icon-notebook-1 ms-open-btn" size="mini" @click="closeExpansion">
-            {{$t('api_test.automation.close_expansion')}}
+            {{ $t('api_test.automation.close_expansion') }}
           </el-button>
           <el-tree node-key="resourceId"
                    :props="props"
@@ -130,1014 +130,1013 @@
 </template>
 
 <script>
-  import {API_STATUS, PRIORITY} from "../../../definition/model/JsonData";
-  import {WORKSPACE_ID} from '@/common/js/constants';
-  import {
-    Assertions,
-    ConstantTimer,
-    Extract,
-    IfController,
-    JSR223Processor,
-    LoopController
-  } from "../../../definition/model/ApiTestModel";
-  import {parseEnvironment} from "../../../definition/model/EnvironmentModel";
-  import {ELEMENT_TYPE, ELEMENTS} from "../Setting";
-  import MsApiCustomize from "../ApiCustomize";
-  import {getCurrentProjectID, getUUID, strMapToObj} from "@/common/js/utils";
-  import ApiEnvironmentConfig from "@/business/components/api/test/components/ApiEnvironmentConfig";
-  import MsInputTag from "../MsInputTag";
-  import MsRun from "../DebugRun";
-  import MsApiReportDetail from "../../report/ApiReportDetail";
-  import MsVariableList from "../variable/VariableList";
-  import ApiImport from "../../../definition/components/import/ApiImport";
-  import "@/common/css/material-icons.css"
-  import OutsideClick from "@/common/js/outside-click";
-  import ScenarioApiRelevance from "../api/ApiRelevance";
-  import ScenarioRelevance from "../api/ScenarioRelevance";
-  import MsComponentConfig from "../component/ComponentConfig";
-  import {handleCtrlSEvent} from "../../../../../../common/js/utils";
-  import EnvPopover from "@/business/components/api/automation/scenario/EnvPopover";
-  import MsContainer from "../../../../common/components/MsContainer";
-  import MsMainContainer from "../../../../common/components/MsMainContainer";
-  import MsAsideContainer from "./MsLeftContainer";
-  import {saveScenario} from "@/business/components/api/automation/api-automation";
+import {API_STATUS, PRIORITY} from "../../../definition/model/JsonData";
+import {WORKSPACE_ID} from '@/common/js/constants';
+import {
+  Assertions,
+  ConstantTimer,
+  Extract,
+  IfController,
+  JSR223Processor,
+  LoopController
+} from "../../../definition/model/ApiTestModel";
+import {parseEnvironment} from "../../../definition/model/EnvironmentModel";
+import {ELEMENT_TYPE, ELEMENTS} from "../Setting";
+import MsApiCustomize from "../ApiCustomize";
+import {getCurrentProjectID, getUUID, strMapToObj} from "@/common/js/utils";
+import ApiEnvironmentConfig from "@/business/components/api/test/components/ApiEnvironmentConfig";
+import MsInputTag from "../MsInputTag";
+import MsRun from "../DebugRun";
+import MsApiReportDetail from "../../report/ApiReportDetail";
+import MsVariableList from "../variable/VariableList";
+import ApiImport from "../../../definition/components/import/ApiImport";
+import "@/common/css/material-icons.css"
+import OutsideClick from "@/common/js/outside-click";
+import ScenarioApiRelevance from "../api/ApiRelevance";
+import ScenarioRelevance from "../api/ScenarioRelevance";
+import MsComponentConfig from "../component/ComponentConfig";
+import {handleCtrlSEvent} from "../../../../../../common/js/utils";
+import EnvPopover from "@/business/components/api/automation/scenario/EnvPopover";
+import MsContainer from "../../../../common/components/MsContainer";
+import MsMainContainer from "../../../../common/components/MsMainContainer";
+import MsAsideContainer from "./MsLeftContainer";
+import {saveScenario} from "@/business/components/api/automation/api-automation";
 
-  let jsonPath = require('jsonpath');
-  export default {
-    name: "MaximizeScenario",
-    props: {
-      moduleOptions: Array,
-      currentScenario: {},
-      type: String,
-      scenarioDefinition: Array,
-      envMap: Map,
-    },
-    components: {
-      MsVariableList,
-      ScenarioRelevance,
-      ScenarioApiRelevance,
-      ApiEnvironmentConfig,
-      MsApiReportDetail,
-      MsInputTag, MsRun,
-      MsApiCustomize,
-      ApiImport,
-      MsComponentConfig,
-      EnvPopover,
-      MsContainer,
-      MsMainContainer,
-      MsAsideContainer
-    },
-    data() {
-      return {
-        props: {
-          label: "label",
-          children: "hashTree"
-        },
-        rules: {
-          name: [
-            {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
-            {max: 100, message: this.$t('test_track.length_less_than') + '100', trigger: 'blur'}
-          ],
-          userId: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
-          apiScenarioModuleId: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
-          status: [{required: true, message: this.$t('commons.please_select'), trigger: 'change'}],
-          principal: [{required: true, message: this.$t('api_test.definition.request.responsible'), trigger: 'change'}],
-        },
-        environments: [],
-        currentEnvironmentId: "",
-        maintainerOptions: [],
-        value: API_STATUS[0].id,
-        options: API_STATUS,
-        levels: PRIORITY,
-        scenario: {},
-        loading: false,
-        apiListVisible: false,
-        customizeVisible: false,
-        scenarioVisible: false,
-        debugVisible: false,
-        customizeRequest: {protocol: "HTTP", type: "API", hashTree: [], referenced: 'Created', active: false},
-        operatingElements: [],
-        currentRow: {cases: [], apis: [], referenced: true},
-        selectedTreeNode: undefined,
-        selectedNode: undefined,
-        expandedNode: [],
-        path: "/api/automation/create",
-        debugData: {},
-        reportId: "",
-        enableCookieShare: false,
-        globalOptions: {
-          spacing: 30
-        },
-        response: {},
-        projectIds: new Set,
-        projectEnvMap: new Map,
-        projectList: [],
-        debugResult: new Map,
-        expandedStatus: false,
-      }
-    },
-    created() {
-      if (!this.currentScenario.apiScenarioModuleId) {
-        this.currentScenario.apiScenarioModuleId = "";
-      }
-      this.operatingElements = ELEMENTS.get("ALL");
+let jsonPath = require('jsonpath');
+export default {
+  name: "MaximizeScenario",
+  props: {
+    moduleOptions: Array,
+    currentScenario: {},
+    type: String,
+    scenarioDefinition: Array,
+    envMap: Map,
+  },
+  components: {
+    MsVariableList,
+    ScenarioRelevance,
+    ScenarioApiRelevance,
+    ApiEnvironmentConfig,
+    MsApiReportDetail,
+    MsInputTag, MsRun,
+    MsApiCustomize,
+    ApiImport,
+    MsComponentConfig,
+    EnvPopover,
+    MsContainer,
+    MsMainContainer,
+    MsAsideContainer
+  },
+  data() {
+    return {
+      props: {
+        label: "label",
+        children: "hashTree"
+      },
+      rules: {
+        name: [
+          {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
+          {max: 100, message: this.$t('test_track.length_less_than') + '100', trigger: 'blur'}
+        ],
+        userId: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
+        apiScenarioModuleId: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
+        status: [{required: true, message: this.$t('commons.please_select'), trigger: 'change'}],
+        principal: [{required: true, message: this.$t('api_test.definition.request.responsible'), trigger: 'change'}],
+      },
+      environments: [],
+      currentEnvironmentId: "",
+      maintainerOptions: [],
+      value: API_STATUS[0].id,
+      options: API_STATUS,
+      levels: PRIORITY,
+      scenario: {},
+      loading: false,
+      apiListVisible: false,
+      customizeVisible: false,
+      scenarioVisible: false,
+      debugVisible: false,
+      customizeRequest: {protocol: "HTTP", type: "API", hashTree: [], referenced: 'Created', active: false},
+      operatingElements: [],
+      currentRow: {cases: [], apis: [], referenced: true},
+      selectedTreeNode: undefined,
+      selectedNode: undefined,
+      expandedNode: [],
+      path: "/api/automation/create",
+      debugData: {},
+      reportId: "",
+      enableCookieShare: false,
+      globalOptions: {
+        spacing: 30
+      },
+      response: {},
+      projectIds: new Set,
+      projectEnvMap: new Map,
+      projectList: [],
+      debugResult: new Map,
+      expandedStatus: false,
+    }
+  },
+  created() {
+    if (!this.currentScenario.apiScenarioModuleId) {
+      this.currentScenario.apiScenarioModuleId = "";
+    }
+    this.operatingElements = ELEMENTS.get("ALL");
+    this.projectEnvMap = this.envMap;
+  },
+  watch: {
+    envMap() {
       this.projectEnvMap = this.envMap;
+    }
+  },
+  directives: {OutsideClick},
+  computed: {
+    buttons() {
+      let buttons = [
+        {
+          title: this.$t('api_test.definition.request.extract_param'),
+          show: this.showButton("Extract"),
+          titleColor: "#015478",
+          titleBgColor: "#E6EEF2",
+          icon: "colorize",
+          click: () => {
+            this.addComponent('Extract')
+          }
+        },
+        {
+          title: this.$t('api_test.definition.request.post_script'),
+          show: this.showButton("JSR223PostProcessor"),
+          titleColor: "#783887",
+          titleBgColor: "#F2ECF3",
+          icon: "skip_next",
+          click: () => {
+            this.addComponent('JSR223PostProcessor')
+          }
+        },
+        {
+          title: this.$t('api_test.definition.request.pre_script'),
+          show: this.showButton("JSR223PreProcessor"),
+          titleColor: "#B8741A",
+          titleBgColor: "#F9F1EA",
+          icon: "skip_previous",
+          click: () => {
+            this.addComponent('JSR223PreProcessor')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.customize_script'),
+          show: this.showButton("JSR223Processor"),
+          titleColor: "#7B4D12",
+          titleBgColor: "#F1EEE9",
+          icon: "code",
+          click: () => {
+            this.addComponent('JSR223Processor')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.if_controller'),
+          show: this.showButton("IfController"),
+          titleColor: "#E6A23C",
+          titleBgColor: "#FCF6EE",
+          icon: "alt_route",
+          click: () => {
+            this.addComponent('IfController')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.loop_controller'),
+          show: this.showButton("LoopController"),
+          titleColor: "#02A7F0",
+          titleBgColor: "#F4F4F5",
+          icon: "next_plan",
+          click: () => {
+            this.addComponent('LoopController')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.wait_controller'),
+          show: this.showButton("ConstantTimer"),
+          titleColor: "#67C23A",
+          titleBgColor: "#F2F9EE",
+          icon: "access_time",
+          click: () => {
+            this.addComponent('ConstantTimer')
+          }
+        },
+        {
+          title: this.$t('api_test.definition.request.assertions_rule'),
+          show: this.showButton("Assertions"),
+          titleColor: "#A30014",
+          titleBgColor: "#F7E6E9",
+          icon: "next_plan",
+          click: () => {
+            this.addComponent('Assertions')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.customize_req'),
+          show: this.showButton("CustomizeReq"),
+          titleColor: "#008080",
+          titleBgColor: "#EBF2F2",
+          icon: "tune",
+          click: () => {
+            this.addComponent('CustomizeReq')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.scenario_import'),
+          show: this.showButton("scenario"),
+          titleColor: "#606266",
+          titleBgColor: "#F4F4F5",
+          icon: "movie",
+          click: () => {
+            this.addComponent('scenario')
+          }
+        },
+        {
+          title: this.$t('api_test.automation.api_list_import'),
+          show: this.showButton("HTTPSamplerProxy", "DubboSampler", "JDBCSampler", "TCPSampler"),
+          titleColor: "#F56C6C",
+          titleBgColor: "#FCF1F1",
+          icon: "api",
+          click: this.apiListImport
+        }
+      ];
+      return buttons.filter(btn => btn.show);
     },
-    watch: {
-      envMap() {
-        this.projectEnvMap = this.envMap;
+    projectId() {
+      return getCurrentProjectID();
+    },
+  },
+  methods: {
+    // 打开引用的场景
+    openScenario(data) {
+      this.$emit('openScenario', data);
+    },
+    removeListener() {
+      document.removeEventListener("keydown", this.createCtrlSHandle);
+    },
+    createCtrlSHandle(event) {
+      handleCtrlSEvent(event, this.editScenario);
+    },
+    getIdx(index) {
+      return index - 0.33
+    },
+    setVariables(v, headers) {
+      this.currentScenario.variables = v;
+      this.currentScenario.headers = headers;
+      if (this.path.endsWith("/update")) {
+        // 直接更新场景防止编辑内容丢失
+        this.editScenario();
       }
+      this.reload();
     },
-    directives: {OutsideClick},
-    computed: {
-      buttons() {
-        let buttons = [
-          {
-            title: this.$t('api_test.definition.request.extract_param'),
-            show: this.showButton("Extract"),
-            titleColor: "#015478",
-            titleBgColor: "#E6EEF2",
-            icon: "colorize",
-            click: () => {
-              this.addComponent('Extract')
-            }
-          },
-          {
-            title: this.$t('api_test.definition.request.post_script'),
-            show: this.showButton("JSR223PostProcessor"),
-            titleColor: "#783887",
-            titleBgColor: "#F2ECF3",
-            icon: "skip_next",
-            click: () => {
-              this.addComponent('JSR223PostProcessor')
-            }
-          },
-          {
-            title: this.$t('api_test.definition.request.pre_script'),
-            show: this.showButton("JSR223PreProcessor"),
-            titleColor: "#B8741A",
-            titleBgColor: "#F9F1EA",
-            icon: "skip_previous",
-            click: () => {
-              this.addComponent('JSR223PreProcessor')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.customize_script'),
-            show: this.showButton("JSR223Processor"),
-            titleColor: "#7B4D12",
-            titleBgColor: "#F1EEE9",
-            icon: "code",
-            click: () => {
-              this.addComponent('JSR223Processor')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.if_controller'),
-            show: this.showButton("IfController"),
-            titleColor: "#E6A23C",
-            titleBgColor: "#FCF6EE",
-            icon: "alt_route",
-            click: () => {
-              this.addComponent('IfController')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.loop_controller'),
-            show: this.showButton("LoopController"),
-            titleColor: "#02A7F0",
-            titleBgColor: "#F4F4F5",
-            icon: "next_plan",
-            click: () => {
-              this.addComponent('LoopController')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.wait_controller'),
-            show: this.showButton("ConstantTimer"),
-            titleColor: "#67C23A",
-            titleBgColor: "#F2F9EE",
-            icon: "access_time",
-            click: () => {
-              this.addComponent('ConstantTimer')
-            }
-          },
-          {
-            title: this.$t('api_test.definition.request.assertions_rule'),
-            show: this.showButton("Assertions"),
-            titleColor: "#A30014",
-            titleBgColor: "#F7E6E9",
-            icon: "next_plan",
-            click: () => {
-              this.addComponent('Assertions')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.customize_req'),
-            show: this.showButton("CustomizeReq"),
-            titleColor: "#008080",
-            titleBgColor: "#EBF2F2",
-            icon: "tune",
-            click: () => {
-              this.addComponent('CustomizeReq')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.scenario_import'),
-            show: this.showButton("scenario"),
-            titleColor: "#606266",
-            titleBgColor: "#F4F4F5",
-            icon: "movie",
-            click: () => {
-              this.addComponent('scenario')
-            }
-          },
-          {
-            title: this.$t('api_test.automation.api_list_import'),
-            show: this.showButton("HTTPSamplerProxy", "DubboSampler", "JDBCSampler", "TCPSampler"),
-            titleColor: "#F56C6C",
-            titleBgColor: "#FCF1F1",
-            icon: "api",
-            click: this.apiListImport
-          }
-        ];
-        return buttons.filter(btn => btn.show);
-      },
-      projectId() {
-        return getCurrentProjectID();
-      },
-    },
-    methods: {
-      // 打开引用的场景
-      openScenario(data) {
-        this.$emit('openScenario', data);
-      },
-      removeListener() {
-        document.removeEventListener("keydown", this.createCtrlSHandle);
-      },
-      createCtrlSHandle(event) {
-        handleCtrlSEvent(event, this.editScenario);
-      },
-      getIdx(index) {
-        return index - 0.33
-      },
-      setVariables(v, headers) {
-        this.currentScenario.variables = v;
-        this.currentScenario.headers = headers;
-        if (this.path.endsWith("/update")) {
-          // 直接更新场景防止编辑内容丢失
-          this.editScenario();
-        }
-        this.reload();
-      },
-      showButton(...names) {
-        for (const name of names) {
-          if (name && this.operatingElements && this.operatingElements.includes(name)) {
-            return true;
-          }
-        }
-        return false;
-      },
-      outsideClick(e) {
-        e.stopPropagation();
-        this.showAll();
-      },
-      fabClick() {
-        if (this.operatingElements.length < 1) {
-          this.$info("引用的场景或接口无法添加配置");
-        }
-      },
-      showNode(node) {
-        node.active = true;
-        if (node && ELEMENTS.get("AllSamplerProxy").indexOf(node.type) != -1) {
+    showButton(...names) {
+      for (const name of names) {
+        if (name && this.operatingElements && this.operatingElements.includes(name)) {
           return true;
         }
-        return false;
-      },
-      addComponent(type) {
-        switch (type) {
-          case ELEMENT_TYPE.IfController:
-            this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new IfController()) :
-              this.scenarioDefinition.push(new IfController());
-            break;
-          case ELEMENT_TYPE.ConstantTimer:
-            this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new ConstantTimer()) :
-              this.scenarioDefinition.push(new ConstantTimer());
-            break;
-          case ELEMENT_TYPE.JSR223Processor:
-            this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new JSR223Processor()) :
-              this.scenarioDefinition.push(new JSR223Processor());
-            break;
-          case ELEMENT_TYPE.JSR223PreProcessor:
-            this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new JSR223Processor({type: "JSR223PreProcessor"})) :
-              this.scenarioDefinition.push(new JSR223Processor({type: "JSR223PreProcessor"}));
-            break;
-          case ELEMENT_TYPE.JSR223PostProcessor:
-            this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new JSR223Processor({type: "JSR223PostProcessor"})) :
-              this.scenarioDefinition.push(new JSR223Processor({type: "JSR223PostProcessor"}));
-            break;
-          case ELEMENT_TYPE.Assertions:
-            this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new Assertions()) :
-              this.scenarioDefinition.push(new Assertions());
-            break;
-          case ELEMENT_TYPE.Extract:
-            this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new Extract()) :
-              this.scenarioDefinition.push(new Extract());
-            break;
-          case ELEMENT_TYPE.CustomizeReq:
-            this.customizeRequest = {protocol: "HTTP", type: "API", hashTree: [], referenced: 'Created', active: false};
-            this.customizeVisible = true;
-            break;
-          case  ELEMENT_TYPE.LoopController:
-            this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new LoopController()) :
-              this.scenarioDefinition.push(new LoopController());
-            break;
-          case ELEMENT_TYPE.scenario:
-            this.$refs.scenarioRelevance.open();
-            break;
-          default:
-            this.$refs.apiImport.open();
-            break;
-        }
-        if (this.selectedNode) {
-          this.selectedNode.expanded = true;
-        }
-        this.sort();
-      },
-      nodeClick(data, node) {
-        if (data.referenced != 'REF' && data.referenced != 'Deleted' && !data.disabled) {
-          this.operatingElements = ELEMENTS.get(data.type);
-        } else {
-          this.operatingElements = [];
-        }
-        if (data) {
-          data.active = true;
-          if (data.hashTree) {
-            data.hashTree.forEach(item => {
-              if (item) {
-                item.active = true;
-              }
-            })
-          }
-        } else {
-          data.active = false;
-        }
-        this.selectedTreeNode = data;
-        this.selectedNode = node;
-        this.reload();
-      },
-      suggestClick(node) {
-        this.response = {};
-        if (node && node.parent && node.parent.data.requestResult) {
-          this.response = node.parent.data.requestResult;
-        } else if (this.selectedNode) {
-          this.response = this.selectedNode.data.requestResult;
-        }
-      },
-      showAll() {
-        if (!this.customizeVisible) {
-          this.operatingElements = ELEMENTS.get("ALL");
-          this.selectedTreeNode = undefined;
-        }
-      },
-      apiListImport() {
-        this.$refs.scenarioApiRelevance.open();
-      },
-      recursiveSorting(arr, scenarioProjectId) {
-        for (let i in arr) {
-          arr[i].index = Number(i) + 1;
-          if (arr[i].type === ELEMENT_TYPE.LoopController && arr[i].loopType === "LOOP_COUNT" && arr[i].hashTree && arr[i].hashTree.length > 1) {
-            arr[i].countController.proceed = true;
-          }
-          if (!arr[i].projectId) {
-            arr[i].projectId = scenarioProjectId ? scenarioProjectId : this.projectId;
-          }
-          if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) {
-            this.recursiveSorting(arr[i].hashTree, arr[i].projectId);
-          }
-          // 添加debug结果
-          if (this.debugResult && this.debugResult.get(arr[i].id)) {
-            arr[i].requestResult = this.debugResult.get(arr[i].id);
-          }
-        }
-      },
-      sort() {
-        for (let i in this.scenarioDefinition) {
-          // 排序
-          this.scenarioDefinition[i].index = Number(i) + 1;
-          // 设置循环控制
-          if (this.scenarioDefinition[i].type === ELEMENT_TYPE.LoopController && this.scenarioDefinition[i].hashTree
-            && this.scenarioDefinition[i].hashTree.length > 1) {
-            this.scenarioDefinition[i].countController.proceed = true;
-          }
-          // 设置项目ID
-          if (!this.scenarioDefinition[i].projectId) {
-            this.scenarioDefinition[i].projectId = this.projectId;
-          }
-
-          if (this.scenarioDefinition[i].hashTree != undefined && this.scenarioDefinition[i].hashTree.length > 0) {
-            this.recursiveSorting(this.scenarioDefinition[i].hashTree, this.scenarioDefinition[i].projectId);
-          }
-          // 添加debug结果
-          if (this.debugResult && this.debugResult.get(this.scenarioDefinition[i].id)) {
-            this.scenarioDefinition[i].requestResult = this.debugResult.get(this.scenarioDefinition[i].id);
-          }
-        }
-      },
-      addCustomizeApi(request) {
-        this.customizeVisible = false;
-        request.enable === undefined ? request.enable = true : request.enable;
-        if (this.selectedTreeNode != undefined) {
-          this.selectedTreeNode.hashTree.push(request);
-        } else {
-          this.scenarioDefinition.push(request);
-        }
-        this.customizeRequest = {};
-        this.sort();
-        this.reload();
-        this.initProjectIds();
-      },
-      addScenario(arr) {
-        if (arr && arr.length > 0) {
-          arr.forEach(item => {
-            if (item.id === this.currentScenario.id) {
-              this.$error("不能引用或复制自身！");
-              return;
+      }
+      return false;
+    },
+    outsideClick(e) {
+      e.stopPropagation();
+      this.showAll();
+    },
+    fabClick() {
+      if (this.operatingElements.length < 1) {
+        this.$info("引用的场景或接口无法添加配置");
+      }
+    },
+    showNode(node) {
+      node.active = true;
+      if (node && ELEMENTS.get("AllSamplerProxy").indexOf(node.type) != -1) {
+        return true;
+      }
+      return false;
+    },
+    addComponent(type) {
+      switch (type) {
+        case ELEMENT_TYPE.IfController:
+          this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new IfController()) :
+            this.scenarioDefinition.push(new IfController());
+          break;
+        case ELEMENT_TYPE.ConstantTimer:
+          this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new ConstantTimer()) :
+            this.scenarioDefinition.push(new ConstantTimer());
+          break;
+        case ELEMENT_TYPE.JSR223Processor:
+          this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new JSR223Processor()) :
+            this.scenarioDefinition.push(new JSR223Processor());
+          break;
+        case ELEMENT_TYPE.JSR223PreProcessor:
+          this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new JSR223Processor({type: "JSR223PreProcessor"})) :
+            this.scenarioDefinition.push(new JSR223Processor({type: "JSR223PreProcessor"}));
+          break;
+        case ELEMENT_TYPE.JSR223PostProcessor:
+          this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new JSR223Processor({type: "JSR223PostProcessor"})) :
+            this.scenarioDefinition.push(new JSR223Processor({type: "JSR223PostProcessor"}));
+          break;
+        case ELEMENT_TYPE.Assertions:
+          this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new Assertions()) :
+            this.scenarioDefinition.push(new Assertions());
+          break;
+        case ELEMENT_TYPE.Extract:
+          this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new Extract()) :
+            this.scenarioDefinition.push(new Extract());
+          break;
+        case ELEMENT_TYPE.CustomizeReq:
+          this.customizeRequest = {protocol: "HTTP", type: "API", hashTree: [], referenced: 'Created', active: false};
+          this.customizeVisible = true;
+          break;
+        case  ELEMENT_TYPE.LoopController:
+          this.selectedTreeNode != undefined ? this.selectedTreeNode.hashTree.push(new LoopController()) :
+            this.scenarioDefinition.push(new LoopController());
+          break;
+        case ELEMENT_TYPE.scenario:
+          this.$refs.scenarioRelevance.open();
+          break;
+        default:
+          this.$refs.apiImport.open();
+          break;
+      }
+      if (this.selectedNode) {
+        this.selectedNode.expanded = true;
+      }
+      this.sort();
+    },
+    nodeClick(data, node) {
+      if (data.referenced != 'REF' && data.referenced != 'Deleted' && !data.disabled) {
+        this.operatingElements = ELEMENTS.get(data.type);
+      } else {
+        this.operatingElements = [];
+      }
+      if (data) {
+        data.active = true;
+        if (data.hashTree) {
+          data.hashTree.forEach(item => {
+            if (item) {
+              item.active = true;
             }
-            if (!item.hashTree) {
-              item.hashTree = [];
-            }
-            item.enable === undefined ? item.enable = true : item.enable;
-            this.scenarioDefinition.push(item);
           })
         }
-        this.sort();
-        this.reload();
-        this.initProjectIds();
-        this.scenarioVisible = false;
-      },
-      setApiParameter(item, refType, referenced) {
-        let request = {};
-        if (Object.prototype.toString.call(item.request).indexOf("String") > 0) {
-          request = JSON.parse(item.request);
-        } else {
-          request = item.request;
-        }
-        if (item.protocol) {
-          request.protocol = item.protocol;
-        }
-        if (request.protocol === "DUBBO") {
-          request.protocol = "dubbo://";
-        }
-        request.id = item.id;
-        request.name = item.name;
-        request.refType = refType;
-        request.referenced = referenced;
-        request.enable === undefined ? request.enable = true : request.enable;
-        request.active = false;
-        request.resourceId = getUUID();
-        request.projectId = item.projectId;
-        if (!request.url) {
-          request.url = "";
-        }
-        if (referenced === 'REF' || !request.hashTree) {
-          request.hashTree = [];
-        }
-        if (this.selectedTreeNode != undefined) {
-          this.selectedTreeNode.hashTree.push(request);
-        } else {
-          this.scenarioDefinition.push(request);
-        }
-      },
-      pushApiOrCase(data, refType, referenced) {
-        data.forEach(item => {
-          this.setApiParameter(item, refType, referenced);
-        });
-        this.sort();
-        this.reload();
-        this.initProjectIds();
-      },
-      openTagConfig() {
-        if (!this.projectId) {
-          this.$error(this.$t('api_test.select_project'));
-          return;
-        }
-        this.$refs.tag.open();
-      },
-      remove(row, node) {
-        let name = row === undefined || row.name === undefined ? "" : row.name;
-        this.$alert(this.$t('api_test.definition.request.delete_confirm_step') + ' ' + name + " ？", '', {
-          confirmButtonText: this.$t('commons.confirm'),
-          callback: (action) => {
-            if (action === 'confirm') {
-              const parent = node.parent
-              const hashTree = parent.data.hashTree || parent.data;
-              const index = hashTree.findIndex(d => d.resourceId != undefined && row.resourceId != undefined && d.resourceId === row.resourceId)
-              hashTree.splice(index, 1);
-              this.sort();
-              this.reload();
-              this.initProjectIds();
-            }
-          }
-        });
-      },
-      copyRow(row, node) {
-        if (!row || !node) {
-          return;
-        }
-        const parent = node.parent
-        const hashTree = parent.data.hashTree || parent.data;
-        // 深度复制
-        let obj = JSON.parse(JSON.stringify(row));
-        obj.resourceId = getUUID();
-        if (obj.name) {
-          obj.name = obj.name + '_copy';
-        }
-        const index = hashTree.findIndex(d => d.resourceId === row.resourceId);
-        if (index != -1) {
-          hashTree.splice(index + 1, 0, obj);
-        } else {
-          hashTree.push(obj);
-        }
-        this.sort();
-        this.reload();
+      } else {
+        data.active = false;
       }
-      ,
-      reload() {
-        this.loading = true
-        this.$nextTick(() => {
-          this.loading = false
-        })
-      },
-      runDebug() {
-        /*触发执行操作*/
-        let sign = this.$refs.envPopover.checkEnv();
-        if (!sign) {
-          return;
+      this.selectedTreeNode = data;
+      this.selectedNode = node;
+      this.reload();
+    },
+    suggestClick(node) {
+      this.response = {};
+      if (node && node.parent && node.parent.data.requestResult) {
+        this.response = node.parent.data.requestResult;
+      } else if (this.selectedNode) {
+        this.response = this.selectedNode.data.requestResult;
+      }
+    },
+    showAll() {
+      if (!this.customizeVisible) {
+        this.operatingElements = ELEMENTS.get("ALL");
+        this.selectedTreeNode = undefined;
+      }
+    },
+    apiListImport() {
+      this.$refs.scenarioApiRelevance.open();
+    },
+    recursiveSorting(arr, scenarioProjectId) {
+      for (let i in arr) {
+        arr[i].index = Number(i) + 1;
+        if (arr[i].type === ELEMENT_TYPE.LoopController && arr[i].loopType === "LOOP_COUNT" && arr[i].hashTree && arr[i].hashTree.length > 1) {
+          arr[i].countController.proceed = true;
         }
-        this.$refs['currentScenario'].validate((valid) => {
-          if (valid) {
-            Promise.all([
-              this.editScenario()]).then(val => {
-              if (val) {
-                this.debugData = {
-                  id: this.currentScenario.id,
-                  name: this.currentScenario.name,
-                  type: "scenario",
-                  variables: this.currentScenario.variables,
-                  referenced: 'Created',
-                  enableCookieShare: this.enableCookieShare,
-                  headers: this.currentScenario.headers,
-                  environmentMap: this.projectEnvMap,
-                  hashTree: this.scenarioDefinition
-                };
-                this.reportId = getUUID().substring(0, 8);
-              }
-            });
+        if (!arr[i].projectId) {
+          arr[i].projectId = scenarioProjectId ? scenarioProjectId : this.projectId;
+        }
+        if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) {
+          this.recursiveSorting(arr[i].hashTree, arr[i].projectId);
+        }
+        // 添加debug结果
+        if (this.debugResult && this.debugResult.get(arr[i].id + arr[i].name)) {
+          arr[i].requestResult = this.debugResult.get(arr[i].id + arr[i].name);
+        }
+      }
+    },
+    sort() {
+      for (let i in this.scenarioDefinition) {
+        // 排序
+        this.scenarioDefinition[i].index = Number(i) + 1;
+        // 设置循环控制
+        if (this.scenarioDefinition[i].type === ELEMENT_TYPE.LoopController && this.scenarioDefinition[i].hashTree
+          && this.scenarioDefinition[i].hashTree.length > 1) {
+          this.scenarioDefinition[i].countController.proceed = true;
+        }
+        // 设置项目ID
+        if (!this.scenarioDefinition[i].projectId) {
+          this.scenarioDefinition[i].projectId = this.projectId;
+        }
+
+        if (this.scenarioDefinition[i].hashTree != undefined && this.scenarioDefinition[i].hashTree.length > 0) {
+          this.recursiveSorting(this.scenarioDefinition[i].hashTree, this.scenarioDefinition[i].projectId);
+        }
+        // 添加debug结果
+        if (this.debugResult && this.debugResult.get(this.scenarioDefinition[i].id + this.scenarioDefinition[i].name)) {
+          this.scenarioDefinition[i].requestResult = this.debugResult.get(this.scenarioDefinition[i].id + this.scenarioDefinition[i].name);
+        }
+      }
+    },
+    addCustomizeApi(request) {
+      this.customizeVisible = false;
+      request.enable === undefined ? request.enable = true : request.enable;
+      if (this.selectedTreeNode != undefined) {
+        this.selectedTreeNode.hashTree.push(request);
+      } else {
+        this.scenarioDefinition.push(request);
+      }
+      this.customizeRequest = {};
+      this.sort();
+      this.reload();
+      this.initProjectIds();
+    },
+    addScenario(arr) {
+      if (arr && arr.length > 0) {
+        arr.forEach(item => {
+          if (item.id === this.currentScenario.id) {
+            this.$error("不能引用或复制自身！");
+            return;
           }
+          if (!item.hashTree) {
+            item.hashTree = [];
+          }
+          item.enable === undefined ? item.enable = true : item.enable;
+          this.scenarioDefinition.push(item);
         })
-      },
-      getEnvironments() {
-        if (this.projectId) {
-          this.$get('/api/environment/list/' + this.projectId, response => {
-            this.environments = response.data;
-            this.environments.forEach(environment => {
-              parseEnvironment(environment);
-            });
-            let hasEnvironment = false;
-            for (let i in this.environments) {
-              if (this.environments[i].id === this.currentEnvironmentId) {
-                hasEnvironment = true;
-                break;
-              }
+      }
+      this.sort();
+      this.reload();
+      this.initProjectIds();
+      this.scenarioVisible = false;
+    },
+    setApiParameter(item, refType, referenced) {
+      let request = {};
+      if (Object.prototype.toString.call(item.request).indexOf("String") > 0) {
+        request = JSON.parse(item.request);
+      } else {
+        request = item.request;
+      }
+      if (item.protocol) {
+        request.protocol = item.protocol;
+      }
+      if (request.protocol === "DUBBO") {
+        request.protocol = "dubbo://";
+      }
+      request.id = item.id;
+      request.name = item.name;
+      request.refType = refType;
+      request.referenced = referenced;
+      request.enable === undefined ? request.enable = true : request.enable;
+      request.active = false;
+      request.resourceId = getUUID();
+      request.projectId = item.projectId;
+      if (!request.url) {
+        request.url = "";
+      }
+      if (referenced === 'REF' || !request.hashTree) {
+        request.hashTree = [];
+      }
+      if (this.selectedTreeNode != undefined) {
+        this.selectedTreeNode.hashTree.push(request);
+      } else {
+        this.scenarioDefinition.push(request);
+      }
+    },
+    pushApiOrCase(data, refType, referenced) {
+      data.forEach(item => {
+        this.setApiParameter(item, refType, referenced);
+      });
+      this.sort();
+      this.reload();
+      this.initProjectIds();
+    },
+    openTagConfig() {
+      if (!this.projectId) {
+        this.$error(this.$t('api_test.select_project'));
+        return;
+      }
+      this.$refs.tag.open();
+    },
+    remove(row, node) {
+      let name = row === undefined || row.name === undefined ? "" : row.name;
+      this.$alert(this.$t('api_test.definition.request.delete_confirm_step') + ' ' + name + " ？", '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        callback: (action) => {
+          if (action === 'confirm') {
+            const parent = node.parent
+            const hashTree = parent.data.hashTree || parent.data;
+            const index = hashTree.findIndex(d => d.resourceId != undefined && row.resourceId != undefined && d.resourceId === row.resourceId)
+            hashTree.splice(index, 1);
+            this.sort();
+            this.reload();
+            this.initProjectIds();
+          }
+        }
+      });
+    },
+    copyRow(row, node) {
+      if (!row || !node) {
+        return;
+      }
+      const parent = node.parent
+      const hashTree = parent.data.hashTree || parent.data;
+      // 深度复制
+      let obj = JSON.parse(JSON.stringify(row));
+      obj.resourceId = getUUID();
+      if (obj.name) {
+        obj.name = obj.name + '_copy';
+      }
+      const index = hashTree.findIndex(d => d.resourceId === row.resourceId);
+      if (index != -1) {
+        hashTree.splice(index + 1, 0, obj);
+      } else {
+        hashTree.push(obj);
+      }
+      this.sort();
+      this.reload();
+    }
+    ,
+    reload() {
+      this.loading = true
+      this.$nextTick(() => {
+        this.loading = false
+      })
+    },
+    runDebug() {
+      /*触发执行操作*/
+      let sign = this.$refs.envPopover.checkEnv();
+      if (!sign) {
+        return;
+      }
+      this.$refs['currentScenario'].validate((valid) => {
+        if (valid) {
+          Promise.all([
+            this.editScenario()]).then(val => {
+            if (val) {
+              this.debugData = {
+                id: this.currentScenario.id,
+                name: this.currentScenario.name,
+                type: "scenario",
+                variables: this.currentScenario.variables,
+                referenced: 'Created',
+                enableCookieShare: this.enableCookieShare,
+                headers: this.currentScenario.headers,
+                environmentMap: this.projectEnvMap,
+                hashTree: this.scenarioDefinition
+              };
+              this.reportId = getUUID().substring(0, 8);
             }
-            if (!hasEnvironment) {
-              this.currentEnvironmentId = '';
-            }
-            //检查场景是否需要先进行保存
-            this.checkDataIsCopy();
           });
         }
-      },
-
-      checkDataIsCopy() {
-        //  如果是复制按钮创建的场景，直接进行保存
-        if (this.currentScenario.copy) {
-          this.editScenario(false);
-        }
-      },
-
-      openEnvironmentConfig() {
-        if (!this.projectId) {
-          this.$error(this.$t('api_test.select_project'));
-          return;
-        }
-        this.$refs.environmentConfig.open(this.projectId);
-      },
-      environmentConfigClose() {
-        this.getEnvironments();
-      },
-      allowDrop(draggingNode, dropNode, dropType) {
-        if (dropType != "inner") {
-          return true;
-        }
-        else if (dropType === "inner" && dropNode.data.referenced != 'REF' && dropNode.data.referenced != 'Deleted'
-          && ELEMENTS.get(dropNode.data.type).indexOf(draggingNode.data.type) != -1) {
-          return true;
-        }
-        return false;
-      },
-      allowDrag(draggingNode, dropNode, dropType) {
-        if (dropNode && draggingNode && dropType) {
-          this.sort();
-          this.reload();
-        }
-      },
-      nodeExpand(data) {
-        if (data.resourceId) {
-          this.expandedNode.push(data.resourceId);
-        }
-      },
-      nodeCollapse(data) {
-        if (data.resourceId) {
-          this.expandedNode.splice(this.expandedNode.indexOf(data.resourceId), 1);
-        }
-      },
-      getPath(id) {
-        if (id === null) {
-          return null;
-        }
-        let path = this.moduleOptions.filter(function (item) {
-          return item.id === id ? item.path : "";
+      })
+    },
+    getEnvironments() {
+      if (this.projectId) {
+        this.$get('/api/environment/list/' + this.projectId, response => {
+          this.environments = response.data;
+          this.environments.forEach(environment => {
+            parseEnvironment(environment);
+          });
+          let hasEnvironment = false;
+          for (let i in this.environments) {
+            if (this.environments[i].id === this.currentEnvironmentId) {
+              hasEnvironment = true;
+              break;
+            }
+          }
+          if (!hasEnvironment) {
+            this.currentEnvironmentId = '';
+          }
+          //检查场景是否需要先进行保存
+          this.checkDataIsCopy();
         });
-        return path[0].path;
-      },
-      setFiles(item, bodyUploadFiles, obj) {
-        if (item.body) {
-          if (item.body.kvs) {
-            item.body.kvs.forEach(param => {
-              if (param.files) {
-                param.files.forEach(item => {
-                  if (item.file) {
-                    if (!item.id) {
-                      let fileId = getUUID().substring(0, 12);
-                      item.name = item.file.name;
-                      item.id = fileId;
-                    }
-                    obj.bodyUploadIds.push(item.id);
-                    bodyUploadFiles.push(item.file);
-                  }
-                });
-              }
-            });
-          }
-          if (item.body.binary) {
-            item.body.binary.forEach(param => {
-              if (param.files) {
-                param.files.forEach(item => {
-                  if (item.file) {
-                    if (!item.id) {
-                      let fileId = getUUID().substring(0, 12);
-                      item.name = item.file.name;
-                      item.id = fileId;
-                    }
-                    obj.bodyUploadIds.push(item.id);
-                    bodyUploadFiles.push(item.file);
-                  }
-                });
-              }
-            });
-          }
-        }
-      },
-      recursiveFile(arr, bodyUploadFiles, obj) {
-        arr.forEach(item => {
-          this.setFiles(item, bodyUploadFiles, obj);
-          if (item.hashTree != undefined && item.hashTree.length > 0) {
-            this.recursiveFile(item.hashTree, bodyUploadFiles, obj);
-          }
-        });
-      },
-      editScenario() {
-        return new Promise((resolve, reject) => {
-          document.getElementById("inputDelay").focus();  //  保存前在input框自动失焦，以免保存失败
-          this.$refs['currentScenario'].validate((valid) => {
-            if (valid) {
-              this.setParameter();
-              saveScenario(this.path, this.currentScenario, this.scenarioDefinition, (response) => {
-                this.$success(this.$t('commons.save_success'));
-                this.path = "/api/automation/update";
-                if (response.data) {
-                  this.currentScenario.id = response.data.id;
-                }
-                if (this.currentScenario.tags instanceof String) {
-                  this.currentScenario.tags = JSON.parse(this.currentScenario.tags);
-                }
-                this.$emit('refresh', this.currentScenario);
-                resolve();
-              });
-            }
-          })
-        });
-      },
+      }
+    },
 
-      setParameter() {
-        this.currentScenario.stepTotal = this.scenarioDefinition.length;
-        this.currentScenario.projectId = this.projectId;
-        this.currentScenario.modulePath = this.getPath(this.currentScenario.apiScenarioModuleId);
-        // 构建一个场景对象 方便引用处理
-        let scenario = {
-          id: this.currentScenario.id,
-          enableCookieShare: this.enableCookieShare,
-          name: this.currentScenario.name,
-          type: "scenario",
-          variables: this.currentScenario.variables,
-          headers: this.currentScenario.headers,
-          referenced: 'Created',
-          environmentMap: strMapToObj(this.projectEnvMap),
-          hashTree: this.scenarioDefinition,
-          projectId: this.projectId,
-        };
-        this.currentScenario.scenarioDefinition = scenario;
-        if (this.currentScenario.tags instanceof Array) {
-          this.currentScenario.tags = JSON.stringify(this.currentScenario.tags);
-        }
-        if (this.currentModule != null) {
-          this.currentScenario.modulePath = this.currentModule.method !== undefined ? this.currentModule.method : null;
-          this.currentScenario.apiScenarioModuleId = this.currentModule.id;
-        }
-        this.currentScenario.projectId = this.projectId;
-      },
-      runRefresh() {
-        this.debugVisible = true;
-        this.loading = false;
-      },
-      showScenarioParameters() {
-        this.$refs.scenarioParameters.open(this.currentScenario.variables, this.currentScenario.headers);
-      },
-      apiImport(importData) {
-        if (importData && importData.data) {
-          importData.data.forEach(item => {
-            this.setApiParameter(item, "API", "OT_IMPORT");
-          })
-          this.sort();
-          this.reload();
-        }
-      },
-      getVariableSize() {
-        let size = 0;
-        if (this.currentScenario.variables) {
-          size += this.currentScenario.variables.length;
-        }
-        if (this.currentScenario.headers && this.currentScenario.headers.length > 1) {
-          size += this.currentScenario.headers.length - 1;
-        }
-        return size;
-      },
-      handleEnv() {
-        this.$refs.apiScenarioEnv.open();
-      },
-      setProjectEnvMap(projectEnvMap) {
-        this.projectEnvMap = projectEnvMap;
-      },
-      refReload(data, node) {
-        this.selectedTreeNode = data;
-        this.selectedNode = node;
-        this.initProjectIds();
-        this.reload();
-      },
-      initProjectIds() {
-        // 加载环境配置
-        this.$nextTick(() => {
-          this.projectIds.clear();
-          this.scenarioDefinition.forEach(data => {
-            let arr = jsonPath.query(data, "$..projectId");
-            arr.forEach(a => this.projectIds.add(a));
-          })
-        })
-      },
-      detailRefresh(result) {
-        // 把执行结果分发给各个请求
-        this.debugResult = result;
-        this.sort()
-      },
-      shrinkTreeNode() {
-        //改变每个节点的状态
-        for (let i in this.scenarioDefinition) {
-          if (this.scenarioDefinition[i]) {
-            if (this.expandedStatus) {
-              this.expandedNode.push(this.scenarioDefinition[i].resourceId);
-            }
-            this.scenarioDefinition[i].active = this.expandedStatus;
-            if (this.scenarioDefinition[i].hashTree && this.scenarioDefinition[i].hashTree.length > 0) {
-              this.changeNodeStatus(this.scenarioDefinition[i].hashTree);
-            }
-          }
-        }
-      },
-      changeNodeStatus(nodes) {
-        for (let i in nodes) {
-          if (nodes[i]) {
-            if (this.expandedStatus) {
-              this.expandedNode.push(nodes[i].resourceId);
-            }
-            nodes[i].active = this.expandedStatus;
-            if (nodes[i].hashTree != undefined && nodes[i].hashTree.length > 0) {
-              this.changeNodeStatus(nodes[i].hashTree);
-            }
-          }
-        }
-      },
-      openExpansion() {
-        this.expandedNode = [];
-        this.expandedStatus = true;
-        this.shrinkTreeNode();
-      },
-      closeExpansion() {
-        this.expandedStatus = false;
-        this.expandedNode = [];
-        this.shrinkTreeNode();
+    checkDataIsCopy() {
+      //  如果是复制按钮创建的场景，直接进行保存
+      if (this.currentScenario.copy) {
+        this.editScenario(false);
+      }
+    },
+
+    openEnvironmentConfig() {
+      if (!this.projectId) {
+        this.$error(this.$t('api_test.select_project'));
+        return;
+      }
+      this.$refs.environmentConfig.open(this.projectId);
+    },
+    environmentConfigClose() {
+      this.getEnvironments();
+    },
+    allowDrop(draggingNode, dropNode, dropType) {
+      if (dropType != "inner") {
+        return true;
+      } else if (dropType === "inner" && dropNode.data.referenced !== 'REF' && dropNode.data.referenced !== 'Deleted'
+        && ELEMENTS.get(dropNode.data.type).indexOf(draggingNode.data.type) != -1) {
+        return true;
+      }
+      return false;
+    },
+    allowDrag(draggingNode, dropNode, dropType) {
+      if (dropNode && draggingNode && dropType) {
+        this.sort();
         this.reload();
       }
+    },
+    nodeExpand(data) {
+      if (data.resourceId) {
+        this.expandedNode.push(data.resourceId);
+      }
+    },
+    nodeCollapse(data) {
+      if (data.resourceId) {
+        this.expandedNode.splice(this.expandedNode.indexOf(data.resourceId), 1);
+      }
+    },
+    getPath(id) {
+      if (id === null) {
+        return null;
+      }
+      let path = this.moduleOptions.filter(function (item) {
+        return item.id === id ? item.path : "";
+      });
+      return path[0].path;
+    },
+    setFiles(item, bodyUploadFiles, obj) {
+      if (item.body) {
+        if (item.body.kvs) {
+          item.body.kvs.forEach(param => {
+            if (param.files) {
+              param.files.forEach(item => {
+                if (item.file) {
+                  if (!item.id) {
+                    let fileId = getUUID().substring(0, 12);
+                    item.name = item.file.name;
+                    item.id = fileId;
+                  }
+                  obj.bodyUploadIds.push(item.id);
+                  bodyUploadFiles.push(item.file);
+                }
+              });
+            }
+          });
+        }
+        if (item.body.binary) {
+          item.body.binary.forEach(param => {
+            if (param.files) {
+              param.files.forEach(item => {
+                if (item.file) {
+                  if (!item.id) {
+                    let fileId = getUUID().substring(0, 12);
+                    item.name = item.file.name;
+                    item.id = fileId;
+                  }
+                  obj.bodyUploadIds.push(item.id);
+                  bodyUploadFiles.push(item.file);
+                }
+              });
+            }
+          });
+        }
+      }
+    },
+    recursiveFile(arr, bodyUploadFiles, obj) {
+      arr.forEach(item => {
+        this.setFiles(item, bodyUploadFiles, obj);
+        if (item.hashTree != undefined && item.hashTree.length > 0) {
+          this.recursiveFile(item.hashTree, bodyUploadFiles, obj);
+        }
+      });
+    },
+    editScenario() {
+      return new Promise((resolve, reject) => {
+        document.getElementById("inputDelay").focus();  //  保存前在input框自动失焦，以免保存失败
+        this.$refs['currentScenario'].validate((valid) => {
+          if (valid) {
+            this.setParameter();
+            saveScenario(this.path, this.currentScenario, this.scenarioDefinition, (response) => {
+              this.$success(this.$t('commons.save_success'));
+              this.path = "/api/automation/update";
+              if (response.data) {
+                this.currentScenario.id = response.data.id;
+              }
+              if (this.currentScenario.tags instanceof String) {
+                this.currentScenario.tags = JSON.parse(this.currentScenario.tags);
+              }
+              this.$emit('refresh', this.currentScenario);
+              resolve();
+            });
+          }
+        })
+      });
+    },
+
+    setParameter() {
+      this.currentScenario.stepTotal = this.scenarioDefinition.length;
+      this.currentScenario.projectId = this.projectId;
+      this.currentScenario.modulePath = this.getPath(this.currentScenario.apiScenarioModuleId);
+      // 构建一个场景对象 方便引用处理
+      let scenario = {
+        id: this.currentScenario.id,
+        enableCookieShare: this.enableCookieShare,
+        name: this.currentScenario.name,
+        type: "scenario",
+        variables: this.currentScenario.variables,
+        headers: this.currentScenario.headers,
+        referenced: 'Created',
+        environmentMap: strMapToObj(this.projectEnvMap),
+        hashTree: this.scenarioDefinition,
+        projectId: this.projectId,
+      };
+      this.currentScenario.scenarioDefinition = scenario;
+      if (this.currentScenario.tags instanceof Array) {
+        this.currentScenario.tags = JSON.stringify(this.currentScenario.tags);
+      }
+      if (this.currentModule != null) {
+        this.currentScenario.modulePath = this.currentModule.method !== undefined ? this.currentModule.method : null;
+        this.currentScenario.apiScenarioModuleId = this.currentModule.id;
+      }
+      this.currentScenario.projectId = this.projectId;
+    },
+    runRefresh() {
+      this.debugVisible = true;
+      this.loading = false;
+    },
+    showScenarioParameters() {
+      this.$refs.scenarioParameters.open(this.currentScenario.variables, this.currentScenario.headers);
+    },
+    apiImport(importData) {
+      if (importData && importData.data) {
+        importData.data.forEach(item => {
+          this.setApiParameter(item, "API", "OT_IMPORT");
+        })
+        this.sort();
+        this.reload();
+      }
+    },
+    getVariableSize() {
+      let size = 0;
+      if (this.currentScenario.variables) {
+        size += this.currentScenario.variables.length;
+      }
+      if (this.currentScenario.headers && this.currentScenario.headers.length > 1) {
+        size += this.currentScenario.headers.length - 1;
+      }
+      return size;
+    },
+    handleEnv() {
+      this.$refs.apiScenarioEnv.open();
+    },
+    setProjectEnvMap(projectEnvMap) {
+      this.projectEnvMap = projectEnvMap;
+    },
+    refReload(data, node) {
+      this.selectedTreeNode = data;
+      this.selectedNode = node;
+      this.initProjectIds();
+      this.reload();
+    },
+    initProjectIds() {
+      // 加载环境配置
+      this.$nextTick(() => {
+        this.projectIds.clear();
+        this.scenarioDefinition.forEach(data => {
+          let arr = jsonPath.query(data, "$..projectId");
+          arr.forEach(a => this.projectIds.add(a));
+        })
+      })
+    },
+    detailRefresh(result) {
+      // 把执行结果分发给各个请求
+      this.debugResult = result;
+      this.sort()
+    },
+    shrinkTreeNode() {
+      //改变每个节点的状态
+      for (let i in this.scenarioDefinition) {
+        if (this.scenarioDefinition[i]) {
+          if (this.expandedStatus) {
+            this.expandedNode.push(this.scenarioDefinition[i].resourceId);
+          }
+          this.scenarioDefinition[i].active = this.expandedStatus;
+          if (this.scenarioDefinition[i].hashTree && this.scenarioDefinition[i].hashTree.length > 0) {
+            this.changeNodeStatus(this.scenarioDefinition[i].hashTree);
+          }
+        }
+      }
+    },
+    changeNodeStatus(nodes) {
+      for (let i in nodes) {
+        if (nodes[i]) {
+          if (this.expandedStatus) {
+            this.expandedNode.push(nodes[i].resourceId);
+          }
+          nodes[i].active = this.expandedStatus;
+          if (nodes[i].hashTree != undefined && nodes[i].hashTree.length > 0) {
+            this.changeNodeStatus(nodes[i].hashTree);
+          }
+        }
+      }
+    },
+    openExpansion() {
+      this.expandedNode = [];
+      this.expandedStatus = true;
+      this.shrinkTreeNode();
+    },
+    closeExpansion() {
+      this.expandedStatus = false;
+      this.expandedNode = [];
+      this.shrinkTreeNode();
+      this.reload();
     }
   }
+}
 </script>
 
 <style scoped>
-  .card-content {
-    height: calc(100vh - 196px);
-    overflow-y: auto;
-  }
+.card-content {
+  height: calc(100vh - 196px);
+  overflow-y: auto;
+}
 
-  .ms-scenario-input {
-    width: 100%;
-  }
+.ms-scenario-input {
+  width: 100%;
+}
 
-  .ms-main-div {
-    background-color: white;
-  }
+.ms-main-div {
+  background-color: white;
+}
 
-  .ms-debug-div {
-    border: 1px #DCDFE6 solid;
-    border-radius: 4px;
-    margin-right: 20px;
-  }
+.ms-debug-div {
+  border: 1px #DCDFE6 solid;
+  border-radius: 4px;
+  margin-right: 20px;
+}
 
-  .ms-scenario-button {
-    margin-left: 20px;
-    padding: 7px;
-  }
+.ms-scenario-button {
+  margin-left: 20px;
+  padding: 7px;
+}
 
-  .tip {
-    padding: 3px 5px;
-    font-size: 16px;
-    border-radius: 4px;
-    border-left: 4px solid #783887;
-  }
+.tip {
+  padding: 3px 5px;
+  font-size: 16px;
+  border-radius: 4px;
+  border-left: 4px solid #783887;
+}
 
-  .ms-api-col {
-    background-color: #7C3985;
-    border-color: #7C3985;
-    margin-right: 10px;
-    color: white;
-  }
+.ms-api-col {
+  background-color: #7C3985;
+  border-color: #7C3985;
+  margin-right: 10px;
+  color: white;
+}
 
-  .ms-font {
-    color: #303133;
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
-    font-size: 13px;
-  }
+.ms-font {
+  color: #303133;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
+  font-size: 13px;
+}
 
-  .ms-col-one {
-    margin-top: 10px;
-  }
+.ms-col-one {
+  margin-top: 10px;
+}
 
-  #fab {
-    left: 100px;
-    z-index: 5;
-  }
+#fab {
+  left: 100px;
+  z-index: 5;
+}
 
-  /deep/ .el-tree-node__content {
-    height: 100%;
-    margin-top: 8px;
-    vertical-align: center;
-  }
+/deep/ .el-tree-node__content {
+  height: 100%;
+  margin-top: 8px;
+  vertical-align: center;
+}
 
-  /deep/ .el-card__body {
-    padding: 5px;
-  }
+/deep/ .el-card__body {
+  padding: 5px;
+}
 
-  /deep/ .el-drawer__body {
-    overflow: auto;
-  }
+/deep/ .el-drawer__body {
+  overflow: auto;
+}
 
-  /deep/ .el-step__icon.is-text {
-    border: 1px solid;
-  }
+/deep/ .el-step__icon.is-text {
+  border: 1px solid;
+}
 
-  /deep/ .el-drawer__header {
-    margin-bottom: 0px;
-  }
+/deep/ .el-drawer__header {
+  margin-bottom: 0px;
+}
 
-  /deep/ .el-link {
-    font-weight: normal;
-  }
+/deep/ .el-link {
+  font-weight: normal;
+}
 
-  /deep/ .el-checkbox {
-    color: #303133;
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
-    font-size: 13px;
-    font-weight: normal;
-  }
+/deep/ .el-checkbox {
+  color: #303133;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
+  font-size: 13px;
+  font-weight: normal;
+}
 
-  /deep/ .el-checkbox__label {
-    padding-left: 5px;
-  }
+/deep/ .el-checkbox__label {
+  padding-left: 5px;
+}
 
-  .head {
-    border-bottom: 1px solid #303133;
-    color: #303133;
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
-    font-size: 13px;
-  }
+.head {
+  border-bottom: 1px solid #303133;
+  color: #303133;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
+  font-size: 13px;
+}
 
-  .ms-opt-btn {
-    position: fixed;
-    right: 50px;
-    z-index: 1;
-  }
+.ms-opt-btn {
+  position: fixed;
+  right: 50px;
+  z-index: 1;
+}
 
-  .ms-tree >>> .el-tree-node__expand-icon.expanded {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
+.ms-tree >>> .el-tree-node__expand-icon.expanded {
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
 
-  .ms-tree >>> .el-icon-caret-right:before {
-    content: '\e723';
-    font-size: 20px;
-  }
+.ms-tree >>> .el-icon-caret-right:before {
+  content: '\e723';
+  font-size: 20px;
+}
 
-  .ms-tree >>> .el-tree-node__expand-icon.is-leaf {
-    color: transparent;
-  }
+.ms-tree >>> .el-tree-node__expand-icon.is-leaf {
+  color: transparent;
+}
 
-  .ms-tree >>> .el-tree-node__expand-icon {
-    color: #7C3985;
-  }
+.ms-tree >>> .el-tree-node__expand-icon {
+  color: #7C3985;
+}
 
-  .ms-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
-    color: #7C3985;
-    content: "\e722";
-    font-size: 20px;
-  }
+.ms-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+  color: #7C3985;
+  content: "\e722";
+  font-size: 20px;
+}
 
-  .ms-sc-variable-header >>> .el-dialog__body {
-    padding: 0px 20px;
-  }
+.ms-sc-variable-header >>> .el-dialog__body {
+  padding: 0px 20px;
+}
 
-  .custom-tree-node {
-    width: 1000px;
-  }
+.custom-tree-node {
+  width: 1000px;
+}
 
-  .father .child {
-    display: none;
-  }
+.father .child {
+  display: none;
+}
 
-  .scenario-aside {
-    min-width: 400px;
-    position: relative;
-    border-radius: 4px;
-    border: 1px solid #EBEEF5;
-    box-sizing: border-box;
-  }
+.scenario-aside {
+  min-width: 400px;
+  position: relative;
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+  box-sizing: border-box;
+}
 
-  .scenario-main {
-    position: relative;
-    margin-left: 20px;
-    border: 1px solid #EBEEF5;
-  }
+.scenario-main {
+  position: relative;
+  margin-left: 20px;
+  border: 1px solid #EBEEF5;
+}
 
-  .scenario-list {
-    overflow-y: auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 28px;
-  }
+.scenario-list {
+  overflow-y: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 28px;
+}
 
-  .father:hover .child {
-    display: block;
-  }
+.father:hover .child {
+  display: block;
+}
 
-  .ms-open-btn {
-    margin: 5px 5px 0px;
-    font-size: 10px;
-    background-color: #F2F9EE;
-    color: #67C23A;
-  }
+.ms-open-btn {
+  margin: 5px 5px 0px;
+  font-size: 10px;
+  background-color: #F2F9EE;
+  color: #67C23A;
+}
 
-  .ms-open-btn-left {
-    margin-left: 30px;
-  }
+.ms-open-btn-left {
+  margin-left: 30px;
+}
 </style>