fix(测试跟踪): 切换每页数量拖拽顺序失效

--bug=1010533 --user=陈建星 【测试跟踪】-所有用例列表的拖拽功能不好使了 https://www.tapd.cn/55049933/s/1110050

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

@@ -2,41 +2,51 @@
   <div v-if="tableActive">
     <el-table
       border
+      class="test-content adjust-table ms-table"
+      v-loading="tableIsLoading"
       :data="data"
+      :default-sort="defaultSort"
+      :class="{'ms-select-all-fixed': showSelectAll}"
+      :height="screenHeight"
+      :row-key="rowKey"
+      :row-class-name="tableRowClassName"
+      :cell-class-name="addPaddingColClass"
+      :highlight-current-row="highlightCurrentRow"
       @sort-change="sort"
       @filter-change="filter"
       @select-all="handleSelectAll"
       @select="handleSelect"
       @header-dragend="headerDragend"
       @cell-mouse-enter="showPopover"
-      :default-sort="defaultSort"
+      @row-click="handleRowClick"
-      class="test-content adjust-table ms-table"
+      ref="table">
-      :class="{'ms-select-all-fixed': showSelectAll}"
-      :height="screenHeight"
-      v-loading="tableIsLoading"
-      :row-key="rowKey"
-      :row-class-name="tableRowClassName"
-      :cell-class-name="addPaddingColClass"
-      :highlight-current-row="highlightCurrentRow"
-      ref="table" @row-click="handleRowClick">
 
-      <el-table-column v-if="enableSelection" width="50" type="selection"/>
+      <el-table-column
+        v-if="enableSelection"
+        width="50"
+        type="selection"/>
 
-      <ms-table-header-select-popover v-if="enableSelection && showSelectAll" ref="selectPopover"
+      <ms-table-header-select-popover v-if="enableSelection && showSelectAll"
                                       :page-size="pageSize > total ? total : pageSize"
                                       :table-data-count-in-page="data.length"
                                       :total="total"
                                       :select-type="condition.selectAll"
                                       @selectPageAll="isSelectDataAll(false)"
-                                      @selectAll="isSelectDataAll(true)"/>
+                                      @selectAll="isSelectDataAll(true)"
+                                      ref="selectPopover"/>
 
-      <el-table-column v-if="enableSelection && batchOperators && batchOperators.length > 0" width="15"
+      <el-table-column v-if="enableSelection && batchOperators && batchOperators.length > 0"
+                       width="15"
                        fixed="left"
                        column-key="batchBtnCol"
-                       :resizable="false" align="center">
+                       align="center"
+                       :resizable="false">
+
         <template v-slot:default="scope">
           <!-- 选中记录后浮现的按钮，提供对记录的批量操作 -->
-          <show-more-btn :has-showed="!scope.row.showBatchTip" :is-show="scope.row.showMore" :buttons="batchOperators"
+          <show-more-btn :has-showed="!scope.row.showBatchTip"
+                         :is-show="scope.row.showMore"
+                         :buttons="batchOperators"
                          :size="selectDataCounts"/>
         </template>
       </el-table-column>
@@ -47,9 +57,12 @@
         </template>
       </el-table-column>
 
-      <el-table-column v-if="enableOrderDrag" width="20" column-key="tableRowDropCol">
+      <!--   拖拽排序   -->
+      <el-table-column
+        v-if="enableOrderDrag"
+        width="20"
+        column-key="tableRowDropCol">
         <template v-slot:default="scope">
-<!--          <span class="table-row-drop-bar">-->
           <div class="table-row-drop-bar">
              <i class="el-icon-more ms-icon-more"/>
              <i class="el-icon-more ms-icon-more"/>
@@ -61,17 +74,30 @@
 
       <el-table-column
         v-if="operators && operators.length > 0"
-        :min-width="operatorWidth"
         fixed="right"
+        :min-width="operatorWidth"
         :label="$t('commons.operating')">
         <template slot="header">
-          <header-label-operate :disable-header-config="disableHeaderConfig" v-if="fieldKey" @exec="openCustomHeader"/>
+          <header-label-operate
+            v-if="fieldKey"
+            :disable-header-config="disableHeaderConfig"
+            @exec="openCustomHeader"/>
         </template>
-        <template v-slot:default="scope">
+        <template
+          v-slot:default="scope">
           <div>
