|
@@ -0,0 +1,331 @@
|
|
|
+<template>
|
|
|
+ <div class="m-container">
|
|
|
+ <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.mixClass"
|
|
|
+ @change="changeMixClass">
|
|
|
+ <el-option v-for="(item,index) in maxClassList"
|
|
|
+ :key='index'
|
|
|
+ :value="item.id"
|
|
|
+ :label="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="当前单技班数量">
|
|
|
+ <el-input disabled
|
|
|
+ v-model="topForm.count"></el-input>
|
|
|
+ </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="主教老师">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align='center'
|
|
|
+ label="助教老师">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align='center'
|
|
|
+ label="是否排课">
|
|
|
+ </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'>新建班级</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog title="学员选择"
|
|
|
+ width="800px"
|
|
|
+ :visible.sync="studentVisible"
|
|
|
+ :modal-append-to-body="false">
|
|
|
+ <div class="studentMask">
|
|
|
+ <div class="left">
|
|
|
+
|
|
|
+ <div class="wrap">
|
|
|
+ <el-input placeholder="请输入班级名称"></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-button type="text"
|
|
|
+ @click="removeStudent(item)">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+
|
|
|
+ <!-- multiple
|
|
|
+ collapse-tags -->
|
|
|
+ <el-select v-model="activeChioseSound"
|
|
|
+ style="width:180px"
|
|
|
+ clearable
|
|
|
+ placeholder="声部选择">
|
|
|
+ <el-option v-for='(item,index) in chioseSoundList'
|
|
|
+ :key='index'
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button type="danger"
|
|
|
+ style="margin-left:20px;"
|
|
|
+ @click="searchStudent">搜索</el-button>
|
|
|
+
|
|
|
+ <!-- 列表开始 -->
|
|
|
+ <div class="tableList">
|
|
|
+ <el-table tooltip-effect="dark"
|
|
|
+ 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="性别">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="musicGroupName"
|
|
|
+ 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"
|
|
|
+ @click="studentVisible = false">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { getAllClass, getAllSignClassandTeacher, getAllSignClass, removeSingleClass, getNoClassStudentAll } from '@/api/buildTeam'
|
|
|
+import { getClassAllStudent } from '@/api/studentManager'
|
|
|
+import axios from 'axios'
|
|
|
+import qs from 'qs'
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ teamid: '',
|
|
|
+ topForm: {
|
|
|
+ mixClass: '',
|
|
|
+ count: ''
|
|
|
+ },
|
|
|
+ tableList: [],
|
|
|
+ maxClassList: [],
|
|
|
+ activeSingleList: [],
|
|
|
+ studentVisible: false,
|
|
|
+ activeListStudent: [], // 当前选中的学生列表
|
|
|
+ activeChioseSound: '', //选择的声部
|
|
|
+ chioseSoundList: [], //当前的所有声部
|
|
|
+ studentList: [], //列表里的学生集合
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.teamid = this.$route.query.id;
|
|
|
+ console.log(this.teamid)
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ // 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])
|
|
|
+ // })
|
|
|
+ console.log(this.teamid);
|
|
|
+ // getNoClassStudentAll({ musicGroupId: this.teamid }).then(res => {
|
|
|
+
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeMixClass (val) {
|
|
|
+ // 根据合奏班id获取合奏班下的所有单技班
|
|
|
+ // getAllSignClassandTeacher({ mixClassGroupId: val }).then(res => {
|
|
|
+ // if (res.code == 200) {
|
|
|
+ // this.activeSingleList = res.data.map(item => {
|
|
|
+ // item.mixid = val
|
|
|
+ // return item;
|
|
|
+ // });
|
|
|
+ // this.topForm.count = this.activeSingleList.length
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ getAllSignClass({ musicGroupId: this.teamid, mixClassGroupId: val }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.activeSingleList = res.data.map(item => {
|
|
|
+ item.mixid = val
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 临时调整
|
|
|
+ temporary () {
|
|
|
+ if (!this.topForm.mixClass) {
|
|
|
+ this.$message.error('请先选择合奏班')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchStudent () {
|
|
|
+ // 搜索学生
|
|
|
+ },
|
|
|
+ // 选择学生的方法
|
|
|
+ SelectionStudent () {
|
|
|
+
|
|
|
+ },
|
|
|
+ removeClass (scope) {
|
|
|
+ // console.log(scope.row);
|
|
|
+
|
|
|
+ // console.log(scope.$index)
|
|
|
+ removeSingleClass({ classGroupId: scope.row.id }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ scope._self.$refs[scope.$index].doClose();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ scope._self.$refs[scope.$index].doClose();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ resetClass (row) {
|
|
|
+ this.studentVisible = true;
|
|
|
+ console.log(row);
|
|
|
+ // 根据单机班id 查询单技班内的所有学生
|
|
|
+ getClassAllStudent({ classGroupId: row.id }).then(res => {
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.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;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|