dy-admin-manager/src/views/teamBuild/components/soundSetComponents/soundSetCore.vue

<template>
  <div>
    <div

      :class="isField ? 'soundBtnWrap' : 'soundBtnFixed'"
      v-if="!basdisabled"
    >
      <el-button
        type="primary"
        @click="allin"
        v-if="teamStatus != 'resetTeam' && !basdisabled"
        >全选</el-button
      >
      <el-button
        type="danger"
        @click="deleteRow"
        v-if="teamStatus != 'resetTeam' && !basdisabled"
        >删除</el-button
      >
      <el-button type="primary" @click="soundVisible = true" v-if="!basdisabled"
        >添加</el-button
      >
    </div>
    <div class="wall" v-if="!basdisabled"></div>
    <div class="coreWrap">
      <el-checkbox-group v-model="checkList" @change="lookCheck">
        <el-collapse v-model="chioseActiveSound">
          <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" :disabled="basdisabled">{{
                  item.sound
                }}</el-checkbox>
              </div>
            </template>
            <div class="coreItem">
              <div class="coreItemRow">
                <p class="title">计划招生人数:</p>
                <el-input
                  :disabled="basdisabled"
                  style="width: 180px"
                  v-model="item.expectedStudentNum"
                ></el-input>
              </div>
            </div>
            <el-divider></el-divider>
            <chioseMusic
              :activeSoundList="activeSoundList"
              :item="item"
              @lookMusic="lookMusic"
              :basdisabled="basdisabled"
            />
            <div class="coreItemRow">
              <p class="title">教辅:</p>
              <el-select
                style="width: 558px !important"
                v-model="item.markChioseList"
                :disabled="basdisabled"
                clearable
                filterable
                multiple
              >
                <el-option
                  v-for="(item, index) in item.markList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span
                    style="
                      float: right;
                      color: #8492a6;
                      font-size: 13px;
                      padding-right: 20px;
                    "
                    >{{ item.groupPurchasePrice | moneyFormat }}元</span
                  >
                </el-option>
              </el-select>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-checkbox-group>
    </div>
    <el-dialog title="声部选择" :visible.sync="soundVisible" destroy-on-close>
      <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 chioseSoundList from "./chioseSoundList";
