收藏夹排序修改

src/views/data-fill/wbs.vue

@@ -36,13 +36,19 @@
                                         </div>
         
                                         <!-- 文件夹列表容器（带滚动） -->
-                                        <div v-loading="collectLoad" class="folder-list-container">
+                                        <div ref="folderListContainer" v-loading="collectLoad" class="folder-list-container">
                                             <div 
                                                 v-for="(folder, index) in collectList" 
-                                                :key="index" 
+                                                :key="folder.id" 
                                                 class="folder-item"
                                                 style="display: flex; align-items: center; gap: 8px;"
                                             >
+                                                <!-- 拖拽图标 - 作为拖拽手柄 -->
+                                                <HcIcon 
+                                                    name="drag-move-2" 
+                                                    class="drag-handle cursor-move" 
+                                                    style="margin-right: 4px; flex-shrink: 0;"
+                                                />
                                                 <!-- 编辑状态显示输入框 -->
                                                 <el-input
                                                     v-if="folder.isEditing"
@@ -52,7 +58,7 @@
                                                     @blur="handleEditBlur(folder)"
                                                     @keyup.enter="confirmEdit(index, folder)"
                                                 />
-    
+
                                                 <!-- 非编辑状态显示文本 -->
                                                 <span 
                                                     v-else 
@@ -62,9 +68,7 @@
                                                 >
                                                     {{ folder.name }}
                                                 </span>
-    
-                                              
-                                      
+
                                                 <HcIcon v-if="folder.isEditing" name="check" class="cursor-pointer" style="color:white;" @click="confirmEdit(index, folder)" />
                                                 <HcIcon 
                                                     name="delete-bin" 
@@ -3311,6 +3315,10 @@ watch(attachmentModal, (newVal) => {
 })
 onUnmounted(() => {
   destroySortableInstances()
+    if (sortableInstance) {
+    sortableInstance.destroy()
+    sortableInstance = null
+  }
 })
 // 保存文件顺序到后端
 const saveFileOrderLoad = ref(false)
@@ -3985,6 +3993,63 @@ const collectRules = ref({
 })
 const collectList = ref([])
 
+const editInput = ref(null)
+// 文件夹列表容器的引用
+const folderListContainer = ref(null)
+// Sortable实例
+let sortableInstance = null
+
+// 初始化拖拽排序功能
+const initSortableCollect = () => {
+  // 确保容器已挂载且还没有初始化过
+  if (folderListContainer.value && !sortableInstance) {
+    sortableInstance = new Sortable(folderListContainer.value, {
+      animation: 150, // 拖拽动画时长
+      handle: '.folder-item', // 指定可以拖拽的元素
+      ghostClass: 'sortable-ghost', // 拖拽时的占位元素类名
+      onEnd: handleSortEnd, // 拖拽结束时的回调
+    })
+  }
+}
+
+// 处理拖拽结束事件
+const handleSortEnd = async (evt) => {
+  // 保存原始顺序，用于出错时恢复
+  const originalList = [...collectList.value]
+  
+  // 从原位置移除并插入到新位置
+  const [movedItem] = collectList.value.splice(evt.oldIndex, 1)
+  collectList.value.splice(evt.newIndex, 0, movedItem)
+  
+  // 调用API保存新的排序
+  
+    const folderIds = arrToKey(collectList.value, 'id')
+    const { error, code, msg } = await collectApi.sortFolder({
+     
+      ids: folderIds, 
+    })
+    
+    if (!error && code === 200) {
+      window?.$message?.success(msg)
+      getCollectList()
+    } else {
+    // 出错时恢复原始顺序
+        collectList.value = originalList
+    }
+
+    
+    
+  
+}
+
+// 监听collectList变化，数据加载完成后初始化拖拽
+watch(collectList, (newVal) => {
+  if (newVal.length > 0) {
+    // 延迟初始化，确保DOM已更新
+    setTimeout(initSortableCollect, 0)
+  }
+})
+
 const getCollectList = async ()=>{
   collectLoad.value = true
     const { error, code, msg, data } = await collectApi.folderList(