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

<template>
  <div class='set-teacher'>
    <!-- <div class="allClassLis">
      <div class="allClassBtn"
           @click="getAllClassInfo(item.id)"
           :class="activeAllClass==item.id?'active':''"
           v-for="(item,index) in allList"
           :key='index'>
        {{ item.name }}
      </div>
    </div> -->
    <div class="tableWrap">
      <el-table :data='singinList'
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column label="班级名称"
                         prop='name'
                         width="160px">
        </el-table-column>
        <el-table-column label="所属合奏班"
                         prop='mixClassName'
                         width="160px">
        </el-table-column>
        <el-table-column label="主教老师"
                         width="200px">
          <template slot-scope="scope">
            <div>
              <el-select v-model="scope.row.coreTeacher"
                         :disabled="isSetSalary"
                         filterable
                         clearable
                         @change="setCoreTeacher"
                         v-if='teacherList'>
                <el-option v-for='(item,index) in teacherList'
                           :label="item.username"
                           :key='index'
                           :value="item.id"></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="
                         助教老师">
          <template slot-scope="scope">
            <div>
              <el-select class='tableClass'
                         filterable
                         @change="chioseAssistant(scope.row)"
                         v-if='teacherList'
                         :disabled="!scope.row.coreTeacher || isSetSalary"
                         multiple
                         v-model="scope.row.assistant">
                <el-option v-for='(item,index) in teacherList'
                           :label="item.username"
                           :key='index'
                           :value="item.id"></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="tableWrap">
      <el-table :data='allList'
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column label="合奏班名称"
                         prop='name'
                         width="160px">

        </el-table-column>
        <el-table-column label="主教老师"
                         width="200px;">
          <template slot-scope="scope">
            <div>
              <el-select v-model="scope.row.coreTeacher"
                         :disabled="isSetSalary"
                         clearable
                         filterable
                         v-if='teacherList'>
                <el-option v-for='(item,index) in teacherList'
                           :label="item.username"
                           :key='index'
                           :value="item.id"></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="
                         助教老师">
          <template slot-scope="scope">
            <div>
              <!-- v-if='scope.row.assistant' -->
              <el-select class='tableClass'
                         @change="chioseAssistant(scope.row)"
                         multiple
                         filterable
                         :disabled="!scope.row.coreTeacher ||  isSetSalary"
                         v-model="scope.row.assistant">
                <el-option v-for='(item,index) in teacherList'
                           :label="item.username"
                           :key='index'
                           :value="item.id"></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <!-- <div class="reset">返回修改</div> -->
      <div class="next"
           @click="gotoNext">下一步</div>
    </div>
  </div>
