|
@@ -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>
|