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>
    <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" width="260px" prop label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                v-if="
                  scope.row.type === 'HIGH' || scope.row.type === 'HIGH_ONLINE'
                "
                v-permission="'classGroupStudent/findAllStudent'"
                @click="lookDeatil(scope.row)"
                >查看</el-button
              >
              <el-button
                type="text"
                v-permission="'classGroup/classGroupUpdate'"
                @click="classAdjustment(scope.row)"
                >老师调整</el-button
              >
              <el-button
                type="text"
                v-permission="'classGroupStudent/updateClassGroupStudents'"
                @click="resetClass(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/addStudents'"
                         @click="addstudentBtn(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="120px"
        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' },
          ]"
        >
          <remote-search
            :commit="'setTeachers'"
            v-model="newClassForm.bishop"
          />
        </el-form-item>
        <el-form-item
          label="预计招生数"
          prop="expectStudentNum"
          type="number"
          :rules="[
            { required: true, message: '请输入预计招生数', trigger: 'blur' },
          ]"
          @mousewheel.native.prevent
        >
          <el-input
            style="width: 180px"
            :disabled="newClassForm.type == 'HIGH_ONLINE'"
            v-model="newClassForm.expectStudentNum"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="助教老师"
          v-if="newClassForm.type != 'HIGH_ONLINE'"
          prop="teaching"
        >
          <remote-search
            :commit="'setTeachers'"
            v-model="newClassForm.teaching"
            @change="setAssistant1"
            :multiple="true"
          />
        </el-form-item>
        <el-form-item
          label="声部"
          prop="subjectIdList"
          :rules="[{ required: true, message: '请选择声部', trigger: 'blur' }]"
          v-if="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' || newClassForm.type == 'HIGH'
          "
        >
          <el-select
            v-model.trim="newClassForm.memo"
            multiple
            @change="changeMemo"
            clearable
          >
            <el-option
              v-for="(item, index) in soundList"
              :disabled="item.disabled || appoint"
              :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"
    >
      <selectStudent
        :activeListStudent="activeListStudent"
        :studentList="studentList"
        :soundList="activeSoundList"
        :classGroupId="activeClass"
        :isOnlyChangeUser="true"
        :activeType="activeType"
        type="change"
        @changeActiveChioseSound="changeActiveChioseSound"
        @searchStudent="searchStudent"
        @submited="submited"
        @close="studentVisible = false"
      />
    </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">
          <remote-search
            :commit="'setTeachers'"
            v-model="teacherForm.coreTeacher"
          />
        </el-form-item>
        <el-form-item label="助教老师" prop="assistant">
          <remote-search
            :commit="'setTeachers'"
            v-model="teacherForm.assistant"
            @change="setAssistant"
            :multiple="true"
          />
          <!-- <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>
    <el-dialog title="添加学员" width="600px" :visible.sync="addStudentVisible">
      <el-table
        :data="studentList"
        ref="studentList"
        @selection-change="selectStudent"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="学生姓名"></el-table-column>
        <el-table-column
          property="classGroupName"
          label="所在班级"
        ></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          v-permission="'classGroupStudent/addStudents'"
          @click="addStudnt"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="学员详情" width="600px" :visible.sync="lookDeatilVisible">
      <el-table
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="classList"
      >
        <el-table-column label="学员姓名" prop="name"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-popover
                placement="top"
                v-permission="'classGroupStudent/del'"
                width="160"
                :ref="scope.$index"
              >
                <p>确定删除该学生?</p>
                <div style="text-align: right; margin-top: 20px">
                  <el-button
                    size="mini"
                    type="text"
                    @click="scope._self.$refs[scope.$index].doClose()"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="removeStudent(scope)"
                    >确定</el-button
                  >
                </div>
                <el-button type="text" slot="reference">删除</el-button>
              </el-popover>
              <!-- <el-button type="text"
                         v-permission="'classGroupStudent/adjustClassGroup'"
                         @click="resetClass(scope.row)">调整班级</el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
    </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 selectStudent from "../../../teamDetail/components/modals/select-student";
