123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318 |
- <template>
- <div class="m-container">
- <h2>
- <el-page-header @back="onCancel"
- content="基础技能班报名详情"></el-page-header>
- <!-- <div class='squrt'></div> -->
- <!-- <span @click="onCreateQRCode" style="font-size: 16px; padding-left: 20px; font-weight: 400;cursor: pointer; ">查看报名连接</span> -->
- <span @click="onApply"
- v-permission="'musicGroup/pushMessage'"
- style="font-size: 16px; padding-left: 20px; font-weight: 400;cursor: pointer; color: #409eff;">开启报名</span>
- </h2>
- <div class='m-core'>
- <div class="tableWrap">
- <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}"
- :data='tableList'>
- <el-table-column label="班级名称"
- align="center"
- prop="name">
- </el-table-column>
- <el-table-column label="声部"
- align="center"
- prop="subjectName">
- </el-table-column>
- <el-table-column label="预计人数"
- align="center"
- prop="expectStudentNum">
- </el-table-column>
- <el-table-column label="实际人数"
- align="center"
- prop="studentNum">
- </el-table-column>
- <el-table-column label="操作">
- <template slot-scope="scope">
- <div>
- <el-button type="text"
- v-permission="'classGroupStudent/findAllStudent'"
- @click='lookDeatil(scope.row)'>查看</el-button>
- <el-button type="text"
- v-permission="'classGroupStudent/addStudents'"
- @click="addstudentBtn(scope.row)">添加学员</el-button>
- </div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- <el-dialog title="报名二维码"
- :visible.sync="qrcodeStatus"
- width="300px">
- <div class="left-code"
- style="display: flex; flex-direction: column; align-items: center;">
- <h2>小班课报名连接</h2>
- <div id="qrcode"
- class="qrcode code"
- ref="qrCodeUrl"></div>
- <p class="code-url"
- style="width: 220px"
- v-if="codeUrl">{{ codeUrl }}</p>
- </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>
- <el-dialog title="学员班级调整"
- width="600px"
- append-to-body
- :visible.sync="resetVisible">
- <div class="radioBox"
- v-for="(item,index) in tableList"
- :key="index">
- <el-radio v-model.trim="studentRadio"
- style="width:120px;"
- :label="item.id">{{ item.name }}</el-radio>
- <div>预计人数:{{ item.expectStudentNum }}</div>
- <div>实际人数:{{ item.studentNum }}</div>
- </div>
- <div slot="footer"
- class="dialog-footer">
- <el-button type="primary"
- @click="resetStudent">确 定</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import { highClassGroups, teamSoundStudent, resetHighClass, pushMessage } from '@/api/buildTeam'
- import { getClassAllStudent, addStudents, removeStudents } from '@/api/studentManager'
- // import QRCode from 'qrcodejs2'
- export default {
- name: 'setImprovement',
- data () {
- return {
- tableList: [],
- teamid: '',
- lookDeatilVisible: false,
- addStudentVisible: false,
- resetVisible: false,
- studentList: [], // 乐团所有学生
- activeStudentList: [], // 选中的学生集合
- activeClass: '', // 选中的班级id
- classList: [],
- activeStudent: null,
- studentRadio: '', // 学生新选择的班级
- qrcodeStatus: false, // 生成二维码
- qrcodes: true,
- qrcode: null,
- codeUrl: null,
- Fsearch: null,
- Frules: null
- }
- },
- mounted () {
- this.init()
- },
- activated () {
- this.init()
- },
- methods: {
- init () {
- this.teamid = this.$route.query.id;
- if (this.$route.query.search) {
- this.Fsearch = this.$route.query.search;
- }
- if (this.$route.query.rules) {
- this.Frules = this.$route.query.rules
- }
- this.getList();
- teamSoundStudent({ musicGroupId: this.teamid }).then(res => {
- if (res.code == 200) {
- this.studentList = res.data;
- }
- })
- },
- onApply () {
- this.$confirm('您确定开启报名吗?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- pushMessage({ musicGroupId: this.teamid }).then(res => {
- let result = res.data
- if (res.code == 200) {
- this.$message.success('开启成功')
- } else {
- this.$message.error(res.msg)
- }
- })
- }).catch(() => { })
- },
- // onCreateQRCode () { // 生成报名二维码
- // this.qrcodeStatus = true
- // let id = this.$route.query.id
- // let teamName = this.$route.query.name
- // if (this.qrcodes) {
- // this.qrcodes = false
- // setTimeout(() => {
- // this.qrcode = new QRCode('qrcode', {
- // width: 200,
- // height: 200,
- // colorDark: '#000000',
- // colorLight: '#ffffff',
- // correctLevel: QRCode.CorrectLevel.H
- // })
- // this.qrcode.makeCode('http://mstudev.dayaedu.com/#/smallLogin?musicGroupId=' + id)
- // this.codeUrl = 'http://mstudev.dayaedu.com/#/smallLogin?musicGroupId=' + id
- // }, 500)
- // }
- // },
- getList () {
- highClassGroups({ musicGroupId: this.teamid }).then(res => {
- if (res.code == 200) {
- this.tableList = res.data;
- }
- })
- },
- lookDeatil (row) {
- this.lookDeatilVisible = true;
- this.activeClass = row.id;
- getClassAllStudent({ classGroupId: this.activeClass }).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.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();
- }
- })
- },
- selectStudent (val) {
- this.activeStudentList = val;
- },
- // 删除学生
- removeStudent (scope) {
- removeStudents({ classGroupId: this.activeClass, userId: scope.row.userId }).then(res => {
- if (res.code == 200) {
- this.$message.success('恭喜你删除成功');
- scope._self.$refs[scope.$index].doClose();
- getClassAllStudent({ classGroupId: this.activeClass }).then(res => {
- if (res.code == 200) {
- this.classList = res.data;
- this.getList();
- }
- })
- }
- })
- },
- onCancel () {
- this.$router.push({ path: '/business/teamDetail', query: { search: this.Fsearch, rules: this.Frules } })
- },
- resetClass (row) {
- this.activeStudent = row.userId;
- this.resetVisible = true;
- },
- resetStudent () {
- // this.studentRadio; // 选中的班级
- // this.activeClass; // 要调整的班级
- // this.activeStudent // 学生id
- resetHighClass({ classGroupId: this.studentRadio, oldClassGroupId: this.activeClass, userId: this.activeStudent }).then(res => {
- if (res.code == 200) {
- this.$message.success('调剂成功')
- this.resetVisible = false;
- this.getList();
- }
- })
- }
- },
- }
- </script>
- <style lang="scss">
- .radioBox {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- margin-bottom: 20px;
- div {
- margin-right: 30px;
- width: 80px;
- }
- }
- </style>
|