feat(测试跟踪): 测试计划关联用例列表支持记住跨页选择的记录

--story=1010820 --user=郭雨琦
https://www.tapd.cn/55049933/prong/stories/view/1155049933001010820=worktable_title

framework/sdk-parent/frontend/src/components/environment/snippet/ext/ApiTableList.vue

@@ -9,6 +9,9 @@
     <ms-table :data="tableData" :select-node-ids="selectNodeIds" :condition="condition" :page-size="pageSize"
               :total="total" enableSelection @selectCountChange="selectCountChange"
               :screenHeight="screenHeight"
+              row-key="id"
+              :reserve-option="true"
+              :page-refresh="pageRefresh"
               operator-width="170px"
               @order="initTable"
               @filter="search"
@@ -103,7 +106,7 @@
         :label="$t('api_test.definition.api_case_number')"/>
 
     </ms-table>
-    <ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
+    <ms-table-pagination :change="pageChange" :current-page.sync="currentPage" :page-size.sync="pageSize"
                          :total="total"/>
 
   </span>
@@ -165,6 +168,7 @@ export default {
       currentPage: 1,
       pageSize: 10,
       versionEnable: false,
+      pageRefresh: false,
     };
   },
   props: {
@@ -190,12 +194,17 @@ export default {
   },
   watch: {
     currentProtocol() {
+      this.pageRefresh = false;
       this.getProtocolFilter();
     },
     projectId() {
+      this.pageRefresh = false;
       this.checkVersionEnable();
       this.getUserFilter();
-    }
+    },
+    selectNodeIds() {
+      this.pageRefresh = false;
+    },
   },
   mounted() {
     if (this.$refs.apitable) {
@@ -235,7 +244,11 @@ export default {
       this.currentPage = 1;
       this.initTable();
     },
-    initTable() {
+    pageChange() {
+      this.initTable("page");
+    },
+    initTable(data) {
+      this.pageRefresh = data === "page";
       this.$emit('refreshTable');
     },
     clear() {

framework/sdk-parent/frontend/src/components/table/MsTable.vue

@@ -27,7 +27,9 @@
       @row-click="handleRowClick"
       ref="table"
     >
-      <el-table-column v-if="enableSelection" width="50" type="selection" />
+      <el-table-column v-if="enableSelection && !reserveOption" width="50" type="selection"/>
+
+      <el-table-column v-if="enableSelection && reserveOption" width="50" type="selection" reserve-selection/>
 
       <ms-table-header-select-popover
         v-if="enableSelection && showSelectAll && !hidePopover"
@@ -254,7 +256,22 @@ export default {
       default() {
         return true;
       },
-    }, //开启全选
+    },
+    //开启保留前一页的选项的功能，注意需要与row-key搭配使用，否则不生效
+    reserveOption: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    },
+    //是否是翻页的刷新，当reserveOption为true时，引用列表页需要在翻页的时候使该属性为true，用以避免clear
+    pageRefresh: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    },
+    //开启全选
     showSelectAll: {
       type: Boolean,
       default() {
@@ -306,7 +323,9 @@ export default {
       if (newVar !== oldVar) {
         this.$nextTick(() => {
           this.setDefaultOrders();
-          this.clear();
+          if (!this.pageRefresh) {
+            this.clear();
+          }
           this.doLayout();
           this.checkTableRowIsSelect();
           this.listenRowDrop();

test-track/frontend/src/business/plan/view/comonents/api/RelevanceScenarioList.vue

@@ -39,6 +39,8 @@
       :total="total"
       :remember-order="true"
       row-key="id"
+      :reserve-option="true"
+      :page-refresh="pageRefresh"
       :row-order-group-id="projectId"
       @order="search"
       @filter="filterSearch"
@@ -145,7 +147,7 @@
       />
     </ms-table>
     <ms-table-pagination
-      :change="search"
+      :change="pageChange"
       :current-page.sync="currentPage"
       :page-size.sync="pageSize"
       :total="total"
@@ -228,6 +230,7 @@ export default {
       environmentType: ENV_TYPE.JSON,
       envGroupId: "",
       versionFilters: [],
+      pageRefresh: false
     };
   },
   computed: {
@@ -257,7 +260,11 @@ export default {
       this.currentPage = 1;
       this.search();
     },
-    search() {
+    pageChange() {
+      this.search("page");
+    },
+    search(data) {
+      this.pageRefresh = data === "page";
       this.projectEnvMap.clear();
       this.projectIds.clear();
       if (!this.projectId) {
@@ -358,7 +365,7 @@ export default {
       this.selectRows = this.$refs.scenarioTable.selectRows;
       this.initProjectIds();
       this.$emit("selectCountChange", data);
-    },
+    }
   },
 };
 </script>

test-track/frontend/src/business/plan/view/comonents/functional/FunctionalRelevance.vue

@@ -32,6 +32,9 @@
       :total="page.total"
       :page-size.sync="page.pageSize"
       :screen-height="screenHeight"
+      row-key="id"
+      :reserve-option="true"
+      :page-refresh="pageRefresh"
       @handlePageChange="getTestCases"
       @selectCountChange="setSelectCounts"
       @order="getTestCases"
@@ -94,7 +97,7 @@
 
     </ms-table>
 
-    <ms-table-pagination :change="getTestCases" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize"
+    <ms-table-pagination :change="pageChange" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize"
                          :total="page.total"/>
   </test-case-relevance-base>
 
@@ -172,6 +175,7 @@ export default {
       ],
       versionFilters: null,
       testCaseTemplate: {},
+      pageRefresh: false
     };
   },
   props: {
@@ -253,7 +257,8 @@ export default {
       this.getTestCases();
       this.getProjectNode(this.projectId, this.page.condition);
     },
-    getTestCases() {
+    getTestCases(data) {
+      this.pageRefresh = data === "page";
       let condition = this.page.condition;
       if (this.selectNodeIds && this.selectNodeIds.length > 0) {
         condition.nodeIds = this.selectNodeIds;
@@ -265,6 +270,9 @@ export default {
         this.getTableData();
       }
     },
+    pageChange() {
+      this.getTestCases("page")
+    },
     saveCaseRelevance(item) {
       this.isSaving = true;
       let param = {};
@@ -311,7 +319,7 @@ export default {
         this.testCaseTemplate = data;
         this.page.condition.components = initTestCaseConditionComponents(this.page.condition, this.testCaseTemplate.customFields);
       });
-    },
+    }
   }
 };
 </script>

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

@@ -23,6 +23,8 @@
       :total="total"
       :remember-order="true"
       row-key="id"
+      :reserve-option="true"
+      :page-refresh="pageRefresh"
       :row-order-group-id="projectId"
       @order="getTestCases"
       @filter="search"
@@ -81,7 +83,7 @@
         </template>
       </el-table-column>
     </ms-table>
-    <ms-table-pagination :change="getTestCases" :current-page.sync="currentPage" :page-size.sync="pageSize"
+    <ms-table-pagination :change="pageChange" :current-page.sync="currentPage" :page-size.sync="pageSize"
                          :total="total"/>
 
   </test-case-relevance-base>
@@ -147,6 +149,7 @@ export default {
         {text: 'Error', value: 'Error'}
       ],
       versionFilters: null,
+      pageRefresh: false
     };
   },
   props: {
@@ -218,7 +221,11 @@ export default {
       this.testCases = [];
       this.getTestCases(true);
     },
-    getTestCases() {
+    pageChange() {
+      this.getTestCases("page");
+    },
+    getTestCases(data) {
+      this.pageRefresh = data === "page";
       if (this.planId) {
         this.condition.testPlanId = this.planId;
         this.condition.projectId = this.projectId;
@@ -231,9 +238,6 @@ export default {
             this.testCases = data.listObject;
 
             this.selectIds.clear();
-            if (this.$refs.table) {
-              this.$refs.table.clearSelection();
-            }
           });
       }
     },

test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue

@@ -16,6 +16,8 @@
               :total="total"
               :remember-order="true"
               row-key="id"
+              :reserve-option="true"
+              :page-refresh="pageRefresh"
               :row-order-group-id="projectId"
               @order="search"
               @filter="filterSearch"
@@ -76,7 +78,7 @@
       <ms-table-column prop="passRate" :label="$t('api_test.automation.passing_rate')"
                        show-overflow-tooltip/>
     </ms-table>
-    <ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize"
+    <ms-table-pagination :change="pageChange" :current-page.sync="currentPage" :page-size.sync="pageSize"
                          :total="total"/>
   </div>
 </template>
@@ -147,6 +149,7 @@ export default {
       envGroupId: "",
       versionFilters: [],
       fieldsWidth: getCustomTableWidth('TEST_PLAN_UI_SCENARIO_CASE'),
+      pageRefresh: false
     };
   },
   computed: {
@@ -176,7 +179,11 @@ export default {
       this.currentPage = 1;
       this.search();
     },
-    search() {
+    pageChange() {
+      this.search("page");
+    },
+    search(data) {
+      this.pageRefresh = data === "page";
       this.projectEnvMap.clear();
       if (!this.projectId) {
         return;