import chioseMusic from "./chioseMusic";
import { findIndex } from "lodash";
import numeral from "numeral";
export default {
  components: { chioseSoundList, chioseMusic },
  data() {
    return {
      soundList: [], // 接口返回的一级二级声部
      soundVisible: false, // 设置声部弹窗
      childSoundList: [],
      activeSoundList: [], //列表上的声部
      activeSound: null, // 展开的列表
      chioseActiveSound: [],
      soundList: [], // 接口返回的一级二级声部
      childSoundList: [],
      teamStatus: "", // 乐团状态
      checkList: [],
      basdisabled: false,
      teamid: "",
      isField: true,
    };
  },
  mounted() {
    if (this.$route.query.id) {
      this.teamid = this.$route.query.id;
    }
      window.addEventListener("scroll", this.getScroll);
    this.init();
  },
  deactivated() {
    window.removeEventListener("scroll", this.getScroll);
  },
  beforeDestroy() {
    sessionStorage.setItem(
      `${this.teamid}sound`,
      JSON.stringify(this.activeSoundList)
    );
     window.removeEventListener("scroll", this.getScroll);
  },
  activated() {
    if (
      (this.teamid && this.teamid != this.$route.query.id) ||
      this.teamStatus != this.$route.query.type
    ) {
      this.init();
    } else {
      if (!this.teamid && this.activeSoundList.length < 1) {
        this.init();
      }
    }
      this.teamStatus = this.$route.query.type;
     if (
        this.teamStatus == "look" ||
        this.teamStatus == "teamAudit" ||
        this.teamStatus == "feeAudit"||
        this.teamStatus ==  "teamCanceled"
      ) {
        this.basdisabled = true;
      } else {
        this.basdisabled = false;
      }
  },
  deactivated(){
    this.activeSoundList = []
  },

  methods: {
    init() {
      // 获取第一页的数据
      this.topfor = this.$store.getters.topinfo;
      let type = this.topfor.type;
      let section = this.topfor.section;
      this.teamStatus = this.$route.query.type;
      if (
        this.teamStatus == "look" ||
        this.teamStatus == "teamAudit" ||
        this.teamStatus == "feeAudit" ||
        this.teamStatus == "teamCanceled"
      ) {
        this.basdisabled = true;
      } else {
        this.basdisabled = false;
      }
      let sotrage = JSON.parse(
        sessionStorage.getItem(`${this.$route.query.id}sound`)
      );
      if (sotrage&&sotrage[0]?.id) {
        this.activeSoundList = sotrage;
        let activeSound = [];

        this.activeSoundList.forEach((item) => {
          activeSound.push(item.id);
        });
        this.chioseActiveSound = activeSound;
      } else {
        getSoundTree({ tenantId: 1 }).then((res) => {
          if (res.code == 200) {
            this.soundList = res.data.rows;
            if (this.teamStatus == "newTeam" && type && section) {
              getDefaultSubject({
                chargeTypeId: type,
                organId: 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;
                  this.changeActiveSound(activeSound.join(","));
                }
              });
            } else {
              this.teamid = this.$route.query.id;
              if (this.teamid) {
                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;
                      this.chioseActiveSound = activeSound;
                      this.changeActiveSound(activeSound.join(","));
                      // 格式化商品和教辅
                      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,
                              groupRemissionCourseFee: Boolean(
                                shop.groupRemissionCourseFee
                              ),
                            });
                          }
                        }
                      });
                    }
                  }
                );
              }
            }
          }
        });
      }

      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;
      let newActiveSound = [];
      this.activeSoundList.forEach((item) => {
        newActiveSound.push(item.id);
      });
      this.activeSound = newActiveSound;
      this.chioseActiveSound = newActiveSound;
      this.changeActiveSound(newActiveSound.join(","));
      this.soundVisible = false;
    },
    initSound(item) {
      let obj = {
        id: item.id,
        sound: item.name,
        expectedStudentNum: item.expectedStudentNum,
        chioseMusic: [
          {
            musical: "",
            type: ["GROUP"],
            groupPrice: 0,
            borrowPrice: 1500,
            groupRemissionCourseFee: Boolean(item.groupRemissionCourseFee),
          },
        ],
        markChioseList: [],
        goodsList: [],
        markList: [],
      };
      return obj;
    },
    changeActiveSound(val) {
      // 写入声部商品和辅件
      getSubjectGoods({
        subjectIds: val,
        chargeTypeId: this.topfor.type,
      }).then((res) => {
        if (res.code == 200) {
          if (res.data) {
            let keys = Object.keys(res.data);
            this.activeSoundList.forEach((item) => {
              if (keys.indexOf(item.id + "") != -1) {
                let goodList = [];
                let markList = [];
                res.data[item.id].forEach((shop) => {
                  if (shop.type == "INSTRUMENT") {
                    goodList.push(shop);
                  } else if (shop.type == "ACCESSORIES") {
                    markList.push(shop);
                  }
                });
                item.goodsList = goodList;
                item.markList = markList;
              }
            });
          }
        }
      });
    },

    lookMusic() {},

    submitInfo(type) {
      // 计划招生人数
      // 可选乐器
      // 教辅

      if (this.activeSoundList.length <= 0) {
        this.$message.error(`请至少设置一个声部`);
        return;
      }
      let flag = true;
      this.activeSoundList.forEach((item) => {
        if (!item.expectedStudentNum) {
          this.$message.error(`请填写${item.sound}的预计招生人数`);
          flag = false;
          return;
        }
        if (!item.chioseMusic[0]?.musical) {
          this.$message.error(`请至少一个选择${item.sound}的可选乐器`);
          flag = false;
          return;
        }
        item.chioseMusic.forEach((music) => {
          if (music.type.indexOf("LEASE") != -1) {
            if (!music.borrowPrice || parseFloat(music.borrowPrice) <= 0) {
              this.$message.error(`请填写正确的${item.sound}租赁押金`);
              flag = false;
            }
          }
        });
      });
      if (!flag) 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 groupRemissionCourseFee;
          if (music.type.indexOf("GROUP") != -1) {
            groupRemissionCourseFee = music.groupRemissionCourseFee * 1;
          } else {
            groupRemissionCourseFee = 0;
          }

          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;
          });
          // if (Array.isArray(music.type)) {
          //   music.type.forEach((type) => {
          //     kitGroupPurchaseTypeJson[type] = 0;
          //   });
          // }else{
          //   // 字符串
          //   let arr = [ music.type]
          //     arr.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,
              groupRemissionCourseFee,
            };
            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) {
        //     // 成功 跳转到乐团报名详情
        //     // let query = this.$route.query;
        //     // query.type = "teamDraft";
        //     // this.$router.push({
        //     //   query: {
        //     //     ...query,
        //     //     id: res.data,
        //     //   },
        //     // });
        //     // this.$emit("chiosetab", 2);
        //     // this.$emit("getBaseInfo", obj);
        //     //  zheli

        //     // 把第3步单独拆出来做成独立的模块
        //     this.$confirm("乐团创建成功，是否提交审核?", "提示", {
        //       confirmButtonText: "确定",
        //       cancelButtonText: "取消",
        //       type: "warning",
        //     })
        //       .then(() => {
        //         this.teamStatus = "teamDraft";
        //         this.teamid = res.data;
        //         this.submitInfo(1);
        //       })
        //       .catch(() => {
        //         this.$store.dispatch("delVisitedViews", this.$route);
        //         this.$router.push({
        //           path: "/business/teamDetail",
        //         });
        //       });
        //   }
        // });
      } else {
        obj.musicGroupId = this.teamid;
        console.log(obj,type)
        if (type) {
          obj.musicGroupStatus = "AUDIT";
        } else {
          obj.musicGroupStatus = "DRAFT";
        }

        if (type == 2) {
          this.$confirm("是否提交审核?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              updateSubjectInfo(obj).then((res) => {
                if (res.code == 200) {
                  this.$message.success("提交成功");
                  this.$store.dispatch("delVisitedViews", this.$route);
                  this.$router.push({
                    path: "/business/teamDetail",
                  });
                }
              });
            })
            .catch(() => {});
        }else{
           updateSubjectInfo(obj).then((res) => {
          if (res.code == 200) {
            // this.$emit("chiosetab", 2);
            // 创建乐团，只会到声部了
            let query = this.$route.query;
            this.$store.dispatch("delVisitedViews", this.$route);
            this.$router.push({
              path: "/business/teamDetail",
              query: {
                ...query,
              },
            });
          }
        });
        }

      }
    },
    deleteRow() {
      if (this.checkList.length < 1) {
        this.$message.error("请至少勾选一个");
        return;
      }
      this.$confirm("确定删除选中声部?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          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 = [];
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    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,
        courseViewType: this.topfor.courseViewType,
        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: "DRAFT",
        ownershipType: this.topfor.ownershipType,
        repairUserId: this.topfor.repairUserId,
        feeType: this.topfor.feeType,
        directorUserId: this.topfor.head,
      };
      return obj;
    },
    getScroll() {

      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (!!this.scrollTop && this.scrollTop >= 210) {
        this.isField = false;
      } else {
        this.isField = true;
      }
    },
  },
  watch: {
    activeSoundList: {
      immediate: true,
      deep: true,
      handler(n) {
        let chioseSoundNum = 0;
        let PlannedCount = 0;
        let activeSoundList = this.activeSoundList;
        if (n) {
          let Count = 0;
          if (n.length > 0) {
            for (let item in n) {
              Count += parseInt(n[item]?.expectedStudentNum) || 0;
            }
          }

          chioseSoundNum = n.length;
          PlannedCount = Count;
          this.$emit("getNumber", chioseSoundNum, PlannedCount);
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.wall {
  height: 60px;
  margin-bottom: 20px;
}
.soundBtnWrap {
  width: 100%;
  position: absolute;
  background-color: #fff;
  z-index: 100;
  padding: 20px;
}
.soundBtnFixed {
  top: 86px;
  left: 270px; // 205
  width: 100%;
  position: fixed;
  background-color: #fff;
  z-index: 100;
  padding: 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: 140px;
    text-align: right;
  }
}
.marginLeft10 {
  margin-left: 10px;
}
/deep/.el-collapse-item__header {
  border-bottom: 1px solid #fff;
}
</style>