|
|
@@ -0,0 +1,300 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-form :model="maskForm"
|
|
|
+ class="maskForm"
|
|
|
+ ref="maskForm"
|
|
|
+ :rules="maskRules"
|
|
|
+ label-position="right"
|
|
|
+ label-width="120px"
|
|
|
+ :inline="true">
|
|
|
+ <el-form-item label="课程名称"
|
|
|
+ prop="teacher">
|
|
|
+ <el-input v-model.trim="maskForm.name"
|
|
|
+ style="width:220px!important"
|
|
|
+ placeholder="请输入课程名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div style="width:220px!important">
|
|
|
+ <a href="#"
|
|
|
+ style="width:120px!important; text-align: right;"> 学生列表>></a>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <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-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
|
|
|
+ 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'&& 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-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 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,
|
|
|
+ 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: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ 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>
|
