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

<template>
  <!-- m-container -->
  <div class="">
    <!-- <h2>
      <div class='squrt'></div>
      班级调整
    </h2> -->
    <div class="m-core">
      <el-form :inline="true"
               :model="topForm">
        <el-form-item label="班级类型">
          <el-select v-model="topForm.classType"
                     clearable
                     @change="changeMixClass">
            <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="tableWrap"
           style=" width: 800px;">
        <el-table :data='activeSingleList'
                  style="width:800px;"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align='center'
                           prop="name"
                           label="班级名称">
          </el-table-column>
          <el-table-column align='center'
                           prop="studentNum"
                           label="班级人数">
          </el-table-column>
          <el-table-column align='center'
                           prop=""
                           label="主教老师">
            <template slot-scope="scope">
              <div v-if="scope.row.classGroupTeacherMapperList">
                <p v-for="(item,index) in scope.row.classGroupTeacherMapperList"
                   v-if="item.teacherRole == 'BISHOP'"
                   :key='index'>{{item.userName}}</p>

              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="助教老师">
            <template slot-scope="scope">
              <div v-if="scope.row.classGroupTeacherMapperList">
                <p v-for="(item,index) in scope.row.classGroupTeacherMapperList"
                   v-if="item.teacherRole == 'TEACHING'"
                   :key='index'>{{item.userName}}</p>

              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="是否排课">
            <template slot-scope="scope">
              <div>
                <p v-if="scope.row.totalClassTimes > 0"> 是</p>
                <p v-if="scope.row.totalClassTimes <= 0"> 否</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="操作">
            <template slot-scope="scope">
              <div>
                <el-popover placement="top"
                            width="160"
                            :ref="scope.$index">
                  <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>
                  <el-button type="text"
                             slot="reference">删除</el-button>
                </el-popover>
                <el-button type="text"
                           @click="resetClass(scope.row)">修改</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="floor">
          <div class="add"
               @click="temporary">临时调整</div>
          <div class='add'
               @click="addNewClass">新建班级</div>
        </div>
      </div>
    </div>
    <el-dialog title="学员选择"
               width="700px"
               :visible.sync="studentVisible"
               :modal-append-to-body="false">
      <div class="studentMask">
        <div class="left">

          <div class="wrap">
            <el-input placeholder="请输入班级名称"
                      :disabled="!isNewClass"
                      v-model="className"></el-input>
          </div>
          <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="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 -->
          <el-select v-if="isSearch"
                     v-model="activeChioseSound"
                     style="width:180px"
                     clearable
                     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="80"
                               label="姓名">
              </el-table-column>
              <el-table-column prop="gender"
                               align='center'
                               width="55"
                               label="性别">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.gender | sex }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="subjectName"
                               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="80"
                               label="姓名">
              </el-table-column>
              <el-table-column prop="gender"
                               align='center'
                               width="55"
                               label="性别">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.gender | sex }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="subjectName"
                               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="setInfoMsg">确 定</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;">
        <el-form-item label="主教老师"
                      prop='coreTeacher'>
          <el-select v-model="teacherForm.coreTeacher"
                     filterable>
            <el-option v-for="(item,index) in teacherList"
                       :key="index"
                       :label="item.name"
                       :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="助教老师"
                      prop="assistant">
          <el-select v-model="teacherForm.assistant"
                     filterable
                     multiple>
            <el-option v-for="(item,index) in teacherList"
                       :key="index"
                       :label="item.name"
                       :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程类型"
                      prop="courseType">
          <el-select v-model="teacherForm.courseType">
            <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="courseNum">
          <el-input type='number'
                    v-model="teacherForm.courseNum"></el-input>
        </el-form-item>
        <el-form-item label="排课起始时间"
                      prop="courseTime">
          <el-date-picker v-model="teacherForm.courseTime"
                          style="width:200px;"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
          <el-checkbox style='margin-left:10px;'
                       v-model="teacherForm.checked">是否跳过节假日</el-checkbox>
        </el-form-item>
      </el-form>
      <div class="WeekWrap">
        <h3 style="margin-bottom:20px;">循环次数 <el-button type="text"
                     style='margin-left:10px;'
                     @click="addWeek">添加</el-button>
        </h3>
        <div class="countWrap"
             style="margin-bottom:10px;">
          <div class="countItem"
               style="margin-bottom:20px;"
               v-for="(item,index) in weekList"
               :key="index">
            <span>循环周期: </span>
            <el-select v-model="item.dayOfWeek">
              <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="item.startClassTime"
                            :picker-options="{
                               start: '08:30',
                               step: '00:15',
                               end: '18:30'
            }">
            </el-time-select>
            <span>结束时间</span>
            <el-time-select placeholder=""
                            v-model="item.endClassTime"
                            :picker-options="{
                              start: '08:30',
                              step: '00:15',
                              end: '18:30'
            }">
            </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="isTemporary"
                   @click="submitTemporary(1)">确 定</el-button>
        <!-- 2为新增班级 -->
        <el-button type="primary"
                   v-if="!isTemporary"
                   @click="submitTemporary(2)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAllClass, getAllSignClassandTeacher, getAllSignClass, removeSingleClass, getNoClassStudentAll, findSound, teamSoundStudent, findMusicGroupClassTeacher, revisionClassGroup, revisionAddClassGroup } from '@/api/buildTeam'
