zhjwxt/uniapp/pages/coach/schedule/add_schedule.vue

<template>
  <view class="add-schedule-container">
    <view class="form-container">
      <fui-form>
        <!-- 课程选择 -->
        <fui-form-item label="课程" required>
          <view class="selector-input" @click="showCoursePicker = true">
            <text>{{ selectedCourse ? selectedCourse.course_name : '请选择课程' }}</text>
            <fui-icon name="arrowdown" :size="32" color="#CCCCCC"></fui-icon>
          </view>
          <fui-picker
            :show="showCoursePicker"
            :options="courseOptions"
            valueKey="id"
            textKey="course_name"
            @confirm="onCourseSelect"
            @cancel="showCoursePicker = false"
          ></fui-picker>
        </fui-form-item>
        
        <!-- 班级选择 -->
        <fui-form-item label="班级">
          <view class="selector-input" @click="showClassPicker = true">
            <text>{{ selectedClass ? selectedClass.class_name : '请选择班级（可选）' }}</text>
            <fui-icon name="arrowdown" :size="32" color="#CCCCCC"></fui-icon>
          </view>
          <fui-picker
            :show="showClassPicker"
            :options="classOptions"
            valueKey="id"
            textKey="class_name"
            @confirm="onClassSelect"
            @cancel="showClassPicker = false"
          ></fui-picker>
        </fui-form-item>
        
        <!-- 教练选择 -->
        <fui-form-item label="授课教练" required>
          <view class="selector-input" @click="showCoachPicker = true">
            <text>{{ selectedCoach ? selectedCoach.name : '请选择教练' }}</text>
            <fui-icon name="arrowdown" :size="32" color="#CCCCCC"></fui-icon>
          </view>
          <fui-picker
            :show="showCoachPicker"
            :options="coachOptions"
            valueKey="id"
            textKey="name"
            @confirm="onCoachSelect"
            @cancel="showCoachPicker = false"
          ></fui-picker>
        </fui-form-item>
        
        <!-- 场地选择 -->
        <fui-form-item label="上课场地" required>
          <view class="selector-input" @click="showVenuePicker = true">
            <text>{{ selectedVenue ? selectedVenue.venue_name : '请选择场地' }}</text>
            <fui-icon name="arrowdown" :size="32" color="#CCCCCC"></fui-icon>
          </view>
          <fui-picker
            :show="showVenuePicker"
            :options="venueOptions"
            valueKey="id"
            textKey="venue_name"
            @confirm="onVenueSelect"
            @cancel="showVenuePicker = false"
          ></fui-picker>
        </fui-form-item>
        
        <!-- 日期选择 -->
        <fui-form-item label="上课日期" required>
          <view class="selector-input" @click="showDatePicker = true">
            <text>{{ formData.course_date || '请选择日期' }}</text>
            <fui-icon name="calendar" :size="32" color="#CCCCCC"></fui-icon>
          </view>
          <fui-date-picker
            :show="showDatePicker"
            @confirm="onDateSelect"
            @cancel="showDatePicker = false"
            :value="formData.course_date"
          ></fui-date-picker>
        </fui-form-item>
        
        <!-- 时间选择 -->
        <fui-form-item label="上课时间" required>
          <view class="selector-input" @click="showTimePicker = true">
            <text>{{ formData.time_slot || '请选择时间段' }}</text>
            <fui-icon name="time" :size="32" color="#CCCCCC"></fui-icon>
          </view>
          <fui-picker
            :show="showTimePicker"
            :options="timeSlotOptions"
            valueKey="value"
            textKey="text"
            @confirm="onTimeSelect"
            @cancel="showTimePicker = false"
          ></fui-picker>
        </fui-form-item>
        
        <!-- 容量设置 -->
        <fui-form-item label="课程容量" required>
          <fui-input
            type="number"
            :value="formData.available_capacity"
            placeholder="请输入课程容量"
            @input="formData.available_capacity = $event"
          ></fui-input>
        </fui-form-item>
        
        <!-- 备注信息 -->
        <fui-form-item label="备注">
          <fui-textarea
            :value="formData.remark"
            placeholder="请输入备注信息（可选）"
            @input="formData.remark = $event"
            maxlength="200"
          ></fui-textarea>
        </fui-form-item>
      </fui-form>
      
      <!-- 提交按钮 -->
      <view class="btn-container">
        <fui-button type="primary" @click="submitForm" :loading="submitting">创建课程安排</fui-button>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/api/apiRoute.js';

