dy-admin-manager/src/views/teamBuild/components/teamSoundSet.vue

<template>
  <div class="sound-container">
    <div class="topMsg">
      <p>当前选择声部数(个）：{{chioseSoundNum}}</p>
      <p style="margin-left:30px;">计划招生人数(个）：{{PlannedCount}}</p>
    </div>
    <div class="soundBtnWrap">
      <el-button type="primary"
                 @click="allin">全选</el-button>
      <el-button type="danger"
                 @click="deleteRow">删除</el-button>
      <el-button type="primary"
                 @click="soundVisible = true">添加</el-button>
    </div>
    <div class="coreWrap">
      <el-checkbox-group v-model="checkList"
                         @change='lookCheck'>
        <el-collapse v-model="chioseActiveSound"
                     accordion
                     @change="changeActiveSound">
          <el-collapse-item v-for="(item,index) in activeSoundList"
                            :name="item.id"
                            :key="index">
            <template slot="title">
              <div class="coreItemTitle">
                <el-checkbox :label="item.id">{{item.sound}}</el-checkbox>
              </div>
            </template>
            <div class="coreItem">
              <div class="coreItemRow">
                <p class="title">计划招生人数:</p>
                <el-input style="width:180px"
                          v-model="item.expectedStudentNum"></el-input>
              </div>
            </div>
            <chioseMusic :item="item"
                         @lookMusic="lookMusic" />
            <div class="coreItemRow">
              <p class="title">教辅:</p>
              <el-select style="width:558px!important;"
                         v-model="item.markChioseList"
                         clearable
                         filterable
                         multiple>
                <el-option v-for="(item,index) in item.markList"
                           :key="index"
                           :label="item.name"
                           :value="item.id"></el-option>
              </el-select>
            </div>
          </el-collapse-item>

        </el-collapse>
      </el-checkbox-group>
    </div>
    <div class="btnWrap">
      <div class="PrevBtn"
           @click="goback">上一步</div>
      <!--  v-if="teamStatus != 'teamAudit'" -->
      <div class="submitBtn"
           v-permission="{child: 'musicGroup/createGroup', parent: '/teamBuild/soundMoney'}"
           @click="submitInfo()">下一步</div>
    </div>
    <el-dialog title="声部选择"
               :visible.sync="soundVisible">
      <chioseSoundList :soundList="soundList"
                       :activeSound='activeSound'
                       @chioseSound="chioseSound" />
    </el-dialog>
  </div>
</template>
<script>
import store from "@/store";
import { formatData } from '@/utils/utils'
import {
  getSubject,
  getDefaultSubject,
  getGoods,
  createTeam,
  getSoundTree,
  findMusicGroupSubjectInfo,
  updateSubjectInfo,
  auditSuccess,
  auditFailed,
  getSubjectGoods
} from "@/api/buildTeam";
import dayjs from 'dayjs'
import chioseMusic from './soundSetComponents/chioseMusic'
import chioseAccessory from './soundSetComponents/chioseAccessory'
import chioseSoundList from './soundSetComponents/chioseSoundList'
import { findIndex } from 'lodash'
export default {
  components: { chioseMusic, chioseAccessory, chioseSoundList },
  data () {
    return {
      topfor: null, // 第一页的数据
      checkList: [],
      Fsearch: null,
      Frules: null,
      soundList: [], // 接口返回的一级二级声部
      soundVisible: false, // 设置声部弹窗
      childSoundList: [],
      teamStatus: '',// 乐团状态
      activeSoundList: [], //列表上的声部
      activeSound: null, // 展开的列表
      chioseActiveSound: null
    }
  },
  mounted () {
    this.init()
  },
  activated () { },
  methods: {
    init () {
      // 获取第一页的数据
      this.topfor = this.$store.getters.topinfo;
      let type = this.topfor.type;
      this.teamStatus = this.$route.query.type;
      if (this.$route.query.search) {
        this.Fsearch = this.$route.query.search;
      }
      if (this.$route.query.rules) {
        this.Frules = this.$route.query.rules;
      }
      getSoundTree({ tenantId: 1 }).then(res => {
        if (res.code == 200) {
          this.soundList = res.data.rows
          if (this.teamStatus == "newTeam") {
            getDefaultSubject({
              chargeTypeId: type,
              organId: this.topfor.section,
              number: 1
            }).then(res => {
              if (res.code == 200) {
                let activeSound = []
                this.activeSoundList = res.data.map(item => {
                  activeSound.push(item.id)
                  return this.initSound(item);
                });
                this.activeSound = activeSound;
                this.chioseActiveSound = activeSound[0]
                this.changeActiveSound(activeSound[0])
              }
            });
          } else {
            this.$nextTick(res => {
              this.teamid = this.$route.query.id;
              findMusicGroupSubjectInfo({ musicGroupId: this.teamid }).then(
                res => {
                  if (res.code == 200) {
                    let activeSound = []
                    this.activeSoundList = res.data?.musicGroupSubjectPlans.map(item => {
                      activeSound.push(item.subjectId)
                      return {
                        id: parseInt(item.subjectId),
                        sound: item.subName,
                        expectedStudentNum: item.expectedStudentNum,
                        chioseMusic: [],
                        markChioseList: [],
                        goodsList: [],
                        markList: [],
                      }
                    })
                    this.activeSound = activeSound;
                    console.log(this.activeSound)
                    // 格式化商品和教辅

                    res.data.musicGroupSubjectGoodsGroups.forEach(shop => {
                      let index = findIndex(this.activeSoundList, (o) => {
                        return o.id == shop.subjectId
                      })

                      if (index != -1) {
                        if (shop.type == 'ACCESSORIES') {
                          shop.goodsIdList.split(',').forEach(item => {
                            this.activeSoundList[index].markChioseList.push(parseInt(item))
                          })
                        } else if (shop.type == 'INSTRUMENT') {
                          // 商品
                          let typeJson = Object.keys(JSON.parse(shop.kitGroupPurchaseTypeJson))
                          this.activeSoundList[index].chioseMusic.push({
                            musical: parseInt(shop.goodsIdList),
                            type: typeJson,
                            groupPrice: shop.price,
                            borrowPrice: shop.depositFee
                          })
                        }

                      }


                    })


                  }
                })
            })
          }
        }
      });
      getSubject({ tenantId: 1 }).then(res => {
        if (res.code == 200) {
          this.childSoundList = res.data
        }
      })
    },
    lookCheck (val) {
      this.checkList = [...new Set(val)]
    },
    chioseSound (activeSound) {
      // 同步数据
      this.activeSound = [...new Set(activeSound)];
      let newSoundList = []

      for (let i in this.childSoundList) {
        if (this.activeSound.includes(this.childSoundList[i].id)) {
          newSoundList.push(this.initSound(this.childSoundList[i]))
        }
      }
      let idList = this.activeSoundList.map(item => {
        return item.id
      })
      for (let x in newSoundList) {
        const indexof = idList.indexOf(newSoundList[x]?.id)
        if (indexof > -1) {
          newSoundList[x] = this.activeSoundList[indexof]
        }
      }
      this.activeSoundList = newSoundList
      this.soundVisible = false
    },
    initSound (item) {
      let obj = {
        id: item.id,
        sound: item.name,
        expectedStudentNum: item.expectedStudentNum,
        chioseMusic: [{ musical: '', type: ["GROUP"], groupPrice: 0, borrowPrice: 1500 }],
        markChioseList: [],
        goodsList: [],
        markList: [],

      }
      return obj
    },
    changeActiveSound (val) {
      this.activeSoundList.forEach(item => {
        if (item.id == val) {
          if (item.goodsList.length < 1 || item.markList.length < 1) {
            getSubjectGoods({ subjectId: item.id, chargeTypeId: this.topfor.type }).then(res => {
              if (res.code == 200) {
                let goodList = []
                let markList = []
                res.data.forEach(item => {
                  if (item.type == 'INSTRUMENT') {
                    goodList.push(item)
                  } else if (item.type == 'ACCESSORIES') {
                    markList.push(item)
                  }
                })
                item.goodsList = goodList;
                item.markList = markList;
              }
            });
          }

        }
      })
    },
    lookMusic () {

    },
    goback () {
      this.$emit("chiosetab", 0);
    },
    submitInfo () {
      // 计划招生人数
      // 可选乐器
      // 教辅
      this.activeSoundList.forEach(item => {
        if (!item.expectedStudentNum) {
          this.$message.error(`请填写${item.sound}的预计招生人数`)
          return
        }
        if (!item.chioseMusic[0].musical) {
          this.$message.error(`请至少一个选择${item.sound}的可选乐器`)
          return
        }
      })
      // 新建团
      let obj = {}
      if (this.teamStatus == "newTeam") {
        this.initCreateTeam(obj)
      }
      //  初始化声部
      obj.musicGroupSubjectGoodsGroups = [];
      obj.musicGroupSubjectPlans = [];
      this.activeSoundList.forEach(active => {
        // 格式化声部数据
        let item = {
          expectedStudentNum: active.expectedStudentNum,
          subName: active.sound,
          subjectId: active.id
        };
        obj.musicGroupSubjectPlans.push(item);
        // 格式化商品数据 chioseMusic: [{ musical: '', type: ["GROUP"], groupPrice: 0, borrowPrice: 1500 }],
        active.chioseMusic.forEach(music => {
          let goodsItem = null;
          let depositFee = music.borrowPrice
          let price = music.groupPrice
          let index = findIndex(active.goodsList, (o) => {
            return o.id == music.musical
          })
          if (index != -1) {
            goodsItem = active.goodsList[index]
          }
          let kitGroupPurchaseTypeJson = {}
          music.type.forEach(type => {
            kitGroupPurchaseTypeJson[type] = 0
          })
          kitGroupPurchaseTypeJson = JSON.stringify(kitGroupPurchaseTypeJson)
          if (goodsItem) {
            let some = {
              subjectId: active.id,
              type: "INSTRUMENT",
              goodsIdList: music.musical,
              name: goodsItem.name,
              kitGroupPurchaseTypeJson,
              depositFee,
              price
            };
            obj.musicGroupSubjectGoodsGroups.push(some);
          }
        })
        // 格式化辅件
        //  markChioseList: [],
        // goodsList: [],
        // markList: [],
        active.markChioseList.forEach(ass => {
          let index = findIndex(active.markList, (o) => {
            return o.id == ass
          })
          let goodsItem = null;
          if (index != -1) {
            goodsItem = active.markList[index]
          }
          if (goodsItem) {
            let some = {
              subjectId: active.id,
              type: "ACCESSORIES",
              goodsIdList: ass,
              name: goodsItem.name,
              price: goodsItem.groupPurchasePrice,
            };
            obj.musicGroupSubjectGoodsGroups.push(some);
          }

        })
        if (this.teamStatus == 'newTeam') {
          createTeam(obj).then(res => {
            if (res.code == 200) {
              // 成功 跳转到乐团报名详情
            }
          });
        } else {
          obj.musicGroupId = this.teamid
          obj.musicGroupStatus = "DRAFT"
          updateSubjectInfo(obj).then(res => {
            if (res.code == 200) {
              this.$message.success("提交成功");
            }
          });
        }
      })
    },
    deleteRow () {
      if (this.checkList.length < 1) {
        this.$message.error('请至少勾选一个')
        return
      }
      for (let i = 0; i < this.activeSoundList.length; i++) {
        let index = this.checkList.indexOf(this.activeSoundList[i].id)
        if (index != -1) {
          this.activeSoundList.splice(i, 1)
          this.activeSound.splice(i, 1)
          i--
        }
      }
      this.checkList = []


    },
    allin () {
      this.checkList = []
      this.activeSoundList.forEach((item, index) => {
        this.checkList.push(item.id)
      })

    },

    initCreateTeam (obj) {
      let enrollClasses;
      this.topfor.startClass
        ? (enrollClasses = this.topfor.startClass.join(","))
        : (enrollClasses = null);
      obj.musicGroup = {
        settlementType: this.topfor.salary,
        applyExpireDate: dayjs(this.topfor.time).format('YYYY-MM-DD HH:mm:ss'),
        chargeTypeId: this.topfor.type,
        cooperationOrganId: this.topfor.school,
        teamTeacherId: this.topfor.boss,
        educationalTeacherId: this.topfor.teacher,
        enrollClasses,
        name: this.topfor.name,
        organId: this.topfor.section,
        paymentPattern: this.topfor.paymentPattern,
        paymentValidStartDate: this.topfor.paymentValidStartDate ? dayjs(this.topfor.paymentValidStartDate).format('YYYY-MM-DD') : this.topfor.paymentValidStartDate,
        paymentValidEndDate: this.topfor.paymentValidEndDate ? dayjs(this.topfor.paymentValidEndDate).format('YYYY-MM-DD') : this.topfor.paymentValidEndDate,
        // paymentMonths:obj.months  有待确认
        schoolId: this.topfor.address,
        expectStartGroupDate: this.topfor.startTime,
        isClassroomLessons: this.topfor.isClass,
        status,
        ownershipType: this.topfor.ownershipType,
        repairUserId: this.topfor.repairUserId,
        feeType: this.topfor.feeType
      };
      return obj
    }
  },
  computed: {
    PlannedCount () {
      let Count = 0;
      if (this.activeSoundList.length > 0) {
        for (let item in this.activeSoundList) {
          Count += parseInt(this.activeSoundList[item]?.expectedStudentNum) || 0;
        }
      }

      return Count;
    }, chioseSoundNum () {

      return this.activeSoundList.length;
    },
  }
}
</script>
<style lang="scss" scoped>
.topMsg {
  padding: 0 25px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  font-size: 14px;
  color: #444;
  margin-bottom: 20px;
}
.soundBtnWrap {
  margin-bottom: 20px;
}
/deep/.el-collapse-item__header {
  background-color: #edeef0;
}
.coreItemTitle {
  background-color: #edeef0;
  height: 46px;
  line-height: 46px;
  padding: 0 20px;
}
.coreItem {
  padding: 25px 0 0;
}
.coreItemRow {
  padding: 0 20px;
  line-height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  p {
    margin-right: 10px;
  }
  .title {
    width: 100px;
    text-align: right;
  }
}
.marginLeft10 {
  margin-left: 10px;
}
/deep/.el-collapse-item__header {
  border-bottom: 1px solid #fff;
}
.btnWrap {
  margin-top: 40px;
  .PrevBtn {
    background-color: #13817a;
    width: 120px;
  }
  .submitBtn {
    background-color: #13817a;
    width: 120px;
  }
}
</style>