解决路由跳转传参问题

backend/src/main/java/io/metersphere/controller/TestPlanController.java

@@ -19,13 +19,15 @@ import javax.annotation.Resource;
 import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
 import java.util.ArrayList;
+import java.util.Collections;
+import java.util.Iterator;
 import java.util.List;
 import java.util.stream.Collectors;
 
 @RestController
 @RequestMapping(value = "/testplan")
 public class TestPlanController {
-    private static List<LoadTestDTO> loadTests = new ArrayList<>();
+    private static List<LoadTestDTO> loadTests = Collections.synchronizedList(new ArrayList<LoadTestDTO>());
 
     static {
         // 模拟数据
@@ -63,7 +65,13 @@ public class TestPlanController {
 
     @PostMapping("/delete")
     public void delete(@RequestBody DeleteTestPlanRequest request) {
-        System.out.println(String.format("delete test plan: %s", request.getName()));
+        final Iterator<LoadTestDTO> iterator = loadTests.iterator();
+        while (iterator.hasNext()) {
+            if (iterator.next().getId().equals(request.getId())) {
+                iterator.remove();
+                return;
+            }
+        }
     }
 
     @PostMapping("/file/upload")

backend/src/main/java/io/metersphere/controller/request/testplan/TestPlanRequest.java

@@ -1,10 +1,20 @@
 package io.metersphere.controller.request.testplan;
 
 public class TestPlanRequest {
+    private String id;
     private String fileId;
     private String project;
     private String name;
 
+
+    public String getId() {
+        return id;
+    }
+
+    public void setId(String id) {
+        this.id = id;
+    }
+
     public String getFileId() {
         return fileId;
     }

frontend/src/performance/components/router/router.js

@@ -56,12 +56,23 @@ const router = new VueRouter({
       ]
     },
     {
-      path: "/createTest", components: {
+      path: "/createTest",
+      name: "createTest",
+      components: {
         content: CreateTestPlan
+      },
+      props: {
+        content: (route) => {
+          window.console.log("route.params: " + route.params);
+          return {
+            ...route.params
+          }
+        }
       }
     },
     {
-      path: "/allTest", components: {
+      path: "/allTest",
+      components: {
         content: AllTestPlan
       }
     },

frontend/src/performance/components/testPlan/AllTestPlan.vue

@@ -1,66 +1,70 @@
 <template>
-  <div>
+  <div class="testplan-container">
-    <el-row>
+    <div>
-      <el-col :span="22" :offset="1">
+      <el-row>
-        <el-table
+        <el-col :span="22" :offset="1">
-          stripe
+          <el-table
-          ref="multipleTable"
+            stripe
-          :data="tableData"
+            ref="multipleTable"
-          tooltip-effect="dark"
+            :data="tableData"
-          style="width: 100%"
+            tooltip-effect="dark"
-          @selection-change="handleSelectionChange">
+            style="width: 100%"
-          <el-table-column
+            @selection-change="handleSelectionChange">
-            type="selection"
+            <el-table-column
-            width="55">
+              type="selection"
-          </el-table-column>
+              width="55">
-          <el-table-column
+            </el-table-column>
-            prop="name"
+            <el-table-column
-            label="名称">
+              prop="name"
-          </el-table-column>
+              label="名称">
-          <el-table-column
+            </el-table-column>
-            prop="description"
+            <el-table-column
-            label="描述"
+              prop="description"
-            show-overflow-tooltip>
+              label="描述"
-          </el-table-column>
+              show-overflow-tooltip>
-          <el-table-column
+            </el-table-column>
-            prop="projectName"
+            <el-table-column
-            label="所属项目">
+              prop="projectName"
-          </el-table-column>
+              label="所属项目">
-          <el-table-column
+            </el-table-column>
-            label="创建时间">
+            <el-table-column
-            <template slot-scope="scope">
+              label="创建时间">
-              <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+              <template slot-scope="scope">
-            </template>
+                <span>{{ scope.row.createTime | timestampFormatDate }}</span>
-          </el-table-column>
+              </template>
-          <el-table-column
+            </el-table-column>
-            prop="updateTime"
+            <el-table-column
-            label="更新时间">
+              prop="updateTime"
-            <template slot-scope="scope">
+              label="更新时间">
-              <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+              <template slot-scope="scope">
-            </template>
+                <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
-          </el-table-column>
+              </template>
-          <el-table-column
+            </el-table-column>
-            label="操作">
+            <el-table-column
-            <template slot-scope="scope">
+              label="操作">
-              <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
+              <template slot-scope="scope">
-              <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
+                <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
-            </template>
+                <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
-          </el-table-column>
+              </template>
-        </el-table>
+            </el-table-column>
-      </el-col>
+          </el-table>
-    </el-row>
+        </el-col>
-    <div class="block">
+      </el-row>
-      <div class="block">
+      <el-row>
-        <el-pagination
+        <el-col :span="22" :offset="1">
-          @size-change="handleSizeChange"
+          <div class="table-page">
-          @current-change="handleCurrentChange"
+            <el-pagination
-          :current-page.sync="currentPage"
+              @size-change="handleSizeChange"
-          :page-sizes="[10, 20, 50, 100]"
+              @current-change="handleCurrentChange"
-          :page-size="pageSize"
+              :current-page.sync="currentPage"
-          layout="total, sizes, prev, pager, next, jumper"
+              :page-sizes="[5, 10, 20, 50, 100]"
-          :total="total">
+              :page-size="pageSize"
-        </el-pagination>
+              layout="total, sizes, prev, pager, next, jumper"
-      </div>
+              :total="total">
+            </el-pagination>
+          </div>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
@@ -74,7 +78,7 @@
         tableData: [],
         multipleSelection: [],
         currentPage: 1,
-        pageSize: 10,
+        pageSize: 5,
         total: 0,
       }
     },
@@ -111,8 +115,12 @@
         this.multipleSelection = val;
       },
       handleEdit(testPlan) {
-        /// todo: 跳到编辑页面
+        this.$router.push({
-        window.console.log(testPlan);
+          name: 'createTest',
+          params: {
+            testPlanObj: testPlan
+          }
+        })
       },
       handleDelete(testPlan) {
         this.$alert('确认删除测试: ' + testPlan.name + "？", '', {
@@ -124,7 +132,7 @@
       },
       _handleDelete(testPlan) {
         let data = {
-          name: testPlan.name
+          id: testPlan.id
         };
 
         this.$post(this.deletePath, data).then(response => {
@@ -133,6 +141,7 @@
               message: '删除成功！',
               type: 'success'
             });
+            this.initTableData();
           } else {
             this.$message.error(response.message);
           }
@@ -143,7 +152,13 @@
 </script>
 
 <style scoped>
-  .el-row {
+  .testplan-container {
     background: white;
   }
+
+  .table-page {
+    padding-top: 20px;
+    margin-right: -9px;
+    float: right;
+  }
 </style>

frontend/src/performance/components/testPlan/CreateTestPlan.vue

@@ -44,10 +44,11 @@
       TestPlanPressureConfig,
       TestPlanAdvancedConfig,
     },
+    props: ['testPlanObj'],
     data() {
       return {
-        savePath: "/testplan/save",
         testPlan: {},
+        savePath: "/testplan/save",
         projects: [{
           id: '选项1',
           name: '黄金糕'
@@ -80,6 +81,12 @@
         }]
       }
     },
+    created() {
+      window.console.log("testPlanObj: " + this.testPlanObj);
+      if (this.testPlanObj) {
+        this.testPlan = this.testPlanObj;
+      }
+    },
     methods: {
       save() {
         if (!this.validTestPlan()) {