课程管理-批量添加按选择的顺序添加

src/views/components/course/userCourseCatalogDetails.vue

@@ -43,7 +43,6 @@
     <el-table border v-loading="loading" :data="userCourseVideoList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="视频ID" align="center" prop="videoId" />
-      <!--      <el-table-column label="轮次" align="center" prop="round" />-->
       <el-table-column label="小节名称" align="center" show-overflow-tooltip prop="title" />
       <el-table-column label="视频文件名称" align="center" show-overflow-tooltip prop="fileName">
       </el-table-column>
@@ -95,32 +94,9 @@
         <el-form-item label="视频描述" prop="description">
           <el-input v-model="form.description" type="textarea" :rows="2" placeholder="请输入内容" />
         </el-form-item>
-        <!--        <el-form-item label="轮次" prop="round">-->
-        <!--          <el-input v-model="form.round"  placeholder="请输入内容" />-->
-        <!--        </el-form-item>-->
         <el-form-item label="课程排序" prop="courseSort">
           <el-input-number v-model="form.courseSort" :min="1"></el-input-number>
         </el-form-item>
-        <!--        <el-form-item label="看课时间" prop="timeRange" v-if="isPrivate === 1">-->
-        <!--          <el-time-picker-->
-        <!--            is-range-->
-        <!--            v-model="form.timeRange"-->
-        <!--            range-separator="至"-->
-        <!--            start-placeholder="开始时间"-->
-        <!--            value-format="HH:mm:ss"-->
-        <!--            end-placeholder="结束时间"-->
-        <!--            placeholder="选择时间范围">-->
-        <!--          </el-time-picker>-->
-        <!--        </el-form-item>-->
-        <!--        <el-form-item label="领取红包时间" prop="lastJoinTime" v-if="isPrivate === 1">-->
-        <!--          <el-time-picker-->
-        <!--            v-model="form.lastJoinTime"-->
-        <!--            :selectableRange="form.timeRange"-->
-        <!--            value-format="HH:mm:ss"-->
-        <!--            placeholder="选择时间范围">-->
-        <!--          </el-time-picker>-->
-        <!--          <p style="color: red;margin: 0;font-size: 12px">超过领取红包时间，只允许看课，不允许领取红包</p>-->
-        <!--        </el-form-item>-->
 
         <el-form-item label="视频缩略图" prop="thumbnail">
           <el-upload v-model="form.thumbnail" class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
@@ -139,7 +115,6 @@
         <el-form-item label="课题选择" prop="questionBankId">
           <el-button size="small" type="primary" @click="chooseQuestionBank">选取课题</el-button>
           <el-table border width="100%" style="margin-top:5px;" :data="form.questionBankList">
-
             <el-table-column label="问题" align="center" prop="title">
               <template slot-scope="scope">
                 <el-tooltip class="item" effect="dark" :content="scope.row.title" placement="top">
@@ -199,7 +174,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item v-if="form.isProduct === 1"  label="结束售卖时间" prop="listingStartTime">
+            <el-form-item v-if="form.isProduct === 1" label="结束售卖时间" prop="listingStartTime">
               <el-input-number v-model="form.listingEndTime" :min="0" label="结束售卖时间"></el-input-number>
             </el-form-item>
           </el-col>