import { updateClassGroupStudents } from "../../../teamDetail/api";
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, selectStudent },
  props: {
    isSetSalary: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        },
      },
      searchForm: {
        classType: null,
      },
      activeType: null,
      activeClass: 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: "请输入排课次数", trigger: "blur" },
        ],
        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,
      maxMun: 16,
      lookDeatilVisible: false,
      addStudentVisible: false,
      activeStudentList: [],
      classList: [],
      appoint: false,
      activeSoundList:[]
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 获取节假日
    this.init();
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      this.teamid = this.$route.query.id;
      // 获取声部
      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);
          }
        }
      });
    },
    changeActiveChioseSound(val) {
      this.activeChioseSound = val;
    },
    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() {
      if (
        this.newClassForm.type == "HIGH_ONLINE" &&
        (this.newClassForm.expectStudentNum > 6 ||
          this.newClassForm.expectStudentNum < 3)
      ) {
        return this.$message.error("班级人数必须为3-6人");
      }
      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";
          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.memo.length > 0
                ? this.newClassForm.memo.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;
          obj.memo = subjectIdList
          createClass(obj).then((res) => {
            if (res.code == 200) {
              this.$message.success("创建成功");
              this.resetClassFrom()
              this.getList();
              this.newClassVisible = false;
            }
          });
        }
      });
    },
    resetClassFrom() {
      this.newClassForm = {
        className: null,
        type: null,
        subjectIdList: [],
        subjectId: "",
        expectStudentNum: null,
        bishop: null,
        teaching: [],
        memo: [],
      };
    },
    removeStudent(item) {
      removeStudents({
        classGroupId: this.activeClass,
        userId: item.row.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);
            }
          });
          if (this.activeType == "HIGH_ONLINE" || this.activeType == "HIGH") {
            item._self.$refs[item.$index].doClose();
            getClassAllStudent({ classGroupId: this.activeClass }).then(
              (res) => {
                if (res.code == 200) {
                  this.classList = res.data;
                }
              }
            );
          }
        }
      });
    },
    addSomeStudent(arr) {
      // 获取勾选的学生
      // 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 > maxNum) {
              this.$message.error("超过预计招生人数");
              return;
            } else {
              updateClassGroupStudents({
                classGroupId: this.activeClass,
                studentIds: arr.join(","),
              }).then((res) => {
                if (res.code == 200) {
                  this.studentVisible = false;
                  this.$message.success("添加成功");
                  this.getList();
                  return;
                }
              });
            }
          }
        });
      } else {
        updateClassGroupStudents({
          classGroupId: this.activeClass,
          studentIds: 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);
    },
    submited(data) {
      if (!this.isNewClass) {
        this.addSomeStudent(data?.seleched || []);
        return;
      } else {
        this.createMusiceClass(data?.seleched || []);
      }
    },
    createMusiceClass(uids) {
      // console.log(this.activeListStudent)
      let userIds = null;
      if (uids.length > 0) {
        userIds = uids.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.resetClassFrom()
          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.teacherMapperList) {
        if (row.teacherMapperList[i].teacherRole == "BISHOP") {
          this.teacherForm.coreTeacher = row.teacherMapperList[i].userId;
        }
        if (row.teacherMapperList[i].teacherRole == "TEACHING") {
          this.teacherForm.assistant.push(row.teacherMapperList[i].userId);
        }
      }
      console.log(this.teacherForm);
      this.infoVisible = true;
    },
    // 删除循环周
    removeWeek(item) {
      for (let i in this.weekList) {
        if (this.weekList[i].id == item.id) {
          this.weekList.splice(i, 1);
        }
      }
    },
    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;
          });
        }
      });
      if( this.activeType == 'HIGH' || this.activeType=='HIGH_ONLINE'){
        this.getNoClassStudent(row.type,row.memo);
        let arr = row.memo.split(',')
        console.log(arr)
        this.activeSoundList = this.soundList.filter(sound=>{
          return arr.indexOf(sound.id+'') != -1
        })
        console.log(this.activeSoundList)
      }else{
        this.activeSoundList = this.soundList
        this.getNoClassStudent(row.type);
          console.log(this.activeSoundList)
      }

    },
    // 排课开始
    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;
      }
      if (
        this.arrangeForm.courseNum > this.maxMun ||
        this.arrangeForm.courseNum < 1
      ) {
        this.$message.error(`排课数量必须大于1或小于${this.maxMun}`);
        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 = [];
      }
    },
    lookDeatil(row) {
      console.log(row);
      this.lookDeatilVisible = true;
      this.activeClass = row.id;
      this.activeType = row.type;
      getClassAllStudent({ classGroupId: this.activeClass }).then((res) => {
        if (res.code == 200) {
          this.classList = res.data;
        }
      });

      return;
    },
    addstudentBtn(row) {
      this.activeClass = row.id;
      let type = row.type;
      getMusicGroupStuNoClassType({ musicGroupId: this.teamid, type }).then(
        (res) => {
          if (res.code == 200) {
            this.studentList = res.data;
            this.addStudentVisible = true;
          }
        }
      );
    },
    selectStudent(val) {
      this.activeStudentList = val;
    },
    addStudnt() {
      // 发请求添加学生
      let classGroupId = this.activeClass;
      let userIdsStr = this.activeStudentList
        .map((item) => {
          return item.userId;
        })
        .join(",");
      addStudents({ userIdsStr, classGroupId }).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.activeStudentList = [];
          this.addStudentVisible = false;
          // 取消列表的勾选
          this.$refs.studentList.clearSelection();
          this.getList();
        }
      });
    },

    changeMemo(val) {
      // 声部id
      let flag = false;
      if (val.length < 1) {
        this.soundList.forEach((sound) => {
          sound.disabled = false;
          this.appoint = false;
        });
      } else {
        this.soundList.forEach((sound) => {
          if (sound.id == val[0]) {
            if (
              sound.name.indexOf("上低音号") > -1 ||
              sound.name.indexOf("长号") > -1
            ) {
              // 要么选中长号  要么选中上低音号
              sound.disabled = false;
              flag = true;
            } else {
              sound.disabled = true;
              this.appoint = true;
            }
          }
        });
        if (flag) {
          this.soundList.forEach((sound) => {
            if (
              sound.name.indexOf("上低音号") > -1 ||
              sound.name.indexOf("长号") > -1
            ) {
              // 要么选中长号  要么选中上低音号
              sound.disabled = false;
            } else {
              sound.disabled = true;
            }
          });
        }
      }
    },
    checkSubject(item) {
      // newClassForm.memo
    },
  },
  computed: {},
  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: {
    "newClassForm.type"() {
      if (this.newClassForm.type === "HIGH_ONLINE") {
        this.$set(this.newClassForm, "expectStudentNum", 6);
      }
    },
    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>