| 
					
				 | 
			
			
				@@ -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> 
			 |