diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.xml
index 19cbffeb3b85fdc98a4d6c2c5230d57e99ecff3a..37143332d562cc95256cf199295cc741302917d0 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.xml
@@ -27,6 +27,9 @@
             <if test="request.name != null">
                 and test_case.name like CONCAT('%', #{request.name},'%')
             </if>
+            <if test="request.id != null">
+                and test_case.id = #{request.id}
+            </if>
             <if test="request.nodeIds != null and request.nodeIds.size() > 0">
                 and test_case.node_id in
                 <foreach collection="request.nodeIds" item="nodeId" separator="," open="(" close=")">
diff --git a/backend/src/main/java/io/metersphere/track/controller/TestPlanTestCaseController.java b/backend/src/main/java/io/metersphere/track/controller/TestPlanTestCaseController.java
index 2faa0d92f03c6d4122961c8ae512b663a6f4854a..a0b240cc58c64a4099591b83b7f3700936a7b13d 100644
--- a/backend/src/main/java/io/metersphere/track/controller/TestPlanTestCaseController.java
+++ b/backend/src/main/java/io/metersphere/track/controller/TestPlanTestCaseController.java
@@ -27,6 +27,11 @@ public class TestPlanTestCaseController {
         return PageUtils.setPageInfo(page, testPlanTestCaseService.list(request));
     }
 
+    @GetMapping("/get/{caseId}")
+    public TestPlanCaseDTO getTestPlanCases(@PathVariable String caseId){
+        return testPlanTestCaseService.get(caseId);
+    }
+
     @PostMapping("recent/{count}")
     public List<TestPlanCaseDTO> getRecentTestCases(@PathVariable int count, @RequestBody QueryTestPlanCaseRequest request){
         return testPlanTestCaseService.getRecentTestCases(request, count);
diff --git a/backend/src/main/java/io/metersphere/track/dto/TestPlanCaseDTO.java b/backend/src/main/java/io/metersphere/track/dto/TestPlanCaseDTO.java
index 6d7b1747cf31a86fe20d8f2f1a62f0f80d06c353..66831d2cacae5cba31d9d22a0fce6bf33dcc0a9f 100644
--- a/backend/src/main/java/io/metersphere/track/dto/TestPlanCaseDTO.java
+++ b/backend/src/main/java/io/metersphere/track/dto/TestPlanCaseDTO.java
@@ -7,9 +7,10 @@ import lombok.Setter;
 @Getter
 @Setter
 public class TestPlanCaseDTO extends TestCaseWithBLOBs {
-
     private String executor;
     private String executorName;
     private String status;
     private String results;
+    private String planId;
+    private String caseId;
 }
diff --git a/backend/src/main/java/io/metersphere/track/service/TestPlanTestCaseService.java b/backend/src/main/java/io/metersphere/track/service/TestPlanTestCaseService.java
index 30fe81b8ad4ba5cbca41ee73f6a0137ca370a998..9e66e3e4709d59d68331932fd4660558f216cd60 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestPlanTestCaseService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestPlanTestCaseService.java
@@ -97,4 +97,9 @@ public class TestPlanTestCaseService {
         request.setExecutor(user.getId());
     }
 
+    public TestPlanCaseDTO get(String caseId) {
+        QueryTestPlanCaseRequest request = new QueryTestPlanCaseRequest();
+        request.setId(caseId);
+        return extTestPlanTestCaseMapper.list(request).get(0);
+    }
 }
diff --git a/frontend/src/business/components/common/router/router.js b/frontend/src/business/components/common/router/router.js
index 01771f46ac6d00e0f2d8a2af7d79deac9edb2f81..2be39981dfeef21b65b832628f9bb58a2bfe815f 100644
--- a/frontend/src/business/components/common/router/router.js
+++ b/frontend/src/business/components/common/router/router.js
@@ -218,6 +218,11 @@ const router = new VueRouter({
           name: "planView",
           component: TestPlanView
         },
+        {
+          path: "plan/view/edit/:caseId",
+          name: "planViewEdit",
+          component: TestPlanView
+        },
         {
           path: "project/:type",
           name: "trackProject",
diff --git a/frontend/src/business/components/track/home/TrackHome.vue b/frontend/src/business/components/track/home/TrackHome.vue
index 2c0bee5ab495440be266bc033c3679d7a2b6f224..438459044aac8639035a738fcaba0c91470a5aea 100644
--- a/frontend/src/business/components/track/home/TrackHome.vue
+++ b/frontend/src/business/components/track/home/TrackHome.vue
@@ -8,10 +8,10 @@
         <el-col :span="9">
           <el-row>
             <el-col>
-              <recent-test-case-list/>
+              <test-case-side-list :title="'最近测试'" :type="'recent'"/>
             </el-col>
             <el-col>
-              <pending-test-case-list/>
+              <test-case-side-list :title="'待完成'" :type="'pending'"/>
             </el-col>
           </el-row>
         </el-col>
@@ -21,12 +21,11 @@
 </template>
 
 <script>
-    import PendingTestCaseList from "./components/PendingTestCaseList";
-    import RecentTestCaseList from "./components/RecentTestCaseList";
     import RelatedTestPlanList from "./components/RelatedTestPlanList";
+    import TestCaseSideList from "./components/TestCaseSideList";
     export default {
       name: "TrackHome",
-      components: {RelatedTestPlanList, RecentTestCaseList, PendingTestCaseList}
+      components: {TestCaseSideList, RelatedTestPlanList}
     }
 </script>
 
diff --git a/frontend/src/business/components/track/home/components/RecentTestCaseList.vue b/frontend/src/business/components/track/home/components/RecentTestCaseList.vue
deleted file mode 100644
index 523058117c9f78a02884fafb4ebef94b89eae1d6..0000000000000000000000000000000000000000
--- a/frontend/src/business/components/track/home/components/RecentTestCaseList.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-
-  <home-base-component :title="'最近测试'">
-
-    <el-table
-      row-key="id"
-      :data="tableData">
-
-      <el-table-column
-        prop="name"
-        :label="$t('commons.name')"
-        show-overflow-tooltip>
-      </el-table-column>
-
-      <el-table-column
-        prop="priority"
-        :label="$t('test_track.case.priority')">
-        <template v-slot:default="scope">
-          <priority-table-item :value="scope.row.priority" ref="priority"/>
-        </template>
-      </el-table-column>
-
-      <el-table-column
-        prop="type"
-        :label="$t('test_track.case.type')"
-        show-overflow-tooltip>
-        <template v-slot:default="scope">
-          <type-table-item :value="scope.row.type"/>
-        </template>
-      </el-table-column>
-
-      <el-table-column
-        prop="status"
-        :label="$t('test_track.plan_view.execute_result')">
-        <template v-slot:default="scope">
-          <status-table-item :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-
-    </el-table>
-
-  </home-base-component>
-
-</template>
-
-<script>
-    import HomeBaseComponent from "./HomeBaseComponent";
-    import StatusTableItem from "../../common/tableItems/planview/StatusTableItem";
-    import TypeTableItem from "../../common/tableItems/planview/TypeTableItem";
-    import PriorityTableItem from "../../common/tableItems/planview/PriorityTableItem";
-    export default {
-      name: "RecentTestCaseList",
-      components: {PriorityTableItem, TypeTableItem, StatusTableItem, HomeBaseComponent},
-      data() {
-        return {
-          tableData: []
-        }
-      },
-      mounted() {
-        this.initTableData();
-      },
-      methods: {
-        initTableData() {
-          this.result = this.$post('/test/plan/case/recent/5', {}, response => {
-            this.tableData = response.data;
-          });
-        },
-      }
-    }
-</script>
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/business/components/track/home/components/PendingTestCaseList.vue b/frontend/src/business/components/track/home/components/TestCaseSideList.vue
similarity index 52%
rename from frontend/src/business/components/track/home/components/PendingTestCaseList.vue
rename to frontend/src/business/components/track/home/components/TestCaseSideList.vue
index b278e1ec42ab23ab8ba9f38366551d2e52a702be..be0df399f7dcc90200c36a7514666a596dfd1d16 100644
--- a/frontend/src/business/components/track/home/components/PendingTestCaseList.vue
+++ b/frontend/src/business/components/track/home/components/TestCaseSideList.vue
@@ -1,9 +1,10 @@
 <template>
 
-  <home-base-component :title="'待测试'">
+  <home-base-component :title="title">
 
     <el-table
       row-key="id"
+      @row-click="editTestCase"
       :data="tableData">
 
       <el-table-column
@@ -44,29 +45,40 @@
 </template>
 
 <script>
-    import HomeBaseComponent from "./HomeBaseComponent";
-    import PriorityTableItem from "../../common/tableItems/planview/PriorityTableItem";
-    import TypeTableItem from "../../common/tableItems/planview/TypeTableItem";
-    import StatusTableItem from "../../common/tableItems/planview/StatusTableItem";
-    export default {
-      name: "PendingTestCaseList",
-      components: {StatusTableItem, TypeTableItem, PriorityTableItem, HomeBaseComponent},
-      data() {
-        return {
-          tableData: []
-        }
+  import HomeBaseComponent from "./HomeBaseComponent";
+  import StatusTableItem from "../../common/tableItems/planview/StatusTableItem";
+  import TypeTableItem from "../../common/tableItems/planview/TypeTableItem";
+  import PriorityTableItem from "../../common/tableItems/planview/PriorityTableItem";
+  export default {
+    name: "TestCaseSideList",
+    components: {PriorityTableItem, TypeTableItem, StatusTableItem, HomeBaseComponent},
+    data() {
+      return {
+        tableData: [],
+      }
+    },
+    props: {
+      type: {
+        type: String
+      },
+      title: {
+        type: String
       },
-      mounted() {
-        this.initTableData();
+    },
+    mounted() {
+      this.initTableData();
+    },
+    methods: {
+      initTableData() {
+        this.result = this.$post('/test/plan/case/' + this.type + '/5', {}, response => {
+          this.tableData = response.data;
+        });
       },
-      methods: {
-        initTableData() {
-          this.result = this.$post('/test/plan/case/pending/5', {}, response => {
-            this.tableData = response.data;
-          });
-        },
+      editTestCase(row, event, column) {
+        this.$router.push('/track/plan/view/edit/' + row.caseId)
       }
     }
+  }
 </script>
 
 <style scoped>
diff --git a/frontend/src/business/components/track/plan/view/TestPlanView.vue b/frontend/src/business/components/track/plan/view/TestPlanView.vue
index ad9db14380073a7c3959a4d9e933810495a60c9e..f730edd2681e5b71a23e216673eb5aba91f0d8fc 100644
--- a/frontend/src/business/components/track/plan/view/TestPlanView.vue
+++ b/frontend/src/business/components/track/plan/view/TestPlanView.vue
@@ -24,7 +24,7 @@
           :plan-id="planId"
           :select-node-ids="selectNodeIds"
           :select-parent-nodes="selectParentNodes"
-          ref="testCasePlanList"/>
+          ref="testPlanTestCaseList"/>
       </el-main>
     </el-container>
 
@@ -63,8 +63,12 @@
       },
       mounted() {
         this.initData();
+        this.openTestCaseEdit(this.$route.path);
       },
       watch: {
+        '$route'(to, from) {
+          this.openTestCaseEdit(to.path);
+        },
         planId() {
           this.initData();
         }
@@ -106,6 +110,18 @@
               this.treeNodes = response.data;
             });
           }
+        },
+        openTestCaseEdit(path) {
+          if (path.indexOf("/plan/view/edit") >= 0){
+            let caseId = this.$route.params.caseId;
+            this.$get('/test/plan/case/get/' + caseId, response => {
+              let testCase = response.data;
+              if (testCase) {
+                this.$refs.testPlanTestCaseList.handleEdit(testCase);
+                this.$router.push('/track/plan/view/' + testCase.planId);
+              }
+            });
+          }
         }
       }
     }