dy-admin-manager/src/views/teamDetail/componentCourse/compoundClass.vue

<template>
  <div>
    <el-form :model="maskForm"
             class="maskForm"
             ref="maskForm"
             :rules="maskRules"
             label-position="right"
             label-width="120px"
             :inline="true">
      <el-row>
        <el-col :span="12">
          <el-form-item label="课程名称"
                        prop="teacher">
            <el-input v-model.trim="maskForm.name"
                      style="width:220px!important"
                      placeholder="请输入课程名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <div style="width:220px!important">
              <a href="#"
                 class="studentTitle"
                 @click="lookStudentList"> 学生列表>></a>
            </div>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="主教老师"
                        prop="teacher">
            <el-select v-model.trim="maskForm.teacher"
                       style="width:220px!important"
                       @change="changeTeacher"
                       clearable
                       filterable>
              <el-option v-for="(item,index) in teacherList"
                         :key="index"
                         :value="item.id"
                         :label="item.realName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="助教老师"
                        v-if="maskForm.type != 'MUSIC_NETWORK'&&maskForm.type != 'HIGH_ONLINE'&&maskForm.groupType == 'MUSIC'"
                        prop="assistant">
            <el-select v-model.trim="maskForm.assistant"
                       style="width:220px!important"
                       clearable
                       filterable
                       multiple
                       collapse-tags>
              <el-option v-for="(item,index) in teacherList"
                         :key="index"
                         :value="item.id"
                         :label="item.realName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span='12'>
          <el-form-item label="上课日期"
                        prop="date">
            <el-date-picker v-model.trim="maskForm.date"
                            type="date"
                            :picker-options="{
                            firstDayOfWeek:1
                          }"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="课程时长(分钟)"
                        prop="timer">
            <el-input type='number'
                      :disabled='isDisabled'
                      style="width:220px!important"
                      v-model="maskForm.timer"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始时间"
                        prop="startTime">
            <el-time-picker placeholder="起始时间"
                            v-model.trim="maskForm.startTime"
                            @change="changeStartTime"
                            format='HH:mm'
                            value-format='HH:mm'
                            :picker-options="{
                            selectableRange: '04:30:00 - 23:30:00'
                            }"></el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间"
                        prop="endTime">
            <el-time-picker placeholder="结束时间"
                            v-model.trim="maskForm.endTime"
                            disabled
                            format='HH:mm'
                            value-format='HH:mm'
                            :picker-options="{
                            start: '04:30',
                            step: '00:05',
                            end: '23:30',
                            minTime: maskForm.startTime
                          }"></el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="课程类型"
                        v-if="maskForm.type == 'VIP'"
                        prop="courseType">
            <el-select clearable
                       style="width:220px!important"
                       v-model.trim="maskForm.teachMode">
              <el-option label="线上课"
                         value="ONLINE"></el-option>
              <el-option label="线下课"
                         value="OFFLINE"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="教学地点"
                        v-if="maskForm.teachMode == 'OFFLINE'&&  maskForm.type == 'VIP'">
            <el-select v-model.trim="maskForm.address"
                       style="width:220px!important"
                       filterable
                       clearable>
              <el-option v-for="(item,index) in schoolList"
                         :key="index"
                         :value="item.id"
                         :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="$listeners.closeReset">取 消</el-button>
      <el-button type="primary"
                 @click="submitResetClass">确 定</el-button>
    </div>
    <el-dialog title="学员列表"
               width="650px"
               append-to-body
               :visible.sync="studentListModalVisible"
               destroy-on-close>
      <viewStudentList :list="studentListModal"
                       @close="studentListModalVisible = false" />
    </el-dialog>
  </div>
