查看附件拖拽修改

src/views/data-fill/wbs.vue

@@ -1419,7 +1419,7 @@
 </template>
 
 <script setup>
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAppStore } from '~src/store'
 import { HcIsButton } from '~src/plugins/IsButtons'
@@ -3121,6 +3121,7 @@ const getAttachmentList = async () => {
 
 // 新增拖拽相关代码
 const attachmentListRefs = ref([])
+const sortableInstances = ref([]) 
 
 const setAttachmentListRef = (el) => {
   if (el) {
@@ -3132,7 +3133,7 @@ const setAttachmentListRef = (el) => {
 const initSortable = () => {
   nextTick(() => {
     attachmentListRefs.value.forEach((el, index) => {
-      new Sortable(el, {
+      const sortable = new Sortable(el, {
         animation: 150,
         ghostClass: 'sortable-ghost',
         handle: '.hc-attachment-item', // 整个条目可拖拽
@@ -3149,10 +3150,29 @@ const initSortable = () => {
           }
         },
       })
+      sortableInstances.value.push(sortable) // 存储 Sortable 实例引用
     })
   })
 }
+// 销毁 Sortable 实例
+const destroySortableInstances = () => {
+  sortableInstances.value.forEach(instance => {
+    instance.destroy()
+  })
+  sortableInstances.value = [] // 清空引用数组
+}
 
+// 监听 attachmentModal 的变化
+watch(attachmentModal, (newVal) => {
+  if (!newVal) {
+    destroySortableInstances() // 关闭弹窗时销毁 Sortable 实例
+  } else {
+    initSortable() // 打开弹窗时初始化 Sortable
+  }
+})
+onUnmounted(() => {
+  destroySortableInstances()
+})
 // 保存文件顺序到后端
 const saveFileOrderLoad = ref(false)
 const saveFileOrder = async () => {