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

<template>
  <div class="cl-container">
    <!-- 搜索类型 -->
    <save-form
      :inline="true"
      save-key="teamDetails-courseList"
      class="searchForm"
      ref="searchForm"
      :model="searchForm"
      @submit="search"
      @reset="onReSet"
    >
      <el-form-item prop="courseStatus">
        <el-select
          v-model.trim="searchForm.courseStatus"
          clearable
          filterable
          placeholder="课程类型"
        >
          <el-option
            v-for="(item, index) in courseArray"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="classStatus">
        <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 prop="class">
        <!-- 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 prop="isSettlement">
        <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 prop="homeworkFlag">
        <el-select
          v-model.trim="searchForm.homeworkFlag"
          placeholder="是否布置作业"
          filterable
          clearable
        >
          <el-option :value="false" label="未布置"></el-option>
          <el-option :value="true" label="已布置"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="serviceFlag">
        <el-select
          v-model.trim="searchForm.serviceFlag"
          placeholder="是否服务"
          filterable
          clearable
        >
          <el-option :value="true" label="是"></el-option>
          <el-option :value="false" label="否"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="timer">
        <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>
        <el-button native-type="submit" type="danger">搜索</el-button>
        <el-button type="primary" native-type="reset">重置</el-button>
         <el-button type="primary"     v-if="
                  permission('export/exportMusicGroupCourseScheduleDetail')
                " @click="exportCourse">导出</el-button>
      </el-form-item>
    </save-form>
    <div class="btnWraps"></div>

    <div style="font-size: 14px; padding-bottom: 10px">
      总出勤率：<span style="color: #f85043; font-weight: 600">{{
        detail.attendanceRate
      }}</span>
      &nbsp;&nbsp;&nbsp;&nbsp;总达标率：<span
        style="color: #f85043; font-weight: 600"
        >{{ detail.standardRate }}</span
      >
      &nbsp;&nbsp;&nbsp;&nbsp; 总作业提交率：<span
        style="color: #f85043; font-weight: 600"
        >{{ detail.homeworkCommitRate }}</span
      >
    </div>
    <!-- 列表 -->
    <div class="tableWrap">
      <el-table
        :data="tableList"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <!-- <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
          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="课程状态"
          >s
          <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 v-if="scope.row.courseScheduleStatus != 'NOT_START'">
              {{ scope.row.signInStatus | attendanceType }}
            </div>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="老师签退">
          <template slot-scope="scope">
            <div v-if="scope.row.courseScheduleStatus != 'NOT_START'">
              {{ scope.row.signOutStatus | attendanceOutType }}
            </div>
              <span v-else>--</span>
          </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">
            <div v-if="scope.row.courseScheduleStatus != 'NOT_START'">
              {{ scope.row.isCallNames ? "已点名" : "未点名" }}
            </div>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="attendanceRate" label="出勤率">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.courseScheduleStatistics.attendanceRate&& scope.row.courseScheduleStatus== 'OVER'
                  ? scope.row.courseScheduleStatistics.attendanceRate
                  : "--"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="standardRate" label="达标率">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.courseScheduleStatistics.standardRate&& scope.row.courseScheduleStatus== 'OVER'
                  ? scope.row.courseScheduleStatistics.standardRate
                  : "--"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="remark" label="是否服务">
          <template slot-scope="scope">
            <div>
              {{ scope.row.courseScheduleStatistics.serviceFlag ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="remark" label="是否布置课后作业">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.courseScheduleStatistics.homeworkFlag
                  ? "已布置"
                  : "未布置"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="remark" label="作业提交率">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.courseScheduleStatistics.homeworkCommitRate&&scope.row.courseScheduleStatistics.homeworkFlag
                  ? scope.row.courseScheduleStatistics.homeworkCommitRate
                  : "--"
              }}
            </div>
          </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' &&
                  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/teamCourseListInfo'
                  )
                "
                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="
                  scope.row.courseScheduleStatus == 'OVER' &&
                  !scope.row.settlementTime &&
                  permission(
                    'courseSchedule/cleanAttendancecourseSchedule/classStartDateAdjust/teamCourseListInfo'
                  )
                "
                @click="clearAttend(scope.row)"
                >清除考勤</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        save-key="teamDetails-courseList"
        sync
        :total.sync="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"
        v-if="courseVisible"
        class="maskForm"
        ref="maskForm"
        :rules="maskRules"
        label-position="right"
        label-width="120px"
        :inline="true"
      >
        <el-form-item label="主教老师" prop="teacher">
          <remote-search
            :commit="'setTeachers'"
            v-model="maskForm.teacher"
            :width="220"
          />
        </el-form-item>
        <el-form-item
          label="助教老师"
          v-if="
            maskForm.courseScheduleType != 'MUSIC_NETWORK' &&
            maskForm.courseScheduleType != 'HIGH_ONLINE'
          "
          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="beginDate()"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="课程时长" v-if="courseVisible" prop="timer">
          <el-select v-model="maskForm.timer" @change="changeTime">
            <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="开始时间" 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: `${nowTime} - 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-item
          label="教学地点"
          prop="schoolId"
          v-if="
            maskForm.courseScheduleType != 'HIGH_ONLINE' &&
            maskForm.courseScheduleType != 'MUSIC_NETWORK'
          "
        >
          <el-select
            v-model.trim="maskForm.schoolId"
            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="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"
          v-if="!rollCall.selectItem.settlementTime"
          label="操作"
          width="240px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="onChangeRollCall('TRUANT', scope.row)"
              type="primary"
              round
              >未到</el-button
            >
            <el-button
              size="mini"
              @click="onChangeRollCall('LEAVE', scope.row)"
              type="warning"
              round
              >请假</el-button
            >
            <el-button
              size="mini"
              @click="onChangeRollCall('NORMAL', scope.row)"
              type="success"
              round
              >到课</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        sync
        :total.sync="rollCall.total"
        :page.sync="rollCall.page"
        :limit.sync="rollCall.limit"
        :page-sizes="rollCall.page_size"
        @pagination="getCallName"
      />
    </el-dialog>
  </div>
</template>
<script>
import dayjs from "dayjs";
import pagination from "@/components/Pagination/index";
import { bathDelete } from "@/api/vipSeting";
import {
  resetCourse,
  getMusicGroupAllClass,
  getCourseSchedule,
  updateTeacherAttendance,
  findAttendanceStudentByCourseWithPage,
  updateStudentAttendances,
  cleanAttendance,
  getOrganCourseDurationSettings,
} from "@/api/buildTeam";
import { permission } from "@/utils/directivePage";
import { diffTimerFormMinute, addTimerFormMinute } from "@/utils/date";
import { classTimeList, musicCourseType } from "@/utils/searchArray";
import { getSchool } from "@/api/systemManage";
import cleanDeep from "clean-deep";
import { Export } from "@/utils/downLoadFile";
import { getMusicGroupCourseScheduleStatistics } from "../api";
let that;
export default {
  name: "tcourseList",
  data() {
    return {
      classTimeList,
      courseArray: musicCourseType,
      typeVisible: false,
      timerVisible: false,
      courseVisible: false,
      searchForm: {
        courseStatus: "", // 课程类型
        classStatus: "", // 课程状态
        timer: [], // 时间
        class: "",
        isSettlement: "",
        homeworkFlag: "",
        serviceFlag: "",
      },
      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,
        address: "",
        teachMode: "",
        schoolId: "",
      },
      typeForm: {
        teacher: "",
        assistant: "",
        date: "",
        startTime: "",
        endTime: "",
        type: null,
        id: null,
      },
      maskRules: {
        schoolId: [
          { 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], // 选择限制显示条数
      },
      organId: "",
      schoolList: [],
      courseTimeList: {},
      typeTimeList: [],
      detail: {
        attendanceRate: "0.00%",
        homeworkCommitRate: "0.00%",
        standardRate: "0.00%",
      },
    };
  },
  components: {
    pagination,
  },
  created() {
    that = this;
  },
  mounted() {
    this.init();
    getSchool({ organId: this.$route.query.organId }).then((res) => {
      if (res.code == 200) {
        this.schoolList = res.data;
      }
    });
  },
  activated() {
    this.init();
  },
  methods: {
    async init() {
      this.teamid = this.$route.query.id;
      this.organId = this.$route.query.organId;
      try {
        const res = await getOrganCourseDurationSettings({
          organId: this.organId,
        });
        this.courseTimeList = res.data;
      } catch {}

      // MusicStore.dispatch('getBaseInfo', {
      //     data: { musicGroupId: this.teamid }
      //   }).then((res) => {
      //     console.log(res)
      //   })
      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();
    },
    async 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,
        homeworkFlag: searchForm.homeworkFlag,
        serviceFlag: searchForm.serviceFlag,
      };
      getCourseSchedule(obj).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });

      try {
        const res = await getMusicGroupCourseScheduleStatistics({ ...obj });
        if(res.data){
           this.detail = { ...res.data };
        }

      } catch (e) {
        console.log(e);
      }
    },
   async exportCourse(){
     // 导出
         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,
        homeworkFlag: searchForm.homeworkFlag,
        serviceFlag: searchForm.serviceFlag,
      };
      Export(
        this,
        {
          url: "/api-web/export/exportMusicGroupCourseScheduleDetail",
          fileName: "乐团课表详情.xls",
          method: "get",
          params: {
            ...obj
          },
        },
        "您确定导出乐团课表详情?"
      );
   },
    resetClass(row) {
      this.maskForm.teacher = parseInt(row.masterTeacherId);
      this.maskForm.courseScheduleType = row.courseScheduleType;
      // this.courseTimeList
      for (let key in this.courseTimeList) {
        if (key == row.courseScheduleType) {
          this.typeTimeList = this.courseTimeList[key].split(",");
        }
      }
      // 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.maskForm.schoolId = row.schoolId;
      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;
      let diff = dayjs(maskForm.date + " " + maskForm.startTime).diff(
        new Date(),
        "second"
      );
      if (diff <= 0) {
        this.$message.error("课程开始时间必须大于当前时间");
        return;
      }
      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",
            schoolId: maskForm.schoolId,
          };
          resetCourse(cleanDeep(obj)).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.getList();
              this.courseVisible = false;
            }
            if (res.code == 206) {
              this.$confirm(`当前课程课酬预计为0,是否继续`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then((res) => {
                obj.allowZeroSalary = true;
                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: "",
        schoolId: null,
      }),
        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
        );
      });
    },
    changeTime(val) {
      this.$nextTick((res) => {
        this.maskForm.endTime = addTimerFormMinute(
          this.maskForm.date,
          this.maskForm.startTime,
          val
        );
      });
    },
    onReSet() {
      this.$refs.searchForm.resetFields();
      this.search();
    },
    beginDate() {
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 <= new Date().getTime();
          //开始时间不选时，结束时间最大值小于等于当天
        },
      };
    },
  },
  filters: {
    studentCallName: (value) => {
      let template = {
        NORMAL: "到课",
        TRUANT: "未到",
        LEAVE: "请假",
        DROP_OUT: "退学",
        LATE: "迟到",
        "": "未到",
      };
      return template[value];
    },
  },
  watch: {
    "maskForm.timer"(val) {
      this.maskForm.endTime = addTimerFormMinute(
        this.maskForm.date,
        this.maskForm.startTime,
        val
      );
    },
  },
  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>
.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>