|  | @@ -0,0 +1,214 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class="merge-music">
 | 
	
		
			
				|  |  | +    <el-button type="primary" @click="visible = true">选择乐团</el-button>
 | 
	
		
			
				|  |  | +    <el-button type="primary" @click="studentsVisible = true">已合并学生</el-button>
 | 
	
		
			
				|  |  | +    <empty v-if="isEmpty" desc="暂未选择乐团"/>
 | 
	
		
			
				|  |  | +    <el-collapse v-model="active" @change="changeActive" class="items" v-else>
 | 
	
		
			
				|  |  | +      <el-collapse-item class="item" v-for="(item, key) in items" :key="key" :name="key" >
 | 
	
		
			
				|  |  | +        <template #title>
 | 
	
		
			
				|  |  | +          <div class="header">
 | 
	
		
			
				|  |  | +            <span class="title">
 | 
	
		
			
				|  |  | +              <span>{{item.name}}</span>
 | 
	
		
			
				|  |  | +            </span>
 | 
	
		
			
				|  |  | +            <span style="width: 20%;">
 | 
	
		
			
				|  |  | +              <span>学员人数:已选{{item.num}}人</span>
 | 
	
		
			
				|  |  | +              <i @click.stop="remove(key)" class="icon el-icon-circle-close"></i>
 | 
	
		
			
				|  |  | +            </span>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +        </template>
 | 
	
		
			
				|  |  | +        <selectItem :active="active" :id="item.id" @selected="selected"/>
 | 
	
		
			
				|  |  | +      </el-collapse-item>
 | 
	
		
			
				|  |  | +    </el-collapse>
 | 
	
		
			
				|  |  | +    <div class="btns">
 | 
	
		
			
				|  |  | +      <el-button type="primary" @click="$emit('chiosetab', 1)">上一步</el-button>
 | 
	
		
			
				|  |  | +      <el-button type="primary" @click="merge">确认合并</el-button>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +    <el-dialog
 | 
	
		
			
				|  |  | +      title="选择乐团"
 | 
	
		
			
				|  |  | +      :visible.sync="visible"
 | 
	
		
			
				|  |  | +      width="700px"
 | 
	
		
			
				|  |  | +    >
 | 
	
		
			
				|  |  | +      <selectMusic
 | 
	
		
			
				|  |  | +        :visible="visible"
 | 
	
		
			
				|  |  | +        @close="visible = false"
 | 
	
		
			
				|  |  | +        @submited="submited"
 | 
	
		
			
				|  |  | +      />
 | 
	
		
			
				|  |  | +    </el-dialog>
 | 
	
		
			
				|  |  | +    <el-dialog
 | 
	
		
			
				|  |  | +      title="查看已合并学生"
 | 
	
		
			
				|  |  | +      :visible.sync="studentsVisible"
 | 
	
		
			
				|  |  | +      width="700px"
 | 
	
		
			
				|  |  | +    >
 | 
	
		
			
				|  |  | +      <mergedStudents
 | 
	
		
			
				|  |  | +        @close="studentsVisible = false"
 | 
	
		
			
				|  |  | +        @submited="submited"
 | 
	
		
			
				|  |  | +      />
 | 
	
		
			
				|  |  | +    </el-dialog>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +import { getTeamList, getPayType } from "@/api/teamServer";
 | 
	
		
			
				|  |  | +import { addMusicGroupRegs } from '../api'
 | 
	
		
			
				|  |  | +import selectMusic from './select-msic'
 | 
	
		
			
				|  |  | +import selectItem from './select-item'
 | 
	
		
			
				|  |  | +import mergedStudents from './merged-students'
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  components: {
 | 
	
		
			
				|  |  | +    selectMusic,
 | 
	
		
			
				|  |  | +    selectItem,
 | 
	
		
			
				|  |  | +    mergedStudents,
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  data() {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      active: '',
 | 
	
		
			
				|  |  | +      visible: false,
 | 
	
		
			
				|  |  | +      studentsVisible: false,
 | 
	
		
			
				|  |  | +      tableData: [],
 | 
	
		
			
				|  |  | +      passed: [],
 | 
	
		
			
				|  |  | +      items: {},
 | 
	
		
			
				|  |  | +      studentsByMusicId: {}
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  computed: {
 | 
	
		
			
				|  |  | +    isEmpty() {
 | 
	
		
			
				|  |  | +      return Object.keys(this.items).length === 0
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  mounted() {
 | 
	
		
			
				|  |  | +    // this.FetchList()
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    changeActive(val) {
 | 
	
		
			
				|  |  | +      this.active = val
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    submited(vals) {
 | 
	
		
			
				|  |  | +      const data = {}
 | 
	
		
			
				|  |  | +      for (const item of vals) {
 | 
	
		
			
				|  |  | +        if (!data[item.id]) {
 | 
	
		
			
				|  |  | +          data[item.id] = {...item, num: 0}
 | 
	
		
			
				|  |  | +        } else {
 | 
	
		
			
				|  |  | +          data[item.id] = {
 | 
	
		
			
				|  |  | +            ...data[item.id],
 | 
	
		
			
				|  |  | +            ...item,
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      this.items = data
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    remove(key) {
 | 
	
		
			
				|  |  | +      const data = {...this.items}
 | 
	
		
			
				|  |  | +      const select = {...this.studentsByMusicId}
 | 
	
		
			
				|  |  | +      delete data[key]
 | 
	
		
			
				|  |  | +      delete select[key]
 | 
	
		
			
				|  |  | +      this.items = {...data}
 | 
	
		
			
				|  |  | +      this.studentsByMusicId = {...select}
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    selected(list, key) {
 | 
	
		
			
				|  |  | +      const data = this.studentsByMusicId
 | 
	
		
			
				|  |  | +      if (!data[key]) {
 | 
	
		
			
				|  |  | +        data[key] = []
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      data[key] = list
 | 
	
		
			
				|  |  | +      this.items[key].num = list.length
 | 
	
		
			
				|  |  | +      this.items = this.items
 | 
	
		
			
				|  |  | +      this.studentsByMusicId = data
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    async merge() {
 | 
	
		
			
				|  |  | +      let allId = []
 | 
	
		
			
				|  |  | +      for (const key in this.studentsByMusicId) {
 | 
	
		
			
				|  |  | +        if (Object.hasOwnProperty.call(this.studentsByMusicId, key)) {
 | 
	
		
			
				|  |  | +          const item = this.studentsByMusicId[key]
 | 
	
		
			
				|  |  | +          allId = allId.concat(item)
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      try {
 | 
	
		
			
				|  |  | +        await this.$confirm('是否确认合并乐团?', '提示', {
 | 
	
		
			
				|  |  | +          type: 'warning'
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +        await addMusicGroupRegs({
 | 
	
		
			
				|  |  | +          musicGroupId: this.$route.query.id,
 | 
	
		
			
				|  |  | +          registerIds: allId
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +        this.$message.success('合并成功')
 | 
	
		
			
				|  |  | +        this.$emit('chiosetab', 2)
 | 
	
		
			
				|  |  | +      } catch (error) {}
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    handleSelectionChange(arr) {
 | 
	
		
			
				|  |  | +      const passed = [];
 | 
	
		
			
				|  |  | +      for (let i in arr) {
 | 
	
		
			
				|  |  | +        passed.push(arr[i].id);
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      this.passed = passed;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    async FetchList() {
 | 
	
		
			
				|  |  | +      try {
 | 
	
		
			
				|  |  | +        const res = await getTeamList()
 | 
	
		
			
				|  |  | +        this.tableData = res.data.rows
 | 
	
		
			
				|  |  | +      } catch (error) {}
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +<style lang="less" scoped>
 | 
	
		
			
				|  |  | +.merge-music{
 | 
	
		
			
				|  |  | +  /deep/ .items{
 | 
	
		
			
				|  |  | +    margin-top: 20px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  /deep/ .item{
 | 
	
		
			
				|  |  | +    /deep/ .el-collapse-item__header.is-active {
 | 
	
		
			
				|  |  | +      border-bottom-color: #EBEEF5;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    >div:first-child{
 | 
	
		
			
				|  |  | +      margin-bottom: 10px;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    // margin-bottom: 10px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  /deep/ .header{
 | 
	
		
			
				|  |  | +    display: flex;
 | 
	
		
			
				|  |  | +    align-items: center;
 | 
	
		
			
				|  |  | +    width: 98%;
 | 
	
		
			
				|  |  | +    justify-content: space-between;
 | 
	
		
			
				|  |  | +    // margin-bottom: 10px;
 | 
	
		
			
				|  |  | +    >span:first-child{
 | 
	
		
			
				|  |  | +      display: flex;
 | 
	
		
			
				|  |  | +      &::before{
 | 
	
		
			
				|  |  | +        content: '';
 | 
	
		
			
				|  |  | +        display: inline-block;
 | 
	
		
			
				|  |  | +        width: 5px;
 | 
	
		
			
				|  |  | +        background-color: #14928A;
 | 
	
		
			
				|  |  | +        margin-right: 10px;
 | 
	
		
			
				|  |  | +        border-radius: 2px;
 | 
	
		
			
				|  |  | +        height: 48px;
 | 
	
		
			
				|  |  | +        position: absolute;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    .icon{
 | 
	
		
			
				|  |  | +      font-size: 18px;
 | 
	
		
			
				|  |  | +      font-weight: normal;
 | 
	
		
			
				|  |  | +      margin-right: 20px;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.title{
 | 
	
		
			
				|  |  | +  position: relative;
 | 
	
		
			
				|  |  | +  display: block;
 | 
	
		
			
				|  |  | +  max-width: 60%;
 | 
	
		
			
				|  |  | +  >span{
 | 
	
		
			
				|  |  | +    display: block;
 | 
	
		
			
				|  |  | +    margin-left: 20px;
 | 
	
		
			
				|  |  | +    font-weight: normal;
 | 
	
		
			
				|  |  | +    flex: 1;
 | 
	
		
			
				|  |  | +    overflow: hidden;
 | 
	
		
			
				|  |  | +    text-overflow: ellipsis;
 | 
	
		
			
				|  |  | +    overflow: hidden;
 | 
	
		
			
				|  |  | +    text-overflow: ellipsis;
 | 
	
		
			
				|  |  | +    height: 48px;
 | 
	
		
			
				|  |  | +    line-height: 48px;
 | 
	
		
			
				|  |  | +    white-space: pre;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.btns{
 | 
	
		
			
				|  |  | +  margin-top: 20px;
 | 
	
		
			
				|  |  | +  text-align: right;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |