refactor: mstable 代码优化

frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue

@@ -18,6 +18,8 @@
         operator-width="200"
         :enable-order-drag="enableOrderDrag"
         row-key="id"
+        :row-order-group-id="condition.projectId"
+        :row-order-func="editApiScenarioCaseOrder"
         @refresh="search(projectId)"
         @callBackSelectAll="callBackSelectAll"
         @callBackSelect="callBackSelect"
@@ -244,7 +246,7 @@ import {downloadFile, getCurrentProjectID, getUUID, strMapToObj} from "@/common/
 import {API_SCENARIO_CONFIGS} from "@/business/components/common/components/search/search-components";
 import {API_SCENARIO_LIST} from "../../../../../common/js/constants";
 
-import {getCustomTableHeader, getCustomTableWidth, getLastTableSortField, handleRowDrop} from "@/common/js/tableUtils";
+import {getCustomTableHeader, getCustomTableWidth, getLastTableSortField} from "@/common/js/tableUtils";
 import {API_SCENARIO_FILTERS} from "@/common/js/table-constants";
 import {scenario} from "@/business/components/track/plan/event-bus";
 import MsTable from "@/business/components/common/components/table/MsTable";
@@ -552,6 +554,9 @@ export default {
     isNotRunning() {
       return "Running" !== this.report.status;
     },
+    editApiScenarioCaseOrder() {
+      return editApiScenarioCaseOrder;
+    }
   },
   methods: {
     getProjectName() {
@@ -618,20 +623,6 @@ export default {
               item.tags = JSON.parse(item.tags);
             }
           });
-
-          this.$nextTick(() => {
-            handleRowDrop(this.tableData, (param) => {
-              param.groupId = this.condition.projectId;
-              editApiScenarioCaseOrder(param);
-            });
-
-            if (this.$refs.scenarioTable) {
-              this.$refs.scenarioTable.clear();
-              this.$refs.scenarioTable.doLayout();
-            }
-
-          });
-
           this.$emit('getTrashCase');
         });
       }

frontend/src/business/components/api/automation/scenario/api/RelevanceApiList.vue

@@ -283,13 +283,6 @@
             }
           });
           this.genProtocalFilter(this.condition.protocol);
-          this.$nextTick(function () {
-            if (this.$refs.apitable) {
-              this.$refs.apitable.doLayout();
-              this.$refs.apitable.checkTableRowIsSelect();
-              this.$refs.apitable.clear();
-            }
-          });
         });
       },
 

frontend/src/business/components/api/automation/scenario/api/RelevanceCaseList.vue

@@ -221,13 +221,6 @@ export default {
             item.tags = JSON.parse(item.tags);
           }
         });
-        this.$nextTick(function () {
-          if (this.$refs.table) {
-            this.$refs.table.doLayout();
-            this.$refs.table.checkTableRowIsSelect();
-            this.$refs.table.clear();
-          }
-        });
       });
     },
     clear() {

frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue

@@ -23,6 +23,8 @@
         :fields.sync="fields"
         :field-key="tableHeaderKey"
         :remember-order="true"
+        :row-order-group-id="condition.projectId"
+        :row-order-func="editApiTestCaseOrder"
         :enable-order-drag="enableOrderDrag"
         row-key="id"
         operator-width="190px"
@@ -225,7 +227,6 @@ import {
   getCustomTableHeader,
   getCustomTableWidth,
   getLastTableSortField,
-  handleRowDrop
 } from "@/common/js/tableUtils";
 import {API_CASE_LIST} from "@/common/js/constants";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
@@ -453,6 +454,9 @@ export default {
     },
     selectRows() {
       return this.$refs.caseTable.getSelectRows();
+    },
+    editApiTestCaseOrder() {
+      return editApiTestCaseOrder;
     }
   },
   methods: {
@@ -586,17 +590,6 @@ export default {
               isNext = true;
             }
           });
-
-          this.$nextTick(() => {
-            if (this.$refs.caseTable) {
-              this.$refs.caseTable.clear();
-            }
-            handleRowDrop(this.tableData, (param) => {
-              param.groupId = this.condition.projectId;
-              editApiTestCaseOrder(param);
-            });
-          })
-
         });
       }
     },

frontend/src/business/components/api/definition/components/list/ApiList.vue

@@ -15,6 +15,8 @@
         :remember-order="true"
         @refresh="initTable"
         :fields.sync="fields"
+        :row-order-func="editApiDefinitionOrder"
+        :row-order-group-id="condition.projectId"
         :table-is-loading="this.result.loading"
         :field-key="tableHeaderKey"
         :enable-order-drag="enableOrderDrag"
