多文件上传且可拖拽

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "sortablejs": "^1.15.6",
     "@element-plus/icons-vue": "2.0.10",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "9.5.0",

@@ -5,6 +5,7 @@
       :action="uploadFileUrl"
       :before-upload="handleBeforeUpload"
       :file-list="fileList"
+      :limit="limit"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
       :on-success="handleUploadSuccess"
@@ -24,8 +25,20 @@
       的文件
     </div>
     <!-- 文件列表 -->
-    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
-      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+    <transition-group 
+      class="upload-file-list el-upload-list el-upload-list--text" 
+      name="el-fade-in-linear" 
+      tag="ul"
+      ref="fileListWrapper"
+      @update="handleSortUpdate"
+    >
+      <li 
+        :key="file.uid" 
+        class="el-upload-list__item ele-upload-list__item-content draggable"
+        v-for="(file, index) in fileList"
+        :draggable="true"
+        :title="limit > 1 ? '可拖动文件进行调序' : ''"
+      >
         <el-link :href="`${file.url}`" :underline="false" target="_blank">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
         </el-link>
@@ -40,9 +53,15 @@
 <script setup>
 import { getToken } from "@/utils/auth";
 import { listByIds, delOss } from "@/api/system/oss";
+import Sortable from 'sortablejs';
 
 const props = defineProps({
   modelValue: [String, Object, Array],
+  // 数量限制
+  limit: {
+    type: Number,
+    default: 5,
+  },
   // 大小限制(MB)
   fileSize: {
     type: Number,
@@ -64,13 +83,43 @@ const { proxy } = getCurrentInstance();
 const emit = defineEmits();
 const number = ref(0);
 const uploadList = ref([]);
-const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const baseUrl = import.meta.env.VITE_APP_BASE_API || '';
 const uploadFileUrl = ref(baseUrl + "/system/oss/upload"); // 上传文件服务器地址
 const headers = ref({ Authorization: "Bearer " + getToken() });
 const fileList = ref([]);
 const showTip = computed(
   () => props.isShowTip && (props.fileType || props.fileSize)
 );
+// 初始化拖拽排序
+onMounted(() => {
+  const el = proxy.$refs.fileListWrapper.$el; // 确保transition-group添加ref="fileListWrapper"
+  if (el) {
+    new Sortable(el, {
+      animation: 150, // 过渡动画时长
+      draggable: '.draggable', // 可拖拽的元素
+      onUpdate: (evt) => {
+        // 拖拽结束时更新列表顺序
+        const oldIndex = evt.oldIndex;
+        const newIndex = evt.newIndex;
+        
+        // 移动元素位置
+        fileList.value.splice(newIndex, 0, fileList.value.splice(oldIndex, 1)[0]);
+        
+        // 触发排序更新事件
+        handleSortUpdate();
+      }
+    });
+  }
+});
+// 排序更新处理
+function handleSortUpdate() {
+  // 更新父组件modelValue
+  emit("update:modelValue", listToString(fileList.value));
+  
+  // 输出排序后的列表（可选）
+  console.log('排序后的文件列表:', fileList.value);
+}
+
 
 watch(() => props.modelValue, async val => {
   if (val) {
@@ -124,6 +173,10 @@ function handleBeforeUpload(file) {
   return true;
 }
 
+// 文件个数超出
+function handleExceed() {
+  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+}
 
 // 上传失败
 function handleUploadError(err) {
@@ -206,4 +259,7 @@ function listToString(list, separator) {
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }
+.draggable {
+  cursor: move;
+}
 </style>

@@ -134,13 +134,13 @@
             </template>
           </el-form-item>
           <el-form-item :label="$t('course.dialogCase')" prop="caseOssId" label-width="80">
-            <fileUpload v-model="showForm.form.caseOssId" :fileType='["mp4", "avi", "mov", "flv","pdf"]'/>
+            <fileUpload v-model="showForm.form.caseOssId" :limit="10" :fileType='["mp4", "avi", "mov", "flv","pdf"]'/>
           </el-form-item>
           <el-form-item :label="$t('course.dialogTeaching')" label-width="80">
-            <fileUpload v-model="showForm.form.teachingOssId" :fileType='["pdf","mp4"]'/>
+            <fileUpload v-model="showForm.form.teachingOssId" :limit="10" :fileType='["pdf","mp4"]'/>
           </el-form-item>
           <el-form-item :label="$t('course.dialogPpt')" label-width="80">
-            <fileUpload v-model="showForm.form.pptOssId" :fileType='["pdf","mp4"]'/>
+            <fileUpload v-model="showForm.form.pptOssId" :limit="10" :fileType='["pdf","mp4"]'/>
           </el-form-item>
           <el-form-item :label="$t('course.dialogPhoto')" prop="ossId" label-width="80">
             <imageUpload v-model="showForm.form.ossId" :limit='1' :fileType='["png", "jpg", "jpeg", "ico"]'/>