Merge branch 'master' of http://g.jimilicai.com:8000/legobackend/lego-manage-web

yzj
Showing 3 changed files with 63 additions and 6 deletions
package.json
src/components/FileUpload/index.vue
src/views/legao/course/index.vue
--- a/package.json
View file @678e608
+++ b/package.json
View file @678e608
@@ -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",
--- a/src/components/FileUpload/index.vue
View file @678e608
+++ b/src/components/FileUpload/index.vue
View file @678e608
@@ -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">
+    <transition-group 
-      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+      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>
--- a/src/views/legao/course/index.vue
View file @678e608
+++ b/src/views/legao/course/index.vue
View file @678e608
@@ -132,13 +132,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"]'/>