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="id">
            <el-select
              v-model.trim="maskForm.id"
              style="width: 220px !important"
              @change="changeId"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) in dataList"
                :key="index"
                :value="item.id"
                :label="item.name"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  String(item.id)
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="课程名称" prop="name">
            <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"
              >
                <span style="float: left">{{ item.realName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  String(item.id)
                }}</span>
              </el-option>
            </el-select> -->
            <remote-search
              :commit="'setTeachers'"
              v-model="maskForm.teacher"
              :width="220"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="助教老师" prop="assistant">
            <!-- :multiple="true" -->
            <remote-search
              :commit="'setTeachers'"
              v-model="maskForm.assistant"
              :multiple="true"
              :width="220"
            />
            <!-- <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"
              >
                <span style="float: left">{{ item.realName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  String(item.id)
                }}</span>
              </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="cancaleMerge">取 消</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"
        :showOk="true"
        @close="studentListModalVisible = false"
      />
    </el-dialog>
  </div>
</template>
<script>
import { diffTimerFormMinute, addTimerFormMinute } from "@/utils/date";
import {
  getTeacher,
  courseMerge,
  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", "dataList", "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" },
        ],
        id: [{ 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 arr = this.idList.split(",");
          for (let i in arr) {
            if (arr[i] == this.id) {
              arr.splice(i, 1);
            }
          }
          let ids = arr.join(",");
          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,
            mergeCourseIds: ids,
          };
          courseMerge(obj).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              // this.$emit('getList')
              this.$emit("closeReset");
              // this.getList();
              // this.courseVisible = false;
            }
            if (res.code == 206) {
              this.$confirm(`当前课程课酬预计为0,是否继续`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then((res) => {
                obj.allowZeroSalary = true;
                courseMerge(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 = "";
      }
    },
    changeId(val) {
      if (val) {
        this.getDetail(val);
      } else {
        this.$refs.maskForm.resetFields();
      }
    },
    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,
            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;
        }
      });
    },
    cancaleMerge() {
      this.$emit("cancaleMerge");
    },
  },

  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>