dy-admin-manager/src/views/accompanyManager/accompanys.vue

<template>
  <div class="m-container">
    <div class="titlewrap">
      <h2>
        <el-page-header @back="goBack" :content="name"></el-page-header>
      </h2>
      <p style="margin-bottom: 10px; margin-left: 30px">
        课程有效期:{{ timers }}
      </p>
    </div>

    <!--   v-permission="'vipGroupManage/updateVipBaseInfo'" -->
    <div class="wrap">
      <div
        class="newBand"
        @click="resetTeachers"
        v-if="courseType && courseType != 'TRIAL'"
        v-permission="'courseSchedule/practiceGroupTeacherAdjust'"
      >
        课程组调整
      </div>
      <!-- // accompanys/addCourse -->
      <div
        v-permission="{
          child: 'courseSchedule/batchAddCourses',
          parent: '/accompanys',
        }"
        class="newBand"
        @click="addCourse"
      >
        网管课加课
      </div>
      <div
        class="newBand"
        v-if="courseType && courseType != 'TRIAL'"
        v-permission="'courseSchedule/batchUpdateCourseSchedule'"
        @click="adjustment"
      >
        批量调整
      </div>

      <div
        class="newBand"
        v-permission="'courseSchedule/updateCoursesExpireDate'"
        @click="expireVisible = true"
      >
        有效期调整
      </div>
    </div>

    <div class="tableWrap">
      <el-table
        :data="tableList"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          :selectable="isDisabled"
          width="55"
        ></el-table-column>
        <el-table-column
          label="课程编号"
          align="center"
          prop="id"
        ></el-table-column>
        <el-table-column
          label="课程名称"
          align="center"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="主教老师"
          align="center"
          prop="teacherName"
        ></el-table-column>
        <!-- <el-table-column label="主教老师" align="center" >
          <template slot-scope="scope">
            <div v-show="scope.row.teacher">
              {{scope.row.teacher.realName}}
            </div>
          </template>
        </el-table-column>-->
        <!-- <el-table-column label="班级id"
                         align="center"
                         prop="classGroupId">
        </el-table-column>-->
        <el-table-column label="上课日期" align="center" prop="classDate">
          <template slot-scope="scope">
            <div>
              {{ scope.row.classDate | formatTimer }}
              {{ scope.row.startClassTimeStr | timerForMinFormat }}~{{
                scope.row.endClassTimeStr | timerForMinFormat
              }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="开始时间"
                         align="center"
                         prop="startClassTimeStr">
          <template slot-scope="scope">
            <div>{{ scope.row.startClassTimeStr |  timerForMinFormat}}</div>
          </template>
        </el-table-column>
        <el-table-column label="结束时间"
                         align="center"
                         prop="endClassTimeStr">
          <template slot-scope="scope">
            <div>{{ scope.row.endClassTimeStr | timerForMinFormat}}</div>
          </template>
        </el-table-column> -->
        <el-table-column label="是否点名" align="center" prop="status">
          <template slot-scope="scope">{{
            scope.row.isCallNames ? "是" : "否"
          }}</template>
        </el-table-column>
        <el-table-column label="课程状态" align="center" prop="status">
          <template slot-scope="scope">
            <div>{{ scope.row.status | coursesStatus }}</div>
          </template>
        </el-table-column>
        <el-table-column label="结算状态" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.isSettlement ? "已结算" : "未结算" }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="教学点" align="center" prop="schoolName">
          <template slot-scope="scope">
            <div>{{scope.row.schoolName?scope.row.schoolName:'网络教室'}}</div>
          </template>
        </el-table-column>-->
        <el-table-column
          label="操作"
          width="250px"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                v-if="
                  !scope.row.isSettlement &&
                  permission('courseSchedule/practiceCourseAdjust')
                "
                @click="resetClass(scope.row)"
                >调整</el-button
              >
              <el-button
                type="text"
                v-if="
                  !scope.row.isSettlement &&
                  scope.row.status == 'NOT_START' &&
                  permission('accompanys/remove')
                "
                @click="removeClass(scope.row)"
                >删除</el-button
              >
              <el-button
                type="text"
                v-if="
                  scope.row.status == 'NOT_START' &&
                  courseType != 'TRIAL' &&
                  permission('courseSchedule/practiceCourseTeacherAdjust')
                "
                @click="resetTeacher(scope.row)"
                >更换老师</el-button
              >
              <el-button
                v-if="
                  scope.row.status == 'OVER' &&
                  scope.row.isSettlement == 0 &&
                  permission(
                    '/accompanys/teacherAttendance/updateTeacherAttendance'
                  )
                "
                type="text"
                @click="onMarkAttendance(scope.row)"
                >补考勤</el-button
              >
              <!--  && permission('studentAttendance/updateStudentAttendances', '/accompanys') -->
              <el-button
                v-if="
                  scope.row.status == 'OVER' &&
                  permission(
                    '/accompanys/studentAttendance/updateStudentAttendances'
                  )
                "
                type="text"
                @click="onCallName(scope.row)"
                >点名表</el-button
              >
              <el-button
                type="text"
                v-if="
                  !scope.row.isSettlement &&
                  permission('accompanys/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="expireClose"
      :visible.sync="expireVisible"
    >
      <el-form
        :model="expireForm"
        ref="expireForm"
        :rules="expireRules"
        label-position="right"
        label-width="80px;"
        :inline="true"
      >
        <el-form-item label="有效期开始时间" prop="coursesStartDate">
          <el-date-picker
            v-model.trim="expireForm.coursesStartDate"
            style="width: 200px !important"
            type="date"
            :picker-options="startBigin()"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="有效期结束时间" prop="coursesExpireDate">
          <el-date-picker
            v-model.trim="expireForm.coursesExpireDate"
            style="width: 200px !important"
            type="date"
            :picker-options="bigin"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <div style="padding-left: 15px; color: red">
          <p>有效期开始时间不得晚于课程组第一节课日期</p>
          <p>有效期结束时间不得早于课程组最后一节课日期</p>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="expireVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitExpireDate">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="补考勤"
      width="400px"
      :visible.sync="markAttendance.status"
    >
      <el-form>
        <el-form-item label="签到状态">{{
          markAttendance.dataInfo.isSignIn | attendanceType
        }}</el-form-item>
        <el-form-item label="签到时间">{{
          markAttendance.dataInfo.signInTime
        }}</el-form-item>
        <el-form-item label="签退状态">{{
          markAttendance.dataInfo.isSignOut | 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.isSignIn == 1 &&
            markAttendance.dataInfo.isSignOut == 1
              ? true
              : false
          "
          @click="batchAdjustmentTime"
          >确定补卡</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="课程调整"
      width="400px"
      :before-close="handleClose"
      :visible.sync="courseVisible"
    >
      <el-form
        :model="maskForm"
        ref="maskForm"
        :rules="maskRules"
        label-position="right"
        label-width="80px"
        :inline="true"
      >
        <el-form-item label="上课日期" prop="date" v-if="courseType != 'TRIAL'">
          <el-date-picker
            v-model.trim="maskForm.date"
            type="date"
            :picker-options="courseOption"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <!-- 试听课 -->
        <el-form-item label="上课日期" prop="date" v-else>
          <el-date-picker
            v-model.trim="maskForm.date"
            style="width: 200px !important"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="bigin"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="开始时间"
          prop="startTime"
          :rules="[
            { required: true, message: '请选择开始时间', trigger: 'change' },
          ]"
        >
          <el-time-picker
            placeholder="起始时间"
            v-model="maskForm.startTime"
            @change="changeStartTime"
            format="HH:mm"
            value-format="HH:mm"
            :picker-options="{
              selectableRange: `04:00:00 - 23:30:00`,
            }"
          ></el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-time-picker
            placeholder="结束时间"
            format="HH:mm"
            value-format="HH:mm"
            v-model="maskForm.endTime"
            disabled
          >
          </el-time-picker>
        </el-form-item>
        <!--  v-show="maskForm.teachMode=='OFFLINE'"-->
        <!-- <el-form-item label="课程类型" prop="courseType">
          <el-select clearable 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-show="maskForm.teachMode == 'OFFLINE'">
          <el-select v-model.trim="maskForm.address" 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> 1-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitResetClass">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="isMultiple ? '课程组调整' : '更换老师'"
      width="400px"
      :before-close="teacherClose"
      :visible.sync="teacherVisible"
    >
      <el-form
        :model="teacherForm"
        ref="teacherForm"
        :rules="teacherRules"
        label-position="right"
        label-width="80px;"
        :inline="true"
      >
        <el-form-item label="课程班名称" v-show="isMultiple">
          <el-input v-model.trim="teacherForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="课程组声部" v-show="isMultiple">
          <el-select
            v-model.trim="teacherForm.subjectId"
            @change="changeSound"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in subjectList"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程组老师" v-if="isMultiple">
          <el-select v-model.trim="teacherForm.teacher" filterable clearable>
            <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-else="isMultiple">
          <el-select v-model.trim="teacherForm.teacher" filterable clearable>
            <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-show="isMultiple">
          <el-select
            v-model.trim="teacherForm.educationalTeacherId"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in educationList"
              :key="index"
              :value="item.userId"
              :label="item.userName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isMultiple">
          <p style="color: #ff5353">
            *更改课程组老师，将更换全部未开始课程的老师
          </p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="teacherVisible = false">取 消</el-button>
        <el-button type="primary" @click="subresetTeacher">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="adjustmentName"
      width="800px"
      :visible.sync="adjustmentVisible"
    >
      <el-form
        :model="adjustmentForm"
        label-position="right"
        label-width="120px"
        ref="adjustmentForm"
        :rules="adjustmentRules"
        :inline="true"
      >
        <el-form-item label="已选择课时数" v-if="!isaddCourse">
          <el-input disabled v-model.trim="adjustmentForm.count"></el-input>
        </el-form-item>
        <el-form-item label="添加课时数" prop="addCount" v-if="isaddCourse">
          <el-input
            type="number"
            @mousewheel.native.prevent
            v-model.trim="adjustmentForm.addCount"
          ></el-input>
        </el-form-item>
        <br />
        <!-- <el-form-item label="单课费用" prop="fee" v-show="isaddCourse">
          <el-input v-model.trim="adjustmentForm.fee"></el-input>
        </el-form-item>-->
        <el-form-item label="排课起始时间" prop="courseTime">
          <el-date-picker
            v-model.trim="adjustmentForm.courseTime"
            :picker-options="pickerOptions"
            style="width: 200px !important"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
          <el-checkbox
            style="margin-left: 10px"
            v-model.trim="adjustmentForm.checked"
            >是否跳过节假日</el-checkbox
          >
        </el-form-item>
      </el-form>
      <div class="WeekWrap">
        <h3 style="margin-bottom: 20px">
          循环次数
          <el-button type="text" style="margin-left: 10px" @click="addWeek"
            >添加</el-button
          >
        </h3>
        <div class="countWrap" style="margin-bottom: 10px">
          <div
            class="countItem"
            style="margin-bottom: 20px"
            v-for="(item, index) in weekList"
            :key="index"
          >
            <span>循环周期:</span>
            <el-select v-model.trim="item.dayOfWeek" filterable clearable>
              <el-option
                v-for="(item, index) in weekDateList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <span style="margin-left: 10px">开始时间</span>
            <el-time-picker
              style="margin-left: 10px"
              placeholder
              v-model.trim="item.startClassTime"
              @change="
                (val) => {
                  changeStartTimes(val, item);
                }
              "
              format="HH:mm"
              value-format="HH:mm"
              :picker-options="{
                selectableRange: '04:30:00 - 23:30:00',
              }"
            ></el-time-picker>
            <span style="margin-left: 10px">结束时间</span>
            <el-time-picker
              style="margin-left: 10px"
              placeholder
              v-model.trim="item.endClassTime"
              format="HH:mm"
              value-format="HH:mm"
              disabled
              :picker-options="{
                selectableRange: '04:30:00 - 23:30:00',
              }"
            ></el-time-picker>
            <el-button
              style="margin-left: 10px"
              type="danger"
              @click="removeWeek(item)"
              icon="el-icon-delete"
              circle
            ></el-button>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adjustmentVisible = false">取 消</el-button>
        <el-button
          type="primary"
          v-show="!isaddCourse"
          @click="submitAdjustment"
          >确 定</el-button
        >
        <el-button type="primary" v-show="isaddCourse" @click="addCourseSubmit"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="点名表" width="700px" :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="操作"
          v-if="rollCall.selectItem.isSettlement == 0"
          width="220px"
        >
          <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>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { permission } from "@/utils/directivePage";
