测试列表的分页实现

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

@@ -1,32 +1,71 @@
 package io.metersphere.controller;
 
+import com.github.pagehelper.Page;
+import io.metersphere.commons.utils.PageUtils;
+import io.metersphere.commons.utils.Pager;
+import io.metersphere.controller.request.testplan.DeleteTestPlanRequest;
 import io.metersphere.controller.request.testplan.FileOperationRequest;
+import io.metersphere.controller.request.testplan.QueryTestPlanRequest;
 import io.metersphere.controller.request.testplan.SaveTestPlanRequest;
+import io.metersphere.dto.LoadTestDTO;
 import io.metersphere.service.FileService;
 import org.springframework.http.HttpHeaders;
 import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.*;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
 import org.springframework.web.multipart.MultipartFile;
 
 import javax.annotation.Resource;
 import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.stream.Collectors;
 
 @RestController
 @RequestMapping(value = "/testplan")
 public class TestPlanController {
+    private static List<LoadTestDTO> loadTests = new ArrayList<>();
+
+    static {
+        // 模拟数据
+        for (int i = 0; i < 100; i++) {
+            final LoadTestDTO loadTest = new LoadTestDTO();
+            loadTest.setId(String.valueOf(i));
+            loadTest.setName("load test " + i);
+            loadTest.setDescription("no description");
+            loadTest.setScenarioDefinition("no scenario description");
+            loadTest.setCreateTime(System.currentTimeMillis());
+            loadTest.setUpdateTime(System.currentTimeMillis());
+            loadTest.setProjectId(String.valueOf(i));
+            loadTest.setProjectName("project " + i);
+            loadTests.add(loadTest);
+        }
+    }
+
     @Resource
     private FileService fileService;
 
+    @PostMapping("/list/{goPage}/{pageSize}")
+    public Pager<List<LoadTestDTO>> list(@PathVariable int goPage, @PathVariable int pageSize, @RequestBody QueryTestPlanRequest request) {
+        final Page page = new Page((int) Math.ceil(loadTests.size() * 1.0 / pageSize), pageSize);
+        page.setTotal(loadTests.size());
+        return PageUtils.setPageInfo(
+                page,
+                loadTests.stream().skip((goPage - 1) * pageSize).limit(pageSize).collect(Collectors.toList())
+        );
+    }
+
     @PostMapping("/save")
     public void save(@RequestBody SaveTestPlanRequest request) {
         System.out.println(String.format("save test plan: %s", request.getName()));
     }
 
+    @PostMapping("/delete")
+    public void delete(@RequestBody DeleteTestPlanRequest request) {
+        System.out.println(String.format("delete test plan: %s", request.getName()));
+    }
+
     @PostMapping("/file/upload")
     public void uploadJmx(MultipartFile file) throws IOException {
         fileService.upload(file.getOriginalFilename(), file);

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

@@ -0,0 +1,4 @@
+package io.metersphere.controller.request.testplan;
+
+public class DeleteTestPlanRequest extends TestPlanRequest {
+}

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

@@ -0,0 +1,4 @@
+package io.metersphere.controller.request.testplan;
+
+public class QueryTestPlanRequest extends TestPlanRequest {
+}

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

@@ -1,31 +1,4 @@
 package io.metersphere.controller.request.testplan;
 
-public class SaveTestPlanRequest {
+public class SaveTestPlanRequest extends TestPlanRequest {
-    private String fileId;
-    private String project;
-    private String name;
-
-    public String getFileId() {
-        return fileId;
-    }
-
-    public void setFileId(String fileId) {
-        this.fileId = fileId;
-    }
-
-    public String getProject() {
-        return project;
-    }
-
-    public void setProject(String project) {
-        this.project = project;
-    }
-
-    public String getName() {
-        return name;
-    }
-
-    public void setName(String name) {
-        this.name = name;
-    }
 }

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

@@ -0,0 +1,32 @@
+package io.metersphere.controller.request.testplan;
+
+public class TestPlanRequest {
+    private String fileId;
+    private String project;
+    private String name;
+
+    public String getFileId() {
+        return fileId;
+    }
+
+    public void setFileId(String fileId) {
+        this.fileId = fileId;
+    }
+
+    public String getProject() {
+        return project;
+    }
+
+    public void setProject(String project) {
+        this.project = project;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+}

backend/src/main/java/io/metersphere/dto/LoadTestDTO.java

@@ -0,0 +1,15 @@
+package io.metersphere.dto;
+
+import io.metersphere.base.domain.LoadTest;
+
+public class LoadTestDTO extends LoadTest {
+    private String projectName;
+
+    public String getProjectName() {
+        return projectName;
+    }
+
+    public void setProjectName(String projectName) {
+        this.projectName = projectName;
+    }
+}

frontend/src/performance/components/HeaderMenus.vue

@@ -20,6 +20,11 @@
     <el-submenu index="4" popper-class="submenu">
       <template slot="title">测试</template>
       <recent-test-plan/>
+      <el-divider/>
+      <el-menu-item index="/allTest">
+        <font-awesome-icon :icon="['fa', 'list-ul']"/>
+        <span style="padding-left: 5px;">所有测试</span>
+      </el-menu-item>
       <el-menu-item index="/createTest">
         <el-button type="text">创建测试</el-button>
       </el-menu-item>
@@ -59,3 +64,9 @@
     color: inherit;
   }
 </style>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 0;
+  }
+</style>

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

@@ -5,6 +5,7 @@ import Setting from "../settings/Setting";
 import Workspace from "../settings/Workspace";
 import User from "../settings/User";
 import CreateTestPlan from "../testPlan/CreateTestPlan";
+import AllTestPlan from "../testPlan/AllTestPlan";
 import Organization from "../settings/Organization";
 import WorkspaceUser from "../settings/WorkSpcaeUser";
 import TestResourcePool from "../settings/TestResourcePool";
@@ -59,6 +60,11 @@ const router = new VueRouter({
         content: CreateTestPlan
       }
     },
+    {
+      path: "/allTest", components: {
+        content: AllTestPlan
+      }
+    },
   ]
 });
 

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

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="22" :offset="1">
+        <el-table
+          stripe
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          style="width: 100%"
+          @selection-change="handleSelectionChange">
+          <el-table-column
+            type="selection"
+            width="55">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="名称">
+          </el-table-column>
+          <el-table-column
+            prop="description"
+            label="描述"
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            prop="projectName"
+            label="所属项目">
+          </el-table-column>
+          <el-table-column
+            label="创建时间">
+            <template slot-scope="scope">
+              <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="updateTime"
+            label="更新时间">
+            <template slot-scope="scope">
+              <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作">
+            <template slot-scope="scope">
+              <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
+              <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <div class="block">
+      <div class="block">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        queryPath: "/testplan/list",
+        deletePath: "/testplan/delete",
+        tableData: [],
+        multipleSelection: [],
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+      }
+    },
+    created: function () {
+      this.initTableData();
+    },
+    methods: {
+      initTableData() {
+        /// todo: 查询参数
+        let param = {};
+
+        this.$post(this.buildPagePath(this.queryPath), param).then(response => {
+          if (response.data.success) {
+            let data = response.data.data;
+            this.total = data.itemCount;
+            this.tableData = data.listObject;
+          } else {
+            this.$message.error(response.message);
+          }
+        })
+      },
+      buildPagePath(path) {
+        return path + "/" + this.currentPage + "/" + this.pageSize;
+      },
+      handleSizeChange(size) {
+        this.pageSize = size;
+        this.initTableData();
+      },
+      handleCurrentChange(current) {
+        this.currentPage = current;
+        this.initTableData();
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+      handleEdit(testPlan) {
+        /// todo: 跳到编辑页面
+        window.console.log(testPlan);
+      },
+      handleDelete(testPlan) {
+        this.$alert('确认删除测试: ' + testPlan.name + "？", '', {
+          confirmButtonText: '确定',
+          callback: () => {
+            this._handleDelete(testPlan);
+          }
+        });
+      },
+      _handleDelete(testPlan) {
+        let data = {
+          name: testPlan.name
+        };
+
+        this.$post(this.deletePath, data).then(response => {
+          if (response.data.success) {
+            this.$message({
+              message: '删除成功！',
+              type: 'success'
+            });
+          } else {
+            this.$message.error(response.message);
+          }
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .el-row {
+    background: white;
+  }
+</style>

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

@@ -98,7 +98,9 @@
         });
       },
       saveAndRun() {
-        window.console.log("saveAndRun");
+        if (!this.validTestPlan()) {
+          return;
+        }
 
         /// todo: saveAndRun
         this.$message({
@@ -106,6 +108,9 @@
           type: 'success'
         });
       },
+      cancel() {
+        this.$router.push({path: '/'})
+      },
       changeTestPlan(updateFunc) {
         updateFunc(this.testPlan);
         window.console.log(this.testPlan);
@@ -140,9 +145,6 @@
 
         /// todo: 其他校验
         return true;
-      },
-      cancel() {
-        this.$router.push({path: '/'})
       }
     }
   }