10/27 17:43

11

src/views/teamBuild/components/soundSetComponents/chioseAccessory.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="chioseAccessory">
+    <div class="coreItemRow">
+      <p class="title">教辅组合1:</p>
+      <el-select style="width:558px!important;"
+                 v-model="goods">
+        <el-option label="1"
+                   value="1"></el-option>
+      </el-select>
+      <p class="title">教辅名称:</p>
+      <el-input style="width:140px"></el-input>
+      <p class="title">教辅打包价:</p>
+      <el-input style="width:140px"><template slot="append">元</template></el-input>
+    </div>
+    <div class="coreItemRow">
+      <p class="title"></p>
+      <el-button type="info"
+                 plain
+                 style="width:558px"
+                 size="mini"
+                 icon="el-icon-plus">新增可选乐器</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      goods: ''
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.coreItemRow {
+  padding-left: 20px;
+  height: 50px;
+  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;
+}
+</style>

src/views/teamBuild/components/soundSetComponents/chioseMusic.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+
+    <div class="chioseMusic coreItemRow">
+      <p class="title">可选乐器1:</p>
+      <el-select style="width:180px"
+                 v-model="goods">
+        <el-option label="1"
+                   value="1"></el-option>
+      </el-select>
+      <el-radio-group v-model="radio"
+                      class="marginLeft10">
+        <el-radio :label="3">团购</el-radio>
+        <el-radio :label="6">租赁</el-radio>
+        <el-radio :label="9">免费</el-radio>
+      </el-radio-group>
+      <el-input type="number"
+                class="marginLeft10"
+                disabled
+                style="width:140px"> <template slot="append">元</template></el-input>
+      <i class="el-icon-close marginLeft10"
+         style="font-size:20px; cursor: pointer;"></i>
+    </div>
+    <div class="coreItemRow">
+      <p class="title"></p>
+      <el-button type="info"
+                 plain
+                 style="width:558px"
+                 size="mini"
+                 icon="el-icon-plus">新增可选乐器</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      radio: '',
+      goods: ''
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.coreItemRow {
+  padding-left: 20px;
+  height: 50px;
+  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;
+}
+</style>

