收藏夹名称修改

src/views/data-fill/wbs.vue

@@ -55,7 +55,7 @@
                                                     ref="editInput"
                                                     v-model="folder.editableName"
                                                     size="small"
-                                                    @blur="handleEditBlur(folder)"
+                                                   
                                                     @keyup.enter="confirmEdit(index, folder)"
                                                 />
 
@@ -3319,6 +3319,8 @@ const initSortable = () => {
     })
   })
 }
+
+
 // 销毁 Sortable 实例
 const destroySortableInstances = () => {
   sortableInstances.value.forEach(instance => {
@@ -3835,7 +3837,7 @@ const collectListClick = async ()=>{
     getCollectList()
        // 点击时显示收藏夹列表
     collectListVisible.value = true
-     setTimeout(initSortableCollect, 0)
+    
 }
 // 触发元素引用
 const triggerRef = ref(null)
@@ -3869,7 +3871,12 @@ if (!newFolderName.value.trim()) return window?.$message?.error('请输入文件
         window?.$message?.success(msg)
         newFolderName.value = ''
         showAddInput.value = false
-        getCollectList()
+          getCollectList().then(() => {
+      // 数据更新后重新初始化拖拽
+            nextTick(() => {
+                initSortableCollect()
+            })
+            })
     } 
 }
 
@@ -3879,27 +3886,34 @@ const cancelAddFolder = async (id) => {
   showAddInput.value = false
     
 }
-const removeCollect = async (id)=>{
-    const { error, code, msg } = await collectApi.deleteFolder({
-        id,
+// 删除文件夹的接口调用
+const removeCollect = async (id) => {
+  const { error, code, msg } = await collectApi.deleteFolder({ id })
+  if (!error && code === 200) {
+    window?.$message?.success(msg)
+    // 等待数据更新完成
+
+      getCollectList().then(() => {
+      // 数据更新后重新初始化拖拽
+      nextTick(() => {
+        initSortableCollect()
+      })
     })
-    if (!error && code === 200) {
-        window?.$message?.success(msg)
-        getCollectList()
-    }
+  }
 }
 
-// 删除文件夹
+// 删除文件夹的交互逻辑
 const deleteFolder = async (index, item) => {
-//   collectList.value.splice(index, 1)
   HcDelMsg(async (resolve) => {
-            await removeCollect(item.id)
-            resolve() //关闭弹窗的回调
-            collectListVisible.value = true
-
-        })
+    // 等待删除接口和数据更新完成
+    await removeCollect(item.id)
+    resolve() // 关闭弹窗
+    collectListVisible.value = true
+    
+    // 关键：等待Vue完成DOM更新后，再初始化拖拽
+  
+  })
 }
-
 // 控制缩放状态的变量
 const isScaling = ref(false)
 
@@ -4025,18 +4039,21 @@ const folderListContainer = ref(null)
 let sortableInstance = null
 
 // 初始化拖拽排序功能
+// 改进初始化拖拽排序功能，先销毁再创建
 const initSortableCollect = () => {
-  // 确保容器已挂载且还没有初始化过
-  if (folderListContainer.value && !sortableInstance) {
+  // 先销毁可能存在的实例
+  destroySortable()
+  
+  // 确保容器已挂载
+  if (folderListContainer.value) {
     sortableInstance = new Sortable(folderListContainer.value, {
-      animation: 150, // 拖拽动画时长
-      handle: '.folder-item', // 指定可以拖拽的元素
-      ghostClass: 'sortable-ghost', // 拖拽时的占位元素类名
-      onEnd: handleSortEnd, // 拖拽结束时的回调
+      animation: 150,
+      handle: '.folder-item',
+      ghostClass: 'sortable-ghost',
+      onEnd: handleSortEnd,
     })
   }
 }
-
 // 处理拖拽结束事件
 const handleSortEnd = async (evt) => {
   // 保存原始顺序，用于出错时恢复
@@ -4066,12 +4083,22 @@ const handleSortEnd = async (evt) => {
     
   
 }
-
+// 添加销毁Sortable实例的函数
+const destroySortable = () => {
+  if (sortableInstance) {
+    sortableInstance.destroy()
+    sortableInstance = null
+  }
+}
 // 监听collectList变化，数据加载完成后初始化拖拽
 watch(collectList, (newVal) => {
+
+    
   if (newVal.length > 0) {
     // 延迟初始化，确保DOM已更新
-    setTimeout(initSortableCollect, 0)
+      nextTick(() => {
+      initSortableCollect()
+    })
   }
 })
 
@@ -4094,7 +4121,7 @@ const getCollectList = async ()=>{
     } else {
         collectList.value = []
     }
-
+    //  setTimeout(initSortableCollect, 0)
 }
 // 开始编辑文件夹名称
 const startEdit = (folder) => {
@@ -4116,34 +4143,34 @@ const startEdit = (folder) => {
 }
 
 // 确认编辑
+// 修改确认编辑函数，添加重新初始化拖拽
 const confirmEdit = async (index, folder) => {
-
+ 
   
-  // 简单验证
   if (!folder.editableName.trim()) {
     window.$message.warning('文件夹名称不能为空')
     return
   }
-  
  
-    // 调用修改文件夹名称的API
-    const { error, code, msg } = await collectApi.saveOrUpdateFolder({
-         nodeId: primaryKeyId.value,
-            contractId: contractId.value,
-            name: folder.editableName.trim(),
-            type:1,
-            id: folder.id,
+  const { error, code, msg } = await collectApi.saveOrUpdateFolder({
+    nodeId: primaryKeyId.value,
+    contractId: contractId.value,
+    name: folder.editableName.trim(),
+    type: 1,
+    id: folder.id,
+  })
+  
+  if (!error && code === 200) {
+    window.$message.success(msg)
+    folder.isEditing = false
+    getCollectList().then(() => {
+      // 数据更新后重新初始化拖拽
+      nextTick(() => {
+        initSortableCollect()
+      })
     })
-    
-    if (!error && code === 200) {
-      // 更新成功，保存新名称
-      
-        window.$message.success(msg)
-          folder.isEditing = false
-          getCollectList()
-
-    } 
   } 
+}
   const folderId = ref(null)
 const selectFolder = async (folder) => {
     collectListVisible.value = false
@@ -4156,12 +4183,7 @@ const selectFolder = async (folder) => {
 
 // 输入框失焦处理
 const handleEditBlur = (folder) => {
-  // 如果仍然处于编辑状态（未通过确认按钮提交），恢复原始名称
-  if (folder.isEditing) {
-    folder.editableName = folder.originalName
-    // folder.isEditing = false
 
-  }
 }
 
 // 获取文件夹列表的方法需要修改，为每个文件夹添加编辑相关属性