查看附件拖拽上传修改

src/views/data-fill/components/HcUpload.vue

@@ -157,7 +157,10 @@ watch(() => [
   
 ], ([ type]) => {
     typevalue.value = type
-         emit('change', { type: 'success' })
+    if (type) {
+      emit('change', { type: 'del' })
+    }
+   
 
 },
 { immediate: true },

src/views/data-fill/wbs.vue

@@ -1254,6 +1254,7 @@
                     v-for="item in attachmentList"
                     :key="item.id"
                     class="hc-attachment-card"
+                    :data-node-id="item.id" 
                 >
                     <div class="hc-attachment-header">
                         {{ item?.nodeName }}
@@ -3095,9 +3096,9 @@ const attachmentModalShow = () => {
     attachmentModal.value = true
 
     getAttachmentList()
-    nextTick(()=>{
-          initSortable()
-    })
+    // nextTick(()=>{
+    //       initSortable()
+    // })
 }
 const attachmentListLoaing = ref(false)
 const attachmentList = ref([])
@@ -3132,25 +3133,28 @@ const setAttachmentListRef = (el) => {
 // 初始化拖拽排序
 const initSortable = () => {
   nextTick(() => {
-    attachmentListRefs.value.forEach((el, index) => {
-      const sortable = new Sortable(el, {
-        animation: 150,
-        ghostClass: 'sortable-ghost',
-        handle: '.hc-attachment-item', // 整个条目可拖拽
-        onEnd: (evt) => {
-          const { oldIndex, newIndex } = evt
-          if (oldIndex !== newIndex) {
-            // 更新对应节点的文件顺序
-            const node = attachmentList.value[index]
-            const [movedItem] = node.fileList.splice(oldIndex, 1)
-            node.fileList.splice(newIndex, 0, movedItem)
+    attachmentList.value.forEach((item) => {
+      // 更可靠的DOM查找方式
+      const container = document.querySelector(`.hc-attachment-card[data-node-id="${item.id}"] .hc-attachment-content`)
+      
+      if (container && !sortableInstances.value[item.id]) {
+        sortableInstances.value[item.id] = Sortable.create(container, {
+          animation: 150,
+          handle: '.hc-attachment-file-name',
+          onEnd: (evt) => {
+            // 确保能正确找到对应的item
+            const currentItem = attachmentList.value.find(i => i.id === item.id)
+            if (!currentItem) return
             
-            // // 这里可以调用API保存新的顺序
-  
-          }
-        },
-      })
-      sortableInstances.value.push(sortable) // 存储 Sortable 实例引用
+            const newFileList = [...currentItem.fileList]
+            const [movedItem] = newFileList.splice(evt.oldIndex, 1)
+            newFileList.splice(evt.newIndex, 0, movedItem)
+            
+            // 使用Vue的响应式更新
+            currentItem.fileList = newFileList
+          },
+        })
+      }
     })
   })
 }