From e852fdb687990423c9f5be9f810fc38ff7ffdaf3 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Wed, 30 Apr 2025 10:28:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E6=8B=96=E5=8A=A8=E6=8E=92=E5=BA=8F=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/components/FileUpload/index.vue  | 27 ++++++++++++++++++-
 ruoyi-ui/src/components/ImageUpload/index.vue | 26 +++++++++++++++---
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue
index d6acf4b4..035b2eae 100644
--- a/ruoyi-ui/src/components/FileUpload/index.vue
+++ b/ruoyi-ui/src/components/FileUpload/index.vue
@@ -43,6 +43,7 @@
 
 <script>
 import { getToken } from "@/utils/auth"
+import Sortable from 'sortablejs'
 
 export default {
   name: "FileUpload",
@@ -82,6 +83,11 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+      // 拖动排序
+    drag: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -93,7 +99,22 @@ export default {
       headers: {
         Authorization: "Bearer " + getToken(),
       },
-      fileList: [],
+      fileList: []
+    }
+  },
+  mounted() {
+    if (this.drag) {
+      this.$nextTick(() => {
+        const element = document.querySelector('.upload-file-list')
+        Sortable.create(element, {
+          ghostClass: 'file-upload-darg',
+          onEnd: (evt) => {
+            const movedItem = this.fileList.splice(evt.oldIndex, 1)[0]
+            this.fileList.splice(evt.newIndex, 0, movedItem)
+            this.$emit("input", this.listToString(this.fileList))
+          }
+        })
+      })
     }
   },
   watch: {
@@ -216,6 +237,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.file-upload-darg {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
 .upload-file-uploader {
   margin-bottom: 5px;
 }
diff --git a/ruoyi-ui/src/components/ImageUpload/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue
index 6d9e51eb..b723ab9a 100644
--- a/ruoyi-ui/src/components/ImageUpload/index.vue
+++ b/ruoyi-ui/src/components/ImageUpload/index.vue
@@ -46,6 +46,7 @@
 <script>
 import { getToken } from "@/utils/auth"
 import { isExternal } from "@/utils/validate"
+import Sortable from 'sortablejs'
 
 export default {
   props: {
@@ -62,22 +63,27 @@ export default {
     // 图片数量限制
     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
     }
   },
   data() {
@@ -95,6 +101,20 @@ export default {
       fileList: []
     }
   },
+  mounted() {
+    if (this.drag) {
+      this.$nextTick(() => {
+        const element = document.querySelector('.el-upload-list')
+        Sortable.create(element, {
+          onEnd: (evt) => {
+            const movedItem = this.fileList.splice(evt.oldIndex, 1)[0]
+            this.fileList.splice(evt.newIndex, 0, movedItem)
+            this.$emit("input", this.listToString(this.fileList))
+          }
+        })
+      })
+    }
+  },
   watch: {
     value: {
       handler(val) {