@@ -208,12 +210,10 @@ import MsTipButton from "@/business/components/common/components/MsTipButton";
 import CaseBatchMove from "@/business/components/api/definition/components/basis/BatchMove";
 import {
   initCondition,
-  getCustomTableHeader, getCustomTableWidth, buildBatchParam, checkTableRowIsSelected,
+  getCustomTableHeader, getCustomTableWidth, buildBatchParam, getLastTableSortField
-  saveLastTableSortField, getLastTableSortField, handleRowDrop
 } from "@/common/js/tableUtils";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
 import {Body} from "@/business/components/api/definition/model/ApiTestModel";
-import {buildNodePath} from "@/business/components/api/definition/model/NodeTree";
 import {editApiDefinitionOrder} from "@/network/api";
 
 
@@ -420,6 +420,9 @@ export default {
       } else {
         return this.$t('api_test.definition.api_type');
       }
+    },
+    editApiDefinitionOrder() {
+      return editApiDefinitionOrder;
     }
   },
   created: function () {
@@ -474,7 +477,7 @@ export default {
       initCondition(this.condition, false);
       this.closeCaseModel();
       this.initTable();
-    }
+    },
   },
   methods: {
     getProjectName() {
@@ -548,18 +551,6 @@ export default {
               item.tags = JSON.parse(item.tags);
             }
           });
