src/views/course/userCoursePeriod/index.vue

@@ -337,7 +337,7 @@
 
     <!-- 添加课程对话框-->
     <el-dialog title="添加课程" :visible.sync="course.addOpen" width="500px" append-to-body>
-      <el-form ref="courseAddForm" :model="course.form" label-width="100px">
+      <el-form ref="courseAddForm" :model="course.form" :rules="courseAddRules" label-width="100px">
         <el-form-item label="课程" prop="courseId">
           <el-select filterable  v-model="course.form.courseId" placeholder="请选择课程"  clearable size="small" @change="courseChange(course.form.courseId)" style="width: 100%" :value-key="'dictValue'">
             <el-option
@@ -348,7 +348,7 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="小节" prop="videoId">
+        <el-form-item label="小节" prop="videoIds">
           <el-select filterable  v-model="course.form.videoIds" placeholder="请选择小节" :multiple-limit="getDiff(course.row.periodStartingTime, course.row.periodEndTime) - course.total" multiple clearable size="small" style="width: 100%" :value-key="'dictValue'">
             <el-option
               v-for="dict in videoList"
@@ -388,23 +388,24 @@
       </div>
     </el-dialog>
     <el-dialog title="修改看课时间" :visible.sync="updateCourse.open" width="500px" append-to-body>
-      <el-form ref="courseUpdateForm" :model="updateCourse.form" label-width="100px">
+      <el-form ref="courseUpdateForm" :model="updateCourse.form" :rules="courseUpdateRules" label-width="100px">
         <el-form-item label="看课时间" prop="timeRange">
           <el-time-picker
             is-range
             v-model="updateCourse.form.timeRange"
             range-separator="至"
             start-placeholder="开始时间"
-            value-format="HH:mm:ss"
             end-placeholder="结束时间"
+            value-format="HH:mm:ss"
+            @change="onTimeRangeChange"
             placeholder="选择时间范围">
           </el-time-picker>
         </el-form-item>
-        <el-form-item label="领取红包时间" prop="lastJoinTime">
+        <el-form-item label="领取红包时间" prop="joinTime">
           <el-time-picker
             v-model="updateCourse.form.joinTime"
             value-format="HH:mm:ss"
-            format="HH:mm:ss"
+            :picker-options="getPickerOptions()"
             placeholder="选择时间范围">
           </el-time-picker>
           <p style="color: red;margin: 0;font-size: 12px">超过领取红包时间，只允许看课，不允许领取红包</p>
@@ -474,7 +475,7 @@
               >修改看课时间</el-button>
             </el-col>
           </el-row>
-          <el-table v-loading="course.loading" :data="course.list" @selection-change="handleSelectionCourseChange" border>
+          <el-table ref="courseTable" v-loading="course.loading" :data="course.list" @selection-change="handleSelectionCourseChange" border>
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column label="课程" align="center" prop="courseName" width="180" />
             <el-table-column label="小节" align="center" prop="videoName" />
@@ -630,7 +631,10 @@ export default {
         open: false,
         loading: true,
         ids: [],
-        form: {},
+        form: {
+          timeRange: null,
+          joinTime: null
+        },
       },
       // 表单校验
       rules: {
@@ -640,6 +644,9 @@ export default {
         companyId: [
           { required: true, message: '公司不能为空', trigger: 'change' }
         ],
+        courseStyle: [
+          { required: true, message: '课程风格不能为空', trigger: 'change' }
+        ],
         redPacketGrantMethod: [
           { required: true, message: '红包发放方式不能为空', trigger: 'change' }
         ],
@@ -674,6 +681,45 @@ export default {
           { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
         ]
       },
+      // 添加课程表单校验
+      courseAddRules: {
+        courseId: [
+          { required: true, message: '请选择课程', trigger: 'change' }
+        ],
+        videoIds: [
+          { required: true, message: '请选择小节', trigger: 'change' },
+          { type: 'array', min: 1, message: '请至少选择一个小节', trigger: 'change' }
+        ]
+      },
+      // 修改看课时间表单校验
+      courseUpdateRules: {
+        timeRange: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!value || !Array.isArray(value) || value.length !== 2) {
+                callback(new Error('请选择完整的看课时间范围'));
+              } else {
+                callback();
+              }
+            },
+            trigger: 'change'
+          }
+        ],
+        joinTime: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!value || typeof value !== 'string') {
+                callback(new Error('请选择领取红包时间'));
+              } else {
+                callback();
+              }
+            },
+            trigger: 'change'
+          }
+        ]
+      },
       // 滚动节流标志
       scrollThrottle: false,
       // 加载更多状态
