fix(接口测试): 消息中心加载优化增加分页处理

backend/src/main/java/io/metersphere/base/mapper/ext/ExtTaskMapper.xml

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

backend/src/main/java/io/metersphere/task/controller/TaskController.java

@@ -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) {
+    public Pager<List<TaskCenterDTO>> getTasks(@PathVariable int goPage, @PathVariable int pageSize, @RequestBody TaskCenterRequest request) {
-        return taskService.getTasks(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}")

backend/src/main/java/io/metersphere/task/dto/TaskCenterRequest.java

@@ -18,4 +18,7 @@ public class TaskCenterRequest {
      * 执行人
      */
     private String executor;
+
+    private int goPage;
+    private int pageSize;
 }

frontend/src/business/components/task/TaskCenter.vue

@@ -1,12 +1,13 @@
 <template>
-  <div v-permission="['PROJECT_API_SCENARIO:READ']">
+  <div v-permission="['PROJECT_API_SCENARIO:READ','WORKSPACE_USER:READ']">
-    <el-menu v-if="showMenu"
+    <el-menu
-             :unique-opened="true"
+      v-if="showMenu"
-             class="header-user-menu align-right header-top-menu"
+      :unique-opened="true"
-             mode="horizontal"
+      class="header-user-menu align-right header-top-menu"
-             :background-color="color"
+      mode="horizontal"
-             text-color="#fff"
+      :background-color="color"
-             active-text-color="#fff">
+      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']"
+              <font-awesome-icon class="icon global focusing" :icon="['fas', 'tasks']" style="font-size: 18px"/>
-                                 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"
+    <el-drawer
-               :withHeader="true" :modal="false" :title="$t('commons.task_center')" :size="size.toString()"
+      :visible.sync="taskVisible"
-               custom-class="ms-drawer-task">
+      :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">
+              <span class="ms-task-name-width"><el-link type="primary">
-              {{ getModeName(item.executionModule) }} </el-link>: {{ item.name }} </span>
+                {{ getModeName(item.executionModule) }} </el-link>: {{ item.name }}
-              <el-button size="mini" class="ms-task-stop" @click.stop @click="stop(item)"
+              </span>
-                         v-if="showStop(item.executionStatus)">
+              <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.actuator }} 由 {{ item.executor }} {{ item.executionTime | timestampFormatDate }} {{ getMode(item.triggerMode) }}
-              {{ item.executionTime | timestampFormatDate }}
+              </span>
-              {{ 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'"
+                  <span v-if="item.executionStatus && item.executionStatus.toLowerCase() === 'error'" class="ms-task-error">
-                        class="ms-task-error">
                      error
                   </span>
-                  <span v-else-if="item.executionStatus && item.executionStatus.toLowerCase() === 'success'"
+                  <span v-else-if="item.executionStatus && item.executionStatus.toLowerCase() === 'success'" class="ms-task-success">
-                        class="ms-task-success">
+                       success
-                     success
+                  </span>
-                </span>
+                  <span v-else-if="item.executionStatus && item.executionStatus.toLowerCase() === 'stop'">
-                  <span v-else-if="item.executionStatus && item.executionStatus.toLowerCase() === 'stop'">
+                      stopped
-                    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.result = this.$post('/task/center/list/' + this.currentPage + '/' + this.pageSize, this.condition, response => {
-        this.taskData = response.data;
+        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);
+  height: calc(100vh - 270px);
-  min-height: 550px;
   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>

frontend/src/business/components/task/TaskPagination.vue

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