课程统计营期课程调整营期下拉框

src/views/course/userCoursePeriod/statistics.vue

@@ -13,6 +13,7 @@
             :loading="courseLoading"
             placeholder="请输入关键词搜索营期课程"
             style="width: 400px"
+            @visible-change="handleCourseDropdownVisible"
           >
             <el-option
               v-for="item in courseOptions"
@@ -20,6 +21,13 @@
               :label="item.videoName"
               :value="item.videoId"
             />
+            <!-- 分页加载更多选项 -->
+            <el-option v-if="hasMoreCourses" key="load-more" disabled class="load-more-option">
+              <div class="load-more" @click="loadMoreCourses">
+                <span>加载更多</span>
+                <i class="el-icon-loading" v-if="loadingMore"></i>
+              </div>
+            </el-option>
           </el-select>
         </el-form-item>
 
@@ -151,10 +159,19 @@ export default {
       // 遮罩层
       loading: false,
       courseLoading: false,
+      loadingMore: false,
       // 总条数
       total: 0,
       // 课程选项
       courseOptions: [],
+      courseTotal: 0,
+      courseQueryParams: {
+        pageNum: 1,
+        pageSize: 10, // 默认每页10条
+        videoName: '',
+        periodId: ''
+      },
+      hasMoreCourses: false,
       companyOptions: [],
       // 统计数据
       statistics: {
@@ -184,6 +201,7 @@ export default {
     periodId: {
       handler(newVal) {
         this.queryParams.periodId = newVal;
+        this.courseQueryParams.periodId = newVal;
         if (this.active && !this.initialized) {
           this.initializeData();
         }
@@ -216,47 +234,66 @@ export default {
     },
 
     /** 获取课程选项 */
-    getCourseOptions() {
-      this.courseLoading = true;
-      getDays(this.queryParams).then(r => {
+    getCourseOptions(isLoadMore = false) {
+      if (!isLoadMore) {
+        this.courseLoading = true;
+        this.courseQueryParams.pageNum = 1; // 重置页码
+      } else {
+        this.loadingMore = true;
+      }
+
+      getDays(this.courseQueryParams).then(r => {
         if (r.code === 200) {
-          this.courseOptions = r.rows;
-          this.loading = false;
+          if (isLoadMore) {
+            // 加载更多时，追加数据
+            this.courseOptions = [...this.courseOptions, ...r.rows];
+          } else {
+            // 首次加载或搜索时，替换数据
+            this.courseOptions = r.rows;
+          }
+
+          this.courseTotal = r.total || 0;
+
+          // 计算是否还有更多数据
+          const loadedCount = this.courseOptions.length;
+          this.hasMoreCourses = loadedCount < this.courseTotal;
+
+          this.courseLoading = false;
+          this.loadingMore = false;
         } else {
           this.$message.error(r.msg || '获取数据失败');
+          this.courseLoading = false;
+          this.loadingMore = false;
         }
-        this.courseLoading = false;
       }).catch(() => {
         this.courseLoading = false;
+        this.loadingMore = false;
       });
     },
 
-    /** 营期课程搜索 */
-    handleCourseSearch(query) {
-      if (query !== '') {
-        this.courseLoading = true;
-        // 这里可以根据实际接口调整搜索参数
-        getDays({
-          periodId: this.queryParams.periodId,
-          pageNum: 1,
-          pageSize: 100,
-          videoName: query // 假设接口支持按课程名称搜索
-        }).then(r => {
-          if (r.code === 200) {
-            this.courseOptions = r.rows;
-          } else {
-            this.$message.error(r.msg || '搜索失败');
-          }
-          this.courseLoading = false;
-        }).catch(() => {
-          this.courseLoading = false;
-        });
-      } else {
-        // 如果搜索词为空，重新加载所有课程
+    /** 加载更多课程 */
+    loadMoreCourses() {
+      if (this.loadingMore) return;
+
+      this.courseQueryParams.pageNum += 1;
+      this.getCourseOptions(true);
+    },
+
+    /** 处理下拉框显示/隐藏 */
+    handleCourseDropdownVisible(visible) {
+      if (visible && this.courseOptions.length === 0) {
+        // 当下拉框显示且没有数据时，加载初始数据
         this.getCourseOptions();
       }
     },
 
+    /** 营期课程搜索 */
+    handleCourseSearch(query) {
+      this.courseQueryParams.videoName = query;
+      this.courseQueryParams.pageNum = 1; // 搜索时重置页码
+      this.getCourseOptions();
+    },
+
     /** 查询按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -392,4 +429,27 @@ export default {
   font-weight: bold;
   color: #303133;
 }
+
+/* 加载更多选项样式 */
+.load-more-option {
+  text-align: center;
+  padding: 8px 0;
+}
+
+.load-more {
+  color: #409EFF;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.load-more:hover {
+  color: #66b1ff;
+}
+
+:deep(.el-select-dropdown__list) {
+  padding-bottom: 0 !important;
+}
 </style>