dy-admin-manager/src/views/teamBuild/components/merge-music.vue

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