Pre Merge pull request !402 from mashuo/springboot3

ruoyi-modules/ruoyi-gen/src/main/resources/vm/java/controller.java.vm

@@ -2,7 +2,7 @@ package ${packageName}.controller;
 
 import java.util.List;
 import java.io.IOException;
-import javax.servlet.http.HttpServletResponse;
+import jakarta.servlet.http.HttpServletResponse;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;

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() {
@@ -92,7 +98,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: {
@@ -215,6 +236,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.file-upload-darg {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
 .upload-file-uploader {
   margin-bottom: 5px;
 }

ruoyi-ui/src/components/ImageUpload/index.vue

@@ -45,6 +45,7 @@
 
 <script>
 import { getToken } from "@/utils/auth"
+import Sortable from 'sortablejs'
 
 export default {
   props: {
@@ -61,22 +62,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() {
@@ -93,6 +99,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) {