|
@@ -7,7 +7,6 @@
|
|
|
<el-checkbox-group v-model="checkList"
|
|
|
fill="#14928A"
|
|
|
text-color='#474747'>
|
|
|
-
|
|
|
<el-checkbox label="1">一月</el-checkbox>
|
|
|
<el-checkbox label="2">二月</el-checkbox>
|
|
|
<el-checkbox label="3">三月</el-checkbox>
|
|
@@ -22,22 +21,360 @@
|
|
|
<el-checkbox label="12">十二月</el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
+ <div class="listWrap">
|
|
|
+ <el-table :data='activeSoundList'
|
|
|
+ ref="multipleTable"
|
|
|
+ :header-cell-style="{background:'#EDEEF0',color:'#444'}"
|
|
|
+ highlight-current-row
|
|
|
+ @selection-change='handleSelectionChange'
|
|
|
+ @row-click='handleclick'>
|
|
|
+ <el-table-column type="selection"
|
|
|
+ width="55">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="声部"
|
|
|
+ width="150"
|
|
|
+ prop="sound">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="预计收费"
|
|
|
+ width="150"
|
|
|
+ prop="yuji">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <el-input type="number"
|
|
|
+ v-model="scope.row.yuji"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="声部学员">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <el-button type="text"
|
|
|
+ @click="resetStudent">添加</el-button>
|
|
|
+ <el-button type="text">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="floor">
|
|
|
+ <div class="remove"
|
|
|
+ @click="removeListItem">删除</div>
|
|
|
+ <div class='add'
|
|
|
+ @click="addListItem">添加</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog title="声部选择"
|
|
|
+ :visible.sync="dialogTableVisible"
|
|
|
+ :modal-append-to-body="false">
|
|
|
+ <div class="soundWrap">
|
|
|
+ <div class="itemList">
|
|
|
+ <div class="categroy"
|
|
|
+ v-for="(item,index) in soundList"
|
|
|
+ :key="index">
|
|
|
+ <p>{{item.name }}</p>
|
|
|
+ <el-checkbox-group v-model="soundLists[index]"
|
|
|
+ @change='changeList'>
|
|
|
+ <!-- sound: this.activeSoundList[item].name, // id
|
|
|
+ jihua: '10', //计划招生人数
|
|
|
+ yuji: '10', // 预计收费
|
|
|
+ zhonglei: [], // 可选乐器种类
|
|
|
+ fangshi: 2, // 乐器提供方式
|
|
|
+ jiaopu: 'jiaopu1', // 教辅组合
|
|
|
+ type: 1, // 操作
|
|
|
+ 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:{}})"
|
|
|
+ v-for="(sound,indexs) in item.subjects"
|
|
|
+ :key="indexs">{{sound.name }}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class='soundSubP'>当前选择声部数:{{chioseSoundNum}}</p>
|
|
|
+ <div class="btnWraps">
|
|
|
+ <div class="dialogBtn"
|
|
|
+ @click="generates">确定</div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="学员选择"
|
|
|
+ width="800px"
|
|
|
+ :visible.sync="studentVisible"
|
|
|
+ :modal-append-to-body="false">
|
|
|
+ <div class="studentMask">
|
|
|
+ <div class="left">
|
|
|
+ <h4>当前已选学员</h4>
|
|
|
+ <div class="chioseStudentList">
|
|
|
+ <div class="studentItem">
|
|
|
+ 赵小雷
|
|
|
+ <el-button type="text">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <el-select v-model="activeTeam"
|
|
|
+ style="width:180px"
|
|
|
+ clearable
|
|
|
+ @change="chioseTeam"
|
|
|
+ placeholder="乐团选择">
|
|
|
+ <el-option v-for='(item,index) in teamList'
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <!-- multiple
|
|
|
+ collapse-tags -->
|
|
|
+ <el-select v-model="activeChioseSound"
|
|
|
+ style="width:180px"
|
|
|
+ :disabled="!activeTeam"
|
|
|
+ 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>
|
|
|
+
|
|
|
+ <!-- 列表开始 -->
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import store from '@/store'
|
|
|
+import { getSubject, getDefaultSubject, getGoods, createTeam, getSoundTree, findSound } from '@/api/buildTeam'
|
|
|
export default {
|
|
|
+ props: ['getTeamList'],
|
|
|
data () {
|
|
|
return {
|
|
|
+ dialogTableVisible: false,
|
|
|
+ studentVisible: true,
|
|
|
checkList: [],
|
|
|
- isLoop: ''
|
|
|
+ isLoop: '',
|
|
|
+ activeSoundList: [],
|
|
|
+ soundList: [],
|
|
|
+ soundLists: [],
|
|
|
+ changeList: [],
|
|
|
+ multipleSelection: [], // 列表选择的集合
|
|
|
+ teamList: [], // 选择的乐团集合
|
|
|
+ activeTeam: '', // 选中的乐团
|
|
|
+ chioseSoundList: [],//根据选中的乐团id获取的声部集合
|
|
|
+ activeChioseSound: '', // 选中声部的集合
|
|
|
+ studentList: [] // 选择列表中的学生
|
|
|
}
|
|
|
},
|
|
|
+ created () {
|
|
|
+ this.teamList = this.getTeamList;
|
|
|
+ },
|
|
|
mounted () {
|
|
|
this.payfor = this.$store.getters.payList;
|
|
|
this.isLoop = this.payfor.student.chiose || 0;
|
|
|
+ getSoundTree().then(res => {
|
|
|
+ // console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.soundList = res.data.rows;
|
|
|
+ // // 生成动态的checkList
|
|
|
+ for (let key in this.soundList) {
|
|
|
+ this.$set(this.soundLists, key, [])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ handleSelectionChange () { },
|
|
|
+ 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
|
|
|
+ for (let key in this.soundLists) {
|
|
|
+ if (this.soundLists[key].indexOf(this.multipleSelection[j].id) != -1) {
|
|
|
+ // console.log(this.soundLists[key], this.multipleSelection[j].id, this.soundLists[key].indexOf(this.multipleSelection[j].id));
|
|
|
+ this.soundLists[key].splice(this.soundLists[key].indexOf(this.multipleSelection[j].id), 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addListItem () {
|
|
|
+ this.dialogTableVisible = true;
|
|
|
+ },
|
|
|
+ // 点击确认按钮生成表单
|
|
|
+ generates () {
|
|
|
+ this.dialogTableVisible = false;
|
|
|
+ },
|
|
|
+ checkinlist (obj) {
|
|
|
+ let flag = false;
|
|
|
+ this.activeSoundList.map(item => {
|
|
|
+ if (item.id == obj.id) {
|
|
|
+ flag = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (!flag) {
|
|
|
+ this.activeSoundList.push(obj)
|
|
|
+ } else {
|
|
|
+ for (let i = 0; i < this.activeSoundList.length; i++) {
|
|
|
+ if (this.activeSoundList[i].id == obj.id) {
|
|
|
+ this.activeSoundList.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSelectionChange (e) {
|
|
|
+ // 点击改变勾选
|
|
|
+ this.multipleSelection = e;
|
|
|
+ },
|
|
|
+ // 点击添加学生
|
|
|
+ resetStudent (row) {
|
|
|
+ // 乐团id 声部id
|
|
|
+ },
|
|
|
+ handleSelectionChange (val) {
|
|
|
+
|
|
|
+ },
|
|
|
+ chioseTeam () {
|
|
|
+ // console.log(this.activeTeam)
|
|
|
+ // 发请求 获取乐团下的所有声部
|
|
|
+ findSound({ musicGroupId: this.activeTeam }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.chioseSoundList = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ searchStudent () {
|
|
|
+ // activeTeam activeChioseSound
|
|
|
+ if (!this.activeTeam || !this.activeChioseSound) {
|
|
|
+ this.$message.error('请先选择乐团以及声部进行搜索')
|
|
|
+ }
|
|
|
+ // 筛选学生
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 返回当前选中声部数量
|
|
|
+ chioseSoundNum () {
|
|
|
+ let num = 0;
|
|
|
+ for (let key in this.soundList) {
|
|
|
+ // console.log(this.soundLists[key])
|
|
|
+ num += this.soundLists[key].length;
|
|
|
+ }
|
|
|
+ return num;
|
|
|
+ },
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
-<style lang="">
|
|
|
+<style lang="scss">
|
|
|
+.chioseWrap {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 0 25px;
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.subTitle {
|
|
|
+ width: 1203px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: #fefceb;
|
|
|
+ padding: 0 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #474747;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.floor {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ 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;
|
|
|
+ h4 {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #444;
|
|
|
+ line-height: 38px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .chioseStudentList {
|
|
|
+ height: 500px;
|
|
|
+ overflow-y: auto;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ .studentItem {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|