refactor(性能测试): 优化性能测试报告页面的批量操作

backend/src/main/java/io/metersphere/performance/controller/request/DeleteReportRequest.java

@@ -1,13 +1,13 @@
 package io.metersphere.performance.controller.request;
 
-import lombok.Getter;
+import io.metersphere.track.request.testplancase.TestPlanFuncCaseConditions;
-import lombok.Setter;
+import lombok.Data;
 
 import java.util.List;
 
-@Getter
+@Data
-@Setter
 public class DeleteReportRequest {
-
     private List<String> ids;
+    private String projectId;
+    private TestPlanFuncCaseConditions condition;
 }

backend/src/main/java/io/metersphere/performance/service/PerformanceReportService.java

@@ -347,11 +347,20 @@ public class PerformanceReportService {
         loadTestReportMapper.updateByPrimaryKeySelective(report);
     }
 
-    public void deleteReportBatch(DeleteReportRequest reportRequest) {
+    public void deleteReportBatch(DeleteReportRequest request) {
-        List<String> ids = reportRequest.getIds();
+        ServiceUtils.getSelectAllIds(request, request.getCondition(),
+                (query) -> getLoadTestReportIds(request.getProjectId()));
+
+        List<String> ids = request.getIds();
         ids.forEach(this::deleteReport);
     }
 
+    private List<String> getLoadTestReportIds(String projectId) {
+        ReportRequest request = new ReportRequest();
+        request.setProjectId(projectId);
+        return this.getReportList(request).stream().map(LoadTestReport::getId).collect(Collectors.toList());
+    }
+
     public List<ChartsData> getErrorChartData(String id) {
         if (isReportError(id)) {
             return Collections.emptyList();

frontend/src/business/components/performance/report/PerformanceTestReportList.vue

@@ -6,22 +6,24 @@
           <ms-table-header :condition.sync="condition" @search="search"
                            :show-create="false"/>
         </template>
-
+        <ms-table
-        <el-table v-loading="result.loading"
+          v-loading="result.loading"
-                  border :data="tableData" class="adjust-table test-content"
+          :data="tableData"
-                  @select-all="handleSelectAll"
+          :condition="condition"
-                  @select="handleSelect"
+          :page-size="pageSize"
-                  @sort-change="sort"
+          :total="total"
-                  @filter-change="filter"
+          :operators="operators"
-                  :height="screenHeight"
+          :screenHeight="screenHeight"
-        >
+          :field-key="tableHeaderKey"
-          <el-table-column
+          :remember-order="true"
-            type="selection"/>
+          row-key="id"
-          <el-table-column width="40" :resizable="false" align="center">
+          :row-order-group-id="projectId"
-            <template v-slot:default="scope">
+          :batch-operators="buttons"
-              <show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectRows.size"/>
+          operator-width="130px"
-            </template>
+          :screen-height="screenHeight"
-          </el-table-column>
+          @refresh="search"
+          :disable-header-config="true"
+          ref="table">
           <el-table-column
             prop="testName"
             :label="$t('report.test_name')"
@@ -113,22 +115,7 @@
               <ms-performance-report-status :row="row"/>
             </template>
           </el-table-column>
-          <el-table-column
+        </ms-table>
-            min-width="130"
-            :label="$t('commons.operating')">
-            <template v-slot:default="scope">
-              <ms-table-operator-button :tip="$t('api_report.detail')" icon="el-icon-s-data"
-                                        v-permission="['PROJECT_PERFORMANCE_REPORT:READ']"
-                                        @exec="handleView(scope.row)" type="primary"/>
-              <ms-table-operator-button :tip="$t('load_test.report.diff')" icon="el-icon-s-operation"
-                                        v-permission="['PROJECT_PERFORMANCE_REPORT:READ+COMPARE']"
-                                        @exec="handleDiff(scope.row)" type="warning"/>
-              <ms-table-operator-button :tip="$t('api_report.delete')"
-                                        v-permission="['PROJECT_PERFORMANCE_REPORT:READ+DELETE']"
-                                        icon="el-icon-delete" @exec="handleDelete(scope.row)" type="danger"/>
-            </template>
-          </el-table-column>
-        </el-table>
         <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
                              :total="total"/>
       </el-card>
@@ -150,15 +137,17 @@ import ReportTriggerModeItem from "../../common/tableItem/ReportTriggerModeItem"
 import {REPORT_CONFIGS} from "../../common/components/search/search-components";
 import MsTableHeader from "../../common/components/MsTableHeader";
 import ShowMoreBtn from "../../track/case/components/ShowMoreBtn";
-import {_filter, _sort, getLastTableSortField, saveLastTableSortField} from "@/common/js/tableUtils";
+import {_filter, _sort, buildBatchParam, getLastTableSortField, saveLastTableSortField} from "@/common/js/tableUtils";
 import MsDialogFooter from "@/business/components/common/components/MsDialogFooter";
 import SameTestReports from "@/business/components/performance/report/components/SameTestReports";
 import MsRenameReportDialog from "@/business/components/common/components/report/MsRenameReportDialog";
 import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
+import MsTable from "@/business/components/common/components/table/MsTable";
 
 export default {
   name: "PerformanceTestReportList",
   components: {
+    MsTable,
     SameTestReports,
     MsDialogFooter,
     MsTableHeader,
@@ -188,7 +177,6 @@ export default {
       },
       projectId: null,
       tableData: [],
-      multipleSelection: [],
       currentPage: 1,
       pageSize: 10,
       total: 0,
@@ -216,6 +204,28 @@ export default {
           name: this.$t('report.batch_delete'), handleClick: this.handleBatchDelete
         }
       ],
+      operators: [
+        {
+          tip: this.$t('api_report.detail'),
+          icon: "el-icon-s-data",
+          exec: this.handleView,
+          type: 'primary',
+          permissions: ['PROJECT_PERFORMANCE_REPORT:READ']
+        },
+        {
+          tip: this.$t('load_test.report.diff'),
+          icon: "el-icon-s-operation",
+          type: "warning",
+          exec: this.handleDiff,
+          permissions: ['PROJECT_PERFORMANCE_REPORT:READ+COMPARE']
+        }, {
+          tip: this.$t('commons.delete'),
+          icon: "el-icon-delete",
+          type: "danger",
+          exec: this.handleDelete,
+          permissions: ['PROJECT_PERFORMANCE_REPORT:READ+DELETE']
+        }
+      ],
       selectRows: new Set(),
       versionFilters: [],
       versionOptions: [],
@@ -303,9 +313,6 @@ export default {
     buildPagePath(path) {
       return path + "/" + this.currentPage + "/" + this.pageSize;
     },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
     handleRename(report) {
       this.$prompt(this.$t('commons.input_name'), '', {
         confirmButtonText: this.$t('commons.confirm'),
@@ -366,45 +373,19 @@ export default {
       _filter(filters, this.condition);
       this.initTableData();
     },
-    handleSelect(selection, row) {
-      if (this.selectRows.has(row)) {
-        this.$set(row, "showMore", false);
-        this.selectRows.delete(row);
-      } else {
-        this.$set(row, "showMore", true);
-        this.selectRows.add(row);
-      }
-    },
     saveSortField(key, orders) {
       saveLastTableSortField(key, JSON.stringify(orders));
     },
-    handleSelectAll(selection) {
-      if (selection.length > 0) {
-        this.tableData.forEach(item => {
-          this.$set(item, "showMore", true);
-          this.selectRows.add(item);
-        });
-      } else {
-        this.selectRows.clear();
-        this.tableData.forEach(row => {
-          this.$set(row, "showMore", false);
-        });
-      }
-    },
     handleBatchDelete() {
       this.$alert(this.$t('report.delete_batch_confirm') + "？", '', {
         confirmButtonText: this.$t('commons.confirm'),
         callback: (action) => {
           if (action === 'confirm') {
-            let ids = [];
+            let param = buildBatchParam(this, this.$refs.table.selectIds);
-            this.selectRows.forEach(row => {
+            this.result = this.$post("/performance/report/batch/delete", param, () => {
-              ids.push(row.id);
+              this.$success(this.$t('commons.delete_success'));
-            });
-            this.result = this.$post("/performance/report/batch/delete", {ids: ids}, () => {
               this.initTableData();
             });
-
-            this.$success(this.$t('commons.delete_success'));
           }
         },
       });