标签交换优化

src/views/collect/index.vue

@@ -381,7 +381,7 @@ const reTabName = async () => {
 const rowDrop = () => {
   const el = document.querySelector(".tabSign .el-tabs__nav"); //找到想要拖拽的那一列
   // console.log('el',el);
-  const _this = toRaw(JSON.parse(JSON.stringify(tabList.value)));//否则下面遍历会出错
+  const _this = toRaw(JSON.parse(JSON.stringify(tabList.value))); //否则下面遍历会出错
   // console.log("_this", _this);
   Sortable.create(el, {
     filter: "#tab-first,#tab-second", //限制哪些可以拖动
@@ -391,26 +391,37 @@ const rowDrop = () => {
       console.log("evt", evt);
     },
     //结束拖拽事件
+    // TODO 从后往前移动会出问题，+1的做法需要优化
     async onEnd({ newIndex, oldIndex, to }) {
+      //拿到交换前后对应的index
       const ni = newIndex - 3;
       const oi = oldIndex - 3;
       let list = toRaw(tabList.value);
-      list = list.filter(item=>item)
+      list = list.filter((item) => item); //筛除空数据
       console.log("list", list);
       console.log("newIndex", ni);
       console.log("oldIndex", oi);
-      //oldIIndex拖放前的位置， newIndex拖放后的位置  //tabOptionList为遍历的tab签
-      // const currRow = _this.splice(oldIndex, 1)[0]; //鼠标拖拽当前的el-tabs-pane
-      // _this.splice(newIndex, 0, currRow); //tableData 是存放所以el-tabs-pane的数组
       const newList = list.map((item, index) => {
         console.log("item", item);
+        if (oi > ni) {
+          // 从后往前，需要将oi和ni之间的+1
           if (index === oi) {
             item.orderNum = _this[ni].orderNum;
-            console.log('oiitem',item);
-          } else {
+            console.log("oiitem", item);
+          } else if(ni<index<oi) {
             item.orderNum += 1;
           }
-          return item;
+        } else if (oi < ni) {
+          // 从前往后，需要将oi和ni之间的-1
+           if (index === oi) {
+            item.orderNum = _this[ni].orderNum;
+            console.log("oiitem", item);
+          } else if(oi<index<ni) {
+            item.orderNum -= 1;
+          }
+        }
+
+        return item;
       });
       console.log("newList", newList);