dy-admin-manager/src/views/teamDetail/components/courseList.vue

<template>
  <div class="cl-container">
    <!-- 搜索类型 -->
    <el-form :inline="true"
             class="searchForm"
             v-model.trim="searchForm">
      <el-form-item>
        <el-select v-model.trim="searchForm.courseStatus"
                   clearable
                   filterable
                   placeholder="课程类型">
          <el-option label="基础技能课"
                     value="HIGH"></el-option>
          <el-option label="综合课"
                     value="COMPREHENSIVE"></el-option>
          <el-option label="课堂课"
                     value="CLASSROOM"></el-option>
          <el-option label="合奏课"
                     value="MIX"></el-option>
          <el-option label="集训合奏课"
                     value="TRAINING_MIX"></el-option>
          <el-option label="集训单技课"
                     value="TRAINING_SINGLE"></el-option>
          <el-option label="单技课"
                     value="SINGLE"></el-option>
          <el-option label="线上基础技能课"
                     value="HIGH_ONLINE"></el-option>
          <el-option label="乐团网管课"
                     value="MUSIC_NETWORK"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model.trim="searchForm.classStatus"
                   clearable
                   filterable
                   placeholder="课程状态">
          <el-option label="未开始"
                     value="NOT_START"></el-option>
          <el-option label="进行中"
                     value="UNDERWAY"></el-option>
          <el-option label="已结束"
                     value="OVER"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- getMusicGroupAllClass -->
        <el-select v-model.trim="searchForm.class"
                   placeholder="班级名称"
                   filterable
                   clearable>
          <el-option v-for="(item,index) in classList"
                     :key="index"
                     :value="item.id"
                     :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model.trim="searchForm.isSettlement"
                   placeholder="是否结算"
                   filterable
                   clearable>
          <el-option value="0"
                     label="未结算"></el-option>
          <el-option value="1"
                     label="已结算"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model.trim="searchForm.timer"
                        style="width:420px;"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="课程开始日期"
                        end-placeholder="课程结束日期"
                        :picker-options="{
        firstDayOfWeek: 1
    }"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <div class="searchBtn"
             @click="search">搜索</div>
      </el-form-item>
    </el-form>
    <div class="btnWraps">
      <div class="newBand"
           @click="removeCourses"
           v-permission="'courseSchedule/batchDelete'">批量删除</div>
      <!-- <div class="newBand"
      @click="resetTimer">修改日期</div>-->
    </div>
    <!-- -->

    <!-- 列表 -->
    <div class="tableWrap">
      <el-table :data="tableList"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55"
                         :selectable="checkSelectable"></el-table-column>
        <el-table-column align='center'
                         prop="courseScheduleId"
                         label="课程编号"></el-table-column>
        <el-table-column align="center"
                         width="180px"
                         label="时间">
          <template slot-scope="scope">{{ scope.row.classDate }} {{ scope.row.startClassTime ? scope.row.startClassTime.substr(0, 5) : '' }}-{{ scope.row.endClassTime ? scope.row.endClassTime.substr(0, 5) : '' }}</template>
        </el-table-column>
        <el-table-column align="center"
                         prop="courseScheduleName"
                         label="课程名称"></el-table-column>

        </el-table-column>
        <el-table-column align="center"
                         prop="courseScheduleType"
                         label="课程类型">
          <template slot-scope="scope">
            <div>{{ scope.row.courseScheduleType | coursesType}}</div>
          </template>
        </el-table-column>

        <el-table-column align="center"
                         prop="courseScheduleStatus"
                         label="课程状态">
          <template slot-scope="scope">
            <div>{{ scope.row.courseScheduleStatus | coursesStatus }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="老师签到">
          <template slot-scope="scope">
            <div>{{ scope.row.signInStatus | attendanceType}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="老师签退">
          <template slot-scope="scope">
            <div>{{ scope.row.signOutStatus | attendanceOutType}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="masterTeacherName"
                         label="指导老师"></el-table-column>
        <el-table-column align="center"
                         label="结算状态">
          <template slot-scope="scope">{{ scope.row.settlementTime ? '已结算' : '未结算' }}</template>
        </el-table-column>
        <el-table-column align="center"
                         prop="remark"
                         label="是否点名">
          <template slot-scope="scope">{{ scope.row.isCallNames ? '已点名' : '未点名' }}</template>
        </el-table-column>
        <el-table-column align="center"
                         prop="remark"
                         label="备注"></el-table-column>
        <el-table-column align="center"
                         width="280px"
                         label="操作"
                         fixed="right">
          <template slot-scope="scope">
            <div>
              <!-- {child: 'teacherAttendance/updateTeacherAttendance', parent: '/teamDetails/courseList'} -->
              <el-button v-if="scope.row.courseScheduleStatus == 'OVER' && !scope.row.settlementTime && permission('teacherAttendance/updateTeacherAttendance?t=568')"
                         type="text"
                         @click="onMarkAttendance(scope.row)">补考勤</el-button>
              <el-button v-if="scope.row.courseScheduleStatus == 'OVER' && !scope.row.settlementTime && permission('studentAttendance/updateStudentAttendances?t=570')"
                         type="text"
                         @click="onCallName(scope.row)">点名表</el-button>
              <!-- OVER -->
              <!-- <el-button
                v-if="scope.row.courseScheduleStatus == 'OVER' && permission('courseSchedule/classStartDateAdjust1')"
                type="text"
                @click="resetClass(scope.row)"
              >调整</el-button>-->
              <el-button v-if="!scope.row.settlementTime && permission('courseSchedule/classStartDateAdjust')"
                         type="text"
                         @click="resetClass(scope.row)">调整</el-button>
              <el-button v-if="scope.row.courseScheduleStatus == 'NOT_START' && permission('courseSchedule/batchDelete')"
                         type="text"
                         @click="removeSingleClass(scope.row)">删除</el-button>
              <!-- v-if="scope.row.courseScheduleStatus == 'NOT_START' && permission('courseSchedule/batchDelete')"  teamDetail/resetTpye-->
              <!-- <el-button type="text"
                         @click="resetType(scope.row)"
                         v-if="permission('teamDetail/resetTpye')&&scope.row.courseScheduleType!='HIGH_ONLINE'&&scope.row.courseScheduleType!='MUSIC_NETWORK'">类型调整</el-button> -->
              <el-button type="text"
                         v-if="permission('courseSchedule/cleanAttendance')"
                         @click="clearAttend(scope.row)">清除考勤</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="rules.total"
                  :page.sync="rules.page"
                  :limit.sync="rules.limit"
                  :page-sizes="rules.page_size"
                  @pagination="getList" />
    </div>
    <el-dialog title="课程调整"
               width="400px"
               :before-close="handleClose"
               :visible.sync="courseVisible">
      <el-form :model="maskForm"
               class="maskForm"
               ref="maskForm"
               :rules="maskRules"
               label-position="right"
               label-width="120px"
               :inline="true">
        <!-- <el-form-item label="课程类型" prop="type">
          <el-select v-model.trim="maskForm.type" clearable filterable>
            <el-option
              v-for="(item,index) in courseType"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="主教老师"
                      prop="teacher">
          <el-select v-model.trim="maskForm.teacher"
                     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.courseScheduleType != 'MUSIC_NETWORK'&&maskForm.courseScheduleType != 'HIGH_ONLINE'"
                      prop="assistant">
          <el-select v-model.trim="maskForm.assistant"
                     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="课程时长(分钟)"
                      v-if="courseVisible"
                      prop="timer">
          <el-input type='number'
                    disabled
                    v-model="maskForm.timer"></el-input>
        </el-form-item>
        <el-form-item label="开始时间"
                      v-if="courseVisible"
                      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="结束时间"
                      v-if="courseVisible"
                      prop="endTime">
          <el-time-select placeholder="结束时间"
                          v-model.trim="maskForm.endTime"
                          disabled
                          :picker-options="{
                            start: '04:30',
                            step: '00:05',
                            end: '23:30',
                            minTime: maskForm.startTime
                          }"></el-time-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="courseVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitResetClass">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改时间"
               width="400px"
               :before-close="handleCloseTimer"
               :visible.sync="timerVisible">
      <el-form :model="timerMask">
        <el-form-item label="上课日期"
                      :rules=" [{ required: true, message: '请选择日期', trigger: 'blur' },]">
          <el-date-picker v-model.trim="timerMask.timer"
                          type="date"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          :picker-options="{
                            firstDayOfWeek:1
                          }"
                          placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="timerVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="batchAdjustmentTime">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="补考勤"
               width="400px"
               :visible.sync="markAttendance.status">
      <el-form>
        <el-form-item label="签到状态">{{ markAttendance.dataInfo.signInStatus | attendanceType }}</el-form-item>
        <el-form-item label="签到时间">{{ markAttendance.dataInfo.signInTime}}</el-form-item>
        <el-form-item label="签退状态">{{ markAttendance.dataInfo.signOutStatus | attendanceOutType }}</el-form-item>
        <el-form-item label="签退时间">{{ markAttendance.dataInfo.signOutTime}}</el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="markAttendance.status = false">取 消</el-button>
        <el-button type="primary"
                   :disabled="markAttendance.dataInfo.signOutStatus == 1 && markAttendance.dataInfo.signInStatus == 1 ? true : false"
                   @click="batchAdjustmentTime">确定补卡</el-button>
      </div>
    </el-dialog>

    <el-dialog title="点名表"
               width="800px"
               :visible.sync="rollCall.status">
      <el-table :data="rollCall.gridData">
        <el-table-column align="center"
                         property="userName"
                         label="学员姓名"></el-table-column>
        <el-table-column align="center"
                         property="phone"
                         label="手机号"></el-table-column>
        <el-table-column align="center"
                         property="subjectName"
                         label="学员声部"></el-table-column>
        <el-table-column align="center"
                         label="到课状态">
          <template slot-scope="scope">{{ scope.row.status | studentCallName }}</template>
        </el-table-column>
        <el-table-column align="center"
                         label="操作"
                         width="240px">
          <template slot-scope="scope">
            <el-button size="small"
                       @click="onChangeRollCall('TRUANT', scope.row)"
                       type="primary"
                       round>未到</el-button>
            <el-button size="small"
                       @click="onChangeRollCall('LEAVE', scope.row)"
                       type="warning"
                       round>请假</el-button>
            <el-button size="small"
                       @click="onChangeRollCall('NORMAL', scope.row)"
                       type="success"
                       round>到课</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="rollCall.total"
                  :page.sync="rollCall.page"
                  :limit.sync="rollCall.limit"
                  :page-sizes="rollCall.page_size"
                  @pagination="getCallName" />
    </el-dialog>
    <el-dialog title="类型修改"
               width="400px"
               :visible.sync="typeVisible">
      <el-form :model="typeForm"
               ref="typeForm"
               :rules="typeRules"
               label-position="right"
               label-width="80px;"
               :inline="true">
        <el-form-item label="课程类型"
                      prop="type">
          <el-select v-model.trim="typeForm.type"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in courseType"
                       :key="index"
                       :value="item.value"
                       :label="item.label"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="typeVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitResetType">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import pagination from "@/components/Pagination/index";
import { bathDelete } from "@/api/vipSeting";
import {
  getCourseList,
  findMusicGroupClassTeacher,
  resetCourse,
  getTeacher,
  getMusicGroupAllClass,
  getCourseSchedule,
  batchAdjustment,
  updateTeacherAttendance,
  findAttendanceStudentByCourseWithPage,
  updateStudentAttendances,
  cleanAttendance
} from "@/api/buildTeam";
import { permission } from "@/utils/directivePage";
import { diffTimerFormMinute, addTimerFormMinute } from '@/utils/date'
import { classTimeList } from "@/utils/searchArray";
import cleanDeep from 'clean-deep'
export default {
  name: "tcourseList",
  data () {
    return {
      classTimeList,
      courseType: [
        { value: "SINGLE", label: "单技课" },
        { value: "MIX", label: "合奏课" },
        { value: "TRAINING_SINGLE", label: "集训单技课" },
        { value: "TRAINING_MIX", label: "集训合奏课" },
        { value: "HIGH", label: "基础技能课" },
        { value: "COMPREHENSIVE", label: "综合课" },
        { value: "CLASSROOM", label: "课堂课" },
        // { value: "HIGH_ONLINE", label: "线上基础技能课" },
        // { value: "MUSIC_NETWORK", label: "乐团网管课" },
      ],
      typeVisible: false,
      timerVisible: false,
      courseVisible: false,
      searchForm: {
        courseStatus: "", // 课程类型
        classStatus: "", // 课程状态
        timer: [], // 时间
        class: "",
        isSettlement: ""
      },
      tableList: [],
      searchLsit: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      maskForm: {
        teacher: "",
        assistant: "",
        date: "",
        id: "",
        startTime: "",
        endTime: "",
        type: "",
        timer: '',
        courseScheduleType: null,
      },
      typeForm: {
        teacher: "",
        assistant: "",
        date: "",
        startTime: "",
        endTime: "",
        type: null,
        id: null
      },
      maskRules: {
        // type:[
        //   {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' },],
      },
      typeRules: {
        type: [{ required: true, message: "请选择课程类型", trigger: "blur" }]
      },
      teacherList: [],
      classList: [],
      activeCourseList: [],
      timerMask: {
        timer: ""
      },
      markAttendance: {
        // 考勤状态
        status: false,
        dataInfo: {}
      },
      rollCall: {
        // 点名表
        status: false,
        gridData: [],
        selectItem: {}, // 选中状态
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    };
  },
  components: {
    pagination
  },
  mounted () {
    this.init();
  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      this.teamid = this.$route.query.id;
      this.getList();
      // 获取所有老师
      // findMusicGroupClassTeacher({ musicGroupId: this.teamid }).then(res => {
      //   if (res.code == 200) {
      //     this.teacherList = res.data;
      //   }
      // })
      getTeacher().then(res => {
        if (res.code == 200) {
          this.teacherList = res.data;
        }
      });

      // 获取班级列表
      getMusicGroupAllClass({ musicGroupId: this.teamid }).then(res => {
        if (res.code == 200) {
          this.classList = res.data;
        }
      });
    },
    onMarkAttendance (item) {
      // 补考勤
      this.markAttendance = {
        status: true,
        dataInfo: item
      };
    },
    onCallName (item) {
      // 点名表
      this.rollCall.page = 1;
      this.rollCall.selectItem = item;
      this.getCallName();
    },
    getCallName () {
      let rollCall = this.rollCall;
      let params = {
        page: rollCall.page,
        rows: rollCall.limit,
        courseScheduleId: rollCall.selectItem.courseScheduleId
      };
      findAttendanceStudentByCourseWithPage(params).then(res => {
        let result = res.data;
        rollCall.status = true;
        if (res.code == 200) {
          rollCall.gridData = result.rows;
          rollCall.total = result.total;
        }
      });
    },
    onChangeRollCall (type, row) {
      let rollCall = this.rollCall;
      let params = {
        courseScheduleId: rollCall.selectItem.courseScheduleId,
        studentAttendances: [
          {
            userId: row.studentId,
            status: type
          }
        ]
      };
      updateStudentAttendances(params).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          row.status = type;
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    permission (str, parent) {
      return permission(str, parent);
    },
    search () {
      this.rules.page = 1;
      this.getList();
    },
    getList () {
      let searchForm = this.searchForm;
      if (!searchForm.timer) {
        searchForm.timer = [];
      }
      let obj = {
        classScheduleStatus: searchForm.classStatus || null,
        classScheduleType: searchForm.courseStatus || null,
        musicGroupId: this.teamid,
        startTime: searchForm.timer[0] || null,
        endTime: searchForm.timer[1] || null,
        page: this.rules.page,
        rows: this.rules.limit,
        classGroupId: searchForm.class || null,
        isSettlement: searchForm.isSettlement || null
      };
      getCourseSchedule(obj).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    resetClass (row) {
      this.maskForm.teacher = parseInt(row.masterTeacherId);
      this.maskForm.courseScheduleType = row.courseScheduleType;
      // this.maskForm.type = row.courseScheduleType;
      this.maskForm.assistant = [];
      for (let i in row.teachingTeachers) {
        if (row.teachingTeachers[i].teacherRole == "TEACHING") {
          this.maskForm.assistant.push(row.teachingTeachers[i].userId);
        }
      }
      this.maskForm.date = row.classDate;
      this.$set(
        this.maskForm,
        "startTime",
        row.startClassTimeStr.substring(0, 5)
      );
      let time = diffTimerFormMinute(row.classDate, row.startClassTimeStr, row.endClassTimeStr)
      this.maskForm.timer = time;
      this.maskForm.endTime = addTimerFormMinute(row.classDate, row.startClassTimeStr, time)
      // this.maskForm.endTime = row.endClassTimeStr.substring(0, 5);
      this.maskForm.id = row.courseScheduleId;
      this.courseVisible = true;
      // 修改课时

      // let obj = {
      //   actualTeacherId: this.maskForm.teacher,
      //   classDate: this.maskForm.date,
      //   classGroupId: row.id
      // }
    },
    removeSingleClass (row) {
      this.$confirm("是否删除该课程?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let courseScheduleIds = row.courseScheduleId;
          bathDelete({ courseScheduleIds }).then(res => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => { });
    },
    removeCourses () {
      // 批量删除
      if (this.activeCourseList.length < 1) {
        this.$message.error("请至少选择一节课");
        return;
      }
      let arr = [];
      arr = this.activeCourseList.map(item => {
        return item.courseScheduleId;
      });
      this.$confirm("是否删除该课程?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let courseScheduleIds = arr.join(",");
          bathDelete({ courseScheduleIds }).then(res => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => { });
    },
    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: 'MUSIC'
          };
          resetCourse(cleanDeep(obj)).then(res => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.getList();
              this.courseVisible = false;
            }
          });
        })
        .catch(() => { });
    },
    handleClose () {
      this.courseVisible = false;
      (this.maskForm = {
        teacher: "",
        assistant: "",
        date: "",
        id: "",
        startTime: "",
        endTime: ""
      }),
        this.$refs["maskForm"].resetFields();
    },
    handleSelectionChange (val) {
      this.activeCourseList = val;
    },
    checkSelectable (val) {
      return val.courseScheduleStatus == "NOT_START";
      // return true;
    },
    batchAdjustmentTime () {
      let tempData = this.markAttendance.dataInfo;
      let params = {
        teacherId: tempData.masterTeacherId,
        courseScheduleId: tempData.courseScheduleId,
        signInStatus: 1,
        signOutStatus: 1
      };
      updateTeacherAttendance(params).then(res => {
        if (res.code == 200) {
          this.$message.success("补卡成功");
          this.markAttendance.status = false;
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleCloseTimer () {
      this.timerVisible = false;
      this.timerMask.timer = "";
    },
    resetTimer () {
      if (this.activeCourseList.length < 1) {
        this.$message.error("请至少选择一节课");
        return;
      }
      this.timerVisible = true;
    },
    resetType (row) {
      this.typeForm.type = row.courseScheduleType;
      this.typeForm.id = row.courseScheduleId;
      this.typeForm.teacher = parseInt(row.masterTeacherId);
      // this.maskForm.type = row.courseScheduleType;
      this.typeForm.assistant = [];
      for (let i in row.teachingTeachers) {
        if (row.teachingTeachers[i].teacherRole == "TEACHING") {
          this.typeForm.assistant.push(row.teachingTeachers[i].userId);
        }
      }
      this.typeForm.date = row.classDate;
      this.$set(
        this.typeForm,
        "startTime",
        row.startClassTimeStr.substring(0, 5)
      );
      this.typeForm.endTime = row.endClassTimeStr.substring(0, 5);
      //  console.log(row.type)
      this.typeVisible = true;
    },
    submitResetType () {
      this.$refs.typeForm.validate(res => {
        if (res) {
          let teachingTeacherIdList = this.typeForm.assistant.join(",");
          if (teachingTeacherIdList.length <= 0) {
            let teachingTeacherIdList = null;
          }
          let obj = {
            actualTeacherId: this.typeForm.teacher,
            startClassTimeStr: this.typeForm.startTime,
            endClassTimeStr: this.typeForm.endTime,
            id: this.typeForm.id,
            type: this.typeForm.type,
            teachingTeacherIdList,
            classDate: this.typeForm.date,

          };
          resetCourse(obj).then(res => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.getList();
              this.typeVisible = false;
            }
          });
        }
      });
    },
    // 清除考勤
    clearAttend (row) {
      this.$confirm("是否清除考勤记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          cleanAttendance({ courseScheduleIds: row.courseScheduleId }).then(
            res => {
              if (res.code == 200) {
                this.$message.success("清除成功");
                this.getList();
              } else {
                this.$message.error(res.msg);
              }
            }
          );
        })
        .catch(() => { });
    },
    changeStartTime (val) {
      this.$nextTick(res => {
        this.maskForm.endTime = addTimerFormMinute(this.maskForm.date, val, this.maskForm.timer);
      })
    },

  },
  filters: {
    studentCallName: value => {
      let template = {
        NORMAL: "到课",
        TRUANT: "未到",
        LEAVE: "请假",
        DROP_OUT: "退学",
        "": "未到"
      };
      return template[value];
    }
  }, watch: {
    'maskForm.timer' (val) {
      this.maskForm.endTime = addTimerFormMinute(this.maskForm.date, this.maskForm.startTime, val);
    }
  }
};
</script>
<style lang="scss" scoped>
.cl-container {
  .topFrom {
    margin: 20px 30px 0;
    .classlist {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      ul {
        li {
          list-style: none;
        }
      }
    }
  }
  .searchForm {
    // margin: 0 30px;
  }
}
.btnWraps {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  div {
    margin-right: 20px;
  }
}
.maskForm {
  /deep/.el-input {
    width: 220px;
  }
}
</style>