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

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) {