合并乐团

src/views/teamBuild/api.js

@@ -0,0 +1,9 @@
+import request2 from '@/utils/request2'
+
+// 填加学员接口
+export const addMusicGroupRegs = data => request2({
+  url: '/api-web/musicGroup/addMusicGroupRegs',
+  data,
+  method: 'post',
+  requestType: 'json'
+})

src/views/teamBuild/components/merge-music.vue

@@ -0,0 +1,183 @@
+<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="val => active = val" 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>
+              <span>{{item.name}}</span>
+              <span>学员人数：已选{{item.num}}人</span>
+            </span>
+            <i @click.stop="remove(key)" class="icon el-icon-circle-close"></i>
+          </div>
+        </template>
+        <selectItem :active="active" :id="item.id" @selected="selected"/>
+      </el-collapse-item>
+    </el-collapse>
+    <el-button type="info" @click="$emit('chiosetab', 1)">上一步</el-button>
+    <el-button type="primary" @click="merge">确认合并</el-button>
+    <el-dialog
+      title="选择乐团"
+      :visible.sync="visible"
+      width="700px"
+    >
+      <selectMusic
+        @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: {
+    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: 100%;
+    justify-content: space-between;
+    // margin-bottom: 10px;
+    >span:first-child{
+      display: flex;
+      &::before{
+        content: '';
+        display: block;
+        width: 5px;
+        background-color: #14928A;
+        margin-right: 10px;
+        border-radius: 2px;
+        height: 48px;
+      }
+    }
+    .icon{
+      font-size: 18px;
+      font-weight: normal;
+      margin-right: 20px;
+    }
+  }
+}
+</style>

src/views/teamBuild/components/merged-students.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+  <el-table
+    style="width: 100%"
+    max-height="300px"
+    :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+    :data="list"
+  >
+    <el-table-column prop="realName" align="center" label="学员姓名">
+      <template slot-scope="scope">
+        <copy-text>{{ scope.row.realName }}</copy-text>
+      </template>
+    </el-table-column>
+    <el-table-column prop="phone" align="center" label="手机号码">
+      <template slot-scope="scope">
+        <copy-text>{{ scope.row.phone }}</copy-text>
+      </template>
+    </el-table-column>
+    <el-table-column prop="subjectName" align="center" label="声部">
+      <template slot-scope="scope">
+        <copy-text>{{ scope.row.subjectName }}</copy-text>
+      </template>
+    </el-table-column>
+  </el-table>
+  </div>
+</template>
+<script>
+import { getTeamStudentList } from '@/api/buildTeam'
+export default {
+  data() {
+    return {
+      id: this.$route.query.id,
+      list: [],
+      passed: [],
+    }
+  },
+  mounted() {
+    this.FetchDetail()
+  },
+  methods: {
+    handleSelectionChange(arr) {
+      const passed = [];
+      for (let i in arr) {
+        passed.push(arr[i].id);
+      }
+      this.passed = passed;
+      this.$emit('selected', this.passed, this.id)
+    },
+    async FetchDetail() {
+      try {
+        const res = await getTeamStudentList({
+          musicGroupId: this.id,
+        })
+        this.list = res.data.rows
+      } catch (error) {}
+    }
+  }
+}
+</script>

src/views/teamBuild/components/select-item.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+  <el-table
+    style="width: 100%"
+    max-height="300px"
+    @selection-change="handleSelectionChange"
+    :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+    :data="list"
+  >
+    <el-table-column type="selection"
+      width="50">
+    </el-table-column>
+      <el-table-column prop="id" width="100" align="center" label="乐团编号">
+        <template slot-scope="scope">
+          <copy-text>{{ scope.row.id }}</copy-text>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" align="center" label="学员姓名">
+        <template slot-scope="scope">
+          <copy-text>{{ scope.row.name }}</copy-text>
+        </template>
+      </el-table-column>
+      <el-table-column prop="parentsName" align="center" label="家长姓名">
+        <template slot-scope="scope">
+          <copy-text>{{ scope.row.parentsName }}</copy-text>
+        </template>
+      </el-table-column>
+      <el-table-column prop="parentsPhone" align="center" label="家长电话">
+        <template slot-scope="scope">
+          <copy-text>{{ scope.row.parentsPhone }}</copy-text>
+        </template>
+      </el-table-column>
+      <el-table-column prop="subjectName" align="center" label="声部">
+        <template slot-scope="scope">
+          <copy-text>{{ scope.row.subjectName }}</copy-text>
+        </template>
+      </el-table-column>
+  </el-table>
+  </div>
+</template>
+<script>
+import { getMusicGroupStu } from '@/views/resetTeaming/api'
+export default {
+  props: ['id', 'active'],
+  data() {
+    return {
+      list: [],
+      passed: [],
+    }
+  },
+  watch: {
+    active: {
+      immediate: true,
+      handler() {
+
+      }
+    }
+  },
+  // mounted() {
+  //   this.FetchDetail()
+  // },
+  methods: {
+    handleSelectionChange(arr) {
+      const passed = [];
+      for (let i in arr) {
+        passed.push(arr[i].id);
+      }
+      this.passed = passed;
+      this.$emit('selected', this.passed, this.id)
+    },
+    async FetchDetail() {
+      try {
+        const res = await getMusicGroupStu({
+          musicGroupId: this.id,
+        })
+        this.list = res.data
+      } catch (error) {}
+    }
+  }
+}
+</script>

