查看附件拖拽排序

src/views/data-fill/wbs.vue

@@ -1237,7 +1237,7 @@
         <!-- 查看附件 -->
         <hc-new-dialog
             v-model="attachmentModal"
-            :footer="false"
+         
             is-table
             title="附件列表"
             widths="780px"
@@ -1246,12 +1246,18 @@
                 v-if="attachmentList.length > 0"
                 v-loading="attachmentListLoaing"
             >
+                <div class="mb-1 p-2">
+                    <span class="text-orange">按住鼠标拖动文件可进行附件列表排序</span>
+                </div>
                 <div
                     v-for="item in attachmentList"
                     :key="item.id"
                     class="hc-attachment-card"
                 >
-                    <div class="hc-attachment-header">{{ item?.nodeName }}</div>
+                    <div class="hc-attachment-header">
+                        {{ item?.nodeName }}
+                        <!-- <el-button type="success" :loading="saveFileOrderLoad" style="float:right" @click="saveFileOrder">确定排序</el-button> -->
+                    </div>
                     <div 
                         :ref="setAttachmentListRef"
                         class="hc-attachment-content"
@@ -1262,7 +1268,8 @@
                             class="hc-attachment-item"
                         >
                             <div class="hc-attachment-file-name">
-                                <HcIcon name="attachment" />
+                                <HcIcon name="arrow-up-down" class="text-blue" />
+                                <HcIcon name="attachment" class="ml-2" />
                                 <div class="name">{{ item1?.name }}</div>
                             </div>
                             <div class="hc-attachment-btn-box">
@@ -1292,6 +1299,10 @@
                     </div>
                 </div>
             </div>
+            <template #footer>
+                <el-button @click="attachmentModal = false">关闭</el-button>
+                <el-button type="primary" :loading="saveFileOrderLoad" @click="saveFileOrder">确定排序</el-button>
+            </template>
         </hc-new-dialog>
         <!-- 上传文件 -->
         <hc-new-dialog
@@ -3130,7 +3141,7 @@ const initSortable = () => {
             node.fileList.splice(newIndex, 0, movedItem)
             
             // // 这里可以调用API保存新的顺序
-            saveFileOrder()
+  
           }
         },
       })
@@ -3149,7 +3160,7 @@ const saveFileOrder = async () => {
     if (!error && code === 200) {
        window?.$message?.success(msg)
        getAttachmentList()
-
+         initSortable()
     } 
 }
 
@@ -3850,6 +3861,7 @@ html.theme-dark {
     margin-bottom: 8px;
     padding-left: 8px;
     border-left: 3px solid #409eff;
+
   }
   
   .hc-attachment-file-name {