refactor: 重构测试计划-性能测试页面 (#4560)

Co-authored-by: chenjianxing <jianxing.chen@fit2cloud.com>
--bug=1004990 --user=陈建星 【测试计划】性能用例，全选没自动提示“批量操作” https://www.tapd.cn/55049933/s/1025064

frontend/src/business/components/track/plan/view/comonents/load/TestCaseLoadRelevance.vue

@@ -135,14 +135,6 @@ export default {
     planId() {
       this.condition.planId = this.planId;
     },
-    selectNodeIds() {
-      this.search();
-    },
-    projectId() {
-      this.condition.projectId = this.projectId;
-      this.getProjectNode();
-      this.search();
-    },
     reviewId() {
       this.condition.reviewId = this.reviewId;
     },
@@ -157,6 +149,9 @@ export default {
     },
     setProject(projectId) {
       this.projectId = projectId;
+      this.condition.projectId = this.projectId;
+      this.getProjectNode();
+      this.search();
     },
     saveCaseRelevance() {
       let param = {};
@@ -238,6 +233,7 @@ export default {
     nodeChange(node, nodeIds, nodeNames) {
       this.selectNodeIds = nodeIds;
       this.selectNodeNames = nodeNames;
+      this.search();
     },
     refresh() {
       this.close();

frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoadCaseList.vue

@@ -6,86 +6,70 @@
             :condition="condition"
             :plan-id="planId"
             @refresh="initTable"
-            @relevanceCase="$emit('relevanceCase')"
-        />
+            @relevanceCase="$emit('relevanceCase')"/>
       </template>
 
-      <el-table v-loading="result.loading" ref="table"
-                border
-                :data="tableData" row-key="id" class="test-content adjust-table ms-select-all-fixed"
-                @select-all="handleSelectAll"
-                @filter-change="filter"
-                @sort-change="sort"
-                @select="handleSelectionChange" :height="screenHeight">
-        <el-table-column width="50" type="selection"/>
-        <ms-table-header-select-popover v-show="total>0"
-                                        :page-size="pageSize > total ? total : pageSize"
-                                        :total="total"
-                                        :table-data-count-in-page="tableData.length"
-                                        @selectPageAll="isSelectDataAll(false)"
-                                        @selectAll="isSelectDataAll(true)"/>
-        <el-table-column min-width="40" :resizable="false" align="center">
-          <template v-slot:default="scope">
-            <show-more-btn :is-show-tool="scope.row.showTool" :is-show="scope.row.showMore && !isReadOnly"
-                           :buttons="buttons" :size="selectDataCounts"/>
-          </template>
-        </el-table-column>
-        <template v-for="(item, index) in tableLabel">
-          <el-table-column v-if="item.id == 'num'" prop="num" sortable min-width="80" label="ID" show-overflow-tooltip :key="index"/>
-          <el-table-column
-              v-if="item.id == 'caseName'"
-              prop="caseName"
-              :label="$t('commons.name')"
-              min-width="120"
-              sortable
-              show-overflow-tooltip
-              :key="index">
-          </el-table-column>
-          <el-table-column
-              v-if="item.id == 'projectName'"
-              prop="projectName"
-              min-width="120"
-              :label="$t('load_test.project_name')"
-              show-overflow-tooltip
-              :key="index">
-          </el-table-column>
-          <el-table-column
-              v-if="item.id == 'userName'"
-              prop="userName"
-              min-width="100"
-              :label="$t('load_test.user_name')"
-              show-overflow-tooltip
-              :key="index">
-          </el-table-column>
-          <el-table-column
-              v-if="item.id == 'createTime'"
-              sortable
-              prop="createTime"
-              min-width="160"
-              :label="$t('commons.create_time')"
-              :key="index">
-            <template v-slot:default="scope">
-              <span>{{ scope.row.createTime | timestampFormatDate }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-              v-if="item.id == 'status'"
-              prop="status"
-              column-key="status"
-              :filters="statusFilters"
-              :label="$t('commons.status')"
-              min-width="80"
-              :key="index">
+      <ms-table
+        v-loading="result.loading"
+        :data="tableData"
+        :condition="condition"
+        :total="total"
+        :page-size.sync="pageSize"
+        :operators="operators"
+        :screen-height="screenHeight"
+        :batch-operators="buttons"
+        @handlePageChange="initTable"
+        :fields.sync="fields"
+        :field-key="tableHeaderKey"
+        @refresh="initTable"
+        ref="table">
+        <span v-for="(item) in fields" :key="item.key">
+          <ms-table-column
+            :field="item"
+            :fields-width="fieldsWidth"
+            prop="num"
+            sortable
+            min-width="80"
+            label="ID"/>
+          <ms-table-column
+            :field="item"
+            :fields-width="fieldsWidth"
+            prop="caseName"
+            :label="$t('commons.name')"
+            min-width="120"
+            sortable>
+          </ms-table-column>
+          <ms-table-column
+            :field="item"
+            :fields-width="fieldsWidth"
+            prop="projectName"
+            min-width="120"
+            :label="$t('load_test.project_name')">
+          </ms-table-column>
+          <ms-table-column
+            :field="item"
+            :fields-width="fieldsWidth"
+            prop="userName"
+            min-width="100"
+            :label="$t('load_test.user_name')">
+          </ms-table-column>
+          <ms-table-column
+            :field="item"
+            :fields-width="fieldsWidth"
+            prop="status"
+            :filters="statusFilters"
+            :label="$t('commons.status')"
+            min-width="80">
             <template v-slot:default="{row}">
               <ms-performance-test-status :row="row"/>
             </template>
-          </el-table-column>
-          <el-table-column
-              v-if="item.id == 'caseStatus'"
-              min-width="100"
-              prop="caseStatus"
-              :label="$t('test_track.plan.load_case.execution_status')"
-              :key="index">
+          </ms-table-column>
+          <ms-table-column
+            :field="item"
+            :fields-width="fieldsWidth"
+            min-width="100"
+            prop="caseStatus"
+            :label="$t('test_track.plan.load_case.execution_status')">
             <template v-slot:default="{row}">
               <el-tag size="mini" type="danger" v-if="row.caseStatus === 'error'">
                 {{ row.caseStatus }}
@@ -98,13 +82,13 @@
               </el-tag>
               <span v-else>-</span>
             </template>
-          </el-table-column>
-          <el-table-column
-              v-if="item.id == 'loadReportId'"
-              :label="$t('test_track.plan.load_case.report')"
-              min-width="80"
-              show-overflow-tooltip
-              :key="index">
+          </ms-table-column>
+          <ms-table-column
+            :field="item"
+            :fields-width="fieldsWidth"
+            :label="$t('test_track.plan.load_case.report')"
+            prop="loadReportId"
+            min-width="80">
             <template v-slot:default="scope">
               <div v-loading="loading === scope.row.id">
                 <el-link type="info" @click="getReport(scope.row)" v-if="scope.row.loadReportId">
@@ -113,29 +97,14 @@
                 <span v-else> - </span>
               </div>
             </template>
-          </el-table-column>
-        </template>
-        <el-table-column v-if="!isReadOnly" fixed="right" min-width="100" :label="$t('commons.operating')" >
-          <template slot="header">
-            <header-label-operate @exec="customHeader"/>
-          </template>
-          <template v-slot:default="scope">
-            <div>
+          </ms-table-column>
+
+          <ms-update-time-column :field="item" :fields-width="fieldsWidth"/>
+          <ms-create-time-column :field="item" :fields-width="fieldsWidth"/>
+
+        </span>
+      </ms-table>
 
-              <ms-table-operator-button class="run-button"
-                                        v-permission="['PROJECT_TRACK_PLAN:READ+RUN']"
-                                        :tip="$t('api_test.run')"
-                                        icon="el-icon-video-play"
-                                        @exec="run(scope.row)"/>
-              <ms-table-operator-button v-permission="['PROJECT_TRACK_PLAN:READ+RELEVANCE_OR_CANCEL']"
-                                        :tip="$t('test_track.plan_view.cancel_relevance')"
-                                        icon="el-icon-unlock" type="danger" @exec="handleDelete(scope.row)"/>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <header-custom ref="headerCustom" :initTableData="initTable" :optionalFields=headerItems
-                     :type=type></header-custom>
       <ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
                            :total="total"/>
     </el-card>
@@ -148,61 +117,67 @@
 <script>
 import TestPlanLoadCaseListHeader
   from "@/business/components/track/plan/view/comonents/load/TestPlanLoadCaseListHeader";
-import ShowMoreBtn from "@/business/components/track/case/components/ShowMoreBtn";
 import MsTablePagination from "@/business/components/common/pagination/TablePagination";
 import MsPerformanceTestStatus from "@/business/components/performance/test/PerformanceTestStatus";
-import MsTableOperatorButton from "@/business/components/common/components/MsTableOperatorButton";
 import LoadCaseReport from "@/business/components/track/plan/view/comonents/load/LoadCaseReport";
 import {
-  _filter,
-  _handleSelect,
-  _handleSelectAll,
-  _sort,
-  getLabel,
-  getSelectDataCounts,
-  setUnSelectIds,
   buildBatchParam,
-  initCondition,
-  toggleAllSelection,
-  checkTableRowIsSelect, deepClone
+  checkTableRowIsSelect, getCustomTableHeader, getCustomTableWidth
 } from "@/common/js/tableUtils";
-import HeaderCustom from "@/business/components/common/head/HeaderCustom";
-import {TAPD, TEST_CASE_LIST, TEST_PLAN_LOAD_CASE} from "@/common/js/constants";
-import {Test_Plan_Load_Case, Track_Test_Case} from "@/business/components/common/model/JsonData";
+import {TEST_PLAN_LOAD_CASE} from "@/common/js/constants";
 import {getCurrentUser} from "@/common/js/utils";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
-import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
 import MsPlanRunMode from "../../../common/PlanRunMode";
+import MsTable from "@/business/components/common/components/table/MsTable";
+import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
+import MsCreateTimeColumn from "@/business/components/common/components/table/MsCreateTimeColumn";
+import MsUpdateTimeColumn from "@/business/components/common/components/table/MsUpdateTimeColumn";
 
 export default {
   name: "TestPlanLoadCaseList",
   components: {
+    MsUpdateTimeColumn,
+    MsCreateTimeColumn,
+    MsTableColumn,
+    MsTable,
     HeaderLabelOperate,
-    HeaderCustom,
     LoadCaseReport,
     TestPlanLoadCaseListHeader,
-    ShowMoreBtn,
     MsTablePagination,
     MsPerformanceTestStatus,
-    MsTableOperatorButton,
-    MsTableHeaderSelectPopover,
     MsPlanRunMode
   },
   data() {
     return {
       type: TEST_PLAN_LOAD_CASE,
-      headerItems: Test_Plan_Load_Case,
       tableLabel: [],
       condition: {},
       result: {},
       tableData: [],
-      selectRows: new Set(),
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      selectDataCounts: 0,
       status: 'default',
       screenHeight: 'calc(100vh - 250px)',//屏幕高度
+      tableHeaderKey:"TEST_PLAN_LOAD_CASE",
+      fields: getCustomTableHeader('TEST_PLAN_LOAD_CASE'),
+      fieldsWidth: getCustomTableWidth('TEST_PLAN_LOAD_CASE'),
+      operators: [
+        {
+          tip: this.$t('api_test.run'), icon: "el-icon-video-play",
+          exec: this.run,
+          class: 'run-button',
+          isDisable: this.isReadOnly,
+          permissions: ['PROJECT_TRACK_PLAN:READ+RUN']
+        },
+        {
+          tip: this.$t('test_track.plan_view.cancel_relevance'), icon: "el-icon-unlock",
+          exec: this.handleDelete,
+          type: 'danger',
+          isDisable: this.isReadOnly,
+          permissions: ['PROJECT_TRACK_PLAN:READ+RELEVANCE_OR_CANCEL']
+        }
+      ],
       buttons: [
         {
           name: this.$t('test_track.plan.load_case.unlink_in_bulk'), handleClick: this.handleDeleteBatch, permissions: ['PROJECT_TRACK_PLAN:READ+CASE_BATCH_DELETE']
@@ -256,13 +231,13 @@ export default {
           array.push(this.tableData[i]);
         }
       }
-      this.selectRows = array;
+      return array;
     },
     runBatch(config){
-      this.orderBySelectRows(this.selectRows);
+      let rows = this.orderBySelectRows(this.$refs.table.selectRows);
       if(this.condition != null && this.condition.selectAll){
         let selectAllRowParams = buildBatchParam(this);
-        selectAllRowParams.ids = Array.from(this.selectRows).map(row => row.id);
+        selectAllRowParams.ids = Array.from(rows).map(row => row.id);
         this.$post('/test/plan/load/case/selectAllTableRows', selectAllRowParams, response => {
           let dataRows = response.data;
           let runArr = [];
@@ -280,7 +255,7 @@ export default {
         });
       }else {
         let runArr = [];
-        this.selectRows.forEach(loadCase => {
+        rows.forEach(loadCase => {
           runArr.push( {
             id: loadCase.loadCaseId,
             testPlanLoadId: loadCase.id,
@@ -300,14 +275,8 @@ export default {
       this.initTable();
       this.refreshStatus();
     },
-
-    customHeader() {
-      const list = deepClone(this.tableLabel);
-      this.$refs.headerCustom.open(list);
-    },
     initTable() {
       this.autoCheckStatus();
-      this.selectRows = new Set();
       this.condition.testPlanId = this.planId;
       if (this.selectProjectId && this.selectProjectId !== 'root') {
         this.condition.projectId = this.selectProjectId;
@@ -329,10 +298,10 @@ export default {
           this.tableData = listObject;
           if (this.$refs.table) {
             setTimeout(this.$refs.table.doLayout, 200);
+            this.$nextTick(() => {
+              checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
+            });
           }
-          this.$nextTick(() => {
-            checkTableRowIsSelect(this,this.condition,this.tableData,this.$refs.table,this.selectRows);
-          })
         })
       }
       if (this.reviewId) {
@@ -344,14 +313,12 @@ export default {
           this.tableData = listObject;
           if (this.$refs.table) {
             setTimeout(this.$refs.table.doLayout, 200);
+            this.$nextTick(() => {
+              checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
+            });
           }
-          this.$nextTick(() => {
-            checkTableRowIsSelect(this,this.condition,this.tableData,this.$refs.table,this.selectRows);
-          })
         })
       }
-      getLabel(this, TEST_PLAN_LOAD_CASE);
-
     },
     autoCheckStatus() {
       if (!this.planId) {
@@ -367,33 +334,24 @@ export default {
         arr.length > 0 ? this.initTable() : clearInterval(this.refreshScheduler);
       }, 8000);
     },
-    handleSelectAll(selection) {
-      _handleSelectAll(this, selection, this.tableData, this.selectRows);
-      setUnSelectIds(this.tableData, this.condition, this.selectRows);
-      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
-    },
-    handleSelectionChange(selection, row) {
-      _handleSelect(this, selection, row, this.selectRows);
-      setUnSelectIds(this.tableData, this.condition, this.selectRows);
-      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
-    },
     handleDeleteBatch() {
       this.$alert(this.$t('test_track.plan_view.confirm_cancel_relevance') + "？", '', {
         confirmButtonText: this.$t('commons.confirm'),
         callback: (action) => {
           if (action === 'confirm') {
-            let ids = Array.from(this.selectRows).map(row => row.id);
+            let ids = this.$refs.table.selectIds;
             if (this.planId) {
               let param = buildBatchParam(this);
+              param.ids = ids;
               this.result = this.$post('/test/plan/load/case/batch/delete', param, () => {
-                this.selectRows.clear();
+                this.clear();
                 this.initTable();
                 this.$success(this.$t('test_track.cancel_relevance_success'));
               });
             }
             if (this.reviewId) {
               this.result = this.$post('/test/review/load/case/batch/delete', ids, () => {
-                this.selectRows.clear();
+                this.clear();
                 this.initTable();
                 this.$success(this.$t('test_track.cancel_relevance_success'));
               });
@@ -402,6 +360,11 @@ export default {
         }
       })
     },
+    clear() {
+      if (this.$refs.table) {
+        this.$refs.table.clear();
+      }
+    },
     handleRunBatch() {
       this.$refs.runMode.open();
     },
@@ -442,18 +405,6 @@ export default {
         this.initTable();
       });
     },
-    sort(column) {
-      // 每次只对一个字段排序
-      if (this.condition.orders) {
-        this.condition.orders = [];
-      }
-      _sort(column, this.condition);
-      this.initTable();
-    },
-    filter(filters) {
-      _filter(filters, this.condition);
-      this.initTable();
-    },
     getReport(data) {
       const {loadReportId} = data;
       this.reportId = loadReportId;
@@ -476,20 +427,8 @@ export default {
         clearInterval(this.refreshScheduler);
       }
     },
-    isSelectDataAll(data) {
-      this.condition.selectAll = data;
-      //设置勾选
-      toggleAllSelection(this.$refs.table, this.tableData, this.selectRows);
-      //显示隐藏菜单
-      _handleSelectAll(this, this.tableData, this.tableData, this.selectRows);
-      //设置未选择ID(更新)
-      this.condition.unSelectIds = [];
-      //更新统计信息
-      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
-    },
   },
   beforeDestroy() {
-    console.log('beforeDestroy')
     this.cancelRefresh();
   },
 }