From 88c20730029c5a4a6a0bd1d8993cb4f90f1c62c3 Mon Sep 17 00:00:00 2001
From: wenyann <64353056+wenyann@users.noreply.github.com>
Date: Fri, 19 Mar 2021 16:51:07 +0800
Subject: [PATCH 01/22] =?UTF-8?q?fix:=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA-?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E4=B8=8B=E6=8B=89=E6=A1=86?=
 =?UTF-8?q?-=E5=88=9B=E5=BB=BA=E7=94=A8=E4=BE=8B=EF=BC=8C=E4=BC=9A?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=E6=B2=A1=E9=A1=B9=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/business/components/track/case/TestCase.vue   | 11 ++++++++---
 .../components/track/case/components/TestCaseEdit.vue | 11 +++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/business/components/track/case/TestCase.vue b/frontend/src/business/components/track/case/TestCase.vue
index f3bae0ef40..a2eba81345 100644
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@@ -260,9 +260,14 @@ export default {
           this.$warning(this.$t('commons.check_project_tip'));
           return;
         }
-/*
-        this.openRecentTestCaseEditDialog(caseId);
-*/
+        if (caseId) {
+          this.$get('test/case/get/' + caseId, response => {
+            let testCase = response.data;
+            this.editTestCase(testCase)
+          });
+        } else {
+          this.addTab({name: 'add'});
+        }
         this.$router.push('/track/case/all');
       }
     },
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index 2d9ec236b8..a7a7b014e8 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -551,7 +551,11 @@ export default {
       let tmp = {};
       Object.assign(tmp, testCase);
       tmp.steps = JSON.parse(testCase.steps);
+      if (tmp.steps == null) {
+        tmp.steps = []
+      }
       Object.assign(this.form, tmp);
+
       this.form.module = testCase.nodeId;
       this.getFileMetaData(testCase);
     },
@@ -964,4 +968,11 @@ export default {
   width: 100%;
 }
 
+/deep/ .el-button-group > .el-button:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  height: 32px;
+  width: 56px;
+}
+
 </style>

From afc0cfbde596ae641720b4949942b3d8420d7dc7 Mon Sep 17 00:00:00 2001
From: wenyann <64353056+wenyann@users.noreply.github.com>
Date: Fri, 19 Mar 2021 17:19:12 +0800
Subject: [PATCH 02/22] =?UTF-8?q?fix:=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA?=
 =?UTF-8?q?=EF=BC=8C=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E8=A1=A8=E5=A4=B4?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=92=8C=E8=AE=BE=E7=BD=AE=E7=9A=84=E4=B8=8D?=
 =?UTF-8?q?=E4=B8=80=E6=A0=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/model/JsonData.js       |  9 ++++-
 .../track/case/components/TestCaseList.vue    | 38 ++++++++++++++-----
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/frontend/src/business/components/common/model/JsonData.js b/frontend/src/business/components/common/model/JsonData.js
index d60571fc3d..0726b8692c 100644
--- a/frontend/src/business/components/common/model/JsonData.js
+++ b/frontend/src/business/components/common/model/JsonData.js
@@ -5,12 +5,17 @@ export const Track_Test_Case = [
   {id: 'num', label: i18n.t('commons.id')},
   {id: 'name', label: i18n.t('commons.name')},
   {id: 'priority', label: i18n.t('test_track.case.priority')},
-  {id: 'type', label: i18n.t('test_track.case.type')},
-  {id: 'method', label: i18n.t('test_track.case.method')},
+  /*
+    {id: 'type', label: i18n.t('test_track.case.type')},
+  */
+  /*
+    {id: 'method', label: i18n.t('test_track.case.method')},
+  */
   {id: 'reviewStatus', label: i18n.t('test_track.case.status')},
   {id: 'tags', label: i18n.t('commons.tag')},
   {id: 'nodePath', label: i18n.t('test_track.case.module')},
   {id: 'updateTime', label: i18n.t('commons.update_time')},
+  {id: 'status', label: i18n.t('commons.status')}
 ]
 //用例评审-测试用例
 export const Test_Case_Review = [
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index 13483fd82c..18d6271bf0 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -102,18 +102,31 @@
           </el-table-column>-->
 
           <el-table-column
-              v-if="item.id=='status'"
-              :filters="statusFilters"
-              column-key="status"
-              min-width="100px"
-              :label="$t('test_track.case.status')"
-              :key="index">
+            v-if="item.id=='reviewStatus'"
+            :filters="reviewStatusFilters"
+            column-key="reviewStatus"
+            min-width="100px"
+            :label="$t('test_track.case.status')"
+            :key="index">
             <template v-slot:default="scope">
             <span class="el-dropdown-link">
               <review-status :value="scope.row.reviewStatus"/>
             </span>
             </template>
           </el-table-column>
+          <el-table-column
+            v-if="item.id=='status'"
+            :filters="statusFilters"
+            column-key="status"
+            min-width="100px"
+            :label="$t('commons.status')"
+            :key="index">
+            <template v-slot:default="scope">
+            <span class="el-dropdown-link">
+              <plan-status-table-item :value="scope.row.status"></plan-status-table-item>
+            </span>
+            </template>
+          </el-table-column>
 
           <el-table-column v-if="item.id=='tags'" prop="tags" :label="$t('commons.tag')" :key="index">
             <template v-slot:default="scope">
@@ -123,8 +136,8 @@
           </el-table-column>
 
           <el-table-column
-              v-if="item.id=='nodePath'"
-              prop="nodePath"
+            v-if="item.id=='nodePath'"
+            prop="nodePath"
               :label="$t('test_track.case.module')"
               min-width="150px"
               show-overflow-tooltip
@@ -213,10 +226,12 @@ import {Track_Test_Case} from "@/business/components/common/model/JsonData";
 import HeaderCustom from "@/business/components/common/head/HeaderCustom";
 import i18n from "@/i18n/i18n";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
+import PlanStatusTableItem from "@/business/components/track/common/tableItems/plan/PlanStatusTableItem";
 
 export default {
   name: "TestCaseList",
   components: {
+    PlanStatusTableItem,
     HeaderLabelOperate,
     HeaderCustom,
     BatchMove,
@@ -270,11 +285,16 @@ export default {
         {text: this.$t('commons.performance'), value: 'performance'},
         {text: this.$t('commons.api'), value: 'api'}
       ],
-      statusFilters: [
+      reviewStatusFilters: [
         {text: this.$t('test_track.case.status_prepare'), value: 'Prepare'},
         {text: this.$t('test_track.case.status_pass'), value: 'Pass'},
         {text: this.$t('test_track.case.status_un_pass'), value: 'UnPass'},
       ],
+      statusFilters: [
+        {text: '未开始', value: 'Prepare'},
+        {text: '进行中', value: 'Underway'},
+        {text: '已完成', value: 'Completed'},
+      ],
       showMore: false,
       buttons: [
         {

From 2b5483dc23b2d7d275fc2ac6363bbeffe36045a4 Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Fri, 19 Mar 2021 18:04:35 +0800
Subject: [PATCH 03/22] =?UTF-8?q?fix:=20=E7=94=A8=E4=BE=8B=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5tag=E8=A1=A8=E5=A4=B4=E4=B8=BA=E7=A9=BA=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E5=A4=B1=E8=B4=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../io/metersphere/excel/annotation/NotRequired.java  |  9 +++++++++
 .../metersphere/excel/domain/TestCaseExcelDataCn.java |  2 ++
 .../metersphere/excel/domain/TestCaseExcelDataTw.java |  7 +++++++
 .../metersphere/excel/domain/TestCaseExcelDataUs.java |  7 +++++++
 .../metersphere/excel/listener/EasyExcelListener.java | 11 ++++++-----
 .../src/business/components/track/case/TestCase.vue   |  1 +
 .../components/track/common/TestCaseNodeTree.vue      |  1 -
 7 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 backend/src/main/java/io/metersphere/excel/annotation/NotRequired.java

diff --git a/backend/src/main/java/io/metersphere/excel/annotation/NotRequired.java b/backend/src/main/java/io/metersphere/excel/annotation/NotRequired.java
new file mode 100644
index 0000000000..ba07866442
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/excel/annotation/NotRequired.java
@@ -0,0 +1,9 @@
+package io.metersphere.excel.annotation;
+
+import java.lang.annotation.*;
+
+@Target({ElementType.FIELD})
+@Retention(RetentionPolicy.RUNTIME)
+@Inherited
+public @interface NotRequired {
+}
diff --git a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataCn.java b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataCn.java
index 5bca529228..847dcd845e 100644
--- a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataCn.java
+++ b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataCn.java
@@ -2,6 +2,7 @@ package io.metersphere.excel.domain;
 
 import com.alibaba.excel.annotation.ExcelProperty;
 import com.alibaba.excel.annotation.write.style.ColumnWidth;
+import io.metersphere.excel.annotation.NotRequired;
 import lombok.Data;
 import org.hibernate.validator.constraints.Length;
 
@@ -40,6 +41,7 @@ public class TestCaseExcelDataCn extends TestCaseExcelData {
 
     @ColumnWidth(50)
     @ExcelProperty("标签")
+    @NotRequired
     @Length(min = 0, max = 1000)
     private String tags;
 
diff --git a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataTw.java b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataTw.java
index 3c9560a051..4137f4e76c 100644
--- a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataTw.java
+++ b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataTw.java
@@ -2,6 +2,7 @@ package io.metersphere.excel.domain;
 
 import com.alibaba.excel.annotation.ExcelProperty;
 import com.alibaba.excel.annotation.write.style.ColumnWidth;
+import io.metersphere.excel.annotation.NotRequired;
 import lombok.Data;
 import org.hibernate.validator.constraints.Length;
 
@@ -38,6 +39,12 @@ public class TestCaseExcelDataTw extends TestCaseExcelData {
     @Pattern(regexp = "(^P0$)|(^P1$)|(^P2$)|(^P3$)", message = "{test_case_priority_validate}")
     private String priority;
 
+    @ColumnWidth(50)
+    @ExcelProperty("標簽")
+    @NotRequired
+    @Length(min = 0, max = 1000)
+    private String tags;
+
     @NotBlank(message = "{cannot_be_null}")
     @ExcelProperty("測試方式")
     @Pattern(regexp = "(^manual$)|(^auto$)", message = "{test_case_method_validate}")
diff --git a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataUs.java b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataUs.java
index 9dcce7ad83..1795d0545a 100644
--- a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataUs.java
+++ b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataUs.java
@@ -2,6 +2,7 @@ package io.metersphere.excel.domain;
 
 import com.alibaba.excel.annotation.ExcelProperty;
 import com.alibaba.excel.annotation.write.style.ColumnWidth;
+import io.metersphere.excel.annotation.NotRequired;
 import lombok.Data;
 import org.hibernate.validator.constraints.Length;
 
@@ -39,6 +40,12 @@ public class TestCaseExcelDataUs extends TestCaseExcelData {
     @Pattern(regexp = "(^P0$)|(^P1$)|(^P2$)|(^P3$)", message = "{test_case_priority_validate}")
     private String priority;
 
+    @ColumnWidth(50)
+    @ExcelProperty("Tag")
+    @NotRequired
+    @Length(min = 0, max = 1000)
+    private String tags;
+
     @NotBlank(message = "{cannot_be_null}")
     @ExcelProperty("Method")
     @Pattern(regexp = "(^manual$)|(^auto$)", message = "{test_case_method_validate}")
diff --git a/backend/src/main/java/io/metersphere/excel/listener/EasyExcelListener.java b/backend/src/main/java/io/metersphere/excel/listener/EasyExcelListener.java
index 3f2dbf0326..e96023d90a 100644
--- a/backend/src/main/java/io/metersphere/excel/listener/EasyExcelListener.java
+++ b/backend/src/main/java/io/metersphere/excel/listener/EasyExcelListener.java
@@ -6,15 +6,13 @@ import com.alibaba.excel.event.AnalysisEventListener;
 import com.alibaba.excel.exception.ExcelAnalysisException;
 import com.alibaba.excel.util.StringUtils;
 import io.metersphere.commons.utils.LogUtil;
+import io.metersphere.excel.annotation.NotRequired;
 import io.metersphere.excel.domain.ExcelErrData;
 import io.metersphere.excel.domain.TestCaseExcelData;
-import io.metersphere.excel.domain.UserExcelData;
 import io.metersphere.excel.utils.ExcelValidateHelper;
 import io.metersphere.i18n.Translator;
 
 import java.lang.reflect.Field;
-import java.lang.reflect.ParameterizedType;
-import java.lang.reflect.Type;
 import java.util.*;
 
 public abstract class EasyExcelListener<T> extends AnalysisEventListener<T> {
@@ -131,7 +129,10 @@ public abstract class EasyExcelListener<T> extends AnalysisEventListener<T> {
                 for (String v : excelProperty.value()) {
                     value.append(v);
                 }
-                result.add(value.toString());
+                // 检查是否必有的头部信息
+                if (field.getAnnotation(NotRequired.class) == null) {
+                    result.add(value.toString());
+                }
             }
         }
         return result;
@@ -140,4 +141,4 @@ public abstract class EasyExcelListener<T> extends AnalysisEventListener<T> {
     public List<ExcelErrData<T>> getErrList() {
         return errList;
     }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/business/components/track/case/TestCase.vue b/frontend/src/business/components/track/case/TestCase.vue
index f3bae0ef40..5dd3b0690f 100644
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@@ -8,6 +8,7 @@
         @setTreeNodes="setTreeNodes"
         @exportTestCase="exportTestCase"
         @saveAsEdit="editTestCase"
+        @refreshAll="refreshAll"
         :type="'edit'"
         ref="nodeTree"
       />
diff --git a/frontend/src/business/components/track/common/TestCaseNodeTree.vue b/frontend/src/business/components/track/common/TestCaseNodeTree.vue
index ed31d2c7df..37dfbfb333 100644
--- a/frontend/src/business/components/track/common/TestCaseNodeTree.vue
+++ b/frontend/src/business/components/track/common/TestCaseNodeTree.vue
@@ -101,7 +101,6 @@ export default {
       this.$emit("refreshTable");
     },
     refreshAll() {
-      this.selectRows.clear();
       this.$emit('refreshAll');
     },
     handleCommand(e) {

From 17a764e2366143a49052900f317f39055616853d Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Fri, 19 Mar 2021 18:41:23 +0800
Subject: [PATCH 04/22] =?UTF-8?q?fix(=E5=9C=BA=E6=99=AF=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=8C=96):=20=E4=BF=AE=E5=A4=8D=E7=A7=BB=E9=99=A4=E4=B8=8D?=
 =?UTF-8?q?=E4=BA=86=E5=AF=BC=E5=85=A5=E7=9A=84=E6=AD=A5=E9=AA=A4=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../automation/scenario/component/JmeterElementComponent.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/component/JmeterElementComponent.vue b/frontend/src/business/components/api/automation/scenario/component/JmeterElementComponent.vue
index 7c47a3484b..5a80f68f70 100644
--- a/frontend/src/business/components/api/automation/scenario/component/JmeterElementComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/JmeterElementComponent.vue
@@ -54,10 +54,10 @@
     },
     methods: {
       remove() {
-        this.$emit('remove', this.jsr223Processor, this.node);
+        this.$emit('remove', this.request, this.node);
       },
       copyRow() {
-        this.$emit('copyRow', this.jsr223Processor, this.node);
+        this.$emit('copyRow', this.request, this.node);
       },
       active() {
         this.request.active = !this.request.active;

From a1d4e965d0f5efa37ced7dae141ab76889b69592 Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Fri, 19 Mar 2021 19:07:18 +0800
Subject: [PATCH 05/22] =?UTF-8?q?fix(=E5=9C=BA=E6=99=AF=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=8C=96):=20=E4=BF=AE=E5=A4=8DCVS=E9=99=84=E4=BB=B6=E7=BC=BA?=
 =?UTF-8?q?=E5=A4=B1=E6=89=A7=E8=A1=8C=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/dto/definition/request/unknown/MsJmeterElement.java   | 4 ++++
 .../java/io/metersphere/api/service/ApiAutomationService.java | 1 -
 .../java/io/metersphere/api/service/ApiDefinitionService.java | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/backend/src/main/java/io/metersphere/api/dto/definition/request/unknown/MsJmeterElement.java b/backend/src/main/java/io/metersphere/api/dto/definition/request/unknown/MsJmeterElement.java
index 423a0de176..38237e19f9 100644
--- a/backend/src/main/java/io/metersphere/api/dto/definition/request/unknown/MsJmeterElement.java
+++ b/backend/src/main/java/io/metersphere/api/dto/definition/request/unknown/MsJmeterElement.java
@@ -32,6 +32,10 @@ public class MsJmeterElement extends MsTestElement {
     @Override
     public void toHashTree(HashTree tree, List<MsTestElement> hashTree, ParameterConfig config) {
         try {
+            // 非导出操作，且不是启用状态则跳过执行
+            if (!config.isOperating() && !this.isEnable()) {
+                return;
+            }
             InputStream inputSource = getStrToStream(jmeterElement);
             if (inputSource != null) {
                 Object scriptWrapper = SaveService.loadElement(inputSource);
diff --git a/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java b/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
index 5a275afe51..8096f1e974 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
@@ -603,7 +603,6 @@ public class ApiAutomationService {
         ParameterConfig config = new ParameterConfig();
         config.setConfig(envConfig);
         HashTree hashTree = request.getTestElement().generateHashTree(config);
-        System.out.println(request.getTestElement().getJmx(hashTree));
         // 调用执行方法
         APIScenarioReportResult reportResult = createScenarioReport(request.getId(), request.getScenarioId(), request.getScenarioName(), ReportTriggerMode.MANUAL.name(), request.getExecuteType(), request.getProjectId(),
                 SessionUtils.getUserId());
diff --git a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
index 20bd8c32ae..1e13fd0f3b 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
@@ -447,6 +447,7 @@ public class ApiDefinitionService {
         }
 
         HashTree hashTree = request.getTestElement().generateHashTree(config);
+
         String runMode = ApiRunMode.DEFINITION.name();
         if (StringUtils.isNotBlank(request.getType()) && StringUtils.equals(request.getType(), ApiRunMode.API_PLAN.name())) {
             runMode = ApiRunMode.API_PLAN.name();

From 72f9e143c504904b40d85d3772e522b1a44f5c7f Mon Sep 17 00:00:00 2001
From: "song.tianyang" <tianyang.song@fit2cloud.com>
Date: Fri, 19 Mar 2021 19:29:14 +0800
Subject: [PATCH 06/22] =?UTF-8?q?feat:=20=E6=8E=A5=E5=8F=A3=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E9=92=88=E5=AF=B9=20TCP=20=E8=AF=B7=E6=B1=82=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=20ESB=20=E5=AD=90=E7=B1=BB=E5=9E=8B=EF=BC=88X-Pack?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

接口定义针对 TCP 请求增加 ESB 子类型（X-Pack）
---
 .../controller/ApiDefinitionController.java   |   2 -
 .../api/dto/automation/EsbDataStruct.java     | 121 +++
 .../automation/GenEsbSendReportRequest.java   |  18 +
 .../dto/automation/parse/EsbDataParser.java   |  90 +++
 .../definition/SaveApiDefinitionRequest.java  |   5 +
 .../definition/SaveApiTestCaseRequest.java    |   4 +
 .../api/service/ApiDefinitionService.java     |  16 +
 .../api/service/ApiTestCaseService.java       |  20 +-
 .../api/service/EsbApiParamService.java       | 239 ++++++
 .../metersphere/base/domain/EsbApiParams.java |  13 +
 .../base/domain/EsbApiParamsExample.java      | 340 ++++++++
 .../base/domain/EsbApiParamsWithBLOBs.java    |  21 +
 .../base/mapper/EsbApiParamsMapper.java       |  37 +
 .../base/mapper/EsbApiParamsMapper.xml        | 264 +++++++
 .../metersphere/commons/utils/ShiroUtils.java |   2 +-
 .../io/metersphere/security/ApiKeyFilter.java |  10 -
 .../db/migration/V78__v1.8_release.sql        |  13 +
 .../api/automation/ApiAutomation.vue          |   2 +-
 .../common/Jsr233ProcessorContent.vue         |  24 +
 .../components/case/ApiCaseItem.vue           |  31 +-
 .../components/case/ApiCaseList.vue           |   3 +
 .../complete/EditCompleteTCPApi.vue           |  72 +-
 .../components/complete/TCPBasicApi.vue       | 156 ++++
 .../definition/components/document/Anchor.vue | 119 ---
 .../components/document/ApiDocumentAnchor.vue | 734 ++++++++++++++++++
 .../document/ApiDocumentAnchorData.vue        | 720 +++++++++++++++++
 .../components/document/ApiDocumentItem.vue   |   3 +-
 .../components/document/TestScroll.vue        |  66 --
 .../request/tcp/TcpBasisParameters.vue        |  10 +-
 .../components/PerformanceBasicConfig.vue     |   8 +-
 frontend/src/document/Document.vue            |   2 -
 frontend/src/i18n/en-US.js                    |  16 +-
 frontend/src/i18n/zh-CN.js                    |  16 +-
 frontend/src/i18n/zh-TW.js                    |  16 +-
 34 files changed, 2983 insertions(+), 230 deletions(-)
 create mode 100644 backend/src/main/java/io/metersphere/api/dto/automation/EsbDataStruct.java
 create mode 100644 backend/src/main/java/io/metersphere/api/dto/automation/GenEsbSendReportRequest.java
 create mode 100644 backend/src/main/java/io/metersphere/api/dto/automation/parse/EsbDataParser.java
 create mode 100644 backend/src/main/java/io/metersphere/api/service/EsbApiParamService.java
 create mode 100644 backend/src/main/java/io/metersphere/base/domain/EsbApiParams.java
 create mode 100644 backend/src/main/java/io/metersphere/base/domain/EsbApiParamsExample.java
 create mode 100644 backend/src/main/java/io/metersphere/base/domain/EsbApiParamsWithBLOBs.java
 create mode 100644 backend/src/main/java/io/metersphere/base/mapper/EsbApiParamsMapper.java
 create mode 100644 backend/src/main/java/io/metersphere/base/mapper/EsbApiParamsMapper.xml
 create mode 100644 frontend/src/business/components/api/definition/components/complete/TCPBasicApi.vue
 delete mode 100644 frontend/src/business/components/api/definition/components/document/Anchor.vue
 create mode 100644 frontend/src/business/components/api/definition/components/document/ApiDocumentAnchor.vue
 create mode 100644 frontend/src/business/components/api/definition/components/document/ApiDocumentAnchorData.vue
 delete mode 100644 frontend/src/business/components/api/definition/components/document/TestScroll.vue

diff --git a/backend/src/main/java/io/metersphere/api/controller/ApiDefinitionController.java b/backend/src/main/java/io/metersphere/api/controller/ApiDefinitionController.java
index b7e23f8f29..4ee9dd1caa 100644
--- a/backend/src/main/java/io/metersphere/api/controller/ApiDefinitionController.java
+++ b/backend/src/main/java/io/metersphere/api/controller/ApiDefinitionController.java
@@ -233,6 +233,4 @@ public class ApiDefinitionController {
     public String preview(@RequestBody String jsonSchema) {
         return JSONSchemaGenerator.getJson(jsonSchema);
     }
-
-
 }
diff --git a/backend/src/main/java/io/metersphere/api/dto/automation/EsbDataStruct.java b/backend/src/main/java/io/metersphere/api/dto/automation/EsbDataStruct.java
new file mode 100644
index 0000000000..0fa226b32f
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/api/dto/automation/EsbDataStruct.java
@@ -0,0 +1,121 @@
+package io.metersphere.api.dto.automation;
+
+import lombok.Getter;
+import lombok.Setter;
+import org.apache.commons.lang3.StringUtils;
+import org.dom4j.Document;
+import org.dom4j.Element;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * //ESB数据格式
+ *
+ * @author song.tianyang
+ * @Date 2021/3/15 4:37 下午
+ * @Description
+ */
+@Getter
+@Setter
+public class EsbDataStruct {
+    private String name;
+    private String value;
+    private String type;
+    private String systemName;
+    private String contentType;
+    private String required;
+    private String description;
+    private List<EsbDataStruct> children;
+
+    public EsbDataStruct copy(boolean copyChildren) {
+        EsbDataStruct returnObj = new EsbDataStruct();
+        returnObj.name = this.name;
+        returnObj.value = this.value;
+        returnObj.type = this.type;
+        returnObj.systemName = this.systemName;
+        returnObj.contentType = this.contentType;
+        returnObj.required = this.required;
+        returnObj.description = this.description;
+        if (copyChildren) {
+            returnObj.children = this.children;
+        } else {
+            returnObj.children = new ArrayList<>();
+        }
+        return returnObj;
+    }
+
+    public Element genXmlElementByChildren(Element document) {
+        this.name = this.name.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
+                .replace("\"", "&quot;").replace("©", "&apos;");
+        if (StringUtils.isEmpty(this.name)) {
+            return null;
+        }
+
+        Element element = null;
+        try {
+            element = document.addElement(this.name);
+            if (StringUtils.equalsAnyIgnoreCase(type, "string", "array")) {
+                long lengthNum = Long.parseLong(this.contentType);
+                String attrString = "";
+                if (StringUtils.equalsIgnoreCase(this.type, "string")) {
+                    attrString = "s," + contentType;
+                } else if (StringUtils.equalsIgnoreCase(this.type, "array")) {
+                    attrString = "a," + contentType;
+                }
+                element.addAttribute("attr", attrString);
+            }
+        } catch (Exception e) {
+            System.out.println(this.name);
+            e.printStackTrace();
+        }
+
+        if (element != null) {
+            if (this.children == null || this.children.isEmpty()) {
+                element.addText(this.value);
+            } else {
+                for (EsbDataStruct child : children) {
+                    child.genXmlElementByChildren(document);
+                }
+            }
+        }
+        return element;
+    }
+
+    public Element genXmlElementByDocument(Document document) {
+        this.name = this.name.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
+                .replace("\"", "&quot;").replace("©", "&apos;");
+        if (StringUtils.isEmpty(this.name)) {
+            return null;
+        }
+
+        Element element = null;
+        try {
+            element = document.addElement(this.name);
+            if (StringUtils.equalsAnyIgnoreCase(type, "string", "array")) {
+                long lengthNum = Long.parseLong(this.contentType);
+                String attrString = "";
+                if (StringUtils.equalsIgnoreCase(this.type, "string")) {
+                    attrString = "s," + contentType;
+                } else if (StringUtils.equalsIgnoreCase(this.type, "array")) {
+                    attrString = "a," + contentType;
+                }
+                element.addAttribute("attr", attrString);
+            }
+        } catch (Exception e) {
+            System.out.println(this.name);
+            e.printStackTrace();
+        }
+
+        if (element != null) {
+            if (this.children == null || this.children.isEmpty()) {
+                element.addText(this.value);
+            } else {
+                for (EsbDataStruct child : children) {
+                    child.genXmlElementByChildren(element);
+                }
+            }
+        }
+        return element;
+    }
+}
diff --git a/backend/src/main/java/io/metersphere/api/dto/automation/GenEsbSendReportRequest.java b/backend/src/main/java/io/metersphere/api/dto/automation/GenEsbSendReportRequest.java
new file mode 100644
index 0000000000..0f626acf73
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/api/dto/automation/GenEsbSendReportRequest.java
@@ -0,0 +1,18 @@
+package io.metersphere.api.dto.automation;
+
+import lombok.Getter;
+import lombok.Setter;
+
+import java.util.List;
+
+/**
+ * @author song.tianyang
+ * @Date 2021/3/17 11:41 上午
+ * @Description
+ */
+@Getter
+@Setter
+public class GenEsbSendReportRequest {
+    String frontScript;
+    List<EsbDataStruct> structList;
+}
diff --git a/backend/src/main/java/io/metersphere/api/dto/automation/parse/EsbDataParser.java b/backend/src/main/java/io/metersphere/api/dto/automation/parse/EsbDataParser.java
new file mode 100644
index 0000000000..1944c5dd85
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/api/dto/automation/parse/EsbDataParser.java
@@ -0,0 +1,90 @@
+package io.metersphere.api.dto.automation.parse;
+
+import com.alibaba.fastjson.JSONArray;
+import io.metersphere.api.dto.automation.EsbDataStruct;
+import org.apache.commons.lang3.StringUtils;
+import org.dom4j.Document;
+import org.dom4j.DocumentHelper;
+
+import javax.xml.parsers.DocumentBuilder;
+import javax.xml.parsers.DocumentBuilderFactory;
+import java.util.List;
+
+/**
+ * @author song.tianyang
+ * @Date 2021/3/15 5:00 下午
+ * @Description
+ */
+public class EsbDataParser {
+    public static String esbData2XmlByParamStruct(List<EsbDataStruct> esbDataList, String[] paramArr) {
+        String xmlString = "";
+        try {
+            if (esbDataList == null || esbDataList.isEmpty()) {
+                return xmlString;
+            }
+            // 创建解析器工厂
+            DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
+            DocumentBuilder db = factory.newDocumentBuilder();
+            Document document = DocumentHelper.createDocument();
+            EsbDataStruct dataStruct = selectEsbDataStructByNameStruct(esbDataList, paramArr, 0);
+            if (dataStruct != null) {
+                dataStruct.genXmlElementByDocument(document);
+                xmlString = document.getRootElement().asXML();
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        if (StringUtils.isEmpty(xmlString)) {
+            xmlString = "";
+        }
+        return xmlString;
+    }
+
+    //根据参数结构，递归查询数据
+    private static EsbDataStruct selectEsbDataStructByNameStruct(List<EsbDataStruct> esbDataList, String[] paramArr, int index) {
+        EsbDataStruct returnData = null;
+        if (paramArr.length > index) {
+            String param = paramArr[index];
+            for (EsbDataStruct dataStuct : esbDataList) {
+                if (StringUtils.equals(dataStuct.getName(), param)) {
+                    int newIndex = index + 1;
+                    if (paramArr.length > newIndex && dataStuct.getChildren() != null) {
+                        EsbDataStruct childElement = selectEsbDataStructByNameStruct(dataStuct.getChildren(), paramArr, newIndex);
+                        if (childElement != null) {
+                            returnData = dataStuct.copy(false);
+                            returnData.getChildren().add(childElement);
+                        }
+                    } else {
+                        returnData = dataStuct.copy(true);
+                    }
+                }else if(index == 0){
+                    //如果是第一个节点不符合，则遍历子节点是否有符合的。
+                    int newIndex = index;
+                    EsbDataStruct itemData = selectEsbDataStructByNameStruct(dataStuct.getChildren(), paramArr, newIndex);
+                    if(itemData != null ){
+                        returnData = itemData;
+                    }
+                }
+            }
+        }
+        return returnData;
+    }
+
+    public static void main(String[] args) {
+        String str = "[{\"systemName\":\"\",\"children\":[{\"systemName\":\"\",\"children\":[{\"systemName\":\"\",\"children\":[],\"name\":\"CardNo\",\"description\":\"\",\"type\":\"string\",\"contentType\":\"30\",\"uuid\":\"295f4\",\"value\":\"627713288321\",\"required\":true,\"status\":\"\"},{\"name\":\"AccoutNo\",\"systemName\":\"\",\"status\":\"\",\"type\":\"string\",\"contentType\":\"6\",\"required\":false,\"description\":\"\",\"uuid\":\"3e8ef\",\"children\":[],\"value\":\"371421321\"}],\"name\":\"HEAD\",\"description\":\"\",\"type\":\"[object]\",\"contentType\":\"\",\"uuid\":\"55483\",\"required\":false,\"status\":\"\"},{\"name\":\"Body\",\"systemName\":\"\",\"status\":\"\",\"type\":\"[object]\",\"contentType\":\"\",\"required\":false,\"description\":\"\",\"uuid\":\"a088b\",\"children\":[{\"name\":\"returnFlag\",\"systemName\":\"\",\"status\":\"\",\"type\":\"string\",\"contentType\":\"2\",\"required\":false,\"description\":\"\",\"uuid\":\"76d75\",\"children\":[],\"value\":\"1\"}]}],\"name\":\"SERVICE\",\"description\":\"\",\"type\":\"[object]\",\"contentType\":\"\",\"uuid\":\"faf95\",\"required\":false,\"status\":\"\"}]";
+        List<EsbDataStruct> list = JSONArray.parseArray(str, EsbDataStruct.class);
+        String[] paramArr = new String[]{"HEAD"};
+        System.out.println(esbData2XmlByParamStruct(list, paramArr));
+
+        paramArr = new String[]{"SERVICE"};
+        System.out.println(esbData2XmlByParamStruct(list, paramArr));
+
+        paramArr = new String[]{"Body"};
+        System.out.println(esbData2XmlByParamStruct(list, paramArr));
+
+        paramArr = new String[]{"SERVICE","Body"};
+        System.out.println(esbData2XmlByParamStruct(list, paramArr));
+
+    }
+
+}
diff --git a/backend/src/main/java/io/metersphere/api/dto/definition/SaveApiDefinitionRequest.java b/backend/src/main/java/io/metersphere/api/dto/definition/SaveApiDefinitionRequest.java
index 0dad6ff49f..2f5e08b623 100644
--- a/backend/src/main/java/io/metersphere/api/dto/definition/SaveApiDefinitionRequest.java
+++ b/backend/src/main/java/io/metersphere/api/dto/definition/SaveApiDefinitionRequest.java
@@ -49,4 +49,9 @@ public class SaveApiDefinitionRequest {
     private List<String> bodyUploadIds;
 
     private String tags;
+
+    //ESB参数。  可为null
+    private String esbDataStruct;
+    private String backEsbDataStruct;
+    private String backScript;
 }
diff --git a/backend/src/main/java/io/metersphere/api/dto/definition/SaveApiTestCaseRequest.java b/backend/src/main/java/io/metersphere/api/dto/definition/SaveApiTestCaseRequest.java
index 34815ceee7..f7d2c1c67c 100644
--- a/backend/src/main/java/io/metersphere/api/dto/definition/SaveApiTestCaseRequest.java
+++ b/backend/src/main/java/io/metersphere/api/dto/definition/SaveApiTestCaseRequest.java
@@ -37,4 +37,8 @@ public class SaveApiTestCaseRequest {
     private List<String> bodyUploadIds;
 
     private String tags;
+
+    //ESB参数。  可为null
+    private String esbDataStruct;
+    private String backEsbDataStruct;
 }
diff --git a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
index 1e13fd0f3b..83dc9c30a5 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
@@ -91,6 +91,8 @@ public class ApiDefinitionService {
     private ApiTestCaseMapper apiTestCaseMapper;
     @Resource
     private ApiTestEnvironmentService environmentService;
+    @Resource
+    private EsbApiParamService esbApiParamService;
 
     private static Cache cache = Cache.newHardMemoryCache(0, 3600 * 24);
 
@@ -162,12 +164,14 @@ public class ApiDefinitionService {
         deleteFileByTestId(apiId);
         extApiDefinitionExecResultMapper.deleteByResourceId(apiId);
         apiDefinitionMapper.deleteByPrimaryKey(apiId);
+        esbApiParamService.deleteByResourceId(apiId);
         deleteBodyFiles(apiId);
     }
 
     public void deleteBatch(List<String> apiIds) {
         ApiDefinitionExample example = new ApiDefinitionExample();
         example.createCriteria().andIdIn(apiIds);
+        esbApiParamService.deleteByResourceIdIn(apiIds);
         apiDefinitionMapper.deleteByExample(example);
     }
 
@@ -229,6 +233,10 @@ public class ApiDefinitionService {
 
     private ApiDefinition updateTest(SaveApiDefinitionRequest request) {
         checkNameExist(request);
+        if(StringUtils.equals(request.getMethod(),"ESB")){
+            //ESB的接口类型数据，采用TCP方式去发送。并将方法类型改为TCP。 并修改发送数据
+            request = esbApiParamService.handleEsbRequest(request);
+        }
         final ApiDefinitionWithBLOBs test = new ApiDefinitionWithBLOBs();
         test.setId(request.getId());
         test.setName(request.getName());
@@ -254,6 +262,10 @@ public class ApiDefinitionService {
 
     private ApiDefinition createTest(SaveApiDefinitionRequest request) {
         checkNameExist(request);
+        if(StringUtils.equals(request.getMethod(),"ESB")){
+            //ESB的接口类型数据，采用TCP方式去发送。并将方法类型改为TCP。 并修改发送数据
+            request = esbApiParamService.handleEsbRequest(request);
+        }
         final ApiDefinitionWithBLOBs test = new ApiDefinitionWithBLOBs();
         test.setId(request.getId());
         test.setName(request.getName());
@@ -710,6 +722,10 @@ public class ApiDefinitionService {
                     res.setCasePassingRate("-");
                     res.setCaseStatus("-");
                 }
+
+                if(StringUtils.equals("ESB",res.getMethod())){
+                    esbApiParamService.handleApiEsbParams(res);
+                }
             }
         }
     }
diff --git a/backend/src/main/java/io/metersphere/api/service/ApiTestCaseService.java b/backend/src/main/java/io/metersphere/api/service/ApiTestCaseService.java
index 63db472a00..7bd9858db4 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiTestCaseService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiTestCaseService.java
@@ -75,12 +75,19 @@ public class ApiTestCaseService {
     private ApiDefinitionExecResultMapper apiDefinitionExecResultMapper;
     @Resource
     private TestPlanApiCaseMapper testPlanApiCaseMapper;
+    @Resource
+    private EsbApiParamService esbApiParamService;
 
     private static final String BODY_FILE_DIR = FileUtils.BODY_FILE_DIR;
 
     public List<ApiTestCaseResult> list(ApiTestCaseRequest request) {
         request.setOrders(ServiceUtils.getDefaultOrder(request.getOrders()));
-        return extApiTestCaseMapper.list(request);
+        List<ApiTestCaseResult> returnList =  extApiTestCaseMapper.list(request);
+
+        for (ApiTestCaseResult res : returnList) {
+            esbApiParamService.handleApiEsbParams(res);
+        }
+        return  returnList;
     }
 
     public List<ApiTestCaseDTO> listSimple(ApiTestCaseRequest request) {
@@ -169,6 +176,7 @@ public class ApiTestCaseService {
         deleteFileByTestId(testId);
         extApiDefinitionExecResultMapper.deleteByResourceId(testId);
         apiTestCaseMapper.deleteByPrimaryKey(testId);
+        esbApiParamService.deleteByResourceId(testId);
         deleteBodyFiles(testId);
     }
 
@@ -219,6 +227,11 @@ public class ApiTestCaseService {
 
     private ApiTestCase updateTest(SaveApiTestCaseRequest request) {
         checkNameExist(request);
+
+        if(StringUtils.isNotEmpty(request.getEsbDataStruct())){
+            request = esbApiParamService.handleEsbRequest(request);
+        }
+
         final ApiTestCaseWithBLOBs test = new ApiTestCaseWithBLOBs();
         test.setId(request.getId());
         test.setName(request.getName());
@@ -237,6 +250,11 @@ public class ApiTestCaseService {
     private ApiTestCase createTest(SaveApiTestCaseRequest request) {
         request.setId(UUID.randomUUID().toString());
         checkNameExist(request);
+
+        if(StringUtils.isNotEmpty(request.getEsbDataStruct())||StringUtils.isNotEmpty(request.getBackEsbDataStruct())){
+            request = esbApiParamService.handleEsbRequest(request);
+        }
+
         final ApiTestCaseWithBLOBs test = new ApiTestCaseWithBLOBs();
         test.setId(request.getId());
         test.setName(request.getName());
diff --git a/backend/src/main/java/io/metersphere/api/service/EsbApiParamService.java b/backend/src/main/java/io/metersphere/api/service/EsbApiParamService.java
new file mode 100644
index 0000000000..211f2cecbf
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/api/service/EsbApiParamService.java
@@ -0,0 +1,239 @@
+package io.metersphere.api.service;
+
+import com.alibaba.fastjson.JSONArray;
+import com.alibaba.fastjson.JSONObject;
+import io.metersphere.api.dto.automation.EsbDataStruct;
+import io.metersphere.api.dto.automation.parse.EsbDataParser;
+import io.metersphere.api.dto.definition.ApiDefinitionResult;
+import io.metersphere.api.dto.definition.ApiTestCaseResult;
+import io.metersphere.api.dto.definition.SaveApiDefinitionRequest;
+import io.metersphere.api.dto.definition.SaveApiTestCaseRequest;
+import io.metersphere.api.dto.definition.request.sampler.MsTCPSampler;
+import io.metersphere.api.dto.scenario.KeyValue;
+import io.metersphere.base.domain.EsbApiParamsExample;
+import io.metersphere.base.domain.EsbApiParamsWithBLOBs;
+import io.metersphere.base.mapper.EsbApiParamsMapper;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import javax.annotation.Resource;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.UUID;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+/**
+ * @author song.tianyang
+ * @Date 2021/3/16 4:57 下午
+ * @Description
+ */
+@Service
+@Transactional(rollbackFor = Exception.class)
+public class EsbApiParamService {
+    @Resource
+    private EsbApiParamsMapper esbApiParamsMapper;
+
+    public EsbApiParamsWithBLOBs createEsbApiParam(String resourceId, String esbDataStruct, String backedEsbDataStrcut, String backedScript) {
+        EsbApiParamsWithBLOBs model = null;
+
+        EsbApiParamsExample example = new EsbApiParamsExample();
+        example.createCriteria().andResourceIdEqualTo(resourceId);
+        List<EsbApiParamsWithBLOBs> list = esbApiParamsMapper.selectByExampleWithBLOBs(example);
+
+        if (list.isEmpty()) {
+            String uuid = UUID.randomUUID().toString();
+            model = new EsbApiParamsWithBLOBs();
+            model.setId(uuid);
+            model.setResourceId(resourceId);
+            model.setDataStruct(esbDataStruct);
+            model.setResponseDataStruct(backedEsbDataStrcut);
+            model.setBackedScript(backedScript);
+            esbApiParamsMapper.insert(model);
+        } else {
+            model = list.get(0);
+            model.setDataStruct(esbDataStruct);
+            model.setResponseDataStruct(backedEsbDataStrcut);
+            model.setBackedScript(backedScript);
+            esbApiParamsMapper.updateByPrimaryKeyWithBLOBs(model);
+        }
+        return model;
+    }
+
+    public List<KeyValue> genKeyValueByEsbDataStruct(List<EsbDataStruct> dataStructRequestList, String prefix) {
+        List<KeyValue> returnList = new ArrayList<>();
+        for (EsbDataStruct request : dataStructRequestList) {
+            String itemName = request.getName();
+            if (StringUtils.isNotEmpty(prefix)) {
+                itemName = prefix + "." + itemName;
+            }
+            KeyValue kv = new KeyValue();
+            kv.setName(itemName);
+            kv.setValue(request.getValue());
+            kv.setType(request.getType());
+            kv.setDescription(request.getDescription());
+            kv.setContentType(request.getContentType());
+            kv.setRequired(Boolean.parseBoolean(request.getRequired()));
+            returnList.add(kv);
+            if (request.getChildren() != null) {
+                List<KeyValue> childValueList = this.genKeyValueByEsbDataStruct(request.getChildren(), itemName);
+                if (!childValueList.isEmpty()) {
+                    returnList.addAll(childValueList);
+                }
+            }
+        }
+        return returnList;
+    }
+
+    public EsbApiParamsWithBLOBs getEsbParamBLOBsByResourceID(String resourceId) {
+        EsbApiParamsExample example = new EsbApiParamsExample();
+        example.createCriteria().andResourceIdEqualTo(resourceId);
+
+        String returnStr = null;
+        List<EsbApiParamsWithBLOBs> list = esbApiParamsMapper.selectByExampleWithBLOBs(example);
+        if (list.isEmpty()) {
+            return null;
+        } else {
+            return list.get(0);
+        }
+    }
+
+    public void deleteByResourceId(String resourceId) {
+        EsbApiParamsExample example = new EsbApiParamsExample();
+        example.createCriteria().andResourceIdEqualTo(resourceId);
+        esbApiParamsMapper.deleteByExample(example);
+    }
+
+    public void handleApiEsbParams(ApiDefinitionResult res) {
+        EsbApiParamsWithBLOBs esbParamBlobs = this.getEsbParamBLOBsByResourceID(res.getId());
+        if (esbParamBlobs == null) {
+            return;
+        }
+        try {
+            if (StringUtils.isNotEmpty(res.getRequest())) {
+                JSONObject jsonObj = JSONObject.parseObject(res.getRequest());
+
+                JSONArray esbDataArray = JSONArray.parseArray(esbParamBlobs.getDataStruct());
+                jsonObj.put("esbDataStruct", esbDataArray);
+
+                JSONArray responseDataArray = JSONArray.parseArray(esbParamBlobs.getResponseDataStruct());
+                jsonObj.put("backEsbDataStruct", responseDataArray);
+
+                JSONObject backedScriptObj = JSONObject.parseObject(esbParamBlobs.getBackedScript());
+                jsonObj.put("backScript", backedScriptObj);
+
+                jsonObj.put("esbFrontedScript", esbParamBlobs.getFrontedScript());
+
+                res.setRequest(jsonObj.toJSONString());
+            }
+        } catch (Exception e) {
+        }
+    }
+
+    public void handleApiEsbParams(ApiTestCaseResult res) {
+        EsbApiParamsWithBLOBs esbParamBlobs = this.getEsbParamBLOBsByResourceID(res.getId());
+        if (esbParamBlobs == null) {
+            return;
+        }
+        try {
+            if (StringUtils.isNotEmpty(res.getRequest())) {
+                JSONObject jsonObj = JSONObject.parseObject(res.getRequest());
+                JSONArray esbDataArray = JSONArray.parseArray(esbParamBlobs.getDataStruct());
+                jsonObj.put("esbDataStruct", esbDataArray);
+                jsonObj.put("esbFrontedScript", esbParamBlobs.getFrontedScript());
+
+                JSONArray responseDataArray = JSONArray.parseArray(esbParamBlobs.getResponseDataStruct());
+                jsonObj.put("backEsbDataStruct", responseDataArray);
+
+                res.setRequest(jsonObj.toJSONString());
+            }
+        } catch (Exception e) {
+        }
+    }
+
+    public SaveApiDefinitionRequest handleEsbRequest(SaveApiDefinitionRequest request) {
+        try {
+            //修改reqeust.parameters
+            //用户交互感受：ESB的发送数据以报文模板为主框架，同时前端不再有key-value的表格数据填充。
+            //业务逻辑：   发送ESB接口数据时，使用报文模板中的数据，同时报文模板中的${取值}目的是为了拼接数据结构(比如xml的子节点)
+            //代码实现:    此处打算解析前端传来的EsbDataStruct数据结构，将数据结构按照报文模板中的${取值}为最高优先级组装keyValue对象。这样Jmeter会自动拼装为合适的xml
+            if (StringUtils.isNotEmpty(request.getEsbDataStruct())) {
+                MsTCPSampler tcpSampler = (MsTCPSampler) request.getRequest();
+                List<KeyValue> keyValueList = this.genKeyValueListByDataStruct(tcpSampler, request.getEsbDataStruct());
+                tcpSampler.setParameters(keyValueList);
+            }
+
+            //更新EsbApiParams类
+            EsbApiParamsWithBLOBs esbApiParams = this.createEsbApiParam(request.getId(), request.getEsbDataStruct(), request.getBackEsbDataStruct(), request.getBackScript());
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return request;
+    }
+
+    //通过esb数据结构生成keyValue集合，以及发送参数
+    private List<KeyValue> genKeyValueListByDataStruct(MsTCPSampler tcpSampler, String esbDataStruct) {
+        List<KeyValue> keyValueList = new ArrayList<>();
+        String sendRequest = tcpSampler.getRequest();
+        String paramRegexStr = "\\$\\{([^}]*)\\}";
+        try {
+            if (StringUtils.isNotEmpty(sendRequest)) {
+                List<String> paramList = new ArrayList<>();
+                List<EsbDataStruct> dataStructRequestList = JSONArray.parseArray(esbDataStruct, EsbDataStruct.class);
+                Pattern regex = Pattern.compile(paramRegexStr);
+                Matcher matcher = regex.matcher(sendRequest);
+                while (matcher.find()) {
+                    paramList.add(matcher.group(1));
+                }
+                for (String param : paramList) {
+                    String value = this.genValueFromEsbDataStructByParam(dataStructRequestList, param);
+                    if (StringUtils.isNotEmpty(value)) {
+                        KeyValue kv = new KeyValue();
+                        kv.setName(param);
+                        kv.setValue(value);
+                        kv.setRequired(true);
+                        keyValueList.add(kv);
+                    }
+                }
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return keyValueList;
+    }
+
+    //通过报文模版中的变量参数，解析报文数据结构，生成对应的xml数据
+    private String genValueFromEsbDataStructByParam(List<EsbDataStruct> dataStructRequestList, String param) {
+        String returnValue = "";
+        if (StringUtils.isNotEmpty(param)) {
+            //多层结构使用"."来表示。aaa.bb.cc 代表的是dataStructRequestList中，aaa节点下，bb节点下的cc节点数据
+            String[] paramArr = param.split("\\.");
+            returnValue = EsbDataParser.esbData2XmlByParamStruct(dataStructRequestList, paramArr);
+        }
+
+        return returnValue;
+    }
+
+    public SaveApiTestCaseRequest handleEsbRequest(SaveApiTestCaseRequest request) {
+        try {
+            //修改reqeust.parameters, 将树结构类型数据转化为表格类型数据，供执行时参数的提取
+            if (StringUtils.isNotEmpty(request.getEsbDataStruct())) {
+                MsTCPSampler tcpSampler = (MsTCPSampler) request.getRequest();
+                List<KeyValue> keyValueList = this.genKeyValueListByDataStruct(tcpSampler, request.getEsbDataStruct());
+                tcpSampler.setParameters(keyValueList);
+            }
+            //更新EsbApiParams类
+            EsbApiParamsWithBLOBs esbApiParams = this.createEsbApiParam(request.getId(), request.getEsbDataStruct(), request.getBackEsbDataStruct(), request.getBackEsbDataStruct());
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return request;
+    }
+
+    public void deleteByResourceIdIn(List<String> apiIds) {
+        EsbApiParamsExample example = new EsbApiParamsExample();
+        example.createCriteria().andResourceIdIn(apiIds);
+        esbApiParamsMapper.deleteByExample(example);
+    }
+}
diff --git a/backend/src/main/java/io/metersphere/base/domain/EsbApiParams.java b/backend/src/main/java/io/metersphere/base/domain/EsbApiParams.java
new file mode 100644
index 0000000000..3fbcde4653
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/base/domain/EsbApiParams.java
@@ -0,0 +1,13 @@
+package io.metersphere.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+
+@Data
+public class EsbApiParams implements Serializable {
+    private String id;
+
+    private String resourceId;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/domain/EsbApiParamsExample.java b/backend/src/main/java/io/metersphere/base/domain/EsbApiParamsExample.java
new file mode 100644
index 0000000000..9e4d90ca9e
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/base/domain/EsbApiParamsExample.java
@@ -0,0 +1,340 @@
+package io.metersphere.base.domain;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class EsbApiParamsExample {
+    protected String orderByClause;
+
+    protected boolean distinct;
+
+    protected List<Criteria> oredCriteria;
+
+    public EsbApiParamsExample() {
+        oredCriteria = new ArrayList<Criteria>();
+    }
+
+    public void setOrderByClause(String orderByClause) {
+        this.orderByClause = orderByClause;
+    }
+
+    public String getOrderByClause() {
+        return orderByClause;
+    }
+
+    public void setDistinct(boolean distinct) {
+        this.distinct = distinct;
+    }
+
+    public boolean isDistinct() {
+        return distinct;
+    }
+
+    public List<Criteria> getOredCriteria() {
+        return oredCriteria;
+    }
+
+    public void or(Criteria criteria) {
+        oredCriteria.add(criteria);
+    }
+
+    public Criteria or() {
+        Criteria criteria = createCriteriaInternal();
+        oredCriteria.add(criteria);
+        return criteria;
+    }
+
+    public Criteria createCriteria() {
+        Criteria criteria = createCriteriaInternal();
+        if (oredCriteria.size() == 0) {
+            oredCriteria.add(criteria);
+        }
+        return criteria;
+    }
+
+    protected Criteria createCriteriaInternal() {
+        Criteria criteria = new Criteria();
+        return criteria;
+    }
+
+    public void clear() {
+        oredCriteria.clear();
+        orderByClause = null;
+        distinct = false;
+    }
+
+    protected abstract static class GeneratedCriteria {
+        protected List<Criterion> criteria;
+
+        protected GeneratedCriteria() {
+            super();
+            criteria = new ArrayList<Criterion>();
+        }
+
+        public boolean isValid() {
+            return criteria.size() > 0;
+        }
+
+        public List<Criterion> getAllCriteria() {
+            return criteria;
+        }
+
+        public List<Criterion> getCriteria() {
+            return criteria;
+        }
+
+        protected void addCriterion(String condition) {
+            if (condition == null) {
+                throw new RuntimeException("Value for condition cannot be null");
+            }
+            criteria.add(new Criterion(condition));
+        }
+
+        protected void addCriterion(String condition, Object value, String property) {
+            if (value == null) {
+                throw new RuntimeException("Value for " + property + " cannot be null");
+            }
+            criteria.add(new Criterion(condition, value));
+        }
+
+        protected void addCriterion(String condition, Object value1, Object value2, String property) {
+            if (value1 == null || value2 == null) {
+                throw new RuntimeException("Between values for " + property + " cannot be null");
+            }
+            criteria.add(new Criterion(condition, value1, value2));
+        }
+
+        public Criteria andIdIsNull() {
+            addCriterion("id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdIsNotNull() {
+            addCriterion("id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdEqualTo(String value) {
+            addCriterion("id =", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotEqualTo(String value) {
+            addCriterion("id <>", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdGreaterThan(String value) {
+            addCriterion("id >", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdGreaterThanOrEqualTo(String value) {
+            addCriterion("id >=", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdLessThan(String value) {
+            addCriterion("id <", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdLessThanOrEqualTo(String value) {
+            addCriterion("id <=", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdLike(String value) {
+            addCriterion("id like", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotLike(String value) {
+            addCriterion("id not like", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdIn(List<String> values) {
+            addCriterion("id in", values, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotIn(List<String> values) {
+            addCriterion("id not in", values, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdBetween(String value1, String value2) {
+            addCriterion("id between", value1, value2, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotBetween(String value1, String value2) {
+            addCriterion("id not between", value1, value2, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdIsNull() {
+            addCriterion("resource_id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdIsNotNull() {
+            addCriterion("resource_id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdEqualTo(String value) {
+            addCriterion("resource_id =", value, "resourceId");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdNotEqualTo(String value) {
+            addCriterion("resource_id <>", value, "resourceId");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdGreaterThan(String value) {
+            addCriterion("resource_id >", value, "resourceId");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdGreaterThanOrEqualTo(String value) {
+            addCriterion("resource_id >=", value, "resourceId");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdLessThan(String value) {
+            addCriterion("resource_id <", value, "resourceId");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdLessThanOrEqualTo(String value) {
+            addCriterion("resource_id <=", value, "resourceId");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdLike(String value) {
+            addCriterion("resource_id like", value, "resourceId");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdNotLike(String value) {
+            addCriterion("resource_id not like", value, "resourceId");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdIn(List<String> values) {
+            addCriterion("resource_id in", values, "resourceId");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdNotIn(List<String> values) {
+            addCriterion("resource_id not in", values, "resourceId");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdBetween(String value1, String value2) {
+            addCriterion("resource_id between", value1, value2, "resourceId");
+            return (Criteria) this;
+        }
+
+        public Criteria andResourceIdNotBetween(String value1, String value2) {
+            addCriterion("resource_id not between", value1, value2, "resourceId");
+            return (Criteria) this;
+        }
+    }
+
+    public static class Criteria extends GeneratedCriteria {
+
+        protected Criteria() {
+            super();
+        }
+    }
+
+    public static class Criterion {
+        private String condition;
+
+        private Object value;
+
+        private Object secondValue;
+
+        private boolean noValue;
+
+        private boolean singleValue;
+
+        private boolean betweenValue;
+
+        private boolean listValue;
+
+        private String typeHandler;
+
+        public String getCondition() {
+            return condition;
+        }
+
+        public Object getValue() {
+            return value;
+        }
+
+        public Object getSecondValue() {
+            return secondValue;
+        }
+
+        public boolean isNoValue() {
+            return noValue;
+        }
+
+        public boolean isSingleValue() {
+            return singleValue;
+        }
+
+        public boolean isBetweenValue() {
+            return betweenValue;
+        }
+
+        public boolean isListValue() {
+            return listValue;
+        }
+
+        public String getTypeHandler() {
+            return typeHandler;
+        }
+
+        protected Criterion(String condition) {
+            super();
+            this.condition = condition;
+            this.typeHandler = null;
+            this.noValue = true;
+        }
+
+        protected Criterion(String condition, Object value, String typeHandler) {
+            super();
+            this.condition = condition;
+            this.value = value;
+            this.typeHandler = typeHandler;
+            if (value instanceof List<?>) {
+                this.listValue = true;
+            } else {
+                this.singleValue = true;
+            }
+        }
+
+        protected Criterion(String condition, Object value) {
+            this(condition, value, null);
+        }
+
+        protected Criterion(String condition, Object value, Object secondValue, String typeHandler) {
+            super();
+            this.condition = condition;
+            this.value = value;
+            this.secondValue = secondValue;
+            this.typeHandler = typeHandler;
+            this.betweenValue = true;
+        }
+
+        protected Criterion(String condition, Object value, Object secondValue) {
+            this(condition, value, secondValue, null);
+        }
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/domain/EsbApiParamsWithBLOBs.java b/backend/src/main/java/io/metersphere/base/domain/EsbApiParamsWithBLOBs.java
new file mode 100644
index 0000000000..6d781b627a
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/base/domain/EsbApiParamsWithBLOBs.java
@@ -0,0 +1,21 @@
+package io.metersphere.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.ToString;
+
+@Data
+@EqualsAndHashCode(callSuper = true)
+@ToString(callSuper = true)
+public class EsbApiParamsWithBLOBs extends EsbApiParams implements Serializable {
+    private String dataStruct;
+
+    private String frontedScript;
+
+    private String responseDataStruct;
+
+    private String backedScript;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/EsbApiParamsMapper.java b/backend/src/main/java/io/metersphere/base/mapper/EsbApiParamsMapper.java
new file mode 100644
index 0000000000..627acf3c6d
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/base/mapper/EsbApiParamsMapper.java
@@ -0,0 +1,37 @@
+package io.metersphere.base.mapper;
+
+import io.metersphere.base.domain.EsbApiParams;
+import io.metersphere.base.domain.EsbApiParamsExample;
+import io.metersphere.base.domain.EsbApiParamsWithBLOBs;
+import java.util.List;
+import org.apache.ibatis.annotations.Param;
+
+public interface EsbApiParamsMapper {
+    long countByExample(EsbApiParamsExample example);
+
+    int deleteByExample(EsbApiParamsExample example);
+
+    int deleteByPrimaryKey(String id);
+
+    int insert(EsbApiParamsWithBLOBs record);
+
+    int insertSelective(EsbApiParamsWithBLOBs record);
+
+    List<EsbApiParamsWithBLOBs> selectByExampleWithBLOBs(EsbApiParamsExample example);
+
+    List<EsbApiParams> selectByExample(EsbApiParamsExample example);
+
+    EsbApiParamsWithBLOBs selectByPrimaryKey(String id);
+
+    int updateByExampleSelective(@Param("record") EsbApiParamsWithBLOBs record, @Param("example") EsbApiParamsExample example);
+
+    int updateByExampleWithBLOBs(@Param("record") EsbApiParamsWithBLOBs record, @Param("example") EsbApiParamsExample example);
+
+    int updateByExample(@Param("record") EsbApiParams record, @Param("example") EsbApiParamsExample example);
+
+    int updateByPrimaryKeySelective(EsbApiParamsWithBLOBs record);
+
+    int updateByPrimaryKeyWithBLOBs(EsbApiParamsWithBLOBs record);
+
+    int updateByPrimaryKey(EsbApiParams record);
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/EsbApiParamsMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/EsbApiParamsMapper.xml
new file mode 100644
index 0000000000..d05fa60626
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/base/mapper/EsbApiParamsMapper.xml
@@ -0,0 +1,264 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.metersphere.base.mapper.EsbApiParamsMapper">
+  <resultMap id="BaseResultMap" type="io.metersphere.base.domain.EsbApiParams">
+    <id column="id" jdbcType="VARCHAR" property="id" />
+    <result column="resource_id" jdbcType="VARCHAR" property="resourceId" />
+  </resultMap>
+  <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.metersphere.base.domain.EsbApiParamsWithBLOBs">
+    <result column="data_struct" jdbcType="LONGVARCHAR" property="dataStruct" />
+    <result column="fronted_script" jdbcType="LONGVARCHAR" property="frontedScript" />
+    <result column="response_data_struct" jdbcType="LONGVARCHAR" property="responseDataStruct" />
+    <result column="backed_script" jdbcType="LONGVARCHAR" property="backedScript" />
+  </resultMap>
+  <sql id="Example_Where_Clause">
+    <where>
+      <foreach collection="oredCriteria" item="criteria" separator="or">
+        <if test="criteria.valid">
+          <trim prefix="(" prefixOverrides="and" suffix=")">
+            <foreach collection="criteria.criteria" item="criterion">
+              <choose>
+                <when test="criterion.noValue">
+                  and ${criterion.condition}
+                </when>
+                <when test="criterion.singleValue">
+                  and ${criterion.condition} #{criterion.value}
+                </when>
+                <when test="criterion.betweenValue">
+                  and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
+                </when>
+                <when test="criterion.listValue">
+                  and ${criterion.condition}
+                  <foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
+                    #{listItem}
+                  </foreach>
+                </when>
+              </choose>
+            </foreach>
+          </trim>
+        </if>
+      </foreach>
+    </where>
+  </sql>
+  <sql id="Update_By_Example_Where_Clause">
+    <where>
+      <foreach collection="example.oredCriteria" item="criteria" separator="or">
+        <if test="criteria.valid">
+          <trim prefix="(" prefixOverrides="and" suffix=")">
+            <foreach collection="criteria.criteria" item="criterion">
+              <choose>
+                <when test="criterion.noValue">
+                  and ${criterion.condition}
+                </when>
+                <when test="criterion.singleValue">
+                  and ${criterion.condition} #{criterion.value}
+                </when>
+                <when test="criterion.betweenValue">
+                  and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
+                </when>
+                <when test="criterion.listValue">
+                  and ${criterion.condition}
+                  <foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
+                    #{listItem}
+                  </foreach>
+                </when>
+              </choose>
+            </foreach>
+          </trim>
+        </if>
+      </foreach>
+    </where>
+  </sql>
+  <sql id="Base_Column_List">
+    id, resource_id
+  </sql>
+  <sql id="Blob_Column_List">
+    data_struct, fronted_script, response_data_struct, backed_script
+  </sql>
+  <select id="selectByExampleWithBLOBs" parameterType="io.metersphere.base.domain.EsbApiParamsExample" resultMap="ResultMapWithBLOBs">
+    select
+    <if test="distinct">
+      distinct
+    </if>
+    <include refid="Base_Column_List" />
+    ,
+    <include refid="Blob_Column_List" />
+    from esb_api_params
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+    <if test="orderByClause != null">
+      order by ${orderByClause}
+    </if>
+  </select>
+  <select id="selectByExample" parameterType="io.metersphere.base.domain.EsbApiParamsExample" resultMap="BaseResultMap">
+    select
+    <if test="distinct">
+      distinct
+    </if>
+    <include refid="Base_Column_List" />
+    from esb_api_params
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+    <if test="orderByClause != null">
+      order by ${orderByClause}
+    </if>
+  </select>
+  <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="ResultMapWithBLOBs">
+    select 
+    <include refid="Base_Column_List" />
+    ,
+    <include refid="Blob_Column_List" />
+    from esb_api_params
+    where id = #{id,jdbcType=VARCHAR}
+  </select>
+  <delete id="deleteByPrimaryKey" parameterType="java.lang.String">
+    delete from esb_api_params
+    where id = #{id,jdbcType=VARCHAR}
+  </delete>
+  <delete id="deleteByExample" parameterType="io.metersphere.base.domain.EsbApiParamsExample">
+    delete from esb_api_params
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+  </delete>
+  <insert id="insert" parameterType="io.metersphere.base.domain.EsbApiParamsWithBLOBs">
+    insert into esb_api_params (id, resource_id, data_struct, 
+      fronted_script, response_data_struct, 
+      backed_script)
+    values (#{id,jdbcType=VARCHAR}, #{resourceId,jdbcType=VARCHAR}, #{dataStruct,jdbcType=LONGVARCHAR}, 
+      #{frontedScript,jdbcType=LONGVARCHAR}, #{responseDataStruct,jdbcType=LONGVARCHAR}, 
+      #{backedScript,jdbcType=LONGVARCHAR})
+  </insert>
+  <insert id="insertSelective" parameterType="io.metersphere.base.domain.EsbApiParamsWithBLOBs">
+    insert into esb_api_params
+    <trim prefix="(" suffix=")" suffixOverrides=",">
+      <if test="id != null">
+        id,
+      </if>
+      <if test="resourceId != null">
+        resource_id,
+      </if>
+      <if test="dataStruct != null">
+        data_struct,
+      </if>
+      <if test="frontedScript != null">
+        fronted_script,
+      </if>
+      <if test="responseDataStruct != null">
+        response_data_struct,
+      </if>
+      <if test="backedScript != null">
+        backed_script,
+      </if>
+    </trim>
+    <trim prefix="values (" suffix=")" suffixOverrides=",">
+      <if test="id != null">
+        #{id,jdbcType=VARCHAR},
+      </if>
+      <if test="resourceId != null">
+        #{resourceId,jdbcType=VARCHAR},
+      </if>
+      <if test="dataStruct != null">
+        #{dataStruct,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="frontedScript != null">
+        #{frontedScript,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="responseDataStruct != null">
+        #{responseDataStruct,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="backedScript != null">
+        #{backedScript,jdbcType=LONGVARCHAR},
+      </if>
+    </trim>
+  </insert>
+  <select id="countByExample" parameterType="io.metersphere.base.domain.EsbApiParamsExample" resultType="java.lang.Long">
+    select count(*) from esb_api_params
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+  </select>
+  <update id="updateByExampleSelective" parameterType="map">
+    update esb_api_params
+    <set>
+      <if test="record.id != null">
+        id = #{record.id,jdbcType=VARCHAR},
+      </if>
+      <if test="record.resourceId != null">
+        resource_id = #{record.resourceId,jdbcType=VARCHAR},
+      </if>
+      <if test="record.dataStruct != null">
+        data_struct = #{record.dataStruct,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.frontedScript != null">
+        fronted_script = #{record.frontedScript,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.responseDataStruct != null">
+        response_data_struct = #{record.responseDataStruct,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.backedScript != null">
+        backed_script = #{record.backedScript,jdbcType=LONGVARCHAR},
+      </if>
+    </set>
+    <if test="_parameter != null">
+      <include refid="Update_By_Example_Where_Clause" />
+    </if>
+  </update>
+  <update id="updateByExampleWithBLOBs" parameterType="map">
+    update esb_api_params
+    set id = #{record.id,jdbcType=VARCHAR},
+      resource_id = #{record.resourceId,jdbcType=VARCHAR},
+      data_struct = #{record.dataStruct,jdbcType=LONGVARCHAR},
+      fronted_script = #{record.frontedScript,jdbcType=LONGVARCHAR},
+      response_data_struct = #{record.responseDataStruct,jdbcType=LONGVARCHAR},
+      backed_script = #{record.backedScript,jdbcType=LONGVARCHAR}
+    <if test="_parameter != null">
+      <include refid="Update_By_Example_Where_Clause" />
+    </if>
+  </update>
+  <update id="updateByExample" parameterType="map">
+    update esb_api_params
+    set id = #{record.id,jdbcType=VARCHAR},
+      resource_id = #{record.resourceId,jdbcType=VARCHAR}
+    <if test="_parameter != null">
+      <include refid="Update_By_Example_Where_Clause" />
+    </if>
+  </update>
+  <update id="updateByPrimaryKeySelective" parameterType="io.metersphere.base.domain.EsbApiParamsWithBLOBs">
+    update esb_api_params
+    <set>
+      <if test="resourceId != null">
+        resource_id = #{resourceId,jdbcType=VARCHAR},
+      </if>
+      <if test="dataStruct != null">
+        data_struct = #{dataStruct,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="frontedScript != null">
+        fronted_script = #{frontedScript,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="responseDataStruct != null">
+        response_data_struct = #{responseDataStruct,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="backedScript != null">
+        backed_script = #{backedScript,jdbcType=LONGVARCHAR},
+      </if>
+    </set>
+    where id = #{id,jdbcType=VARCHAR}
+  </update>
+  <update id="updateByPrimaryKeyWithBLOBs" parameterType="io.metersphere.base.domain.EsbApiParamsWithBLOBs">
+    update esb_api_params
+    set resource_id = #{resourceId,jdbcType=VARCHAR},
+      data_struct = #{dataStruct,jdbcType=LONGVARCHAR},
+      fronted_script = #{frontedScript,jdbcType=LONGVARCHAR},
+      response_data_struct = #{responseDataStruct,jdbcType=LONGVARCHAR},
+      backed_script = #{backedScript,jdbcType=LONGVARCHAR}
+    where id = #{id,jdbcType=VARCHAR}
+  </update>
+  <update id="updateByPrimaryKey" parameterType="io.metersphere.base.domain.EsbApiParams">
+    update esb_api_params
+    set resource_id = #{resourceId,jdbcType=VARCHAR}
+    where id = #{id,jdbcType=VARCHAR}
+  </update>
+</mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/commons/utils/ShiroUtils.java b/backend/src/main/java/io/metersphere/commons/utils/ShiroUtils.java
index 5483e08edd..5a6f0e035f 100644
--- a/backend/src/main/java/io/metersphere/commons/utils/ShiroUtils.java
+++ b/backend/src/main/java/io/metersphere/commons/utils/ShiroUtils.java
@@ -42,7 +42,7 @@ public class ShiroUtils {
 
         //api-对外文档页面提供的查询接口
         filterChainDefinitionMap.put("/api/document/**", "anon");
-//        filterChainDefinitionMap.put("/document/**", "anon");
+        filterChainDefinitionMap.put("/document/**", "anon");
         filterChainDefinitionMap.put("/system/theme", "anon");
 
     }
diff --git a/backend/src/main/java/io/metersphere/security/ApiKeyFilter.java b/backend/src/main/java/io/metersphere/security/ApiKeyFilter.java
index 6ac904e70b..bf1d3b8652 100644
--- a/backend/src/main/java/io/metersphere/security/ApiKeyFilter.java
+++ b/backend/src/main/java/io/metersphere/security/ApiKeyFilter.java
@@ -8,7 +8,6 @@ import org.apache.shiro.web.util.WebUtils;
 
 import javax.servlet.ServletRequest;
 import javax.servlet.ServletResponse;
-import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 
 public class ApiKeyFilter extends AnonymousFilter {
@@ -16,15 +15,6 @@ public class ApiKeyFilter extends AnonymousFilter {
     @Override
     protected boolean onPreHandle(ServletRequest request, ServletResponse response, Object mappedValue) {
         try {
-//            try{
-//                //这部分代码是为了测试打包完成之后能否访问文档相关路径，封版之前要删除
-//                HttpServletRequest httpServlet = WebUtils.toHttp(request);
-//                String url = httpServlet.getRequestURL().toString();
-//                LogUtil.info("Url message : "+url);
-//            }catch (Exception e){
-//
-//            }
-
             if (!SecurityUtils.getSubject().isAuthenticated()) {
                 String userId = ApiKeyHandler.getUser(WebUtils.toHttp(request));
                 if (StringUtils.isNotBlank(userId)) {
diff --git a/backend/src/main/resources/db/migration/V78__v1.8_release.sql b/backend/src/main/resources/db/migration/V78__v1.8_release.sql
index 9d4ff537cf..56dea7662a 100644
--- a/backend/src/main/resources/db/migration/V78__v1.8_release.sql
+++ b/backend/src/main/resources/db/migration/V78__v1.8_release.sql
@@ -159,6 +159,19 @@ UPDATE file_metadata JOIN (SELECT file_id, project_id
                            FROM api_test_file
                                     JOIN api_test ON test_id = api_test.id) temp ON file_id = file_metadata.id
 SET file_metadata.project_id = temp.project_id;
+
+CREATE TABLE IF NOT EXISTS `esb_api_params`
+(
+    id      varchar(50)   not null,
+    resource_id      varchar(50),
+    data_struct  LONGTEXT  null,
+    fronted_script   LONGTEXT null,
+    response_data_struct LONGTEXT null,
+    backed_script LONGTEXT null,
+    primary key (id),
+    UNIQUE KEY `resource_id` ( `resource_id` )
+) ENGINE = InnoDB
+  DEFAULT CHARSET = utf8mb4;
 -- add execution_times testPlan
 alter table test_plan
     add execution_times int null;
\ No newline at end of file
diff --git a/frontend/src/business/components/api/automation/ApiAutomation.vue b/frontend/src/business/components/api/automation/ApiAutomation.vue
index 1422ba243e..d6e72ddfd4 100644
--- a/frontend/src/business/components/api/automation/ApiAutomation.vue
+++ b/frontend/src/business/components/api/automation/ApiAutomation.vue
@@ -125,7 +125,7 @@
       '$route'(to, from) {  //  路由改变时，把接口定义界面中的 ctrl s 保存快捷键监听移除
         if (to.path.indexOf('/api/automation') == -1) {
           if (this.$refs && this.$refs.autoScenarioConfig) {
-            console.log(this.$refs.autoScenarioConfig);
+            // console.log(this.$refs.autoScenarioConfig);
             this.$refs.autoScenarioConfig.forEach(item => {
               item.removeListener();
             });
diff --git a/frontend/src/business/components/api/automation/scenario/common/Jsr233ProcessorContent.vue b/frontend/src/business/components/api/automation/scenario/common/Jsr233ProcessorContent.vue
index 0fdeff80af..71896ec99f 100644
--- a/frontend/src/business/components/api/automation/scenario/common/Jsr233ProcessorContent.vue
+++ b/frontend/src/business/components/api/automation/scenario/common/Jsr233ProcessorContent.vue
@@ -50,6 +50,16 @@
               title: this.$t('api_test.request.processor.code_template_get_global_variable'),
               value: 'props.get("variable_name")',
             },
+            {
+              title: this.$t('api_test.request.processor.code_add_report_length'),
+              value: 'String report = ctx.getCurrentSampler().getRequestData();\n' +
+                'if(report!=null){\n' +
+                '    //补足8位长度，前置补0\n' +
+                '    String reportlengthStr = String.format("%08d",report.length());\n' +
+                '    report = reportlengthStr+report;\n' +
+                '    ctx.getCurrentSampler().setRequestData(report);\n' +
+                '}',
+            },
             {
               title: this.$t('api_test.request.processor.code_template_set_global_variable'),
               value: 'props.put("variable_name", "variable_value")',
@@ -68,6 +78,20 @@
               title: this.$t('api_test.request.processor.code_template_get_response_result'),
               value: 'prev.getResponseDataAsString()',
               disabled: this.isPreProcessor
+            },
+            {
+              title: this.$t('api_test.request.processor.code_hide_report_length'),
+              value: '//Get response data\n' +
+                'String returnData = prev.getResponseDataAsString();\n' +
+                'if(returnData!=null&&returnData.length()>8){\n' +
+                '//remove 8 report length \n' +
+                '    String subStringData = returnData.substring(8,returnData.length());\n' +
+                '    if(subStringData.startsWith("<")){\n' +
+                '        returnData = subStringData;\n' +
+                '        prev.setResponseData(returnData);\n' +
+                '    }\n' +
+                '}',
+              disabled: this.isPreProcessor
             }
           ],
           isCodeEditAlive: true,
diff --git a/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue b/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
index af20e63c9b..5fe106ee77 100644
--- a/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
+++ b/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
@@ -87,13 +87,19 @@
       <div v-if="apiCase.active||type==='detail'">
         <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
         <ms-api-request-form :isShowEnable="true" :showScript="true" :is-read-only="isReadOnly" :headers="apiCase.request.headers " :request="apiCase.request" v-if="api.protocol==='HTTP'"/>
-        <ms-tcp-basis-parameters :showScript="true" :request="apiCase.request" v-if="api.protocol==='TCP'"/>
+        <ms-tcp-basis-parameters :showScript="true" :request="apiCase.request" v-if="api.method==='TCP' && apiCase.request.esbDataStruct == null"/>
+        <esb-definition v-xpack :request="apiCase.request" :showScript="true" v-if="showXpackCompnent&&api.method==='ESB'" ref="esbDefinition"/>
         <ms-sql-basis-parameters :showScript="true" :request="apiCase.request" v-if="api.protocol==='SQL'"/>
         <ms-dubbo-basis-parameters :showScript="true" :request="apiCase.request" v-if="api.protocol==='DUBBO'"/>
 
         <!-- HTTP 请求返回数据 -->
         <p class="tip">{{$t('api_test.definition.request.res_param')}}</p>
-        <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>
+        <div v-if="showXpackCompnent&&api.method==='ESB'">
+          <esb-definition-response :currentProtocol="apiCase.request.protocol" :request="apiCase.request" :is-api-component="false" :show-options-button="false" :show-header="true" :api-item="apiCase"/>
+        </div>
+        <div v-else>
+          <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>
+        </div>
 
         <ms-jmx-step :request="apiCase.request" :response="apiCase.responseData"/>
         <!-- 保存操作 -->
@@ -123,6 +129,9 @@
   import MsJmxStep from "../step/JmxStep";
   import ApiResponseComponent from "../../../automation/scenario/component/ApiResponseComponent";
   import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
+  const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
+  const esbDefinition = (requireComponent!=null&&requireComponent.keys().length) > 0 ? requireComponent("./apiDefinition/EsbDefinition.vue") : {};
+  const esbDefinitionResponse = (requireComponent!=null&&requireComponent.keys().length) > 0 ? requireComponent("./apiDefinition/EsbDefinitionResponse.vue") : {};
 
   export default {
     name: "ApiCaseItem",
@@ -140,12 +149,15 @@
       MsApiExtendBtns,
       MsRequestResultTail,
       MsJmxStep,
-      ShowMoreBtn
+      ShowMoreBtn,
+      "esbDefinition": esbDefinition.default,
+      "esbDefinitionResponse": esbDefinitionResponse.default
     },
     data() {
       return {
         result: {},
         grades: [],
+        showXpackCompnent:false,
         isReadOnly: false,
         selectedEvent: Object,
         priorities: PRIORITY,
@@ -185,6 +197,11 @@
       type: String,
       isCaseEdit: Boolean,
     },
+    created() {
+      if (requireComponent != null && JSON.stringify(esbDefinition) != '{}'&& JSON.stringify(esbDefinitionResponse) != '{}') {
+        this.showXpackCompnent = true;
+      }
+    },
     watch: {},
     methods: {
       handleRunBatch() {
@@ -297,6 +314,14 @@
             tmp.request.method = this.api.method;
           }
         }
+
+        if(tmp.request.esbDataStruct != null){
+          tmp.esbDataStruct = JSON.stringify(tmp.request.esbDataStruct);
+        }
+        if(tmp.request.backEsbDataStruct != null){
+          tmp.backEsbDataStruct = JSON.stringify(tmp.request.backEsbDataStruct);
+        }
+
         if (tmp.tags instanceof Array) {
           tmp.tags = JSON.stringify(tmp.tags);
         }
diff --git a/frontend/src/business/components/api/definition/components/case/ApiCaseList.vue b/frontend/src/business/components/api/definition/components/case/ApiCaseList.vue
index be73f0e974..9d70e77bd7 100644
--- a/frontend/src/business/components/api/definition/components/case/ApiCaseList.vue
+++ b/frontend/src/business/components/api/definition/components/case/ApiCaseList.vue
@@ -260,6 +260,9 @@
           if (!request.hashTree) {
             request.hashTree = [];
           }
+          if(request.backScript != null){
+            request.hashTree.push(request.backScript);
+          }
           let uuid = getUUID();
           let obj = {apiDefinitionId: this.api.id, name: '', priority: 'P0', active: true, tags: [], uuid: uuid};
           obj.request = request;
diff --git a/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue b/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
index 682ea8817c..c2590a3911 100644
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
@@ -15,26 +15,39 @@
     <br/>
     <el-row>
       <el-col>
-        <ms-basis-api @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm"
-                      @callback="callback"/>
+        <ms-tcp-basic-api :method-types="methodTypes" @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm"
+          @changeApiProtocol="changeApiProtocol" @callback="callback"/>
       </el-col>
     </el-row>
-
     <!-- 请求参数 -->
-    <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-    <ms-basis-parameters :show-script="false" :request="request"/>
+    <div v-if="apiProtocol=='TCP'">
+      <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+      <ms-basis-parameters :show-script="false" :request="request"/>
+    </div>
+    <div v-else-if="apiProtocol=='ESB'">
+      <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+      <esb-definition v-xpack v-if="showXpackCompnent" :show-script="false" :request="request" ref="esbDefinition"/>
+      <p class="tip">{{$t('api_test.definition.request.res_param')}}</p>
+      <esb-definition-response :is-api-component="true" :show-options-button="true" :request="request" />
+<!--      <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
+    </div>
+
 
   </div>
 
 </template>
 
 <script>
-import MsBasisApi from "./BasisApi";
+import MsTcpBasicApi from "./TCPBasicApi";
 import MsBasisParameters from "../request/tcp/TcpBasisParameters";
-
+const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
+const esbDefinition = (requireComponent!=null&&requireComponent.keys().length) > 0 ? requireComponent("./apiDefinition/EsbDefinition.vue") : {};
+const esbDefinitionResponse = (requireComponent!=null&&requireComponent.keys().length) > 0 ? requireComponent("./apiDefinition/EsbDefinitionResponse.vue") : {};
 export default {
   name: "MsAddCompleteTcpApi",
-  components: {MsBasisApi, MsBasisParameters},
+  components: {MsTcpBasicApi, MsBasisParameters,
+    "esbDefinition": esbDefinition.default,
+    "esbDefinitionResponse": esbDefinitionResponse.default},
   props: {
     request: {},
     basisData: {},
@@ -48,6 +61,24 @@ export default {
   data() {
     return {
       validated: false,
+      apiProtocol: "TCP",
+      methodTypes:["TCP"],
+      showXpackCompnent:false,
+    }
+  },
+  created: function () {
+    if(this.basisData.method != 'TCP'&& this.basisData.method != 'ESB'){
+      this.basisData.method = this.basisData.protocol;
+    }
+    this.apiProtocol = this.basisData.method;
+    if(this.apiProtocol == null || this.apiProtocol == "" ){
+      this.apiProtocol = "TCP";
+    }
+    if (requireComponent != null && JSON.stringify(esbDefinition) != '{}'&& JSON.stringify(esbDefinitionResponse) != '{}') {
+      this.showXpackCompnent = true;
+      if(this.methodTypes.length == 1){
+        this.methodTypes.push("ESB");
+      }
     }
   },
   watch: {
@@ -68,7 +99,7 @@ export default {
           }
         });
       }
-    }
+    },
   },
   methods: {
     callback() {
@@ -76,7 +107,7 @@ export default {
     },
     validateApi() {
       this.validated = false;
-      this.basisData.method = "TCP";
+      this.basisData.method = this.apiProtocol;
       this.$refs['basicForm'].validate();
     },
     saveApi() {
@@ -84,6 +115,24 @@ export default {
       if (this.validated) {
         if (this.basisData.tags instanceof Array) {
           this.basisData.tags = JSON.stringify(this.basisData.tags);
+        }
+        if(this.basisData.method == 'ESB'){
+          let validataResult = this.$refs.esbDefinition.validateEsbDataStruct(this.request.esbDataStruct);
+          if(!validataResult){
+            return;
+          }
+          if(this.request.esbDataStruct != null){
+            this.esbDataStruct = JSON.stringify(this.request.esbDataStruct);
+            this.basisData.esbDataStruct = this.esbDataStruct;
+          }
+          if(this.request.backEsbDataStruct != null){
+            this.basisData.backEsbDataStruct = JSON.stringify(this.request.backEsbDataStruct);
+          }
+          if(this.request.backScript != null){
+            this.basisData.backScript = JSON.stringify(this.request.backScript);
+          }
+
+
         }
         this.$emit('saveApi', this.basisData);
       }
@@ -101,6 +150,9 @@ export default {
     createRootModelInTree() {
       this.$emit("createRootModelInTree");
     },
+    changeApiProtocol(protocol){
+      this.apiProtocol = protocol;
+    }
   },
 }
 </script>
diff --git a/frontend/src/business/components/api/definition/components/complete/TCPBasicApi.vue b/frontend/src/business/components/api/definition/components/complete/TCPBasicApi.vue
new file mode 100644
index 0000000000..a2e6c12956
--- /dev/null
+++ b/frontend/src/business/components/api/definition/components/complete/TCPBasicApi.vue
@@ -0,0 +1,156 @@
+<template>
+  <div v-loading="loading">
+    <el-form :model="basicForm" label-position="right" label-width="80px" size="small" :rules="rule" ref="basicForm" style="margin-right: 20px">
+      <!-- 基础信息 -->
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('commons.name')" prop="name">
+<!--            <el-input class="ms-http-input" size="small" v-model="basicForm.name"/>-->
+            <el-input v-model="basicForm.name" class="ms-http-input" size="small">
+              <el-select v-model="basicForm.method" slot="prepend" style="width: 100px" size="small" @change="methodChange">
+                <el-option v-for="item in methodTypes" :key="item" :label="item" :value="item"/>
+              </el-select>
+            </el-input>
+
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('test_track.module.module')" prop="moduleId">
+            <el-select class="ms-http-input" size="small" v-model="basicForm.moduleId" style="width: 100%" @change="reload">
+              <div v-if="moduleOptions.length>0">
+                <el-option v-for="item in moduleOptions" :key="item.id" :label="item.path" :value="item.id"/>
+              </div>
+              <div v-else>
+                <el-option :key="0" :value="''">
+                  <div style="margin-left: 40px">
+                        <span style="font-size: 14px;color: #606266;font-weight: 48.93">{{ $t('api_test.definition.select_comp.no_data') }},
+                        </span>
+                    <el-link type="primary" @click="createModules">{{ $t('api_test.definition.select_comp.add_data') }}</el-link>
+                  </div>
+                </el-option>
+              </div>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('commons.status')" prop="status">
+            <el-select class="ms-http-input" size="small" v-model="basicForm.status" style="width: 100%">
+              <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
+            <el-select v-model="basicForm.userId"
+                       :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
+                       class="ms-http-input" style="width: 100%">
+              <el-option
+                v-for="item in maintainerOptions"
+                :key="item.id"
+                :label="item.id + ' (' + item.name + ')'"
+                :value="item.id">
+              </el-option>
+            </el-select>
+
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('commons.tag')" prop="tag">
+            <ms-input-tag :currentScenario="basicForm" ref="tag"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('commons.description')" prop="description">
+            <el-input class="ms-http-textarea"
+                      v-model="basicForm.description"
+                      type="textarea"
+                      :autosize="{ minRows: 2, maxRows: 10}"
+                      :rows="2" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import {API_STATUS} from "../../model/JsonData";
+import {WORKSPACE_ID} from '../../../../../../common/js/constants';
+import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
+
+export default {
+  name: "MsTcpBasicApi",
+  components: {MsInputTag},
+  props: {
+    currentProtocol: {
+      type: String,
+      default: "HTTP"
+    },
+    moduleOptions: Array,
+    methodTypes: Array,
+    basisData: {},
+  },
+  created() {
+    this.getMaintainerOptions();
+    this.basicForm = this.basisData;
+    if(this.basicForm.protocol == null){
+      this.basicForm.protocol = "TCP";
+    }
+  },
+  data() {
+    return {
+      basicForm: {},
+      httpVisible: false,
+      currentModule: {},
+      maintainerOptions: [],
+      loading: false,
+      rule: {
+        name: [
+          {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
+          {max: 50, message: this.$t('test_track.length_less_than') + '50', trigger: 'blur'}
+        ],
+        userId: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
+        moduleId: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
+        status: [{required: true, message: this.$t('commons.please_select'), trigger: 'change'}],
+      },
+      value: API_STATUS[0].id,
+      options: API_STATUS,
+    }
+  },
+  methods: {
+    getMaintainerOptions() {
+      let workspaceId = localStorage.getItem(WORKSPACE_ID);
+      this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
+        this.maintainerOptions = response.data;
+      });
+    },
+    reload() {
+      this.loading = true
+      this.$nextTick(() => {
+        this.loading = false
+      })
+    },
+    validate() {
+      this.$refs['basicForm'].validate((valid) => {
+        if (valid) {
+          this.$emit('callback');
+        }
+      })
+    },
+    createModules() {
+      this.$emit("createRootModelInTree");
+    },
+    methodChange() {
+      this.$emit("changeApiProtocol",this.basicForm.method);
+    },
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/frontend/src/business/components/api/definition/components/document/Anchor.vue b/frontend/src/business/components/api/definition/components/document/Anchor.vue
deleted file mode 100644
index b484fc0272..0000000000
--- a/frontend/src/business/components/api/definition/components/document/Anchor.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <div class="container">
-    <div class="wrapper">
-      <div class="section" style="width:80%;margin-left: 8px" v-for="(item, index) in list" :key="index">
-        <div class="border" style="width:100%;height:200px;font-size:30px;text-align:center;color:black;">
-          <el-divider><i class="el-icon-mobile-phone">111</i></el-divider>
-          {{item.name}}
-        </div>
-      </div>
-    </div>
-    <div id="nac" style="height:500px;"></div>
-    <nav style="position:fixed;right:30px;top:100px;">
-      <span class="nav1 hand" v-for="(item, index) in navList" :key="index" @click="jump(index)"
-            :class="index==0?'current':''">{{item}}</span>
-    </nav>
-  </div>
-</template>
-
-<script>
-// import $ from 'jquery';
-
-export default {
-  name:"MsAnchor",
-  data() {
-    return {
-      scroll: '',
-      list: [{
-        name: "第一条wwwwwwww",
-        backgroundcolor: "#90B2A3"
-      }, {
-        name: "第二条eeeeeeee",
-        backgroundcolor: "#A593B2"
-      }, {
-        name: "第三条",
-        backgroundcolor: "#A7B293"
-      }, {
-        name: "第四条",
-        backgroundcolor: "#0F2798"
-      }, {
-        name: "第五条",
-        backgroundcolor: "#0A464D"
-      }],
-      navList: [11111111, 2111111111111, 31111, 4111111, 5111111111]
-    }
-  },
-  methods: {
-    dataScroll: function () {
-      this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
-    },
-    jump(index) {
-      let jump = document.getElementsByClassName('section');
-      // 获取需要滚动的距离
-      let total = jump[index].offsetTop;
-      // Chrome
-      document.body.scrollTop = total;
-      // Firefox
-      document.documentElement.scrollTop = total;
-      // Safari
-      window.pageYOffset = total;
-      // $('html, body').animate({
-      // 'scrollTop': total
-      // }, 400);
-    },
-    loadSroll: function () {
-      // var self = this;
-      // var $navs = $(".nav1");
-      // var sections = document.getElementsByClassName('section');
-      // for (var i = sections.length - 1; i >= 0; i--) {
-      //   if (self.scroll >= sections[i].offsetTop - 100) {
-      //     $navs.eq(i).addClass("current").siblings().removeClass("current")
-      //     break;
-      //   }
-      // }
-    }
-  },
-  watch: {
-    scroll: function () {
-      this.loadSroll()
-    }
-  },
-  mounted() {
-    window.addEventListener('scroll', this.dataScroll);
-  }
-}
-</script>
-
-<style>
-* {
-  padding: 0;
-  margin: 0;
-}
-
-.nav1 {
-  display: block;
-  height: 40px;
-  text-align: center;
-  line-height: 40px;
-  background: #eee;
-}
-
-.navs1 .active {
-  color: #847ec3;
-  background-color: #e2e2e2;
-}
-
-.hand {
-  cursor: pointer;
-}
-
-.current {
-  color: #fff;
-  background: #847ec3;
-}
-
-.border {
-  border: 1px solid #eee;
-  border-top: 0
-}
-</style>
diff --git a/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchor.vue b/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchor.vue
new file mode 100644
index 0000000000..ea931ee009
--- /dev/null
+++ b/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchor.vue
@@ -0,0 +1,734 @@
+<template>
+  <div>
+    <el-container>
+      <el-main style="padding-top: 0px;padding-bottom: 0px">
+        <el-row style="margin-top: 10px">
+          <el-select size="small" :placeholder="$t('api_test.definition.document.order')" v-model="apiSearch.orderCondition" style="float: right;width: 180px;margin-right: 5px"
+                     class="ms-api-header-select" @change="initApiDocSimpleList" clearable>
+            <el-option key="createTimeDesc" :label="$t('api_test.definition.document.create_time_sort')" value="createTimeDesc" />
+            <el-option key="editTimeAsc" :label="$t('api_test.definition.document.edit_time_positive_sequence')" value="editTimeAsc"/>
+            <el-option key="editTimeDesc" :label="$t('api_test.definition.document.edit_time_Reverse_order')" value="editTimeDesc"/>
+          </el-select>
+
+          <el-select size="small" :placeholder="$t('api_test.definition.document.request_method')" v-model="apiSearch.type" style="float: right;width: 180px;margin-right: 5px"
+                     class="ms-api-header-select" @change="initApiDocSimpleList" clearable>
+            <el-option key="ALL" :label="$t('api_test.definition.document.data_set.all')" value="ALL"/>
+            <el-option key="GET" :label="'GET '+$t('api_test.definition.document.request_interface')" value="GET"/>
+            <el-option key="POST" :label="'POST '+$t('api_test.definition.document.request_interface')" value="POST"/>
+            <el-option key="PUT" :label="'PUT '+$t('api_test.definition.document.request_interface')" value="PUT"/>
+            <el-option key="DELETE" :label="'DELETE '+$t('api_test.definition.document.request_interface')" value="DELETE"/>
+            <el-option key="PATCH" :label="'PATCH '+$t('api_test.definition.document.request_interface')" value="PATCH"/>
+            <el-option key="OPTIONS" :label="'OPTIONS '+$t('api_test.definition.document.request_interface')" value="OPTIONS"/>
+            <el-option key="HEAD" :label="'HEAD '+$t('api_test.definition.document.request_interface')" value="HEAD"/>
+            <el-option key="CONNECT" :label="'CONNECT '+$t('api_test.definition.document.request_interface')" value="CONNECT"/>
+          </el-select>
+          <el-input :placeholder="$t('api_test.definition.document.search_by_api_name')" @blur="initApiDocSimpleList()" style="float: right;width: 180px;margin-right: 5px" size="small"
+                    @keyup.enter.native="initApiDocSimpleList()" v-model="apiSearch.name"/>
+          <api-document-batch-share v-xpack v-if="showXpackCompnent" @shareApiDocument="shareApiDocument" :project-id="projectId" :share-url="batchShareUrl" style="float: right;margin: 6px;font-size: 17px"/>
+          <!--          <api-document-batch-share v-xpack v-if="showXpackCompnent"/>-->
+        </el-row>
+        <el-divider></el-divider>
+        <div ref="apiDocInfoDiv" @scroll="handleScroll" >
+          <div v-for="(apiInfo) in apiInfoArray" :key="apiInfo.id" ref="apiDocInfoDivItem">
+            <div style="font-size: 17px">
+              <el-popover
+                v-if="projectId"
+                placement="right"
+                width="260"
+                @show="shareApiDocument('false')">
+                <p>{{shareUrl}}</p>
+                <div style="text-align: right; margin: 0">
+                  <el-button type="primary" size="mini"
+                             v-clipboard:copy="shareUrl">{{ $t("commons.copy") }}</el-button>
+                </div>
+                <i class="el-icon-share" slot="reference" style="margin-right: 10px;cursor: pointer"></i>
+              </el-popover>
+              {{ apiInfo.name }}
+              <span class="apiStatusTag">
+              <api-status :value="apiInfo.status"/>
+            </span>
+            </div>
+            <!--api请求信息-->
+            <el-row class="apiInfoRow">
+              <div class="tip">
+                {{ $t('api_test.definition.document.request_info') }}
+              </div>
+            </el-row>
+            <el-row class="apiInfoRow">
+              <div class="simpleFontClass">
+                <el-tag size="medium"
+                        :style="{'background-color': getColor(true,apiInfo.method), border: getColor(true,apiInfo.method),borderRadius:'0px', marginRight:'20px',color:'white'}">
+                  {{ apiInfo.method }}
+                </el-tag>
+                {{ apiInfo.uri }}
+              </div>
+            </el-row>
+            <!--api请求头-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                {{ $t('api_test.definition.document.request_head') }}：
+                <div v-if="getJsonArr(apiInfo.requestHead).length==0">
+                  <div class="simpleFontClass" style="margin-top: 10px">
+                    {{ $t('api_test.definition.document.data_set.none') }}
+                  </div>
+                </div>
+                <div v-else>
+                  <el-table border :show-header="false"
+                            :data="getJsonArr(apiInfo.requestHead)" row-key="name" class="test-content document-table">
+                    <el-table-column prop="name"
+                                     :label="$t('api_test.definition.document.table_coloum.name')"
+                                     show-overflow-tooltip/>
+                    <el-table-column prop="value"
+                                     :label="$t('api_test.definition.document.table_coloum.value')"
+                                     show-overflow-tooltip/>
+                  </el-table>
+                </div>
+              </div>
+            </el-row>
+            <!--URL参数-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                URL{{ $t('api_test.definition.document.request_param') }}：
+                <div v-if="getJsonArr(apiInfo.urlParams).length==0">
+                  <div class="simpleFontClass" style="margin-top: 10px">
+                    {{ $t('api_test.definition.document.data_set.none') }}
+                  </div>
+                </div>
+                <div v-else>
+                  <el-table border
+                            :data="getJsonArr(apiInfo.urlParams)" row-key="name" class="test-content document-table">
+                    <el-table-column prop="name"
+                                     :label="$t('api_test.definition.document.table_coloum.name')"
+                                     min-width="120px"
+                                     show-overflow-tooltip/>
+                    <el-table-column prop="isEnable"
+                                     :label="$t('api_test.definition.document.table_coloum.is_required')"
+                                     min-width="80px"
+                                     show-overflow-tooltip/>
+                    <el-table-column prop="value"
+                                     :label="$t('api_test.definition.document.table_coloum.value')"
+                                     min-width="120px"
+                                     show-overflow-tooltip/>
+                    <el-table-column prop="description"
+                                     :label="$t('api_test.definition.document.table_coloum.desc')"
+                                     min-width="280px"
+                                     show-overflow-tooltip/>
+                  </el-table>
+                </div>
+              </div>
+            </el-row>
+            <!--api请求体 以及表格-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                {{ $t('api_test.definition.document.request_body') }}
+              </div>
+              <div class="smallFontClass">
+                {{ $t('api_test.definition.document.table_coloum.type') }}:{{ apiInfo.requestBodyParamType }}
+              </div>
+              <div>
+                <el-table border v-if="formParamTypes.includes(apiInfo.requestBodyParamType)"
+                          :data="getJsonArr(apiInfo.requestBodyFormData)" row-key="name"
+                          class="test-content document-table">
+                  <el-table-column prop="name"
+                                   :label="$t('api_test.definition.document.table_coloum.name')"
+                                   min-width="120px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="contentType"
+                                   :label="$t('api_test.definition.document.table_coloum.type')"
+                                   min-width="120px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="description"
+                                   :label="$t('api_test.definition.document.table_coloum.desc')"
+                                   min-width="280px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="required"
+                                   :label="$t('api_test.definition.document.table_coloum.is_required')"
+                                   :formatter="formatBoolean"
+                                   min-width="80px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="value"
+                                   :label="$t('api_test.definition.document.table_coloum.default_value')"
+                                   min-width="120px"
+                                   show-overflow-tooltip/>
+                </el-table>
+                <div v-else-if="apiInfo.requestBodyParamType == 'JSON-SCHEMA'" style="margin-left: 10px">
+                  <ms-json-code-edit :body="apiInfo.jsonSchemaBody" ref="jsonCodeEdit"/>
+                </div>
+                <div v-else class="showDataDiv">
+                  <br/>
+                  <p style="margin: 0px 20px;"
+                     v-html="formatRowData(apiInfo.requestBodyParamType,apiInfo.requestBodyStrutureData)">
+                  </p>
+                  <br/>
+                </div>
+              </div>
+            </el-row>
+            <!--范例展示-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                {{ $t('api_test.definition.document.example_presentation') }}
+              </div>
+              <div class="showDataDiv">
+                <br/>
+                <p style="margin: 0px 20px;"
+                   v-html="genPreviewData(apiInfo.requestPreviewData)">
+                </p>
+                <br/>
+              </div>
+            </el-row>
+            <!--响应信息-->
+            <el-row class="apiInfoRow">
+              <div class="tip">
+                {{ $t('api_test.definition.document.response_info') }}
+              </div>
+            </el-row>
+            <el-row class="apiInfoRow">
+
+            </el-row>
+            <!--响应头-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                {{ $t('api_test.definition.document.response_head') }}:
+                <el-table border :show-header="false"
+                          :data="getJsonArr(apiInfo.responseHead)" row-key="name" class="test-content document-table">
+                  <el-table-column prop="name"
+                                   :label="$t('api_test.definition.document.table_coloum.name')"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="value"
+                                   :label="$t('api_test.definition.document.table_coloum.value')"
+                                   show-overflow-tooltip/>
+                </el-table>
+              </div>
+            </el-row>
+            <!--响应体-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                {{ $t('api_test.definition.document.response_body') }}
+              </div>
+              <div class="smallFontClass">
+                {{ $t('api_test.definition.document.table_coloum.type') }}:{{ apiInfo.responseBodyParamType }}
+              </div>
+              <div>
+                <el-table border v-if="formParamTypes.includes(apiInfo.responseBodyParamType)"
+                          :data="getJsonArr(apiInfo.responseBodyFormData)" row-key="id"
+                          class="test-content document-table">
+                  <el-table-column prop="name"
+                                   :label="$t('api_test.definition.document.table_coloum.name')"
+                                   min-width="120px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="contentType"
+                                   :label="$t('api_test.definition.document.table_coloum.type')"
+                                   min-width="120px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="description"
+                                   :label="$t('api_test.definition.document.table_coloum.desc')"
+                                   min-width="280px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="required"
+                                   :label="$t('api_test.definition.document.table_coloum.is_required')"
+                                   :formatter="formatBoolean"
+                                   min-width="80px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="value"
+                                   :label="$t('api_test.definition.document.table_coloum.default_value')"
+                                   min-width="120px"
+                                   show-overflow-tooltip/>
+                </el-table>
+                <div v-else class="showDataDiv">
+                  <br/>
+                  <p style="margin: 0px 20px;"
+                     v-html="formatRowData(apiInfo.responseBodyParamType,apiInfo.responseBodyStrutureData)">
+                  </p>
+                  <br/>
+                </div>
+              </div>
+            </el-row>
+            <!--响应状态码-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                {{ $t('api_test.definition.document.response_code') }}:
+                <el-table border :show-header="false"
+                          :data="getJsonArr(apiInfo.responseCode)" row-key="name" class="test-content document-table">
+                  <el-table-column prop="name"
+                                   :label="$t('api_test.definition.document.table_coloum.name')"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="value"
+                                   :label="$t('api_test.definition.document.table_coloum.value')"
+                                   show-overflow-tooltip/>
+                </el-table>
+              </div>
+            </el-row>
+          </div>
+        </div>
+      </el-main>
+      <!-- 右侧列表 -->
+      <el-aside width="200px" style="margin-top: 70px;">
+        <div ref="apiDocList" >
+          <el-steps style="height: 40%" direction="vertical" :active="apiStepIndex">
+            <el-step v-for="(apiInfo) in apiInfoArray" :key="apiInfo.id" @click.native="clickStep(apiInfo.id)">
+              <el-link slot="title">{{ apiInfo.name }}</el-link>
+            </el-step>
+          </el-steps>
+        </div>
+      </el-aside>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import {API_METHOD_COLOUR} from "@/business/components/api/definition/model/JsonData";
+import MsCodeEdit from "@/business/components/common/components/MsCodeEdit";
+import {formatJson,} from "@/common/js/format-utils";
+import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
+import {calculate} from "@/business/components/api/definition/model/ApiTestModel";
+import MsJsonCodeEdit from "@/business/components/common/json-schema/JsonSchemaEditor";
+import Api from "@/business/components/api/router";
+
+const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
+const apiDocumentBatchShare = (requireComponent!=null&&requireComponent.keys().length) > 0 ? requireComponent("./share/ApiDocumentBatchShare.vue") : {};
+
+export default {
+  name: "ApiDocumentItem",
+  components: {
+    Api,
+    MsJsonCodeEdit,
+    ApiStatus, MsCodeEdit,
+    "ApiDocumentBatchShare": apiDocumentBatchShare.default
+  },
+  data() {
+    return {
+      shareUrl:"",
+      batchShareUrl:"",
+      apiStepIndex: 0,
+      showXpackCompnent:false,
+      apiShowArray: [],
+      apiInfoArray: [],
+      modes: ['text', 'json', 'xml', 'html'],
+      formParamTypes: ['form-data', 'x-www-from-urlencoded', 'BINARY'],
+      mockVariableFuncs: [],
+      apiSearch:{
+        name:"",
+        type:"ALL",
+        orderCondition:"createTimeDesc",
+      },
+      apiInfoBaseObj: {
+        selectedFlag:false,
+        method: "无",
+        uri: "无",
+        name: "无",
+        id: "",
+        requestHead: "无",
+        urlParams: "无",
+        requestBodyParamType: "无",
+        requestBodyFormData: '[]',
+        requestBodyStrutureData: "",
+        sharePopoverVisible:false,
+        jsonSchemaBody: {},
+        responseHead: "无",
+        responseBody: "",
+        responseBodyParamType: "无",
+        responseBodyFormData: "无",
+        responseBodyStrutureData: "无",
+        responseCode: "无",
+      },
+      methodColorMap: new Map(API_METHOD_COLOUR),
+      clientHeight: '',//坚挺浏览器高度
+    }
+  },
+  props: {
+    projectId: String,
+    documentId: String,
+    moduleIds: Array,
+    pageHeaderHeight:Number,
+  },
+  activated() {
+    this.initApiDocSimpleList();
+    this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
+    let that = this;
+    window.onresize = function () {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  created: function () {
+    if(requireComponent!=null && JSON.stringify(apiDocumentBatchShare) != '{}'){
+      this.showXpackCompnent = true;
+    }
+    this.initApiDocSimpleList();
+    this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
+    let that = this;
+    window.onresize = function () {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+      this.changeFixed(this.clientHeight);
+    };
+    window.addEventListener('scroll',that.handleScroll);
+  },
+  mounted() {
+    let that = this;
+    window.onresize = function () {
+      that.clientHeight = `${document.documentElement.clientHeight}`;
+      that.changeFixed(that.clientHeight);
+    };
+    // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
+    window.addEventListener('scroll',this.handleScroll);
+  },
+  computed: {
+  },
+  watch: {
+    moduleIds() {
+      this.initApiDocSimpleList();
+    },
+    clientHeight() {     //如果clientHeight 发生改变，这个函数就会运行
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  methods: {
+    formatRowData(dataType, data) {
+      var returnData = data;
+      if (data) {
+        returnData = data.replace(/\n/g, '<br>');
+      }
+      return returnData;
+    },
+    changeFixed(clientHeight) {
+      if (this.$refs.apiDocInfoDiv) {
+        let countPageHeight = 350;
+        if(this.pageHeaderHeight!=0 && this.pageHeaderHeight != null){
+          countPageHeight = this.pageHeaderHeight
+        }
+
+        this.$refs.apiDocInfoDiv.style.height = clientHeight - countPageHeight + 'px';
+        this.$refs.apiDocInfoDiv.style.overflow = 'auto';
+        this.$refs.apiDocList.style.height = clientHeight - countPageHeight + 'px';
+      }
+    },
+    initApiDocSimpleList() {
+      let simpleRequest = this.apiSearch;
+      if (this.projectId != null && this.projectId != "") {
+        simpleRequest.projectId = this.projectId;
+      }
+      if (this.documentId != null && this.documentId != "") {
+        simpleRequest.shareId = this.documentId;
+      }
+      if (this.moduleIds.length > 0) {
+        simpleRequest.moduleIds = this.moduleIds;
+      }
+
+      let simpleInfoUrl = "/document/selectApiSimpleInfo";
+      this.apiInfoArray = [];
+      this.$post(simpleInfoUrl, simpleRequest, response => {
+        this.apiInfoArray = response.data;
+        this.apiStepIndex = 0;
+        if(response.data.length > 7){
+          this.apiShowArray = [
+            response.data[0],
+            response.data[1],
+            response.data[2],
+            response.data[3],
+            response.data[4],
+            response.data[5],
+            response.data[6],
+          ];
+        }else{
+          this.apiShowArray = response.data;
+        }
+        if (this.apiInfoArray.length > 0) {
+          this.checkApiInfoNode(this.apiStepIndex);
+        }
+      });
+    },
+    shareApiDocument(isBatchShare){
+      let thisHost = window.location.host;
+      this.shareUrl = "";
+      this.batchShareUrl = "";
+      let shareIdArr = [];
+      let shareType = "Single";
+      if(isBatchShare == 'true'){
+        this.apiInfoArray.forEach(f => {
+          if (!f.id) {
+            return;
+          }
+          shareIdArr.push(f.id);
+        });
+        shareType = "Batch";
+      }else{
+        shareIdArr.push(this.apiInfoArray[this.apiStepIndex].id);
+      }
+      let genShareInfoParam = {};
+      genShareInfoParam.shareApiIdList = shareIdArr;
+      genShareInfoParam.shareType = shareType;
+
+      this.$post("/document/generateApiDocumentShareInfo", genShareInfoParam, res => {
+        if(shareType == "Batch"){
+          this.batchShareUrl = thisHost+"/document"+res.data.shareUrl;
+        }else{
+          this.shareUrl = thisHost+"/document"+res.data.shareUrl;
+        }
+      }, (error) => {
+      });
+    },
+    selectApiInfo(index,apiId) {
+      let simpleInfoUrl = "/document/selectApiInfoById/" + apiId;
+      this.$get(simpleInfoUrl, response => {
+        let returnData = response.data;
+        this.$set(this.apiInfoArray,index,returnData);
+      });
+    },
+    clickStep(apiId) {
+      for (let index = 0; index < this.apiInfoArray.length; index++) {
+        if (apiId == this.apiInfoArray[index].id) {
+          this.apiStepIndex = index;
+          break;
+        }
+      }
+      //检查数据
+      this.checkApiInfoNode(this.apiStepIndex);
+      //进行跳转
+      this.redirectScroll(this.apiStepIndex);
+    },
+    stepClick(stepIndex) {
+      this.apiStepIndex = stepIndex;
+    },
+    getColor(enable, method) {
+      return this.methodColorMap.get(method);
+    },
+    formatBoolean(row, column, cellValue) {
+      var ret = ''  //你想在页面展示的值
+      if (cellValue) {
+        ret = "是"  //根据自己的需求设定
+      } else {
+        ret = "否"
+      }
+      return ret;
+    },
+    getJsonArr(jsonString) {
+      let returnJsonArr = [];
+      if (jsonString == '无' || jsonString == null) {
+        return returnJsonArr;
+      }
+
+      let jsonArr = JSON.parse(jsonString);
+      //遍历，把必填项空的数据去掉
+      for (var index = 0; index < jsonArr.length; index++) {
+        var item = jsonArr[index];
+        if (item.name != "" && item.name != null) {
+          returnJsonArr.push(item);
+        }
+      }
+      return returnJsonArr;
+    },
+    //构建预览数据
+    genPreviewData(previewData) {
+      if (previewData != null && previewData != '') {
+        let showDataObj = {};
+        for (var key in previewData) {
+          // showDataObj.set(key,previewData[key]);
+          let value = previewData[key];
+          if(typeof(value)=='string'){
+            if (value.indexOf("@") >= 0) {
+              value = this.showPreview(value);
+            }
+          }
+          showDataObj[key] = value;
+        }
+        showDataObj = JSON.stringify(showDataObj);
+        previewData = formatJson(showDataObj);
+      }
+      return previewData;
+    },
+    showPreview(itemValue) {
+      // 找到变量本身
+      if (!itemValue) {
+        return;
+      }
+      let index = itemValue.indexOf("|");
+      if (index > -1) {
+        itemValue = itemValue.substring(0, index).trim();
+      }
+
+      this.mockVariableFuncs.forEach(f => {
+        if (!f.name) {
+          return;
+        }
+        itemValue += "|" + f.name;
+        if (f.params) {
+          itemValue += ":" + f.params.map(p => p.value).join(",");
+        }
+      });
+
+      itemValue = calculate(itemValue);
+      return itemValue;
+    },
+    onCopySuccess: function (e) {
+      if(this.apiStepIndex < this.apiInfoArray.length){
+        this.apiInfoArray[this.apiStepIndex].sharePopoverVisible = false;
+      }
+      this.$message({
+        message: this.$t('commons.copy_success'),
+        type: 'success'
+      });
+    },
+    onCopyError: function (e) {
+      if(this.apiStepIndex < this.apiInfoArray.length){
+        this.apiInfoArray[this.apiStepIndex].sharePopoverVisible = false;
+      }
+      this.$message.error(this.$t('api_report.error'));
+    },
+    handleScroll(){
+
+      //apiDocInfoDiv的总高度，是(每个item的高度+20)数量
+      let apiDocDivScrollTop = this.$refs.apiDocInfoDiv.scrollTop;
+      let apiDocDivClientTop = this.$refs.apiDocInfoDiv.clientHeight;
+
+      let scrolledHeigh = apiDocDivScrollTop+apiDocDivClientTop;
+      let lastIndex = 0;
+      for (let index = 0; index < this.apiInfoArray.length; index++) {
+        //判断移动到了第几个元素. 公式: 移动过的高度+页面显示高度-第index子元素的高度(含20px)>0 的 index最大值
+        if(scrolledHeigh>0){
+          lastIndex = index;
+          let itemHeight = this.$refs.apiDocInfoDivItem[index].offsetHeight+20;
+          scrolledHeigh = scrolledHeigh - itemHeight;
+        }else{
+          break;
+        }
+      }
+      this.apiStepIndex = lastIndex;
+      //检查上下文 3个以内的节点有没有查询出来
+      this.checkApiInfoNode(this.apiStepIndex);
+    },
+    redirectScroll(itemIndex){
+      //滚动条跳转：将滚动条下拉到显示对应对api接口的位置
+      // let apiDocDivClientTop = this.$refs.apiDocInfoDiv.clientHeight;
+      let apiDocDivClientTop = 0;
+      let itemHeightCount = 0;
+      for (let i = 0; i <= itemIndex-1; i++) {
+        let itemHeight = this.$refs.apiDocInfoDivItem[i].offsetHeight+20;
+        itemHeightCount+=itemHeight;
+      }
+      this.$refs.apiDocInfoDiv.scrollTop = (apiDocDivClientTop+itemHeightCount);
+    },
+    checkApiInfoNode(itemIndex){
+      //检查要展示的api信息节点，和上下个3个及以内的范围内数据有没有查询过
+      let beforeNodeIndex = itemIndex<3?0:(itemIndex-3);
+      let afterNodeIndex = (itemIndex+3)<this.apiInfoArray.length?(itemIndex+3):this.apiInfoArray.length;
+
+      for(let beforeIndex = itemIndex;beforeIndex < afterNodeIndex;beforeIndex++){
+        let apiInfo = this.apiInfoArray[beforeIndex];
+        if(apiInfo==null){
+          continue;
+        }
+        if(apiInfo == null || !apiInfo.selectedFlag){
+          let apiId = apiInfo.id;
+          if(!apiInfo.isSearching){
+            apiInfo.isSearching = true;
+            this.selectApiInfo(beforeIndex,apiId);
+          }
+        }
+      }
+
+      for(let afterIndex = beforeNodeIndex;afterIndex <itemIndex;afterIndex++){
+        let apiInfo = this.apiInfoArray[afterIndex];
+        if(apiInfo==null){
+          continue;
+        }
+        if(apiInfo == null || !apiInfo.selectedFlag){
+          let apiId = apiInfo.id;
+          if(!apiInfo.isSearching) {
+            apiInfo.isSearching = true;
+            this.selectApiInfo(afterIndex,apiId);
+          }
+        }
+      }
+    }
+  },
+}
+</script>
+
+<style scoped>
+.simpleFontClass {
+  font-weight: normal;
+  font-size: 14px;
+  margin-left: 10px;
+}
+
+.blackFontClass {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.smallFontClass {
+  font-size: 13px;
+  margin: 20px 10px;
+}
+
+.tip {
+  padding: 3px 5px;
+  font-size: 14px;
+  border-radius: 4px;
+  border-left: 4px solid #783887;
+}
+
+.apiInfoRow {
+  margin: 20px 10px;
+}
+
+.apiStatusTag {
+  margin: 20px 5px;
+}
+
+.showDataDiv {
+  background-color: #F5F7F9;
+  margin: 20px 10px;
+}
+
+/*
+步骤条中，已经完成后的节点样式和里面a标签的样式
+*/
+/deep/ .el-step__head.is-finish {
+  color: #C0C4CC;
+  border-color: #C0C4CC;
+}
+
+/deep/ .el-step__title.is-finish /deep/ .el-link.el-link--default {
+  color: #C0C4CC;
+}
+
+/*
+步骤条中，当前节点样式和当前a标签的样式
+*/
+/deep/ .el-step__head.is-process {
+  color: #783887;
+  border-color: #783887;
+}
+
+/deep/ .el-step__title.is-process /deep/ .el-link.el-link--default {
+  color: #783887;
+}
+
+.document-table {
+  margin: 20px 10px;
+  width: auto;
+}
+
+.document-table /deep/ .el-table__row {
+  font-size: 12px;
+  font-weight: initial;
+}
+
+.document-table /deep/ .has-gutter {
+  font-size: 12px;
+  color: #404040;
+}
+
+.document-table /deep/ td {
+  border-right: 0px solid #EBEEF5
+}
+
+.document-table /deep/ th {
+  background-color: #FAFAFA;
+  border-right: 0px solid #EBEEF5
+}
+.el-divider--horizontal {
+  margin: 12px 0;
+}
+</style>
diff --git a/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchorData.vue b/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchorData.vue
new file mode 100644
index 0000000000..143012d80a
--- /dev/null
+++ b/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchorData.vue
@@ -0,0 +1,720 @@
+<template>
+  <div>
+    <el-container>
+      <el-main style="padding-top: 0px;padding-bottom: 0px">
+        <el-row style="margin-top: 10px">
+          <el-select size="small" :placeholder="$t('api_test.definition.document.order')" v-model="apiSearch.orderCondition" style="float: right;width: 180px;margin-right: 5px"
+                     class="ms-api-header-select" @change="initApiDocSimpleList" clearable>
+            <el-option key="createTimeDesc" :label="$t('api_test.definition.document.create_time_sort')" value="createTimeDesc" />
+            <el-option key="editTimeAsc" :label="$t('api_test.definition.document.edit_time_positive_sequence')" value="editTimeAsc"/>
+            <el-option key="editTimeDesc" :label="$t('api_test.definition.document.edit_time_Reverse_order')" value="editTimeDesc"/>
+          </el-select>
+
+          <el-select size="small" :placeholder="$t('api_test.definition.document.request_method')" v-model="apiSearch.type" style="float: right;width: 180px;margin-right: 5px"
+                     class="ms-api-header-select" @change="initApiDocSimpleList" clearable>
+            <el-option key="ALL" :label="$t('api_test.definition.document.data_set.all')" value="ALL"/>
+            <el-option key="GET" :label="'GET '+$t('api_test.definition.document.request_interface')" value="GET"/>
+            <el-option key="POST" :label="'POST '+$t('api_test.definition.document.request_interface')" value="POST"/>
+            <el-option key="PUT" :label="'PUT '+$t('api_test.definition.document.request_interface')" value="PUT"/>
+            <el-option key="DELETE" :label="'DELETE '+$t('api_test.definition.document.request_interface')" value="DELETE"/>
+            <el-option key="PATCH" :label="'PATCH '+$t('api_test.definition.document.request_interface')" value="PATCH"/>
+            <el-option key="OPTIONS" :label="'OPTIONS '+$t('api_test.definition.document.request_interface')" value="OPTIONS"/>
+            <el-option key="HEAD" :label="'HEAD '+$t('api_test.definition.document.request_interface')" value="HEAD"/>
+            <el-option key="CONNECT" :label="'CONNECT '+$t('api_test.definition.document.request_interface')" value="CONNECT"/>
+          </el-select>
+          <el-input :placeholder="$t('api_test.definition.document.search_by_api_name')" @blur="initApiDocSimpleList()" style="float: right;width: 180px;margin-right: 5px" size="small"
+                    @keyup.enter.native="initApiDocSimpleList()" v-model="apiSearch.name"/>
+          <api-document-batch-share v-xpack v-if="showXpackCompnent" @shareApiDocument="shareApiDocument" :project-id="projectId" :share-url="batchShareUrl" style="float: right;margin: 6px;font-size: 17px"/>
+          <!--          <api-document-batch-share v-xpack v-if="showXpackCompnent"/>-->
+        </el-row>
+        <el-divider></el-divider>
+        <div ref="apiDocInfoDiv" @scroll="handleScroll" >
+          <div v-for="(apiInfo) in apiInfoArray" :key="apiInfo.id" ref="apiDocInfoDivItem">
+            <div style="font-size: 17px">
+              <el-popover
+                v-if="projectId"
+                placement="right"
+                width="260"
+                @show="shareApiDocument('false')">
+                <p>{{shareUrl}}</p>
+                <div style="text-align: right; margin: 0">
+                  <el-button type="primary" size="mini"
+                             v-clipboard:copy="shareUrl">{{ $t("commons.copy") }}</el-button>
+                </div>
+                <i class="el-icon-share" slot="reference" style="margin-right: 10px;cursor: pointer"></i>
+              </el-popover>
+              {{ apiInfo.name }}
+              <span class="apiStatusTag">
+              <api-status :value="apiInfo.status"/>
+            </span>
+            </div>
+            <!--api请求信息-->
+            <el-row class="apiInfoRow">
+              <div class="tip">
+                {{ $t('api_test.definition.document.request_info') }}
+              </div>
+            </el-row>
+            <el-row class="apiInfoRow">
+              <div class="simpleFontClass">
+                <el-tag size="medium"
+                        :style="{'background-color': getColor(true,apiInfo.method), border: getColor(true,apiInfo.method),borderRadius:'0px', marginRight:'20px',color:'white'}">
+                  {{ apiInfo.method }}
+                </el-tag>
+                {{ apiInfo.uri }}
+              </div>
+            </el-row>
+            <!--api请求头-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                {{ $t('api_test.definition.document.request_head') }}：
+                <div v-if="getJsonArr(apiInfo.requestHead).length==0">
+                  <div class="simpleFontClass" style="margin-top: 10px">
+                    {{ $t('api_test.definition.document.data_set.none') }}
+                  </div>
+                </div>
+                <div v-else>
+                  <el-table border :show-header="false"
+                            :data="getJsonArr(apiInfo.requestHead)" row-key="name" class="test-content document-table">
+                    <el-table-column prop="name"
+                                     :label="$t('api_test.definition.document.table_coloum.name')"
+                                     show-overflow-tooltip/>
+                    <el-table-column prop="value"
+                                     :label="$t('api_test.definition.document.table_coloum.value')"
+                                     show-overflow-tooltip/>
+                  </el-table>
+                </div>
+              </div>
+            </el-row>
+            <!--URL参数-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                URL{{ $t('api_test.definition.document.request_param') }}：
+                <div v-if="getJsonArr(apiInfo.urlParams).length==0">
+                  <div class="simpleFontClass" style="margin-top: 10px">
+                    {{ $t('api_test.definition.document.data_set.none') }}
+                  </div>
+                </div>
+                <div v-else>
+                  <el-table border
+                            :data="getJsonArr(apiInfo.urlParams)" row-key="name" class="test-content document-table">
+                    <el-table-column prop="name"
+                                     :label="$t('api_test.definition.document.table_coloum.name')"
+                                     min-width="120px"
+                                     show-overflow-tooltip/>
+                    <el-table-column prop="isEnable"
+                                     :label="$t('api_test.definition.document.table_coloum.is_required')"
+                                     min-width="80px"
+                                     show-overflow-tooltip/>
+                    <el-table-column prop="value"
+                                     :label="$t('api_test.definition.document.table_coloum.value')"
+                                     min-width="120px"
+                                     show-overflow-tooltip/>
+                    <el-table-column prop="description"
+                                     :label="$t('api_test.definition.document.table_coloum.desc')"
+                                     min-width="280px"
+                                     show-overflow-tooltip/>
+                  </el-table>
+                </div>
+              </div>
+            </el-row>
+            <!--api请求体 以及表格-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                {{ $t('api_test.definition.document.request_body') }}
+              </div>
+              <div class="smallFontClass">
+                {{ $t('api_test.definition.document.table_coloum.type') }}:{{ apiInfo.requestBodyParamType }}
+              </div>
+              <div>
+                <el-table border v-if="formParamTypes.includes(apiInfo.requestBodyParamType)"
+                          :data="getJsonArr(apiInfo.requestBodyFormData)" row-key="name"
+                          class="test-content document-table">
+                  <el-table-column prop="name"
+                                   :label="$t('api_test.definition.document.table_coloum.name')"
+                                   min-width="120px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="contentType"
+                                   :label="$t('api_test.definition.document.table_coloum.type')"
+                                   min-width="120px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="description"
+                                   :label="$t('api_test.definition.document.table_coloum.desc')"
+                                   min-width="280px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="required"
+                                   :label="$t('api_test.definition.document.table_coloum.is_required')"
+                                   :formatter="formatBoolean"
+                                   min-width="80px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="value"
+                                   :label="$t('api_test.definition.document.table_coloum.default_value')"
+                                   min-width="120px"
+                                   show-overflow-tooltip/>
+                </el-table>
+                <div v-else-if="apiInfo.requestBodyParamType == 'JSON-SCHEMA'" style="margin-left: 10px">
+                  <ms-json-code-edit :body="apiInfo.jsonSchemaBody" ref="jsonCodeEdit"/>
+                </div>
+                <div v-else class="showDataDiv">
+                  <br/>
+                  <p style="margin: 0px 20px;"
+                     v-html="formatRowData(apiInfo.requestBodyParamType,apiInfo.requestBodyStrutureData)">
+                  </p>
+                  <br/>
+                </div>
+              </div>
+            </el-row>
+            <!--范例展示-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                {{ $t('api_test.definition.document.example_presentation') }}
+              </div>
+              <div class="showDataDiv">
+                <br/>
+                <p style="margin: 0px 20px;"
+                   v-html="genPreviewData(apiInfo.requestPreviewData)">
+                </p>
+                <br/>
+              </div>
+            </el-row>
+            <!--响应信息-->
+            <el-row class="apiInfoRow">
+              <div class="tip">
+                {{ $t('api_test.definition.document.response_info') }}
+              </div>
+            </el-row>
+            <el-row class="apiInfoRow">
+
+            </el-row>
+            <!--响应头-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                {{ $t('api_test.definition.document.response_head') }}:
+                <el-table border :show-header="false"
+                          :data="getJsonArr(apiInfo.responseHead)" row-key="name" class="test-content document-table">
+                  <el-table-column prop="name"
+                                   :label="$t('api_test.definition.document.table_coloum.name')"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="value"
+                                   :label="$t('api_test.definition.document.table_coloum.value')"
+                                   show-overflow-tooltip/>
+                </el-table>
+              </div>
+            </el-row>
+            <!--响应体-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                {{ $t('api_test.definition.document.response_body') }}
+              </div>
+              <div class="smallFontClass">
+                {{ $t('api_test.definition.document.table_coloum.type') }}:{{ apiInfo.responseBodyParamType }}
+              </div>
+              <div>
+                <el-table border v-if="formParamTypes.includes(apiInfo.responseBodyParamType)"
+                          :data="getJsonArr(apiInfo.responseBodyFormData)" row-key="id"
+                          class="test-content document-table">
+                  <el-table-column prop="name"
+                                   :label="$t('api_test.definition.document.table_coloum.name')"
+                                   min-width="120px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="contentType"
+                                   :label="$t('api_test.definition.document.table_coloum.type')"
+                                   min-width="120px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="description"
+                                   :label="$t('api_test.definition.document.table_coloum.desc')"
+                                   min-width="280px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="required"
+                                   :label="$t('api_test.definition.document.table_coloum.is_required')"
+                                   :formatter="formatBoolean"
+                                   min-width="80px"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="value"
+                                   :label="$t('api_test.definition.document.table_coloum.default_value')"
+                                   min-width="120px"
+                                   show-overflow-tooltip/>
+                </el-table>
+                <div v-else class="showDataDiv">
+                  <br/>
+                  <p style="margin: 0px 20px;"
+                     v-html="formatRowData(apiInfo.responseBodyParamType,apiInfo.responseBodyStrutureData)">
+                  </p>
+                  <br/>
+                </div>
+              </div>
+            </el-row>
+            <!--响应状态码-->
+            <el-row class="apiInfoRow">
+              <div class="blackFontClass">
+                {{ $t('api_test.definition.document.response_code') }}:
+                <el-table border :show-header="false"
+                          :data="getJsonArr(apiInfo.responseCode)" row-key="name" class="test-content document-table">
+                  <el-table-column prop="name"
+                                   :label="$t('api_test.definition.document.table_coloum.name')"
+                                   show-overflow-tooltip/>
+                  <el-table-column prop="value"
+                                   :label="$t('api_test.definition.document.table_coloum.value')"
+                                   show-overflow-tooltip/>
+                </el-table>
+              </div>
+            </el-row>
+          </div>
+        </div>
+      </el-main>
+      <!-- 右侧列表 -->
+      <el-aside width="200px" style="margin-top: 70px;">
+        <div ref="apiDocList" >
+          <el-steps style="height: 40%" direction="vertical" :active="apiStepIndex">
+            <el-step v-for="(apiInfo) in apiInfoArray" :key="apiInfo.id" @click.native="clickStep(apiInfo.id)">
+              <el-link slot="title">{{ apiInfo.name }}</el-link>
+            </el-step>
+          </el-steps>
+        </div>
+      </el-aside>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import {API_METHOD_COLOUR} from "@/business/components/api/definition/model/JsonData";
+import MsCodeEdit from "@/business/components/common/components/MsCodeEdit";
+import {formatJson,} from "@/common/js/format-utils";
+import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
+import {calculate} from "@/business/components/api/definition/model/ApiTestModel";
+import MsJsonCodeEdit from "@/business/components/common/json-schema/JsonSchemaEditor";
+import Api from "@/business/components/api/router";
+
+const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
+const apiDocumentBatchShare = (requireComponent!=null&&requireComponent.keys().length) > 0 ? requireComponent("./share/ApiDocumentBatchShare.vue") : {};
+
+export default {
+  name: "ApiDocumentItem",
+  components: {
+    Api,
+    MsJsonCodeEdit,
+    ApiStatus, MsCodeEdit,
+    "ApiDocumentBatchShare": apiDocumentBatchShare.default
+  },
+  data() {
+    return {
+      shareUrl:"",
+      batchShareUrl:"",
+      apiStepIndex: 0,
+      showXpackCompnent:false,
+      apiInfoArray: [],
+      modes: ['text', 'json', 'xml', 'html'],
+      formParamTypes: ['form-data', 'x-www-from-urlencoded', 'BINARY'],
+      mockVariableFuncs: [],
+      apiSearch:{
+        name:"",
+        type:"ALL",
+        orderCondition:"createTimeDesc",
+      },
+      apiInfoBaseObj: {
+        selectedFlag:false,
+        method: "无",
+        uri: "无",
+        name: "无",
+        id: "",
+        requestHead: "无",
+        urlParams: "无",
+        requestBodyParamType: "无",
+        requestBodyFormData: '[]',
+        requestBodyStrutureData: "",
+        sharePopoverVisible:false,
+        jsonSchemaBody: {},
+        responseHead: "无",
+        responseBody: "",
+        responseBodyParamType: "无",
+        responseBodyFormData: "无",
+        responseBodyStrutureData: "无",
+        responseCode: "无",
+      },
+      methodColorMap: new Map(API_METHOD_COLOUR),
+      clientHeight: '',//坚挺浏览器高度
+    }
+  },
+  props: {
+    projectId: String,
+    documentId: String,
+    moduleIds: Array,
+    pageHeaderHeight:Number,
+  },
+  activated() {
+    this.initApiDocSimpleList();
+    this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
+    let that = this;
+    window.onresize = function () {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  created: function () {
+    if(requireComponent!=null && JSON.stringify(apiDocumentBatchShare) != '{}'){
+      this.showXpackCompnent = true;
+    }
+    this.initApiDocSimpleList();
+    this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
+    let that = this;
+    window.onresize = function () {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+      this.changeFixed(this.clientHeight);
+    };
+    window.addEventListener('scroll',that.handleScroll);
+  },
+  mounted() {
+    let that = this;
+    window.onresize = function () {
+      that.clientHeight = `${document.documentElement.clientHeight}`;
+      that.changeFixed(that.clientHeight);
+    };
+    // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
+    window.addEventListener('scroll',this.handleScroll);
+  },
+  computed: {
+  },
+  watch: {
+    moduleIds() {
+      this.initApiDocSimpleList();
+    },
+    clientHeight() {     //如果clientHeight 发生改变，这个函数就会运行
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  methods: {
+    formatRowData(dataType, data) {
+      var returnData = data;
+      if (data) {
+        returnData = data.replace(/\n/g, '<br>');
+      }
+      return returnData;
+    },
+    changeFixed(clientHeight) {
+      if (this.$refs.apiDocInfoDiv) {
+        let countPageHeight = 350;
+        if(this.pageHeaderHeight!=0 && this.pageHeaderHeight != null){
+          countPageHeight = this.pageHeaderHeight
+        }
+
+        this.$refs.apiDocInfoDiv.style.height = clientHeight - countPageHeight + 'px';
+        this.$refs.apiDocInfoDiv.style.overflow = 'auto';
+        this.$refs.apiDocList.style.height = clientHeight - countPageHeight + 'px';
+      }
+    },
+    initApiDocSimpleList() {
+      let simpleRequest = this.apiSearch;
+      if (this.projectId != null && this.projectId != "") {
+        simpleRequest.projectId = this.projectId;
+      }
+      if (this.documentId != null && this.documentId != "") {
+        simpleRequest.shareId = this.documentId;
+      }
+      if (this.moduleIds.length > 0) {
+        simpleRequest.moduleIds = this.moduleIds;
+      }
+
+      let simpleInfoUrl = "/document/selectApiSimpleInfo";
+      this.apiInfoArray = [];
+      this.$post(simpleInfoUrl, simpleRequest, response => {
+        this.apiInfoArray = response.data;
+        this.apiStepIndex = 0;
+        if (this.apiInfoArray.length > 0) {
+          this.checkApiInfoNode(this.apiStepIndex);
+        }
+      });
+    },
+    shareApiDocument(isBatchShare){
+      let thisHost = window.location.host;
+      this.shareUrl = "";
+      this.batchShareUrl = "";
+      let shareIdArr = [];
+      let shareType = "Single";
+      if(isBatchShare == 'true'){
+        this.apiInfoArray.forEach(f => {
+          if (!f.id) {
+            return;
+          }
+          shareIdArr.push(f.id);
+        });
+        shareType = "Batch";
+      }else{
+        shareIdArr.push(this.apiInfoArray[this.apiStepIndex].id);
+      }
+      let genShareInfoParam = {};
+      genShareInfoParam.shareApiIdList = shareIdArr;
+      genShareInfoParam.shareType = shareType;
+
+      this.$post("/document/generateApiDocumentShareInfo", genShareInfoParam, res => {
+        if(shareType == "Batch"){
+          this.batchShareUrl = thisHost+"/document"+res.data.shareUrl;
+        }else{
+          this.shareUrl = thisHost+"/document"+res.data.shareUrl;
+        }
+      }, (error) => {
+      });
+    },
+    selectApiInfo(index,apiId) {
+      let simpleInfoUrl = "/document/selectApiInfoById/" + apiId;
+      this.$get(simpleInfoUrl, response => {
+        let returnData = response.data;
+        this.$set(this.apiInfoArray,index,returnData);
+      });
+    },
+    clickStep(apiId) {
+      for (let index = 0; index < this.apiInfoArray.length; index++) {
+        if (apiId == this.apiInfoArray[index].id) {
+          this.apiStepIndex = index;
+          break;
+        }
+      }
+      //检查数据
+      this.checkApiInfoNode(this.apiStepIndex);
+      //进行跳转
+      this.redirectScroll(this.apiStepIndex);
+    },
+    stepClick(stepIndex) {
+      this.apiStepIndex = stepIndex;
+    },
+    getColor(enable, method) {
+      return this.methodColorMap.get(method);
+    },
+    formatBoolean(row, column, cellValue) {
+      var ret = ''  //你想在页面展示的值
+      if (cellValue) {
+        ret = "是"  //根据自己的需求设定
+      } else {
+        ret = "否"
+      }
+      return ret;
+    },
+    getJsonArr(jsonString) {
+      let returnJsonArr = [];
+      if (jsonString == '无' || jsonString == null) {
+        return returnJsonArr;
+      }
+
+      let jsonArr = JSON.parse(jsonString);
+      //遍历，把必填项空的数据去掉
+      for (var index = 0; index < jsonArr.length; index++) {
+        var item = jsonArr[index];
+        if (item.name != "" && item.name != null) {
+          returnJsonArr.push(item);
+        }
+      }
+      return returnJsonArr;
+    },
+    //构建预览数据
+    genPreviewData(previewData) {
+      if (previewData != null && previewData != '') {
+        let showDataObj = {};
+        for (var key in previewData) {
+          // showDataObj.set(key,previewData[key]);
+          let value = previewData[key];
+          if(typeof(value)=='string'){
+            if (value.indexOf("@") >= 0) {
+              value = this.showPreview(value);
+            }
+          }
+          showDataObj[key] = value;
+        }
+        showDataObj = JSON.stringify(showDataObj);
+        previewData = formatJson(showDataObj);
+      }
+      return previewData;
+    },
+    showPreview(itemValue) {
+      // 找到变量本身
+      if (!itemValue) {
+        return;
+      }
+      let index = itemValue.indexOf("|");
+      if (index > -1) {
+        itemValue = itemValue.substring(0, index).trim();
+      }
+
+      this.mockVariableFuncs.forEach(f => {
+        if (!f.name) {
+          return;
+        }
+        itemValue += "|" + f.name;
+        if (f.params) {
+          itemValue += ":" + f.params.map(p => p.value).join(",");
+        }
+      });
+
+      itemValue = calculate(itemValue);
+      return itemValue;
+    },
+    onCopySuccess: function (e) {
+      if(this.apiStepIndex < this.apiInfoArray.length){
+        this.apiInfoArray[this.apiStepIndex].sharePopoverVisible = false;
+      }
+      this.$message({
+        message: this.$t('commons.copy_success'),
+        type: 'success'
+      });
+    },
+    onCopyError: function (e) {
+      if(this.apiStepIndex < this.apiInfoArray.length){
+        this.apiInfoArray[this.apiStepIndex].sharePopoverVisible = false;
+      }
+      this.$message.error(this.$t('api_report.error'));
+    },
+    handleScroll(){
+
+      //apiDocInfoDiv的总高度，是(每个item的高度+20)数量
+      let apiDocDivScrollTop = this.$refs.apiDocInfoDiv.scrollTop;
+      let apiDocDivClientTop = this.$refs.apiDocInfoDiv.clientHeight;
+
+      let scrolledHeigh = apiDocDivScrollTop+apiDocDivClientTop;
+      let lastIndex = 0;
+      for (let index = 0; index < this.apiInfoArray.length; index++) {
+        //判断移动到了第几个元素. 公式: 移动过的高度+页面显示高度-第index子元素的高度(含20px)>0 的 index最大值
+        if(scrolledHeigh>0){
+          lastIndex = index;
+          let itemHeight = this.$refs.apiDocInfoDivItem[index].offsetHeight+20;
+          scrolledHeigh = scrolledHeigh - itemHeight;
+        }else{
+          break;
+        }
+      }
+      this.apiStepIndex = lastIndex;
+      //检查上下文 3个以内的节点有没有查询出来
+      this.checkApiInfoNode(this.apiStepIndex);
+    },
+    redirectScroll(itemIndex){
+      //滚动条跳转：将滚动条下拉到显示对应对api接口的位置
+      // let apiDocDivClientTop = this.$refs.apiDocInfoDiv.clientHeight;
+      let apiDocDivClientTop = 0;
+      let itemHeightCount = 0;
+      for (let i = 0; i <= itemIndex-1; i++) {
+        let itemHeight = this.$refs.apiDocInfoDivItem[i].offsetHeight+20;
+        itemHeightCount+=itemHeight;
+      }
+      this.$refs.apiDocInfoDiv.scrollTop = (apiDocDivClientTop+itemHeightCount);
+    },
+    checkApiInfoNode(itemIndex){
+      //检查要展示的api信息节点，和上下个3个及以内的范围内数据有没有查询过
+      let beforeNodeIndex = itemIndex<3?0:(itemIndex-3);
+      let afterNodeIndex = (itemIndex+3)<this.apiInfoArray.length?(itemIndex+3):this.apiInfoArray.length;
+
+      for(let beforeIndex = itemIndex;beforeIndex < afterNodeIndex;beforeIndex++){
+        let apiInfo = this.apiInfoArray[beforeIndex];
+        if(apiInfo==null){
+          continue;
+        }
+        if(apiInfo == null || !apiInfo.selectedFlag){
+          let apiId = apiInfo.id;
+          if(!apiInfo.isSearching){
+            apiInfo.isSearching = true;
+            this.selectApiInfo(beforeIndex,apiId);
+          }
+        }
+      }
+
+      for(let afterIndex = beforeNodeIndex;afterIndex <itemIndex;afterIndex++){
+        let apiInfo = this.apiInfoArray[afterIndex];
+        if(apiInfo==null){
+          continue;
+        }
+        if(apiInfo == null || !apiInfo.selectedFlag){
+          let apiId = apiInfo.id;
+          if(!apiInfo.isSearching) {
+            apiInfo.isSearching = true;
+            this.selectApiInfo(afterIndex,apiId);
+          }
+        }
+      }
+    }
+  },
+}
+</script>
+
+<style scoped>
+.simpleFontClass {
+  font-weight: normal;
+  font-size: 14px;
+  margin-left: 10px;
+}
+
+.blackFontClass {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.smallFontClass {
+  font-size: 13px;
+  margin: 20px 10px;
+}
+
+.tip {
+  padding: 3px 5px;
+  font-size: 14px;
+  border-radius: 4px;
+  border-left: 4px solid #783887;
+}
+
+.apiInfoRow {
+  margin: 20px 10px;
+}
+
+.apiStatusTag {
+  margin: 20px 5px;
+}
+
+.showDataDiv {
+  background-color: #F5F7F9;
+  margin: 20px 10px;
+}
+
+/*
+步骤条中，已经完成后的节点样式和里面a标签的样式
+*/
+/deep/ .el-step__head.is-finish {
+  color: #C0C4CC;
+  border-color: #C0C4CC;
+}
+
+/deep/ .el-step__title.is-finish /deep/ .el-link.el-link--default {
+  color: #C0C4CC;
+}
+
+/*
+步骤条中，当前节点样式和当前a标签的样式
+*/
+/deep/ .el-step__head.is-process {
+  color: #783887;
+  border-color: #783887;
+}
+
+/deep/ .el-step__title.is-process /deep/ .el-link.el-link--default {
+  color: #783887;
+}
+
+.document-table {
+  margin: 20px 10px;
+  width: auto;
+}
+
+.document-table /deep/ .el-table__row {
+  font-size: 12px;
+  font-weight: initial;
+}
+
+.document-table /deep/ .has-gutter {
+  font-size: 12px;
+  color: #404040;
+}
+
+.document-table /deep/ td {
+  border-right: 0px solid #EBEEF5
+}
+
+.document-table /deep/ th {
+  background-color: #FAFAFA;
+  border-right: 0px solid #EBEEF5
+}
+.el-divider--horizontal {
+  margin: 12px 0;
+}
+</style>
diff --git a/frontend/src/business/components/api/definition/components/document/ApiDocumentItem.vue b/frontend/src/business/components/api/definition/components/document/ApiDocumentItem.vue
index bfd3dbb8de..73ec5ac3db 100644
--- a/frontend/src/business/components/api/definition/components/document/ApiDocumentItem.vue
+++ b/frontend/src/business/components/api/definition/components/document/ApiDocumentItem.vue
@@ -276,7 +276,6 @@
 </template>
 
 <script>
-import MsAnchor from "./Anchor";
 import {API_METHOD_COLOUR} from "@/business/components/api/definition/model/JsonData";
 import MsCodeEdit from "@/business/components/common/components/MsCodeEdit";
 import {formatJson,} from "@/common/js/format-utils";
@@ -293,7 +292,7 @@ export default {
   components: {
     Api,
     MsJsonCodeEdit,
-    MsAnchor, ApiStatus, MsCodeEdit,
+    ApiStatus, MsCodeEdit,
     "ApiDocumentBatchShare": apiDocumentBatchShare.default
   },
   data() {
diff --git a/frontend/src/business/components/api/definition/components/document/TestScroll.vue b/frontend/src/business/components/api/definition/components/document/TestScroll.vue
deleted file mode 100644
index 1934746372..0000000000
--- a/frontend/src/business/components/api/definition/components/document/TestScroll.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div>
-    <div class="questionList-content-list">
-    </div>
-  </div>
-</template>
-
-<script>
-
-
-export default {
-  name: "TestScroll",
-  components: {
-  },
-  data() {
-    return {
-      seeThis:0,
-      tabs:['tab0','tab1','tab2'],
-    }
-  },
-  props: {
-    projectId: String,
-    documentId: String,
-    moduleIds: Array,
-    pageHeaderHeight:Number,
-  },
-  activated() {
-  },
-  created () {
-    window.addEventListener('scroll',this.handleScroll)
-  },
-  mounted() {
-  },
-  computed: {
-  },
-  watch: {
-  },
-  methods: {
-    goAnchor(index) { // 也可以用scrollIntoView方法， 但由于这里头部设置了固定定位，所以用了这种方法
-      // document.querySelector('#anchor'+index).scrollIntoView()
-      this.seeThis = index; var anchor = this.$el.querySelector('#anchor'+index)
-      document.body.scrollTop = anchor.offsetTop-100
-      document.documentElement.scrollTop = anchor.offsetTop-100
-    },
-    handleScroll(){
-      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
-      let offsetTop = document.querySelector('#boxFixed').offsetTop; // 要滚动到顶部吸附的元素的偏移量
-      var anchorOffset0 = this.$el.querySelector('#anchor0').offsetTop-100
-      var anchorOffset1 = this.$el.querySelector('#anchor1').offsetTop-100
-      var anchorOffset2 = this.$el.querySelector('#anchor2').offsetTop-100
-      if(scrollTop>anchorOffset0&&scrollTop<anchorOffset1){
-        this.seeThis = 0
-      }
-      if(scrollTop>anchorOffset1&&scrollTop<anchorOffset2){
-        this.seeThis = 1
-      }
-      if(scrollTop>anchorOffset2){
-        this.seeThis = 2
-      }
-    },
-  },
-}
-</script>
-
-<style scoped>
-</style>
diff --git a/frontend/src/business/components/api/definition/components/request/tcp/TcpBasisParameters.vue b/frontend/src/business/components/api/definition/components/request/tcp/TcpBasisParameters.vue
index 6a093a848a..c549f27f58 100644
--- a/frontend/src/business/components/api/definition/components/request/tcp/TcpBasisParameters.vue
+++ b/frontend/src/business/components/api/definition/components/request/tcp/TcpBasisParameters.vue
@@ -4,9 +4,7 @@
       <el-col :span="21" style="padding-bottom: 20px">
         <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;margin: 10px">
           <el-form class="tcp" :model="request" :rules="rules" ref="request" :disabled="isReadOnly" style="margin: 20px">
-
             <el-tabs v-model="activeName" class="request-tabs">
-
               <!--query 参数-->
               <el-tab-pane name="parameters">
                 <template v-slot:label>
@@ -18,8 +16,7 @@
 
               <el-tab-pane :label="$t('api_test.definition.request.message_template')" name="request">
                 <div class="send-request">
-                  <ms-code-edit mode="text" :read-only="isReadOnly" :data.sync="request.request"
-                                :modes="['text', 'json', 'xml', 'html']" theme="eclipse"/>
+                  <ms-code-edit mode="text" :read-only="isReadOnly" :data.sync="request.request" :modes="['text', 'json', 'xml', 'html']" theme="eclipse"/>
                 </div>
               </el-tab-pane>
 
@@ -75,8 +72,6 @@
                     </el-form-item>
                   </el-col>
                 </el-row>
-
-
                 <el-row :gutter="10" style="margin-left: 30px">
                   <el-col :span="9">
                     <el-form-item :label="$t('api_test.request.tcp.re_use_connection')">
@@ -95,10 +90,7 @@
                   </el-col>
                 </el-row>
               </el-tab-pane>
-
             </el-tabs>
-
-
           </el-form>
         </div>
 
diff --git a/frontend/src/business/components/performance/test/components/PerformanceBasicConfig.vue b/frontend/src/business/components/performance/test/components/PerformanceBasicConfig.vue
index 9b45a65725..349ab2d841 100644
--- a/frontend/src/business/components/performance/test/components/PerformanceBasicConfig.vue
+++ b/frontend/src/business/components/performance/test/components/PerformanceBasicConfig.vue
@@ -328,7 +328,13 @@ export default {
         return false;
       }
       return true;
-    }
+    },
+    beforeUploadJmx(file){
+      this.$refs.existFiles.beforeUploadFile(file);
+    },
+    handleUpload(file){
+      this.$refs.existFiles.handleUpload(file);
+    },
   },
 }
 </script>
diff --git a/frontend/src/document/Document.vue b/frontend/src/document/Document.vue
index 9b0c2b64ef..330ceded93 100644
--- a/frontend/src/document/Document.vue
+++ b/frontend/src/document/Document.vue
@@ -9,12 +9,10 @@
 <script>
 
 import ApiDocumentItem from "@/business/components/api/definition/components/document/ApiDocumentItem";
-import TestScroll from "@/business/components/api/definition/components/document/TestScroll";
 
 export default {
   name: "ApiDocumentsPage",
   components: {
-    TestScroll,
     ApiDocumentItem,
   },
   data() {
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index af75fd4080..22d0db5eb4 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -50,6 +50,7 @@ export default {
     create_time: 'Created Time',
     update_time: 'Updated Time',
     add: 'Add',
+    preview: 'Preview',
     member: 'Member',
     email: 'Email',
     phone: 'Phone',
@@ -117,6 +118,7 @@ export default {
     weeks_6: 'Sat',
     test_unit: 'tests',
     remove: 'Remove',
+    next_level: "Next level",
     remove_cancel: 'Remove Cancel',
     remove_success: 'Remove Success',
     tips: 'The authentication information has expired, please login again',
@@ -629,6 +631,7 @@ export default {
         assertions_rule: "Assertion rule",
         response_header: "Response header",
         response_body: "Response body",
+        response_template: "Response template",
         console: "Console",
         status_code: "Status code",
         query_info: "Follow the address bar? The following parameters, such as updateapi?id=112",
@@ -648,6 +651,15 @@ export default {
         other_config: "Other Config",
         message_template: "Message Template",
         tcp_parameter_tip: "The request parameters can be referenced in the request template ${XXX}",
+        esb_table: {
+          name: "name",
+          type: "type",
+          length: "length",
+          required: "Required",
+          desc: "Description",
+          value: "Data",
+          not_required: "Not required",
+        }
       },
       document: {
         order: "Order",
@@ -874,7 +886,9 @@ export default {
         code_template_set_global_variable: "Set Global variable",
         code_template_get_response_header: "Get Response Header",
         code_template_get_response_code: "Get Response Code",
-        code_template_get_response_result: "Get Response Result"
+        code_template_get_response_result: "Get Response Result",
+        code_add_report_length : "Add report length to head",
+        code_hide_report_length : "Hide report length"
       },
       dubbo: {
         protocol: "protocol",
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 75775fe6e4..1dddefd892 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -51,6 +51,7 @@ export default {
     create_time: '创建时间',
     update_time: '更新时间',
     add: '添加',
+    preview: '预览',
     member: '成员',
     email: '邮箱',
     phone: '电话',
@@ -118,6 +119,7 @@ export default {
     port_cannot_be_empty: '端口号不能为空',
     account_cannot_be_empty: '帐户不能为空',
     remove: '移除',
+    next_level: "下一级",
     remove_cancel: '移除取消',
     remove_success: '移除成功',
     tips: '认证信息已过期，请重新登录',
@@ -630,6 +632,7 @@ export default {
         assertions_rule: "断言规则",
         response_header: "响应头",
         response_body: "响应体",
+        response_template: "响应报文模版",
         console: "控制台",
         status_code: "状态码",
         query_info: "地址栏中跟在？后面的参数,如updateapi?id=112",
@@ -649,6 +652,15 @@ export default {
         other_config: "其他设置",
         message_template: "报文模版",
         tcp_parameter_tip: "请求参数可以在请求模版通过${xxx}引用",
+        esb_table: {
+          name: "参数名",
+          type: "类型",
+          length: "长度",
+          required: "必填",
+          desc: "描述",
+          value: "数据",
+          not_required: "非必填",
+        }
       },
       document: {
         order: "排序方式",
@@ -876,7 +888,9 @@ export default {
         code_template_set_global_variable: "设置全局变量",
         code_template_get_response_header: "获取响应头",
         code_template_get_response_code: "获取响应码",
-        code_template_get_response_result: "获取响应结果"
+        code_template_get_response_result: "获取响应结果",
+        code_add_report_length : "报文头添加长度",
+        code_hide_report_length : "隐藏报文长度"
       },
       dubbo: {
         protocol: "协议",
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index 8057211e0b..d23b758a12 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -51,6 +51,7 @@ export default {
     create_time: '創建時間',
     update_time: '更新時間',
     add: '添加',
+    preview: '預覽',
     member: '成員',
     email: '郵箱',
     phone: '電話',
@@ -118,6 +119,7 @@ export default {
     port_cannot_be_empty: '端口號不能為空',
     account_cannot_be_empty: '帳戶不能為空',
     remove: '移除',
+    next_level: "下一級",
     remove_cancel: '移除取消',
     remove_success: '移除成功',
     tips: '認證信息已過期，請重新登錄',
@@ -629,6 +631,7 @@ export default {
         assertions_rule: "斷言規則",
         response_header: "響應頭",
         response_body: "響應體",
+        response_template: "響應報文模板",
         console: "控制臺",
         status_code: "狀態碼",
         query_info: "地址欄中跟在？後面的參數,如updateapi?id=112",
@@ -648,6 +651,15 @@ export default {
         other_config: "其他設置",
         message_template: "報文模版",
         tcp_parameter_tip: "請求參數可以在請求模版通過${xxx}引用",
+        esb_table: {
+          name: "參數名",
+          type: "類型",
+          length: "長度",
+          required: "必填",
+          desc: "描述",
+          value: "數據",
+          not_required: "非必填",
+        }
       },
       document: {
         order: "排序方式",
@@ -875,7 +887,9 @@ export default {
         code_template_set_global_variable: "設置全局變量",
         code_template_get_response_header: "獲取響應頭",
         code_template_get_response_code: "獲取響應碼",
-        code_template_get_response_result: "獲取響應結果"
+        code_template_get_response_result: "獲取響應結果",
+        code_add_report_length : "報文头添加長度",
+        code_hide_report_length : "隱藏報文長度"
       },
       dubbo: {
         protocol: "協議",

From 2c41d790ebd527ad78d291aa587a04b653cf0b4e Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Sat, 20 Mar 2021 09:59:00 +0800
Subject: [PATCH 07/22] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA)?=
 =?UTF-8?q?:=20=E4=BF=AE=E5=A4=8D=E5=8F=AA=E8=AF=BB=E4=BA=BA=E5=91=98?=
 =?UTF-8?q?=E8=83=BD=E5=88=9B=E5=BB=BA=E9=A1=B9=E7=9B=AE=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/business/components/common/head/ProjectSwitch.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/business/components/common/head/ProjectSwitch.vue b/frontend/src/business/components/common/head/ProjectSwitch.vue
index 0cb996bd81..3c5b9ad97e 100644
--- a/frontend/src/business/components/common/head/ProjectSwitch.vue
+++ b/frontend/src/business/components/common/head/ProjectSwitch.vue
@@ -10,7 +10,7 @@
       </template>
       <search-list :current-project.sync="currentProject"/>
       <el-divider/>
-      <el-menu-item :index="'/setting/project/create'">
+      <el-menu-item :index="'/setting/project/create'" v-permission="['test_manager','test_user']">
         <font-awesome-icon :icon="['fa', 'plus']"/>
         <span style="padding-left: 7px;">{{ $t("project.create") }}</span>
       </el-menu-item>

From 78506f814f121cd9d1f774d02a40b8f56a11bf6c Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Sat, 20 Mar 2021 10:44:30 +0800
Subject: [PATCH 08/22] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA)?=
 =?UTF-8?q?:=20=E4=BF=AE=E5=A4=8D=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=E6=97=B6=E6=9F=90=E4=BA=9B=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E6=9C=AA=E5=AF=BC=E5=87=BA=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../excel/domain/TestCaseExcelData.java       |  4 +--
 .../excel/domain/TestCaseExcelDataCn.java     |  8 ++---
 .../excel/domain/TestCaseExcelDataTw.java     |  8 ++---
 .../excel/domain/TestCaseExcelDataUs.java     |  8 ++---
 .../excel/listener/TestCaseDataListener.java  |  6 ++--
 .../track/service/TestCaseService.java        | 36 ++++++++++---------
 .../db/migration/V78__v1.8_release.sql        |  4 ++-
 7 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelData.java b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelData.java
index 8c344e6e3f..161486e0fc 100644
--- a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelData.java
+++ b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelData.java
@@ -20,8 +20,8 @@ public class TestCaseExcelData {
     private String priority;
     @ExcelIgnore
     private String tags;
-    @ExcelIgnore
-    private String method;
+//    @ExcelIgnore
+//    private String method;
     @ExcelIgnore
     private String prerequisite;
     @ExcelIgnore
diff --git a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataCn.java b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataCn.java
index 847dcd845e..218a59e01e 100644
--- a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataCn.java
+++ b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataCn.java
@@ -45,10 +45,10 @@ public class TestCaseExcelDataCn extends TestCaseExcelData {
     @Length(min = 0, max = 1000)
     private String tags;
 
-    @NotBlank(message = "{cannot_be_null}")
-    @ExcelProperty("测试方式")
-    @Pattern(regexp = "(^manual$)|(^auto$)", message = "{test_case_method_validate}")
-    private String method;
+//    @NotBlank(message = "{cannot_be_null}")
+//    @ExcelProperty("测试方式")
+//    @Pattern(regexp = "(^manual$)|(^auto$)", message = "{test_case_method_validate}")
+//    private String method;
 
     @ColumnWidth(50)
     @ExcelProperty("前置条件")
diff --git a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataTw.java b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataTw.java
index 4137f4e76c..d60c24fa2a 100644
--- a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataTw.java
+++ b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataTw.java
@@ -45,10 +45,10 @@ public class TestCaseExcelDataTw extends TestCaseExcelData {
     @Length(min = 0, max = 1000)
     private String tags;
 
-    @NotBlank(message = "{cannot_be_null}")
-    @ExcelProperty("測試方式")
-    @Pattern(regexp = "(^manual$)|(^auto$)", message = "{test_case_method_validate}")
-    private String method;
+//    @NotBlank(message = "{cannot_be_null}")
+//    @ExcelProperty("測試方式")
+//    @Pattern(regexp = "(^manual$)|(^auto$)", message = "{test_case_method_validate}")
+//    private String method;
 
     @ColumnWidth(50)
     @ExcelProperty("前置條件")
diff --git a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataUs.java b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataUs.java
index 1795d0545a..6916c3a5ec 100644
--- a/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataUs.java
+++ b/backend/src/main/java/io/metersphere/excel/domain/TestCaseExcelDataUs.java
@@ -46,10 +46,10 @@ public class TestCaseExcelDataUs extends TestCaseExcelData {
     @Length(min = 0, max = 1000)
     private String tags;
 
-    @NotBlank(message = "{cannot_be_null}")
-    @ExcelProperty("Method")
-    @Pattern(regexp = "(^manual$)|(^auto$)", message = "{test_case_method_validate}")
-    private String method;
+//    @NotBlank(message = "{cannot_be_null}")
+//    @ExcelProperty("Method")
+//    @Pattern(regexp = "(^manual$)|(^auto$)", message = "{test_case_method_validate}")
+//    private String method;
 
     @ColumnWidth(50)
     @ExcelProperty("Prerequisite")
diff --git a/backend/src/main/java/io/metersphere/excel/listener/TestCaseDataListener.java b/backend/src/main/java/io/metersphere/excel/listener/TestCaseDataListener.java
index 6ec7448a8f..0e5bf1d6ae 100644
--- a/backend/src/main/java/io/metersphere/excel/listener/TestCaseDataListener.java
+++ b/backend/src/main/java/io/metersphere/excel/listener/TestCaseDataListener.java
@@ -53,9 +53,9 @@ public class TestCaseDataListener extends EasyExcelListener<TestCaseExcelData> {
             }
         }
 
-        if (StringUtils.equals(data.getType(), TestCaseConstants.Type.Functional.getValue()) && StringUtils.equals(data.getMethod(), TestCaseConstants.Method.Auto.getValue())) {
-            stringBuilder.append(Translator.get("functional_method_tip") + "; ");
-        }
+//        if (StringUtils.equals(data.getType(), TestCaseConstants.Type.Functional.getValue()) && StringUtils.equals(data.getMethod(), TestCaseConstants.Method.Auto.getValue())) {
+//            stringBuilder.append(Translator.get("functional_method_tip") + "; ");
+//        }
 
         if (!userIds.contains(data.getMaintainer())) {
             stringBuilder.append(Translator.get("user_not_exists") + "：" + data.getMaintainer() + "; ");
diff --git a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java b/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
index 808fda0cc8..85e342970a 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
@@ -131,8 +131,8 @@ public class TestCaseService {
                     .andNodePathEqualTo(testCase.getNodePath())
                     .andTypeEqualTo(testCase.getType())
                     .andMaintainerEqualTo(testCase.getMaintainer())
-                    .andPriorityEqualTo(testCase.getPriority())
-                    .andMethodEqualTo(testCase.getMethod());
+                    .andPriorityEqualTo(testCase.getPriority());
+//                    .andMethodEqualTo(testCase.getMethod());
 
 //            if (StringUtils.isNotBlank(testCase.getNodeId())) {
 //                criteria.andNodeIdEqualTo(testCase.getTestId());
@@ -432,7 +432,7 @@ public class TestCaseService {
         List<TestCaseExcelData> list = new ArrayList<>();
         StringBuilder path = new StringBuilder("");
         List<String> types = TestCaseConstants.Type.getValues();
-        List<String> methods = TestCaseConstants.Method.getValues();
+//        List<String> methods = TestCaseConstants.Method.getValues();
         SessionUser user = SessionUtils.getUser();
         for (int i = 1; i <= 5; i++) {
             TestCaseExcelData data = new TestCaseExcelData();
@@ -442,11 +442,11 @@ public class TestCaseService {
             data.setPriority("P" + i % 4);
             String type = types.get(i % 3);
             data.setType(type);
-            if (StringUtils.equals(TestCaseConstants.Type.Functional.getValue(), type)) {
-                data.setMethod(TestCaseConstants.Method.Manual.getValue());
-            } else {
-                data.setMethod(methods.get(i % 2));
-            }
+//            if (StringUtils.equals(TestCaseConstants.Type.Functional.getValue(), type)) {
+//                data.setMethod(TestCaseConstants.Method.Manual.getValue());
+//            } else {
+//                data.setMethod(methods.get(i % 2));
+//            }
             data.setPrerequisite(Translator.get("preconditions_optional"));
             data.setStepDesc("1. " + Translator.get("step_tip_separate") +
                     "\n2. " + Translator.get("step_tip_order") + "\n3. " + Translator.get("step_tip_optional"));
@@ -461,7 +461,7 @@ public class TestCaseService {
         explain.setName(Translator.get("do_not_modify_header_order"));
         explain.setNodePath(Translator.get("module_created_automatically"));
         explain.setType(Translator.get("options") + "（functional、performance、api）");
-        explain.setMethod(Translator.get("options") + "（manual、auto）");
+//        explain.setMethod(Translator.get("options") + "（manual、auto）");
         explain.setPriority(Translator.get("options") + "（P0、P1、P2、P3）");
         explain.setMaintainer(Translator.get("please_input_workspace_member"));
 
@@ -483,7 +483,11 @@ public class TestCaseService {
     private List<TestCaseExcelData> generateTestCaseExcel(TestCaseBatchRequest request) {
         ServiceUtils.getSelectAllIds(request, request.getCondition(),
                 (query) -> extTestCaseMapper.selectIds(query));
-        List<OrderRequest> orderList = ServiceUtils.getDefaultOrder(request.getOrders());
+        QueryTestCaseRequest condition = request.getCondition();
+        List<OrderRequest> orderList = new ArrayList<>();
+        if (condition != null) {
+            orderList = ServiceUtils.getDefaultOrder(condition.getOrders());
+        }
         OrderRequest order = new OrderRequest();
         order.setName("sort");
         order.setType("desc");
@@ -499,10 +503,10 @@ public class TestCaseService {
             data.setNodePath(t.getNodePath());
             data.setPriority(t.getPriority());
             data.setType(t.getType());
-            data.setMethod(t.getMethod());
+//            data.setMethod(t.getMethod());
             data.setPrerequisite(t.getPrerequisite());
             data.setTags(t.getTags());
-            if (t.getMethod().equals("manual")) {
+            if (StringUtils.equals(t.getMethod(), "manual") || StringUtils.isBlank(t.getMethod())) {
                 String steps = t.getSteps();
                 String setp = "";
                 setp = steps;
@@ -530,19 +534,19 @@ public class TestCaseService {
                 result.setLength(0);
                 data.setRemark(t.getRemark());
 
-            } else if (t.getMethod().equals("auto") && t.getType().equals("api")) {
+            } else if ("auto".equals(t.getMethod()) && "api".equals(t.getType())) {
                 data.setStepDesc("");
                 data.setStepResult("");
-                if (t.getTestId() != null && t.getTestId().equals("other")) {
+                if (t.getTestId() != null && "other".equals(t.getTestId())) {
                     data.setRemark(t.getOtherTestName());
                 } else {
                     data.setRemark("[" + t.getApiName() + "]" + "\n" + t.getRemark());
                 }
 
-            } else if (t.getMethod().equals("auto") && t.getType().equals("performance")) {
+            } else if ("auto".equals(t.getMethod()) && "performance".equals(t.getType())) {
                 data.setStepDesc("");
                 data.setStepResult("");
-                if (t.getTestId() != null && t.getTestId().equals("other")) {
+                if (t.getTestId() != null && "other".equals(t.getTestId())) {
                     data.setRemark(t.getOtherTestName());
                 } else {
                     data.setRemark(t.getPerformName());
diff --git a/backend/src/main/resources/db/migration/V78__v1.8_release.sql b/backend/src/main/resources/db/migration/V78__v1.8_release.sql
index 9d4ff537cf..3b0558731e 100644
--- a/backend/src/main/resources/db/migration/V78__v1.8_release.sql
+++ b/backend/src/main/resources/db/migration/V78__v1.8_release.sql
@@ -161,4 +161,6 @@ UPDATE file_metadata JOIN (SELECT file_id, project_id
 SET file_metadata.project_id = temp.project_id;
 -- add execution_times testPlan
 alter table test_plan
-    add execution_times int null;
\ No newline at end of file
+    add execution_times int null;
+
+alter table test_case modify method varchar(15) null comment 'Test case method type';
\ No newline at end of file

From e740d55ac865b69c0597eab89455875f604ef4db Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Sat, 20 Mar 2021 11:02:15 +0800
Subject: [PATCH 09/22] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92)?=
 =?UTF-8?q?:=20=E4=BF=AE=E5=A4=8D=E5=85=B3=E8=81=94=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E7=94=A8=E4=BE=8B=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../track/controller/TestPlanApiCaseController.java |  4 +---
 .../track/service/TestPlanApiCaseService.java       | 13 ++++++++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/backend/src/main/java/io/metersphere/track/controller/TestPlanApiCaseController.java b/backend/src/main/java/io/metersphere/track/controller/TestPlanApiCaseController.java
index f3fcecf316..4865aa12b8 100644
--- a/backend/src/main/java/io/metersphere/track/controller/TestPlanApiCaseController.java
+++ b/backend/src/main/java/io/metersphere/track/controller/TestPlanApiCaseController.java
@@ -33,9 +33,7 @@ public class TestPlanApiCaseController {
 
     @PostMapping("/relevance/list/{goPage}/{pageSize}")
     public Pager<List<ApiTestCaseDTO>> relevanceList(@PathVariable int goPage, @PathVariable int pageSize, @RequestBody ApiTestCaseRequest request) {
-        Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
-        request.setWorkspaceId(SessionUtils.getCurrentWorkspaceId());
-        return PageUtils.setPageInfo(page, testPlanApiCaseService.relevanceList(request));
+        return testPlanApiCaseService.relevanceList(goPage, pageSize, request);
     }
 
     @GetMapping("/delete/{id}")
diff --git a/backend/src/main/java/io/metersphere/track/service/TestPlanApiCaseService.java b/backend/src/main/java/io/metersphere/track/service/TestPlanApiCaseService.java
index 4f5ae37971..df789f41ad 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestPlanApiCaseService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestPlanApiCaseService.java
@@ -2,6 +2,8 @@ package io.metersphere.track.service;
 
 import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
+import com.github.pagehelper.Page;
+import com.github.pagehelper.PageHelper;
 import io.metersphere.api.dto.definition.ApiTestCaseDTO;
 import io.metersphere.api.dto.definition.ApiTestCaseRequest;
 import io.metersphere.api.dto.definition.RunDefinitionRequest;
@@ -18,7 +20,10 @@ import io.metersphere.base.domain.TestPlanApiCase;
 import io.metersphere.base.domain.TestPlanApiCaseExample;
 import io.metersphere.base.mapper.TestPlanApiCaseMapper;
 import io.metersphere.base.mapper.ext.ExtTestPlanApiCaseMapper;
+import io.metersphere.commons.utils.PageUtils;
+import io.metersphere.commons.utils.Pager;
 import io.metersphere.commons.utils.ServiceUtils;
+import io.metersphere.commons.utils.SessionUtils;
 import io.metersphere.track.request.testcase.TestPlanApiCaseBatchRequest;
 import org.apache.jmeter.testelement.TestElement;
 import org.springframework.context.annotation.Lazy;
@@ -61,13 +66,15 @@ public class TestPlanApiCaseService {
         return extTestPlanApiCaseMapper.getExecResultByPlanId(plan);
     }
 
-    public List<ApiTestCaseDTO> relevanceList(ApiTestCaseRequest request) {
+    public Pager<List<ApiTestCaseDTO>> relevanceList(int goPage, int pageSize, ApiTestCaseRequest request) {
         List<String> ids = apiTestCaseService.selectIdsNotExistsInPlan(request.getProjectId(), request.getPlanId());
+        Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
         if (CollectionUtils.isEmpty(ids)) {
-            return new ArrayList<>();
+            return PageUtils.setPageInfo(page, new ArrayList<>());
         }
         request.setIds(ids);
-        return apiTestCaseService.listSimple(request);
+        request.setWorkspaceId(SessionUtils.getCurrentWorkspaceId());
+        return PageUtils.setPageInfo(page, apiTestCaseService.listSimple(request));
     }
 
     public int delete(String id) {

From b92364ff6ff809d455aa5943a3af4814fb815ba7 Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Sat, 20 Mar 2021 12:06:51 +0800
Subject: [PATCH 10/22] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA)?=
 =?UTF-8?q?:=20=E4=BF=AE=E5=A4=8D=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92?=
 =?UTF-8?q?=E7=94=A8=E4=BE=8B=E6=95=B0=E9=94=99=E8=AF=AF=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/mapper/ext/ExtTestCaseMapper.xml     | 18 ++---
 .../track/service/TrackService.java           | 73 +++++++++++++++----
 2 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml
index edb7e5ec9b..aeef002a4e 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml
@@ -372,20 +372,20 @@
     <select id="getTestPlanCase" resultType="int">
         select count(s)
         from (
-                 select id as s
-                 from test_plan_test_case tptc
+                 select tptc.id as s
+                 from test_plan_test_case tptc join test_case on tptc.case_id = test_case.id
                  where tptc.plan_id = #{planId}
                  union all
-                 select id as s
-                 from test_plan_api_scenario tpas
-                 where tpas.test_plan_id = #{planId}
+                 select tpas.id as s
+                 from test_plan_api_scenario tpas join api_scenario on tpas.api_scenario_id = api_scenario.id
+                 where tpas.test_plan_id = #{planId} and api_scenario.status != 'Trash'
                  union all
-                 select id as s
-                 from test_plan_api_case tpac
+                 select tpac.id as s
+                 from test_plan_api_case tpac join api_test_case on tpac.api_case_id = api_test_case.id
                  where tpac.test_plan_id = #{planId}
                  union all
-                 select id as s
-                 from test_plan_load_case tplc
+                 select tplc.id as s
+                 from test_plan_load_case tplc join load_test on tplc.load_case_id = load_test.id
                  where tplc.test_plan_id = #{planId}
              ) as temp
     </select>
diff --git a/backend/src/main/java/io/metersphere/track/service/TrackService.java b/backend/src/main/java/io/metersphere/track/service/TrackService.java
index 3bcdf1cf79..f870907533 100644
--- a/backend/src/main/java/io/metersphere/track/service/TrackService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TrackService.java
@@ -1,13 +1,19 @@
 package io.metersphere.track.service;
 
+import io.metersphere.api.dto.automation.ScenarioStatus;
 import io.metersphere.base.domain.*;
 import io.metersphere.base.mapper.*;
 import io.metersphere.base.mapper.ext.ExtTestCaseMapper;
+import io.metersphere.base.mapper.ext.ExtTestPlanTestCaseMapper;
+import io.metersphere.commons.constants.TestPlanTestCaseStatus;
 import io.metersphere.commons.utils.DateUtils;
+import io.metersphere.commons.utils.MathUtils;
 import io.metersphere.performance.base.ChartsData;
+import io.metersphere.track.dto.TestPlanDTOWithMetric;
 import io.metersphere.track.response.BugStatustics;
 import io.metersphere.track.response.TestPlanBugCount;
 import io.metersphere.track.response.TrackCountResult;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 import javax.annotation.Resource;
@@ -28,13 +34,13 @@ public class TrackService {
     @Resource
     private TestPlanMapper testPlanMapper;
     @Resource
-    private TestPlanTestCaseMapper testPlanTestCaseMapper;
+    private ExtTestPlanTestCaseMapper extTestPlanTestCaseMapper;
     @Resource
-    private TestPlanLoadCaseMapper testPlanLoadCaseMapper;
+    private TestPlanApiCaseService testPlanApiCaseService;
     @Resource
-    private TestPlanApiCaseMapper testPlanApiCaseMapper;
+    private TestPlanScenarioCaseService testPlanScenarioCaseService;
     @Resource
-    private TestPlanApiScenarioMapper testPlanApiScenarioMapper;
+    private TestPlanLoadCaseService testPlanLoadCaseService;
 
     public List<TrackCountResult> countPriority(String projectId) {
         return extTestCaseMapper.countPriority(projectId);
@@ -132,11 +138,13 @@ public class TrackService {
 
             int planBugSize = getPlanBugSize(plan.getId());
             testPlanBug.setBugSize(planBugSize);
-            testPlanBug.setPassRage(getPlanPassRage(plan.getId(), planCaseSize));
+            double planPassRage = getPlanPassRage(plan.getId());
+            testPlanBug.setPassRage(planPassRage + "%");
             list.add(testPlanBug);
 
             totalBugSize += planBugSize;
             totalCaseSize += planCaseSize;
+
         }
 
         bugStatustics.setList(list);
@@ -156,13 +164,52 @@ public class TrackService {
         return extTestCaseMapper.getTestPlanBug(planId);
     }
 
-    private String getPlanPassRage(String planId, int totalSize) {
-        if (totalSize == 0) {
-            return "-";
-        }
-        int passSize = extTestCaseMapper.getTestPlanPassCase(planId);
-        float rage = (float) passSize * 100 / totalSize;
-        DecimalFormat df = new DecimalFormat("0.0");
-        return df.format(rage) + "%";
+    private double getPlanPassRage(String planId) {
+        TestPlanDTOWithMetric testPlan = new TestPlanDTOWithMetric();
+        testPlan.setTested(0);
+        testPlan.setPassed(0);
+        testPlan.setTotal(0);
+
+        List<String> functionalExecResults = extTestPlanTestCaseMapper.getExecResultByPlanId(planId);
+        functionalExecResults.forEach(item -> {
+            if (!StringUtils.equals(item, TestPlanTestCaseStatus.Prepare.name())
+                    && !StringUtils.equals(item, TestPlanTestCaseStatus.Underway.name())) {
+                testPlan.setTested(testPlan.getTested() + 1);
+                if (StringUtils.equals(item, TestPlanTestCaseStatus.Pass.name())) {
+                    testPlan.setPassed(testPlan.getPassed() + 1);
+                }
+            }
+        });
+
+        List<String> apiExecResults = testPlanApiCaseService.getExecResultByPlanId(planId);
+        apiExecResults.forEach(item -> {
+            if (StringUtils.isNotBlank(item)) {
+                testPlan.setTested(testPlan.getTested() + 1);
+                if (StringUtils.equals(item, "success")) {
+                    testPlan.setPassed(testPlan.getPassed() + 1);
+                }
+            }
+        });
+
+        List<String> scenarioExecResults = testPlanScenarioCaseService.getExecResultByPlanId(planId);
+        scenarioExecResults.forEach(item -> {
+            if (StringUtils.isNotBlank(item)) {
+                testPlan.setTested(testPlan.getTested() + 1);
+                if (StringUtils.equals(item, ScenarioStatus.Success.name())) {
+                    testPlan.setPassed(testPlan.getPassed() + 1);
+                }
+            }
+        });
+
+        List<String> loadResults = testPlanLoadCaseService.getStatus(planId);
+        loadResults.forEach(item -> {
+            if (StringUtils.isNotBlank(item)) {
+                testPlan.setTested(testPlan.getTested() + 1);
+                if (StringUtils.equals(item, "success")) {
+                    testPlan.setPassed(testPlan.getPassed() + 1);
+                }
+            }
+        });
+        return MathUtils.getPercentWithDecimal(testPlan.getTested() == 0 ? 0 : testPlan.getPassed() * 1.0 / testPlan.getTested());
     }
 }

From 807bdfe841b967396c509d23824447daa8ba6336 Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Sat, 20 Mar 2021 12:46:46 +0800
Subject: [PATCH 11/22] =?UTF-8?q?fix(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE)?=
 =?UTF-8?q?:=20=E4=B8=BB=E9=A2=98=E8=89=B2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/components/MsTabButton.vue     |  6 +++---
 .../components/track/plan/view/TestPlanView.vue      |  5 ++++-
 .../track/review/view/TestCaseReviewView.vue         |  5 ++++-
 frontend/src/common/css/main.css                     | 12 ++++++------
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/business/components/common/components/MsTabButton.vue b/frontend/src/business/components/common/components/MsTabButton.vue
index 45431edd4f..d3c5def1d5 100644
--- a/frontend/src/business/components/common/components/MsTabButton.vue
+++ b/frontend/src/business/components/common/components/MsTabButton.vue
@@ -103,16 +103,16 @@ export default {
 
 .active {
   border: solid 1px #6d317c;
-  background-color: var(--color);
+  background-color: var(--primary_color);
   color: #FFFFFF;
 }
 
 .case-button {
-  border-left: solid 1px var(--color);
+  border-left: solid 1px var(--primary_color);
 }
 
 .item{
-  border: solid 1px var(--color);
+  border: solid 1px var(--primary_color);
 }
 
 </style>
diff --git a/frontend/src/business/components/track/plan/view/TestPlanView.vue b/frontend/src/business/components/track/plan/view/TestPlanView.vue
index adece5b6d9..570ad8f804 100644
--- a/frontend/src/business/components/track/plan/view/TestPlanView.vue
+++ b/frontend/src/business/components/track/plan/view/TestPlanView.vue
@@ -10,7 +10,7 @@
           @dataChange="changePlan"/>
       </template>
       <template v-slot:menu>
-        <el-menu v-if="isMenuShow" active-text-color="#6d317c" :default-active="activeIndex"
+        <el-menu v-if="isMenuShow" :active-text-color="color" :default-active="activeIndex"
                  class="el-menu-demo header-menu" mode="horizontal" @select="handleSelect">
           <el-menu-item index="functional">功能测试用例</el-menu-item>
           <el-menu-item index="api">接口测试用例</el-menu-item>
@@ -71,6 +71,9 @@
       computed: {
         planId: function () {
           return this.$route.params.planId;
+        },
+        color: function () {
+          return `var(--primary_color)`
         }
       },
       watch: {
diff --git a/frontend/src/business/components/track/review/view/TestCaseReviewView.vue b/frontend/src/business/components/track/review/view/TestCaseReviewView.vue
index cd6b54f4f2..e787d8bf6a 100644
--- a/frontend/src/business/components/track/review/view/TestCaseReviewView.vue
+++ b/frontend/src/business/components/track/review/view/TestCaseReviewView.vue
@@ -9,7 +9,7 @@
           @dataChange="changeReview"/>
       </template>
       <template v-slot:menu>
-        <el-menu v-if="isMenuShow" active-text-color="#6d317c"
+        <el-menu v-if="isMenuShow" :active-text-color="color"
                  class="el-menu-demo header-menu" mode="horizontal" @select="handleSelect"
                  :default-active="activeIndex">
           <el-menu-item index="functional">功能测试用例</el-menu-item>
@@ -78,6 +78,9 @@ export default {
   computed: {
     reviewId: function () {
       return this.$route.params.reviewId;
+    },
+    color: function () {
+      return `var(--primary_color)`
     }
   },
   mounted() {
diff --git a/frontend/src/common/css/main.css b/frontend/src/common/css/main.css
index 2595486214..54f0383933 100644
--- a/frontend/src/common/css/main.css
+++ b/frontend/src/common/css/main.css
@@ -62,19 +62,19 @@ html,body {
 
 /* <-- 表格拖拽表头调整宽度，在 t-bable 上添加 border 属性，并添加 adjust-table 类名 */
 .adjust-table td {
-  border-right: 0;
+  border-right: 0 !important;
 }
 
 .adjust-table th {
-  border-right-color: white;
+  border-right-color: white !important;
 }
 
 .adjust-table {
-  border-color: white;
+  border-color: white !important;
 }
 
 .adjust-table:after {
-  background-color: white;
+  background-color: white !important;
 }
 
 .adjust-table th:not([class*="el-table-column--selection"]):hover:after {
@@ -84,11 +84,11 @@ html,body {
   right: 0;
   height: 50%;
   width: 2px;
-  background-color: #EBEEF5;
+  background-color: #EBEEF5 !important;
 }
 
 .adjust-table tr:hover td {
-  border-right: 0;
+  border-right: 0 !important;
 }
 
 /* 表格拖拽表头调整宽度 --> */

From dd636e952267cd44aad3cf9fc9109a20730fc361 Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Sat, 20 Mar 2021 13:21:38 +0800
Subject: [PATCH 12/22] =?UTF-8?q?refactor:=20/login=20=E4=B8=8D=E7=94=A8?=
 =?UTF-8?q?=E7=BB=8F=E8=BF=87csrf=E6=8B=A6=E6=88=AA=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/java/io/metersphere/commons/utils/ShiroUtils.java  | 1 +
 backend/src/main/java/io/metersphere/xpack                      | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/backend/src/main/java/io/metersphere/commons/utils/ShiroUtils.java b/backend/src/main/java/io/metersphere/commons/utils/ShiroUtils.java
index 5483e08edd..5336053d35 100644
--- a/backend/src/main/java/io/metersphere/commons/utils/ShiroUtils.java
+++ b/backend/src/main/java/io/metersphere/commons/utils/ShiroUtils.java
@@ -13,6 +13,7 @@ public class ShiroUtils {
     public static void loadBaseFilterChain(Map<String, String> filterChainDefinitionMap){
 
         filterChainDefinitionMap.put("/resource/**", "anon");
+        filterChainDefinitionMap.put("/login", "anon");
         filterChainDefinitionMap.put("/signin", "anon");
         filterChainDefinitionMap.put("/ldap/signin", "anon");
         filterChainDefinitionMap.put("/ldap/open", "anon");
diff --git a/backend/src/main/java/io/metersphere/xpack b/backend/src/main/java/io/metersphere/xpack
index efd6af73b7..adefde265f 160000
--- a/backend/src/main/java/io/metersphere/xpack
+++ b/backend/src/main/java/io/metersphere/xpack
@@ -1 +1 @@
-Subproject commit efd6af73b7c5cc53cd4515772000bc1436c49837
+Subproject commit adefde265ff12d4ea909353c3f46008f8a8e17e7

From f3eb82c839d729244d94070dd252be51155d872f Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Sat, 20 Mar 2021 20:32:14 +0800
Subject: [PATCH 13/22] =?UTF-8?q?feat(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA?=
 =?UTF-8?q?):=20=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E5=8F=AF=E5=85=B3?=
 =?UTF-8?q?=E8=81=94JIRA=E9=9C=80=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../metersphere/track/issue/JiraPlatform.java | 51 ++++++++++++++++++-
 .../organization/components/JiraSetting.vue   | 13 ++++-
 .../track/case/components/TestCaseEdit.vue    |  1 +
 frontend/src/i18n/en-US.js                    |  6 ++-
 frontend/src/i18n/zh-CN.js                    |  2 +
 frontend/src/i18n/zh-TW.js                    |  2 +
 6 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/backend/src/main/java/io/metersphere/track/issue/JiraPlatform.java b/backend/src/main/java/io/metersphere/track/issue/JiraPlatform.java
index b4d3772bda..437000f1cb 100644
--- a/backend/src/main/java/io/metersphere/track/issue/JiraPlatform.java
+++ b/backend/src/main/java/io/metersphere/track/issue/JiraPlatform.java
@@ -1,6 +1,7 @@
 package io.metersphere.track.issue;
 
 import com.alibaba.fastjson.JSON;
+import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
 import io.metersphere.base.domain.*;
 import io.metersphere.commons.constants.IssuesManagePlatform;
@@ -81,7 +82,55 @@ public class JiraPlatform extends AbstractIssuePlatform {
 
     @Override
     public List<DemandDTO> getDemandList(String projectId) {
-        return null;
+        List<DemandDTO> list = new ArrayList<>();
+
+        try {
+            String key = this.getProjectId(projectId);
+            if (StringUtils.isBlank(key)) {
+                MSException.throwException("未关联Jira 项目Key");
+            }
+            String config = getPlatformConfig(IssuesManagePlatform.Jira.toString());
+            JSONObject object = JSON.parseObject(config);
+
+            if (object == null) {
+                MSException.throwException("jira config is null");
+            }
+
+            String account = object.getString("account");
+            String password = object.getString("password");
+            String url = object.getString("url");
+            String type = object.getString("storytype");
+            String auth = EncryptUtils.base64Encoding(account + ":" + password);
+            HttpHeaders requestHeaders = new HttpHeaders();
+            requestHeaders.add("Authorization", "Basic " + auth);
+            requestHeaders.setContentType(org.springframework.http.MediaType.APPLICATION_JSON);
+            //HttpEntity
+            HttpEntity<String> requestEntity = new HttpEntity<>(requestHeaders);
+            RestTemplate restTemplate = new RestTemplate();
+            //post
+            ResponseEntity<String> responseEntity = null;
+            responseEntity = restTemplate.exchange(url + "/rest/api/2/search?jql=project="+key+"+AND+issuetype="+type+"&fields=summary,issuetype",
+                    HttpMethod.GET, requestEntity, String.class);
+            String body = responseEntity.getBody();
+            JSONObject jsonObject = JSONObject.parseObject(body);
+            JSONArray jsonArray = jsonObject.getJSONArray("issues");
+            for (int i = 0; i < jsonArray.size(); i++) {
+                JSONObject o = jsonArray.getJSONObject(i);
+                String issueKey = o.getString("key");
+                JSONObject fields = o.getJSONObject("fields");
+                String summary = fields.getString("summary");
+                DemandDTO demandDTO = new DemandDTO();
+                demandDTO.setName(summary);
+                demandDTO.setId(issueKey);
+                demandDTO.setPlatform(IssuesManagePlatform.Jira.name());
+                list.add(demandDTO);
+            }
+        } catch (Exception e) {
+            LogUtil.error(e.getMessage(), e);
+            MSException.throwException("调用Jira查询需求失败");
+        }
+
+        return list;
     }
 
     @Override
diff --git a/frontend/src/business/components/settings/organization/components/JiraSetting.vue b/frontend/src/business/components/settings/organization/components/JiraSetting.vue
index 3d99ec85a9..834b658105 100644
--- a/frontend/src/business/components/settings/organization/components/JiraSetting.vue
+++ b/frontend/src/business/components/settings/organization/components/JiraSetting.vue
@@ -16,6 +16,9 @@
         <el-form-item :label="$t('organization.integration.jira_issuetype')" prop="issuetype">
           <el-input v-model="form.issuetype" :placeholder="$t('organization.integration.input_jira_issuetype')"/>
         </el-form-item>
+        <el-form-item :label="$t('organization.integration.jira_storytype')" prop="storytype">
+          <el-input v-model="form.storytype" :placeholder="$t('organization.integration.input_jira_storytype')"/>
+        </el-form-item>
       </el-form>
     </div>
 
@@ -79,6 +82,11 @@ export default {
           required: true,
           message: this.$t('organization.integration.input_jira_issuetype'),
           trigger: ['change', 'blur']
+        },
+        storytype: {
+          required: true,
+          message: this.$t('organization.integration.input_jira_storytype'),
+          trigger: ['change', 'blur']
         }
       },
     }
@@ -97,6 +105,7 @@ export default {
           this.$set(this.form, 'password', config.password);
           this.$set(this.form, 'url', config.url);
           this.$set(this.form, 'issuetype', config.issuetype);
+          this.$set(this.form, 'storytype', config.storytype);
         } else {
           this.clear();
         }
@@ -114,7 +123,8 @@ export default {
             account: this.form.account,
             password: this.form.password,
             url: formatUrl,
-            issuetype: this.form.issuetype
+            issuetype: this.form.issuetype,
+            storytype: this.form.storytype
           };
           const {lastOrganizationId} = getCurrentUser();
           param.organizationId = lastOrganizationId;
@@ -139,6 +149,7 @@ export default {
       this.$set(this.form, 'password', '');
       this.$set(this.form, 'url', '');
       this.$set(this.form, 'issuetype', '');
+      this.$set(this.form, 'storytype', '');
       this.$nextTick(() => {
         this.$refs.form.clearValidate();
       });
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index 2d9ec236b8..edc450fd7c 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -775,6 +775,7 @@ export default {
           this.demandOptions.unshift({id: 'other', name: this.$t('test_track.case.other'), platform: 'Other'})
           this.result = {loading : false};
         }).catch(() => {
+          this.demandOptions.unshift({id: 'other', name: this.$t('test_track.case.other'), platform: 'Other'})
           this.result = {loading : false};
         })
       }
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 22d0db5eb4..85c17c41dd 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -314,11 +314,13 @@ export default {
       account: 'Account',
       password: 'Password',
       jira_url: 'JIRA url',
-      jira_issuetype: 'JIRA issuetype',
+      jira_issuetype: 'JIRA issue type',
+      jira_storytype: 'JIRA story type',
       input_api_account: 'please enter account',
       input_api_password: 'Please enter password',
       input_jira_url: 'Please enter Jira address, for example: https://metersphere.atlassian.net/',
-      input_jira_issuetype: 'Please enter the question type',
+      input_jira_issuetype: 'Please enter the issue type',
+      input_jira_storytype: 'Please enter the story type',
       zentao_url: 'Zentao url',
       input_zentao_url: 'Please enter Zentao address, for example: http://xx.xx.xx.xx/zentao/',
       use_tip: 'Usage guidelines:',
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 1dddefd892..db69b38da5 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -313,10 +313,12 @@ export default {
       password: '密码',
       jira_url: 'JIRA 地址',
       jira_issuetype: '问题类型',
+      jira_storytype: '需求类型',
       input_api_account: '请输入账号',
       input_api_password: '请输入密码',
       input_jira_url: '请输入Jira地址，例：https://metersphere.atlassian.net/',
       input_jira_issuetype: '请输入问题类型',
+      input_jira_storytype: '请输入需求类型',
       zentao_url: 'Zentao 地址',
       input_zentao_url: '请输入Zentao地址，例：http://xx.xx.xx.xx/zentao/',
       use_tip: '使用指引：',
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index d23b758a12..c33281ad18 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -313,10 +313,12 @@ export default {
       password: '密碼',
       jira_url: 'JIRA 地址',
       jira_issuetype: '問題類型',
+      jira_storytype: '需求類型',
       input_api_account: '請輸入賬號',
       input_api_password: '請輸入密碼',
       input_jira_url: '請輸入Jira地址，例：https://metersphere.atlassian.net/',
       input_jira_issuetype: '請輸入問題類型',
+      input_jira_storytype: '請輸入需求類型',
       zentao_url: 'Zentao 地址',
       input_zentao_url: '請輸入Zentao地址，例：http://xx.xx.xx.xx/zentao/',
       use_tip: '使用指引：',

From 63c23e7188ee43df9bcebeae46809426d4eac8e3 Mon Sep 17 00:00:00 2001
From: wenyann <64353056+wenyann@users.noreply.github.com>
Date: Sun, 21 Mar 2021 00:04:53 +0800
Subject: [PATCH 14/22] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Djenkins=E6=8F=92?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=AD=E6=B5=8B=E8=AF=95=E4=BA=BA=E5=91=98=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E8=B0=83=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../io/metersphere/controller/SystemParameterController.java     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/backend/src/main/java/io/metersphere/controller/SystemParameterController.java b/backend/src/main/java/io/metersphere/controller/SystemParameterController.java
index bcc25df6f9..5d6f306e53 100644
--- a/backend/src/main/java/io/metersphere/controller/SystemParameterController.java
+++ b/backend/src/main/java/io/metersphere/controller/SystemParameterController.java
@@ -51,7 +51,6 @@ public class SystemParameterController {
     }
 
     @GetMapping("/base/info")
-    @RequiresRoles(value = {RoleConstants.ADMIN})
     public BaseSystemConfigDTO getBaseInfo () {
         return SystemParameterService.getBaseInfo();
     }

From 6c0780e1cb3ed295f10619b495bceaff18b2ec60 Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Sun, 21 Mar 2021 12:03:36 +0800
Subject: [PATCH 15/22] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA)?=
 =?UTF-8?q?:=20=E9=A6=96=E9=A1=B5=E5=A4=B1=E8=B4=A5=E7=94=A8=E4=BE=8B?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=9C=AA=E7=BB=9F=E8=AE=A1=E6=80=A7=E8=83=BD?=
 =?UTF-8?q?=E5=A4=B1=E8=B4=A5=E7=94=A8=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/service/ApiDefinitionExecResultService.java  |  2 ++
 .../mapper/ext/ExtApiDefinitionExecResultMapper.xml  | 12 ++++++++++++
 .../base/mapper/ext/ExtTestPlanMapper.xml            |  3 +++
 .../track/request/testcase/QueryTestPlanRequest.java |  2 ++
 .../api/homepage/components/FailureTestCaseList.vue  |  1 +
 frontend/src/i18n/en-US.js                           |  1 +
 frontend/src/i18n/zh-CN.js                           |  1 +
 frontend/src/i18n/zh-TW.js                           |  1 +
 8 files changed, 23 insertions(+)

diff --git a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionExecResultService.java b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionExecResultService.java
index 91b3da86e7..9be4f831ac 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionExecResultService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionExecResultService.java
@@ -193,6 +193,8 @@ public class ApiDefinitionExecResultService {
                         planRequest.setScenarioId(item.getTestCaseID());
                     } else if ("apiCase".equals(item.getCaseType())) {
                         planRequest.setApiId(item.getTestCaseID());
+                    } else if ("load".equals(item.getCaseType())) {
+                        planRequest.setLoadId(item.getTestCaseID());
                     }
                     List<TestPlanDTO> dtoList = testPlanService.selectTestPlanByRelevancy(planRequest);
                     item.setTestPlanDTOList(dtoList);
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.xml
index ea21de7289..95189a5806 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.xml
@@ -63,6 +63,18 @@
             WHERE report.project_id = #{projectId}
               AND ( report.STATUS = 'Error' OR report.STATUS = 'Fail' )  AND report.create_time >= #{startTimestamp}
             GROUP BY scene.id
+            UNION
+            SELECT ltr.test_id as testCaseID, ltr.name as caseName,tplt.testPlanName AS testPlan, count(ltr.id) as failureTimes, 'load' as caseType FROM load_test_report ltr
+            join load_test on load_test.id = ltr.test_id
+            JOIN (
+                select tplc.load_case_id, group_concat(tp.`name`) AS testPlanName, tp.project_id
+                from test_plan_load_case tplc
+                join test_plan tp on tp.id = tplc.test_plan_id
+                GROUP BY tplc.load_case_id
+                ) tplt on tplt.load_case_id = ltr.test_id
+            WHERE load_test.project_id = #{projectId}
+              AND ltr.STATUS = 'Error' and ltr.trigger_mode = 'TEST_PLAN_SCHEDULE' AND ltr.create_time >= #{startTimestamp}
+            GROUP BY load_test.id
           ) showTable
         ORDER BY showTable.failureTimes DESC
     </select>
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanMapper.xml
index 85d112f388..af35e4b954 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanMapper.xml
@@ -223,6 +223,9 @@
             <if test="request.apiId != null">
                 AND p.id IN (SELECT test_plan_id FROM test_plan_api_case WHERE api_case_id = #{request.apiId})
             </if>
+            <if test="request.loadId != null">
+                AND p.id IN (SELECT test_plan_id FROM test_plan_load_case WHERE load_case_id = #{request.loadId})
+            </if>
         </where>
     </select>
     <select id="findTestProjectNameByTestPlanID" resultType="java.lang.String">
diff --git a/backend/src/main/java/io/metersphere/track/request/testcase/QueryTestPlanRequest.java b/backend/src/main/java/io/metersphere/track/request/testcase/QueryTestPlanRequest.java
index e5876249c2..7f6cb8a8c7 100644
--- a/backend/src/main/java/io/metersphere/track/request/testcase/QueryTestPlanRequest.java
+++ b/backend/src/main/java/io/metersphere/track/request/testcase/QueryTestPlanRequest.java
@@ -20,6 +20,8 @@ public class QueryTestPlanRequest extends TestPlan {
 
     private String apiId;
 
+    private String loadId;
+
     private List<OrderRequest> orders;
 
     private Map<String, List<String>> filters;
diff --git a/frontend/src/business/components/api/homepage/components/FailureTestCaseList.vue b/frontend/src/business/components/api/homepage/components/FailureTestCaseList.vue
index 2ca7e661b6..f22e9c5533 100644
--- a/frontend/src/business/components/api/homepage/components/FailureTestCaseList.vue
+++ b/frontend/src/business/components/api/homepage/components/FailureTestCaseList.vue
@@ -23,6 +23,7 @@
         <template v-slot:default="scope">
           <ms-tag v-if="scope.row.caseType == 'apiCase'" type="success" effect="plain" :content="$t('api_test.home_page.failed_case_list.table_value.case_type.api')"/>
           <ms-tag v-if="scope.row.caseType == 'scenario'" type="warning" effect="plain" :content="$t('api_test.home_page.failed_case_list.table_value.case_type.scene')"/>
+          <ms-tag v-if="scope.row.caseType == 'load'" type="danger" effect="plain" :content="$t('api_test.home_page.failed_case_list.table_value.case_type.load')"/>
         </template>
       </el-table-column>
       <el-table-column prop="testPlan"  :label="$t('api_test.home_page.failed_case_list.table_coloum.test_plan')">
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 85c17c41dd..41a148ab35 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -1035,6 +1035,7 @@ export default {
           case_type: {
             api: "Api case",
             scene: "Scenario case",
+            load: "Load case"
           }
         }
       },
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index db69b38da5..c5ec3f50bb 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -1039,6 +1039,7 @@ export default {
           case_type: {
             api: "接口用例",
             scene: "场景用例",
+            load: "性能用例"
           }
         }
       },
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index c33281ad18..3cec4a2f6f 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -1037,6 +1037,7 @@ export default {
           case_type: {
             api: "接口用例",
             scene: "場景用例",
+            load: "性能用例"
           }
         }
       },

From cc24e959eb15b82beee0eea32b19c2df1e7e1bb9 Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Sun, 21 Mar 2021 12:46:18 +0800
Subject: [PATCH 16/22] chore: sync

---
 frontend/src/business/components/xpack | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/business/components/xpack b/frontend/src/business/components/xpack
index 06b31ddd4f..f13fe5c9e5 160000
--- a/frontend/src/business/components/xpack
+++ b/frontend/src/business/components/xpack
@@ -1 +1 @@
-Subproject commit 06b31ddd4f2542cb86bf3e31a1a8f624742a2193
+Subproject commit f13fe5c9e5fe0bc527503c70d735163ea7e60665

From c96928384e2b73549cabecbca3b036d7ef38e27f Mon Sep 17 00:00:00 2001
From: wenyann <64353056+wenyann@users.noreply.github.com>
Date: Sun, 21 Mar 2021 19:43:15 +0800
Subject: [PATCH 17/22] =?UTF-8?q?feat:=20=E6=B5=8B=E8=AF=95=E7=94=A8?=
 =?UTF-8?q?=E4=BE=8B=E5=85=B3=E8=81=94=E5=A4=9A=E4=B8=AA=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../metersphere/base/domain/TestCaseTest.java |  18 +
 .../base/domain/TestCaseTestExample.java      | 480 ++++++++++++++++++
 .../mapper/TestCaseReviewScenarioMapper.xml   | 190 +++----
 .../base/mapper/TestCaseTestMapper.java       |  31 ++
 .../base/mapper/TestCaseTestMapper.xml        | 201 ++++++++
 .../base/mapper/TestPlanMapper.xml            | 170 +++----
 .../track/service/TestCaseService.java        |  37 +-
 .../db/migration/V78__v1.8_release.sql        |  30 +-
 .../src/main/resources/generatorConfig.xml    |   1 +
 .../api/definition/model/JsonData.js          |   6 +
 .../components/track/case/TestCase.vue        |   2 +
 .../track/case/components/TestCaseEdit.vue    |  90 ++--
 12 files changed, 1033 insertions(+), 223 deletions(-)
 create mode 100644 backend/src/main/java/io/metersphere/base/domain/TestCaseTest.java
 create mode 100644 backend/src/main/java/io/metersphere/base/domain/TestCaseTestExample.java
 create mode 100644 backend/src/main/java/io/metersphere/base/mapper/TestCaseTestMapper.java
 create mode 100644 backend/src/main/java/io/metersphere/base/mapper/TestCaseTestMapper.xml

diff --git a/backend/src/main/java/io/metersphere/base/domain/TestCaseTest.java b/backend/src/main/java/io/metersphere/base/domain/TestCaseTest.java
new file mode 100644
index 0000000000..16f0754d4f
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/base/domain/TestCaseTest.java
@@ -0,0 +1,18 @@
+package io.metersphere.base.domain;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+@Data
+public class TestCaseTest implements Serializable {
+    private String id;
+
+    private String testCaseId;
+
+    private String testId;
+
+    private String testType;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/domain/TestCaseTestExample.java b/backend/src/main/java/io/metersphere/base/domain/TestCaseTestExample.java
new file mode 100644
index 0000000000..dade071131
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/base/domain/TestCaseTestExample.java
@@ -0,0 +1,480 @@
+package io.metersphere.base.domain;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class TestCaseTestExample {
+    protected String orderByClause;
+
+    protected boolean distinct;
+
+    protected List<Criteria> oredCriteria;
+
+    public TestCaseTestExample() {
+        oredCriteria = new ArrayList<Criteria>();
+    }
+
+    public void setOrderByClause(String orderByClause) {
+        this.orderByClause = orderByClause;
+    }
+
+    public String getOrderByClause() {
+        return orderByClause;
+    }
+
+    public void setDistinct(boolean distinct) {
+        this.distinct = distinct;
+    }
+
+    public boolean isDistinct() {
+        return distinct;
+    }
+
+    public List<Criteria> getOredCriteria() {
+        return oredCriteria;
+    }
+
+    public void or(Criteria criteria) {
+        oredCriteria.add(criteria);
+    }
+
+    public Criteria or() {
+        Criteria criteria = createCriteriaInternal();
+        oredCriteria.add(criteria);
+        return criteria;
+    }
+
+    public Criteria createCriteria() {
+        Criteria criteria = createCriteriaInternal();
+        if (oredCriteria.size() == 0) {
+            oredCriteria.add(criteria);
+        }
+        return criteria;
+    }
+
+    protected Criteria createCriteriaInternal() {
+        Criteria criteria = new Criteria();
+        return criteria;
+    }
+
+    public void clear() {
+        oredCriteria.clear();
+        orderByClause = null;
+        distinct = false;
+    }
+
+    protected abstract static class GeneratedCriteria {
+        protected List<Criterion> criteria;
+
+        protected GeneratedCriteria() {
+            super();
+            criteria = new ArrayList<Criterion>();
+        }
+
+        public boolean isValid() {
+            return criteria.size() > 0;
+        }
+
+        public List<Criterion> getAllCriteria() {
+            return criteria;
+        }
+
+        public List<Criterion> getCriteria() {
+            return criteria;
+        }
+
+        protected void addCriterion(String condition) {
+            if (condition == null) {
+                throw new RuntimeException("Value for condition cannot be null");
+            }
+            criteria.add(new Criterion(condition));
+        }
+
+        protected void addCriterion(String condition, Object value, String property) {
+            if (value == null) {
+                throw new RuntimeException("Value for " + property + " cannot be null");
+            }
+            criteria.add(new Criterion(condition, value));
+        }
+
+        protected void addCriterion(String condition, Object value1, Object value2, String property) {
+            if (value1 == null || value2 == null) {
+                throw new RuntimeException("Between values for " + property + " cannot be null");
+            }
+            criteria.add(new Criterion(condition, value1, value2));
+        }
+
+        public Criteria andIdIsNull() {
+            addCriterion("id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdIsNotNull() {
+            addCriterion("id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdEqualTo(String value) {
+            addCriterion("id =", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotEqualTo(String value) {
+            addCriterion("id <>", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdGreaterThan(String value) {
+            addCriterion("id >", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdGreaterThanOrEqualTo(String value) {
+            addCriterion("id >=", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdLessThan(String value) {
+            addCriterion("id <", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdLessThanOrEqualTo(String value) {
+            addCriterion("id <=", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdLike(String value) {
+            addCriterion("id like", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotLike(String value) {
+            addCriterion("id not like", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdIn(List<String> values) {
+            addCriterion("id in", values, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotIn(List<String> values) {
+            addCriterion("id not in", values, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdBetween(String value1, String value2) {
+            addCriterion("id between", value1, value2, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotBetween(String value1, String value2) {
+            addCriterion("id not between", value1, value2, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdIsNull() {
+            addCriterion("test_case_id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdIsNotNull() {
+            addCriterion("test_case_id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdEqualTo(String value) {
+            addCriterion("test_case_id =", value, "testCaseId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdNotEqualTo(String value) {
+            addCriterion("test_case_id <>", value, "testCaseId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdGreaterThan(String value) {
+            addCriterion("test_case_id >", value, "testCaseId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdGreaterThanOrEqualTo(String value) {
+            addCriterion("test_case_id >=", value, "testCaseId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdLessThan(String value) {
+            addCriterion("test_case_id <", value, "testCaseId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdLessThanOrEqualTo(String value) {
+            addCriterion("test_case_id <=", value, "testCaseId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdLike(String value) {
+            addCriterion("test_case_id like", value, "testCaseId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdNotLike(String value) {
+            addCriterion("test_case_id not like", value, "testCaseId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdIn(List<String> values) {
+            addCriterion("test_case_id in", values, "testCaseId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdNotIn(List<String> values) {
+            addCriterion("test_case_id not in", values, "testCaseId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdBetween(String value1, String value2) {
+            addCriterion("test_case_id between", value1, value2, "testCaseId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestCaseIdNotBetween(String value1, String value2) {
+            addCriterion("test_case_id not between", value1, value2, "testCaseId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdIsNull() {
+            addCriterion("test_id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdIsNotNull() {
+            addCriterion("test_id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdEqualTo(String value) {
+            addCriterion("test_id =", value, "testId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdNotEqualTo(String value) {
+            addCriterion("test_id <>", value, "testId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdGreaterThan(String value) {
+            addCriterion("test_id >", value, "testId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdGreaterThanOrEqualTo(String value) {
+            addCriterion("test_id >=", value, "testId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdLessThan(String value) {
+            addCriterion("test_id <", value, "testId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdLessThanOrEqualTo(String value) {
+            addCriterion("test_id <=", value, "testId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdLike(String value) {
+            addCriterion("test_id like", value, "testId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdNotLike(String value) {
+            addCriterion("test_id not like", value, "testId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdIn(List<String> values) {
+            addCriterion("test_id in", values, "testId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdNotIn(List<String> values) {
+            addCriterion("test_id not in", values, "testId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdBetween(String value1, String value2) {
+            addCriterion("test_id between", value1, value2, "testId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestIdNotBetween(String value1, String value2) {
+            addCriterion("test_id not between", value1, value2, "testId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeIsNull() {
+            addCriterion("test_type is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeIsNotNull() {
+            addCriterion("test_type is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeEqualTo(String value) {
+            addCriterion("test_type =", value, "testType");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeNotEqualTo(String value) {
+            addCriterion("test_type <>", value, "testType");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeGreaterThan(String value) {
+            addCriterion("test_type >", value, "testType");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeGreaterThanOrEqualTo(String value) {
+            addCriterion("test_type >=", value, "testType");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeLessThan(String value) {
+            addCriterion("test_type <", value, "testType");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeLessThanOrEqualTo(String value) {
+            addCriterion("test_type <=", value, "testType");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeLike(String value) {
+            addCriterion("test_type like", value, "testType");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeNotLike(String value) {
+            addCriterion("test_type not like", value, "testType");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeIn(List<String> values) {
+            addCriterion("test_type in", values, "testType");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeNotIn(List<String> values) {
+            addCriterion("test_type not in", values, "testType");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeBetween(String value1, String value2) {
+            addCriterion("test_type between", value1, value2, "testType");
+            return (Criteria) this;
+        }
+
+        public Criteria andTestTypeNotBetween(String value1, String value2) {
+            addCriterion("test_type not between", value1, value2, "testType");
+            return (Criteria) this;
+        }
+    }
+
+    public static class Criteria extends GeneratedCriteria {
+
+        protected Criteria() {
+            super();
+        }
+    }
+
+    public static class Criterion {
+        private String condition;
+
+        private Object value;
+
+        private Object secondValue;
+
+        private boolean noValue;
+
+        private boolean singleValue;
+
+        private boolean betweenValue;
+
+        private boolean listValue;
+
+        private String typeHandler;
+
+        public String getCondition() {
+            return condition;
+        }
+
+        public Object getValue() {
+            return value;
+        }
+
+        public Object getSecondValue() {
+            return secondValue;
+        }
+
+        public boolean isNoValue() {
+            return noValue;
+        }
+
+        public boolean isSingleValue() {
+            return singleValue;
+        }
+
+        public boolean isBetweenValue() {
+            return betweenValue;
+        }
+
+        public boolean isListValue() {
+            return listValue;
+        }
+
+        public String getTypeHandler() {
+            return typeHandler;
+        }
+
+        protected Criterion(String condition) {
+            super();
+            this.condition = condition;
+            this.typeHandler = null;
+            this.noValue = true;
+        }
+
+        protected Criterion(String condition, Object value, String typeHandler) {
+            super();
+            this.condition = condition;
+            this.value = value;
+            this.typeHandler = typeHandler;
+            if (value instanceof List<?>) {
+                this.listValue = true;
+            } else {
+                this.singleValue = true;
+            }
+        }
+
+        protected Criterion(String condition, Object value) {
+            this(condition, value, null);
+        }
+
+        protected Criterion(String condition, Object value, Object secondValue, String typeHandler) {
+            super();
+            this.condition = condition;
+            this.value = value;
+            this.secondValue = secondValue;
+            this.typeHandler = typeHandler;
+            this.betweenValue = true;
+        }
+
+        protected Criterion(String condition, Object value, Object secondValue) {
+            this(condition, value, secondValue, null);
+        }
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/TestCaseReviewScenarioMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/TestCaseReviewScenarioMapper.xml
index 2059c38ce8..af6f9b2498 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/TestCaseReviewScenarioMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/TestCaseReviewScenarioMapper.xml
@@ -2,18 +2,18 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="io.metersphere.base.mapper.TestCaseReviewScenarioMapper">
   <resultMap id="BaseResultMap" type="io.metersphere.base.domain.TestCaseReviewScenario">
-    <id column="id" jdbcType="VARCHAR" property="id"/>
-    <result column="test_case_review_id" jdbcType="VARCHAR" property="testCaseReviewId"/>
-    <result column="api_scenario_id" jdbcType="VARCHAR" property="apiScenarioId"/>
-    <result column="status" jdbcType="VARCHAR" property="status"/>
-    <result column="create_time" jdbcType="BIGINT" property="createTime"/>
-    <result column="update_time" jdbcType="BIGINT" property="updateTime"/>
-    <result column="pass_rate" jdbcType="VARCHAR" property="passRate"/>
-    <result column="last_result" jdbcType="VARCHAR" property="lastResult"/>
-    <result column="report_id" jdbcType="VARCHAR" property="reportId"/>
+      <id column="id" jdbcType="VARCHAR" property="id"/>
+      <result column="test_case_review_id" jdbcType="VARCHAR" property="testCaseReviewId"/>
+      <result column="api_scenario_id" jdbcType="VARCHAR" property="apiScenarioId"/>
+      <result column="status" jdbcType="VARCHAR" property="status"/>
+      <result column="create_time" jdbcType="BIGINT" property="createTime"/>
+      <result column="update_time" jdbcType="BIGINT" property="updateTime"/>
+      <result column="pass_rate" jdbcType="VARCHAR" property="passRate"/>
+      <result column="last_result" jdbcType="VARCHAR" property="lastResult"/>
+      <result column="report_id" jdbcType="VARCHAR" property="reportId"/>
   </resultMap>
   <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.metersphere.base.domain.TestCaseReviewScenario">
-    <result column="environment" jdbcType="LONGVARCHAR" property="environment"/>
+      <result column="environment" jdbcType="LONGVARCHAR" property="environment"/>
   </resultMap>
   <sql id="Example_Where_Clause">
     <where>
@@ -80,46 +80,46 @@
   <sql id="Blob_Column_List">
     environment
   </sql>
-  <select id="selectByExampleWithBLOBs" parameterType="io.metersphere.base.domain.TestCaseReviewScenarioExample"
-          resultMap="ResultMapWithBLOBs">
-    select
-    <if test="distinct">
-      distinct
-    </if>
-    <include refid="Base_Column_List"/>
-    ,
-    <include refid="Blob_Column_List"/>
-    from test_case_review_scenario
-    <if test="_parameter != null">
-      <include refid="Example_Where_Clause"/>
+    <select id="selectByExampleWithBLOBs" parameterType="io.metersphere.base.domain.TestCaseReviewScenarioExample"
+            resultMap="ResultMapWithBLOBs">
+        select
+        <if test="distinct">
+            distinct
+        </if>
+        <include refid="Base_Column_List"/>
+        ,
+        <include refid="Blob_Column_List"/>
+        from test_case_review_scenario
+        <if test="_parameter != null">
+            <include refid="Example_Where_Clause"/>
     </if>
     <if test="orderByClause != null">
       order by ${orderByClause}
     </if>
   </select>
-  <select id="selectByExample" parameterType="io.metersphere.base.domain.TestCaseReviewScenarioExample"
-          resultMap="BaseResultMap">
-    select
-    <if test="distinct">
-      distinct
-    </if>
-    <include refid="Base_Column_List"/>
-    from test_case_review_scenario
-    <if test="_parameter != null">
-      <include refid="Example_Where_Clause"/>
-    </if>
-    <if test="orderByClause != null">
+    <select id="selectByExample" parameterType="io.metersphere.base.domain.TestCaseReviewScenarioExample"
+            resultMap="BaseResultMap">
+        select
+        <if test="distinct">
+            distinct
+        </if>
+        <include refid="Base_Column_List"/>
+        from test_case_review_scenario
+        <if test="_parameter != null">
+            <include refid="Example_Where_Clause"/>
+        </if>
+        <if test="orderByClause != null">
       order by ${orderByClause}
     </if>
   </select>
-  <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="ResultMapWithBLOBs">
-    select
-    <include refid="Base_Column_List"/>
-    ,
-    <include refid="Blob_Column_List"/>
-    from test_case_review_scenario
-    where id = #{id,jdbcType=VARCHAR}
-  </select>
+    <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="ResultMapWithBLOBs">
+        select
+        <include refid="Base_Column_List"/>
+        ,
+        <include refid="Blob_Column_List"/>
+        from test_case_review_scenario
+        where id = #{id,jdbcType=VARCHAR}
+    </select>
   <delete id="deleteByPrimaryKey" parameterType="java.lang.String">
     delete from test_case_review_scenario
     where id = #{id,jdbcType=VARCHAR}
@@ -131,14 +131,14 @@
     </if>
   </delete>
   <insert id="insert" parameterType="io.metersphere.base.domain.TestCaseReviewScenario">
-    insert into test_case_review_scenario (id, test_case_review_id, api_scenario_id,
-                                           `status`, create_time, update_time,
-                                           pass_rate, last_result, report_id,
-                                           environment)
-    values (#{id,jdbcType=VARCHAR}, #{testCaseReviewId,jdbcType=VARCHAR}, #{apiScenarioId,jdbcType=VARCHAR},
-            #{status,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT},
-            #{passRate,jdbcType=VARCHAR}, #{lastResult,jdbcType=VARCHAR}, #{reportId,jdbcType=VARCHAR},
-            #{environment,jdbcType=LONGVARCHAR})
+      insert into test_case_review_scenario (id, test_case_review_id, api_scenario_id,
+                                             `status`, create_time, update_time,
+                                             pass_rate, last_result, report_id,
+                                             environment)
+      values (#{id,jdbcType=VARCHAR}, #{testCaseReviewId,jdbcType=VARCHAR}, #{apiScenarioId,jdbcType=VARCHAR},
+              #{status,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT},
+              #{passRate,jdbcType=VARCHAR}, #{lastResult,jdbcType=VARCHAR}, #{reportId,jdbcType=VARCHAR},
+              #{environment,jdbcType=LONGVARCHAR})
   </insert>
   <insert id="insertSelective" parameterType="io.metersphere.base.domain.TestCaseReviewScenario">
     insert into test_case_review_scenario
@@ -248,37 +248,37 @@
       </if>
     </set>
     <if test="_parameter != null">
-      <include refid="Update_By_Example_Where_Clause"/>
+        <include refid="Update_By_Example_Where_Clause"/>
     </if>
   </update>
   <update id="updateByExampleWithBLOBs" parameterType="map">
-    update test_case_review_scenario
-    set id = #{record.id,jdbcType=VARCHAR},
-    test_case_review_id = #{record.testCaseReviewId,jdbcType=VARCHAR},
-    api_scenario_id = #{record.apiScenarioId,jdbcType=VARCHAR},
-    `status` = #{record.status,jdbcType=VARCHAR},
-    create_time = #{record.createTime,jdbcType=BIGINT},
-    update_time = #{record.updateTime,jdbcType=BIGINT},
-    pass_rate = #{record.passRate,jdbcType=VARCHAR},
-    last_result = #{record.lastResult,jdbcType=VARCHAR},
-    report_id = #{record.reportId,jdbcType=VARCHAR},
-    environment = #{record.environment,jdbcType=LONGVARCHAR}
-    <if test="_parameter != null">
-      <include refid="Update_By_Example_Where_Clause"/>
+      update test_case_review_scenario
+      set id = #{record.id,jdbcType=VARCHAR},
+      test_case_review_id = #{record.testCaseReviewId,jdbcType=VARCHAR},
+      api_scenario_id = #{record.apiScenarioId,jdbcType=VARCHAR},
+      `status` = #{record.status,jdbcType=VARCHAR},
+      create_time = #{record.createTime,jdbcType=BIGINT},
+      update_time = #{record.updateTime,jdbcType=BIGINT},
+      pass_rate = #{record.passRate,jdbcType=VARCHAR},
+      last_result = #{record.lastResult,jdbcType=VARCHAR},
+      report_id = #{record.reportId,jdbcType=VARCHAR},
+      environment = #{record.environment,jdbcType=LONGVARCHAR}
+      <if test="_parameter != null">
+          <include refid="Update_By_Example_Where_Clause"/>
     </if>
   </update>
   <update id="updateByExample" parameterType="map">
-    update test_case_review_scenario
-    set id = #{record.id,jdbcType=VARCHAR},
-    test_case_review_id = #{record.testCaseReviewId,jdbcType=VARCHAR},
-    api_scenario_id = #{record.apiScenarioId,jdbcType=VARCHAR},
-    `status` = #{record.status,jdbcType=VARCHAR},
-    create_time = #{record.createTime,jdbcType=BIGINT},
-    update_time = #{record.updateTime,jdbcType=BIGINT},
-    pass_rate = #{record.passRate,jdbcType=VARCHAR},
-    last_result = #{record.lastResult,jdbcType=VARCHAR},
+      update test_case_review_scenario
+      set id = #{record.id,jdbcType=VARCHAR},
+      test_case_review_id = #{record.testCaseReviewId,jdbcType=VARCHAR},
+      api_scenario_id = #{record.apiScenarioId,jdbcType=VARCHAR},
+      `status` = #{record.status,jdbcType=VARCHAR},
+      create_time = #{record.createTime,jdbcType=BIGINT},
+      update_time = #{record.updateTime,jdbcType=BIGINT},
+      pass_rate = #{record.passRate,jdbcType=VARCHAR},
+      last_result = #{record.lastResult,jdbcType=VARCHAR},
       report_id = #{record.reportId,jdbcType=VARCHAR}
-    <if test="_parameter != null">
+      <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
   </update>
@@ -316,28 +316,28 @@
     where id = #{id,jdbcType=VARCHAR}
   </update>
   <update id="updateByPrimaryKeyWithBLOBs" parameterType="io.metersphere.base.domain.TestCaseReviewScenario">
-    update test_case_review_scenario
-    set test_case_review_id = #{testCaseReviewId,jdbcType=VARCHAR},
-        api_scenario_id     = #{apiScenarioId,jdbcType=VARCHAR},
-        `status`            = #{status,jdbcType=VARCHAR},
-        create_time         = #{createTime,jdbcType=BIGINT},
-        update_time         = #{updateTime,jdbcType=BIGINT},
-        pass_rate           = #{passRate,jdbcType=VARCHAR},
-        last_result         = #{lastResult,jdbcType=VARCHAR},
-        report_id           = #{reportId,jdbcType=VARCHAR},
-        environment         = #{environment,jdbcType=LONGVARCHAR}
-    where id = #{id,jdbcType=VARCHAR}
+      update test_case_review_scenario
+      set test_case_review_id = #{testCaseReviewId,jdbcType=VARCHAR},
+          api_scenario_id     = #{apiScenarioId,jdbcType=VARCHAR},
+          `status`            = #{status,jdbcType=VARCHAR},
+          create_time         = #{createTime,jdbcType=BIGINT},
+          update_time         = #{updateTime,jdbcType=BIGINT},
+          pass_rate           = #{passRate,jdbcType=VARCHAR},
+          last_result         = #{lastResult,jdbcType=VARCHAR},
+          report_id           = #{reportId,jdbcType=VARCHAR},
+          environment         = #{environment,jdbcType=LONGVARCHAR}
+      where id = #{id,jdbcType=VARCHAR}
   </update>
   <update id="updateByPrimaryKey" parameterType="io.metersphere.base.domain.TestCaseReviewScenario">
-    update test_case_review_scenario
-    set test_case_review_id = #{testCaseReviewId,jdbcType=VARCHAR},
-        api_scenario_id     = #{apiScenarioId,jdbcType=VARCHAR},
-        `status`            = #{status,jdbcType=VARCHAR},
-        create_time         = #{createTime,jdbcType=BIGINT},
-        update_time         = #{updateTime,jdbcType=BIGINT},
-        pass_rate           = #{passRate,jdbcType=VARCHAR},
-      last_result = #{lastResult,jdbcType=VARCHAR},
-      report_id = #{reportId,jdbcType=VARCHAR}
-    where id = #{id,jdbcType=VARCHAR}
+      update test_case_review_scenario
+      set test_case_review_id = #{testCaseReviewId,jdbcType=VARCHAR},
+          api_scenario_id     = #{apiScenarioId,jdbcType=VARCHAR},
+          `status`            = #{status,jdbcType=VARCHAR},
+          create_time         = #{createTime,jdbcType=BIGINT},
+          update_time         = #{updateTime,jdbcType=BIGINT},
+          pass_rate           = #{passRate,jdbcType=VARCHAR},
+          last_result         = #{lastResult,jdbcType=VARCHAR},
+          report_id           = #{reportId,jdbcType=VARCHAR}
+      where id = #{id,jdbcType=VARCHAR}
   </update>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/TestCaseTestMapper.java b/backend/src/main/java/io/metersphere/base/mapper/TestCaseTestMapper.java
new file mode 100644
index 0000000000..444584fe4e
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/base/mapper/TestCaseTestMapper.java
@@ -0,0 +1,31 @@
+package io.metersphere.base.mapper;
+
+import io.metersphere.base.domain.TestCaseTest;
+import io.metersphere.base.domain.TestCaseTestExample;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.List;
+
+public interface TestCaseTestMapper {
+    long countByExample(TestCaseTestExample example);
+
+    int deleteByExample(TestCaseTestExample example);
+
+    int deleteByPrimaryKey(String id);
+
+    int insert(TestCaseTest record);
+
+    int insertSelective(TestCaseTest record);
+
+    List<TestCaseTest> selectByExample(TestCaseTestExample example);
+
+    TestCaseTest selectByPrimaryKey(String id);
+
+    int updateByExampleSelective(@Param("record") TestCaseTest record, @Param("example") TestCaseTestExample example);
+
+    int updateByExample(@Param("record") TestCaseTest record, @Param("example") TestCaseTestExample example);
+
+    int updateByPrimaryKeySelective(TestCaseTest record);
+
+    int updateByPrimaryKey(TestCaseTest record);
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/TestCaseTestMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/TestCaseTestMapper.xml
new file mode 100644
index 0000000000..af19225f39
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/base/mapper/TestCaseTestMapper.xml
@@ -0,0 +1,201 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.metersphere.base.mapper.TestCaseTestMapper">
+    <resultMap id="BaseResultMap" type="io.metersphere.base.domain.TestCaseTest">
+        <id column="id" jdbcType="VARCHAR" property="id"/>
+        <result column="test_case_id" jdbcType="VARCHAR" property="testCaseId"/>
+        <result column="test_id" jdbcType="VARCHAR" property="testId"/>
+        <result column="test_type" jdbcType="VARCHAR" property="testType"/>
+    </resultMap>
+    <sql id="Example_Where_Clause">
+        <where>
+            <foreach collection="oredCriteria" item="criteria" separator="or">
+                <if test="criteria.valid">
+                    <trim prefix="(" prefixOverrides="and" suffix=")">
+                        <foreach collection="criteria.criteria" item="criterion">
+                            <choose>
+                                <when test="criterion.noValue">
+                                    and ${criterion.condition}
+                                </when>
+                                <when test="criterion.singleValue">
+                                    and ${criterion.condition} #{criterion.value}
+                                </when>
+                                <when test="criterion.betweenValue">
+                                    and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
+                                </when>
+                                <when test="criterion.listValue">
+                                    and ${criterion.condition}
+                                    <foreach close=")" collection="criterion.value" item="listItem" open="("
+                                             separator=",">
+                                        #{listItem}
+                                    </foreach>
+                                </when>
+                            </choose>
+                        </foreach>
+                    </trim>
+                </if>
+            </foreach>
+        </where>
+    </sql>
+    <sql id="Update_By_Example_Where_Clause">
+        <where>
+            <foreach collection="example.oredCriteria" item="criteria" separator="or">
+                <if test="criteria.valid">
+                    <trim prefix="(" prefixOverrides="and" suffix=")">
+                        <foreach collection="criteria.criteria" item="criterion">
+                            <choose>
+                                <when test="criterion.noValue">
+                                    and ${criterion.condition}
+                                </when>
+                                <when test="criterion.singleValue">
+                                    and ${criterion.condition} #{criterion.value}
+                                </when>
+                                <when test="criterion.betweenValue">
+                                    and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
+                                </when>
+                                <when test="criterion.listValue">
+                                    and ${criterion.condition}
+                                    <foreach close=")" collection="criterion.value" item="listItem" open="("
+                                             separator=",">
+                                        #{listItem}
+                                    </foreach>
+                                </when>
+                            </choose>
+                        </foreach>
+                    </trim>
+                </if>
+            </foreach>
+        </where>
+    </sql>
+    <sql id="Base_Column_List">
+        id, test_case_id, test_id, test_type
+    </sql>
+    <select id="selectByExample" parameterType="io.metersphere.base.domain.TestCaseTestExample"
+            resultMap="BaseResultMap">
+        select
+        <if test="distinct">
+            distinct
+        </if>
+        <include refid="Base_Column_List"/>
+        from test_case_test
+        <if test="_parameter != null">
+            <include refid="Example_Where_Clause"/>
+        </if>
+        <if test="orderByClause != null">
+            order by ${orderByClause}
+        </if>
+    </select>
+    <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="BaseResultMap">
+        select
+        <include refid="Base_Column_List"/>
+        from test_case_test
+        where id = #{id,jdbcType=VARCHAR}
+    </select>
+    <delete id="deleteByPrimaryKey" parameterType="java.lang.String">
+        delete
+        from test_case_test
+        where id = #{id,jdbcType=VARCHAR}
+    </delete>
+    <delete id="deleteByExample" parameterType="io.metersphere.base.domain.TestCaseTestExample">
+        delete from test_case_test
+        <if test="_parameter != null">
+            <include refid="Example_Where_Clause"/>
+        </if>
+    </delete>
+    <insert id="insert" parameterType="io.metersphere.base.domain.TestCaseTest">
+        insert into test_case_test (id, test_case_id, test_id,
+                                    test_type)
+        values (#{id,jdbcType=VARCHAR}, #{testCaseId,jdbcType=VARCHAR}, #{testId,jdbcType=VARCHAR},
+                #{testType,jdbcType=VARCHAR})
+    </insert>
+    <insert id="insertSelective" parameterType="io.metersphere.base.domain.TestCaseTest">
+        insert into test_case_test
+        <trim prefix="(" suffix=")" suffixOverrides=",">
+            <if test="id != null">
+                id,
+            </if>
+            <if test="testCaseId != null">
+                test_case_id,
+            </if>
+            <if test="testId != null">
+                test_id,
+            </if>
+            <if test="testType != null">
+                test_type,
+            </if>
+        </trim>
+        <trim prefix="values (" suffix=")" suffixOverrides=",">
+            <if test="id != null">
+                #{id,jdbcType=VARCHAR},
+            </if>
+            <if test="testCaseId != null">
+                #{testCaseId,jdbcType=VARCHAR},
+            </if>
+            <if test="testId != null">
+                #{testId,jdbcType=VARCHAR},
+            </if>
+            <if test="testType != null">
+                #{testType,jdbcType=VARCHAR},
+            </if>
+        </trim>
+    </insert>
+    <select id="countByExample" parameterType="io.metersphere.base.domain.TestCaseTestExample"
+            resultType="java.lang.Long">
+        select count(*) from test_case_test
+        <if test="_parameter != null">
+            <include refid="Example_Where_Clause"/>
+        </if>
+    </select>
+    <update id="updateByExampleSelective" parameterType="map">
+        update test_case_test
+        <set>
+            <if test="record.id != null">
+                id = #{record.id,jdbcType=VARCHAR},
+            </if>
+            <if test="record.testCaseId != null">
+                test_case_id = #{record.testCaseId,jdbcType=VARCHAR},
+            </if>
+            <if test="record.testId != null">
+                test_id = #{record.testId,jdbcType=VARCHAR},
+            </if>
+            <if test="record.testType != null">
+                test_type = #{record.testType,jdbcType=VARCHAR},
+            </if>
+        </set>
+        <if test="_parameter != null">
+            <include refid="Update_By_Example_Where_Clause"/>
+        </if>
+    </update>
+    <update id="updateByExample" parameterType="map">
+        update test_case_test
+        set id = #{record.id,jdbcType=VARCHAR},
+        test_case_id = #{record.testCaseId,jdbcType=VARCHAR},
+        test_id = #{record.testId,jdbcType=VARCHAR},
+        test_type = #{record.testType,jdbcType=VARCHAR}
+        <if test="_parameter != null">
+            <include refid="Update_By_Example_Where_Clause"/>
+        </if>
+    </update>
+    <update id="updateByPrimaryKeySelective" parameterType="io.metersphere.base.domain.TestCaseTest">
+        update test_case_test
+        <set>
+            <if test="testCaseId != null">
+                test_case_id = #{testCaseId,jdbcType=VARCHAR},
+            </if>
+            <if test="testId != null">
+                test_id = #{testId,jdbcType=VARCHAR},
+            </if>
+            <if test="testType != null">
+                test_type = #{testType,jdbcType=VARCHAR},
+            </if>
+        </set>
+        where id = #{id,jdbcType=VARCHAR}
+    </update>
+    <update id="updateByPrimaryKey" parameterType="io.metersphere.base.domain.TestCaseTest">
+        update test_case_test
+        set test_case_id = #{testCaseId,jdbcType=VARCHAR},
+            test_id      = #{testId,jdbcType=VARCHAR},
+            test_type    = #{testType,jdbcType=VARCHAR}
+        where id = #{id,jdbcType=VARCHAR}
+    </update>
+</mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/TestPlanMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/TestPlanMapper.xml
index daa5b8cd4a..6103aa3e95 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/TestPlanMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/TestPlanMapper.xml
@@ -140,20 +140,20 @@
     </if>
   </delete>
   <insert id="insert" parameterType="io.metersphere.base.domain.TestPlan">
-    insert into test_plan (id, workspace_id, report_id,
-                           `name`, description, `status`,
-                           stage, principal, test_case_match_rule,
-                           executor_match_rule, create_time, update_time,
-                           actual_end_time, planned_start_time, planned_end_time,
-                           actual_start_time, creator, project_id,
-                           execution_times, tags)
-    values (#{id,jdbcType=VARCHAR}, #{workspaceId,jdbcType=VARCHAR}, #{reportId,jdbcType=VARCHAR},
-            #{name,jdbcType=VARCHAR}, #{description,jdbcType=VARCHAR}, #{status,jdbcType=VARCHAR},
-            #{stage,jdbcType=VARCHAR}, #{principal,jdbcType=VARCHAR}, #{testCaseMatchRule,jdbcType=VARCHAR},
-            #{executorMatchRule,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT},
-            #{actualEndTime,jdbcType=BIGINT}, #{plannedStartTime,jdbcType=BIGINT}, #{plannedEndTime,jdbcType=BIGINT},
-            #{actualStartTime,jdbcType=BIGINT}, #{creator,jdbcType=VARCHAR}, #{projectId,jdbcType=VARCHAR},
-            #{executionTimes,jdbcType=INTEGER}, #{tags,jdbcType=LONGVARCHAR})
+      insert into test_plan (id, workspace_id, report_id,
+                             `name`, description, `status`,
+                             stage, principal, test_case_match_rule,
+                             executor_match_rule, create_time, update_time,
+                             actual_end_time, planned_start_time, planned_end_time,
+                             actual_start_time, creator, project_id,
+                             execution_times, tags)
+      values (#{id,jdbcType=VARCHAR}, #{workspaceId,jdbcType=VARCHAR}, #{reportId,jdbcType=VARCHAR},
+              #{name,jdbcType=VARCHAR}, #{description,jdbcType=VARCHAR}, #{status,jdbcType=VARCHAR},
+              #{stage,jdbcType=VARCHAR}, #{principal,jdbcType=VARCHAR}, #{testCaseMatchRule,jdbcType=VARCHAR},
+              #{executorMatchRule,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT},
+              #{actualEndTime,jdbcType=BIGINT}, #{plannedStartTime,jdbcType=BIGINT}, #{plannedEndTime,jdbcType=BIGINT},
+              #{actualStartTime,jdbcType=BIGINT}, #{creator,jdbcType=VARCHAR}, #{projectId,jdbcType=VARCHAR},
+              #{executionTimes,jdbcType=INTEGER}, #{tags,jdbcType=LONGVARCHAR})
   </insert>
   <insert id="insertSelective" parameterType="io.metersphere.base.domain.TestPlan">
     insert into test_plan
@@ -357,8 +357,8 @@
     </if>
   </update>
   <update id="updateByExampleWithBLOBs" parameterType="map">
-    update test_plan
-    set id = #{record.id,jdbcType=VARCHAR},
+      update test_plan
+      set id = #{record.id,jdbcType=VARCHAR},
       workspace_id = #{record.workspaceId,jdbcType=VARCHAR},
       report_id = #{record.reportId,jdbcType=VARCHAR},
       `name` = #{record.name,jdbcType=VARCHAR},
@@ -366,44 +366,44 @@
       `status` = #{record.status,jdbcType=VARCHAR},
       stage = #{record.stage,jdbcType=VARCHAR},
       principal = #{record.principal,jdbcType=VARCHAR},
-    test_case_match_rule = #{record.testCaseMatchRule,jdbcType=VARCHAR},
-    executor_match_rule = #{record.executorMatchRule,jdbcType=VARCHAR},
-    create_time = #{record.createTime,jdbcType=BIGINT},
-    update_time = #{record.updateTime,jdbcType=BIGINT},
-    actual_end_time = #{record.actualEndTime,jdbcType=BIGINT},
-    planned_start_time = #{record.plannedStartTime,jdbcType=BIGINT},
-    planned_end_time = #{record.plannedEndTime,jdbcType=BIGINT},
-    actual_start_time = #{record.actualStartTime,jdbcType=BIGINT},
-    creator = #{record.creator,jdbcType=VARCHAR},
-    project_id = #{record.projectId,jdbcType=VARCHAR},
-    execution_times = #{record.executionTimes,jdbcType=INTEGER},
-    tags = #{record.tags,jdbcType=LONGVARCHAR}
-    <if test="_parameter != null">
+      test_case_match_rule = #{record.testCaseMatchRule,jdbcType=VARCHAR},
+      executor_match_rule = #{record.executorMatchRule,jdbcType=VARCHAR},
+      create_time = #{record.createTime,jdbcType=BIGINT},
+      update_time = #{record.updateTime,jdbcType=BIGINT},
+      actual_end_time = #{record.actualEndTime,jdbcType=BIGINT},
+      planned_start_time = #{record.plannedStartTime,jdbcType=BIGINT},
+      planned_end_time = #{record.plannedEndTime,jdbcType=BIGINT},
+      actual_start_time = #{record.actualStartTime,jdbcType=BIGINT},
+      creator = #{record.creator,jdbcType=VARCHAR},
+      project_id = #{record.projectId,jdbcType=VARCHAR},
+      execution_times = #{record.executionTimes,jdbcType=INTEGER},
+      tags = #{record.tags,jdbcType=LONGVARCHAR}
+      <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
   </update>
   <update id="updateByExample" parameterType="map">
-    update test_plan
-    set id = #{record.id,jdbcType=VARCHAR},
+      update test_plan
+      set id = #{record.id,jdbcType=VARCHAR},
       workspace_id = #{record.workspaceId,jdbcType=VARCHAR},
       report_id = #{record.reportId,jdbcType=VARCHAR},
       `name` = #{record.name,jdbcType=VARCHAR},
       description = #{record.description,jdbcType=VARCHAR},
       `status` = #{record.status,jdbcType=VARCHAR},
       stage = #{record.stage,jdbcType=VARCHAR},
-    principal = #{record.principal,jdbcType=VARCHAR},
-    test_case_match_rule = #{record.testCaseMatchRule,jdbcType=VARCHAR},
-    executor_match_rule = #{record.executorMatchRule,jdbcType=VARCHAR},
-    create_time = #{record.createTime,jdbcType=BIGINT},
-    update_time = #{record.updateTime,jdbcType=BIGINT},
-    actual_end_time = #{record.actualEndTime,jdbcType=BIGINT},
-    planned_start_time = #{record.plannedStartTime,jdbcType=BIGINT},
-    planned_end_time = #{record.plannedEndTime,jdbcType=BIGINT},
-    actual_start_time = #{record.actualStartTime,jdbcType=BIGINT},
-    creator = #{record.creator,jdbcType=VARCHAR},
-    project_id = #{record.projectId,jdbcType=VARCHAR},
-    execution_times = #{record.executionTimes,jdbcType=INTEGER}
-    <if test="_parameter != null">
+      principal = #{record.principal,jdbcType=VARCHAR},
+      test_case_match_rule = #{record.testCaseMatchRule,jdbcType=VARCHAR},
+      executor_match_rule = #{record.executorMatchRule,jdbcType=VARCHAR},
+      create_time = #{record.createTime,jdbcType=BIGINT},
+      update_time = #{record.updateTime,jdbcType=BIGINT},
+      actual_end_time = #{record.actualEndTime,jdbcType=BIGINT},
+      planned_start_time = #{record.plannedStartTime,jdbcType=BIGINT},
+      planned_end_time = #{record.plannedEndTime,jdbcType=BIGINT},
+      actual_start_time = #{record.actualStartTime,jdbcType=BIGINT},
+      creator = #{record.creator,jdbcType=VARCHAR},
+      project_id = #{record.projectId,jdbcType=VARCHAR},
+      execution_times = #{record.executionTimes,jdbcType=INTEGER}
+      <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
   </update>
@@ -471,48 +471,48 @@
     where id = #{id,jdbcType=VARCHAR}
   </update>
   <update id="updateByPrimaryKeyWithBLOBs" parameterType="io.metersphere.base.domain.TestPlan">
-    update test_plan
-    set workspace_id         = #{workspaceId,jdbcType=VARCHAR},
-        report_id            = #{reportId,jdbcType=VARCHAR},
-        `name`               = #{name,jdbcType=VARCHAR},
-        description          = #{description,jdbcType=VARCHAR},
-        `status`             = #{status,jdbcType=VARCHAR},
-        stage                = #{stage,jdbcType=VARCHAR},
-        principal            = #{principal,jdbcType=VARCHAR},
-        test_case_match_rule = #{testCaseMatchRule,jdbcType=VARCHAR},
-        executor_match_rule  = #{executorMatchRule,jdbcType=VARCHAR},
-        create_time          = #{createTime,jdbcType=BIGINT},
-        update_time          = #{updateTime,jdbcType=BIGINT},
-        actual_end_time      = #{actualEndTime,jdbcType=BIGINT},
-        planned_start_time   = #{plannedStartTime,jdbcType=BIGINT},
-        planned_end_time     = #{plannedEndTime,jdbcType=BIGINT},
-        actual_start_time    = #{actualStartTime,jdbcType=BIGINT},
-        creator              = #{creator,jdbcType=VARCHAR},
-        project_id           = #{projectId,jdbcType=VARCHAR},
-        execution_times      = #{executionTimes,jdbcType=INTEGER},
-        tags                 = #{tags,jdbcType=LONGVARCHAR}
-    where id = #{id,jdbcType=VARCHAR}
+      update test_plan
+      set workspace_id         = #{workspaceId,jdbcType=VARCHAR},
+          report_id            = #{reportId,jdbcType=VARCHAR},
+          `name`               = #{name,jdbcType=VARCHAR},
+          description          = #{description,jdbcType=VARCHAR},
+          `status`             = #{status,jdbcType=VARCHAR},
+          stage                = #{stage,jdbcType=VARCHAR},
+          principal            = #{principal,jdbcType=VARCHAR},
+          test_case_match_rule = #{testCaseMatchRule,jdbcType=VARCHAR},
+          executor_match_rule  = #{executorMatchRule,jdbcType=VARCHAR},
+          create_time          = #{createTime,jdbcType=BIGINT},
+          update_time          = #{updateTime,jdbcType=BIGINT},
+          actual_end_time      = #{actualEndTime,jdbcType=BIGINT},
+          planned_start_time   = #{plannedStartTime,jdbcType=BIGINT},
+          planned_end_time     = #{plannedEndTime,jdbcType=BIGINT},
+          actual_start_time    = #{actualStartTime,jdbcType=BIGINT},
+          creator              = #{creator,jdbcType=VARCHAR},
+          project_id           = #{projectId,jdbcType=VARCHAR},
+          execution_times      = #{executionTimes,jdbcType=INTEGER},
+          tags                 = #{tags,jdbcType=LONGVARCHAR}
+      where id = #{id,jdbcType=VARCHAR}
   </update>
   <update id="updateByPrimaryKey" parameterType="io.metersphere.base.domain.TestPlan">
-    update test_plan
-    set workspace_id         = #{workspaceId,jdbcType=VARCHAR},
-        report_id            = #{reportId,jdbcType=VARCHAR},
-        `name`               = #{name,jdbcType=VARCHAR},
-        description          = #{description,jdbcType=VARCHAR},
-        `status`             = #{status,jdbcType=VARCHAR},
-        stage                = #{stage,jdbcType=VARCHAR},
-        principal            = #{principal,jdbcType=VARCHAR},
-        test_case_match_rule = #{testCaseMatchRule,jdbcType=VARCHAR},
-        executor_match_rule  = #{executorMatchRule,jdbcType=VARCHAR},
-        create_time          = #{createTime,jdbcType=BIGINT},
-        update_time          = #{updateTime,jdbcType=BIGINT},
-        actual_end_time      = #{actualEndTime,jdbcType=BIGINT},
-        planned_start_time   = #{plannedStartTime,jdbcType=BIGINT},
-        planned_end_time     = #{plannedEndTime,jdbcType=BIGINT},
-        actual_start_time    = #{actualStartTime,jdbcType=BIGINT},
-        creator              = #{creator,jdbcType=VARCHAR},
-        project_id           = #{projectId,jdbcType=VARCHAR},
-        execution_times      = #{executionTimes,jdbcType=INTEGER}
-    where id = #{id,jdbcType=VARCHAR}
+      update test_plan
+      set workspace_id         = #{workspaceId,jdbcType=VARCHAR},
+          report_id            = #{reportId,jdbcType=VARCHAR},
+          `name`               = #{name,jdbcType=VARCHAR},
+          description          = #{description,jdbcType=VARCHAR},
+          `status`             = #{status,jdbcType=VARCHAR},
+          stage                = #{stage,jdbcType=VARCHAR},
+          principal            = #{principal,jdbcType=VARCHAR},
+          test_case_match_rule = #{testCaseMatchRule,jdbcType=VARCHAR},
+          executor_match_rule  = #{executorMatchRule,jdbcType=VARCHAR},
+          create_time          = #{createTime,jdbcType=BIGINT},
+          update_time          = #{updateTime,jdbcType=BIGINT},
+          actual_end_time      = #{actualEndTime,jdbcType=BIGINT},
+          planned_start_time   = #{plannedStartTime,jdbcType=BIGINT},
+          planned_end_time     = #{plannedEndTime,jdbcType=BIGINT},
+          actual_start_time    = #{actualStartTime,jdbcType=BIGINT},
+          creator              = #{creator,jdbcType=VARCHAR},
+          project_id           = #{projectId,jdbcType=VARCHAR},
+          execution_times      = #{executionTimes,jdbcType=INTEGER}
+      where id = #{id,jdbcType=VARCHAR}
   </update>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java b/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
index 85e342970a..56f477e3bc 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
@@ -30,6 +30,7 @@ import io.metersphere.track.request.testcase.QueryTestCaseRequest;
 import io.metersphere.track.request.testcase.TestCaseBatchRequest;
 import io.metersphere.track.request.testcase.TestCaseMinderEditRequest;
 import io.metersphere.xmind.XmindCaseParser;
+import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.collections4.ListUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.apache.ibatis.session.ExecutorType;
@@ -37,7 +38,6 @@ import org.apache.ibatis.session.SqlSession;
 import org.apache.ibatis.session.SqlSessionFactory;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
-import org.apache.commons.collections.CollectionUtils;
 import org.springframework.web.multipart.MultipartFile;
 
 import javax.annotation.Resource;
@@ -88,6 +88,8 @@ public class TestCaseService {
     FileService fileService;
     @Resource
     TestCaseFileMapper testCaseFileMapper;
+    @Resource
+    TestCaseTestMapper testCaseTestMapper;
 
     public TestCaseWithBLOBs addTestCase(TestCaseWithBLOBs testCase) {
         testCase.setName(testCase.getName());
@@ -181,6 +183,9 @@ public class TestCaseService {
         testPlanTestCaseMapper.deleteByExample(example);
         testCaseIssueService.delTestCaseIssues(testCaseId);
         testCaseCommentService.deleteCaseComment(testCaseId);
+        TestCaseTestExample examples = new TestCaseTestExample();
+        examples.createCriteria().andTestCaseIdEqualTo(testCaseId);
+        testCaseTestMapper.deleteByExample(examples);
         return testCaseMapper.deleteByPrimaryKey(testCaseId);
     }
 
@@ -652,7 +657,18 @@ public class TestCaseService {
         }
 
         final TestCaseWithBLOBs testCaseWithBLOBs = addTestCase(request);
-
+        //插入测试与用例关系表
+        if (!CollectionUtils.isEmpty(request.getSelected())) {
+            List<List<String>> selecteds = request.getSelected();
+            TestCaseTest test = new TestCaseTest();
+            selecteds.forEach(id -> {
+                test.setTestType(id.get(0));
+                test.setTestId(id.get(1));
+                test.setId(UUID.randomUUID().toString());
+                test.setTestCaseId(request.getId());
+                testCaseTestMapper.insert(test);
+            });
+        }
         // 复制用例时传入文件ID进行复制
         if (!CollectionUtils.isEmpty(request.getFileIds())) {
             List<String> fileIds = request.getFileIds();
@@ -665,6 +681,7 @@ public class TestCaseService {
             });
         }
 
+
         files.forEach(file -> {
             final FileMetadata fileMetadata = fileService.saveFile(file, testCaseWithBLOBs.getProjectId());
             TestCaseFile testCaseFile = new TestCaseFile();
@@ -680,7 +697,21 @@ public class TestCaseService {
         if (testCaseWithBLOBs == null) {
             MSException.throwException(Translator.get("edit_load_test_not_found") + request.getId());
         }
-
+        //插入测试与用例关系表
+        if (!CollectionUtils.isEmpty(request.getSelected())) {
+            TestCaseTestExample example = new TestCaseTestExample();
+            example.createCriteria().andTestCaseIdEqualTo(request.getId());
+            testCaseTestMapper.deleteByExample(example);
+            List<List<String>> selecteds = request.getSelected();
+            TestCaseTest test = new TestCaseTest();
+            selecteds.forEach(id -> {
+                test.setTestType(id.get(0));
+                test.setTestId(id.get(1));
+                test.setId(UUID.randomUUID().toString());
+                test.setTestCaseId(request.getId());
+                testCaseTestMapper.insert(test);
+            });
+        }
         // 新选择了一个文件，删除原来的文件
         List<FileMetadata> updatedFiles = request.getUpdatedFileList();
         List<FileMetadata> originFiles = fileService.getFileMetadataByCaseId(request.getId());
diff --git a/backend/src/main/resources/db/migration/V78__v1.8_release.sql b/backend/src/main/resources/db/migration/V78__v1.8_release.sql
index 732b89b25d..122ecbbe44 100644
--- a/backend/src/main/resources/db/migration/V78__v1.8_release.sql
+++ b/backend/src/main/resources/db/migration/V78__v1.8_release.sql
@@ -162,18 +162,32 @@ SET file_metadata.project_id = temp.project_id;
 
 CREATE TABLE IF NOT EXISTS `esb_api_params`
 (
-    id      varchar(50)   not null,
-    resource_id      varchar(50),
-    data_struct  LONGTEXT  null,
-    fronted_script   LONGTEXT null,
-    response_data_struct LONGTEXT null,
-    backed_script LONGTEXT null,
+    id                   varchar(50) not null,
+    resource_id          varchar(50),
+    data_struct          LONGTEXT    null,
+    fronted_script       LONGTEXT    null,
+    response_data_struct LONGTEXT    null,
+    backed_script        LONGTEXT    null,
     primary key (id),
-    UNIQUE KEY `resource_id` ( `resource_id` )
+    UNIQUE KEY `resource_id` (`resource_id`)
 ) ENGINE = InnoDB
   DEFAULT CHARSET = utf8mb4;
 -- add execution_times testPlan
 alter table test_plan
     add execution_times int null;
 
-alter table test_case modify method varchar(15) null comment 'Test case method type';
\ No newline at end of file
+alter table test_case
+    modify method varchar(15) null comment 'Test case method type';
+-- add test_case_test
+create table test_case_test
+(
+    id           varchar(70) null,
+    test_case_id varchar(70) null,
+    test_id      varchar(70) null,
+    test_type    varchar(70) null,
+    constraint test_case_test_pk
+        primary key (id)
+) ENGINE = InnoDB
+  DEFAULT CHARSET = utf8mb4;
+alter table test_case
+    modify test_id varchar(2000) null;
\ No newline at end of file
diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml
index 22bd8330e7..d3b0c38faf 100644
--- a/backend/src/main/resources/generatorConfig.xml
+++ b/backend/src/main/resources/generatorConfig.xml
@@ -76,6 +76,7 @@
         <table tableName="test_case_review_load"/>
         <table tableName="test_case_review_scenario"/>
         <table tableName="test_plan"/>
+        <table tableName="test_case_test"/>
 
     </context>
 </generatorConfiguration>
\ No newline at end of file
diff --git a/frontend/src/business/components/api/definition/model/JsonData.js b/frontend/src/business/components/api/definition/model/JsonData.js
index 6d16657b77..e9e4d441db 100644
--- a/frontend/src/business/components/api/definition/model/JsonData.js
+++ b/frontend/src/business/components/api/definition/model/JsonData.js
@@ -71,6 +71,12 @@ export const API_STATUS = [
   {id: 'Underway', label: '进行中'},
   {id: 'Completed', label: '已完成'}
 ]
+export const TEST = [
+    {id: 'performance', name: '性能测试'},
+    {id: 'api', name: '接口测试'},
+    {id: 'testcase', name: '测试用例'},
+    {id: 'automation', name: '场景测试'}
+  ]
 
 export const API_METHOD_COLOUR = [
   ['GET', "#61AFFE"], ['POST', '#49CC90'], ['PUT', '#fca130'],
diff --git a/frontend/src/business/components/track/case/TestCase.vue b/frontend/src/business/components/track/case/TestCase.vue
index d682a7ce7c..b9e418e40f 100644
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@@ -197,6 +197,7 @@ export default {
       }
     },
     addTab(tab) {
+      this.projectId=getCurrentProjectID();
       if (!this.projectId) {
         this.$warning(this.$t('commons.check_project_tip'));
         return;
@@ -257,6 +258,7 @@ export default {
           this.testCaseReadOnly = true;
         }
         let caseId = this.$route.params.caseId;
+        this.projectId=getCurrentProjectID();
         if (!this.projectId) {
           this.$warning(this.$t('commons.check_project_tip'));
           return;
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index a323c4acd7..583b8704c7 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -99,37 +99,15 @@
               </el-form-item>
             </el-col>
             <el-col :span="7">
-              <el-form-item :label="$t('test_track.case.type')" :label-width="formLabelWidth" prop="type">
-                <el-select @change="typeChange" :disabled="readOnly" v-model="form.type"
-                           :placeholder="$t('test_track.case.input_type')" class="ms-case-input">
-                  <el-option :label="$t('commons.performance')" value="performance"></el-option>
-                  <el-option :label="$t('commons.api')" value="api"></el-option>
-                  <el-option :label="$t('api_test.home_page.failed_case_list.table_value.case_type.api')"
-                             value="testcase"></el-option>
-                  <el-option :label="$t('api_test.home_page.failed_case_list.table_value.case_type.scene')"
-                             value="automation"></el-option>
-                </el-select>
-              </el-form-item>
+                <el-form-item :label="$t('test_track.case.relate_test')" :label-width="formLabelWidth" prop="testId">
+                  <el-cascader  show-all-levels	   v-model="form.selected" :props="props"  ></el-cascader>
+                </el-form-item>
             </el-col>
-
-            <el-col :span="7">
-              <el-form-item :label="$t('test_track.case.relate_test')" :label-width="formLabelWidth" prop="testId">
-                <el-select filterable :disabled="readOnly" v-model="form.testId"
-                           :placeholder="$t('test_track.case.input_type')" class="ms-case-input">
-                  <el-option
-                    v-for="item in testOptions"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="7" v-if="form.testId=='other'">
+<!--            <el-col :span="7" v-if="form.testId=='other'">
               <el-form-item :label="$t('test_track.case.test_name')" :label-width="formLabelWidth" prop="testId">
                 <el-input v-model="form.otherTestName" :placeholder="$t('test_track.case.input_test_case')"></el-input>
               </el-form-item>
-            </el-col>
+            </el-col>-->
 
           </el-row>
 
@@ -146,6 +124,7 @@
                   </el-option>
                 </el-select>
               </el-form-item>
+
             </el-col>
             <el-col :span="10">
               <el-form-item label="需求名称" :label-width="formLabelWidth" prop="demandName" v-if="form.demandId=='other'">
@@ -310,7 +289,6 @@
 </template>
 
 <script>
-
 import {TokenKey, WORKSPACE_ID} from '@/common/js/constants';
 import MsDialogFooter from '../../../common/components/MsDialogFooter'
 import {getCurrentUser, listenGoBack, removeGoBackListener} from "@/common/js/utils";
@@ -325,16 +303,59 @@ import MsPreviousNextButton from "../../../common/components/MsPreviousNextButto
 import {ELEMENTS} from "@/business/components/api/automation/scenario/Setting";
 import TestCaseComment from "@/business/components/track/case/components/TestCaseComment";
 import ReviewCommentItem from "@/business/components/track/review/commom/ReviewCommentItem";
-import {API_STATUS, REVIEW_STATUS} from "@/business/components/api/definition/model/JsonData";
+import {API_STATUS, REVIEW_STATUS, TEST} from "@/business/components/api/definition/model/JsonData";
 
 export default {
   name: "TestCaseEdit",
   components: {
+
     ReviewCommentItem,
     TestCaseComment, MsPreviousNextButton, MsInputTag, CaseComment, MsDialogFooter, TestCaseAttachment
   },
   data() {
     return {
+      props: {
+        multiple: true,
+        lazy: true,
+        lazyLoad: ((node, resolve) => {
+          const { level } = node;
+          if(node.level==0){
+            const nodes = TEST
+              .map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 1
+              }));
+            resolve(nodes)
+          }
+          if(node.level==1){
+            this.projectId = getCurrentProjectID()
+            this.testOptions = [];
+            let url = '';
+            this.form.type=node.data.value
+            console.log(this.form.type)
+            if (this.form.type === 'testcase' || this.form.type === 'automation') {
+              url = '/api/' + this.form.type + '/list/' + this.projectId
+            } else if (this.form.type === 'performance' || this.form.type === 'api') {
+              url = '/' + this.form.type + '/list/' + this.projectId
+            }
+            if (this.projectId && this.form.type != '' && this.form.type != 'undefined') {
+              this.$get(url, response => {
+                response.data.unshift({id: 'other', name: this.$t('test_track.case.other')})
+                const nodes = response.data
+                  .map(item => ({
+                    value: item.id,
+                    label: item.name,
+                    leaf: level >= 1
+                  }));
+                resolve(nodes)
+              });
+
+            }
+
+          }
+        }),
+      },
       options: REVIEW_STATUS,
       statuOptions:API_STATUS,
       comments: [],
@@ -356,6 +377,7 @@ export default {
           desc: '',
           result: ''
         }],
+        selected:[],
         remark: '',
         tags: [],
         demandId: '',
@@ -433,6 +455,7 @@ export default {
     }
   },
   methods: {
+
     handleCommand(e) {
       if (e === "ADD_AND_CREATE") {
         this.$refs['caseFrom'].validate((valid) => {
@@ -548,6 +571,7 @@ export default {
     },
     setFormData(testCase) {
       testCase.tags = JSON.parse(testCase.tags);
+      testCase.selected = JSON.parse(testCase.testId);
       let tmp = {};
       Object.assign(tmp, testCase);
       tmp.steps = JSON.parse(testCase.steps);
@@ -555,8 +579,8 @@ export default {
         tmp.steps = []
       }
       Object.assign(this.form, tmp);
-
       this.form.module = testCase.nodeId;
+      this.form.testId=testCase.testId
       this.getFileMetaData(testCase);
     },
     setTestCaseExtInfo(testCase) {
@@ -662,8 +686,8 @@ export default {
     },
     buildParam() {
       let param = {};
-
       Object.assign(param, this.form);
+      console.log(this.form)
       param.steps = JSON.stringify(this.form.steps);
       param.nodeId = this.form.module;
       this.moduleOptions.forEach(item => {
@@ -679,6 +703,7 @@ export default {
       if (this.form.tags instanceof Array) {
         this.form.tags = JSON.stringify(this.form.tags);
       }
+      param.testId=JSON.stringify(this.form.selected)
       param.tags = this.form.tags;
       return param;
     },
@@ -749,7 +774,8 @@ export default {
         this.maintainerOptions = response.data;
       });
     },
-    getTestOptions() {
+    getTestOptions(val) {
+      console.log(val)
       this.projectId = getCurrentProjectID()
       this.testOptions = [];
       let url = '';

From 1d0ea0055375ba751b46cef82152c5068d6be351 Mon Sep 17 00:00:00 2001
From: wenyann <64353056+wenyann@users.noreply.github.com>
Date: Sun, 21 Mar 2021 19:43:27 +0800
Subject: [PATCH 18/22] =?UTF-8?q?feat:=20=E6=B5=8B=E8=AF=95=E7=94=A8?=
 =?UTF-8?q?=E4=BE=8B=E5=85=B3=E8=81=94=E5=A4=9A=E4=B8=AA=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../metersphere/track/request/testcase/EditTestCaseRequest.java  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend/src/main/java/io/metersphere/track/request/testcase/EditTestCaseRequest.java b/backend/src/main/java/io/metersphere/track/request/testcase/EditTestCaseRequest.java
index 3da65becc6..38307ffda4 100644
--- a/backend/src/main/java/io/metersphere/track/request/testcase/EditTestCaseRequest.java
+++ b/backend/src/main/java/io/metersphere/track/request/testcase/EditTestCaseRequest.java
@@ -16,4 +16,5 @@ public class EditTestCaseRequest extends TestCaseWithBLOBs {
      * 复制测试用例后，要进行复制的文件Id list
      */
     private List<String> fileIds = new ArrayList<>();
+    private List<List<String>> selected = new ArrayList<>();
 }

From 362e0b37205ebbc6f27c32d0b55c7babe9f2863f Mon Sep 17 00:00:00 2001
From: "song.tianyang" <tianyang.song@fit2cloud.com>
Date: Sun, 21 Mar 2021 20:44:24 +0800
Subject: [PATCH 19/22] =?UTF-8?q?refactor:=20=E6=96=87=E6=A1=A3=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=80=A7=E8=83=BD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

文档页面性能优化
---
 .../api/controller/ApiDocumentController.java |  16 +
 .../api/service/ApiDefinitionService.java     |  10 +
 .../api/service/ApiDocumentService.java       |  17 +-
 .../base/mapper/ext/ExtApiDocumentMapper.xml  |  46 +-
 .../controller/IndexController.java           |   5 +
 .../components/document/ApiDocumentAnchor.vue | 218 ++++--
 .../document/ApiDocumentAnchorData.vue        | 720 ------------------
 .../components/list/ApiDocumentsPage.vue      |   7 +-
 .../src/business/components/api/router.js     |   5 -
 frontend/src/document/Document.vue            |  11 +-
 10 files changed, 231 insertions(+), 824 deletions(-)
 delete mode 100644 frontend/src/business/components/api/definition/components/document/ApiDocumentAnchorData.vue

diff --git a/backend/src/main/java/io/metersphere/api/controller/ApiDocumentController.java b/backend/src/main/java/io/metersphere/api/controller/ApiDocumentController.java
index 8e84fe72b9..378350cdc4 100644
--- a/backend/src/main/java/io/metersphere/api/controller/ApiDocumentController.java
+++ b/backend/src/main/java/io/metersphere/api/controller/ApiDocumentController.java
@@ -12,6 +12,7 @@ import io.metersphere.base.domain.ApiDocumentShare;
 import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
+import java.util.ArrayList;
 import java.util.List;
 
 /**
@@ -35,6 +36,21 @@ public class ApiDocumentController {
         return returnList;
     }
 
+    @PostMapping("/selectApiInfoByParam")
+    public List<ApiDocumentInfoDTO> selectApiInfoByParam(@RequestBody ApiDocumentRequest request) {
+        List<ApiDocumentInfoDTO> returnList = new ArrayList<>();
+        List<ApiDefinitionWithBLOBs> apiModels = apiDefinitionService.getBLOBs(request.getApiIdList());
+        for (ApiDefinitionWithBLOBs apiModel : apiModels) {
+            try{
+                ApiDocumentInfoDTO returnDTO = apiDocumentService.conversionModelToDTO(apiModel);
+                returnList.add(returnDTO);
+            }catch (Exception e){
+                e.printStackTrace();
+            }
+        }
+        return returnList;
+    }
+
     @GetMapping("/selectApiInfoById/{id}")
     public ApiDocumentInfoDTO selectApiInfoById(@PathVariable String id) {
         ApiDefinitionWithBLOBs apiModel = apiDefinitionService.getBLOBs(id);
diff --git a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
index 83dc9c30a5..4df858c686 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
@@ -136,6 +136,16 @@ public class ApiDefinitionService {
     public ApiDefinitionWithBLOBs getBLOBs(String id) {
         return apiDefinitionMapper.selectByPrimaryKey(id);
     }
+    public List<ApiDefinitionWithBLOBs> getBLOBs(List<String> idList) {
+        if(idList == null || idList.isEmpty()){
+            return  new ArrayList<>(0);
+        }else{
+            ApiDefinitionExample example = new ApiDefinitionExample();
+            example.createCriteria().andIdIn(idList);
+            example.setOrderByClause("create_time DESC ");
+            return apiDefinitionMapper.selectByExampleWithBLOBs(example);
+        }
+    }
 
     public void create(SaveApiDefinitionRequest request, List<MultipartFile> bodyFiles) {
         List<String> bodyUploadIds = new ArrayList<>(request.getBodyUploadIds());
diff --git a/backend/src/main/java/io/metersphere/api/service/ApiDocumentService.java b/backend/src/main/java/io/metersphere/api/service/ApiDocumentService.java
index df703d742e..55a4c9d9a0 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiDocumentService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiDocumentService.java
@@ -1,24 +1,15 @@
 package io.metersphere.api.service;
 
-import com.alibaba.fastjson.JSON;
 import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
-import io.metersphere.api.dto.document.ApiDocumentInfoDTO;
-import io.metersphere.api.dto.document.ApiDocumentRequest;
-import io.metersphere.api.dto.document.ApiDocumentShareRequest;
-import io.metersphere.api.dto.document.ApiDocumentSimpleInfoDTO;
-import io.metersphere.api.dto.document.ApiDocumentShareType;
-import io.metersphere.api.dto.document.ApiDocumentShareDTO;
+import io.metersphere.api.dto.document.*;
 import io.metersphere.base.domain.ApiDefinitionWithBLOBs;
 import io.metersphere.base.domain.ApiDocumentShare;
-import io.metersphere.base.domain.ApiDocumentShareExample;
 import io.metersphere.base.mapper.ApiDocumentShareMapper;
 import io.metersphere.base.mapper.ext.ExtApiDocumentMapper;
 import io.metersphere.base.mapper.ext.ExtApiDocumentShareMapper;
-import io.metersphere.commons.exception.MSException;
 import io.metersphere.commons.utils.SessionUtils;
 import io.metersphere.dto.BaseSystemConfigDTO;
-import io.metersphere.i18n.Translator;
 import io.metersphere.service.SystemParameterService;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
@@ -226,7 +217,7 @@ public class ApiDocumentService {
             //赋值响应头
             if (apiModel.getResponse() != null) {
                 JSONObject responseJsonObj = JSONObject.parseObject(apiModel.getResponse());
-                if (responseJsonObj.containsKey("headers")) {
+                if (responseJsonObj!=null && responseJsonObj.containsKey("headers")) {
                     JSONArray responseHeadDataArr = new JSONArray();
                     JSONArray headArr = responseJsonObj.getJSONArray("headers");
                     for (int index = 0; index < headArr.size(); index++) {
@@ -238,7 +229,7 @@ public class ApiDocumentService {
                     apiInfoDTO.setResponseHead(responseHeadDataArr.toJSONString());
                 }
                 // 赋值响应体
-                if (responseJsonObj.containsKey("body")) {
+                if (responseJsonObj!=null && responseJsonObj.containsKey("body")) {
                     JSONObject bodyObj = responseJsonObj.getJSONObject("body");
                     if (bodyObj.containsKey("type")) {
                         String type = bodyObj.getString("type");
@@ -295,7 +286,7 @@ public class ApiDocumentService {
                     }
                 }
                 // 赋值响应码
-                if (responseJsonObj.containsKey("statusCode")) {
+                if (responseJsonObj!=null && responseJsonObj.containsKey("statusCode")) {
                     JSONArray responseStatusDataArr = new JSONArray();
                     JSONArray statusArr = responseJsonObj.getJSONArray("statusCode");
                     for (int index = 0; index < statusArr.size(); index++) {
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDocumentMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDocumentMapper.xml
index c39fe7505e..626296a8b5 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDocumentMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDocumentMapper.xml
@@ -2,30 +2,28 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="io.metersphere.base.mapper.ext.ExtApiDocumentMapper">
     <select id="findApiDocumentSimpleInfoByRequest" resultType="io.metersphere.api.dto.document.ApiDocumentInfoDTO">
-        SELECT api.id,api.name FROM Api_definition api
-        <where>
-            <if test="request.projectId != null">
-                AND api.project_Id = #{request.projectId}
-            </if>
-            <if test="request.name != null and request.name != '' ">
-                AND api.name like CONCAT('%', #{request.name},'%')
-            </if>
-            <if test="request.type != null and request.type != '' and request.type != 'ALL' ">
-                AND  api.method = #{request.type}
-            </if>
-            <if test="request.moduleIds != null and request.moduleIds.size() > 0">
-                AND api.module_id in
-                <foreach collection="request.moduleIds" item="nodeId" separator="," open="(" close=")">
-                    #{nodeId}
-                </foreach>
-            </if>
-            <if test="request.apiIdList != null and request.apiIdList.size() > 0">
-                AND api.id in
-                <foreach collection="request.apiIdList" item="apiId" separator="," open="(" close=")">
-                    #{apiId}
-                </foreach>
-            </if>
-        </where>
+        SELECT api.id,api.name FROM Api_definition api WHERE api.protocol = 'HTTP' AND api.status != 'Trash'
+        <if test="request.projectId != null">
+            AND api.project_Id = #{request.projectId}
+        </if>
+        <if test="request.name != null and request.name != '' ">
+            AND api.name like CONCAT('%', #{request.name},'%')
+        </if>
+        <if test="request.type != null and request.type != '' and request.type != 'ALL' ">
+            AND api.method = #{request.type}
+        </if>
+        <if test="request.moduleIds != null and request.moduleIds.size() > 0">
+            AND api.module_id in
+            <foreach collection="request.moduleIds" item="nodeId" separator="," open="(" close=")">
+                #{nodeId}
+            </foreach>
+        </if>
+        <if test="request.apiIdList != null and request.apiIdList.size() > 0">
+            AND api.id in
+            <foreach collection="request.apiIdList" item="apiId" separator="," open="(" close=")">
+                #{apiId}
+            </foreach>
+        </if>
         <if test="request.orderCondition == 'createTimeDesc'">
             ORDER BY api.create_time DESC
         </if>
diff --git a/backend/src/main/java/io/metersphere/controller/IndexController.java b/backend/src/main/java/io/metersphere/controller/IndexController.java
index 868b253dd3..c202c10b60 100644
--- a/backend/src/main/java/io/metersphere/controller/IndexController.java
+++ b/backend/src/main/java/io/metersphere/controller/IndexController.java
@@ -22,4 +22,9 @@ public class IndexController {
             return "redirect:/";
         }
     }
+
+    @GetMapping(value = "/document")
+    public String document() {
+        return "document:/";
+    }
 }
diff --git a/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchor.vue b/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchor.vue
index ea931ee009..7f6552d34c 100644
--- a/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchor.vue
+++ b/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchor.vue
@@ -29,7 +29,7 @@
         </el-row>
         <el-divider></el-divider>
         <div ref="apiDocInfoDiv" @scroll="handleScroll" >
-          <div v-for="(apiInfo) in apiInfoArray" :key="apiInfo.id" ref="apiDocInfoDivItem">
+          <div v-for="(apiInfo) in apiShowArray" :key="apiInfo.id" ref="apiDocInfoDivItem">
             <div style="font-size: 17px">
               <el-popover
                 v-if="projectId"
@@ -283,12 +283,13 @@ import ApiStatus from "@/business/components/api/definition/components/list/ApiS
 import {calculate} from "@/business/components/api/definition/model/ApiTestModel";
 import MsJsonCodeEdit from "@/business/components/common/json-schema/JsonSchemaEditor";
 import Api from "@/business/components/api/router";
+import {uuid} from "@/common/js/utils";
 
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
 const apiDocumentBatchShare = (requireComponent!=null&&requireComponent.keys().length) > 0 ? requireComponent("./share/ApiDocumentBatchShare.vue") : {};
 
 export default {
-  name: "ApiDocumentItem",
+  name: "ApiDocumentAnchor",
   components: {
     Api,
     MsJsonCodeEdit,
@@ -301,7 +302,6 @@ export default {
       batchShareUrl:"",
       apiStepIndex: 0,
       showXpackCompnent:false,
-      apiShowArray: [],
       apiInfoArray: [],
       modes: ['text', 'json', 'xml', 'html'],
       formParamTypes: ['form-data', 'x-www-from-urlencoded', 'BINARY'],
@@ -332,7 +332,11 @@ export default {
         responseCode: "无",
       },
       methodColorMap: new Map(API_METHOD_COLOUR),
-      clientHeight: '',//坚挺浏览器高度
+      clientHeight: '',//浏览器高度,
+      maxCompnentSize : 5, //浏览器最多渲染的api信息体数量
+      apiShowArray:[],//浏览器要渲染的api信息集合
+      needAsyncSelect: false, //是否需要异步查询api详细数据做展现。只有本次要展示的数据总量大于maxCompnentSize时为true
+      currentApiIndexInApiShowArray: 0,//当前主要展示的api信息在apiShowArray的索引
     }
   },
   props: {
@@ -414,26 +418,24 @@ export default {
         simpleRequest.moduleIds = this.moduleIds;
       }
 
-      let simpleInfoUrl = "/document/selectApiSimpleInfo";
+      let simpleInfoUrl = "/api/document/selectApiSimpleInfo";
       this.apiInfoArray = [];
       this.$post(simpleInfoUrl, simpleRequest, response => {
         this.apiInfoArray = response.data;
         this.apiStepIndex = 0;
-        if(response.data.length > 7){
-          this.apiShowArray = [
-            response.data[0],
-            response.data[1],
-            response.data[2],
-            response.data[3],
-            response.data[4],
-            response.data[5],
-            response.data[6],
-          ];
-        }else{
-          this.apiShowArray = response.data;
-        }
         if (this.apiInfoArray.length > 0) {
-          this.checkApiInfoNode(this.apiStepIndex);
+          this.checkApiInfoNode(this.apiStepIndex,true);
+        }
+        //拼接body展现数据
+        // for(let dataIndex = 0; dataIndex < this.maxCompnentSize; dataIndex ++){
+        //   if(dataIndex < response.data.length){
+        //     this.apiShowArray.push(response.data[dataIndex]);
+        //   }
+        // }
+        if(response.data.length > this.maxCompnentSize){
+          this.needAsyncSelect = true;
+        }else{
+          this.needAsyncSelect = false;
         }
       });
     },
@@ -458,7 +460,7 @@ export default {
       genShareInfoParam.shareApiIdList = shareIdArr;
       genShareInfoParam.shareType = shareType;
 
-      this.$post("/document/generateApiDocumentShareInfo", genShareInfoParam, res => {
+      this.$post("/api/document/generateApiDocumentShareInfo", genShareInfoParam, res => {
         if(shareType == "Batch"){
           this.batchShareUrl = thisHost+"/document"+res.data.shareUrl;
         }else{
@@ -468,12 +470,34 @@ export default {
       });
     },
     selectApiInfo(index,apiId) {
-      let simpleInfoUrl = "/document/selectApiInfoById/" + apiId;
+      let simpleInfoUrl = "/api/document/selectApiInfoById/" + apiId;
       this.$get(simpleInfoUrl, response => {
         let returnData = response.data;
         this.$set(this.apiInfoArray,index,returnData);
       });
     },
+    //itemIndex,afterNodeIndex,beforeNodeIndex 三个是回调参数，用于重新构建showArray的数据 isRedirectScroll:是否调用跳转函数
+    selectApiInfoBatch(indexArr,apiIdArr,itemIndex,afterNodeIndex,beforeNodeIndex,isRedirectScroll) {
+      if(indexArr.length != apiIdArr.length){
+        return;
+      }else {
+        let params = {};
+        params.apiIdList = apiIdArr;
+        this.$post("/api/document/selectApiInfoByParam", params, response => {
+          let returnDatas = response.data;
+          for(let dataIndex = 0; dataIndex < returnDatas.length;dataIndex ++){
+            let index = indexArr[dataIndex];
+            let data = returnDatas[dataIndex];
+            this.$set(this.apiInfoArray,index,data);
+          }
+          this.updateShowArray(itemIndex,afterNodeIndex,beforeNodeIndex);
+          if(isRedirectScroll){
+            this.redirectScroll();
+          }
+        });
+      }
+
+    },
     clickStep(apiId) {
       for (let index = 0; index < this.apiInfoArray.length; index++) {
         if (apiId == this.apiInfoArray[index].id) {
@@ -482,9 +506,7 @@ export default {
         }
       }
       //检查数据
-      this.checkApiInfoNode(this.apiStepIndex);
-      //进行跳转
-      this.redirectScroll(this.apiStepIndex);
+      this.checkApiInfoNode(this.apiStepIndex,true);
     },
     stepClick(stepIndex) {
       this.apiStepIndex = stepIndex;
@@ -575,14 +597,12 @@ export default {
       this.$message.error(this.$t('api_report.error'));
     },
     handleScroll(){
-
       //apiDocInfoDiv的总高度，是(每个item的高度+20)数量
       let apiDocDivScrollTop = this.$refs.apiDocInfoDiv.scrollTop;
       let apiDocDivClientTop = this.$refs.apiDocInfoDiv.clientHeight;
-
       let scrolledHeigh = apiDocDivScrollTop+apiDocDivClientTop;
       let lastIndex = 0;
-      for (let index = 0; index < this.apiInfoArray.length; index++) {
+      for (let index = 0; index < this.apiShowArray.length; index++) {
         //判断移动到了第几个元素. 公式: 移动过的高度+页面显示高度-第index子元素的高度(含20px)>0 的 index最大值
         if(scrolledHeigh>0){
           lastIndex = index;
@@ -592,40 +612,82 @@ export default {
           break;
         }
       }
-      this.apiStepIndex = lastIndex;
-      //检查上下文 3个以内的节点有没有查询出来
-      this.checkApiInfoNode(this.apiStepIndex);
+
+      let names = "";
+      for(let i = 0;i<this.apiShowArray.length;i++){
+        names += this.apiShowArray[i].name+";";
+      }
+
+      console.log("["+apiDocDivScrollTop+":"+this.apiStepIndex+"]:["+lastIndex+":"+this.currentApiIndexInApiShowArray+"]-------->"+names);
+      if(lastIndex < this.currentApiIndexInApiShowArray){
+        //上移
+        if(this.needAsyncSelect){
+          //进行判断：是否还需要为apiShowArray 增加数据。 由于在当前数据前后最多展现2条数据，
+          //可得： apiStepIndex-1- 2 < apiInfoArray，需要添加数据
+          let dataIndex = this.apiStepIndex -3;
+          if(dataIndex >= 0){
+            let apiInfo = this.apiInfoArray[dataIndex];
+            this.apiShowArray.unshift(apiInfo);
+          }else{
+            this.currentApiIndexInApiShowArray--;
+          }
+
+          if(this.apiShowArray.length > (this.currentApiIndexInApiShowArray+3)){
+            this.apiShowArray.pop();
+          }
+        }
+        this.apiStepIndex --;
+      }else if(lastIndex > this.currentApiIndexInApiShowArray){
+        //下滚
+        if(this.needAsyncSelect){
+          //进行判断：是否还需要为apiShowArray 增加数据。 由于在当前数据前后最多展现2条数据，
+          //可得： apiStepIndex+1+ 2 < apiInfoArray，需要添加数据
+          let dataIndex = this.apiStepIndex +3;
+          if(dataIndex < this.apiInfoArray.length){
+            let apiInfo = this.apiInfoArray[dataIndex];
+            this.apiShowArray.push(apiInfo);
+          }
+
+          if(this.apiShowArray.length <= this.maxCompnentSize){
+            //判断currentApiIndexInApiShowArray 是否需要添加，以及是否需要删除第一个元素
+            this.currentApiIndexInApiShowArray++;
+          }else{
+            this.apiShowArray.shift();
+            let itemHeight = this.$refs.apiDocInfoDivItem[0].offsetHeight+20;
+            this.$refs.apiDocInfoDiv.scrollTop = (apiDocDivScrollTop-itemHeight);
+          }
+        }
+        this.apiStepIndex ++;
+      }
+
+      // this.apiStepIndex = lastIndex;
+      // //检查上下文 2个以内的节点有没有查询出来
+      // this.checkApiInfoNode(this.apiStepIndex);
     },
-    redirectScroll(itemIndex){
+    redirectScroll(){
       //滚动条跳转：将滚动条下拉到显示对应对api接口的位置
-      // let apiDocDivClientTop = this.$refs.apiDocInfoDiv.clientHeight;
       let apiDocDivClientTop = 0;
       let itemHeightCount = 0;
-      for (let i = 0; i <= itemIndex-1; i++) {
-        let itemHeight = this.$refs.apiDocInfoDivItem[i].offsetHeight+20;
-        itemHeightCount+=itemHeight;
+      if(this.currentApiIndexInApiShowArray > 0){
+        for (let i = 0; i <= this.currentApiIndexInApiShowArray-1; i++) {
+          let itemHeight = this.$refs.apiDocInfoDivItem[i].offsetHeight+20;
+          itemHeightCount+=itemHeight;
+        }
       }
       this.$refs.apiDocInfoDiv.scrollTop = (apiDocDivClientTop+itemHeightCount);
     },
-    checkApiInfoNode(itemIndex){
-      //检查要展示的api信息节点，和上下个3个及以内的范围内数据有没有查询过
-      let beforeNodeIndex = itemIndex<3?0:(itemIndex-3);
-      let afterNodeIndex = (itemIndex+3)<this.apiInfoArray.length?(itemIndex+3):this.apiInfoArray.length;
 
-      for(let beforeIndex = itemIndex;beforeIndex < afterNodeIndex;beforeIndex++){
-        let apiInfo = this.apiInfoArray[beforeIndex];
-        if(apiInfo==null){
-          continue;
-        }
-        if(apiInfo == null || !apiInfo.selectedFlag){
-          let apiId = apiInfo.id;
-          if(!apiInfo.isSearching){
-            apiInfo.isSearching = true;
-            this.selectApiInfo(beforeIndex,apiId);
-          }
-        }
-      }
+    //检查要展示的api信息节点，和上下个2个及以内的范围内数据有没有查询过。并赋值为showArray
+    //isRedirectScroll 最后是否调用跳转函数
+    checkApiInfoNode(itemIndex,isRedirectScroll){
+      let beforeNodeIndex = itemIndex<2?0:(itemIndex-2);
+      let afterNodeIndex = (itemIndex+2)<this.apiInfoArray.length?(itemIndex+2):this.apiInfoArray.length;
+      this.apiShowArray = [];
 
+      let selectIndexArr = [];
+      let selectApiId = [];
+
+      //查当前节点前两个
       for(let afterIndex = beforeNodeIndex;afterIndex <itemIndex;afterIndex++){
         let apiInfo = this.apiInfoArray[afterIndex];
         if(apiInfo==null){
@@ -635,9 +697,57 @@ export default {
           let apiId = apiInfo.id;
           if(!apiInfo.isSearching) {
             apiInfo.isSearching = true;
-            this.selectApiInfo(afterIndex,apiId);
+            selectIndexArr.push(afterIndex);
+            selectApiId.push(apiId);
           }
         }
+        this.apiShowArray.push(apiInfo);
+      }
+      this.currentApiIndexInApiShowArray = this.apiShowArray.length;
+      //查当前节点以及后三个
+      for(let beforeIndex = itemIndex;beforeIndex <= afterNodeIndex;beforeIndex++){
+        let apiInfo = this.apiInfoArray[beforeIndex];
+        if(apiInfo==null){
+          continue;
+        }
+        if(apiInfo == null || !apiInfo.selectedFlag){
+          let apiId = apiInfo.id;
+          if(!apiInfo.isSearching){
+            apiInfo.isSearching = true;
+            selectIndexArr.push(beforeIndex);
+            selectApiId.push(apiId);
+          }
+        }
+        this.apiShowArray.push(apiInfo);
+      }
+      if(selectIndexArr.length>0){
+        this.selectApiInfoBatch(selectIndexArr,selectApiId,itemIndex,afterNodeIndex,beforeNodeIndex,isRedirectScroll);
+      }else{
+        if(isRedirectScroll){
+          //进行跳转
+          this.redirectScroll();
+        }
+      }
+    },
+    //该方法只用于批量查询后的函数处理。 因为查询完成，数据更新，重新为apiShowArray赋值
+    updateShowArray(itemIndex,afterNodeIndex,beforeNodeIndex){
+      this.apiShowArray = [];
+      //查当前节点前两个
+      for(let afterIndex = beforeNodeIndex;afterIndex <itemIndex;afterIndex++){
+        let apiInfo = this.apiInfoArray[afterIndex];
+        if(apiInfo==null){
+          continue;
+        }
+        this.apiShowArray.push(apiInfo);
+      }
+      this.currentApiIndexInApiShowArray = this.apiShowArray.length;
+      //查当前节点以及后三个
+      for(let beforeIndex = itemIndex;beforeIndex <= afterNodeIndex;beforeIndex++){
+        let apiInfo = this.apiInfoArray[beforeIndex];
+        if(apiInfo==null){
+          continue;
+        }
+        this.apiShowArray.push(apiInfo);
       }
     }
   },
@@ -679,6 +789,8 @@ export default {
 .showDataDiv {
   background-color: #F5F7F9;
   margin: 20px 10px;
+  max-height: 300px;
+  overflow: auto;
 }
 
 /*
diff --git a/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchorData.vue b/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchorData.vue
deleted file mode 100644
index 143012d80a..0000000000
--- a/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchorData.vue
+++ /dev/null
@@ -1,720 +0,0 @@
-<template>
-  <div>
-    <el-container>
-      <el-main style="padding-top: 0px;padding-bottom: 0px">
-        <el-row style="margin-top: 10px">
-          <el-select size="small" :placeholder="$t('api_test.definition.document.order')" v-model="apiSearch.orderCondition" style="float: right;width: 180px;margin-right: 5px"
-                     class="ms-api-header-select" @change="initApiDocSimpleList" clearable>
-            <el-option key="createTimeDesc" :label="$t('api_test.definition.document.create_time_sort')" value="createTimeDesc" />
-            <el-option key="editTimeAsc" :label="$t('api_test.definition.document.edit_time_positive_sequence')" value="editTimeAsc"/>
-            <el-option key="editTimeDesc" :label="$t('api_test.definition.document.edit_time_Reverse_order')" value="editTimeDesc"/>
-          </el-select>
-
-          <el-select size="small" :placeholder="$t('api_test.definition.document.request_method')" v-model="apiSearch.type" style="float: right;width: 180px;margin-right: 5px"
-                     class="ms-api-header-select" @change="initApiDocSimpleList" clearable>
-            <el-option key="ALL" :label="$t('api_test.definition.document.data_set.all')" value="ALL"/>
-            <el-option key="GET" :label="'GET '+$t('api_test.definition.document.request_interface')" value="GET"/>
-            <el-option key="POST" :label="'POST '+$t('api_test.definition.document.request_interface')" value="POST"/>
-            <el-option key="PUT" :label="'PUT '+$t('api_test.definition.document.request_interface')" value="PUT"/>
-            <el-option key="DELETE" :label="'DELETE '+$t('api_test.definition.document.request_interface')" value="DELETE"/>
-            <el-option key="PATCH" :label="'PATCH '+$t('api_test.definition.document.request_interface')" value="PATCH"/>
-            <el-option key="OPTIONS" :label="'OPTIONS '+$t('api_test.definition.document.request_interface')" value="OPTIONS"/>
-            <el-option key="HEAD" :label="'HEAD '+$t('api_test.definition.document.request_interface')" value="HEAD"/>
-            <el-option key="CONNECT" :label="'CONNECT '+$t('api_test.definition.document.request_interface')" value="CONNECT"/>
-          </el-select>
-          <el-input :placeholder="$t('api_test.definition.document.search_by_api_name')" @blur="initApiDocSimpleList()" style="float: right;width: 180px;margin-right: 5px" size="small"
-                    @keyup.enter.native="initApiDocSimpleList()" v-model="apiSearch.name"/>
-          <api-document-batch-share v-xpack v-if="showXpackCompnent" @shareApiDocument="shareApiDocument" :project-id="projectId" :share-url="batchShareUrl" style="float: right;margin: 6px;font-size: 17px"/>
-          <!--          <api-document-batch-share v-xpack v-if="showXpackCompnent"/>-->
-        </el-row>
-        <el-divider></el-divider>
-        <div ref="apiDocInfoDiv" @scroll="handleScroll" >
-          <div v-for="(apiInfo) in apiInfoArray" :key="apiInfo.id" ref="apiDocInfoDivItem">
-            <div style="font-size: 17px">
-              <el-popover
-                v-if="projectId"
-                placement="right"
-                width="260"
-                @show="shareApiDocument('false')">
-                <p>{{shareUrl}}</p>
-                <div style="text-align: right; margin: 0">
-                  <el-button type="primary" size="mini"
-                             v-clipboard:copy="shareUrl">{{ $t("commons.copy") }}</el-button>
-                </div>
-                <i class="el-icon-share" slot="reference" style="margin-right: 10px;cursor: pointer"></i>
-              </el-popover>
-              {{ apiInfo.name }}
-              <span class="apiStatusTag">
-              <api-status :value="apiInfo.status"/>
-            </span>
-            </div>
-            <!--api请求信息-->
-            <el-row class="apiInfoRow">
-              <div class="tip">
-                {{ $t('api_test.definition.document.request_info') }}
-              </div>
-            </el-row>
-            <el-row class="apiInfoRow">
-              <div class="simpleFontClass">
-                <el-tag size="medium"
-                        :style="{'background-color': getColor(true,apiInfo.method), border: getColor(true,apiInfo.method),borderRadius:'0px', marginRight:'20px',color:'white'}">
-                  {{ apiInfo.method }}
-                </el-tag>
-                {{ apiInfo.uri }}
-              </div>
-            </el-row>
-            <!--api请求头-->
-            <el-row class="apiInfoRow">
-              <div class="blackFontClass">
-                {{ $t('api_test.definition.document.request_head') }}：
-                <div v-if="getJsonArr(apiInfo.requestHead).length==0">
-                  <div class="simpleFontClass" style="margin-top: 10px">
-                    {{ $t('api_test.definition.document.data_set.none') }}
-                  </div>
-                </div>
-                <div v-else>
-                  <el-table border :show-header="false"
-                            :data="getJsonArr(apiInfo.requestHead)" row-key="name" class="test-content document-table">
-                    <el-table-column prop="name"
-                                     :label="$t('api_test.definition.document.table_coloum.name')"
-                                     show-overflow-tooltip/>
-                    <el-table-column prop="value"
-                                     :label="$t('api_test.definition.document.table_coloum.value')"
-                                     show-overflow-tooltip/>
-                  </el-table>
-                </div>
-              </div>
-            </el-row>
-            <!--URL参数-->
-            <el-row class="apiInfoRow">
-              <div class="blackFontClass">
-                URL{{ $t('api_test.definition.document.request_param') }}：
-                <div v-if="getJsonArr(apiInfo.urlParams).length==0">
-                  <div class="simpleFontClass" style="margin-top: 10px">
-                    {{ $t('api_test.definition.document.data_set.none') }}
-                  </div>
-                </div>
-                <div v-else>
-                  <el-table border
-                            :data="getJsonArr(apiInfo.urlParams)" row-key="name" class="test-content document-table">
-                    <el-table-column prop="name"
-                                     :label="$t('api_test.definition.document.table_coloum.name')"
-                                     min-width="120px"
-                                     show-overflow-tooltip/>
-                    <el-table-column prop="isEnable"
-                                     :label="$t('api_test.definition.document.table_coloum.is_required')"
-                                     min-width="80px"
-                                     show-overflow-tooltip/>
-                    <el-table-column prop="value"
-                                     :label="$t('api_test.definition.document.table_coloum.value')"
-                                     min-width="120px"
-                                     show-overflow-tooltip/>
-                    <el-table-column prop="description"
-                                     :label="$t('api_test.definition.document.table_coloum.desc')"
-                                     min-width="280px"
-                                     show-overflow-tooltip/>
-                  </el-table>
-                </div>
-              </div>
-            </el-row>
-            <!--api请求体 以及表格-->
-            <el-row class="apiInfoRow">
-              <div class="blackFontClass">
-                {{ $t('api_test.definition.document.request_body') }}
-              </div>
-              <div class="smallFontClass">
-                {{ $t('api_test.definition.document.table_coloum.type') }}:{{ apiInfo.requestBodyParamType }}
-              </div>
-              <div>
-                <el-table border v-if="formParamTypes.includes(apiInfo.requestBodyParamType)"
-                          :data="getJsonArr(apiInfo.requestBodyFormData)" row-key="name"
-                          class="test-content document-table">
-                  <el-table-column prop="name"
-                                   :label="$t('api_test.definition.document.table_coloum.name')"
-                                   min-width="120px"
-                                   show-overflow-tooltip/>
-                  <el-table-column prop="contentType"
-                                   :label="$t('api_test.definition.document.table_coloum.type')"
-                                   min-width="120px"
-                                   show-overflow-tooltip/>
-                  <el-table-column prop="description"
-                                   :label="$t('api_test.definition.document.table_coloum.desc')"
-                                   min-width="280px"
-                                   show-overflow-tooltip/>
-                  <el-table-column prop="required"
-                                   :label="$t('api_test.definition.document.table_coloum.is_required')"
-                                   :formatter="formatBoolean"
-                                   min-width="80px"
-                                   show-overflow-tooltip/>
-                  <el-table-column prop="value"
-                                   :label="$t('api_test.definition.document.table_coloum.default_value')"
-                                   min-width="120px"
-                                   show-overflow-tooltip/>
-                </el-table>
-                <div v-else-if="apiInfo.requestBodyParamType == 'JSON-SCHEMA'" style="margin-left: 10px">
-                  <ms-json-code-edit :body="apiInfo.jsonSchemaBody" ref="jsonCodeEdit"/>
-                </div>
-                <div v-else class="showDataDiv">
-                  <br/>
-                  <p style="margin: 0px 20px;"
-                     v-html="formatRowData(apiInfo.requestBodyParamType,apiInfo.requestBodyStrutureData)">
-                  </p>
-                  <br/>
-                </div>
-              </div>
-            </el-row>
-            <!--范例展示-->
-            <el-row class="apiInfoRow">
-              <div class="blackFontClass">
-                {{ $t('api_test.definition.document.example_presentation') }}
-              </div>
-              <div class="showDataDiv">
-                <br/>
-                <p style="margin: 0px 20px;"
-                   v-html="genPreviewData(apiInfo.requestPreviewData)">
-                </p>
-                <br/>
-              </div>
-            </el-row>
-            <!--响应信息-->
-            <el-row class="apiInfoRow">
-              <div class="tip">
-                {{ $t('api_test.definition.document.response_info') }}
-              </div>
-            </el-row>
-            <el-row class="apiInfoRow">
-
-            </el-row>
-            <!--响应头-->
-            <el-row class="apiInfoRow">
-              <div class="blackFontClass">
-                {{ $t('api_test.definition.document.response_head') }}:
-                <el-table border :show-header="false"
-                          :data="getJsonArr(apiInfo.responseHead)" row-key="name" class="test-content document-table">
-                  <el-table-column prop="name"
-                                   :label="$t('api_test.definition.document.table_coloum.name')"
-                                   show-overflow-tooltip/>
-                  <el-table-column prop="value"
-                                   :label="$t('api_test.definition.document.table_coloum.value')"
-                                   show-overflow-tooltip/>
-                </el-table>
-              </div>
-            </el-row>
-            <!--响应体-->
-            <el-row class="apiInfoRow">
-              <div class="blackFontClass">
-                {{ $t('api_test.definition.document.response_body') }}
-              </div>
-              <div class="smallFontClass">
-                {{ $t('api_test.definition.document.table_coloum.type') }}:{{ apiInfo.responseBodyParamType }}
-              </div>
-              <div>
-                <el-table border v-if="formParamTypes.includes(apiInfo.responseBodyParamType)"
-                          :data="getJsonArr(apiInfo.responseBodyFormData)" row-key="id"
-                          class="test-content document-table">
-                  <el-table-column prop="name"
-                                   :label="$t('api_test.definition.document.table_coloum.name')"
-                                   min-width="120px"
-                                   show-overflow-tooltip/>
-                  <el-table-column prop="contentType"
-                                   :label="$t('api_test.definition.document.table_coloum.type')"
-                                   min-width="120px"
-                                   show-overflow-tooltip/>
-                  <el-table-column prop="description"
-                                   :label="$t('api_test.definition.document.table_coloum.desc')"
-                                   min-width="280px"
-                                   show-overflow-tooltip/>
-                  <el-table-column prop="required"
-                                   :label="$t('api_test.definition.document.table_coloum.is_required')"
-                                   :formatter="formatBoolean"
-                                   min-width="80px"
-                                   show-overflow-tooltip/>
-                  <el-table-column prop="value"
-                                   :label="$t('api_test.definition.document.table_coloum.default_value')"
-                                   min-width="120px"
-                                   show-overflow-tooltip/>
-                </el-table>
-                <div v-else class="showDataDiv">
-                  <br/>
-                  <p style="margin: 0px 20px;"
-                     v-html="formatRowData(apiInfo.responseBodyParamType,apiInfo.responseBodyStrutureData)">
-                  </p>
-                  <br/>
-                </div>
-              </div>
-            </el-row>
-            <!--响应状态码-->
-            <el-row class="apiInfoRow">
-              <div class="blackFontClass">
-                {{ $t('api_test.definition.document.response_code') }}:
-                <el-table border :show-header="false"
-                          :data="getJsonArr(apiInfo.responseCode)" row-key="name" class="test-content document-table">
-                  <el-table-column prop="name"
-                                   :label="$t('api_test.definition.document.table_coloum.name')"
-                                   show-overflow-tooltip/>
-                  <el-table-column prop="value"
-                                   :label="$t('api_test.definition.document.table_coloum.value')"
-                                   show-overflow-tooltip/>
-                </el-table>
-              </div>
-            </el-row>
-          </div>
-        </div>
-      </el-main>
-      <!-- 右侧列表 -->
-      <el-aside width="200px" style="margin-top: 70px;">
-        <div ref="apiDocList" >
-          <el-steps style="height: 40%" direction="vertical" :active="apiStepIndex">
-            <el-step v-for="(apiInfo) in apiInfoArray" :key="apiInfo.id" @click.native="clickStep(apiInfo.id)">
-              <el-link slot="title">{{ apiInfo.name }}</el-link>
-            </el-step>
-          </el-steps>
-        </div>
-      </el-aside>
-    </el-container>
-  </div>
-</template>
-
-<script>
-import {API_METHOD_COLOUR} from "@/business/components/api/definition/model/JsonData";
-import MsCodeEdit from "@/business/components/common/components/MsCodeEdit";
-import {formatJson,} from "@/common/js/format-utils";
-import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
-import {calculate} from "@/business/components/api/definition/model/ApiTestModel";
-import MsJsonCodeEdit from "@/business/components/common/json-schema/JsonSchemaEditor";
-import Api from "@/business/components/api/router";
-
-const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
-const apiDocumentBatchShare = (requireComponent!=null&&requireComponent.keys().length) > 0 ? requireComponent("./share/ApiDocumentBatchShare.vue") : {};
-
-export default {
-  name: "ApiDocumentItem",
-  components: {
-    Api,
-    MsJsonCodeEdit,
-    ApiStatus, MsCodeEdit,
-    "ApiDocumentBatchShare": apiDocumentBatchShare.default
-  },
-  data() {
-    return {
-      shareUrl:"",
-      batchShareUrl:"",
-      apiStepIndex: 0,
-      showXpackCompnent:false,
-      apiInfoArray: [],
-      modes: ['text', 'json', 'xml', 'html'],
-      formParamTypes: ['form-data', 'x-www-from-urlencoded', 'BINARY'],
-      mockVariableFuncs: [],
-      apiSearch:{
-        name:"",
-        type:"ALL",
-        orderCondition:"createTimeDesc",
-      },
-      apiInfoBaseObj: {
-        selectedFlag:false,
-        method: "无",
-        uri: "无",
-        name: "无",
-        id: "",
-        requestHead: "无",
-        urlParams: "无",
-        requestBodyParamType: "无",
-        requestBodyFormData: '[]',
-        requestBodyStrutureData: "",
-        sharePopoverVisible:false,
-        jsonSchemaBody: {},
-        responseHead: "无",
-        responseBody: "",
-        responseBodyParamType: "无",
-        responseBodyFormData: "无",
-        responseBodyStrutureData: "无",
-        responseCode: "无",
-      },
-      methodColorMap: new Map(API_METHOD_COLOUR),
-      clientHeight: '',//坚挺浏览器高度
-    }
-  },
-  props: {
-    projectId: String,
-    documentId: String,
-    moduleIds: Array,
-    pageHeaderHeight:Number,
-  },
-  activated() {
-    this.initApiDocSimpleList();
-    this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
-    let that = this;
-    window.onresize = function () {
-      this.clientHeight = `${document.documentElement.clientHeight}`;
-      this.changeFixed(this.clientHeight);
-    }
-  },
-  created: function () {
-    if(requireComponent!=null && JSON.stringify(apiDocumentBatchShare) != '{}'){
-      this.showXpackCompnent = true;
-    }
-    this.initApiDocSimpleList();
-    this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
-    let that = this;
-    window.onresize = function () {
-      this.clientHeight = `${document.documentElement.clientHeight}`;
-      this.changeFixed(this.clientHeight);
-    };
-    window.addEventListener('scroll',that.handleScroll);
-  },
-  mounted() {
-    let that = this;
-    window.onresize = function () {
-      that.clientHeight = `${document.documentElement.clientHeight}`;
-      that.changeFixed(that.clientHeight);
-    };
-    // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
-    window.addEventListener('scroll',this.handleScroll);
-  },
-  computed: {
-  },
-  watch: {
-    moduleIds() {
-      this.initApiDocSimpleList();
-    },
-    clientHeight() {     //如果clientHeight 发生改变，这个函数就会运行
-      this.changeFixed(this.clientHeight);
-    }
-  },
-  methods: {
-    formatRowData(dataType, data) {
-      var returnData = data;
-      if (data) {
-        returnData = data.replace(/\n/g, '<br>');
-      }
-      return returnData;
-    },
-    changeFixed(clientHeight) {
-      if (this.$refs.apiDocInfoDiv) {
-        let countPageHeight = 350;
-        if(this.pageHeaderHeight!=0 && this.pageHeaderHeight != null){
-          countPageHeight = this.pageHeaderHeight
-        }
-
-        this.$refs.apiDocInfoDiv.style.height = clientHeight - countPageHeight + 'px';
-        this.$refs.apiDocInfoDiv.style.overflow = 'auto';
-        this.$refs.apiDocList.style.height = clientHeight - countPageHeight + 'px';
-      }
-    },
-    initApiDocSimpleList() {
-      let simpleRequest = this.apiSearch;
-      if (this.projectId != null && this.projectId != "") {
-        simpleRequest.projectId = this.projectId;
-      }
-      if (this.documentId != null && this.documentId != "") {
-        simpleRequest.shareId = this.documentId;
-      }
-      if (this.moduleIds.length > 0) {
-        simpleRequest.moduleIds = this.moduleIds;
-      }
-
-      let simpleInfoUrl = "/document/selectApiSimpleInfo";
-      this.apiInfoArray = [];
-      this.$post(simpleInfoUrl, simpleRequest, response => {
-        this.apiInfoArray = response.data;
-        this.apiStepIndex = 0;
-        if (this.apiInfoArray.length > 0) {
-          this.checkApiInfoNode(this.apiStepIndex);
-        }
-      });
-    },
-    shareApiDocument(isBatchShare){
-      let thisHost = window.location.host;
-      this.shareUrl = "";
-      this.batchShareUrl = "";
-      let shareIdArr = [];
-      let shareType = "Single";
-      if(isBatchShare == 'true'){
-        this.apiInfoArray.forEach(f => {
-          if (!f.id) {
-            return;
-          }
-          shareIdArr.push(f.id);
-        });
-        shareType = "Batch";
-      }else{
-        shareIdArr.push(this.apiInfoArray[this.apiStepIndex].id);
-      }
-      let genShareInfoParam = {};
-      genShareInfoParam.shareApiIdList = shareIdArr;
-      genShareInfoParam.shareType = shareType;
-
-      this.$post("/document/generateApiDocumentShareInfo", genShareInfoParam, res => {
-        if(shareType == "Batch"){
-          this.batchShareUrl = thisHost+"/document"+res.data.shareUrl;
-        }else{
-          this.shareUrl = thisHost+"/document"+res.data.shareUrl;
-        }
-      }, (error) => {
-      });
-    },
-    selectApiInfo(index,apiId) {
-      let simpleInfoUrl = "/document/selectApiInfoById/" + apiId;
-      this.$get(simpleInfoUrl, response => {
-        let returnData = response.data;
-        this.$set(this.apiInfoArray,index,returnData);
-      });
-    },
-    clickStep(apiId) {
-      for (let index = 0; index < this.apiInfoArray.length; index++) {
-        if (apiId == this.apiInfoArray[index].id) {
-          this.apiStepIndex = index;
-          break;
-        }
-      }
-      //检查数据
-      this.checkApiInfoNode(this.apiStepIndex);
-      //进行跳转
-      this.redirectScroll(this.apiStepIndex);
-    },
-    stepClick(stepIndex) {
-      this.apiStepIndex = stepIndex;
-    },
-    getColor(enable, method) {
-      return this.methodColorMap.get(method);
-    },
-    formatBoolean(row, column, cellValue) {
-      var ret = ''  //你想在页面展示的值
-      if (cellValue) {
-        ret = "是"  //根据自己的需求设定
-      } else {
-        ret = "否"
-      }
-      return ret;
-    },
-    getJsonArr(jsonString) {
-      let returnJsonArr = [];
-      if (jsonString == '无' || jsonString == null) {
-        return returnJsonArr;
-      }
-
-      let jsonArr = JSON.parse(jsonString);
-      //遍历，把必填项空的数据去掉
-      for (var index = 0; index < jsonArr.length; index++) {
-        var item = jsonArr[index];
-        if (item.name != "" && item.name != null) {
-          returnJsonArr.push(item);
-        }
-      }
-      return returnJsonArr;
-    },
-    //构建预览数据
-    genPreviewData(previewData) {
-      if (previewData != null && previewData != '') {
-        let showDataObj = {};
-        for (var key in previewData) {
-          // showDataObj.set(key,previewData[key]);
-          let value = previewData[key];
-          if(typeof(value)=='string'){
-            if (value.indexOf("@") >= 0) {
-              value = this.showPreview(value);
-            }
-          }
-          showDataObj[key] = value;
-        }
-        showDataObj = JSON.stringify(showDataObj);
-        previewData = formatJson(showDataObj);
-      }
-      return previewData;
-    },
-    showPreview(itemValue) {
-      // 找到变量本身
-      if (!itemValue) {
-        return;
-      }
-      let index = itemValue.indexOf("|");
-      if (index > -1) {
-        itemValue = itemValue.substring(0, index).trim();
-      }
-
-      this.mockVariableFuncs.forEach(f => {
-        if (!f.name) {
-          return;
-        }
-        itemValue += "|" + f.name;
-        if (f.params) {
-          itemValue += ":" + f.params.map(p => p.value).join(",");
-        }
-      });
-
-      itemValue = calculate(itemValue);
-      return itemValue;
-    },
-    onCopySuccess: function (e) {
-      if(this.apiStepIndex < this.apiInfoArray.length){
-        this.apiInfoArray[this.apiStepIndex].sharePopoverVisible = false;
-      }
-      this.$message({
-        message: this.$t('commons.copy_success'),
-        type: 'success'
-      });
-    },
-    onCopyError: function (e) {
-      if(this.apiStepIndex < this.apiInfoArray.length){
-        this.apiInfoArray[this.apiStepIndex].sharePopoverVisible = false;
-      }
-      this.$message.error(this.$t('api_report.error'));
-    },
-    handleScroll(){
-
-      //apiDocInfoDiv的总高度，是(每个item的高度+20)数量
-      let apiDocDivScrollTop = this.$refs.apiDocInfoDiv.scrollTop;
-      let apiDocDivClientTop = this.$refs.apiDocInfoDiv.clientHeight;
-
-      let scrolledHeigh = apiDocDivScrollTop+apiDocDivClientTop;
-      let lastIndex = 0;
-      for (let index = 0; index < this.apiInfoArray.length; index++) {
-        //判断移动到了第几个元素. 公式: 移动过的高度+页面显示高度-第index子元素的高度(含20px)>0 的 index最大值
-        if(scrolledHeigh>0){
-          lastIndex = index;
-          let itemHeight = this.$refs.apiDocInfoDivItem[index].offsetHeight+20;
-          scrolledHeigh = scrolledHeigh - itemHeight;
-        }else{
-          break;
-        }
-      }
-      this.apiStepIndex = lastIndex;
-      //检查上下文 3个以内的节点有没有查询出来
-      this.checkApiInfoNode(this.apiStepIndex);
-    },
-    redirectScroll(itemIndex){
-      //滚动条跳转：将滚动条下拉到显示对应对api接口的位置
-      // let apiDocDivClientTop = this.$refs.apiDocInfoDiv.clientHeight;
-      let apiDocDivClientTop = 0;
-      let itemHeightCount = 0;
-      for (let i = 0; i <= itemIndex-1; i++) {
-        let itemHeight = this.$refs.apiDocInfoDivItem[i].offsetHeight+20;
-        itemHeightCount+=itemHeight;
-      }
-      this.$refs.apiDocInfoDiv.scrollTop = (apiDocDivClientTop+itemHeightCount);
-    },
-    checkApiInfoNode(itemIndex){
-      //检查要展示的api信息节点，和上下个3个及以内的范围内数据有没有查询过
-      let beforeNodeIndex = itemIndex<3?0:(itemIndex-3);
-      let afterNodeIndex = (itemIndex+3)<this.apiInfoArray.length?(itemIndex+3):this.apiInfoArray.length;
-
-      for(let beforeIndex = itemIndex;beforeIndex < afterNodeIndex;beforeIndex++){
-        let apiInfo = this.apiInfoArray[beforeIndex];
-        if(apiInfo==null){
-          continue;
-        }
-        if(apiInfo == null || !apiInfo.selectedFlag){
-          let apiId = apiInfo.id;
-          if(!apiInfo.isSearching){
-            apiInfo.isSearching = true;
-            this.selectApiInfo(beforeIndex,apiId);
-          }
-        }
-      }
-
-      for(let afterIndex = beforeNodeIndex;afterIndex <itemIndex;afterIndex++){
-        let apiInfo = this.apiInfoArray[afterIndex];
-        if(apiInfo==null){
-          continue;
-        }
-        if(apiInfo == null || !apiInfo.selectedFlag){
-          let apiId = apiInfo.id;
-          if(!apiInfo.isSearching) {
-            apiInfo.isSearching = true;
-            this.selectApiInfo(afterIndex,apiId);
-          }
-        }
-      }
-    }
-  },
-}
-</script>
-
-<style scoped>
-.simpleFontClass {
-  font-weight: normal;
-  font-size: 14px;
-  margin-left: 10px;
-}
-
-.blackFontClass {
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.smallFontClass {
-  font-size: 13px;
-  margin: 20px 10px;
-}
-
-.tip {
-  padding: 3px 5px;
-  font-size: 14px;
-  border-radius: 4px;
-  border-left: 4px solid #783887;
-}
-
-.apiInfoRow {
-  margin: 20px 10px;
-}
-
-.apiStatusTag {
-  margin: 20px 5px;
-}
-
-.showDataDiv {
-  background-color: #F5F7F9;
-  margin: 20px 10px;
-}
-
-/*
-步骤条中，已经完成后的节点样式和里面a标签的样式
-*/
-/deep/ .el-step__head.is-finish {
-  color: #C0C4CC;
-  border-color: #C0C4CC;
-}
-
-/deep/ .el-step__title.is-finish /deep/ .el-link.el-link--default {
-  color: #C0C4CC;
-}
-
-/*
-步骤条中，当前节点样式和当前a标签的样式
-*/
-/deep/ .el-step__head.is-process {
-  color: #783887;
-  border-color: #783887;
-}
-
-/deep/ .el-step__title.is-process /deep/ .el-link.el-link--default {
-  color: #783887;
-}
-
-.document-table {
-  margin: 20px 10px;
-  width: auto;
-}
-
-.document-table /deep/ .el-table__row {
-  font-size: 12px;
-  font-weight: initial;
-}
-
-.document-table /deep/ .has-gutter {
-  font-size: 12px;
-  color: #404040;
-}
-
-.document-table /deep/ td {
-  border-right: 0px solid #EBEEF5
-}
-
-.document-table /deep/ th {
-  background-color: #FAFAFA;
-  border-right: 0px solid #EBEEF5
-}
-.el-divider--horizontal {
-  margin: 12px 0;
-}
-</style>
diff --git a/frontend/src/business/components/api/definition/components/list/ApiDocumentsPage.vue b/frontend/src/business/components/api/definition/components/list/ApiDocumentsPage.vue
index bb40d024d1..23ba5cbb50 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiDocumentsPage.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiDocumentsPage.vue
@@ -1,17 +1,18 @@
 <template>
   <div>
-      <api-document-item :project-id="projectId" :module-ids="moduleIds"/>
+<!--      <api-document-item :project-id="projectId" :module-ids="moduleIds"/>-->
+    <api-document-anchor :project-id="projectId" :module-ids="moduleIds"></api-document-anchor>
   </div>
 </template>
 
 <script>
 
-import ApiDocumentItem from "@/business/components/api/definition/components/document/ApiDocumentItem";
+import ApiDocumentAnchor from "@/business/components/api/definition/components/document/ApiDocumentAnchor";
 
 export default {
   name: "ApiDocumentsPage",
   components: {
-    ApiDocumentItem,
+    ApiDocumentAnchor
   },
   data() {
     return {
diff --git a/frontend/src/business/components/api/router.js b/frontend/src/business/components/api/router.js
index 20a0108078..e34577f195 100644
--- a/frontend/src/business/components/api/router.js
+++ b/frontend/src/business/components/api/router.js
@@ -48,11 +48,6 @@ export default {
       name: "ApiDefinition",
       component: () => import('@/business/components/api/definition/ApiDefinition'),
     },
-    {
-      path: "definition/document/:documentId",
-      name: "ApiDefinitionDocument",
-      component: () => import('@/business/components/api/definition/components/document/ApiDocumentItem'),
-    },
     {
       path: "automation",
       name: "ApiAutomation",
diff --git a/frontend/src/document/Document.vue b/frontend/src/document/Document.vue
index 330ceded93..f4354b4fa9 100644
--- a/frontend/src/document/Document.vue
+++ b/frontend/src/document/Document.vue
@@ -1,19 +1,18 @@
 <template>
   <div>
-    <api-document-item :pageHeaderHeight="pageHeaderHeight" :project-id="projectId" :module-ids="moduleIds" :document-id="documentId" ref="apiDocumentItem"/>
-<!--    <test-scroll></test-scroll>-->
+    <api-document-anchor :pageHeaderHeight="pageHeaderHeight" :project-id="projectId" :module-ids="moduleIds" :document-id="documentId" ref="apiDocumentAnchor"/>
   </div>
 
 </template>
 
 <script>
 
-import ApiDocumentItem from "@/business/components/api/definition/components/document/ApiDocumentItem";
+import ApiDocumentAnchor from "@/business/components/api/definition/components/document/ApiDocumentAnchor";
 
 export default {
   name: "ApiDocumentsPage",
   components: {
-    ApiDocumentItem,
+    ApiDocumentAnchor,
   },
   data() {
     return {
@@ -47,8 +46,8 @@ export default {
     },
     selectDocumentInfo(){
       this.getUrlParam();
-      if(this.$refs.apiDocumentItem){
-        this.$refs.apiDocumentItem.initApiDocSimpleList();
+      if(this.$refs.apiDocumentAnchor){
+        this.$refs.apiDocumentAnchor.initApiDocSimpleList();
       }
     }
   },

From f0ad527813076f566830d6e47d7fcf8980115c4d Mon Sep 17 00:00:00 2001
From: wenyann <64353056+wenyann@users.noreply.github.com>
Date: Sun, 21 Mar 2021 23:02:51 +0800
Subject: [PATCH 20/22] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=82=AE?=
 =?UTF-8?q?=E4=BB=B6=E6=8F=90=E7=A4=BA=E6=B5=8B=E8=AF=95=E6=8A=A5=E5=91=8A?=
 =?UTF-8?q?=E4=B8=8D=E5=AD=98=E5=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/jmeter/APIBackendListenerClient.java   | 18 +++++++-----------
 .../resources/mail/ApiFailedNotification.html  | 10 +++++++---
 .../mail/ApiSuccessfulNotification.html        |  7 ++++---
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/backend/src/main/java/io/metersphere/api/jmeter/APIBackendListenerClient.java b/backend/src/main/java/io/metersphere/api/jmeter/APIBackendListenerClient.java
index b34067ab89..cf82dc8ea1 100644
--- a/backend/src/main/java/io/metersphere/api/jmeter/APIBackendListenerClient.java
+++ b/backend/src/main/java/io/metersphere/api/jmeter/APIBackendListenerClient.java
@@ -247,26 +247,22 @@ public class APIBackendListenerClient extends AbstractBackendListenerClient impl
         NoticeSendService noticeSendService = CommonBeanFactory.getBean(NoticeSendService.class);
         assert systemParameterService != null;
         assert noticeSendService != null;
-
         BaseSystemConfigDTO baseSystemConfigDTO = systemParameterService.getBaseInfo();
-        String url = reportUrl;
-        String url2 = reportUrl;
-        if (StringUtils.isEmpty(url)) {
-            url = baseSystemConfigDTO.getUrl() + "/#/api/report/view/" + report.getId();
-            url2 = baseSystemConfigDTO.getUrl() + "/#/api/automation/report/view/" + report.getId();
-        }
+        String url = baseSystemConfigDTO.getUrl() + "/#/api/report/view/" + report.getId();
+        String url2 = baseSystemConfigDTO.getUrl() + "/#/api/automation/report/view/" + report.getId();
+
         String successContext = "";
         String failedContext = "";
         String subject = "";
         String event = "";
         if (StringUtils.equals(ReportTriggerMode.API.name(), report.getTriggerMode())) {
-            successContext = "接口测试 API任务通知:'" + report.getName() + "'执行成功" + "\n" + "请点击下面链接进入测试报告页面" + "\n" + "旧版接口测试路径" + url + "\n" + "新版接口测试路径" + url2;
-            failedContext = "接口测试 API任务通知:'" + report.getName() + "'执行失败" + "\n" + "请点击下面链接进入测试报告页面" + "\n" + "旧版接口测试路径" + url + "\n" + "新版接口测试路径" + url2;
+            successContext = "接口测试 API任务通知:'" + report.getName() + "'执行成功" + "\n" + "【接口定义暂无报告链接】" + "\n" + "请点击下面链接进入测试报告页面" + "\n" + "（旧版）接口测）路径" + url + "\n" + "（新版）接口测试路径" + url2;
+            failedContext = "接口测试 API任务通知:'" + report.getName() + "'执行失败" + "\n" + "【接口定义暂无报告链接】" + "\n" + "请点击下面链接进入测试报告页面" + "\n" + "（旧版）接口测试路径" + url + "\n" + "（新版）接口测试路径" + url2;
             subject = Translator.get("task_notification_jenkins");
         }
         if (StringUtils.equals(ReportTriggerMode.SCHEDULE.name(), report.getTriggerMode())) {
-            successContext = "接口测试定时任务通知:'" + report.getName() + "'执行成功" + "\n" + "请点击下面链接进入测试报告页面" + "\n" + "旧版接口测试路径" + url + "\n" + "新版接口测试路径" + url2;
-            failedContext = "接口测试定时任务通知:'" + report.getName() + "'执行失败" + "\n" + "请点击下面链接进入测试报告页面" + "\n" + "旧版接口测试路径" + url + "\n" + "新版接口测试路径" + url2;
+            successContext = "接口测试定时任务通知:'" + report.getName() + "'执行成功" + "\n" + "【接口定义暂无报告链接】" + "\n" + "请点击下面链接进入测试报告页面" + "\n" + "（旧版）接口测试路径" + url + "\n" + "（新版）接口测试路径" + url2;
+            failedContext = "接口测试定时任务通知:'" + report.getName() + "'执行失败" + "\n" + "【接口定义暂无报告链接】" + "\n" + "请点击下面链接进入测试报告页面" + "\n" + "（旧版）接口测试路径" + url + "\n" + "（新版）接口测试路径" + url2;
             subject = Translator.get("task_notification");
         }
         if (StringUtils.equals("Success", report.getStatus())) {
diff --git a/backend/src/main/resources/mail/ApiFailedNotification.html b/backend/src/main/resources/mail/ApiFailedNotification.html
index dded07b788..19911bbdf8 100644
--- a/backend/src/main/resources/mail/ApiFailedNotification.html
+++ b/backend/src/main/resources/mail/ApiFailedNotification.html
@@ -11,11 +11,15 @@
         <p style="margin-left: 60px">您好:
     </div>
     <div style="margin-left: 100px">
+        successContext = "接口测试定时任务通知:'" + report.getName() + "'执行成功" + "\n" + "【接口定义暂无报告链接】"+"\n" +"请点击下面链接进入测试报告页面" +
+        "\n" + "（旧版）接口测试路径" + url + "\n" + "（新版）接口测试路径" + url2;
+
         <p>您所执行的 ${testName} 接口测试运行失败<br/>
-            请点击下面链接进入测试报告页面</p>
+            请点击下面链接进入测试报告页面【接口定义暂无报告路径】<br/>
+            【旧版接口测试报告路径】</p>
         <a href="${url}/#/${type}/report/view/${id}">${url}/#/${type}/report/view/${id}</a>
-        <p>新版接口测试报告路径</p>
-        <a href="${url}/#/api/automation">${url}/#/api/automation</a>
+        <p>【新版接口测试报告路径】</p>
+        <a href="${url}/#/api/automation/report/view/${id}">${url}/#/api/automation/report/view/${id}</a>
     </div>
 
 </div>
diff --git a/backend/src/main/resources/mail/ApiSuccessfulNotification.html b/backend/src/main/resources/mail/ApiSuccessfulNotification.html
index 11dc44ebc3..a3399e770b 100644
--- a/backend/src/main/resources/mail/ApiSuccessfulNotification.html
+++ b/backend/src/main/resources/mail/ApiSuccessfulNotification.html
@@ -11,10 +11,11 @@
 </div>
 <div style="margin-left: 100px">
     <p>您所执行的 ${testName} 接口测试运行成功<br/>
-        请点击下面链接进入测试报告页面</p>
+        请点击下面链接进入测试报告页面【接口定义暂无报告路径】<br/>
+        【旧版接口测试报告路径】</p>
     <a href="${url}/#/${type}/report/view/${id}">${url}/#/${type}/report/view/${id}</a>
-    <p>新版接口测试报告路径</p>
-    <a href="${url}/#/api/automation">${url}/#/api/automation</a>
+    <p>【新版接口测试报告路径】</p>
+    <a href="${url}/#/api/automation/report/view/${id}">${url}/#/api/automation/report/view/${id}</a>
 </div>
 </body>
 </html>
\ No newline at end of file

From 8ccd6befe237cda29767efa9fda2eb14d0fa1067 Mon Sep 17 00:00:00 2001
From: wenyann <64353056+wenyann@users.noreply.github.com>
Date: Mon, 22 Mar 2021 09:01:35 +0800
Subject: [PATCH 21/22] =?UTF-8?q?fix:=E8=87=AA=E5=AE=9A=E4=B9=89=E8=A1=A8?=
 =?UTF-8?q?=E5=A4=B4=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../automation/scenario/ApiScenarioList.vue   |   5 +-
 .../components/list/ApiCaseSimpleList.vue     |  32 +++--
 .../definition/components/list/ApiList.vue    |   5 +-
 .../components/common/head/HeaderCustom.vue   |  18 ++-
 .../track/case/components/TestCaseEdit.vue    |   1 +
 .../track/case/components/TestCaseList.vue    |   3 +-
 .../track/plan/components/TestPlanList.vue    |   7 +-
 .../comonents/api/TestPlanApiCaseList.vue     |   7 +-
 .../comonents/api/TestPlanApiScenarioList.vue |   6 +-
 .../functional/FunctionalTestCaseList.vue     |   5 +-
 .../comonents/load/TestPlanLoadCaseList.vue   |  21 ++-
 .../components/TestReviewTestCaseEdit.vue     | 134 ++++++------------
 12 files changed, 106 insertions(+), 138 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
index f226375d16..b035cc76b2 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
@@ -244,7 +244,7 @@
       return {
         type: API_SCENARIO_LIST,
         headerItems: Api_Scenario_List,
-        tableLabel: Api_Scenario_List,
+        tableLabel: [],
         loading: false,
         screenHeight: document.documentElement.clientHeight - 280,//屏幕高度,
         condition: {
@@ -361,6 +361,7 @@
     },
     methods: {
       customHeader() {
+        getLabel(this, API_SCENARIO_LIST);
         this.$refs.headerCustom.open(this.tableLabel)
       },
       selectByParam() {
@@ -369,7 +370,6 @@
       },
       search(projectId) {
         this.selectRows = new Set();
-        getLabel(this, API_SCENARIO_LIST);
         this.condition.moduleIds = this.selectNodeIds;
         if (this.trashEnable) {
           this.condition.filters = {status: ["Trash"]};
@@ -421,6 +421,7 @@
             this.unSelection = data.listObject.map(s => s.id);
           });
         }
+        getLabel(this, API_SCENARIO_LIST);
       },
       handleCommand(cmd) {
         let table = this.$refs.scenarioTable;
diff --git a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
index 10bf52c654..4754744b4d 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
@@ -60,13 +60,13 @@
           </el-table-column>
 
           <el-table-column
-            v-if="item.id == 'custom'"
-            sortable="custom"
-            prop="path"
-            min-width="180px"
-            :label="$t('api_test.definition.api_path')"
-            show-overflow-tooltip
-            :key="index"/>
+              v-if="item.id == 'path'"
+              sortable="custom"
+              prop="path"
+              min-width="180px"
+              :label="$t('api_test.definition.api_path')"
+              show-overflow-tooltip
+              :key="index"/>
 
           <el-table-column v-if="item.id=='tags'" prop="tags" min-width="120px" :label="$t('commons.tag')"
                            :key="index">
@@ -83,12 +83,12 @@
             :key="index"/>
 
           <el-table-column
-            v-if="item.id=='custom'"
-            sortable="custom"
-            min-width="160"
-            :label="$t('api_test.definition.api_last_time')"
-            prop="updateTime"
-            :key="index">
+              v-if="item.id=='updateTime'"
+              sortable="updateTime"
+              min-width="160"
+              :label="$t('api_test.definition.api_last_time')"
+              prop="updateTime"
+              :key="index">
             <template v-slot:default="scope">
               <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
             </template>
@@ -186,7 +186,7 @@ export default {
       return {
         type: API_CASE_LIST,
         headerItems: Api_Case_List,
-        tableLabel: Api_Case_List,
+        tableLabel: [],
         condition: {
           components: API_CASE_CONFIGS
         },
@@ -286,10 +286,11 @@ export default {
     },
     methods: {
       customHeader() {
+        getLabel(this, API_CASE_LIST);
         this.$refs.headerCustom.open(this.tableLabel)
       },
       initTable() {
-        getLabel(this, API_CASE_LIST);
+
         this.selectRows = new Set();
         this.condition.status = "";
         this.condition.moduleIds = this.selectNodeIds;
@@ -332,6 +333,7 @@ export default {
             })
           });
         }
+        getLabel(this, API_CASE_LIST);
       },
       open() {
         this.$refs.searchBar.open();
diff --git a/frontend/src/business/components/api/definition/components/list/ApiList.vue b/frontend/src/business/components/api/definition/components/list/ApiList.vue
index cdc386be99..823a797568 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@@ -272,7 +272,7 @@ export default {
     return {
       type: API_LIST,
       headerItems: Api_List,
-      tableLabel: Api_List,
+      tableLabel: [],
       condition: {
         components: API_DEFINITION_CONFIGS
       },
@@ -392,13 +392,13 @@ export default {
   },
   methods: {
     customHeader() {
+      getLabel(this, API_LIST);
       this.$refs.headerCustom.open(this.tableLabel)
     },
     handleBatchMove() {
       this.$refs.testCaseBatchMove.open(this.moduleTree, [], this.moduleOptions);
     },
     initTable() {
-      getLabel(this, API_LIST);
       this.selectRows = new Set();
       initCondition(this.condition);
       this.selectDataCounts = 0;
@@ -444,6 +444,7 @@ export default {
           })
         });
       }
+      getLabel(this, API_LIST);
     },
     genProtocalFilter(protocalType) {
       if (protocalType === "HTTP") {
diff --git a/frontend/src/business/components/common/head/HeaderCustom.vue b/frontend/src/business/components/common/head/HeaderCustom.vue
index 228bfff28a..3becf9b217 100644
--- a/frontend/src/business/components/common/head/HeaderCustom.vue
+++ b/frontend/src/business/components/common/head/HeaderCustom.vue
@@ -46,12 +46,20 @@ export default {
       return type !== 'inner';
     },
     open(items) {
+      this.defaultCheckedKeys = []
+
       this.dialogTableVisible = true
-      items.forEach(i => {
-          this.defaultCheckedKeys.push(i.id)
-        }
-      )
-      /*this.optionalField = items*/
+      this.fieldSelected = items
+      if (items.size <= 0) {
+        this.optionalField = this.optionalFields
+      } else {
+        items.forEach(i => {
+            this.defaultCheckedKeys.push(i.id)
+          }
+        )
+      }
+      console.log(this.defaultCheckedKeys)
+
     },
     saveHeader() {
       let param = {
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index 583b8704c7..d54afef3f5 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -705,6 +705,7 @@ export default {
       }
       param.testId=JSON.stringify(this.form.selected)
       param.tags = this.form.tags;
+      param.type = 'functional'
       return param;
     },
     getOption(param) {
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index 18d6271bf0..3f40e08997 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -259,7 +259,7 @@ export default {
     return {
       type: TEST_CASE_LIST,
       headerItems: Track_Test_Case,
-      tableLabel: Track_Test_Case,
+      tableLabel: [],
       result: {},
       deletePath: "/test/case/delete",
       condition: {
@@ -381,6 +381,7 @@ export default {
   },
   methods: {
     customHeader() {
+      getLabel(this, TEST_CASE_LIST);
       this.$refs.headerCustom.open(this.tableLabel)
     },
     getSelectDataRange() {
diff --git a/frontend/src/business/components/track/plan/components/TestPlanList.vue b/frontend/src/business/components/track/plan/components/TestPlanList.vue
index 2447032590..90aa51084e 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanList.vue
@@ -248,7 +248,7 @@ export default {
     return {
       type: TEST_PLAN_LIST,
       headerItems: Test_Plan_List,
-      tableLabel: Test_Plan_List,
+      tableLabel: [],
       result: {},
       enableDeleteTip: false,
       queryPath: "/test/plan/list",
@@ -290,7 +290,6 @@ export default {
       this.$refs.headerCustom.open(this.tableLabel)
     },
     initTableData() {
-      getLabel(this, TEST_PLAN_LIST);
       if (this.planId) {
         this.condition.planId = this.planId;
       }
@@ -308,9 +307,11 @@ export default {
           if (item.tags && item.tags.length > 0) {
             item.tags = JSON.parse(item.tags);
           }
-          item.passRate=item.passRate+'%'
+          item.passRate = item.passRate + '%'
         })
       });
+      getLabel(this, TEST_PLAN_LIST);
+
     },
     copyData(status) {
       return JSON.parse(JSON.stringify(this.dataMap.get(status)))
diff --git a/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiCaseList.vue b/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiCaseList.vue
index 6d00c2599d..c72d1eab50 100644
--- a/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiCaseList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiCaseList.vue
@@ -192,7 +192,7 @@ export default {
     return {
       type: TEST_PLAN_API_CASE,
       headerItems: Test_Plan_Api_Case,
-      tableLabel: Test_Plan_Api_Case,
+      tableLabel: [],
       condition: {},
       selectCase: {},
       result: {},
@@ -302,6 +302,8 @@ export default {
   },
   methods: {
     customHeader() {
+      getLabel(this, TEST_PLAN_API_CASE);
+
       this.$refs.headerCustom.open(this.tableLabel)
     },
     getMaintainerOptions() {
@@ -317,7 +319,6 @@ export default {
       this.$emit('isApiListEnableChange', data);
     },
     initTable() {
-      getLabel(this, TEST_PLAN_API_CASE);
       this.selectRows = new Set();
       this.condition.status = "";
       this.condition.moduleIds = this.selectNodeIds;
@@ -356,7 +357,7 @@ export default {
           })
         });
       }
-
+      getLabel(this, TEST_PLAN_API_CASE);
     },
     handleSelect(selection, row) {
       row.hashTree = [];
diff --git a/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiScenarioList.vue b/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiScenarioList.vue
index ef54695abc..ef59b7e07c 100644
--- a/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiScenarioList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiScenarioList.vue
@@ -148,7 +148,7 @@ export default {
     return {
       type: TEST_PLAN_SCENARIO_CASE,
       headerItems: Test_Plan_Scenario_Case,
-      tableLabel: Test_Plan_Scenario_Case,
+      tableLabel: [],
       loading: false,
       condition: {},
       currentScenario: {},
@@ -196,10 +196,11 @@ export default {
   },
   methods: {
     customHeader() {
+      getLabel(this, TEST_PLAN_SCENARIO_CASE);
+
       this.$refs.headerCustom.open(this.tableLabel)
     },
     search() {
-      getLabel(this, TEST_PLAN_SCENARIO_CASE);
       this.selectRows = new Set();
       this.loading = true;
       this.condition.moduleIds = this.selectNodeIds;
@@ -241,6 +242,7 @@ export default {
           this.loading = false;
         });
       }
+      getLabel(this, TEST_PLAN_SCENARIO_CASE);
 
     },
     reductionApi(row) {
diff --git a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
index 93ebabd7ae..0fe3a3c88a 100644
--- a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
@@ -312,7 +312,7 @@ export default {
     return {
       type: TEST_PLAN_FUNCTION_TEST_CASE,
       headerItems: Test_Plan_Function_Test_Case,
-      tableLabel: Test_Plan_Function_Test_Case,
+      tableLabel: [],
       result: {},
       deletePath: "/test/case/delete",
       condition: {
@@ -416,11 +416,11 @@ export default {
   },
   methods: {
     customHeader() {
+      getLabel(this, TEST_PLAN_FUNCTION_TEST_CASE);
       this.$refs.headerCustom.open(this.tableLabel)
     },
 
     initTableData() {
-      getLabel(this, TEST_PLAN_FUNCTION_TEST_CASE);
       if (this.planId) {
         // param.planId = this.planId;
         this.condition.planId = this.planId;
@@ -464,6 +464,7 @@ export default {
           this.selectRows.clear();
         });
       }
+      getLabel(this, TEST_PLAN_FUNCTION_TEST_CASE);
     },
     showDetail(row, event, column) {
       this.isReadOnly = true;
diff --git a/frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoadCaseList.vue b/frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoadCaseList.vue
index c65b22335f..3b480b7226 100644
--- a/frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoadCaseList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoadCaseList.vue
@@ -154,7 +154,7 @@ export default {
     return {
       type: TEST_PLAN_LOAD_CASE,
       headerItems: Test_Plan_Load_Case,
-      tableLabel: Test_Plan_Load_Case,
+      tableLabel: [],
       condition: {},
       result: {},
       tableData: [],
@@ -209,10 +209,10 @@ export default {
   },
   methods: {
     customHeader() {
+      getLabel(this, TEST_PLAN_LOAD_CASE);
       this.$refs.headerCustom.open(this.tableLabel)
     },
     initTable() {
-      getLabel(this, TEST_PLAN_LOAD_CASE);
       this.selectRows = new Set();
       this.condition.testPlanId = this.planId;
       if (this.selectProjectId && this.selectProjectId !== 'root') {
@@ -244,6 +244,8 @@ export default {
           this.tableData = listObject;
         })
       }
+      getLabel(this, TEST_PLAN_LOAD_CASE);
+
     },
     refreshStatus() {
       this.refreshScheduler = setInterval(() => {
@@ -328,21 +330,14 @@ export default {
       })
     },
     updateStatus(loadCase, status) {
-      if (this.planId) {
-        this.$post('/test/plan/load/case/update', {id: loadCase.id, status: status}, () => {
-          this.$post('/test/plan/edit/status/' + loadCase.testPlanId, {}, () => {
-            this.initTable();
-          });
-        });
-      }
-      if (this.reviewId) {
-        this.$post('/test/review/load/case/update', {id: loadCase.id, status: status}, () => {
+      this.$post('/test/plan/load/case/update', {id: loadCase.id, status: status}, () => {
+        this.$post('/test/plan/edit/status/' + loadCase.testPlanId, {}, () => {
           this.initTable();
         });
-      }
+      });
     },
     handleDelete(loadCase) {
-      this.result = this.$get('/test/review/load/case/delete/' + loadCase.id, () => {
+      this.result = this.$get('/test/plan/load/case/delete/' + loadCase.id, () => {
         this.$success(this.$t('test_track.cancel_relevance_success'));
         this.$emit('refresh');
         this.initTable();
diff --git a/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue b/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue
index 55604d3485..1e6fcad5c1 100644
--- a/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue
+++ b/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue
@@ -63,30 +63,21 @@
 
                 <div class="case_container">
                   <el-row>
-                    <el-col :span="4" :offset="1">
+                    <el-col :span="9" :offset="1">
                       <span class="cast_label">{{ $t('test_track.case.priority') }}：</span>
                       <span class="cast_item">{{ testCase.priority }}</span>
                     </el-col>
-                    <el-col :span="5">
-                      <span class="cast_label">{{ $t('test_track.case.case_type') }}：</span>
-                      <span class="cast_item" v-if="testCase.type === 'automation'">
-                         场景用例
-                      </span>
-                      <span class="cast_item"
-                            v-if="testCase.type === 'performance'">{{ $t('commons.performance') }}</span>
-                      <span class="cast_item" v-if="testCase.type === 'api'">{{ $t('commons.api') }}</span>
-                      <span class="cast_item" v-if="testCase.type === 'testcase'">接口用例</span>
-
-                    </el-col>
-                  </el-row>
-
-                  <el-row>
-                    <el-col :offset="1">
+                    <el-col :span="10" :offset="1">
                       <span class="cast_label">{{ $t('test_track.case.module') }}：</span>
                       <span class="cast_item">{{ testCase.nodePath }}</span>
                     </el-col>
                   </el-row>
-
+                  <el-row>
+                    <el-col :offset="1">
+                      <span class="cast_label">{{ $t('test_track.plan_view.relevance_test_case') }}：</span>
+                      <span class="cast_item">{{ testCase.prerequisite }}</span>
+                    </el-col>
+                  </el-row>
                   <el-row>
                     <el-col :offset="1">
                       <span class="cast_label">{{ $t('test_track.case.prerequisite') }}：</span>
@@ -94,27 +85,27 @@
                     </el-col>
                   </el-row>
 
+                  <!--                  <el-row>
+                                      <el-col class="test-detail" :span="20" :offset="1">
+                                        <el-tabs v-model="activeTab" type="border-card">
+                                          <el-tab-pane name="detail" :label="$t('test_track.plan_view.test_detail')">
+                                            <api-test-detail :is-read-only="true" v-if="testCase.type === 'api'"
+                                                             :id="testCase.testId" ref="apiTestDetail"/>
+                                            <performance-test-detail v-if="testCase.type === 'performance'"
+                                                                     :is-read-only="true"
+                                                                     :id="testCase.testId"
+                                                                     ref="performanceTestDetail"/>
+                                            <api-case-item :type="mark" :api="api" :api-case="apiCase" v-if="testCase.type==='testcase'"
+                                                           ref="apiCaseConfig"/>
+                                            <ms-edit-api-scenario :type="mark" v-if="testCase.type==='automation'" :currentScenario="currentScenario"
+                                                                  ref="autoScenarioConfig"></ms-edit-api-scenario>
+
+                                          </el-tab-pane>
+                                        </el-tabs>
+                                      </el-col>
+                                    </el-row>-->
+
                   <el-row>
-                    <el-col class="test-detail" :span="20" :offset="1">
-                      <el-tabs v-model="activeTab" type="border-card">
-                        <el-tab-pane name="detail" :label="$t('test_track.plan_view.test_detail')">
-                          <api-test-detail :is-read-only="true" v-if="testCase.type === 'api'"
-                                           :id="testCase.testId" ref="apiTestDetail"/>
-                          <performance-test-detail v-if="testCase.type === 'performance'"
-                                                   :is-read-only="true"
-                                                   :id="testCase.testId"
-                                                   ref="performanceTestDetail"/>
-                          <api-case-item :type="mark" :api="api" :api-case="apiCase" v-if="testCase.type==='testcase'"
-                                         ref="apiCaseConfig"/>
-                          <ms-edit-api-scenario :type="mark" v-if="testCase.type==='automation'" :currentScenario="currentScenario"
-                                                ref="autoScenarioConfig"></ms-edit-api-scenario>
-
-                        </el-tab-pane>
-                      </el-tabs>
-                    </el-col>
-                  </el-row>
-
-                  <el-row v-if="testCase.type === 'function'">
                     <el-col :span="20" :offset="1">
                       <div>
                         <span class="cast_label">{{ $t('test_track.case.steps') }}：</span>
@@ -365,7 +356,7 @@ export default {
         this.testCase = item;
         this.getRelatedTest();
         this.getComments(item);
-        this.initTest();
+        /*  this.initTest();*/
         this.getFileMetaData(data);
       })
 
@@ -389,59 +380,22 @@ export default {
       listenGoBack(this.handleClose);
       this.initData(testCase);
       this.getComments(testCase);
-      this.getApiTestCase(testCase);
-      this.getCurrentScenario(testCase)
-    },
-    getApiTestCase(testCase) {
-      let param = {}
-      param.projectId = getCurrentProjectID();
-      param.id = testCase.testId;
-      this.result = this.$post("/api/testcase/list", param, response => {
-        let apiCaseList = []
-        this.apiCaseList = response.data;
-        this.apiCaseList.forEach(apiCase => {
-          if (apiCase.tags && apiCase.tags.length > 0) {
-            apiCase.tags = JSON.parse(apiCase.tags);
-            this.$set(apiCase, 'selected', false);
-          }
-          if (Object.prototype.toString.call(apiCase.request).match(/\[object (\w+)\]/)[1].toLowerCase() != 'object') {
-            apiCase.request = JSON.parse(apiCase.request);
-          }
-          if (!apiCase.request.hashTree) {
-            apiCase.request.hashTree = [];
-          }
-          this.apiCase = apiCase
-          this.handleTestCase(apiCase)
-        })
-
-      });
-    },
-    getCurrentScenario(testCase) {
-      this.result = this.$get("/api/automation/getApiScenario/" + testCase.testId, response => {
-        this.currentScenario=response.data
-      });
-    },
-
-    handleTestCase(testCase) {
-      this.$get('/api/definition/get/' + testCase.apiDefinitionId, (response) => {
-        this.api = response.data;
-      });
-    },
-    initTest() {
-      this.$nextTick(() => {
-        if (this.testCase.testId && this.testCase.testId !== 'other') {
-          if (this.$refs.apiTestDetail && this.testCase.type === 'api') {
-            this.$refs.apiTestDetail.init();
-          } else if (this.testCase.type === 'performance') {
-            this.$refs.performanceTestDetail.init();
-          } else if (this.testCase.type === 'testcase') {
-            this.$refs.apiCaseConfig.active(this.api);
-          } else if (this.testCase.type === 'automation') {
-             this.$refs.autoScenarioConfig.showAll();
-          }
-        }
-      });
     },
+    /* initTest() {
+       this.$nextTick(() => {
+         if (this.testCase.testId && this.testCase.testId !== 'other') {
+           if (this.$refs.apiTestDetail && this.testCase.type === 'api') {
+             this.$refs.apiTestDetail.init();
+           } else if (this.testCase.type === 'performance') {
+             this.$refs.performanceTestDetail.init();
+           } else if (this.testCase.type === 'testcase') {
+             this.$refs.apiCaseConfig.active(this.api);
+           } else if (this.testCase.type === 'automation') {
+              this.$refs.autoScenarioConfig.showAll();
+           }
+         }
+       });
+     },*/
     getComments(testCase) {
       let id = '';
       if (testCase) {

From 0ab466293ccb6dd2c353ff014a7de27142ded2b3 Mon Sep 17 00:00:00 2001
From: wenyann <64353056+wenyann@users.noreply.github.com>
Date: Mon, 22 Mar 2021 09:03:42 +0800
Subject: [PATCH 22/22] =?UTF-8?q?fix:=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92?=
 =?UTF-8?q?=E5=85=B3=E8=81=94=E6=B5=8B=E8=AF=95=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../track/service/TestPlanService.java        | 102 ++++++++++--------
 1 file changed, 56 insertions(+), 46 deletions(-)

diff --git a/backend/src/main/java/io/metersphere/track/service/TestPlanService.java b/backend/src/main/java/io/metersphere/track/service/TestPlanService.java
index bc850fe47d..e7b8089ea5 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestPlanService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestPlanService.java
@@ -126,6 +126,8 @@ public class TestPlanService {
     private TestPlanApiScenarioMapper testPlanApiScenarioMapper;
     @Resource
     private ApiScenarioMapper apiScenarioMapper;
+    @Resource
+    private TestCaseTestMapper testCaseTestMapper;
 
     public synchronized String addTestPlan(AddTestPlanRequest testPlan) {
         if (getTestPlanByName(testPlan.getName()).size() > 0) {
@@ -433,57 +435,65 @@ public class TestPlanService {
         if(request.getChecked()){
             if (!testCaseIds.isEmpty()) {
                 testCaseIds.forEach(caseId -> {
-                    TestCaseWithBLOBs testDtail=testCaseMapper.selectByPrimaryKey(caseId);
-                    if(StringUtils.equals(testDtail.getType(),TestCaseStatus.performance.name())){
-                        TestPlanLoadCase t = new TestPlanLoadCase();
-                        t.setId(UUID.randomUUID().toString());
-                        t.setTestPlanId(request.getPlanId());
-                        t.setLoadCaseId(testDtail.getTestId());
-                        t.setCreateTime(System.currentTimeMillis());
-                        t.setUpdateTime(System.currentTimeMillis());
-                        TestPlanLoadCaseExample testPlanLoadCaseExample=new TestPlanLoadCaseExample();
-                        testPlanLoadCaseExample.createCriteria().andTestPlanIdEqualTo(request.getPlanId()).andLoadCaseIdEqualTo(t.getLoadCaseId());
-                        if (testPlanLoadCaseMapper.countByExample(testPlanLoadCaseExample) <=0) {
-                            testPlanLoadCaseMapper.insert(t);
+                    List<TestCaseTest> list=new ArrayList<>();
+                    TestCaseTestExample examp=new TestCaseTestExample();
+                    examp.createCriteria().andTestCaseIdEqualTo(caseId);
+                    if(testCaseTestMapper.countByExample(examp)>0){
+                        list=testCaseTestMapper.selectByExample(examp);
+                    }
+                    list.forEach(l->{
+                        if(StringUtils.equals(l.getTestType(),TestCaseStatus.performance.name())){
+                            TestPlanLoadCase t = new TestPlanLoadCase();
+                            t.setId(UUID.randomUUID().toString());
+                            t.setTestPlanId(request.getPlanId());
+                            t.setLoadCaseId(l.getTestId());
+                            t.setCreateTime(System.currentTimeMillis());
+                            t.setUpdateTime(System.currentTimeMillis());
+                            TestPlanLoadCaseExample testPlanLoadCaseExample=new TestPlanLoadCaseExample();
+                            testPlanLoadCaseExample.createCriteria().andTestPlanIdEqualTo(request.getPlanId()).andLoadCaseIdEqualTo(t.getLoadCaseId());
+                            if (testPlanLoadCaseMapper.countByExample(testPlanLoadCaseExample) <=0) {
+                                testPlanLoadCaseMapper.insert(t);
+                            }
+
                         }
+                        if(StringUtils.equals(l.getTestType(),TestCaseStatus.testcase.name())){
+                            TestPlanApiCase t=new TestPlanApiCase();
+                            ApiTestCaseWithBLOBs apitest=apiTestCaseMapper.selectByPrimaryKey(l.getTestId());
+                            ApiDefinitionWithBLOBs apidefinition=apiDefinitionMapper.selectByPrimaryKey(apitest.getApiDefinitionId());
+                            t.setId(UUID.randomUUID().toString());
+                            t.setTestPlanId(request.getPlanId());
+                            t.setApiCaseId(l.getTestId());
+                            t.setEnvironmentId(apidefinition.getEnvironmentId());
+                            t.setCreateTime(System.currentTimeMillis());
+                            t.setUpdateTime(System.currentTimeMillis());
+                            TestPlanApiCaseExample example=new TestPlanApiCaseExample();
+                            example.createCriteria().andTestPlanIdEqualTo(request.getPlanId()).andApiCaseIdEqualTo(t.getApiCaseId());
+                            if(testPlanApiCaseMapper.countByExample(example)<=0){
+                                testPlanApiCaseMapper.insert(t);
+                            }
 
-                    }
-                    if(StringUtils.equals(testDtail.getType(),TestCaseStatus.testcase.name())){
-                        TestPlanApiCase t=new TestPlanApiCase();
-                        ApiTestCaseWithBLOBs apitest=apiTestCaseMapper.selectByPrimaryKey(testDtail.getTestId());
-                        ApiDefinitionWithBLOBs apidefinition=apiDefinitionMapper.selectByPrimaryKey(apitest.getApiDefinitionId());
-                        t.setId(UUID.randomUUID().toString());
-                        t.setTestPlanId(request.getPlanId());
-                        t.setApiCaseId(testDtail.getTestId());
-                        t.setEnvironmentId(apidefinition.getEnvironmentId());
-                        t.setCreateTime(System.currentTimeMillis());
-                        t.setUpdateTime(System.currentTimeMillis());
-                        TestPlanApiCaseExample example=new TestPlanApiCaseExample();
-                        example.createCriteria().andTestPlanIdEqualTo(request.getPlanId()).andApiCaseIdEqualTo(t.getApiCaseId());
-                        if(testPlanApiCaseMapper.countByExample(example)<=0){
-                            testPlanApiCaseMapper.insert(t);
                         }
+                        if(StringUtils.equals(l.getTestType(),TestCaseStatus.automation.name())){
+                            TestPlanApiScenario t=new TestPlanApiScenario();
+                            ApiScenarioWithBLOBs testPlanApiScenario=apiScenarioMapper.selectByPrimaryKey(l.getTestId());
+                            t.setId(UUID.randomUUID().toString());
+                            t.setTestPlanId(request.getPlanId());
+                            t.setApiScenarioId(l.getTestId());
+                            t.setLastResult(testPlanApiScenario.getLastResult());
+                            t.setPassRate(testPlanApiScenario.getPassRate());
+                            t.setReportId(testPlanApiScenario.getReportId());
+                            t.setStatus(testPlanApiScenario.getStatus());
+                            t.setCreateTime(System.currentTimeMillis());
+                            t.setUpdateTime(System.currentTimeMillis());
+                            TestPlanApiScenarioExample example=new TestPlanApiScenarioExample();
+                            example.createCriteria().andTestPlanIdEqualTo(request.getPlanId()).andApiScenarioIdEqualTo(t.getApiScenarioId());
+                            if(testPlanApiScenarioMapper.countByExample(example)<=0){
+                                testPlanApiScenarioMapper.insert(t);
+                            }
 
-                    }
-                    if(StringUtils.equals(testDtail.getType(),TestCaseStatus.automation.name())){
-                        TestPlanApiScenario t=new TestPlanApiScenario();
-                        ApiScenarioWithBLOBs testPlanApiScenario=apiScenarioMapper.selectByPrimaryKey(testDtail.getTestId());
-                        t.setId(UUID.randomUUID().toString());
-                        t.setTestPlanId(request.getPlanId());
-                        t.setApiScenarioId(testDtail.getTestId());
-                        t.setLastResult(testPlanApiScenario.getLastResult());
-                        t.setPassRate(testPlanApiScenario.getPassRate());
-                        t.setReportId(testPlanApiScenario.getReportId());
-                        t.setStatus(testPlanApiScenario.getStatus());
-                        t.setCreateTime(System.currentTimeMillis());
-                        t.setUpdateTime(System.currentTimeMillis());
-                        TestPlanApiScenarioExample example=new TestPlanApiScenarioExample();
-                        example.createCriteria().andTestPlanIdEqualTo(request.getPlanId()).andApiScenarioIdEqualTo(t.getApiScenarioId());
-                       if(testPlanApiScenarioMapper.countByExample(example)<=0){
-                           testPlanApiScenarioMapper.insert(t);
-                       }
+                        }
+                    });
 
-                    }
 
                 });
             }