fix(接口测试): 消息中心加载优化增加分页处理
This commit is contained in:
fit2-zhao
fit2-zhao
parent
3213aeddea
commit
8107390b0f
|
|
@ -48,7 +48,7 @@
|
|||
and t.user_id = #{request.executor}
|
||||
</if>
|
||||
)
|
||||
)tt ORDER BY tt.executionTime DESC;
|
||||
)tt ORDER BY tt.executionTime DESC
|
||||
</select>
|
||||
|
||||
<select id="getCases" resultType="io.metersphere.task.dto.TaskCenterDTO" parameterType="java.lang.String">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
package io.metersphere.task.controller;
|
||||
|
||||
import com.github.pagehelper.Page;
|
||||
import com.github.pagehelper.PageHelper;
|
||||
import io.metersphere.commons.utils.PageUtils;
|
||||
import io.metersphere.commons.utils.Pager;
|
||||
import io.metersphere.task.dto.TaskCenterDTO;
|
||||
import io.metersphere.task.dto.TaskCenterRequest;
|
||||
import io.metersphere.task.service.TaskService;
|
||||
|
|
@ -15,10 +19,14 @@ public class TaskController {
|
|||
@Resource
|
||||
private TaskService taskService;
|
||||
|
||||
@PostMapping("/list")
|
||||
@PostMapping("/list/{goPage}/{pageSize}")
|
||||
@RequiresPermissions("PROJECT_API_SCENARIO:READ")
|
||||
public List<TaskCenterDTO> getTasks(@RequestBody TaskCenterRequest request) {
|
||||
return taskService.getTasks(request);
|
||||
public Pager<List<TaskCenterDTO>> getTasks(@PathVariable int goPage, @PathVariable int pageSize, @RequestBody TaskCenterRequest request) {
|
||||
request.setGoPage(goPage);
|
||||
request.setPageSize(pageSize);
|
||||
Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
|
||||
return PageUtils.setPageInfo(page, taskService.getTasks(request));
|
||||
// return taskService.getTasks(request);
|
||||
}
|
||||
|
||||
@GetMapping("/case/{id}")
|
||||
|
|
|
|||
|
|
@ -18,4 +18,7 @@ public class TaskCenterRequest {
|
|||
* 执行人
|
||||
*/
|
||||
private String executor;
|
||||
|
||||
private int goPage;
|
||||
private int pageSize;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<div v-permission="['PROJECT_API_SCENARIO:READ']">
|
||||
<el-menu v-if="showMenu"
|
||||
:unique-opened="true"
|
||||
class="header-user-menu align-right header-top-menu"
|
||||
mode="horizontal"
|
||||
:background-color="color"
|
||||
text-color="#fff"
|
||||
active-text-color="#fff">
|
||||
<div v-permission="['PROJECT_API_SCENARIO:READ','WORKSPACE_USER:READ']">
|
||||
<el-menu
|
||||
v-if="showMenu"
|
||||
:unique-opened="true"
|
||||
class="header-user-menu align-right header-top-menu"
|
||||
mode="horizontal"
|
||||
:background-color="color"
|
||||
text-color="#fff"
|
||||
active-text-color="#fff">
|
||||
<el-menu-item onselectstart="return false">
|
||||
<el-tooltip effect="light">
|
||||
<template v-slot:content>
|
||||
|
|
@ -14,8 +15,7 @@
|
|||
</template>
|
||||
<div @click="showTaskCenter" v-if="runningTotal > 0">
|
||||
<el-badge :value="runningTotal" class="item" type="primary">
|
||||
<font-awesome-icon class="icon global focusing" :icon="['fas', 'tasks']"
|
||||
style="font-size: 18px"/>
|
||||
<font-awesome-icon class="icon global focusing" :icon="['fas', 'tasks']" style="font-size: 18px"/>
|
||||
</el-badge>
|
||||
</div>
|
||||
<font-awesome-icon @click="showTaskCenter" class="icon global focusing" :icon="['fas', 'tasks']" v-else/>
|
||||
|
|
@ -23,11 +23,16 @@
|
|||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<el-drawer :visible.sync="taskVisible" :destroy-on-close="true" direction="rtl"
|
||||
:withHeader="true" :modal="false" :title="$t('commons.task_center')" :size="size.toString()"
|
||||
custom-class="ms-drawer-task">
|
||||
<el-drawer
|
||||
:visible.sync="taskVisible"
|
||||
:destroy-on-close="true"
|
||||
direction="rtl"
|
||||
:withHeader="true"
|
||||
:modal="false"
|
||||
:title="$t('commons.task_center')"
|
||||
:size="size.toString()"
|
||||
custom-class="ms-drawer-task">
|
||||
<el-card style="float: left;width: 850px" v-if="size > 550 ">
|
||||
|
||||
<div class="ms-task-opt-btn" @click="packUp">收起</div>
|
||||
<!-- 接口用例结果 -->
|
||||
<ms-request-result-tail :response="response" ref="debugResult" v-if="reportType === 'API'"/>
|
||||
|
|
@ -35,9 +40,9 @@
|
|||
<ms-api-report-detail :reportId="reportId" v-if="reportType === 'SCENARIO'"/>
|
||||
|
||||
<performance-report-view :perReportId="reportId" v-if="reportType === 'PERFORMANCE'"/>
|
||||
|
||||
</el-card>
|
||||
<el-card style="width: 550px;float: right">
|
||||
|
||||
<el-card style="width: 550px;float: right" v-loading="loading">
|
||||
<div style="color: #2B415C;margin: 0px 20px 0px;">
|
||||
<el-form label-width="68px" class="ms-el-form-item">
|
||||
<el-row>
|
||||
|
|
@ -78,48 +83,49 @@
|
|||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-divider direction="horizontal" style="width: 100%"/>
|
||||
|
||||
<div class="report-container">
|
||||
<div v-for="item in taskData" :key="item.id" style="margin-bottom: 5px">
|
||||
<div v-for="item in taskData" :key="item.id" style="margin-bottom: 5px;">
|
||||
<el-card class="ms-card-task" @click.native="showReport(item)">
|
||||
<span class="ms-task-name-width"><el-link type="primary">
|
||||
{{ getModeName(item.executionModule) }} </el-link>: {{ item.name }} </span>
|
||||
<el-button size="mini" class="ms-task-stop" @click.stop @click="stop(item)"
|
||||
v-if="showStop(item.executionStatus)">
|
||||
<span class="ms-task-name-width"><el-link type="primary">
|
||||
{{ getModeName(item.executionModule) }} </el-link>: {{ item.name }}
|
||||
</span>
|
||||
<el-button size="mini" class="ms-task-stop" @click.stop @click="stop(item)" v-if="showStop(item.executionStatus)">
|
||||
{{ $t('report.stop_btn') }}
|
||||
</el-button>
|
||||
<br/>
|
||||
<span>
|
||||
执行器：{{ item.actuator }} 由 {{ item.executor }}
|
||||
{{ item.executionTime | timestampFormatDate }}
|
||||
{{ getMode(item.triggerMode) }}
|
||||
</span>
|
||||
执行器：{{ item.actuator }} 由 {{ item.executor }} {{ item.executionTime | timestampFormatDate }} {{ getMode(item.triggerMode) }}
|
||||
</span>
|
||||
<br/>
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-progress :percentage="getPercentage(item.executionStatus)" :format="format"/>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<span v-if="item.executionStatus && item.executionStatus.toLowerCase() === 'error'"
|
||||
class="ms-task-error">
|
||||
<span v-if="item.executionStatus && item.executionStatus.toLowerCase() === 'error'" class="ms-task-error">
|
||||
error
|
||||
</span>
|
||||
<span v-else-if="item.executionStatus && item.executionStatus.toLowerCase() === 'success'"
|
||||
class="ms-task-success">
|
||||
success
|
||||
</span>
|
||||
<span v-else-if="item.executionStatus && item.executionStatus.toLowerCase() === 'stop'">
|
||||
stopped
|
||||
<span v-else-if="item.executionStatus && item.executionStatus.toLowerCase() === 'success'" class="ms-task-success">
|
||||
success
|
||||
</span>
|
||||
<span v-else-if="item.executionStatus && item.executionStatus.toLowerCase() === 'stop'">
|
||||
stopped
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ item.executionStatus ? item.executionStatus.toLowerCase() : item.executionStatus }}
|
||||
</span>
|
||||
<span v-else>{{
|
||||
item.executionStatus ? item.executionStatus.toLowerCase() : item.executionStatus
|
||||
}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="report-bottom">
|
||||
<ms-table-pagination :change="init" :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total" small/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -127,14 +133,14 @@
|
|||
<script>
|
||||
import MsDrawer from "../common/components/MsDrawer";
|
||||
import {getCurrentProjectID, getCurrentUser, hasPermissions} from "@/common/js/utils";
|
||||
|
||||
export default {
|
||||
name: "MsTaskCenter",
|
||||
components: {
|
||||
MsDrawer,
|
||||
MsRequestResultTail: () => import("../../components/api/definition/components/response/RequestResultTail"),
|
||||
MsApiReportDetail: () => import("../../components/api/automation/report/ApiReportDetail"),
|
||||
PerformanceReportView: () => import("../../components/performance/report/PerformanceReportView")
|
||||
PerformanceReportView: () => import("../../components/performance/report/PerformanceReportView"),
|
||||
MsTablePagination: () => import("./TaskPagination"),
|
||||
},
|
||||
inject: [
|
||||
'reload'
|
||||
|
|
@ -144,11 +150,15 @@ export default {
|
|||
runningTotal: 0,
|
||||
taskVisible: false,
|
||||
result: {},
|
||||
loading: false,
|
||||
taskData: [],
|
||||
response: {},
|
||||
initEnd: false,
|
||||
visible: false,
|
||||
showType: "",
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
runMode: [
|
||||
{id: '', label: this.$t('api_test.definition.document.data_set.all')},
|
||||
{id: 'BATCH', label: this.$t('api_test.automation.batch_execute')},
|
||||
|
|
@ -181,6 +191,11 @@ export default {
|
|||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
return this.loading
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (hasPermissions('PROJECT_API_SCENARIO:READ')) {
|
||||
this.condition.executor = getCurrentUser().id;
|
||||
|
|
@ -194,6 +209,10 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
nextData() {
|
||||
this.loading = true;
|
||||
this.init();
|
||||
},
|
||||
format(item) {
|
||||
return '';
|
||||
},
|
||||
|
|
@ -245,6 +264,8 @@ export default {
|
|||
onError(e) {
|
||||
},
|
||||
onMessage(e) {
|
||||
this.currentPage = 1;
|
||||
this.loading = false;
|
||||
let taskTotal = e.data;
|
||||
this.runningTotal = taskTotal;
|
||||
this.initIndex++;
|
||||
|
|
@ -267,6 +288,7 @@ export default {
|
|||
this.visible = false;
|
||||
this.size = 550;
|
||||
this.showType = "";
|
||||
this.currentPage = 1;
|
||||
if (this.websocket && this.websocket.close instanceof Function) {
|
||||
this.websocket.close();
|
||||
}
|
||||
|
|
@ -274,6 +296,8 @@ export default {
|
|||
open() {
|
||||
this.showTaskCenter();
|
||||
this.initIndex = 0;
|
||||
this.noMore = false;
|
||||
this.currentPage = 1;
|
||||
},
|
||||
getPercentage(status) {
|
||||
if (status) {
|
||||
|
|
@ -376,12 +400,13 @@ export default {
|
|||
if (this.showType === "CASE" || this.showType === "SCENARIO") {
|
||||
return;
|
||||
}
|
||||
this.result.loading = true;
|
||||
this.condition.projectId = getCurrentProjectID();
|
||||
this.result = this.$post('/task/center/list', this.condition, response => {
|
||||
this.taskData = response.data;
|
||||
this.result = this.$post('/task/center/list/' + this.currentPage + '/' + this.pageSize, this.condition, response => {
|
||||
this.total = response.data.itemCount;
|
||||
this.taskData = response.data.listObject;
|
||||
this.calculationRunningTotal();
|
||||
this.initEnd = true;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
initCaseHistory(id) {
|
||||
|
|
@ -416,21 +441,16 @@ export default {
|
|||
color: #44b349;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.report-container {
|
||||
height: calc(100vh - 180px);
|
||||
min-height: 550px;
|
||||
height: calc(100vh - 270px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
/deep/ .el-drawer__header {
|
||||
font-size: 18px;
|
||||
color: #0a0a0a;
|
||||
|
|
@ -439,79 +459,63 @@ export default {
|
|||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ms-card-task >>> .el-card__body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.global {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header-top-menu {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.header-top-menu.el-menu--horizontal > li {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.header-top-menu.el-menu--horizontal > li.el-submenu > * {
|
||||
height: 39px;
|
||||
line-height: 40px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.header-top-menu.el-menu--horizontal > li.is-active {
|
||||
background: var(--color_shallow) !important;
|
||||
}
|
||||
|
||||
.ms-card-task:hover {
|
||||
cursor: pointer;
|
||||
border-color: #783887;
|
||||
}
|
||||
|
||||
/deep/ .el-progress-bar {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/deep/ .el-menu-item {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-badge__content.is-fixed {
|
||||
top: 25px;
|
||||
}
|
||||
|
||||
/deep/ .el-badge__content {
|
||||
border-radius: 10px;
|
||||
height: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ms-task-error {
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.ms-task-stop {
|
||||
color: #F56C6C;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.ms-task-success {
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.ms-task-name-width {
|
||||
display: inline-block;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -521,11 +525,9 @@ export default {
|
|||
white-space: nowrap;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.ms-el-form-item >>> .el-form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.ms-task-opt-btn {
|
||||
position: fixed;
|
||||
right: 1372px;
|
||||
|
|
@ -545,17 +547,17 @@ export default {
|
|||
font-weight: bold;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.ms-task-opt-btn i {
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.ms-task-opt-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ms-task-opt-btn:hover i {
|
||||
margin-left: 0;
|
||||
color: white;
|
||||
}
|
||||
.report-bottom {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<el-row type="flex" justify="end">
|
||||
<div class="table-page">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="pageSizes"
|
||||
:page-size="pageSize"
|
||||
:page-count="5"
|
||||
small
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MsTaskPagination",
|
||||
props: {
|
||||
page: Object,
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
pageSizes: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [5, 10, 20, 50, 100]
|
||||
}
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
change: Function
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange: function (size) {
|
||||
this.$emit('update:pageSize', size)
|
||||
this.change();
|
||||
},
|
||||
handleCurrentChange(current) {
|
||||
this.$emit('update:currentPage', current)
|
||||
this.change();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-page {
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue