feat: 实现课程看课记录的三级联动下拉选择功能

- 新增营期列表查询接口(periodList)
- 实现课程营期视频的三级联动选择
- 添加handleCourseChange和handlePeriodChange方法处理级联逻辑
- 优化用户体验：下级选项在上级未选择时自动禁用
- 完善重置功能：清空时同步重置三级联动数据

src/api/course/courseRedPacketLog.js

@@ -37,6 +37,15 @@ export function courseList() {
     method: 'get',
   })
 }
+// 查询营期列表
+export function periodList(query) {
+  return request({
+    url: '/course/courseRedPacketLog/period',
+    method: 'get',
+    params: query
+  })
+}
+
 export function videoList(id) {
   return request({
     url: '/course/courseRedPacketLog/videoList/' + id,

src/views/course/courseWatchLog/index.vue

@@ -48,8 +48,8 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="课程" prop="courseId">
-        <el-select filterable  v-model="queryParams.courseId" placeholder="请选择课程"  clearable size="small" @change="courseChange(queryParams.courseId)">
+      <el-form-item label="训练营" prop="courseId">
+        <el-select filterable  v-model="queryParams.courseId" placeholder="请选择训练营"  clearable size="small" @change="handleCourseChange">
           <el-option
             v-for="dict in courseLists"
             :key="dict.dictValue"
@@ -58,8 +58,18 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="营期" prop="periodId">
+        <el-select filterable  v-model="queryParams.periodId" placeholder="请选择营期"  clearable size="small" @change="handlePeriodChange" :disabled="!queryParams.courseId">
+          <el-option
+            v-for="dict in periodList"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item label="小节" prop="videoId">
-        <el-select filterable  v-model="queryParams.videoId" placeholder="请选择小节"  clearable size="small">
+        <el-select filterable  v-model="queryParams.videoId" placeholder="请选择小节"  clearable size="small" :disabled="!queryParams.periodId">
           <el-option
             v-for="dict in videoList"
             :key="dict.dictValue"
@@ -603,7 +613,7 @@
 
 <script>
 import { listCourseWatchLog, getCourseWatchLog, delCourseWatchLog, addCourseWatchLog, updateCourseWatchLog, exportCourseWatchLog } from "@/api/course/courseWatchLog";
-import {courseList, listCourseRedPacketLog, videoList} from '@/api/course/courseRedPacketLog'
+import {courseList, listCourseRedPacketLog, videoList, periodList} from '@/api/course/courseRedPacketLog'
 import {listLogs} from "@/api/course/courseAnswerlogs";
 import {allListTagGroup} from "../../../api/qw/tagGroup";
 import {searchTags} from "../../../api/qw/tag";
@@ -670,6 +680,7 @@ export default {
         }
       },
       courseLists:[],
+      periodList:[],  // 营期列表
       videoList:[],
       logTypeOptions:[],
       projectOptions:[],
@@ -770,6 +781,7 @@ export default {
         companyUserId: null,
         companyId: null,
         courseId: null,
+        periodId: null,  // 营期ID
         sTime:null,
         eTime:null,
         upSTime:null,
@@ -990,14 +1002,63 @@ export default {
       if (!dates || dates.length < 2) return '';
       return dates.map(date => date.format('YYYY-MM-DD')).join(' ~ ');
     },
-    courseChange(row){
-      this.queryParams.videoId=null;
-      if(row === ''){
-        this.videoList=[];
-        return
+    /**
+     * 课程变更处理
+     * 当课程改变时，清空营期和小节的选择和列表
+     */
+    handleCourseChange(courseId) {
+      // 清空下级选择和列表
+      this.queryParams.periodId = null;
+      this.queryParams.videoId = null;
+      this.periodList = [];
+      this.videoList = [];
+
+      // 如果选择了课程，加载营期列表
+      if (courseId) {
+        this.loadPeriodList(courseId);
+      }
+    },
+
+    /**
+     * 营期变更处理
+     * 当营期改变时，清空小节的选择和列表
+     */
+    handlePeriodChange(periodId) {
+      // 清空下级选择和列表
+      this.queryParams.videoId = null;
+      this.videoList = [];
+
+      // 如果选择了营期，加载视频列表
+      if (periodId) {
+        this.loadVideoList(periodId);
       }
-      videoList(row).then(response => {
-        this.videoList=response.list
+    },
+
+    /**
+     * 加载营期列表
+     * @param {Number} courseId - 课程ID
+     */
+    loadPeriodList(courseId) {
+      periodList({ courseId: courseId }).then(response => {
+        this.periodList = response.data || [];
+      }).catch(error => {
+        console.error('加载营期列表失败:', error);
+        this.$message.error('加载营期列表失败');
+        this.periodList = [];
+      });
+    },
+
+    /**
+     * 加载视频列表
+     * @param {Number} periodId - 营期ID
+     */
+    loadVideoList(periodId) {
+      videoList(periodId).then(response => {
+        this.videoList = response.list || [];
+      }).catch(error => {
+        console.error('加载视频列表失败:', error);
+        this.$message.error('加载视频列表失败');
+        this.videoList = [];
       });
     },
 
@@ -1222,6 +1283,13 @@ export default {
       this.queryParams.scheduleEndTime = null;
       this.queryParams.sopId = null; // 重置SOP ID
 
+      // 重置三级联动相关数据
+      this.queryParams.courseId = null;
+      this.queryParams.periodId = null;
+      this.queryParams.videoId = null;
+      this.periodList = [];
+      this.videoList = [];
+
       // 重置SOP搜索
       this.handleSopClear();