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

RuoYi

2025-04-30 98738f23ad8312ff96f290963c19e527407bbb04

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

 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 @@
    disabled: {

      type: Boolean,

      default: false

    },

      // 拖动排序

    drag: {

      type: Boolean,

      default: true

    }

  },

  data() {

@@ -92,7 +98,22 @@
      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 @@
</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,20 +62,25 @@
    // 图片数量限制

    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

    }

@@ -93,6 +99,20 @@
      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) {