import { getClassAllStudent, removeStudents, addStudents } from '@/api/studentManager'
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      teamid: '',
      topForm: {
        classType: ''
      },
      tableList: [],
      maxClassList: [],
      activeSingleList: [],
      studentVisible: false,
      activeListStudent: [], // 当前选中的学生列表
      activeChioseSound: '', //选择的声部
      chioseSoundList: [], //当前的所有声部
      studentList: [], //列表里的学生集合
      activeMixClass: '', // 选中的合奏班
      chioseStudent: [],// 勾选的学生信息
      isNewClass: false, // 是否为新建班级
      isSearch: false, // 是否需要搜索
      isTemporary: false, // 是否为临时班级
      className: '', // 班级名称
      activeClass: '', // 当前操作的班级
      soundList: [],
      infoVisible: false, // 判断是否需要显示老师设置
      teacherForm: {
        coreTeacher: '',
        assistant: [],
        courseType: '',
        courseTime: '',
        checked: false,
        courseNum: ''
      },
      teacherRules: {
        coreTeacher: [{ required: true, message: '请选择主教老师' }],
        courseType: [{ required: true, message: '请选择上课类型' }],
        courseTime: [{ required: true, message: '请选择开始时间' }],
        courseNum: [{ required: true, message: '请输入排课次数' }]
      },
      weekList: [{
        week: '',
        startTime: '',
        endTime: '',
        id: new Date()
      }],
      teacherList: [], // 存储的老师列表
      courseTypeList: [
        { value: 'SINGLE', label: '单技课' },
        { value: 'MIX', label: '合奏课' },
        { value: 'TRAINING_SINGLE', label: '集训单技课' },
        { value: 'TRAINING_MIX', label: '集训合奏课' },
        { value: 'HIGH', label: '基础技能班' },
        { value: 'COMPREHENSIVE', label: '综合课' },
        { value: 'CLASSROOM', label: '课堂课' },
      ],
      weekDateList: [
        { value: '1', label: '星期一' },
        { value: '2', label: '星期二' },
        { value: '3', label: '星期三' },
        { value: '4', label: '星期四' },
        { value: '5', label: '星期五' },
        { value: '6', label: '星期六' },
        { value: '7', label: '星期日' },
      ],
      // 班级类型
      classTypeList: [
        { value: 'NORMAL', label: '单技班' },
        { value: 'MIX', label: '合奏班' },
        { value: 'HIGH', label: '基础技能班' },
        { value: 'SNAP', label: '临时班' },
      ]
    }
  },
  created () {
    this.teamid = this.$route.query.id;
  },
  mounted () {
    sessionStorage.setItem('resetCode', 3)
    // 1.获取乐团下所有的合奏班
    // 2.根据合奏班获取所有的单技班
    // 3.根据乐团id 查询 此乐团所有的合奏班
    // 4.获取当年的所有节假日
    // getAllClass({ musicGroupId: this.teamid }).then(res => {
    //   if (res.code == 200) {
    //     this.maxClassList = res.data;
    //   }
    // })
    // let year = new Date().getFullYear();
    // axios.post('/jiari/', qs.stringify({ d: year })).then(res => {
    //   this.holidayList = Object.keys(res.data[year])
    // })
    // getNoClassStudentAll({ musicGroupId: this.teamid }).then(res => {
    // })


    // 获取默认乐团内的所有班
    this.changeMixClass()
    // 根据乐团id获取乐团的所有声部
    findSound({ musicGroupId: this.teamid }).then(res => {
      if (res.code == 200) {
        this.soundList = res.data
      }
    })

    // 获取所有老师
    findMusicGroupClassTeacher({
      musicGroupId: this.teamid
    }).then(res => {
      if (res.code == 200) {
        this.teacherList = res.data
      }
    })
    // 课程类型
  },
  methods: {
    changeMixClass (val) {
      // 根据合奏班id获取合奏班下的所有单技班
      this.getList(val);
      this.activeMixClass = val;
    },
    getList (val) {
      getAllSignClassandTeacher({ musicGroupId: this.teamid, type: val }).then(res => {
        if (res.code == 200) {
          this.activeSingleList = res.data;
          // this.topForm.count = this.activeSingleList.length
        }
      })
    },
    // 临时调整
    temporary () {

      this.activeClass = '';
      this.activeListStudent = [];
      this.studentList = [];
      this.isNewClass = true;
      this.studentVisible = true;
      this.isSearch = true;
      this.className = '';
      this.isTemporary = true;

    },

    // 新增班级 
    addNewClass () {
      this.activeClass = '';
      this.activeListStudent = [];
      this.studentList = [];
      this.isNewClass = true;
      this.studentVisible = true;
      this.isSearch = false;
      this.className = '';
      this.isTemporary = false;
      this.getNoClassStudent()

    },
    searchStudent () {
      // 搜索学生
      // 根据声部id  乐团id搜索学生
      teamSoundStudent({ musicGroupId: this.teamid, actualSubjectId: this.activeChioseSound }).then(res => {
        if (res.code == 200) {
          this.studentList = res.data;
        }
      })
    },
    // 选择学生的方法修改
    SelectionStudent (val) {
      this.chioseStudent = val;

    },
    // 新增选中的学生
    NewselectionStudent (val) {
      this.chioseStudent = val;
      // 这里新增的添加到选中的学生列表  根据学生id去重
      if (this.chioseStudent.length > 0) {
        this.chioseStudent = this.chioseStudent.concat(val);
      } else {
        this.chioseStudent = val;
      }

      this.activeListStudent = this.activeListStudent.concat(this.chioseStudent);
      // 去重
      this.activeListStudent = this.objArrayRemoval(this.activeListStudent, 'userId');
      // 将其填入选中的学生
    },
    // 删除班级
    removeClass (scope) {
      removeSingleClass({ classGroupId: scope.row.id }).then(res => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          scope._self.$refs[scope.$index].doClose();
          // 重新请求列表
          this.getList(this.activeMixClass);
        } else {
          this.$message.error(res.msg)
          scope._self.$refs[scope.$index].doClose();
        }
      }).catch(res => {
        scope._self.$refs[scope.$index].doClose();
      })
    },
    // 修改班级
    resetClass (row) {
      this.isNewClass = false;
      this.className = row.name;
      this.studentVisible = true;
      this.activeClass = row.id
      this.isSearch = false;
      // 根据单机班id 查询单技班内的所有学生
      getClassAllStudent({ classGroupId: row.id }).then(res => {
        if (res.code == 200) {
          this.activeListStudent = res.data.map(item => {
            item.isVisible = false;
            return item;
          });
        }
      })
      this.getNoClassStudent()

    },
    getNoClassStudent () {
      // 获取乐团内所有未分班的学生
      getNoClassStudentAll({ musicGroupId: this.teamid }).then(res => {
        if (res.code == 200) {
          this.studentList = res.data
        }
      })
    },
    // 删除学生 调整
    removeStudent (item) {
      // console.log(item.userId);
      // removeStudents({ classGroupId:}).then(res => {
      removeStudents({ classGroupId: this.activeClass, userId: item.userId }).then(res => {
        if (res.code == 200) {
          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;
            }
          })
          getNoClassStudentAll({ musicGroupId: this.teamid }).then(res => {
            if (res.code == 200) {
              this.$message.success('删除成功');
              this.studentList = res.data.map(item => {
                item.isVisible = false;
                return item;
              });

            }
          })
        }
      })


    },
    // 批量添加学生
    addSomeStudent () {
      // 获取勾选的学生
      let arr = this.chioseStudent.map(item => {
        return item.userId;
      });
      addStudents({ classGroupId: this.activeClass, userIdsStr: arr.join(',') }).then(res => {
        if (res.code == 200) {
          this.studentVisible = false;
        }
      })
    },

    // 
    temporaryRemoveStudent (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)
        }
      }
      // console.log(this.$refs['temporaryStudentList'].toggleRowSelection)
      // this.$refs['temporaryStudentList'].toggleRowSelection(row, selected);

    },
    // 对象数组去重
    objArrayRemoval (arr, attr) {
      let obj = {};
      let result = [];
      // console.log(this.allActiveStudent.length);
      for (let x in arr) {
        if (!obj[arr[x][attr]]) {
          result.push(arr[x]);
          obj[arr[x][attr]] = true;
        }
      }
      return result;
    },
    setInfoMsg () {
      // 判断班级名称是否输入
      if (!this.className) {
        this.$message.error('请输入班级名称')
        return
      }
      // 判断有没有勾选学生
      if (this.activeListStudent.length <= 0) {
        // 没有勾学生
        this.$message.error('班级里至少要有一名学生')
        return
      }
      this.infoVisible = true;
    },
    addWeek () {
      // 添加循环周期
      this.weekList.push({
        dayOfWeek: '',
        startClassTime: '',
        endClassTime: '',
        id: new Date()
      })
    },
    // 删除循环周
    removeWeek (item) {
      for (let i in this.weekList) {
        if (this.weekList[i].id == item.id) {
          this.weekList.splice(i, 1)
        }

      }
    },
    // 提交临时班的信息
    submitTemporary (type) {
      this.$refs['teacherForm'].validate(item => {
        if (item) {
          let week = this.weekList;
          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.activeMixClass;
          let musicGroupId = this.teamid;
          let startDate = this.teacherForm.courseTime;
          let courseType = this.teacherForm.courseType;
          let courseTimes = this.teacherForm.courseNum
          let students = this.activeListStudent.map(item => {
            return item.userId;
          })
          let holiday = this.teacherForm.checked;
          /**
           *  this.weekList.push({
        week: '',
        startTime: '',
        endTime: '',
           * 
           */
          let courseList = [];
          for (let i in this.weekList) {
            courseList.push(this.weekList[i])
          }
          if (courseList.length <= 0) {
            this.$message.error('新增班级至少排一节课')
            return
          }
          let obj = {
            classGroupName,
            classGroupTeacherMapperList,
            mixClassGroupId,
            musicGroupId,
            startDate,
            courseType,
            students,
            holiday,
            courseTimes,
            courseTimeDtoList: courseList
          }
          if (type == 1) {
            revisionClassGroup(obj).then(res => {
              if (res.code == 200) {
                // 提示修改成功
                this.$message.success('修改成功')
                this.infoVisible = false;
                this.studentVisible = false;
                this.getList(this.activeMixClass);
              }
            })
          } else if (type == 2) {
            revisionAddClassGroup(obj).then(res => {
              if (res.code == 200) {
                // 修改成功
                this.$message.success('修改成功');
                this.infoVisible = false;
                this.studentVisible = false;
                this.getList(this.activeMixClass);
              }
            })
          }

        } else {
          this.$message.error('请填写必要信息')
          return;
        }
      })
    },
  },
  watch: {
    infoVisible (val) {
      if (!val) {
        this.teacherForm;
        this.$refs['teacherForm'].resetFields();
        this.weekList = [];
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.floor {
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: rgba(237, 238, 240, 1);
  font-size: 14px;
  color: #444;
  align-items: center;
  position: relative;
  z-index: 1;
  .remove {
    width: 98px;
    height: 32px;
    background: rgba(248, 80, 67, 1);
    border-radius: 3px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    margin-left: 164px;
    cursor: pointer;
  }
  .add {
    width: 98px;
    height: 32px;
    background: rgba(20, 146, 138, 1);
    border-radius: 3px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    margin-left: 20px;
    cursor: pointer;
  }
}
.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 {
    .tableList {
      max-height: 500px;
      overflow-y: auto;
    }
  }
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100px;
}
</style>