dy-admin-manager/src/views/teamBuild/teamSeting/components/setClassV2.vue

<!--  -->
<template>
  <div class="m-core">
    <el-form :inline="true"
             :model="searchForm">
      <el-form-item>
        <el-select v-model.trim="searchForm.classType"
                   placeholder="班级类型"
                   clearable
                   filterable
                   @change="changeClassGetList">
          <el-option v-for="(item,index) in classTypeList"
                     :key="index"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="buttonWrap">
      <div class="newBand"
           @click="newClass"
           v-permission="'classGroup/create'">新建班级</div>
      <div class="newBand"
           @click="arrangeStart"
           v-permission="'courseSchedule/batchAddCourseSchedule'">批量排课</div>
      <!-- <div class="newBand">删除排课</div> -->
      <!-- <p class="expectMsg">基础技能班参考数量: 线上:XX/线下:XX</p> -->
    </div>
    <div class="tableWrap">
      <el-table style="width: 100%"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                :data="tableList"
                @selection-change="selectionTable">
        <el-table-column type="selection"
                         width="55"></el-table-column>
        <el-table-column align="center"
                         prop="name"
                         label="班级名称"></el-table-column>
        <el-table-column align="center"
                         prop="type"
                         label="班级类型">
          <template slot-scope="scope">
            <div>{{ scope.row.type | classType}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="studentNum"
                         label="实际/预计人数">
          <template slot-scope="scope">
            <div>{{scope.row.studentNum+'/'+scope.row.expectStudentNum}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="studentId"
                         label="主教老师名称">
          <template slot-scope="scope">
            <div v-if="scope.row.teacherMapperList[0]">{{scope.row.teacherMapperList | getBishopName}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="studentId"
                         label="助教人数">
          <template slot-scope="scope">
            <div v-if="scope.row.teacherMapperList[0]">{{scope.row.teacherMapperList | getTeachingNum}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="totalClassTimes"
                         label="排课课次"></el-table-column>
        <el-table-column align="center"
                         prop
                         label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         v-permission="'classGroup/classGroupUpdate'"
                         @click="classAdjustment(scope.row)">老师调整</el-button>
              <el-popover placement="top"
                          width="160"
                          :ref="scope.$index"
                          v-permission="'classGroup/delSingle'">
                <p>确定删除?</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini"
                             type="text"
                             @click="scope._self.$refs[scope.$index].doClose()">取消</el-button>
                  <el-button type="primary"
                             size="mini"
                             @click="removeClass(scope)">确定</el-button>
                </div>
                <!-- v-if="scope.row.type !='MIX'" -->
                <el-button type="text"
                           slot="reference">删除班级</el-button>
              </el-popover>

              <el-button type="text"
                         v-if="scope.row.type
                         !='HIGH'
                         &&scope.row.type
                         !='HIGH_ONLINE'
              "
                         v-permission="'classGroupStudent/findAllStudent'"
                         @click="resetClass(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 :visible.sync="newClassVisible"
               width="700px"
               title="新增班级">
      <el-form :model="newClassForm"
               :inline="true"
               label-width="100px"
               ref="newClassForm"
               class="newClassForm">
        <el-form-item label="班级名称"
                      :rules="[{ required: true, message: '请输入班级姓名',trigger: 'blur'}]"
                      prop="className">
          <el-input style="width:180px;"
                    v-model="newClassForm.className"></el-input>
        </el-form-item>
        <el-form-item label="班级类型"
                      :rules="[{ required: true, message: '请输入班级人数',trigger: 'blur'}]"
                      prop="type">
          <el-select v-model.trim="newClassForm.type"
                     clearable
                     @change="chioseHightype">
            <el-option v-for="(item,index) in classTypeList"
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主教老师"
                      prop="bishop"
                      :rules="[{ required: true, message: '请选择主教老师',trigger: 'blur'}]">
          <el-select placeholder="请选择主教老师"
                     v-model="newClassForm.bishop"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in teacherList"
                       :label="item.realName"
                       :value="item.id"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预计招生数"
                      prop="expectStudentNum"
                      :rules="[{ required: true, message: '请输入预计招生数',trigger: 'blur'},{pattern:/[3-5]/,message:'班级人数必须为3-5人',trigger: 'blur'}]"
                      v-if=" newClassForm.type == 'HIGH_ONLINE'">
          <el-input style="width:180px;"
                    type="number"
                    @mousewheel.native.prevent
                    v-model="newClassForm.expectStudentNum"></el-input>
        </el-form-item>
        <el-form-item label="预计招生数"
                      prop="expectStudentNum"
                      type="number"
                      :rules="[{ required: true, message: '请输入预计招生数',trigger: 'blur'}]"
                      @mousewheel.native.prevent
                      v-else>
          <el-input style="width:180px;"
                    v-model="newClassForm.expectStudentNum"></el-input>
        </el-form-item>
        <el-form-item label="助教老师"
                      v-if=" newClassForm.type != 'HIGH_ONLINE'"
                      prop="teaching">
          <el-select placeholder="请选择助教老师"
                     v-model="newClassForm.teaching"
                     @change="setAssistant1"
                     clearable
                     multiple
                     filterable>
            <el-option v-for="(item,index) in teacherList"
                       :label="item.realName"
                       :value="item.id"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="声部"
                      prop="subjectIdList"
                      :rules="[{ required: true, message: '请选择声部',trigger: 'blur'}]"
                      v-if="newClassForm.type =='HIGH' || newClassForm.type =='NORMAL'"
                      :key="'HIGH'">
          <el-select v-model="newClassForm.subjectIdList"
                     clearable
                     multiple>
            <el-option v-for="(item,index) in soundList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可报名声部"
                      prop="memo"
                      :rules="[{ required: true, message: '请选择可报名声部',trigger: 'blur'}]"
                      v-if="newClassForm.type == 'HIGH_ONLINE'">
          <el-select v-model.trim="newClassForm.memo"
                     multiple
                     clearable>
            <el-option v-for="(item,index) in soundList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="声部"
                      prop="subjectId"
                      :rules="[{ required: true, message: '请选择线上声部',trigger: 'blur'}]"
                      v-if="newClassForm.type == 'HIGH_ONLINE'"
                      class="higheSelect"
                      :key="'HIGH_ONLINE'">
          <el-select v-model="newClassForm.subjectId"
                     clearable>
            <el-option v-for="(item,index) in soundList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="newClassVisible = false">取 消</el-button>
        <!-- 乐团课 -->
        <el-button type="primary"
                   @click="newClassHight"
                   v-if=" newClassForm.type == 'HIGH_ONLINE' || newClassForm.type =='HIGH'">确 定</el-button>
        <!-- 基础技能课 -->
        <el-button type="primary"
                   v-else
                   @click="newClassSecond">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="学员选择"
               width="700px"
               :visible.sync="studentVisible"
               :modal-append-to-body="true">
      <div class="studentMask">
        <div class="left">
          <div class="chioseStudentList">
            <h4 style="padding-left:10px;">当前已选学员</h4>
            <div class="studentItem"
                 v-for="(item,index) in activeListStudent"
                 :key="index">
              {{ item.name }}
              <el-popover v-if="!isNewClass"
                          placement="top"
                          v-model.trim="item.isVisible"
                          width="160">
                <p>确定删除?</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini"
                             type="text"
                             @click="item.isVisible = false">取消</el-button>
                  <el-button type="primary"
                             size="mini"
                             @click="removeStudent(item)">确定</el-button>
                </div>
                <el-button type="text"
                           slot="reference">删除</el-button>
              </el-popover>
              <el-button v-if="isNewClass"
                         type="text"
                         @click="temporaryRemoveStudent(item)">删除</el-button>
            </div>
          </div>
        </div>
        <div class="right">
          <!--  multiple
          collapse-tags  v-if="isSearch" -->
          <el-select v-model.trim="activeChioseSound"
                     style="width:180px"
                     @change="searchStudent"
                     clearable
                     filterable
                     placeholder="声部选择">
            <el-option v-for="(item,index) in soundList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
          <!-- <el-button v-if="isSearch"
                     type="danger"
                     style="margin-left:20px;"
          @click="searchStudent">搜索</el-button>-->

          <!--   列表开始  -->
          <div class="tableList">
            <el-table tooltip-effect="dark"
                      v-if="!isNewClass"
                      style="width: 100%; margin-top:10px;"
                      :data="studentList"
                      ref="studentList"
                      @selection-change="SelectionStudent">
              <el-table-column type="selection"
                               align="center"
                               width="55"></el-table-column>
              <el-table-column prop="name"
                               align="center"
                               width="120"
                               label="姓名"></el-table-column>
              <el-table-column prop="gender"
                               align="center"
                               width="100"
                               label="性别">
                <template slot-scope="scope">
                  <div>{{ scope.row.gender | sex }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="subjectName"
                               width="100"
                               align="center"
                               label="学员声部"></el-table-column>
            </el-table>
            <!-- 临时调整table -->
            <el-table tooltip-effect="dark"
                      v-if="isNewClass"
                      style="width: 100%; margin-top:10px;"
                      :data="studentList"
                      ref="temporaryStudentList"
                      @selection-change="NewselectionStudent">
              <el-table-column type="selection"
                               align="center"
                               width="55"></el-table-column>
              <el-table-column prop="name"
                               align="center"
                               width="120"
                               label="姓名"></el-table-column>
              <el-table-column prop="gender"
                               align="center"
                               width="100"
                               label="性别">
                <template slot-scope="scope">
                  <div>{{ scope.row.gender | sex }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="subjectName"
                               width="100"
                               align="center"
                               label="学员声部"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="studentVisible = false">取 消</el-button>
        <!-- 班级学员修改 -->
        <el-button type="primary"
                   v-if="!isNewClass"
                   @click="addSomeStudent">确 定</el-button>
        <!-- 临时调整或者新建班级 -->
        <el-button type="primary"
                   v-if="isNewClass"
                   @click="createMusiceClass">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 老师以及课程设置 -->
    <el-dialog title="老师调整"
               width="700px"
               :visible.sync="infoVisible"
               :modal-append-to-body="false">
      <el-form :inline="true"
               :model="teacherForm"
               ref="teacherForm"
               :rules="teacherRules"
               label-position="right"
               label-width="100px;">
        <br />
        <el-form-item label="主教老师"
                      prop="coreTeacher">
          <el-select v-model.trim="teacherForm.coreTeacher"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in teacherList"
                       :key="index"
                       :label="item.realName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="助教老师"
                      prop="assistant">
          <el-select v-model.trim="teacherForm.assistant"
                     filterable
                     clearable
                     @change="setAssistant"
                     multiple>
            <el-option v-for="(item,index) in cooperationList"
                       :key="index"
                       :label="item.realName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程类型"
                      prop="courseType"
                      v-if="teacherForm.isAdd !='onlyUpdateTeacher'">
          <el-select v-model.trim="teacherForm.courseType"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in courseTypeList"
                       :key="index"
                       :value="item.value"
                       :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="排课次数"
                      prop="courseNum"
                      v-if="teacherForm.isAdd !='onlyUpdateTeacher'">
          <el-input type="number"
                    @mousewheel.native.prevent
                    v-model.trim="teacherForm.courseNum"></el-input>
        </el-form-item>
        <el-form-item label="排课起始时间"
                      prop="courseTime"
                      v-if="teacherForm.isAdd !='onlyUpdateTeacher'">
          <el-date-picker v-model.trim="teacherForm.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="teacherForm.checked">是否跳过节假日</el-checkbox>
        </el-form-item>
      </el-form>
      <div class="WeekWrap"
           v-if="teacherForm.isAdd !='onlyUpdateTeacher'">
        <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"
                       clearable
                       filterable>
              <el-option v-for="(item,index) in weekDateList"
                         :key="index"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
            <!-- 老师调整 -->
            <span>开始时间</span>
            <el-time-select placeholder
                            v-model.trim="item.startClassTime"
                            :picker-options="{
                               start: '04:30',
                               step: '00:05',
                               end: '23:55'
            }"></el-time-select>
            <span>结束时间</span>
            <el-time-select v-model="item.endClassTime"
                            :picker-options="{
                              start: '04:30',
                              step: '00:05',
                              end: '23:55',
                              minTime:item.startClassTime
            }"></el-time-select>
            <el-button type="danger"
                       @click="removeWeek(item)"
                       icon="el-icon-delete"
                       circle></el-button>
          </div>
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <!-- 1创建班级 -->
        <el-button type="primary"
                   v-if="isNewClass"
                   @click="submitTemporary(1)">确 定</el-button>
        <!-- 修改班级信息 -->
        <el-button type="primary"
                   v-if="!isNewClass"
                   @click="submitTemporary(3)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 排课 -->
    <el-dialog title="批量排课"
               width="700px"
               :visible.sync="arrangeVisible"
               :modal-append-to-body="false">
      <el-form :model="arrangeForm"
               ref="arrangeForm"
               label-width="100px"
               label-position="right">
        <el-form-item label="选择班级数"
                      prop="classNum">
          <el-input type="number"
                    style="width:180px;"
                    @mousewheel.native.prevent
                    :value="arrangeForm.classNum"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="课程类型"
                      prop="courseType"
                      :rules="[{ required: true, message: '请选择课程类型',trigger: 'blur'}]">
          <el-select v-model.trim="arrangeForm.courseType"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in courseTypeList"
                       :key="index"
                       :value="item.value"
                       :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课形式"
                      prop="teachMode"
                      :rules="[{ required: true, message: '请选择课程类型',trigger: 'blur'}]">
          <el-select v-model.trim="arrangeForm.teachMode"
                     disabled>
            <el-option value="ONLINE"
                       label="线上"></el-option>
            <el-option value="OFFLINE"
                       label="线下"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开始日期"
                      prop="courseTime"
                      :rules="[{ required: true, message: '请选择开始日期',trigger: 'blur'}]">
          <!--   value-format="yyyy-MM-dd" -->
          <el-date-picker v-model.trim="arrangeForm.courseTime"
                          :picker-options="pickerOptions"
                          style="width:200px!important;"
                          type="date"
                          placeholder="选择日期"></el-date-picker>
          <el-checkbox style="margin-left:10px;"
                       v-model.trim="arrangeForm.checked">是否跳过节假日</el-checkbox>
        </el-form-item>
        <el-form-item label="排课次数"
                      :rules="[{ required: true, message: '请输入排课次数',trigger: 'blur'}]"
                      prop="courseNum">
          <el-input type="number"
                    style="width:180px;"
                    @mousewheel.native.prevent
                    v-model.trim="arrangeForm.courseNum"></el-input>
        </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"
                       clearable
                       filterable>
              <el-option v-for="(item,index) in weekDateList"
                         :key="index"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
            <span>开始时间</span>
            <!--        -->
            <el-time-select placeholder
                            v-model.trim="item.startClassTime"
                            :picker-options="{
                               start: '04:30',
                               step: '00:05',
                               end: '23:55'
            }"></el-time-select>
            <span>结束时间</span>
            <el-time-select placeholder
                            v-model.trim="item.endClassTime"
                            :picker-options="{
                              start: '04:30',
                              step: '00:05',
                              end: '23:55',
                              minTime:item.startClassTime
            }"></el-time-select>
            <el-button type="danger"
                       @click="removeWeek(item)"
                       icon="el-icon-delete"
                       circle></el-button>
          </div>
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="arrangeVisible=false">取 消</el-button>
        <el-button type="primary"
                   @click="arrangeFormSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import pagination from "@/components/Pagination/index";
import load from "@/utils/loading";
import {
  getTeacher,
  getEmployeeOrgan,
  getMusicGroupClass,
  createClass,
  findSound,
  getMusicGroupStuNoClassType,
  classGroupUpdate,
  removeSingleClass,
  workOut,
  superFindClassGroups
} from "@/api/buildTeam";
import {
  getClassAllStudent,
  removeStudents,
  addStudents
} from "@/api/studentManager";
import { sysConfigList } from "@/api/generalSettings";

export default {
  components: { pagination },
  props: {
    isSetSalary: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate (time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        }
      },
      searchForm: {
        classType: null
      },
      soundList: [],
      teacherList: [],

      tableList: [],
      classTypeList: [
        { value: "NORMAL", label: "单技班" },
        { value: "MIX", label: "合奏班" },
        { value: "HIGH", label: "基础技能班" },
        { value: "HIGH_ONLINE", label: "线上基础技能课" }
      ],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      isInit: false,
      newClassVisible: false,
      newClassForm: {
        className: null,
        type: null,
        subjectIdList: [],
        subjectId: '',
        expectStudentNum: null,
        bishop: null,
        teaching: [],
        memo: []
      },
      chioseStudent: [], // 选中的学生
      activeListStudent: [], // 待选的学生
      isNewClass: true, // 是否是新增班级
      studentVisible: false, // 选择学员弹窗
      // activeChioseSound: [],
      isSearch: false,
      studentList: [],
      activeChioseSound: null, // 默认选择的声部
      infoVisible: false, // 班级调整弹窗
      teacherForm: {
        isAdd: "onlyUpdateTeacher",
        coreTeacher: "",
        assistant: [],
        courseType: "",
        courseTime: "",
        checked: true,
        courseNum: "",
        mixClassGroupId: ""
      },
      teacherRules: {
        isAdd: [{ required: true, message: "请选择调整类型" }],
        coreTeacher: [{ required: true, message: "请选择主教老师" }],
        courseType: [{ required: true, message: "请选择上课类型" }],
        courseTime: [{ required: true, message: "请选择开始时间" }],
        courseNum: [{ required: true, message: "请输入排课次数" }],
        mixClassGroupId: [{ required: true, message: "请选择合奏班" }]
      },
      weekDateList: [
        { value: "1", label: "星期一" },
        { value: "2", label: "星期二" },
        { value: "3", label: "星期三" },
        { value: "4", label: "星期四" },
        { value: "5", label: "星期五" },
        { value: "6", label: "星期六" },
        { value: "7", label: "星期日" }
      ],
      weekList: [
        {
          week: "",
          startTime: "",
          endTime: "",
          id: new Date().getTime()
        }
      ],
      cooperationList: [],
      courseTypeList: [],
      arrangeVisible: false,
      arrangeForm: {
        courseNum: null,
        classNum: null,
        courseType: null,
        courseTime: null,
        teachMode: null,
        checked: true
      }, // 排课信息
      chioseTab: [], // 记录选中的项

      classCardList: [], // 课表的集合
      teamid: null
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    // 获取节假日
    this.init();
  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      this.teamid = this.$route.query.id;
      getTeacher().then(res => {
        if (res.code == 200) {
          this.teacherList = res.data;
          this.cooperationList = res.data;
        }
      });
      // 获取声部
      findSound({ musicGroupId: this.teamid }).then(res => {
        if (res.code == 200) {
          this.soundList = res.data;
        }
      });
      this.getList();

      sysConfigList({ group: "holiday" }).then(res => {
        if (res.code == 200 && res.data.length > 0) {
          if (res.data[0].paranValue) {
            this.holidayList = JSON.parse(res.data[0].paranValue);
          }
        }
      });
    },
    getList () {
      this.teamid = this.$route.query.id;
      //
      getMusicGroupClass({
        groupType: "MUSIC",
        musicGroupId: this.teamid,
        type: this.searchForm.classType,
        page: this.rules.page,
        rows: this.rules.limit
      }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    changeClassGetList (val) {
      this.getList();
    },
    newClass () {
      if (this.isSetSalary) {
        this.$message.error("课酬确认后无法编辑");
        return;
      }
      this.newClassVisible = true;
    },
    newClassSecond () {
      // 判断当前选择的课程类型
      // 单技 合奏等等
      this.$refs["newClassForm"].validate(res => {
        if (res) {
          this.isNewClass = true;
          let type = this.newClassForm.type;
          this.isSearch = true;
          this.getNoClassStudent(type, null);
          this.studentVisible = true;
        }
      });
    },
    newClassHight () {
      this.$refs["newClassForm"].validate(res => {
        if (res) {
          let obj = {};
          obj.musicGroupId = this.teamid;
          obj.name = this.newClassForm.className;
          obj.type = this.newClassForm.type;
          obj.groupType = "MUSIC";
          // if (this.newClassForm.memo.length > 0) {
          //   obj.memo = this.newClassForm.memo.join(',')
          // } else {
          //   obj.memo = null
          // }

          obj.expectStudentNum = this.newClassForm.expectStudentNum;
          obj.teacherMapperList = [];
          obj.teacherMapperList.push({
            userId: this.newClassForm.bishop,
            teacherRole: "BISHOP"
          });

          let subjectIdList;
          if (this.newClassForm.type == "HIGH_ONLINE") {
            subjectIdList = this.newClassForm.subjectId;
            if (this.newClassForm.memo.length > 0) {
              obj.memo = this.newClassForm.memo.join(",");
            }
          } else {
            subjectIdList =
              this.newClassForm.subjectIdList.length > 0
                ? this.newClassForm.subjectIdList.join(",")
                : null;
            for (let i in this.newClassForm.teaching) {
              obj.teacherMapperList.push({
                userId: this.newClassForm.teaching[i],
                teacherRole: "TEACHING"
              });
            }
            obj.memo = null;
          }
          obj.subjectIdList = subjectIdList;
          createClass(obj).then(res => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              this.getList();
              this.newClassVisible = false;
            }
          });
        }
      });
    },
    removeStudent (item) {
      removeStudents({
        classGroupId: this.activeClass,
        userId: item.userId
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          item.isVisible = false;
          // 这里刷新 this.studentList this.activeListStudent
          this.getList(this.activeMixClass);
          getClassAllStudent({ classGroupId: this.activeClass }).then(res => {
            if (res.code == 200) {
              this.activeListStudent = res.data;
            }
          });
          this.getNoClassStudent(this.activeType);
        }
      });
    },
    addSomeStudent () {
      // 获取勾选的学生
      let arr = this.chioseStudent.map(item => {
        return item.userId;
      });
      if (arr.length <= 0) {
        this.$message.error("至少添加一名学员");
        return;
      }
      if (this.activeType == "HIGH_ONLINE") {
        superFindClassGroups({ classGroupId: this.activeClass }).then(res => {
          if (res.code == 200) {
            let maxNum = res.data.rows[0].expectStudentNum;
            if (arr.length + this.activeListStudent.length > maxNum) {
              this.$message.error("超过预计招生人数");
              return;
            } else {
              addStudents({
                classGroupId: this.activeClass,
                userIdsStr: arr.join(",")
              }).then(res => {
                if (res.code == 200) {
                  this.studentVisible = false;
                  this.$message.success("添加成功");
                  this.getList();
                  return;
                }
              });
            }
          }
        });
      } else {
        addStudents({
          classGroupId: this.activeClass,
          userIdsStr: arr.join(",")
        }).then(res => {
          if (res.code == 200) {
            this.studentVisible = false;
            this.$message.success("添加成功");
            this.getList();
          }
        });
      }

      //  在此处做拦截

    },
    temporaryRemoveStudent (item) {
      // console.log(item);
      // 列表中删除
      for (let i in this.activeListStudent) {
        if (this.activeListStudent[i].userId == item.userId) {
          this.activeListStudent.splice(i, 1);
        }
      }
      // 查询列表中的项 取消勾选 temporaryStudentList  toggleRowSelection
      // 循环列表 找到相应的行取消勾选
      for (let k in this.studentList) {
        if (this.studentList[k].userId == item.userId) {
          this.$refs["temporaryStudentList"].toggleRowSelection(item, false);
        }
      }
      // this.$refs['temporaryStudentList'].toggleRowSelection(row, selected);
    },
    // 对象数组去重
    objArrayRemoval (arr, attr) {
      let obj = {};
      let result = [];
      for (let x in arr) {
        if (!obj[arr[x][attr]]) {
          result.push(arr[x]);
          obj[arr[x][attr]] = true;
        }
      }
      return result;
    },
    // 新增选中的学生
    NewselectionStudent (val) {
      this.chioseStudent = val;
      // 这里新增的添加到选中的学生列表  根据学生id去重
      if (this.chioseStudent.length > 0) {
        this.chioseStudent = this.chioseStudent.concat(val);
      } else {
        this.chioseStudent = val;
      }
      // 联动版
      // this.activeListStudent = this.objArrayRemoval(this.chioseStudent, 'userId')
      // 非联动多选版
      this.activeListStudent = this.activeListStudent.concat(
        this.chioseStudent
      );
      // // 去重
      this.activeListStudent = this.objArrayRemoval(
        this.activeListStudent,
        "userId"
      );
      // 将其填入选中的学生
    },
    // 获取乐团中没课的学生
    getNoClassStudent (type, sound) {
      if (!sound) {
        let sound = null;
      }
      getMusicGroupStuNoClassType({
        musicGroupId: this.teamid,
        type,
        actualSubjectId: sound
      }).then(res => {
        if (res.code == 200) {
          this.studentList = res.data;
        }
      });
    },
    // 根据声部id 获取学生
    searchStudent (val) {
      this.getNoClassStudent(this.newClassForm.type, val);
    },
    createMusiceClass () {
      // console.log(this.activeListStudent)
      let userIds = null;
      if (this.activeListStudent.length > 0) {
        userIds = this.activeListStudent
          .map(item => {
            return item.userId;
          })
          .join(",");
      }
      // 创建班级
      let obj = {};
      obj.musicGroupId = this.teamid;
      obj.name = this.newClassForm.className;
      obj.type = this.newClassForm.type;
      obj.groupType = "MUSIC";
      obj.userIds = userIds;
      obj.teacherMapperList = [];
      obj.expectStudentNum = this.newClassForm.expectStudentNum;
      let subjectIdList;
      if (this.newClassForm.type == "HIGH_ONLINE") {
        subjectIdList = this.newClassForm.subjectIdList;
      } else if (this.newClassForm.type == "MIX") {
        subjectIdList = null;
      } else {
        subjectIdList =
          this.newClassForm.subjectIdList.length > 0
            ? this.newClassForm.subjectIdList.join(",")
            : null;
      }
      obj.subjectIdList = subjectIdList;
      obj.teacherMapperList.push({
        userId: this.newClassForm.bishop,
        teacherRole: "BISHOP"
      });
      for (let i in this.newClassForm.teaching) {
        obj.teacherMapperList.push({
          userId: this.newClassForm.teaching[i],
          teacherRole: "TEACHING"
        });
      }
      createClass(obj).then(res => {
        if (res.code == 200) {
          this.$message.success("创建成功");
          this.getList();
          this.studentVisible = false;
          this.newClassVisible = false;
        }
      });
    },
    classAdjustment (row) {
      if (this.isSetSalary) {
        this.$message.error("课酬确认后无法编辑");
        return;
      }
      this.activeType = row.type;
      this.activeClass = row.id;
      // this.activeListStudent = row.subjectIdList.split(',')
      this.setType(row.type);
      // activeListStudent
      this.isNewClass = false;
      this.teacherForm.assistant = [];
      for (let i in row.classGroupTeacherMapperList) {
        if (row.classGroupTeacherMapperList[i].teacherRole == "BISHOP") {
          this.teacherForm.coreTeacher =
            row.classGroupTeacherMapperList[i].userId;
        }
        if (row.classGroupTeacherMapperList[i].teacherRole == "TEACHING") {
          this.teacherForm.assistant.push(
            row.classGroupTeacherMapperList[i].userId
          );
        }
      }
      this.infoVisible = true;
    },
    setType (type) {
      switch (type) {
        case "NORMAL": {
          this.courseTypeList = [
            { value: "SINGLE", label: "单技课" },
            { value: "TRAINING_SINGLE", label: "集训单技课" },
            { value: "COMPREHENSIVE", label: "综合课" },
            { value: "CLASSROOM", label: "课堂课" }
          ];
          break;
        }
        case "MIX": {
          this.courseTypeList = [
            { value: "MIX", label: "合奏课" },
            { value: "TRAINING_MIX", label: "集训合奏课" },
            { value: "COMPREHENSIVE", label: "综合课" },
            { value: "CLASSROOM", label: "课堂课" }
          ];
          break;
        }
        case "HIGH": {
          this.courseTypeList = [{ value: "HIGH", label: "基础技能课" }];
          break;
        }
        case "HIGH_ONLINE": {
          this.courseTypeList = [
            { value: "HIGH_ONLINE", label: "线上基础技能课" }
          ];
          break;
        }
        case "SNAP": {
          this.courseTypeList = [
            { value: "SINGLE", label: "单技课" },
            { value: "MIX", label: "合奏课" },
            { value: "TRAINING_SINGLE", label: "集训单技课" },
            { value: "TRAINING_MIX", label: "集训合奏课" },
            { value: "HIGH", label: "基础技能课" },
            { value: "COMPREHENSIVE", label: "综合课" },
            { value: "CLASSROOM", label: "课堂课" }
          ];
        }
      }
    },
    // 删除班级
    removeClass (scope) {
      if (this.isSetSalary) {
        this.$message.error("课酬确认后无法编辑");
        return;
      }
      removeSingleClass({ classGroupId: scope.row.id })
        .then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            scope._self.$refs[scope.$index].doClose();
            // 重新请求列表
            this.getList();
          } else {
            this.$message.error(res.msg);
            scope._self.$refs[scope.$index].doClose();
          }
        })
        .catch(res => {
          scope._self.$refs[scope.$index].doClose();
        });
    },
    setAssistant (val) {
      for (let i in val) {
        if (val[i] == this.teacherForm.coreTeacher) {
          val.splice(i, 1);
        }
      }
    },
    setAssistant1 (val) {
      for (let i in val) {
        if (val[i] == this.newClassForm.bishop) {
          val.splice(i, 1);
        }
      }
    },
    SelectionStudent (val) {
      // console.log(val);
      // this.activeListStudent = val;
      this.chioseStudent = val;
    },
    addWeek () {
      // 添加循环周期
      this.weekList.push({
        dayOfWeek: "",
        startClassTime: "",
        endClassTime: "",
        id: new Date()
      });
    },
    // 提交临时班的信息
    submitTemporary (type) {
      // 参数是一样  type为1 新增临时班
      // type为2  新增单技班
      // type为3 修改班级信息
      if (type == 1) {
        this.isTemporary = true;
      } else {
        this.isTemporary = false;
      }

      this.$refs["teacherForm"].validate(item => {
        if (item) {
          let week = this.weekList;
          if (this.teacherForm.isAdd != "onlyUpdateTeacher") {
            if (
              !week[0] ||
              !week[0].startClassTime ||
              !week[0].endClassTime ||
              !week[0].dayOfWeek
            ) {
              this.$message.error("至少排一节课");
              return;
            }
          }

          // 这里代表排课成功  发请求  新增临时班
          let classGroupName = this.className;
          let classGroupTeacherMapperList = [
            { userId: this.teacherForm.coreTeacher, teacherRole: "BISHOP" }
          ];
          for (let i in this.teacherForm.assistant) {
            classGroupTeacherMapperList.push({
              userId: this.teacherForm.assistant[i],
              teacherRole: "TEACHING"
            });
          }
          // let mixClassGroupId = this.teacherForm.mixClassGroupId;
          let musicGroupId = this.teamid;
          let startDate = this.teacherForm.courseTime;
          let courseType = this.teacherForm.courseType;
          let courseTimes = this.teacherForm.courseNum;
          if (
            courseTimes <= 0 &&
            this.teacherForm.isAdd != "onlyUpdateTeacher"
          ) {
            this.$message.error("请至少排一节课");
            return;
          }
          let students = this.activeListStudent.map(item => {
            return item.userId;
          });
          let holiday = this.teacherForm.checked;
          let courseList = [];
          for (let i in this.weekList) {
            courseList.push(this.weekList[i]);
          }
          if (
            courseList.length <= 0 &&
            this.teacherForm.isAdd != "onlyUpdateTeacher"
          ) {
            this.$message.error("新增班级至少排一节课");
            return;
          }
          if (this.teacherForm.isAdd == "onlyUpdateTeacher") {
            startDate = null;
            courseType = null;
            students = null;
            holiday = null;
            courseTimes = null;
            (courseList = null), (mineType = null);
          }
          //       mixClassGroupId,
          let mineType = this.activeType;
          let obj = {
            classGroupName,
            classGroupTeacherMapperList,
            musicGroupId,
            startDate,
            courseType,
            students,
            holiday,
            courseTimes,
            courseTimeDtoList: courseList,
            type: mineType,
            courseAddType: this.teacherForm.isAdd
          };
          if (type == 1) {
            // 新增临时班级
            revisionClassGroup(obj).then(res => {
              if (res.code == 200) {
                // 提示修改成功
                this.$message.success("修改成功");
                this.infoVisible = false;
                this.studentVisible = false;
                this.getList();
              }
            });
          } else if (type == 2) {
            // 新增单技班
            revisionAddClassGroup(obj).then(res => {
              if (res.code == 200) {
                // 修改成功
                this.$message.success("修改成功");
                this.infoVisible = false;
                this.studentVisible = false;
                this.getList();
              }
            });
          } else if (type == 3) {
            // activeClass
            obj.classGroupId = this.activeClass;
            classGroupUpdate(obj).then(res => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.infoVisible = false;
                this.getList();
              }
            });
          }
        } else {
          this.$message.error("请填写必要信息");
          return;
        }
      });
    },
    resetClass (row) {
      if (this.isSetSalary) {
        this.$message.error("课酬确认后无法编辑");
        return;
      }
      this.isNewClass = false;
      this.className = row.name;
      this.studentVisible = true;
      this.activeClass = row.id;
      this.isSearch = false;
      this.activeType = row.type;
      this.newClassForm.type = row.type
      this.activeChioseSound = null
      // 根据单机班id 查询单技班内的所有学生
      getClassAllStudent({ classGroupId: row.id }).then(res => {
        if (res.code == 200) {
          this.activeListStudent = res.data.map(item => {
            item.isVisible = false;
            return item;
          });
        }
      });
      this.getNoClassStudent(row.type);
    },
    // 排课开始
    arrangeStart () {
      if (this.isSetSalary) {
        this.$message.error("课酬确认后无法编辑");
        return;
      }
      if (this.chioseTab.length < 1) {
        this.$message.error("请至少选择一个班级");
        return;
      }
      let type = this.chioseTab[0].type;
      let isSome = this.chioseTab.every(item => {
        return item.type == type;
      });
      if (!isSome) {
        this.$message.error("请选择相同类型的班级");
        return false;
      }
      //
      this.setType(this.chioseTab[0].type);
      this.arrangeForm.courseType = this.courseTypeList[0].value;
      this.arrangeVisible = true;
      if (this.arrangeForm.courseType == "HIGH_ONLINE") {
        this.arrangeForm.teachMode = "ONLINE";
      } else {
        this.arrangeForm.teachMode = "OFFLINE";
      }
      this.arrangeForm.classNum = this.chioseTab.length;
    },
    selectionTable (val) {
      this.chioseTab = val;
      this.arrangeForm.classNum = val.length;
    },
    // 开始排课
    arrangeFormSubmit () {
      // 获取要排课的班级 id
      if (this.weekList.length < 0 || !this.weekList[0].dayOfWeek) {
        this.$message.error("请设置排课周期");
        return;
      }
      // 组拼课程信息
      this.$refs["arrangeForm"].validate(res => {
        if (res) {
          let date = this.arrangeForm.courseTime;
          let classCount = this.arrangeForm.courseNum;
          let weekArr = this.weekList;
          let courseType = this.arrangeForm.courseType;
          let teachMode = this.arrangeForm.teachMode;
          this.classCardList = [];
          this.workOut(date, classCount, weekArr, courseType, teachMode);
        }
      });
    },
    // 排课: 开始日期 几节课 星期几  什么类型的课
    workOut (date, classCount, weekArr, courseType, teachMode) {
      // 验证是不是添加的循环周期里每一项都有值
      let flag = weekArr.every(item => {
        return item.dayOfWeek && item.startClassTime && item.endClassTime;
      });
      if (!flag) {
        this.$message.error("请保证循环周期信息完整");
        return;
      }

      // 这里是一天排一节课  现在要改成一天排多节
      while (classCount && classCount > 0) {
        for (let i in weekArr) {
          let date1 = new Date(date.getTime());
          let num; // 下次上课上几天后
          // 星期4 - 当前是星期几 =>
          weekArr[i].dayOfWeek - date.getDay() >= 0
            ? (num = weekArr[i].dayOfWeek - date.getDay())
            : (num = weekArr[i].dayOfWeek - date.getDay() + 7);

          let dataStr = this.getThinkDate(date, num);
          let monthDay = this.getThinkDate(date1, num);
          if (this.arrangeForm.checked) {
            if (this.holidayList.indexOf(monthDay) != -1) {
              // 这里说明有节假日
              continue;
            }
          }
          let nowStartTime = weekArr[i].startClassTime;
          let nowEndTime = weekArr[i].endClassTime;
          // 这里开始排课 哪几个班
          for (let j in this.chioseTab) {
            this.classCardList.push({
              classDate: dataStr,
              classGroupId: this.chioseTab[j].id,
              startClassTimeStr: nowStartTime,
              endClassTimeStr: nowEndTime,
              type: courseType,
              weekNum: weekArr[i].dayOfWeek,
              teachMode: teachMode,
              option: 1
            });
          }
          classCount--;
          if (classCount == 0) break;
        }
        date.setDate(date.getDate() + 7);
      }
      // 直接调接口排课进去
      workOut({
        musicGroupID: this.teamid,
        courseSchedules: this.classCardList
      })
        .then(res => {
          if (res.code == 200) {
            this.$message.success("恭喜您排课成功");
            this.classCardList = [];
            this.arrangeVisible = false;
            this.getList();
          }
        })
        .catch(res => {
          // this.tableList = [];
          console.log("排课来了");
          this.classCardList = [];
          this.resetTime();
        });
    },
    getThinkDate (date, num, type = 1) {
      let Stamp = new Date(date.getTime());
      Stamp.setDate(Stamp.getDate() + parseInt(num)); // 获取当前月数的第几天
      var year = Stamp.getFullYear(); //获取完整的年份(4位,1970-????)
      var month = Stamp.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var mvar = "";
      if (month < 10) {
        mvar = "0" + month;
      } else {
        mvar = month + "";
      }
      var day = Stamp.getDate();
      var dvar = "";
      if (day < 10) {
        dvar = "0" + day;
      } else {
        dvar = day + "";
      }
      if (type == 2) {
        return mvar + dvar;
      } else {
        return year + "-" + mvar + "-" + dvar;
      }
    },
    resetTime () {
      this.arrangeForm.courseTime = null;
      this.weekList = [
        {
          week: "",
          startTime: "",
          endTime: "",
          id: new Date().getTime()
        }
      ];
    },
    chioseHightype (val) {
      this.$set(this.newClassForm, 'subjectIdList', [])
      this.newClassForm.subjectId = ''
      if (val == 'HIGH_ONLINE') {
        this.newClassForm.teaching = []

      } else {
        this.newClassForm.memo = []


      }

    }
  },
  filters: {
    getBishopName (val) {
      let name = "";
      if (val && val.length > 0) {
        for (let i in val) {
          if (val[i].teacherRole == "BISHOP") {
            name = val[i].userName;
          }
        }
      }
      return name;
    },
    getTeachingNum (val) {
      let num = 0;
      if (val && val.length > 0) {
        for (let i in val) {
          if (val[i].teacherRole == "TEACHING") {
            num++;
          }
        }
      }
      return num;
    },

  },
  watch: {
    newClassVisible (val) {
      if (!val) {
        this.newClassForm = {
          className: null,
          type: null,
          subjectIdList: [],
          subjectId: '',
          expectStudentNum: null,
          bishop: null,
          teaching: null,
          memo: []
        };
      }
    },
    studentVisible (val) {
      if (!val) {
        this.newClassVisible = false;
        this.activeListStudent = [];
      }
    },
    infoVisible (val) {
      if (!val) {
        this.teacherForm = {
          isAdd: "onlyUpdateTeacher",
          coreTeacher: "",
          assistant: [],
          courseType: "",
          courseTime: "",
          checked: true,
          courseNum: "",
          mixClassGroupId: ""
        };
        this.$refs["teacherForm"].resetFields();
      }
    },
    arrangeVisible (val) {
      if (!val) {
        this.arrangeForm = {
          courseNum: null,
          classNum: null,
          courseType: null,
          courseTime: null,
          teachMode: null,
          checked: true
        };
        this.$refs["arrangeForm"].resetFields();
        this.weekList = [
          {
            week: "",
            startTime: "",
            endTime: "",
            id: new Date().getTime()
          }
        ];
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.m-core {
  background-color: #fff;
  box-sizing: border-box;
  padding: 30px 42px;
}
.buttonWrap {
  display: flex;
  justify-content: flex-start;
  .newBand {
    margin-right: 20px;
  }
  .expectMsg {
    position: relative;
    top: 3px;
    line-height: 36px;
    font-size: 14px;
  }
}
.studentMask {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .left {
    width: 200px;
    margin-right: 20px;
    .wrap {
      margin-bottom: 20px;
    }
    h4 {
      font-size: 16px;
      color: #444;
      line-height: 38px;
    }
    .chioseStudentList {
      height: 500px;
      overflow-y: auto;
      border: 1px solid #ccc;
      .studentItem {
        padding-left: 10px;
        line-height: 25px;
      }
    }
  }
  .right {
    width: calc(100% - 200px);
    .tableList {
      max-height: 500px;
      overflow-y: auto;
    }
  }
}
.resetClassForm {
  /deep/.el-date-editor.el-input,
  /deep/.el-date-editor.el-input__inner {
    width: 180px !important;
  }
}
/deep/.el-date-editor.el-input,
/deep/.el-date-editor.el-input__inner {
  width: 100px !important;
}
</style>