-
-          checkTableRowIsSelected(this, this.$refs.table);
-
-          this.$nextTick(() => {
-            if (this.$refs.table) {
-              this.$refs.table.clear();
-            }
-            handleRowDrop(this.tableData, (param) => {
-              param.groupId = this.condition.projectId;
-              editApiDefinitionOrder(param);
-            });
-          })
         });
       }
       if (this.needRefreshModule()) {

frontend/src/business/components/common/components/table/MsTable.vue

@@ -94,7 +94,7 @@ import {
   getSelectDataCounts,
   setUnSelectIds,
   toggleAllSelection,
-  checkTableRowIsSelect, getCustomTableHeader, saveCustomTableWidth, saveLastTableSortField,
+  checkTableRowIsSelect, getCustomTableHeader, saveCustomTableWidth, saveLastTableSortField, handleRowDrop,
 } from "@/common/js/tableUtils";
 import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
 import MsTablePagination from "@/business/components/common/pagination/TablePagination";
@@ -105,6 +105,7 @@ import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOpe
 import HeaderCustom from "@/business/components/common/head/HeaderCustom";
 import MsCustomTableHeader from "@/business/components/common/components/table/MsCustomTableHeader";
 import {lineToHump} from "@/common/js/utils";
+import {editTestCaseOrder} from "@/network/testCase";
 
 /**
  * 参考 ApiList
@@ -219,6 +220,9 @@ export default {
     rememberOrder: Boolean,
     enableOrderDrag: Boolean,
     rowKey: [String, Function],
+    // 自定义排序，需要传资源所属的项目id或者测试计划id，并且传排序的方法
+    rowOrderGroupId: String,
+    rowOrderFunc: Function
   },
   mounted() {
     this.setDefaultOrders();
@@ -226,6 +230,18 @@ export default {
   watch: {
     selectNodeIds() {
       this.selectDataCounts = 0;
+    },
+    // 刷新列表后做统一处理
+    data(newVar, oldVar) {
+      // 不知为何，勾选选择框也会进到这里，但是这种情况 newVar === oldVar
+      if (newVar !== oldVar) {
+        this.$nextTick(() => {
+          this.clear();
+          this.doLayout();
+          this.checkTableRowIsSelect();
+          this.listenRowDrop();
+        });
+      }
     }
   },
   methods: {
@@ -255,6 +271,16 @@ export default {
         }
       }
     },
+    listenRowDrop() {
+      if (this.rowOrderGroupId) {
+        handleRowDrop(this.data, (param) => {
+          param.groupId = this.rowOrderGroupId;
+          if (this.rowOrderFunc) {
+            this.rowOrderFunc(param);
+          }
+        });
+      }
+    },
     isScrollShow(column, tableTop){  //判断元素是否因为超过表头
       let columnTop = column.getBoundingClientRect().top;
       return columnTop - tableTop > 30;

frontend/src/business/components/performance/test/PerformanceTestList.vue

@@ -19,6 +19,8 @@
           :remember-order="true"
           :enable-order-drag="enableOrderDrag"
           row-key="id"
+          :row-order-group-id="projectId"
+          :row-order-func="editLoadTestCaseOrder"
           operator-width="190px"
           :screen-height="screenHeight"
           :enable-selection="false"
@@ -104,7 +106,7 @@ import MsTableOperators from "../../common/components/MsTableOperators";
 import {getCurrentProjectID, getCurrentWorkspaceId} from "@/common/js/utils";
 import MsTableHeader from "../../common/components/MsTableHeader";
 import {TEST_CONFIGS} from "../../common/components/search/search-components";
-import {getLastTableSortField, handleRowDrop} from "@/common/js/tableUtils";
+import {getLastTableSortField} from "@/common/js/tableUtils";
 import MsTable from "@/business/components/common/components/table/MsTable";
 import {editLoadTestCaseOrder} from "@/network/load-test";
 
@@ -172,8 +174,13 @@ export default {
       this.initTableData();
     }
   },
+  computed: {
+    editLoadTestCaseOrder() {
+      return editLoadTestCaseOrder;
+    }
+  },
   created: function () {
-    this.projectId = this.$route.params.projectId;
+    this.projectId = getCurrentProjectID();
     this.initTableData();
     this.getMaintainerOptions();
   },
@@ -203,16 +210,6 @@ export default {
             this.$set(test, 'reportCount', response.data);
           });
         });
-
-        this.$nextTick(() => {
-          handleRowDrop(this.tableData, (param) => {
-            param.groupId = getCurrentProjectID();
-            editLoadTestCaseOrder(param);
-          });
-          if (this.$refs.table) {
-            this.$refs.table.clear();
-          }
-        });
       });
     },
     search(combine) {

frontend/src/business/components/track/case/components/TestCaseList.vue

@@ -17,6 +17,8 @@
       :remember-order="true"
       :enable-order-drag="enableOrderDrag"
       row-key="id"
+      :row-order-group-id="projectId"
+      :row-order-func="editTestCaseOrder"
       @handlePageChange="initTableData"
       @handleRowClick="handleEdit"
       :fields.sync="fields"
@@ -202,13 +204,12 @@ import ReviewStatus from "@/business/components/track/case/components/ReviewStat
 import MsTag from "@/business/components/common/components/MsTag";
 import {
   buildBatchParam,
-  checkTableRowIsSelected,
   deepClone,
   getCustomFieldBatchEditOption,
   getCustomFieldValue,
   getCustomTableWidth, getLastTableSortField,
   getPageInfo,
-  getTableHeaderWithCustomFields, handleRowDrop,
+  getTableHeaderWithCustomFields,
   initCondition,
 } from "@/common/js/tableUtils";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
@@ -384,6 +385,9 @@ export default {
     },
     systemFiledMap() {
       return SYSTEM_FIELD_NAME_MAP;
+    },
+    editTestCaseOrder() {
+      return editTestCaseOrder;
     }
   },
   created: function () {
@@ -579,12 +583,6 @@ export default {
           let data = response.data;
           this.page.total = data.itemCount;
           this.page.data = data.listObject;
-          if (this.$refs.table) {
-            this.$refs.table.clear();
-            this.$nextTick(() => {
-              this.$refs.table.doLayout();
-            });
-          }
           this.page.data.forEach(item => {
             if (item.customFields) {
               item.customFields = JSON.parse(item.customFields);
@@ -598,21 +596,9 @@ export default {
             }
 
           });
-          checkTableRowIsSelected(this, this.$refs.table);
-
-          this.handleRowDrop();
-
         });
       }
     },
-    handleRowDrop() {
-      this.$nextTick(() => {
-        handleRowDrop(this.page.data, (param) => {
-          param.groupId = this.projectId;
-          editTestCaseOrder(param);
-        });
-      });
-    },
     search() {
       this.initTableData();
     },

frontend/src/business/components/track/case/components/TestCaseLoadRelate.vue

@@ -48,7 +48,6 @@ export default {
     open() {
       this.init();
       this.$refs.baseRelevance.open();
-      this.$refs.apiCaseList.clear();
     },
     init() {
       if (this.$refs.apiCaseList) {

frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiCaseList.vue

@@ -25,6 +25,8 @@
         :fields.sync="fields"
         :field-key="tableHeaderKey"
         @refresh="initTable"
+        :row-order-group-id="planId"
+        :row-order-func="editTestPlanApiCaseOrder"
         :enable-order-drag="enableOrderDrag"
         row-key="id"
         ref="table">
@@ -174,7 +176,7 @@ import TestPlanApiCaseResult from "./TestPlanApiCaseResult";
 import {TEST_PLAN_API_CASE} from "@/common/js/constants";
 import {
   buildBatchParam,
-  checkTableRowIsSelect, deepClone, getCustomTableHeader, getCustomTableWidth, handleRowDrop,
+  checkTableRowIsSelect, deepClone, getCustomTableHeader, getCustomTableWidth,
 } from "@/common/js/tableUtils";
 import HeaderCustom from "@/business/components/common/head/HeaderCustom";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
@@ -341,6 +343,9 @@ export default {
     isApiModel() {
       return this.model === 'api';
     },
+    editTestPlanApiCaseOrder() {
+      return editTestPlanApiCaseOrder;
+    }
   },
   methods: {
     customHeader() {
@@ -386,14 +391,6 @@ export default {
               item.tags = JSON.parse(item.tags);
             }
           });
-
-          if (this.$refs.table) {
-            this.$refs.table.clear();
-            setTimeout(this.$refs.table.doLayout, 200);
-            this.$nextTick(() => {
-              checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
-            });
-          }
         });
       }
       if (this.planId) {
@@ -406,25 +403,9 @@ export default {
               item.tags = JSON.parse(item.tags);
             }
           });
-          if (this.$refs.table) {
-            this.$refs.table.clear();
-            setTimeout(this.$refs.table.doLayout, 200);
-            this.$nextTick(() => {
-              checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
-            });
-          }
-          this.handleRowDrop();
         });
       }
     },
-    handleRowDrop() {
-      this.$nextTick(() => {
-        handleRowDrop(this.tableData, (param) => {
-          param.groupId = this.planId;
-          editTestPlanApiCaseOrder(param);
-        });
-      });
-    },
     search() {
       this.initTable();
     },

frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiScenarioList.vue

@@ -21,6 +21,8 @@
         :field-key="tableHeaderKey"
         :enable-order-drag="enableOrderDrag"
         row-key="id"
+        :row-order-func="editTestPlanScenarioCaseOrder"
+        :row-order-group-id="planId"
         @refresh="search"
         ref="table">
         <span v-for="(item) in fields" :key="item.key">
@@ -180,8 +182,7 @@ import MsTestPlanList from "../../../../../api/automation/scenario/testplan/Test
 import TestPlanScenarioListHeader from "./TestPlanScenarioListHeader";
 import {
   initCondition,
-  buildBatchParam,
+  buildBatchParam, getCustomTableHeader, getCustomTableWidth
-  checkTableRowIsSelect, getCustomTableHeader, getCustomTableWidth, handleRowDrop
 } from "../../../../../../../common/js/tableUtils";
 import {TEST_PLAN_SCENARIO_CASE} from "@/common/js/constants";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
@@ -290,6 +291,9 @@ export default {
     projectId() {
       return getCurrentProjectID();
     },
+    editTestPlanScenarioCaseOrder() {
+      return editTestPlanScenarioCaseOrder;
+    }
   },
   created() {
     this.search();
@@ -344,20 +348,6 @@ export default {
             }
           })
           this.loading = false;
-
-          handleRowDrop(this.tableData, (param) => {
-            param.groupId = this.planId;
-            editTestPlanScenarioCaseOrder(param);
-          });
-
-
-          if (this.$refs.table) {
-            this.$refs.table.selectRows.clear();
-            setTimeout(this.$refs.table.doLayout, 200);
-            this.$nextTick(() => {
-              checkTableRowIsSelect(this, this.condition, this.tableData, this.$refs.table, this.$refs.table.selectRows);
-            });
-          }
         });
       }
       if (this.reviewId) {
@@ -373,12 +363,6 @@ export default {
             }
           });
           this.loading = false;
-          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);
-            });
-          }
         });
       }
     },

frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue

@@ -34,6 +34,8 @@
       :fields.sync="fields"
       :remember-order="true"
       @refresh="initTableData"
+      :row-order-group-id="planId"
+      :row-order-func="editTestPlanTestCaseOrder"
       :enable-order-drag="enableOrderDrag"
       row-key="id"
       ref="table">
@@ -269,9 +271,9 @@ import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 import {hub} from "@/business/components/track/plan/event-bus";
 import MsTag from "@/business/components/common/components/MsTag";
 import {
-  buildBatchParam, checkTableRowIsSelected,
+  buildBatchParam,
   getCustomFieldValue, getCustomTableWidth, getLastTableSortField,
-  getTableHeaderWithCustomFields, handleRowDrop,
+  getTableHeaderWithCustomFields,
   initCondition,
 } from "@/common/js/tableUtils";
 import MsTable from "@/business/components/common/components/table/MsTable";
@@ -394,6 +396,11 @@ export default {
       type: Array
     },
   },
+  computed: {
+    editTestPlanTestCaseOrder() {
+      return editTestPlanTestCaseOrder;
+    }
+  },
   watch: {
     planId() {
       this.refreshTableAndPlan();
@@ -486,17 +493,6 @@ export default {
               this.$set(this.tableData[i], "issuesContent", JSON.parse(this.tableData[i].issues));
             }
           }
-
-          this.$nextTick(() => {
-            handleRowDrop(this.tableData, (param) => {
-              param.groupId = this.planId;
-              editTestPlanTestCaseOrder(param);
-            });
-          });
-          if (this.$refs.table) {
-            this.$refs.table.clear();
-          }
-          checkTableRowIsSelected(this, this.$refs.table);
         });
       }
     },

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

@@ -23,6 +23,8 @@
         :field-key="tableHeaderKey"
         :enable-order-drag="enableOrderDrag"
         row-key="id"
+        :row-order-group-id="planId"
+        :row-order-func="editTestPlanLoadCaseOrder"
         @refresh="initTable"
         ref="table">
         <span v-for="(item) in fields" :key="item.key">
@@ -124,8 +126,7 @@ import MsTablePagination from "@/business/components/common/pagination/TablePagi
 import MsPerformanceTestStatus from "@/business/components/performance/test/PerformanceTestStatus";
 import LoadCaseReport from "@/business/components/track/plan/view/comonents/load/LoadCaseReport";
 import {
-  buildBatchParam,
+  buildBatchParam, getCustomTableHeader, getCustomTableWidth
-  checkTableRowIsSelect, getCustomTableHeader, getCustomTableWidth, handleRowDrop
 } from "@/common/js/tableUtils";
 import {TEST_PLAN_LOAD_CASE} from "@/common/js/constants";
 import {getCurrentProjectID, getCurrentUser, getCurrentUserId} from "@/common/js/utils";
@@ -223,6 +224,11 @@ export default {
     reviewId: String,
     clickType: String,
   },
+  computed: {
+    editTestPlanLoadCaseOrder() {
+      return editTestPlanLoadCaseOrder;
+    }
+  },
   created() {
     this.initTable();
     this.refreshStatus();
@@ -316,19 +322,6 @@ export default {
           let {itemCount, listObject} = data;
           this.total = itemCount;
           this.tableData = listObject;
-
-          this.$nextTick(() => {
-            handleRowDrop(this.tableData, (param) => {
-              param.groupId = this.planId;
-              editTestPlanLoadCaseOrder(param);
-            });
-          });
-          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);
-            });
-          }
         })
       }
       if (this.reviewId) {
@@ -338,12 +331,6 @@ export default {
           let {itemCount, listObject} = data;
           this.total = itemCount;
           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);
-            });
-          }
         })
       }
     },

frontend/src/business/components/track/report/components/TestPlanReportList.vue

@@ -86,7 +86,7 @@ import {
   _filter,
   _handleSelect,
   _handleSelectAll,
-  _sort, checkTableRowIsSelect,
+  _sort,
   getSelectDataCounts,
   initCondition,
   setUnSelectIds, toggleAllSelection,saveLastTableSortField,getLastTableSortField
@@ -173,12 +173,6 @@ export default {
         let data = response.data;
         this.total = data.itemCount;
         this.tableData = data.listObject;
-        if (this.$refs.testPlanReportTable) {
-          // setTimeout(this.$refs.testPlanReportTable,200);
-        }
-        this.$nextTick(() => {
-          checkTableRowIsSelect(this,this.condition,this.tableData,this.$refs.testPlanReportTable,this.selectRows);
-        });
       });
     },
     buildPagePath(path) {

frontend/src/business/components/track/review/view/components/TestReviewTestCaseList.vue

@@ -170,7 +170,7 @@ import TestReviewTestCaseEdit from "./TestReviewTestCaseEdit";
 import ReviewStatus from "@/business/components/track/case/components/ReviewStatus";
 import {
   _handleSelectAll,
-  buildBatchParam, checkTableRowIsSelected, deepClone, getCustomTableWidth, getLastTableSortField,
+  buildBatchParam, deepClone, getCustomTableWidth, getLastTableSortField,
   getSelectDataCounts, getTableHeaderWithCustomFields,
   initCondition,
   toggleAllSelection
@@ -328,7 +328,6 @@ export default {
           this.total = data.itemCount;
           this.tableData = data.listObject;
           this.tableClear();
-          checkTableRowIsSelected(this, this.$refs.table);
         });
       }