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"
              :dividend="dividend"
            />
            <div class="coreItemRow">
              <p class="title">教辅:</p>
              <select-all
                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"
                  :disabled="item.delFlag"
                >
                  <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>
              </select-all>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-checkbox-group>
    </div>
    <el-dialog
      title="声部选择"
      :visible.sync="soundVisible"
      v-if="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,
  getSoundTree,
  findMusicGroupSubjectInfo,
  updateSubjectInfo,
  getSubjectGoods,
  getTeamBaseInfo
} from "@/api/buildTeam";
import { getMusicGroupPlanMakingDetail } from "@/views/baseRulesManager/api";
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,
      dividend: 0
    };
  },
  mounted() {
    if (this.$route.query.id) {
      this.teamid = this.$route.query.id;
    }
    window.addEventListener("scroll", this.getScroll);
    this.$nextTick(res => {
      this.init();
    });
    getTeamBaseInfo({ musicGroupId: this.teamid }).then(res => {
      if (res.code == 200) {
        this.dividend = res.data.maxMusicalInstrumentsProfits;
      }
    });
  },
  deactivated() {
    window.removeEventListener("scroll", this.getScroll);
  },
  beforeDestroy() {
    this.setStore();
    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.teamStatus == "FEE_AUDIT_FAILED"
    ) {
      this.basdisabled = true;
    } else {
      this.basdisabled = false;
    }
  },
  deactivated() {
    this.activeSoundList = [];
  },

  methods: {
    setStore() {
      localStorage.setItem(
        `${this.teamid}sound`,
        JSON.stringify(this.activeSoundList)
      );
    },
    async init() {
      // 获取第一页的数据
      // this.topfor = this.$store.getters.topinfo;
      // let type = this.topfor.type;
      // let section = this.topfor.section;
      this.topfor =
        JSON.parse(localStorage.getItem(`${this.$route.query.id}base`)) ||
        this.$store.getters.topinfo;

      this.teamStatus = this.$route.query.type;
      if (
        this.teamStatus == "look" ||
        this.teamStatus == "teamAudit" ||
        this.teamStatus == "feeAudit" ||
        this.teamStatus == "teamCanceled" ||
        this.teamStatus == "FEE_AUDIT_FAILED"
      ) {
        this.basdisabled = true;
      } else {
        this.basdisabled = false;
      }
      let sotrage = JSON.parse(
        localStorage.getItem(`${this.$route.query.id}sound`)
      );

      getSoundTree({ tenantId: 1 }).then(async res => {
        if (res.code == 200) {
          this.soundList = res.data.rows;
          if (sotrage && sotrage[0]?.id) {
            // this.$set(data,'activeSoundList',sotrage)
            this.activeSoundList = sotrage;
            let activeSound = [];

            this.activeSoundList.forEach(item => {
              activeSound.push(item.id);
            });
            this.chioseActiveSound = activeSound;
            this.activeSound = activeSound;
            await this.changeActiveSound(activeSound.join(","));
          } else {
            if (this.teamStatus == "newTeam") {
              this.getDefaultSubject();
            } else {
              this.teamid = this.$route.query.id;
              if (this.teamid) {
                findMusicGroupSubjectInfo({ musicGroupId: this.teamid }).then(
                  async res => {
                    if (res.code == 200) {
                      // 如果没有一个声部 则请求默认声部

                      if (res.data?.musicGroupSubjectPlans?.length > 0) {
                        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;
                        // 格式化商品和教辅
                        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
                                ),
                                organShareProfit: shop.organShareProfit
                              });
                            }
                          }
                        });
                        await this.changeActiveSound(activeSound.join(","));
                      } else {
                        this.getDefaultSubject();
                      }

                      // 这里开始
                    }
                  }
                );
              }
            }
          }
        }
      });
      getSubject({ tenantId: 1 }).then(res => {
        if (res.code == 200) {
          this.childSoundList = res.data;
        }
      });
    },
    getDefaultSubject() {
      let type = this.topfor.type;
      let section = this.topfor.section;
      let musicGroupPlanMakingId = this.topfor.musicGroupPlanMakingId;
      getMusicGroupPlanMakingDetail({
        id: musicGroupPlanMakingId
      }).then(async res => {
        if (res.code == 200) {
          let activeSound = [];
          this.activeSoundList = [];
          if (res.data?.subjectMap) {
            for (let key in res.data.subjectMap) {
              console.log(key, "key", res.data.subjectMap[key], "name");
              activeSound.push(key * 1);
              this.activeSoundList.push(
                this.initSound({
                  id: key * 1,
                  name: res.data.subjectMap[key]
                })
              );
            }
          }
          // this.activeSoundList = res.data.map((item) => {
          //   activeSound.push(item.id);
          //   return this.initSound(item);
          // });
          this.activeSound = activeSound;
          this.chioseActiveSound = activeSound;
          await this.changeActiveSound(activeSound.join(","));
        }
      });
    },
    lookCheck(val) {
      this.checkList = [...new Set(val)];
    },
    async 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;
      await this.changeActiveSound(newActiveSound.join(","));
      this.soundVisible = false;
    },
    initSound(item) {
      let obj = {
        id: item.id,
        sound: item.name,
        expectedStudentNum: item.expectedStudentNum,
        chioseMusic: [
          {
            musical: "",
            type: [],
            groupPrice: 0,
            borrowPrice: 1500,
            groupRemissionCourseFee: Boolean(item.groupRemissionCourseFee)
          }
        ],
        markChioseList: [],
        goodsList: [],
        markList: []
      };
      return obj;
    },
    async changeActiveSound(val) {
      // 写入声部商品和辅件
      return getSubjectGoods({
        subjectIds: val,
        chargeTypeId: this.topfor.type,
        musicGroupId: this.teamid,
        courseViewType: this.topfor.courseViewType
      }).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;
              }
            });
            this.checkShopAndMark();
          }
        }
      });
    },
    lookMusic() {},
    checkShopAndMark() {
      let loadash = this.$helpers.lodash;
      let errorShop = [];
      let flag = false;
      this.activeSoundList.forEach(item => {
        // 格式化教辅
        let markIdList = item.markList.map(mark => {
          return mark.id;
        });
        let goodsIdList = item.goodsList.map(good => {
          return good.id;
        });
        for (let i = 0; i < item.markChioseList.length; i++) {
          if (
            !markIdList.includes(item.markChioseList[i]) &&
            item.markChioseList[i]
          ) {
            errorShop.push(item.markChioseList[i]);
            flag = true;
            item.markChioseList.splice(i--, 1);
          }
        }

        for (let i = 0; i < item.chioseMusic.length; i++) {
          if (
            !goodsIdList.includes(item.chioseMusic[i].musical) &&
            item.chioseMusic[i].musical
          ) {
            errorShop.push(item.chioseMusic[i].musical);
            flag = true;
            item.chioseMusic[i].musical = null;
            item.chioseMusic[i].groupPrice = null;
          }
        }
      });
      if (flag) {
        // 提示

        this.$message.error(
          `{${errorShop.join(",")}}商品已失效，请联系仓库主管`
        );
      }
      this.$set(this, "activeSoundList", this.activeSoundList);
    },
    checkSubmit() {
      let flag = true;
      if (this.activeSoundList.length <= 0) {
        this.$message.error(`请至少设置一个声部`);
        flag = false;
        return;
      }

      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;
            }
          }
        });
      });
      return flag;
    },
    submitInfo(type) {
      // 计划招生人数
      // 可选乐器
      // 教辅

      let flag = this.checkSubmit();
      if (!flag) return;
      // 新建团
      let obj = {};
      // if (this.teamStatus == "newTeam") {
      //   this.initCreateTeam(obj);
      // }
      //  初始化声部
      obj.musicGroupSubjectGoodsGroups = [];
      obj.musicGroupSubjectPlans = [];
      let noMusic = [];
      this.activeSoundList.forEach(active => {
        if (!active.chioseMusic[0]?.musical) {
          noMusic.push(active.sound);
        }
        // 格式化声部数据
        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 organShareProfit = music.organShareProfit;
          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,
              organShareProfit
            };
            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") {
      } else {
        obj.musicGroupId = this.teamid;
        // 有type 到审核  没有 继续草稿
        if (type) {
          obj.musicGroupStatus = "DRAFT";
        } else {
          obj.musicGroupStatus = "DRAFT";
        }

        if (type) {
          let str = "";
          if (noMusic.length > 0) {
            str =
              noMusic.join(",") +
              "尚未设置乐器，学员报名该声部时将无乐器可购买，是否确认？";
          } else {
            str = "是否设置缴费信息";
          }
          this.$confirm(str, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              updateSubjectInfo(obj).then(res => {
                if (res.code == 200) {
                  this.$message.success("提交成功");

                  if (type == 3) {
                    this.$emit("chiosetab", type);
                  } else {
                    this.$store.dispatch("delVisitedViews", this.$route);
                    this.$router.push({
                      path: "/teamList"
                    });
                  }
                }
              });
            })
            .catch(() => {});
        } else {
          let str = "";
          if (noMusic.length > 0) {
            str =
              noMusic.join(",") +
              "尚未设置乐器，学员报名该声部时将无乐器可购买，是否确认？";
          } else {
            str = "是否保存";
          }
          this.$confirm(str, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            updateSubjectInfo(obj).then(res => {
              if (res.code == 200) {
                this.setStore();
                if (type == 1) {
                  this.$message.success("保存成功");
                  let query = this.$route.query;
                  this.$store.dispatch("delVisitedViews", this.$route);
                  this.$router.push({
                    path: "/teamList",
                    query: {
                      ...query
                    }
                  });
                } else {
                  this.$message.success("保存成功");
                }
                // this.$emit("chiosetab", 2);
                // 创建乐团，只会到声部了
              }
            });
          });
        }
      }
    },
    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"),
    //     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 >= 190) {
        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: 105px;
  left: 235px; // 205
  width: 100%;
  position: fixed;
  background-color: #fff;
  z-index: 100;
  padding: 20px;
}
::v-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;
}
::v-deep .el-collapse-item__header {
  border-bottom: 1px solid #fff;
}
</style>