</template>
<script>
import { getEveryClass, getTeacher, setTeamTeacher } from '@/api/buildTeam'
export default {
  props: {
    teamid: {
      type: String,
      required: true
    },
    isSetSalary: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      singinList: [],
      allList: [],
      teacherList: [],
      classGroupTeacherMapperList: []
      // activeAllClass: ''
    }
  },
  mounted () {
    sessionStorage.setItem('setStep', 1)
    // 该乐团里所有的单技班与合奏班
    this.getEveryClass();
    // 获取所有的老师列表
    getTeacher().then(res => {
      if (res.code == 200) {
        this.teacherList = res.data;
      }
    })

  },
  methods: {
    // 根据合奏班id获取合奏班信息
    getEveryClass () {
      getEveryClass({ musicGroupId: this.teamid }).then(res => {
        let singinList = [];
        let allList = [];
        res.data.map(item => {
          // item.teacherList = {
          //   coreTeacher: '',
          //   assistant:[]
          // }
          item.coreTeacher = ''
          item.assistant = []
          if (item.classGroupTeacherMapperList && item.classGroupTeacherMapperList.length > 0) {
            //循环老师列表分配到不同的
            for (let i in item.classGroupTeacherMapperList) {
              if (item.classGroupTeacherMapperList[i].teacherRole == 'BISHOP') {
                item.coreTeacher = item.classGroupTeacherMapperList[i].userId
              } else if (item.classGroupTeacherMapperList[i].teacherRole == 'TEACHING') {
                item.assistant.push(item.classGroupTeacherMapperList[i].userId)
              }
            }
          }
          if (item.type == 'NORMAL') {
            singinList.push(item)
          }
          if (item.type == 'MIX') {
            allList.push(item)
          }
        })
        this.singinList = singinList;
        this.allList = allList;
      })
    },
    gotoNext () {
      // 点击下一步
      // console.log(this.singinList)
      if (this.isSetSalary) {
        this.$message.error('课酬确认后无法编辑')
        return;
      }
      let isTeacher = true;
      let isTeachers = []
      let singinListTeacher = []
      let allListTeacher = []


      // 验证单技班主教老师是否指认
      for (let i in this.singinList) {
        singinListTeacher.push(this.singinList[i].coreTeacher);
        singinListTeacher = singinListTeacher.concat(this.singinList[i].assistant)
        if (this.singinList[i].coreTeacher == '') {
          isTeachers.push(false)
        }
      }
      // if (singinListTeacher.length != [...new Set(singinListTeacher)].length) {
      //   this.$message.error('存在老师设置冲突，请调整')
      //   return
      // }

      for (let j in this.allList) {
        allListTeacher.push(this.allList[j].coreTeacher);
        allListTeacher = allListTeacher.concat(this.allList[j].assistant)
        if (this.allList[j].coreTeacher == '') {
          isTeachers.push(false)
        }
      }
      // if (allListTeacher.length != [...new Set(allListTeacher)].length) {
      //   this.$message.error('存在老师设置冲突，请调整')
      //   return
      // }
      isTeachers.filter(item => {
        isTeacher = isTeacher && item
      })
      if (!isTeacher) {
        this.$message.error('请确定每个班级都有主教老师')
        return;
      }
      // 开始拼接数据
      this.addDate(this.singinList);
      this.addDate(this.allList);
      setTeamTeacher(this.classGroupTeacherMapperList).then(res => {
        if (res.code == 200) {
          this.classGroupTeacherMapperList = [];
          this.$emit('gotoNav', 2);
        }
      })
    },
    addDate (arr) {
      for (let i in arr) {
        let obj = {}
        obj.classGroupId = arr[i].id;
        obj.musicGroupId = this.teamid;
        obj.teacherRole = 'BISHOP';
        obj.userId = arr[i].coreTeacher;
        this.classGroupTeacherMapperList.push(obj)
        for (let j in arr[i].assistant) {
          let obj = {}
          obj.classGroupId = arr[i].id;
          obj.musicGroupId = this.teamid;
          obj.teacherRole = 'TEACHING';
          obj.userId = arr[i].assistant[j];
          this.classGroupTeacherMapperList.push(obj)
        }
      }
    },
    setCoreTeacher (val) {
    },
    chioseAssistant (row) {
      for (let i in row.assistant) {
        if (row.assistant[i] == row.coreTeacher) {
          row.assistant = [];
          this.$message.error('同一个班主教助教不能相同')
          return
        }
      }
    }
  },

}
</script>
<style lang="scss" scope>
.set-teacher {
  box-sizing: border-box;
  padding: 30px 42px;
  background-color: #fff;
  min-height: 80vh;
  .allClassLis {
    display: inline-block;
    // flex-direction: row;
    // justify-content: flex-start;
    border: 4px solid #f97215;
    align-items: center;
    border-radius: 4px;
    margin-bottom: 24px;
    clear: both;
    .allClassBtn {
      width: 91px;
      height: 32px;
      line-height: 32px;
      background-color: #f97215;
      color: #fff;
      text-align: center;
      font-size: 14px;
      float: left;
      cursor: pointer;
    }
    .allClassBtn.active {
      width: 91px;
      height: 32px;
      line-height: 32px;
      background-color: #fff;
      color: #f97215;
      text-align: center;
      font-size: 14px;
      float: left;
    }
  }
  .tableClass {
    margin-right: 10px;
  }
  i {
    cursor: pointer;
  }
  .footer {
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    > div {
      width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
    }
    .reset {
      background-color: #14928a;
      margin-right: 20px;
    }
    .next {
      background-color: #444;
    }
  }
}
.tableClass.el-select {
  width: 100% !important;
}
</style>