src/views/teamBuild/components/soundSetComponents/chioseSoundList.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+
+    <div class="soundWrap">
+
+      <el-checkbox-group v-model.trim="activeSound">
+        <div class="itemList">
+          <div class="categroy"
+               v-for="(item,index) in soundList"
+               :key="index">
+            <p>{{item.name }}</p>
+            <el-checkbox :label="sound.id"
+                         @change="changeCheck"
+                         v-for="(sound,indexs) in item.subjects"
+                         :key="indexs">{{sound.name }}</el-checkbox>
+          </div>
+        </div>
+      </el-checkbox-group>
+
+    </div>
+    <p class="soundSubP">当前选择声部数:{{chioseSoundNum}}</p>
+    <div class="btnWraps">
+      <el-button @click="generates"
+                 type="primary">
+        确定
+      </el-button>
+
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['soundList', 'childSoundList'],
+  data () {
+    return {
+      chioseSoundNum: '',
+      activeSound: [],
+    }
+  },
+  mounted () {
+    console.log(this.soundList)
+  },
+  methods: {
+    generates () {
+      this.$emit('chioseSound', this.activeSound)
+    },
+    changeCheck () {
+      console.log(this.activeSound)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.soundWrap {
+  width: 100%;
+  overflow: auto;
+  .itemList {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+    height: 300px;
+    max-height: 300px;
+    overflow: auto;
+    .categroy {
+      width: 150px;
+      min-width: 150px;
+      .el-checkbox {
+        height: 30px;
+        line-height: 30px;
+        display: block;
+        padding-left: 20px;
+      }
+      p {
+        height: 40px;
+        line-height: 40px;
+        background-color: #edeef0;
+        margin-bottom: 15px;
+        text-align: center;
+      }
+    }
+  }
+}
+.soundSubP {
+  height: 40px;
+  line-height: 40px;
+  background-color: #edeef0;
+  padding-left: 25px;
+  margin-bottom: 20px;
+}
+.btnWraps {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+</style>

src/views/teamBuild/components/teamBaseInfo.vue

@@ -244,7 +244,7 @@
                        :value="item.id"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="乐团网管课"
+        <!-- <el-form-item label="乐团网管课"
                       :rules="[{ required: true, message: '请选择是否排乐团网管课' }]"
                       prop="feeType">
           <el-select v-model="topFrom.feeType"
@@ -256,7 +256,7 @@
             <el-option label="只排线下课"
                        value="OFFLINE"></el-option>
           </el-select>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label
                       prop="isClass">
           <el-checkbox v-model.trim="topFrom.isClass"
@@ -824,7 +824,7 @@ export default {
                   res.data.musicGroupPaymentEntities[i].paymentMethod;
               }
 
-              if (res.data.months.length > 0) {
+              if (res.data?.months?.length > 0) {
                 this.payList.student.ischeck = true;
                 this.payList.student.chiose = "loop";
                 this.chioseMonth = res.data.months;

src/views/teamBuild/components/teamSoundMoney.vue

@@ -842,7 +842,6 @@ export default {
       this.calcPrice()
     },
     init () {
-      console.log('lai init')
       if (this.$route.query.search) {
         this.Fsearch = this.$route.query.search;
       }
@@ -855,15 +854,11 @@ export default {
           this.soundList = res.data.rows;
           // // 生成动态的checkList
           for (let key in this.soundList) {
+            console.log(key)
             this.$set(this.soundLists, key, []);
           }
           // 新建团带默认的数据   this.topfor.section
           if (this.teamStatus == "newTeam") {
-            // console.log({
-            //   chargeTypeId: type,
-            //   organId: this.topfor.section,
-            //   number: 1
-            // })
             getDefaultSubject({
               chargeTypeId: type,
               organId: this.topfor.section,

src/views/teamBuild/components/teamSoundSet.vue

@@ -1,14 +1,147 @@
 <template>
-  <div>
+  <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">全选</el-button>
+      <el-button type="danger">删除</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>
+          <el-collapse-item>
+            <template slot="title">
+              <div class="coreItemTitle">
+                <el-checkbox label="单簧管"
+                             value='1'></el-checkbox>
+              </div>
+            </template>
+            <div class="coreItem">
+              <div class="coreItemRow">
+                <p class="title">计划招生人数:</p>
+                <el-input style="width:180px"></el-input>
+              </div>
+            </div>
+            <chioseMusic />
+            <el-divider></el-divider>
+            <chioseAccessory />
+          </el-collapse-item>
 
+        </el-collapse>
+      </el-checkbox-group>
+    </div>
+    <el-dialog title="声部选择"
+               :visible.sync="soundVisible"
+               :modal-append-to-body="false">
+      <chioseSoundList :soundList="soundList"
+                       @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'
 export default {
+  components: { chioseMusic, chioseAccessory, chioseSoundList },
   data () {
-    return {}
+    return {
+      chioseSoundNum: 0,
+      PlannedCount: 0,
+      checkList: [],
+      Fsearch: null,
+      Frules: null,
+      soundList: [], // 接口返回的一级二级声部
+      soundVisible: false, // 设置声部弹窗
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  activated () { },
+  methods: {
+    init () {
+      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
+        }
+      });
+    },
+    lookCheck (val) {
+      console.log(val)
+    },
+    chioseSound (activeSound) {
+      console.log(activeSound)
+      this.soundVisible = false
+    }
   }
 }
 </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: 48px;
+  line-height: 48px;
+  padding: 0 20px;
+}
+.coreItem {
+  padding: 25px 20px 0;
+}
+.coreItemRow {
+  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;
+}
 </style>

src/views/teamBuild/index.vue

@@ -66,7 +66,7 @@
 </template>
 <script>
 import teamBaseInfo from '@/views/teamBuild/components/teamBaseInfo'
-import teamSoundMoney from '@/views/teamBuild/components/teamSoundMoney'
+import teamSoundMoney from '@/views/teamBuild/components/teamSoundSet'
 import teamResetSound from '@/views/teamBuild/components/teamResetSound'
 export default {
   components: { teamBaseInfo, teamSoundMoney, teamResetSound },