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"
      >
        <remote-search
          :commit="'setTeachers'"
          v-model="maskForm.teacher"
          @change="changeTeacher"
          :width="220"
        />
      </el-form-item>
      <el-form-item label="主教老师" v-else prop="teacher">
        <remote-search
          :commit="'setTeachers'"
          v-model="maskForm.teacher"
          :width="220"
        />
      </el-form-item>
      <el-form-item
        label="助教老师"
        v-if="
          maskForm.type != 'MUSIC_NETWORK' &&
          maskForm.type != 'HIGH_ONLINE' &&
          maskForm.groupType == 'MUSIC'
        "
        prop="assistant"
      >
        <remote-search
          :commit="'setTeachers'"
          v-model="maskForm.assistant"
          :width="220"
          :multiple="true"
        />
      </el-form-item>
      <el-form-item label="上课日期" prop="date">
        <el-date-picker
          v-model.trim="maskForm.date"
          type="date"
          :picker-options="bigin"
          @change="()=>{
            maskForm.startTime = ''
          }"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="课程时长" prop="timer">
        <el-select
          v-model="maskForm.timer"
          @change="changeTime"
          style="width: 220px !important"
        >
          <el-option
            v-for="(item, index) in typeTimeList"
            :key="index"
            :value="parseInt(item)"
            :label="item"
          ></el-option>
        </el-select>
      </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: `${nowTime} - 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,
  getOrganCourseDurationSettings,
} from "@/api/buildTeam";
import { getTeachSchool } from "@/api/teacherManager";
import { getSchool } from "@/api/systemManage";
import cleanDeep from "clean-deep";
import dayjs from "dayjs";
let that;
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: [],
      typeTimeList: [],
      courseTimeList: {},
      organId: "",
      bigin: this.beginDate(),
    };
  },
  created() {
    that = this;
  },
  async mounted() {
    // await getTeacher().then((res) => {
    //   if (res.code == 200) {
    //     this.teacherList = res.data;
    //   }
    // });
    this.$store.dispatch("setTeachers");
    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", "");
        }
      });
    },
    changeTime(val) {
      this.$nextTick((res) => {
        this.maskForm.endTime = addTimerFormMinute(
          this.maskForm.date,
          this.maskForm.startTime,
          val
        );
      });
    },
    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(async (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,
          };
          for (let key in this.courseTimeList) {
            if (key == row.courseScheduleType) {
              this.typeTimeList = this.courseTimeList[key].split(",");
            }
          }
          this.maskForm.assistant = res.data.teachingTeacherIdList;
          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")
          );
          this.organId = res.data.organId;
          let type = res.data.type;
          try {
            const res = await getOrganCourseDurationSettings({
              organId: this.organId,
            });
            this.courseTimeList = res.data;
            for (let key in this.courseTimeList) {
              if (key == type) {
                this.typeTimeList = this.courseTimeList[key].split(",");
              }
            }
          } catch (e) {}

          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;
              }
            });
          }
        }
      });
    },
    beginDate() {
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 <= new Date().getTime();
          //开始时间不选时，结束时间最大值小于等于当天
        },
      };
    },
  },

  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", "");
        }
      });
    },
  },
  computed: {
    nowTime() {
      // console.log(that.maskForm.date)
      let str = "04:30:00";
      if (that.maskForm.date == dayjs(new Date()).format("YYYY-MM-DD")) {
        str = dayjs(new Date()).format("HH:mm:ss");
      }

      return str;
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.dialog-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>