</template>
<script>
import { diffTimerFormMinute, addTimerFormMinute } from '@/utils/date'
import { getTeacher, resetCourse, getCourseScheduleDetail,getCourseStudents } from "@/api/buildTeam";
import viewStudentList from '../components/modals/view-student-list'
import { getTeachSchool } from "@/api/teacherManager";
import cleanDeep from 'clean-deep'
import dayjs from 'dayjs';
export default {
  props: ["show", "id", "isDisabled","idList"],
  components: { viewStudentList },
  data () {
    return {
      courseVisible: false,
      studentListModalVisible: false,
      maskForm: {
        teacher: null,
        assistant: null,
        date: null,
        timer: null,
        startTime: null,
        endTime: null,
        name: null
      },
      maskRules: {
        name: [{ required: true, message: "请输入课程名称", trigger: "blur" }],
        teacher: [
          { required: true, message: "请选择主教老师名称", trigger: "blur" }
        ],
        date: [{ required: true, message: "请选择上课时间", trigger: "blur" }],
        startTime: [{ required: true, message: '请选择上课开始时间', trigger: 'blur' },],
        endTime: [{ required: true, message: '请选择上课结束时间', trigger: 'blur' },],
      },
      teacherList: [],
      schoolList: [],
      studentListModal: []
    }
  },
  mounted () {
    getTeacher().then(res => {
      if (res.code == 200) {
        this.teacherList = res.data;
      }
    });

    this.getDetail(this.id)

  },
  methods: {
    submitResetClass () {
      let maskForm = this.maskForm;
      if (!maskForm.startTime || !maskForm.endTime) {
        this.$message.error("请填写开始时间或结束时间");
        return;
      }
      this.$confirm("是否确定?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let teachingTeacherIdList = maskForm.assistant.join(",");
          if (teachingTeacherIdList.length <= 0) {
            let teachingTeacherIdList = null;
          }
          let obj = {
            actualTeacherId: maskForm.teacher,
            startClassTimeStr: maskForm.startTime,
            endClassTimeStr: maskForm.endTime,
            id: maskForm.id,
            teachingTeacherIdList,
            classDate: maskForm.date,
            type: maskForm.type,
            groupType: maskForm.groupType,
            schoolId: this.maskForm.address,
            teachMode: this.maskForm.teachMode,
          };
          resetCourse(cleanDeep(obj)).then(res => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.$emit('getList')
              this.$emit('closeReset')
              // this.getList();
              // this.courseVisible = false;
            }
          });
        })
        .catch(() => { });
    },
    changeStartTime (val) {

      this.$nextTick(res => {
        console.log(addTimerFormMinute(this.maskForm.date, val, this.maskForm.timer))
        if (val) {
          this.$set(this.maskForm, 'endTime', addTimerFormMinute(this.maskForm.date, val, this.maskForm.timer))
        } else {
          this.$set(this.maskForm, 'endTime', '')
        }

      })
    },
    changeTeacher (val) {
      if (val) {
        getTeachSchool({
          userId: val
        }).then(res => {
          if (res.code == 200) {
            this.schoolList = res.data;
          }
        })
        this.maskForm.address = ''
      }
    },
    getDetail (id) {
      getCourseScheduleDetail({ courseScheduleId: id }).then(res => {
        if (res.code == 200) {
          console.log(res.data.groupType)
          this.maskForm = {
            id: res.data.id,
            teacher: res.data.actualTeacherId,
            assistant: [],
            date: dayjs(res.data.classDate).format('YYYY-MM-DD'),
            startTime: dayjs(res.data.startClassTime).format('HH:mm'),
            endTime: dayjs(res.data.endClassTime).format('HH:mm'),
            timer: null,
            type: res.data.type,
            groupType: res.data.groupType,
            schoolId: res.data.schoolId,
            teachMode: res.data.teachMode,
            name: res.data.name
          }
          this.maskForm.assistant = [];
          for (let i in res.data.teachingTeachers) {
            if (res.data.teachingTeachers[i].teacherRole == "TEACHING") {
              this.maskForm.assistant.push(res.data.teachingTeachers[i].userId);
            }
          }
          let time = diffTimerFormMinute(dayjs(res.data.classDate).format('YYYY-MM-DD'), dayjs(res.data.startClassTime).format('HH:mm'), dayjs(res.data.endClassTime).format('HH:mm'))
          console.log(dayjs(res.data.startClassTime).format('HH:mm'))
          this.maskForm.timer = time;
          if (this.maskForm.teacher) {
            getTeachSchool({
              userId: this.maskForm.teacher
            }).then(res => {
              if (res.code == 200) {
                this.schoolList = res.data;
              }
            })
          }
        }
      })
    },
    lookStudentList(){
      getCourseStudents({courseIds:this.idList}).then(res=>{
        if(res.code == 200){
          this.studentListModal = res.data;
          this.studentListModalVisible = true;
        }
      })
    }
  },

  watch: {
    id (val) {
      if (val) {
        this.getDetail(val)
      }
    },
    'maskForm.timer' (val) {
      this.$nextTick(res => {
        if (val) {
          this.$set(this.maskForm, 'endTime', addTimerFormMinute(this.maskForm.date, this.maskForm.startTime, val))
        } else {
          this.$set(this.maskForm, 'endTime', '')
        }

      })
    }
  }

}
</script>
<style lang="scss" scoped>
/deep/.dialog-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.studentTitle {
  width: 120px !important;
  text-align: right;
  display: inline-block;
  color: #409eff;
}
</style>