diff --git a/frontend/src/business/components/api/definition/components/EditCompleteContainer.vue b/frontend/src/business/components/api/definition/components/EditCompleteContainer.vue
index fc1aa4fef7..a641f40cde 100644
--- a/frontend/src/business/components/api/definition/components/EditCompleteContainer.vue
+++ b/frontend/src/business/components/api/definition/components/EditCompleteContainer.vue
@@ -109,6 +109,8 @@ import TcpMockConfig from "@/business/components/api/definition/components/mock/
 import ApiCaseSimpleList from "./list/ApiCaseSimpleList";
 import MsApiCaseList from "./case/ApiCaseList";
 import {getUUID} from "@/common/js/utils";
+import {Body} from "@/business/components/api/definition/model/ApiTestModel";
+import {TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
 
 export default {
   name: "EditCompleteContainer",
@@ -158,6 +160,7 @@ export default {
     if (this.currentApi.id && (this.currentProtocol === "HTTP" || this.currentProtocol === "TCP")) {
       this.mockSetting();
     }
+    this.formatApi();
   },
   watch: {
     showMock() {
@@ -174,6 +177,38 @@ export default {
     }
   },
   methods: {
+    sort(stepArray) {
+      if (stepArray) {
+        for (let i in stepArray) {
+          if (!stepArray[i].clazzName) {
+            stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type);
+          }
+          if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
+            this.sort(stepArray[i].hashTree);
+          }
+        }
+      }
+    },
+    formatApi() {
+      if (this.currentApi.response != null && this.currentApi.response != 'null' && this.currentApi.response != undefined) {
+        if (Object.prototype.toString.call(this.currentApi.response).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
+          this.currentApi.response = JSON.parse(this.currentApi.response);
+        }
+      }
+      if (this.currentApi.request != null && this.currentApi.request != 'null' && this.currentApi.request != undefined) {
+        if (Object.prototype.toString.call(this.currentApi.request).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
+          this.currentApi.request = JSON.parse(this.currentApi.request);
+        }
+      }
+      if (!this.currentApi.request.hashTree) {
+        this.currentApi.request.hashTree = [];
+      }
+      if (this.currentApi.request.body && !this.currentApi.request.body.binary) {
+        this.currentApi.request.body.binary = [];
+      }
+      this.currentApi.request.clazzName = TYPE_TO_C.get(this.currentApi.request.type);
+      this.sort(this.currentApi.request.hashTree);
+    },
     mockSetting() {
       let mockParam = {};
       mockParam.projectId = this.projectId;
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 9416d3d7ea..ea45eb40f3 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
@@ -160,6 +160,7 @@
             @showCaseRef="showCaseRef"
             @showEnvironment="showEnvironment"
             @createPerformance="createPerformance"
+            @showHistory="openHis"
             :row="scope.row"/>
         </template>
 
@@ -186,6 +187,8 @@
 
     <api-case-batch-run :project-id="projectId" @batchRun="runBatch" ref="batchRun"/>
 
+    <ms-task-center ref="taskCenter"/>
+
     <el-dialog :close-on-click-modal="false" :title="$t('test_track.plan_view.test_result')" width="60%"
                :visible.sync="resVisible" class="api-import" destroy-on-close @close="resVisible=false">
       <ms-request-result-tail :response="response" ref="debugResult"/>
@@ -258,7 +261,8 @@ export default {
     MsTableAdvSearchBar,
     MsTable,
     MsTableColumn,
-    MsRequestResultTail
+    MsRequestResultTail,
+    MsTaskCenter: () => import("../../../../task/TaskCenter"),
   },
   data() {
     return {
@@ -460,6 +464,9 @@ export default {
     }
   },
   methods: {
+    openHis(row) {
+      this.$refs.taskCenter.openHistory(row.id);
+    },
     getExecResult(apiCase) {
       if (apiCase.lastResultId) {
         let url = "/api/definition/report/get/" + apiCase.lastResultId;
diff --git a/frontend/src/business/components/api/definition/components/reference/ApiCaseTableExtendBtns.vue b/frontend/src/business/components/api/definition/components/reference/ApiCaseTableExtendBtns.vue
index eeafb7da94..007d3ee8ab 100644
--- a/frontend/src/business/components/api/definition/components/reference/ApiCaseTableExtendBtns.vue
+++ b/frontend/src/business/components/api/definition/components/reference/ApiCaseTableExtendBtns.vue
@@ -5,9 +5,11 @@
     </el-link>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item command="ref">{{ $t('api_test.automation.view_ref') }}</el-dropdown-item>
+      <el-dropdown-item command="history" v-modules="['history']">
+        {{ $t('commons.execute_history') }}
+      </el-dropdown-item>
       <el-dropdown-item command="create_performance" v-modules="['performance']"
-                        v-permission="['PROJECT_API_DEFINITION:READ+CREATE_PERFORMANCE']"
-        >
+                        v-permission="['PROJECT_API_DEFINITION:READ+CREATE_PERFORMANCE']">
         {{ $t('api_test.create_performance_test') }}
       </el-dropdown-item>
     </el-dropdown-menu>
@@ -38,6 +40,9 @@ export default {
           case "create_performance":
             this.$emit("showEnvironment", this.row);
             break;
+          case "history":
+            this.$emit("showHistory", this.row);
+            break;
         }
       } else {
         this.$warning(this.$t('api_test.automation.save_case_info'))