feat: 上传组件新增拖动排序属性

Author: insistence

ruoyi-fastapi-frontend/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() {
@@ -96,6 +102,21 @@ export default {
       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: {
     value: {
       handler(val) {
@@ -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;
 }

ruoyi-fastapi-frontend/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) {