Browse Source

feat: 实现课程营期视频三级联动下拉选择功能

- 新增营期查询接口 periodList
- 实现课程选择时自动加载营期列表
- 实现营期选择时自动加载视频列表
- 优化级联清空和禁用逻辑
- 完善重置功能,清空所有级联数据
- 添加错误处理和用户提示

修改文件:
- src/api/course/courseRedPacketLog.js
- src/views/course/courseWatchLog/index.vue
- src/views/course/courseWatchLog/watchLog.vue
- src/components/course/userCoursePeriod.vue
xw 1 week ago
parent
commit
b49cf96e60
1 changed files with 80 additions and 9 deletions
  1. 80 9
      src/views/course/courseWatchLog/watchLog.vue

+ 80 - 9
src/views/course/courseWatchLog/watchLog.vue

@@ -70,7 +70,7 @@
       </el-form-item>
       <el-form-item label="课程" prop="courseId">
         <el-select filterable v-model="queryParams.courseId" placeholder="请选择课程" clearable size="small"
-                   @change="courseChange(queryParams.courseId)">
+                   @change="handleCourseChange">
           <el-option
             v-for="dict in courseLists"
             :key="dict.dictValue"
@@ -79,8 +79,20 @@
           />
         </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"
@@ -587,7 +599,7 @@ import {
   myListCourseWatchLog,
   updateCourseWatchLog
 } from "@/api/course/courseWatchLog";
-import {courseList, myListCourseRedPacketLog, videoList} from '@/api/course/courseRedPacketLog'
+import {courseList, myListCourseRedPacketLog, videoList, periodList} from '@/api/course/courseRedPacketLog'
 import {myListLogs} from "@/api/course/courseAnswerlogs";
 import {getMyQwUserList} from "@/api/qw/user";
 import {searchTags} from "../../../api/qw/tag";
@@ -649,6 +661,7 @@ export default {
         }
       },
       courseLists: [],
+      periodList: [], // 营期列表
       videoList: [],
       myQwUserList: [],
       logTypeOptions: [],
@@ -750,6 +763,7 @@ export default {
         companyUserId: null,
         companyId: null,
         courseId: null,
+        periodId: null, // 营期ID
         sTime: null,
         eTime: null,
         upSTime:null,
@@ -841,14 +855,63 @@ export default {
       if (!dates || dates.length < 2) return '';
       return dates.map(date => date.format('YYYY-MM-DD')).join(' ~ ');
     },
-    courseChange(row) {
+    /**
+     * 课程变更处理
+     * 当课程改变时,清空营期和小节的选择和列表
+     */
+    handleCourseChange(courseId) {
+      // 清空下级选择和列表
+      this.queryParams.periodId = null;
       this.queryParams.videoId = null;
-      if (row === '') {
-        this.videoList = [];
-        return
+      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 = [];
       });
     },
     updateQwuser() {
@@ -1081,6 +1144,14 @@ export default {
       this.queryParams.isVip = null; // 重置 isVip 状态
       this.queryParams.qwUserId = null; // 重置 qwUserId
       this.queryParams.externalUserName=null;
+
+      // 重置三级联动相关数据
+      this.queryParams.courseId = null;
+      this.queryParams.periodId = null;
+      this.queryParams.videoId = null;
+      this.periodList = [];
+      this.videoList = [];
+
       // 重置SOP搜索
       this.handleSopClear();
       // 统一重置日历组件