export default {
  data() {
    return {
      // 表单数据
      formData: {
        course_id: '',
        class_id: '',
        coach_id: '',
        venue_id: '',
        course_date: '',
        time_slot: '',
        available_capacity: '',
        remark: ''
      },
      
      // 选择器数据
      showCoursePicker: false,
      showClassPicker: false,
      showCoachPicker: false,
      showVenuePicker: false,
      showDatePicker: false,
      showTimePicker: false,
      
      // 选项数据
      courseOptions: [],
      classOptions: [],
      coachOptions: [],
      venueOptions: [],
      timeSlotOptions: [],
      
      // 选中的数据对象
      selectedCourse: null,
      selectedClass: null,
      selectedCoach: null,
      selectedVenue: null,
      
      // 状态标记
      submitting: false,
      
      // 预填充数据
      prefillDate: '',
      prefillTime: '',
      prefillTimeSlot: ''
    };
  },
  
  onLoad(options) {
    // 从路由参数获取预填充数据
    if (options.date) {
      this.prefillDate = options.date;
      this.formData.course_date = options.date;
    }
    
    if (options.time) {
      this.prefillTime = options.time;
    }
    
    if (options.time_slot) {
      this.prefillTimeSlot = options.time_slot;
      this.formData.time_slot = options.time_slot;
    }
    
    // 加载初始数据
    this.loadFilterOptions();
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 加载选项数据
    async loadFilterOptions() {
      uni.showLoading({
        title: '加载数据中...'
      });
      
      try {
        // 并行加载所有选项数据
        const [courseRes, classRes, coachRes, venueRes] = await Promise.all([
          api.getCourseListForSchedule(),
          api.getClassListForSchedule(),
          api.getCoachListForSchedule(),
          api.getVenueListForSchedule()
        ]);
        
        // 设置课程选项
        if (courseRes.code === 1) {
          this.courseOptions = courseRes.data || [];
        }
        
        // 设置班级选项
        if (classRes.code === 1) {
          this.classOptions = classRes.data || [];
        }
        
        // 设置教练选项
        if (coachRes.code === 1) {
          this.coachOptions = coachRes.data || [];
        }
        
        // 设置场地选项
        if (venueRes.code === 1) {
          this.venueOptions = venueRes.data || [];
        }
        
        // 如果有预填充时间段，设置选中的时间段
        if (this.prefillTimeSlot) {
          this.formData.time_slot = this.prefillTimeSlot;
        }
        
        console.log('加载的数据:', {
          courses: this.courseOptions.length,
          classes: this.classOptions.length,
          coaches: this.coachOptions.length,
          venues: this.venueOptions.length
        });
        
      } catch (error) {
        console.error('加载筛选选项失败:', error);
        uni.showToast({
          title: '加载筛选选项失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },
    
    // 生成时间段选项
    generateTimeSlotOptions() {
      const timeSlots = [];
      
      // 早上时间段
      for (let hour = 8; hour < 12; hour++) {
        const startHour = hour.toString().padStart(2, '0');
        const endHour = (hour + 1).toString().padStart(2, '0');
        timeSlots.push({
          value: `${startHour}:00-${endHour}:00`,
          text: `${startHour}:00-${endHour}:00`
        });
      }
      
      // 下午时间段
      for (let hour = 12; hour < 18; hour++) {
        const startHour = hour.toString().padStart(2, '0');
        const endHour = (hour + 1).toString().padStart(2, '0');
        timeSlots.push({
          value: `${startHour}:00-${endHour}:00`,
          text: `${startHour}:00-${endHour}:00`
        });
      }
      
      // 晚上时间段
      for (let hour = 18; hour < 22; hour++) {
        const startHour = hour.toString().padStart(2, '0');
        const endHour = (hour + 1).toString().padStart(2, '0');
        timeSlots.push({
          value: `${startHour}:00-${endHour}:00`,
          text: `${startHour}:00-${endHour}:00`
        });
      }
      
      this.timeSlotOptions = timeSlots;
    },

    // 动态加载场地可用时间段
    async loadTimeSlots() {
      if (!this.formData.venue_id || !this.formData.course_date) {
        return;
      }

      try {
        const res = await api.getVenueTimeSlots({
          venue_id: this.formData.venue_id,
          date: this.formData.course_date
        });

        if (res.code === 1) {
          // 转换API返回的时间段格式为选择器需要的格式
          this.timeSlotOptions = res.data.map(slot => ({
            value: slot.time_slot,
            text: slot.time_slot
          }));
          
          console.log('可用时间段:', this.timeSlotOptions);
        } else {
          // 如果API失败，则使用默认时间段
          this.generateTimeSlotOptions();
          uni.showToast({
            title: res.msg || '获取可用时间段失败，使用默认时间段',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('加载时间段失败:', error);
        // 如果API失败，则使用默认时间段
        this.generateTimeSlotOptions();
        uni.showToast({
          title: '获取可用时间段失败，使用默认时间段',
          icon: 'none'
        });
      }
    },
    
    // 选择器处理方法
    onCourseSelect(e) {
      const index = e.index;
      if (index >= 0 && index < this.courseOptions.length) {
        this.selectedCourse = this.courseOptions[index];
        this.formData.course_id = this.selectedCourse.id;
      }
      this.showCoursePicker = false;
    },
    
    onClassSelect(e) {
      const index = e.index;
      if (index >= 0 && index < this.classOptions.length) {
        this.selectedClass = this.classOptions[index];
        this.formData.class_id = this.selectedClass.id;
      } else {
        this.selectedClass = null;
        this.formData.class_id = '';
      }
      this.showClassPicker = false;
    },
    
    onCoachSelect(e) {
      const index = e.index;
      if (index >= 0 && index < this.coachOptions.length) {
        this.selectedCoach = this.coachOptions[index];
        this.formData.coach_id = this.selectedCoach.id;
      }
      this.showCoachPicker = false;
    },
    
    onVenueSelect(e) {
      const index = e.index;
      if (index >= 0 && index < this.venueOptions.length) {
        this.selectedVenue = this.venueOptions[index];
        this.formData.venue_id = this.selectedVenue.id;
        
        // 如果场地有默认容量，设置容量
        if (this.selectedVenue.capacity) {
          this.formData.available_capacity = this.selectedVenue.capacity;
        }
        
        // 如果已选择日期，则重新加载时间段
        if (this.formData.course_date) {
          this.loadTimeSlots();
        }
      }
      this.showVenuePicker = false;
    },
    
    onDateSelect(e) {
      this.formData.course_date = e.result;
      this.showDatePicker = false;
      
      // 如果已选择场地，则重新加载时间段
      if (this.formData.venue_id) {
        this.loadTimeSlots();
      }
    },
    
    onTimeSelect(e) {
      const index = e.index;
      if (index >= 0 && index < this.timeSlotOptions.length) {
        this.formData.time_slot = this.timeSlotOptions[index].value;
      }
      this.showTimePicker = false;
    },
    
    // 表单验证
    validateForm() {
      if (!this.formData.course_id) {
        uni.showToast({
          title: '请选择课程',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.coach_id) {
        uni.showToast({
          title: '请选择授课教练',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.venue_id) {
        uni.showToast({
          title: '请选择上课场地',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.course_date) {
        uni.showToast({
          title: '请选择上课日期',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.time_slot) {
        uni.showToast({
          title: '请选择上课时间',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.available_capacity) {
        uni.showToast({
          title: '请输入课程容量',
          icon: 'none'
        });
        return false;
      }
      
      return true;
    },
    
    // 提交表单
    async submitForm() {
      if (!this.validateForm()) {
        return;
      }
      
      this.submitting = true;
      
      try {
        // 准备提交的数据，确保字段名与API接口匹配
        const submitData = {
          campus_id: 1, // 默认校区ID，实际项目中应从用户信息获取
          venue_id: this.formData.venue_id,
          course_date: this.formData.course_date,
          time_slot: this.formData.time_slot,
          course_id: this.formData.course_id,
          coach_id: this.formData.coach_id,
          available_capacity: parseInt(this.formData.available_capacity),
          class_id: this.formData.class_id || 0, // 可选字段
          remarks: this.formData.remark || '', // 字段名转换
          created_by: 'manual'
        };
        
        console.log('提交数据:', submitData);
        
        const res = await api.createCourseSchedule(submitData);
        
        if (res.code === 1) {
          uni.showToast({
            title: '创建成功',
            icon: 'success'
          });
          
          // 延迟返回，让用户看到成功提示
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({
            title: res.msg || '创建失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('创建课程安排失败:', error);
        uni.showToast({
          title: '创建失败，请重试',
          icon: 'none'
        });
      } finally {
        this.submitting = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.add-schedule-container {
  min-height: 100vh;
  background-color: #18181c;
}

.form-container {
  padding: 30rpx;
}

.selector-input {
  height: 80rpx;
  background-color: #23232a;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #fff;
}

.btn-container {
  margin-top: 60rpx;
  padding: 0 30rpx;
}
</style>