From 9e76400c8e394e4976a2fd1436f8866a67622209 Mon Sep 17 00:00:00 2001
From: insistence <3055204202@qq.com>
Date: Wed, 27 Aug 2025 08:50:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=8B=96=E5=8A=A8=E6=8E=92=E5=BA=8F=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FileUpload/index.vue       | 28 +++++++++++++++++++
 .../src/components/ImageUpload/index.vue      | 28 +++++++++++++++++--
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/ruoyi-fastapi-frontend/src/components/FileUpload/index.vue b/ruoyi-fastapi-frontend/src/components/FileUpload/index.vue
index 44ccb3f..405cb32 100644
--- a/ruoyi-fastapi-frontend/src/components/FileUpload/index.vue
+++ b/ruoyi-fastapi-frontend/src/components/FileUpload/index.vue
@@ -42,6 +42,7 @@
 
 <script setup>
 import { getToken } from "@/utils/auth";
+import Sortable from 'sortablejs';
 
 const props = defineProps({
   modelValue: [String, Object, Array],
@@ -78,6 +79,11 @@ const props = defineProps({
   disabled: {
     type: Boolean,
     default: false
+  },
+  // 拖动排序
+  drag: {
+    type: Boolean,
+    default: true
   }
 });
 
@@ -205,9 +211,30 @@ function listToString(list, separator) {
   }
   return strs != '' ? strs.substr(0, strs.length - 1) : '';
 }
+
+// 初始化拖拽排序
+onMounted(() => {
+  if (props.drag) {
+    nextTick(() => {
+      const element = document.querySelector('.upload-file-list')
+      Sortable.create(element, {
+        ghostClass: 'file-upload-darg',
+        onEnd: (evt) => {
+          const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
+          fileList.value.splice(evt.newIndex, 0, movedItem)
+          emit('update:modelValue', listToString(fileList.value))
+        }
+      })
+    })
+  }
+})
 </script>
 
 <style scoped lang="scss">
+.file-upload-darg {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
 .upload-file-uploader {
   margin-bottom: 5px;
 }
@@ -216,6 +243,7 @@ function listToString(list, separator) {
   line-height: 2;
   margin-bottom: 10px;
   position: relative;
+  transition: none !important;
 }
 .upload-file-list .ele-upload-list__item-content {
   display: flex;
diff --git a/ruoyi-fastapi-frontend/src/components/ImageUpload/index.vue b/ruoyi-fastapi-frontend/src/components/ImageUpload/index.vue
index 73664bc..022a976 100644
--- a/ruoyi-fastapi-frontend/src/components/ImageUpload/index.vue
+++ b/ruoyi-fastapi-frontend/src/components/ImageUpload/index.vue
@@ -49,6 +49,7 @@
 <script setup>
 import { getToken } from "@/utils/auth";
 import { isExternal } from "@/utils/validate";
+import Sortable from 'sortablejs';
 
 const props = defineProps({
   modelValue: [String, Object, Array],
@@ -64,23 +65,28 @@ const props = defineProps({
   // 图片数量限制
   limit: {
     type: Number,
-    default: 5,
+    default: 5
   },
   // 大小限制(MB)
   fileSize: {
     type: Number,
-    default: 5,
+    default: 5
   },
   // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileType: {
     type: Array,
-    default: () => ["png", "jpg", "jpeg"],
+    default: () => ["png", "jpg", "jpeg"]
   },
   // 是否显示提示
   isShowTip: {
     type: Boolean,
     default: true
   },
+  // 拖动排序
+  drag: {
+    type: Boolean,
+    default: true
+  }
 });
 
 const { proxy } = getCurrentInstance();
@@ -216,6 +222,22 @@ function listToString(list, separator) {
   }
   return strs != "" ? strs.substr(0, strs.length - 1) : "";
 }
+
+// 初始化拖拽排序
+onMounted(() => {
+  if (props.drag) {
+    nextTick(() => {
+      const element = document.querySelector('.el-upload-list')
+      Sortable.create(element, {
+        onEnd: (evt) => {
+          const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
+          fileList.value.splice(evt.newIndex, 0, movedItem)
+          emit('update:modelValue', listToString(fileList.value))
+        }
+      })
+    })
+  }
+})
 </script>
 
 <style scoped lang="scss">