src/views/teamBuild/components/select-msic.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="container" style="width: 100%">
+    <el-table
+      style="width: 100%"
+      max-height="300px"
+      @selection-change="handleSelectionChange"
+      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+      :data="tableData"
+    >
+      <el-table-column type="selection"
+        :selectable="checkSelectable"
+        width="50">
+      </el-table-column>
+      <el-table-column prop="id" width="100" align="center" label="乐团编号">
+        <template slot-scope="scope">
+          <copy-text>{{ scope.row.id }}</copy-text>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        width="200px"
+        align="center"
+        label="乐团名称"
+      >
+        <template slot-scope="scope">
+          <copy-text>{{ scope.row.name }}</copy-text>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="cooperationOrganName"
+        max-width="274"
+        label="合作单位"
+      >
+      </el-table-column>
+    </el-table>
+    <div class="footer" slot="footer">
+      <el-button @click="$emit('close')">取消</el-button>
+      <el-button @click="submit" type="primary">确认</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { getTeamList, getPayType } from "@/api/teamServer";
+export default {
+  data() {
+    return {
+      tableData: [],
+      passed: [],
+    };
+  },
+  mounted() {
+    this.FetchList()
+  },
+  methods: {
+    checkSelectable (row) {
+      return true
+    },
+    handleSelectionChange(arr) {
+      const passed = [];
+      for (let i in arr) {
+        let obj = {};
+        obj.id = arr[i].id;
+        obj.name = arr[i].name;
+        passed.push(obj);
+      }
+      this.passed = passed;
+    },
+    async FetchList() {
+      try {
+        const res = await getTeamList()
+        this.tableData = res.data.rows
+      } catch (error) {}
+    },
+    submit() {
+      this.$emit('close')
+      this.$emit('submited', this.passed)
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+.container{
+  /deep/ .footer{
+    text-align: right;
+    margin-top: 20px;
+  }
+}
+</style>

src/views/teamBuild/components/teamBaseInfo.vue

@@ -291,20 +291,7 @@
         <div
           class="nextBtn"
           @click="gotoNext(1)"
-          v-if="
-            teamStatus == 'newTeam' ||
-            teamStatus == 'teamDraft' ||
-            teamStatus == 'teamAudit' ||
-            teamStatus == 'feeAudit'
-          "
-        >
-          下一步
-        </div>
-        <!-- 跨团调整的下一步 -->
-        <div
-          class="nextBtn"
-          v-if="teamStatus == 'teamList'"
-          @click="gotoNext(2)"
+          v-if="showNext"
         >
           下一步
         </div>
@@ -829,6 +816,16 @@ export default {
         })
         .join(",");
     },
+    showNext() {
+      const teamStatus = this.teamStatus
+      console.log(teamStatus)
+      return (
+        teamStatus == 'newTeam' ||
+        teamStatus == 'teamDraft' ||
+        teamStatus == 'teamAudit' ||
+        teamStatus == 'feeAudit'
+      )
+    }
   },
 };
 </script>

src/views/teamBuild/components/teamSoundSet.vue

@@ -12,14 +12,30 @@
       <div class="PrevBtn"
            @click="goback">上一步</div>
       <!--  v-if="teamStatus != 'teamAudit'" -->
-      <div class="submitBtn"
+      <!-- <div class="submitBtn"
            v-permission="{
           child: 'musicGroup/createGroup',
           parent: '/teamBuild/soundMoney',
         }"
            @click="submitInfo()">
         下一步
-      </div>
+      </div> -->
+      <el-dropdown
+        split-button
+        v-permission="{
+          child: 'musicGroup/createGroup',
+          parent: '/teamBuild/soundMoney',
+        }"
+        type="primary"
+        @click="submitInfo()"
+      >
+        创建缴费
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <el-button @click="$emit('chiosetab', 3)" type="text">选择乐团</el-button>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
       <!-- <div
         class="submitBtn"
         @click="submitAudit(1)"
@@ -84,6 +100,9 @@ export default {
     this.teamStatus = this.$route.query.type;
   },
   methods: {
+    handleClick(evt) {
+      console.log(evt)
+    },
     goback () {
       this.$emit("chiosetab", 0);
     },
@@ -206,4 +225,4 @@ export default {
     width: 120px;
   }
 }
-</style>
+</style>

src/views/teamBuild/index.vue

@@ -60,6 +60,10 @@
                        :getTeamList="getTeamList"
                        :baseInfo="baseInfo" />
         </div>
+        <div v-if="activeIndex == 3">
+          <mergeMusic @chiosetab="chiosetab"
+                       :getTeamList="getTeamList" />
+        </div>
       </div>
     </div>
   </div>
@@ -68,8 +72,9 @@
 import teamBaseInfo from "@/views/teamBuild/components/teamBaseInfo";
 import teamSoundMoney from "@/views/teamBuild/components/teamSoundSet";
 import teamPayInfo from "@/views/teamBuild/components/teamPayInfo";
+import mergeMusic from "@/views/teamBuild/components/merge-music";
 export default {
-  components: { teamBaseInfo, teamSoundMoney, teamPayInfo },
+  components: { teamBaseInfo, teamSoundMoney, teamPayInfo, mergeMusic },
   name: "teamBuild",
   data () {
     return {
@@ -85,7 +90,7 @@ export default {
   },
   created () {
     // 判断 是新建乐团还是修改乐团
-    this.activeIndex = 0;
+    this.activeIndex = 3;
     this.init();
   },
   activated () {
@@ -101,10 +106,10 @@ export default {
       if (this.teamStatus == "newTeam") {
         // 新建团
         this.pageName = "建团申请";
-        this.activeIndex = 0;
+        // this.activeIndex = 0;
       } else {
         this.pageName = "乐团修改";
-        this.activeIndex = 0;
+        // this.activeIndex = 0;
       }
     },
     chiosetab (val) {