-            <slot name="opt-before" :row="scope.row"></slot>
+            <slot
-            <ms-table-operators :buttons="operators" :row="scope.row" :index="scope.$index"/>
+              name="opt-before"
-            <slot name="opt-behind" :row="scope.row"></slot>
+              :row="scope.row">
+            </slot>
+            <ms-table-operators
+              :buttons="operators"
+              :row="scope.row"
+              :index="scope.$index"/>
+            <slot
+              name="opt-behind"
+              :row="scope.row">
+            </slot>
           </div>
         </template>
       </el-table-column>
@@ -79,9 +105,9 @@
 
     <ms-custom-table-header
       v-if="fieldKey"
-      @reload="resetHeader"
       :type="fieldKey"
       :custom-fields="customFields"
+      @reload="resetHeader"
       ref="customTableHeader"/>
 
   </div>
@@ -91,11 +117,17 @@
 import {
   _filter,
   _handleSelect,
-  _handleSelectAll, _sort,
+  _handleSelectAll,
+  _sort,
   getSelectDataCounts,
   setUnSelectIds,
   toggleAllSelection,
-  checkTableRowIsSelect, getCustomTableHeader, saveCustomTableWidth, saveLastTableSortField, handleRowDrop,
+  checkTableRowIsSelect,
+  getCustomTableHeader,
+  saveCustomTableWidth,
+  saveLastTableSortField,
+  handleRowDrop,
+  clearShareDragParam,
 } from "@/common/js/tableUtils";
 import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
 import MsTablePagination from "@/business/components/common/pagination/TablePagination";
@@ -234,6 +266,11 @@ export default {
     selectNodeIds() {
       this.selectDataCounts = 0;
     },
+    enableOrderDrag() {
+      if (!this.enableOrderDrag) {
+        clearShareDragParam();
+      }
+    },
     // 刷新列表后做统一处理
     data(newVar, oldVar) {
       // 不知为何，勾选选择框也会进到这里，但是这种情况 newVar === oldVar
@@ -285,6 +322,7 @@ export default {
         }
       }
     },
+    // 拖拽排序
     listenRowDrop() {
       if (this.rowOrderGroupId) {
         handleRowDrop(this.data, (param) => {

frontend/src/common/js/tableUtils.js

@@ -563,6 +563,16 @@ export function getCustomFieldBatchEditOption(customFields, typeArr, valueArr, m
   });
 }
 
+
+// 多个监听共享变量
+// 否则切换 pageSize 等刷新操作会导致部分行的回调函数中 data 数据不一致
+let shareDragParam = {};
+
+// 清除 shareDragParam ，减少内存占用
+export function clearShareDragParam() {
+  shareDragParam.data = null;
+}
+
 export function handleRowDrop(data, callback) {
   setTimeout(() => {
     const tbody = document.querySelector('.el-table__body-wrapper tbody');
@@ -581,6 +591,8 @@ export function handleRowDrop(data, callback) {
       dropBars[i].classList.add(dropClass);
     }
 
+    shareDragParam.data = data;
+
     Sortable.create(tbody, {
       handle: "." + dropClass,
       animation: 100,
@@ -594,24 +606,24 @@ export function handleRowDrop(data, callback) {
       },
       onEnd({ newIndex, oldIndex}) {
         let param = {};
-        param.moveId = data[oldIndex].id;
+        param.moveId = shareDragParam.data[oldIndex].id;
         if (newIndex === 0) {
           param.moveMode = 'BEFORE';
-          param.targetId = data[0].id;
+          param.targetId = shareDragParam.data[0].id;
         } else {
           // 默认从后面添加
           param.moveMode = 'AFTER';
           if (newIndex < oldIndex) {
             // 如果往前拖拽，则添加到当前下标的前一个元素后面
-            param.targetId = data[newIndex - 1].id;
+            param.targetId = shareDragParam.data[newIndex - 1].id;
           } else {
             // 如果往后拖拽，则添加到当前下标的元素后面
-            param.targetId = data[newIndex].id;
+            param.targetId = shareDragParam.data[newIndex].id;
           }
         }
-        if (data && data.length > 1 && newIndex != oldIndex) {
+        if (shareDragParam.data && shareDragParam.data.length > 1 && newIndex !== oldIndex) {
-          const currRow = data.splice(oldIndex, 1)[0];
+          const currRow = shareDragParam.data.splice(oldIndex, 1)[0];
-          data.splice(newIndex, 0, currRow);
+          shareDragParam.data.splice(newIndex, 0, currRow);
           if (callback) {
             callback(param);
           }