import { nextMonthLastDay } from "@/utils/validate";
import {
  findPracticeGroupCourseSchedules,
  practiceCourseAdjus,
  getTeacher,
  practiceGroupManage,
  practiceGroupTeacherAdjust,
  practiceCourseTeacherAdjust,
  cleanAttendance,
  batchAddCourses,
  getPracticeApplySubjects,
  batchUpdateCourseSchedule,
  findEducationUsers,
  updateTeacherAttendance,
  updateCoursesExpireDate,
  findAttendanceStudentByCourseWithPage,
  updateStudentAttendances,
  resetCourse,
} from "@/api/buildTeam";
import {
  vipCourseAdjust,
  batchAppendVipGroupCourses,
  bathDelete,
} from "@/api/vipSeting";
import merge from "webpack-merge";
// import { start } from 'repl';
import { diffTimerFormMinute, addTimerFormMinute } from "@/utils/date";
import dayjs from "dayjs";
let that;
export default {
  components: {
    pagination,
  },
  data() {
    return {
      adjustmentName: "",
      isaddCourse: false,
      adjustmentVisible: false,
      expireVisible: false,
      isMultiple: true,
      name: "网管课程组",
      courseVisible: false,
      teacherVisible: false,
      Frules: null,
      FsearchForm: null,
      userId: null,
      activeRow: null,
      courseType: null,
      rules: {
        // 分页规则
        limit: 20, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 50, 100], // 选择限制显示条数
      },
      tableList: [],
      teacherList: [],
      courseData: [],
      practiceId: null,
      subjectList: [],
      maskForm: {
        date: "",
        startTime: "",
        id: "",
        endTime: "",
      },
      adjustmentForm: {
        count: "",
        courseTime: "",
        checked: false,
        addCount: "",
        courseType: "",
        fee: "",
      },
      startTime: null,
      expireForm: {
        coursesExpireDate: null,
        coursesStartDate: null,
        tempCoursesExpireDate: null,
      },
      expireRules: {
        coursesStartDate: [
          { required: true, message: "请选择有效期开始时间", trigger: "blur" },
        ],
        coursesExpireDate: [
          { required: true, message: "请选择有效期结束时间", trigger: "blur" },
        ],
      },
      maskRules: {
        date: [{ required: true, message: "请选择上课时间", trigger: "blur" }],
        // startTime: [{ required: true, message: '请选择上课开始时间', trigger: 'blur' },],
        // endTime: [
        //   { required: true, message: "请选择上课结束时间", trigger: "blur" }
        // ]
      },
      teacherRules: {
        teacher: [{ required: true, message: "请选择老师", trigger: "blur" }],
        subjectId: [{ required: true, message: "请选择声部", trigger: "blur" }],
        educationalTeacherId: [
          { required: true, message: "请选择乐团主管", trigger: "blur" },
        ],
      },
      teacherForm: {
        teacher: null,
        name: null,
        subjectId: null,
        educationalTeacherId: null,
      },
      courseOption: null,
      coursesExpireDate: null,
      adjustmentRules: {
        courseTime: [{ required: true, message: "请选择开始时间" }],
        addCount: [{ required: true, message: "请输入加课次数" }],
        courseType: [{ required: true, message: "请选择课程类型" }],
        fee: [{ required: true, message: "请输入费用" }],
      },
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        },
      },
      weekList: [
        {
          dayOfWeek: "",
          startTime: "",
          endTime: "",
          moid: new Date().getTime(),
        },
      ],
      weekDateList: [
        { value: "1", label: "星期一" },
        { value: "2", label: "星期二" },
        { value: "3", label: "星期三" },
        { value: "4", label: "星期四" },
        { value: "5", label: "星期五" },
        { value: "6", label: "星期六" },
        { value: "7", label: "星期日" },
      ],
      activeList: [],
      educationList: [],
      timers: null,
      markAttendance: {
        // 考勤状态
        status: false,
        dataInfo: {},
      },
      bigin: this.beginDate(),
      rollCall: {
        // 点名表
        status: false,
        gridData: [],
        selectItem: {}, // 选中状态
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      accompanTime: 25,
    };
  },
  created() {
    that = this;
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.practiceId = this.$route.query.id;
      this.userId = this.$route.query.userId;
      this.courseType = this.$route.query.type;
      this.expireForm.coursesExpireDate = this.$route.query.coursesExpireDate;
      this.expireForm.coursesStartDate = this.$route.query.coursesStartDate;
      this.timers =
        this.$route.query.coursesStartDate +
        "至" +
        this.$route.query.coursesExpireDate;
      //  获取乐团主管
      findEducationUsers().then((res) => {
        if (res.code == 200) {
          this.educationList = res.data;
        }
      });

      //   <!-- 状态 指导老师 活动方案-->
      getTeacher({ organId: this.organId }).then((res) => {
        if (res.code == 200) {
          this.teacherList = res.data;
        }
      });
      // 获取默认声部信息
      getPracticeApplySubjects().then((res) => {
        if (res.code == 200) {
          this.subjectList = res.data;
        }
      });
      // 获取课程组信息
      this.courseOption = this.coursesDate();
      this.getCourseGroup();
      this.getList();
    },
    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.id,
      };
      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.id,
        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);
        }
      });
    },
    lookStudents(row) {
      let id = row.id;
      getStudyStudents({ courseScheduleId: id }).then((res) => {
        if (res.code == 200) {
          this.studentList = res.data;
          this.studentVisible = true;
        }
      });
    },
    getCourseGroup() {
      practiceGroupManage({ search: this.practiceId }).then((res) => {
        if (res.code == 200) {
          this.courseData = res.data.rows;
          if (this.courseData.length > 0) {
            this.name = this.courseData[0].name;
            let originalStartDate = this.courseData[0].coursesStartDate
              ? new Date(this.courseData[0].coursesStartDate)
              : new Date();
            let buyMonths = this.courseData[0].buyMonths;
            let lastDayNum = nextMonthLastDay(
              originalStartDate.getFullYear(),
              originalStartDate.getMonth() + buyMonths + 1
            );
            if (lastDayNum[2] >= originalStartDate.getDate()) {
              originalStartDate.setMonth(
                originalStartDate.getMonth() + buyMonths
              );
            } else {
              originalStartDate = new Date(lastDayNum.join("-"));
            }
            originalStartDate.setDate(originalStartDate.getDate() - 1);
            let overTime =
              originalStartDate.getFullYear() +
              "-" +
              (originalStartDate.getMonth() + 1) +
              "-" +
              originalStartDate.getDate();
            this.expireForm.tempCoursesExpireDate = overTime;
          }
        }
      });
    },
    permission(str, parent) {
      return permission(str, parent);
    },
    beginDate() {
      let self = this;

      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (self.expireForm.tempCoursesExpireDate) {
            return (
              new Date(self.expireForm.tempCoursesExpireDate).getTime() >
              time.getTime()
            );
          } else {
            return time.getTime() >= Date.now();
            //开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
    startBigin(){
      let timer;
        if(this.tableList[0]?.classDate){
           timer = this.tableList[0]?.classDate
        }
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          // 该时间不可调整到课程组第一节课程开始时间之后
          if (timer) {
            return (
              new Date(timer).getTime() <
              time.getTime()
            );
          } else {
            return time.getTime() >= Date.now()
            //开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
    submitExpireDate() {
      this.$refs.expireForm.validate((some) => {
        if (some) {
          updateCoursesExpireDate({
            practiceGroupId: this.practiceId,
            coursesExpireDate: this.expireForm.coursesExpireDate,
            coursesStartDate: this.expireForm.coursesStartDate,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("有效期修改成功");
              this.$router.push({
                query: merge(this.$route.query, { coursesStartDate: this.expireForm.coursesStartDate,coursesExpireDate:this.expireForm.coursesExpireDate }),
              });
              this.expireVisible = false;
              this.getCourseGroup();
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          return;
        }
      });
    },
    onMarkAttendance(item) {
      // 补考勤
      this.markAttendance = {
        status: true,
        dataInfo: item,
      };
    },
    batchAdjustmentTime() {
      let tempData = this.markAttendance.dataInfo;
      let params = {
        teacherId: tempData.actualTeacherId,
        courseScheduleId: tempData.id,
        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);
        }
      });
    },
    getList() {
      // 乔乔说后台分页数据是假的所以不分页 page: this.rules.page, rows: this.rules.limit   this.rules.total = res.data.pageInfo.total;
      findPracticeGroupCourseSchedules({ practiceId: this.practiceId }).then(
        (res) => {
          if (res.code == 200) {
            this.tableList = res.data.pageInfo.rows;
          }
        }
      );
    },
    goBack() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({
        path: "/business/accompany",
      });
    },
    teacherClose() {
      this.isMultiple = false;
      this.teacherForm.teacher = null;
      this.teacherVisible = false;
    },
    handleClose() {
      this.$refs["maskForm"].resetFields();
      this.courseVisible = false;
      // this.startTime = "";
      // this.maskForm = {
      //   date: "",
      //   startTime: "",
      //   id: ""
      // };
    },
    expireClose() {
      this.expireVisible = false;
      this.expireForm.coursesExpireDate = null;
      this.$refs["expireForm"].resetFields();
    },
    submitResetClass() {
      //   endClassTimeStr: this.maskForm.endTime,
      let maskForm = this.maskForm;
      let diff = dayjs(maskForm.date + " " + maskForm.startTime).diff(
        new Date(),
        "second"
      );
      if (diff <= 0) {
        this.$message.error("课程开始时间必须大于当前时间");
        return;
      }
      this.$refs.maskForm.validate((valid) => {
        if (valid) {
          let obj = {
            startClassTime: dayjs(
              this.maskForm.date + " " + this.maskForm.startTime
            ).format("YYYY-MM-DD HH:mm:ss"),
            id: this.maskForm.id,
            classDate: this.maskForm.date,
            groupType: "PRACTICE",
          };
          resetCourse(obj).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.courseVisible = false;
              this.getList();
            }
          });
        }
      });
      // if (!this.startTime) {
      //   this.$message.error("请填写修改时间");
      //   return;
      // }
      // let obj = {
      //   startClassTime: dayjs(this.maskForm.date + ' ' + this.startTime).format('YYYY-MM-DD HH:mm:ss'),
      //   id: this.maskForm.id,
      //   classDate: this.maskForm.date,
      //   groupType: 'PRACTICE'
      // };
      // resetCourse(obj).then(res => {
      //   if (res.code == 200) {
      //     this.$message.success("修改成功");
      //     this.courseVisible = false;
      //     this.getList();
      //   }
      // });
    },
    resetClass(row) {
      /**
       * maskForm.startTime
       *
       */
      this.$nextTick(() => {
        this.maskForm = {
          date: dayjs(row.classDate).format("YYYY-MM-DD"),
          startTime: row.startClassTimeStr.substring(0, 5),
          endTime: row.endClassTimeStr.substring(0, 5),
          id: row.id,
        };
        // this.startTime = row.startClassTimeStr.substring(0, 5);
      });
      this.coursesExpireDate = row.coursesExpireDate;
      // 修改课时
      this.courseVisible = true;
    },
    resetTeacher(row) {
      // 单节课
      this.isMultiple = false;
      this.activeRow = row;
      this.teacherForm.teacher = row.actualTeacherId;
      this.teacherVisible = true;
    },
    resetTeachers() {
      // 课程组
      this.isMultiple = true;
      this.teacherForm.teacher = this.courseData[0].userId;
      this.teacherForm.name = this.courseData[0].name;
      this.teacherForm.subjectId = this.courseData[0].subjectId;
      this.teacherForm.educationalTeacherId =
        this.courseData[0].educationalTeacherId || null;
      this.teacherVisible = true;
    },
    // 提交课程组修改
    subresetTeacher() {
      this.$refs.teacherForm.validate((some) => {
        if (some) {
          if (this.isMultiple) {
            // 修改课程组老师

            practiceGroupTeacherAdjust({
              practiceGroupId: this.practiceId,
              teacherId: this.teacherForm.teacher,
              subjectId: this.teacherForm.subjectId,
              educationalTeacherId: this.teacherForm.educationalTeacherId,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.getCourseGroup();
                this.getList();
                this.teacherVisible = false;
              }
            });
          } else {
            // 修改单节课老师
            practiceCourseTeacherAdjust({
              courseScheduleId: this.activeRow.id,
              teacherId: this.teacherForm.teacher,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.getList();
                this.teacherVisible = false;
              }
            });
          }
        } else {
          return;
        }
      });
    },
    coursesDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate: (time) => {
          // if (self.leftForm.courseStart) {
          // let date = new Date(self.leftForm.courseStart.replace(/-/, "/"));
          // coursesExpireDate
          let date = new Date(this.coursesExpireDate.replace(/-/, "/"));

          return (
            time.getTime() > date.getTime() ||
            time.getTime() + 86400000 <= new Date().getTime()
          );
          // }
          // return;
        },
      };
    },
    // 是否允许批量调整
    isDisabled(row, index) {
      // || !row.isCallNames
      if (row.isSettlement) {
        return false;
      } else {
        return true;
      }
    },
    onCourseExpireDate() {
      // 修改课程有效期
    },
    adjustment() {
      this.adjustmentName = "批量调整";
      this.isaddCourse = false;
      if (this.adjustmentForm.count <= 0) {
        this.$message.error("请至少勾选一节课");
      } else {
        this.adjustmentVisible = true;
      }
    },
    changeSound(val) {
      if (val) {
        this.subjectList.forEach((item) => {
          if (item.id == val) {
            let strArr = this.teacherForm.name.split("•");
            this.teacherForm.name = item.name + "•" + strArr[1];
          }
        });
      }
    },
    addWeek() {
      // 添加循环周期
      this.weekList.push({
        dayOfWeek: "",
        startClassTime: "",
        endClassTime: "",
        id: new Date(),
      });
    },
    // 删除循环周
    removeWeek(item) {
      for (let i in this.weekList) {
        if (this.weekList[i].id == item.id) {
          this.weekList.splice(i, 1);
        }
      }
    },
    // 批量调整
    submitAdjustment() {
      this.$refs["adjustmentForm"].validate((item) => {
        if (item) {
          let week = this.weekList;
          if (!week[0] || !week[0].startClassTime || !week[0].dayOfWeek) {
            this.$message.error("至少排一节课");
            return;
          }
          // 开始
          let obj = {};
          let idArr = this.activeList.map((item) => {
            return item.id;
          });
          // courseScheduleIdList
          let courseScheduleIdList = idArr;
          obj.courseScheduleIdList = courseScheduleIdList;
          obj.startDate = this.adjustmentForm.courseTime;
          obj.coursesTimes = this.adjustmentForm.addCount;
          obj.teachingArrangementList = this.weekList;

          obj.isJumpHoliday = this.adjustmentForm.checked;
          obj.musicGroupId = this.practiceId;
          obj.teachMode = "ONLINE";
          obj.type = "PRACTICE";
          batchUpdateCourseSchedule(obj).then((res) => {
            if (res.code == 200) {
              this.$message.success("恭喜您修改成功");
              this.adjustmentVisible = false;
              this.getList();
            }
          });
        }
      });
    },
    handleSelectionChange(val) {
      this.adjustmentForm.count = val.length;
      this.activeList = val;
    },
    clearAttend(row) {
      this.$confirm("是否清除考勤记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          cleanAttendance({ courseScheduleIds: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("清除成功");
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 网管课加课弹窗
    addCourse() {
      this.adjustmentName = "网管课加课";
      this.isaddCourse = true;
      this.adjustmentVisible = true;
    },
    // 网管课加课提交
    addCourseSubmit() {
      this.$refs["adjustmentForm"].validate((item) => {
        if (item) {
          let week = this.weekList;
          if (!week[0] || !week[0].startClassTime || !week[0].dayOfWeek) {
            this.$message.error("至少排一节课");
            return;
          }
          // 开始
          let obj = {};
          obj.startDate = this.adjustmentForm.courseTime;
          obj.coursesTimes = this.adjustmentForm.addCount;
          obj.teachingArrangementList = this.weekList;

          obj.isJumpHoliday = this.adjustmentForm.checked;
          obj.musicGroupId = this.practiceId;
          obj.teachMode = "ONLINE";
          obj.type = "PRACTICE";
          batchAddCourses(obj).then((res) => {
            if (res.code == 200) {
              this.$message.success("恭喜您添加成功");
              this.adjustmentVisible = false;
              this.getList();
            }
          });
        }
      });
    },
    // 删除
    removeClass(row) {
      this.$confirm("是否删除该课程?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        bathDelete({ courseScheduleIds: row.id }).then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getList();
          }
        });
      });
    },
    changeStartTime(val) {
      this.$nextTick((res) => {
        if (val) {
          this.$set(
            this.maskForm,
            "endTime",
            addTimerFormMinute(this.maskForm.date, val, this.accompanTime)
          );
        } else {
          this.$set(this.maskForm, "endTime", "");
        }
      });
    },
    changeStartTimes(val, item) {
      this.$nextTick((res) => {
        if (val) {
          let str = dayjs(new Date()).format("YYYY-MM-DD");
          this.$set(
            item,
            "endClassTime",
            addTimerFormMinute(str, val, this.accompanTime)
          );
        } else {
          this.$set(item, "endClassTime", "");
        }
      });
    },
  },
  filters: {
    studentCallName: (value) => {
      let template = {
        NORMAL: "到课",
        TRUANT: "未到",
        LEAVE: "请假",
        DROP_OUT: "退学",
        "": "未到",
      };
      return template[value];
    },
  },
  watch: {
    adjustmentVisible(val) {
      if (!val) {
        this.$refs.adjustmentForm.resetFields();
      }
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
.titlewrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  div {
    margin-right: 20px;
  }
}
.countWrap {
  /deep/.el-date-editor.el-input,
  /deep/.el-date-editor.el-input__inner {
    width: 100px !important;
  }
}
</style>