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

<template>
  <div>
    <el-form :model="maskForm"
             class="maskForm"
             ref="maskForm"
             :rules="maskRules"
             label-position="right"
             label-width="120px"
             :inline="true">
      <!--    -->
      <el-form-item label="主教老师"
                    v-if="maskForm.type == 'VIP'"
                    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-form-item label="主教老师"
                    v-else
                    prop="teacher">
        <el-select v-model.trim="maskForm.teacher"
                   style="width:220px!important"
                   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-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-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-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-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-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-form-item label="课程类型"
                    v-if="maskForm.type == 'VIP'"
                    prop="courseType">
        <el-select clearable
                   @change="typeChange"
                   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-form-item label="教学地点"
                    v-if="maskForm.teachMode == 'OFFLINE'">
        <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-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="$listeners.closeReset">取 消</el-button>
      <el-button type="primary"
                 @click="submitResetClass">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { diffTimerFormMinute, addTimerFormMinute } from '@/utils/date'
import { getTeacher, resetCourse, getCourseScheduleDetail } from "@/api/buildTeam";
import { getTeachSchool } from "@/api/teacherManager";
import { getSchool } from "@/api/systemManage"
import cleanDeep from 'clean-deep'
import dayjs from 'dayjs';
export default {
  props: ["show", "id", "isDisabled"],
  data () {
    return {
      courseVisible: false,
      maskForm: {
        teacher: null,
        assistant: null,
        date: null,
        timer: null,
        startTime: null,
        endTime: null
      },
      maskRules: {
        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: []
    }
  },
  async mounted () {
    await 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(() => { });
    },
    typeChange() {
      this.$set(this.maskForm, 'address', null)
    },
    changeStartTime (val) {

      this.$nextTick(res => {
        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 = null
      }
    },
    getDetail (id) {
      getCourseScheduleDetail({ courseScheduleId: id }).then(res => {
        if (res.code == 200) {
          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,
            address: res.data.schoolId,
            teachMode: res.data.teachMode,
          }
          this.maskForm.assistant = res.data.teachingTeacherIdList;
          // 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 && this.maskForm.type == 'VIP') {
            getTeachSchool({
              userId: this.maskForm.teacher
            }).then(res => {
              if (res.code == 200) {
                this.schoolList = res.data;
              }
            })
          } else {
            getSchool({ organId: res.data.organId }).then(res => {
              if (res.code == 200) {
                this.schoolList = res.data;
              }
            })
          }
        }
      })
    }
  },

  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;
}
</style>