@@ -859,7 +905,7 @@ export default {
         return;
       }
       const periodIds = row.periodId || this.ids;
-      this.$confirm('是否确认删除该营期？', "警告", {
+      this.$confirm('是否确认删除该营期？', "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning"
@@ -1261,9 +1307,15 @@ export default {
       this.updateCourse.open = true;
       this.updateCourse.form = {
         ids: this.updateCourse.ids,
-        timeRange: null, // 初始化timeRange
-        joinTime: null // 初始化joinTime
+        timeRange: null,
+        joinTime: null
       };
+      // 重置表单校验状态（但不清空选中状态）
+      this.$nextTick(() => {
+        if (this.$refs.courseUpdateForm) {
+          this.$refs.courseUpdateForm.resetFields();
+        }
+      });
     },
     closeAddCourse() {
       this.course.addOpen = false;
@@ -1281,6 +1333,30 @@ export default {
     },
     closeUpdateCourse() {
       this.updateCourse.open = false;
+
+      // 清空选中的课程id，使【修改看课时间】按钮变为禁用状态
+      this.updateCourse.ids = [];
+
+      // 清空课程列表的选中状态
+      this.$nextTick(() => {
+        if (this.$refs.courseTable) {
+          this.$refs.courseTable.clearSelection();
+        }
+      });
+
+      // 重置表单数据
+      this.updateCourse.form = {
+        ids: [],
+        timeRange: null,
+        joinTime: null
+      };
+
+      // 重置表单校验
+      this.$nextTick(() => {
+        if (this.$refs.courseUpdateForm) {
+          this.$refs.courseUpdateForm.resetFields();
+        }
+      });
     },
     courseChange(row){
       this.course.form.videoIds = [];
@@ -1308,16 +1384,42 @@ export default {
     submitUpdateCourseForm(){
       this.$refs.courseUpdateForm.validate(valid => {
         if (valid) {
-          if(this.updateCourse.form.timeRange != null && this.updateCourse.form.timeRange.length === 2){
+          // 检查时间范围是否正确
+          if (this.updateCourse.form.timeRange &&
+              Array.isArray(this.updateCourse.form.timeRange) &&
+              this.updateCourse.form.timeRange.length === 2) {
             this.updateCourse.form.startTime = this.updateCourse.form.timeRange[0];
             this.updateCourse.form.endTime1 = this.updateCourse.form.timeRange[1];
+          } else {
+            this.$message.error('请先选择正确的看课时间范围');
+            return;
+          }
+
+          // 检查领取红包时间是否正确
+          if (!this.updateCourse.form.joinTime) {
+            this.$message.error('请选择领取红包时间');
+            return;
           }
+
           // 提交数据
           updateCourseTime(this.updateCourse.form).then(response => {
-            this.$message.success('添加成功');
+            this.$message.success('修改成功');
             this.updateCourse.open = false;
+
+            // 清空选中的课程ID，使【修改看课时间】按钮变为禁用状态
+            this.updateCourse.ids = [];
+
+            // 清空课程列表的选中状态
+            this.$nextTick(() => {
+              if (this.$refs.courseTable) {
+                this.$refs.courseTable.clearSelection();
+              }
+            });
+
             // 重新加载训练营列表
             this.getCourseList();
+          }).catch(error => {
+            this.$message.error('修改失败：' + (error.message || '未知错误'));
           });
         }
       });
@@ -1465,6 +1567,26 @@ export default {
     disabledDate(time) {
       return time.getTime() < new Date(new Date().setHours(0,0,0,0));
     },
+    getPickerOptions() {
+      // 如果已选择看课时间范围，则领取红包时间应在看课时间范围内
+      if (this.updateCourse.form.timeRange &&
+          Array.isArray(this.updateCourse.form.timeRange) &&
+          this.updateCourse.form.timeRange.length === 2) {
+        return {
+          selectableRange: `${this.updateCourse.form.timeRange[0]} - ${this.updateCourse.form.timeRange[1]}`
+        };
+      }
+      // 默认全天可选
+      return {
+        selectableRange: '00:00:00 - 23:59:59'
+      };
+    },
+    onTimeRangeChange() {
+      // 当看课时间范围改变时，清空领取红包时间
+      this.updateCourse.form.joinTime = null;
+      // 强制更新组件以刷新领取红包时间的可选范围
+      this.$forceUpdate();
+    },
   },
 };
 </script>
@@ -1681,7 +1803,7 @@ export default {
 
 /* 添加训练营表单样式 */
 .drawer-footer {
-  //position: absolute;
+  /* position: absolute; */
   bottom: 0;
   left: 0;
   right: 0;