|
@@ -50,7 +50,7 @@
|
|
|
<template slot-scope="scope">
|
|
|
<div>
|
|
|
<el-button type="text"
|
|
|
- @click="resetStudent">添加</el-button>
|
|
|
+ @click="resetStudent(scope.row)">添加</el-button>
|
|
|
<el-button type="text">删除</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -84,7 +84,7 @@
|
|
|
id: this.activeSoundList[item].id, //声部id
|
|
|
visible: false, // 当前乐器提供方式的pop提示框显示隐藏 -->
|
|
|
<el-checkbox :label="sound.id"
|
|
|
- @change="checkinlist({'id':sound.id,'sound':sound.name,'yuji':0,studentList:{}})"
|
|
|
+ @change="checkinlist({'id':sound.id,'sound':sound.name,'yuji':0,studentList:[]})"
|
|
|
v-for="(sound,indexs) in item.subjects"
|
|
|
:key="indexs">{{sound.name }}</el-checkbox>
|
|
|
</el-checkbox-group>
|
|
@@ -105,9 +105,12 @@
|
|
|
<div class="left">
|
|
|
<h4>当前已选学员</h4>
|
|
|
<div class="chioseStudentList">
|
|
|
- <div class="studentItem">
|
|
|
- 赵小雷
|
|
|
- <el-button type="text">删除</el-button>
|
|
|
+ <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>
|
|
@@ -139,53 +142,78 @@
|
|
|
@click="searchStudent">搜索</el-button>
|
|
|
|
|
|
<!-- 列表开始 -->
|
|
|
- <el-table tooltip-effect="dark"
|
|
|
- style="width: 100%; margin-top:10px;"
|
|
|
- :data='studentList'
|
|
|
- @selection-change="handleSelectionChange">
|
|
|
- <el-table-column type="selection"
|
|
|
- width="55">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="name"
|
|
|
- label="姓名">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="name"
|
|
|
- label="性别">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="name"
|
|
|
- label="所在乐团">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="name"
|
|
|
- label="学员声部">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <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-column prop="soundName"
|
|
|
+ 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 class="btnWrap">
|
|
|
+ <div class="PrevBtn"
|
|
|
+ @click="goback">上一步</div>
|
|
|
+ <div class="submitBtn"
|
|
|
+ @click="submitInfo">提交</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import store from '@/store'
|
|
|
-import { getSubject, getDefaultSubject, getGoods, createTeam, getSoundTree, findSound } from '@/api/buildTeam'
|
|
|
+import { getSubject, getDefaultSubject, getGoods, createTeam, getSoundTree, findSound, teamSoundStudent } from '@/api/buildTeam'
|
|
|
export default {
|
|
|
props: ['getTeamList'],
|
|
|
data () {
|
|
|
return {
|
|
|
dialogTableVisible: false,
|
|
|
- studentVisible: true,
|
|
|
+ studentVisible: false,
|
|
|
checkList: [],
|
|
|
isLoop: '',
|
|
|
activeSoundList: [],
|
|
|
soundList: [],
|
|
|
soundLists: [],
|
|
|
changeList: [],
|
|
|
- multipleSelection: [], // 列表选择的集合
|
|
|
+ multipleSelection: [], // 列表选择的集合 声部
|
|
|
teamList: [], // 选择的乐团集合
|
|
|
activeTeam: '', // 选中的乐团
|
|
|
chioseSoundList: [],//根据选中的乐团id获取的声部集合
|
|
|
activeChioseSound: '', // 选中声部的集合
|
|
|
- studentList: [] // 选择列表中的学生
|
|
|
+ studentList: [], // 选择列表中的学生 展示中的列表
|
|
|
+ activeListStudent: [], // 列表中选中的学生,
|
|
|
+ allActiveStudent: [], // 所有选中的学生 全局
|
|
|
+ activeSoundId: '', //
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
@@ -207,13 +235,14 @@ export default {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
- handleSelectionChange () { },
|
|
|
+ handleSelectionChange (e) {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
handleclick () { },
|
|
|
- // 删除
|
|
|
+ // 删除声部
|
|
|
removeListItem () {
|
|
|
for (let i = 0; i < this.activeSoundList.length; i++) {
|
|
|
for (let j = 0; j < this.multipleSelection.length; j++) {
|
|
|
-
|
|
|
if (this.activeSoundList[i].id == this.multipleSelection[j].id) {
|
|
|
this.activeSoundList.splice(i, 1);
|
|
|
// 遍历循环所有的group 删除所选id
|
|
@@ -259,9 +288,14 @@ export default {
|
|
|
// 点击添加学生
|
|
|
resetStudent (row) {
|
|
|
// 乐团id 声部id
|
|
|
- },
|
|
|
- handleSelectionChange (val) {
|
|
|
+ this.studentVisible = true;
|
|
|
+ this.activeSoundId = row.id;
|
|
|
|
|
|
+ for (let i in this.activeSoundList) {
|
|
|
+ if (this.activeSoundList[i].id == row.id) {
|
|
|
+ this.activeListStudent = this.activeSoundList[i].studentList;
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
chioseTeam () {
|
|
|
// console.log(this.activeTeam)
|
|
@@ -276,9 +310,138 @@ export default {
|
|
|
// activeTeam activeChioseSound
|
|
|
if (!this.activeTeam || !this.activeChioseSound) {
|
|
|
this.$message.error('请先选择乐团以及声部进行搜索')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log('开始搜素学生')
|
|
|
+ // activeSoundId 这个id里面的 studentList
|
|
|
+ // 在这里要同步当前已选学员的的状态=> chioseStudentList里赋值
|
|
|
+ // 筛选学生1
|
|
|
+ for (let i in this.activeSoundList) {
|
|
|
+ if (this.activeSoundList[i].id == this.activeSoundId) {
|
|
|
+ console.log(this.activeSoundList[i].id);
|
|
|
+ console.log(this.activeSoundList[i].studentList);
|
|
|
+ this.activeListStudent = this.activeSoundList[i].studentList;
|
|
|
+ }
|
|
|
}
|
|
|
- // 筛选学生
|
|
|
+ teamSoundStudent({ musicGroupId: this.activeTeam, actualSubjectId: this.activeChioseSound }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.studentList = res.data.map(item => {
|
|
|
+ let teamName;
|
|
|
+ let soundName;
|
|
|
+ this.teamList.map(team => {
|
|
|
+ if (team.id == this.activeTeam) {
|
|
|
+ teamName = team.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ item.soundName = this.chioseSoundList.map(sound => {
|
|
|
+ if (sound.id == this.activeChioseSound) {
|
|
|
+ soundName = sound.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ item.soundName = soundName;
|
|
|
+ item.musicGroupName = teamName;
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ // 若学生在全局中被选中 则下次更新列表的时候不显示该学生
|
|
|
+ for (let i in this.studentList) {
|
|
|
+ for (let j in this.allActiveStudent) {
|
|
|
+ if (this.allActiveStudent[j].id == this.studentList[i].id) {
|
|
|
+ this.studentList.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ SelectionStudent (e) {
|
|
|
+ // 先找到外面是哪一行的
|
|
|
+ for (let i in this.activeSoundList) {
|
|
|
+ if (this.activeSoundList[i].id == this.activeSoundId) {
|
|
|
+ if (this.activeSoundList[i].studentList.length > 0) {
|
|
|
+ this.activeSoundList[i].studentList = this.activeSoundList[i].studentList.concat(e);
|
|
|
+ } else {
|
|
|
+ this.activeSoundList[i].studentList = e;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 去重
|
|
|
+ let result = this.objArrayRemoval(this.activeSoundList[i].studentList, 'id')
|
|
|
+ console.log(result);
|
|
|
+
|
|
|
+ // 不对
|
|
|
+ this.activeSoundList[i].studentList = result;
|
|
|
+ this.activeListStudent = result;
|
|
|
+ // // 添加全局
|
|
|
+
|
|
|
+ if (this.allActiveStudent.length <= 0) {
|
|
|
+ console.log('第一次添加数据')
|
|
|
+ this.allActiveStudent = result;
|
|
|
+ } else {
|
|
|
+ this.allActiveStudent = this.allActiveStudent.concat(result);
|
|
|
+ }
|
|
|
+ this.allActiveStudent = this.objArrayRemoval(this.allActiveStudent, 'id');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 点击删除按钮 重学生集合里删除
|
|
|
+ removeStudent (item) {
|
|
|
+ // 删除全局
|
|
|
+ for (let i in this.allActiveStudent) {
|
|
|
+ if (this.allActiveStudent[i].id == item.id) {
|
|
|
+ this.allActiveStudent.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 删除当前
|
|
|
+ for (let i in this.activeSoundList) {
|
|
|
+ if (this.activeSoundList[i].id == this.activeSoundId) {
|
|
|
+ for (let j in this.activeSoundList[i].studentList) {
|
|
|
+ if (item.id == this.activeSoundList[i].studentList[j].id) {
|
|
|
+ this.activeSoundList[i].studentList.splice(j, 1);
|
|
|
+ // 这里做判断 this.studentList 里有没有这个学生(没有)=>判断学生的声部是不是和当前搜索的声部一样 添加
|
|
|
+ // 有.. 则取消勾选
|
|
|
+ let flag = false;
|
|
|
+ for (let x in this.studentList) {
|
|
|
+ if (this.studentList[x].id == item.id) {
|
|
|
+ flag = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (flag) {
|
|
|
+ // 表里有这个学生
|
|
|
+ this.toggleSelection(item, this.studentList);
|
|
|
+ } else {
|
|
|
+ if (item.actualSubjectId == this.activeChioseSound) {
|
|
|
+ this.studentList.unshift(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.activeListStudent = this.activeSoundList[i].studentList;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toggleSelection (item, table) {
|
|
|
+ table.forEach(row => {
|
|
|
+ if (row.id == item.id) {
|
|
|
+ this.$refs['studentList'].toggleRowSelection(row, false);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 对象数组去重
|
|
|
+ objArrayRemoval (arr, attr) {
|
|
|
+ let obj = {};
|
|
|
+ let result = [];
|
|
|
+ // console.log(this.allActiveStudent.length);
|
|
|
+ for (let x in arr) {
|
|
|
+ if (!obj[arr[x][attr]]) {
|
|
|
+ result.push(arr[x]);
|
|
|
+ obj[arr[x][attr]] = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return result;
|
|
|
}
|
|
|
+
|
|
|
},
|
|
|
computed: {
|
|
|
// 返回当前选中声部数量
|
|
@@ -290,6 +453,23 @@ export default {
|
|
|
}
|
|
|
return num;
|
|
|
},
|
|
|
+ goback () {
|
|
|
+ this.$emit('chiosetab', 0);
|
|
|
+ },
|
|
|
+ submitInfo () { }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ studentVisible (val) {
|
|
|
+
|
|
|
+ if (!val) {
|
|
|
+ // 1.选择的团
|
|
|
+ this.activeTeam = ''
|
|
|
+ // 2.选择的声部
|
|
|
+ this.activeChioseSound = ''
|
|
|
+ // 3.选择的选中的列表
|
|
|
+ this.studentList = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -369,12 +549,16 @@ export default {
|
|
|
overflow-y: auto;
|
|
|
border: 1px solid #ccc;
|
|
|
.studentItem {
|
|
|
- padding: 10px;
|
|
|
+ padding-left: 10px;
|
|
|
+ line-height: 25px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.right {
|
|
|
- overflow-y: auto;
|
|
|
+ .tableList {
|
|
|
+ max-height: 500px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|