|  | @@ -0,0 +1,197 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class="m-container">
 | 
	
		
			
				|  |  | +    <h2>
 | 
	
		
			
				|  |  | +      <div class='squrt'></div>提高班报名详情
 | 
	
		
			
				|  |  | +    </h2>
 | 
	
		
			
				|  |  | +    <div class='m-core'>
 | 
	
		
			
				|  |  | +      <div class="tableWrap">
 | 
	
		
			
				|  |  | +        <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}"
 | 
	
		
			
				|  |  | +                  :data='tableList'>
 | 
	
		
			
				|  |  | +          <el-table-column label="班级名称"
 | 
	
		
			
				|  |  | +                           prop="name">
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column label="声部"
 | 
	
		
			
				|  |  | +                           prop="subjectName">
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column label="预计人数"
 | 
	
		
			
				|  |  | +                           prop="expectStudentNum">
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column label="实际人数"
 | 
	
		
			
				|  |  | +                           prop="studentNum">
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column label="操作">
 | 
	
		
			
				|  |  | +            <template slot-scope="scope">
 | 
	
		
			
				|  |  | +              <div>
 | 
	
		
			
				|  |  | +                <el-button type="text"
 | 
	
		
			
				|  |  | +                           @click='lookDeatil(scope.row)'>查看</el-button>
 | 
	
		
			
				|  |  | +                <el-button type="text"
 | 
	
		
			
				|  |  | +                           @click="addstudentBtn(scope.row)">添加学员</el-button>
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +            </template>
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +        </el-table>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +    <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"
 | 
	
		
			
				|  |  | +                   @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"
 | 
	
		
			
				|  |  | +                          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">调整班级</el-button>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +      </el-table>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    </el-dialog>
 | 
	
		
			
				|  |  | +    <el-dialog title="学员班级调整"
 | 
	
		
			
				|  |  | +               width="600px"
 | 
	
		
			
				|  |  | +               append-to-body
 | 
	
		
			
				|  |  | +               :visible.sync="resetVisible">
 | 
	
		
			
				|  |  | +      <div class="radioBox">
 | 
	
		
			
				|  |  | +        <el-radio v-model="studentRadio"
 | 
	
		
			
				|  |  | +                  label="1">备选项</el-radio>
 | 
	
		
			
				|  |  | +        <div>预计人数:</div>
 | 
	
		
			
				|  |  | +        <div>实际人数:</div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    </el-dialog>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +import { highClassGroups, teamSoundStudent } from '@/api/buildTeam'
 | 
	
		
			
				|  |  | +import { getClassAllStudent, addStudents } from '@/api/studentManager'
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  data () {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      tableList: [],
 | 
	
		
			
				|  |  | +      teamid: '',
 | 
	
		
			
				|  |  | +      lookDeatilVisible: false,
 | 
	
		
			
				|  |  | +      addStudentVisible: false,
 | 
	
		
			
				|  |  | +      resetVisible: false,
 | 
	
		
			
				|  |  | +      studentList: [], // 乐团所有学生
 | 
	
		
			
				|  |  | +      activeStudentList: [], // 选中的学生集合
 | 
	
		
			
				|  |  | +      activeClass: '',  // 选中的班级id
 | 
	
		
			
				|  |  | +      classList: [],
 | 
	
		
			
				|  |  | +      activeStudent: null,
 | 
	
		
			
				|  |  | +      studentRadio: '' // 学生新选择的班级
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  mounted () {
 | 
	
		
			
				|  |  | +    this.teamid = this.$route.query.id;
 | 
	
		
			
				|  |  | +    // console.log(this.teamid)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    this.getList();
 | 
	
		
			
				|  |  | +    teamSoundStudent({ musicGroupId: this.teamid }).then(res => {
 | 
	
		
			
				|  |  | +      if (res.code == 200) {
 | 
	
		
			
				|  |  | +        this.studentList = res.data;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    })
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    getList () {
 | 
	
		
			
				|  |  | +      highClassGroups({ musicGroupId: this.teamid }).then(res => {
 | 
	
		
			
				|  |  | +        if (res.code == 200) {
 | 
	
		
			
				|  |  | +          this.tableList = res.data;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    lookDeatil (row) {
 | 
	
		
			
				|  |  | +      this.lookDeatilVisible = true;
 | 
	
		
			
				|  |  | +      console.log(row.id);
 | 
	
		
			
				|  |  | +      getClassAllStudent({ classGroupId: row.id }).then(res => {
 | 
	
		
			
				|  |  | +        if (res.code == 200) {
 | 
	
		
			
				|  |  | +          this.classList = res.data;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      return
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    addstudentBtn (row) {
 | 
	
		
			
				|  |  | +      this.activeClass = row.id;
 | 
	
		
			
				|  |  | +      this.addStudentVisible = true;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    addStudnt () {
 | 
	
		
			
				|  |  | +      // 发请求添加学生
 | 
	
		
			
				|  |  | +      let classGroupId = this.activeClass;
 | 
	
		
			
				|  |  | +      let userIdsStr = this.activeStudentList.map(item => {
 | 
	
		
			
				|  |  | +        return item.id
 | 
	
		
			
				|  |  | +      }).join(',')
 | 
	
		
			
				|  |  | +      addStudents({ userIdsStr, classGroupId }).then(res => {
 | 
	
		
			
				|  |  | +        if (res.code == 200) {
 | 
	
		
			
				|  |  | +          this.$message.success('添加成功')
 | 
	
		
			
				|  |  | +          this.activeStudentList = [];
 | 
	
		
			
				|  |  | +          this.addStudentVisible = false;
 | 
	
		
			
				|  |  | +          // 取消列表的勾选
 | 
	
		
			
				|  |  | +          this.$refs.studentList.clearSelection();
 | 
	
		
			
				|  |  | +          this.getList();
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    selectStudent (val) {
 | 
	
		
			
				|  |  | +      this.activeStudentList = val;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 删除学生
 | 
	
		
			
				|  |  | +    removeStudent (scope) {
 | 
	
		
			
				|  |  | +      console.log(scope.row.id);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      scope._self.$refs[scope.$index].doClose();
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +<style lang="scss">
 | 
	
		
			
				|  |  | +.radioBox {
 | 
	
		
			
				|  |  | +  display: flex;
 | 
	
		
			
				|  |  | +  flex-direction: row;
 | 
	
		
			
				|  |  | +  justify-content: flex-start;
 | 
	
		
			
				|  |  | +  margin-bottom: 20px;
 | 
	
		
			
				|  |  | +  div {
 | 
	
		
			
				|  |  | +    margin-right: 30px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |