测试列表的分页实现

This commit is contained in:
haifeng414 2020-02-13 18:24:38 +08:00
parent b7e76ccedc
commit 416553217a
10 changed files with 271 additions and 36 deletions

View File

@ -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.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.*;
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);

View File

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

View File

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

View File

@ -1,31 +1,4 @@
package io.metersphere.controller.request.testplan;
public class SaveTestPlanRequest {
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;
}
public class SaveTestPlanRequest extends TestPlanRequest {
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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
}
},
]
});

View File

@ -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>

View File

@ -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: '/'})
}
}
}