收藏标签

src/api/biz/label.js

@@ -42,3 +42,11 @@ export function delLabel(labelId) {
     method: 'delete'
   })
 }
+// 标签排序
+export function sortLabel(data) {
+  return request({
+    url: '/biz/label/order',
+    method: 'post',
+    data: data
+  })
+}

src/views/collect/index.vue

@@ -40,7 +40,11 @@
       <el-tabs v-model="clickCollect" class="tabSign" ref="tabs">
         <el-tab-pane label="常用" name="first"></el-tab-pane>
         <el-tab-pane label="默认" name="second"></el-tab-pane>
-        <el-tab-pane v-for="item in tabList" :key="item" :name="item.labelId">
+        <el-tab-pane
+          v-for="item in toRaw(tabList)"
+          :key="item"
+          :name="item.labelId"
+        >
           <template #label>
             <div
               v-if="isChangeTabName !== item.labelId"
@@ -79,7 +83,7 @@
         </div>
       </div>
     </div>
-    <el-collapse v-model="activeNames" @change="handleChange">
+    <el-collapse v-model="activeNames">
       <div v-if="isList">
         <el-collapse-item name="folder">
           <template #title>
@@ -202,7 +206,13 @@ import Sortable from "sortablejs";
 import draggable from "vuedraggable";
 import { onMounted, ref, watch, nextTick } from "vue";
 import { toRaw } from "@vue/reactivity";
-import { listLabel, addLabel, delLabel, updateLabel } from "@/api/biz/label.js";
+import {
+  listLabel,
+  addLabel,
+  delLabel,
+  updateLabel,
+  sortLabel,
+} from "@/api/biz/label.js";
 import { listFavorite } from "@/api/biz/favorite.js";
 const activeNames = ref(["folder", "file"]);
 const clickCollect = ref("first"); //当前标签
@@ -371,7 +381,7 @@ const reTabName = async () => {
 const rowDrop = () => {
   const el = document.querySelector(".tabSign .el-tabs__nav"); //找到想要拖拽的那一列
   // console.log('el',el);
-  const _this = toRaw(tabList.value);
+  const _this = toRaw(JSON.parse(JSON.stringify(tabList.value)));//否则下面遍历会出错
   // console.log("_this", _this);
   Sortable.create(el, {
     filter: "#tab-first,#tab-second", //限制哪些可以拖动
@@ -381,12 +391,32 @@ const rowDrop = () => {
       console.log("evt", evt);
     },
     //结束拖拽事件
-    onEnd({ newIndex, oldIndex, to }) {
-      console.log("newIndex", newIndex);
-      console.log("oldIndex", oldIndex);
+    async onEnd({ newIndex, oldIndex, to }) {
+      const ni = newIndex - 3;
+      const oi = oldIndex - 3;
+      let list = toRaw(tabList.value);
+      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 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 (index === oi) {
+            item.orderNum = _this[ni].orderNum;
+            console.log('oiitem',item);
+          } else {
+            item.orderNum += 1;
+          }
+          return item;
+      });
+      console.log("newList", newList);
+
+      const res = await sortLabel(newList);
+      console.log("res", res);
+      await getList();
     },
   });
 };