@@ -359,7 +334,7 @@ import draggable from 'vuedraggable'
 
 export default {
   name: "userCourseCatalog",
-  components: { VideoUpload, QuestionBank, CourseWatchComment, CourseProduct,draggable},
+  components: { VideoUpload, QuestionBank, CourseWatchComment, CourseProduct, draggable },
   data() {
     return {
       duration: null,
@@ -383,7 +358,6 @@ export default {
       videoUrl: "",
       uploadTypeOptions: [
         { dictLabel: "线路一", dictValue: 2 },
-
         { dictLabel: "线路二", dictValue: 3 },
       ],
       uploadLoading: false,
@@ -429,7 +403,7 @@ export default {
         open: false,
         loading: true,
         form: {},
-        select: [],
+        select: [], // 按用户选择顺序存储视频ID
         total: 0,
         queryParams: {
           pageNum: 1,
@@ -453,11 +427,11 @@ export default {
       single: true,
       // 非多个禁用
       multiple: true,
-      loading3:false,
-      openVideoSort:false,
+      loading3: false,
+      openVideoSort: false,
       // 表单参数
       form: {
-        courseProducts:[]
+        courseProducts: []
       },
       updateBatchData: {
         open: false,
@@ -546,7 +520,7 @@ export default {
 
     },
 
-    courseProductResult(val){
+    courseProductResult(val) {
       this.form.courseProducts = this.form.courseProducts || [];
       for (var i = 0; i < this.form.courseProducts.length; i++) {
         if (this.form.courseProducts[i].id == val.id) {
@@ -599,7 +573,6 @@ export default {
       } else if (this.form.uploadType == 3) {
         this.videoUrl = this.form.lineThree;
       }
-      // console.log("选择的video=======>>>>>>>",this.videoUrl)
     },
     // 视频库课题
     handleSelectProjects(projectIds) {
@@ -625,7 +598,7 @@ export default {
     },
     formatDuration(seconds) {
       if (seconds === null || seconds === undefined) {
-        return '未上传视频'; // 或者您可以根据具体需求返回其他默认值
+        return '未上传视频';
       }
       const hours = Math.floor(seconds / 3600);
       const minutes = Math.floor((seconds % 3600) / 60);
@@ -642,8 +615,7 @@ export default {
       if (res.code == 200) {
         this.form.thumbnail = res.url;
         this.$forceUpdate()
-      }
-      else {
+      } else {
         this.msgError(res.msg);
       }
     },
@@ -739,9 +711,18 @@ export default {
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    // 多选框选中数据
+    // 视频库多选框选中数据（按用户点击顺序记录）
     handVideoleSelectionChange(selection) {
-      this.addBatchData.select = selection.map(item => item.id);
+      // 提取当前选中的所有ID
+      const selectedIds = selection.map(item => item.id);
+      // 处理新增选中项：保留用户点击顺序
+      selectedIds.forEach(id => {
+        if (!this.addBatchData.select.includes(id)) {
+          this.addBatchData.select.push(id);
+        }
+      });
+      // 处理取消选中项：移除已取消的ID
+      this.addBatchData.select = this.addBatchData.select.filter(id => selectedIds.includes(id));
     },
     handleAdd() {
       this.reset();
@@ -816,13 +797,6 @@ export default {
             });
             return
           }
-          // if(this.form.uploadType==null){
-          //   this.$message({
-          //     message: '请选择播放线路！',
-          //     type: 'warning'
-          //   });
-          //   return
-          // }
           if (this.form.questionBankList !== null) {
             this.form.questionBankId = this.form.questionBankList.map(item => item.id).join(',');
           }
@@ -880,15 +854,15 @@ export default {
       }).catch(() => { });
     },
 
-    handleCourseSort(){
+    handleCourseSort() {
 
       getVideoListByCourseIdAll(this.queryParams.courseId).then(response => {
 
         response.rows.forEach((item) => item.newCourseSort = item.courseSort);
         this.userCourseVideoSortList = response.rows.sort((a, b) => a.courseSort - b.courseSort);
-        if (this.userCourseVideoSortList==null || this.userCourseVideoSortList.length==0){
+        if (this.userCourseVideoSortList == null || this.userCourseVideoSortList.length == 0) {
           this.$message.error("暂无课节天数")
-        }else {
+        } else {
           this.openVideoSort = true;
         }
       })
@@ -904,19 +878,15 @@ export default {
     },
 
     saveSorts() {
-
-      console.log("this.userCourseVideoSortList",this.userCourseVideoSortList)
       let list = this.userCourseVideoSortList.filter(e => e.courseSort != e.newCourseSort).map(e => {
-        return {courseSort: e.newCourseSort, videoId: e.videoId}
+        return { courseSort: e.newCourseSort, videoId: e.videoId }
       })
-      console.log("this.userCourseVideoSortList",this.userCourseVideoSortList)
       this.loading3 = true;
-      console.log("list",list)
       sortCourseVideo(list).then(e => {
         this.getList();
       }).finally(() => {
-        this.userCourseVideoSortList=[];
-        this.openVideoSort=false;
+        this.userCourseVideoSortList = [];
+        this.openVideoSort = false;
       })
     },
 
@@ -926,6 +896,8 @@ export default {
       this.addBatchData.form = {
         courseId: this.courseId,
       };
+      // 重置选择顺序数组
+      this.addBatchData.select = [];
       this.resourceList();
     },
     getRootTypeList() {
@@ -959,7 +931,7 @@ export default {
         });
         return
       }
-      this.addBatchData.form.ids = this.addBatchData.select;
+      this.addBatchData.form.ids = this.addBatchData.select; // 按用户选择顺序提交
       batchSaveVideo(this.addBatchData.form).then(response => {
         this.addBatchData.open = false;
         this.getList();