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

<template>
  <div class='sound-container'>

    <div class="topMsg">
      <p>当前选择声部数(个）：{{chioseSoundNum}}</p>
      <p style='margin-left:30px;'>计划招生人数(个）：{{PlannedCount}}</p>
    </div>
    <div class="listWrap">
      <el-table :data='activeSoundList'
                ref="multipleTable"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                highlight-current-row
                @selection-change='handleSelectionChange'
                @row-click='handleclick'>
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column label="声部"
                         align="center"
                         width="80"
                         prop="sound">
        </el-table-column>
        <el-table-column label="计划招生"
                         align="center"
                         width="100"
                         prop="jihua">
          <template slot-scope="scope"
                    width="100">
            <div>
              <el-input v-if='scope.row.type == 1'
                        type='number'
                        style="width:80px"
                        size='mini'
                        v-model="scope.row.jihua"
                        placeholder="请输入"></el-input>
              <!-- <p v-if='scope.row.type == 2'>{{scope.row.jihua}}</p> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column label="预计收费"
                         width="100"
                         align="center"
                         prop="yuji">
          <template slot-scope="scope">
            <div>
              <el-input v-if='scope.row.type == 1'
                        type='number'
                        style="width:80px"
                        size='mini'
                        v-model="scope.row.yuji"
                        placeholder="请输入"></el-input>
              <!-- <p v-if='scope.row.type == 2'>{{scope.row.yuji}}</p> -->
            </div>
          </template>

        </el-table-column>
        <el-table-column label="可选乐器规格"
                         align="center"
                         prop="zhonglei"
                         width="300">
          <template slot-scope="scope">
            <!-- 'typeVisible':false,'provideVisible':false,'markVisible':false -->
            <div>
              <span>{{scope.row.zhonglei | zhongleiFilter(scope.row.goodsList)}}</span>
              <el-popover placement="bottom"
                          @show='chioseType(scope.row)'
                          v-model="scope.row.typeVisible"
                          v-if='scope.row.type == 1'>
                <el-button type="text"
                           slot='reference'>
                  修改
                </el-button>
                <!-- zhonglei -->
                <el-select v-model="scope.row.zhonglei"
                           multiple
                           clearable
                           collapse-tags>
                  <el-option v-for="(item,index) in scope.row.goodsList"
                             :key='index'
                             :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
                <div style="text-align: right; margin-top: 20px">
                  <!-- <el-button size="mini"
                             type="text"
                             @click="closechioseType(scope.row)">取消</el-button> -->
                  <el-button type="primary"
                             size="mini"
                             @click="scope.row.typeVisible  = false">确定</el-button>
                </div>
              </el-popover>

            </div>
          </template>

        </el-table-column>
        <el-table-column label="乐器提供方式"
                         align="center"
                         prop="fangshi"
                         width="180">
          <template slot-scope="scope">
            <div>
              <!-- <div class="chiose"
                  >选择</div> -->
              <span v-if="scope.row.fangshi">{{scope.row.fangshi | fangshiFilter(scope.row.fangshiprice)}}</span>
              <el-popover placement="bottom"
                          v-model="scope.row.provideVisible"
                          v-if='scope.row.type == 1'>
                <i class='el-icon-edit'
                   slot='reference'>
                </i>

                <el-select v-model="scope.row.fangshi"
                           clearable>
                  <el-option label="免费"
                             value="FREE"></el-option>
                  <el-option label="租赁"
                             value="GROUP"></el-option>
                  <el-option label="借用"
                             value="LEASE"></el-option>
                </el-select>
                <el-input placeholder="请输入费用"
                          v-model="scope.row.fangshiprice"
                          style='width:180px; margin-top:20px'></el-input>
                <div style="text-align: right; margin-top: 20px">
                  <!-- <el-button size="mini"
                             type="text"
                             @click="scope.row.provideVisible = false">取消</el-button> -->
                  <el-button type="primary"
                             size="mini"
                             @click="scope.row.provideVisible  = false">确定</el-button>
                </div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="教辅组合"
                         align="center"
                         prop="jiaopu">
          <template slot-scope="scope">
            <div>
              <!-- <el-popover placement="bottom"
                          v-model="scope.row.markVisible"
                          @show="chioseMark"
                          v-if='scope.row.type == 1'>
                <div slot='reference'
                     class='chiose'>
                  操作
                </div>
                <el-input v-model="scope.row.fangshi"></el-input>
                1111
                <div style="text-align: right; margin: 0">
                  <el-button size="mini"
                             type="text"
                             @click="scope.row.provideVisible = false">取消</el-button>
                  <el-button type="primary"
                             size="mini"
                             @click="scope.row.provideVisible  = false">确定</el-button>
                </div>
              </el-popover> -->
              <!-- scope.row.markVisible = true -->

              <el-dialog :visible.sync="scope.row.markVisible"
                         style="text-align:left;"
                         width="60%">
                <el-button type='text'
                           @click="addMark(scope.row)">添加教辅</el-button>
                <div class="markWrap">
                  <div class="markItem"
                       v-for="(item, index) in scope.row.markList"
                       :key='index'>
                    <el-form :model="item"
                             :inline="true">
                      <el-form-item label="教辅名称">
                        <el-input type="text"
                                  v-model="item.name"></el-input>
                      </el-form-item>
                      <el-form-item label="教辅商品">
                        <el-select v-model="item.goods"
                                   multiple
                                   collapse-tags>
                          <el-option v-for='(item,index) in scope.row.markChioseList'
                                     :key='index'
                                     :label="item.name"
                                     :value="item.id"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="教辅打包价">
                        <el-input type='number'
                                  v-model="item.price"></el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="danger"
                                   icon="el-icon-delete"
                                   circle
                                   @click='removeMartItem(scope.row,index)'>
                        </el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <span slot="footer"
                      class="dialog-footer">
                  <!-- <el-button @click="scope.row.markVisible = false">取 消</el-button> -->
                  <el-button type="primary"
                             @click="scope.row.markVisible = false">确 定</el-button>
                </span>
              </el-dialog>
              <span>
                <span v-for='(item,index) in scope.row.markList'
                      v-if="item.name"
                      :key='index'>{{item.name+':'}}{{item.goods|goodsFilter(scope.row.markChioseList)}}{{' 价格 '+item.price }} </span>
              </span>
              <i class='el-icon-edit'
                 slot='reference'
                 @click="chioseMark(scope.row)">
              </i>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button v-if='scope.row.type == 2'
                         type="text"
                         @click="savecolumn(scope.row)">编辑</el-button>
              <el-button v-if='scope.row.type == 1'
                         type="text"
                         @click="savecolumn(scope.row)">保存</el-button>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="floor">
        <div class="remove"
             @click="removeListItem">删除</div>
        <div class='add'
             @click="addListItem">添加</div>
      </div>
    </div>
    <el-dialog title="声部选择"
               :visible.sync="dialogTableVisible"
               :modal-append-to-body="false">
      <div class="soundWrap">
        <div class="itemList">
          <div class="categroy"
               v-for="(item,index) in soundList"
               :key="index">
            <p>{{item.name }}</p>
            <el-checkbox-group v-model="soundLists[index]"
                               @change='changeList'>
              <!--  sound: this.activeSoundList[item].name,  // id
                 jihua: '10', //计划招生人数
                 yuji: '10', // 预计收费
                 zhonglei: [], // 可选乐器种类
                 fangshi: 2, // 乐器提供方式
                 jiaopu: 'jiaopu1', // 教辅组合
                 type: 1, // 操作
                 id: this.activeSoundList[item].id, //声部id
                 visible: false, // 当前乐器提供方式的pop提示框显示隐藏 -->
              <el-checkbox :label="sound.id"
                           @change="checkinlist({'id':sound.id,'sound':sound.name,'jihua':0,'yuji':0,'zhonglei':[],'fangshi':'','fangshiprice':0,'jiaopu':'','type':1,'typeVisible':false,'provideVisible':false,'markVisible':false,'goodsList':[],'markList':[{'name':'','goods':[],'price':''}],'markChioseList':[]})"
                           v-for="(sound,indexs) in item.subjects"
                           :key="indexs">{{sound.name }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <p class='soundSubP'>当前选择声部数:{{chioseSoundNum}}</p>
      <div class="btnWraps">
        <div class="dialogBtn"
             @click="generates">确定</div>
      </div>
    </el-dialog>
    <div class="btnWrap">
      <div class="PrevBtn"
           @click="goback">上一步</div>
      <div class="submitBtn"
           @click="submitInfo">提交</div>
    </div>
  </div>
</template>
<script>
import store from '@/store'
import { getSubject, getDefaultSubject, getGoods, createTeam, getSoundTree } from '@/api/buildTeam'
export default {
  data () {
    return {
      dialogTableVisible: false,
      soundList: [],
      soundLists: [], // 存储选中项的声部id 记录变量
      activeSoundList: [], // 记录存储后的所选中的声部列表
      checkList: [],
      multipleSelection: [], // 列表选择的集合
      isLoop: '', // 是否显示周期循环
      payfor: {},
      topfor: {},
      checkfor: {}
    }
  },
  methods: {
    // 改变checkbox
    changeList (e) {
      // console.log(e);
    },
    handleSelectionChange (e) {
      // 点击改变勾选
      this.multipleSelection = e;
    },
    handleclick (e) { },
    handleStatus (data) {
    },
    // 点击添加按钮
    addListItem () {
      this.dialogTableVisible = true;
    },
    // 点击确认按钮生成表单
    generates () {
      this.dialogTableVisible = false;
    },
    removeListItem () {
      for (let i = 0; i < this.activeSoundList.length; i++) {
        for (let j = 0; j < this.multipleSelection.length; j++) {

          if (this.activeSoundList[i].id == this.multipleSelection[j].id) {
            this.activeSoundList.splice(i, 1);
            // 遍历循环所有的group 删除所选id
            for (let key in this.soundLists) {
              if (this.soundLists[key].indexOf(this.multipleSelection[j].id) != -1) {
                // console.log(this.soundLists[key], this.multipleSelection[j].id, this.soundLists[key].indexOf(this.multipleSelection[j].id));
                this.soundLists[key].splice(this.soundLists[key].indexOf(this.multipleSelection[j].id), 1)
              }
            }
          }

        }
      }
    },
    // 勾选选中框处理数据,存储勾选过的checkbox值
    checkinlist (obj) {
      let flag = false;
      this.activeSoundList.map(item => {
        if (item.id == obj.id) {
          flag = true
        }
      })
      if (!flag) {
        this.activeSoundList.push(obj)
      } else {
        for (let i = 0; i < this.activeSoundList.length; i++) {
          if (this.activeSoundList[i].id == obj.id) {
            this.activeSoundList.splice(i, 1);
          }
        }
      }
    },
    // 根据声部id获取可选乐器种类
    chioseType (row) {
      // 根据id查询可选类型种类
      let id = row.id;
      // console.log(row.id);
      // 'subjectId': id, ' type'='INSTRUMENT'
      getGoods({ 'subjectId': id, 'type': 'INSTRUMENT' }).then(res => {
        if (res.code == 200) {
          row.goodsList = res.data;
          // console.log(row);
        }
      })
    },
    // 点击关闭乐器种类
    closechioseType (row) {
      row.typeVisible = false;
    },
    // 根据声部id查询可选教辅
    chioseMark (row) {
      row.markVisible = true
      let id = row.id;
      getGoods({ 'subjectId': id, 'type': 'ACCESSORIES' }).then(res => {
        if (res.code == 200) {
          console.log(res);
          row.markChioseList = res.data;
          // console.log(row);
        }
      })
    },
    // 添加教辅
    addMark (row) {
      row.markList.push({ 'name': '', 'goods': [], 'price': '' })
    },
    // 删除教辅
    removeMartItem (row, index) {
      // console.log(index);
      row.markList.splice(index, 1);
    },
    // 点击保存或编辑
    savecolumn (row) {
      row.type == 1 ? row.type = 2 : row.type = 1
    },
    // 返回上一步
    goback () {
      this.$emit('chiosetab', 0);
    },
    submitInfo () {
      // 整理数据提交
      let obj = {};
      this.payfor.student.chiose == 'loop' ? obj.months = this.payfor.chioseMonth : obj.months = [];
      obj.musicGroup = {
        settlementType: this.topfor.salary,
        applyExpireDate: this.topfor.time + ' 00:00:01',
        chargeTypeId: this.topfor.type,
        cooperationOrganId: this.topfor.school,
        teamTeacherId: this.topfor.boss,
        educationalTeacherId: this.topfor.teacher,
        enrollClasses: this.topfor.startClass.join(','),
        name: this.topfor.name,
        organId: this.topfor.section,
        // paymentMonths:obj.months  有待确认
        schoolId: this.topfor.address,
        courseForm: JSON.stringify(this.checkfor)
      }
      obj.musicGroupPaymentEntities = []
      // 添加学校主体付费方式
      // console.log(this.payfor.company.ischeck)
      if (this.payfor.school.ischeck) {

        obj.musicGroupPaymentEntities.push({
          'amount': this.payfor.school.price,
          'memo': this.payfor.school.value,
          'paymentMethod': this.payfor.school.chiose,
          'name': '学校'
        })
      }
      // 添加公司主体付费方式
      if (this.payfor.company.ischeck) {
        obj.musicGroupPaymentEntities.push({
          'amount': this.payfor.company.price,
          'memo': this.payfor.company.value,
          'paymentMethod': this.payfor.company.chiose,
          'name': '公司'
        })
      }
      // 添加商品以及教辅
      obj.musicGroupSubjectGoodsGroups = [];
      for (let i in this.activeSoundList) {
        // 遍历声部里的乐器
        let some = {};
        some.subjectId = this.activeSoundList[i].id;
        some.type = 'INSTRUMENT';
        some.goodsIdList = this.activeSoundList[i].zhonglei.join(',');
        obj.musicGroupSubjectGoodsGroups.push(some);
      }
      // 遍历声部里的教辅
      for (let i in this.activeSoundList) {
        // 遍历声部里的乐器
        for (let j in this.activeSoundList[i].markList) {
          let some = {};
          some.subjectId = this.activeSoundList[i].id;
          some.type = 'ACCESSORIES';
          some.goodsIdList = this.activeSoundList[i].markList[j].goods.join(',');
          some.name = this.activeSoundList[i].markList[j].name;
          some.price = this.activeSoundList[i].markList[j].price;
          obj.musicGroupSubjectGoodsGroups.push(some);
        }

      }
      // 添加声部
      obj.musicGroupSubjectPlans = [];
      for (let i in this.activeSoundList) {
        let item = {};
        // expectedStudentNum
        item.expectedStudentNum = this.activeSoundList[i].jihua;
        item.fee = this.activeSoundList[i].yuji;
        item.kitGroupPurchaseType = this.activeSoundList[i].fangshi;
        item.subName = this.activeSoundList[i].sound;
        item.subjectId = this.activeSoundList[i].id;
        obj.musicGroupSubjectPlans.push(item);
      }

      console.log(obj)

      // createTeam(obj).then(res => {
      //   if (res.code == 200) {
      //     // 成功 跳转到乐团报名详情
      //     this.$router.push({ path: '/business/teamDetail' })
      //   }
      // })
    }
  },
  filters: {
    zhongleiFilter (val, list) {
      let arr = []
      for (let i = 0; i < list.length; i++) {
        for (let j = 0; j < val.length; j++) {
          if (val[j] == list[i].id) {
            arr.push(list[i].name)
          }
        }
      }
      return arr.join(',')
    },
    fangshiFilter (val, price) {
      let str = ''
      if (val == 'FREE') {
        str = '免费'
      } else if (val == 'GROUP') {
        str = '租赁'
      } else if (val == 'LEASE') {
        str = '借用'
      }
      return str + '费用:' + price
    },
    goodsFilter (val, list) {
      let arr = [];
      for (let i = 0; i < val.length; i++) {
        for (let j = 0; j < list.length; j++) {
          if (val[i] == list[j].id) {
            arr.push(list[j].name);
          }
        }
      }
      return arr.join(',');
    }
    // markFilter(val){
    //   for
    //   let name = val.name;
    //   let goods = val.goods.join(',');
    //   let price = val.price
    // }
  },
  mounted () {
    getSoundTree().then(res => {
      // console.log(res);
      if (res.code == 200) {
        this.soundList = res.data.rows;
        // // 生成动态的checkList
        for (let key in this.soundList) {
          this.$set(this.soundLists, key, [])
        }
        getDefaultSubject({ chargeTypeId: type }).then(res => {
          if (res.code == 200) {
            this.activeSoundList = res.data.map(item => {
              this.soundLists[0].push(item.id)
              let obj = { 'id': item.id, 'sound': item.name, 'jihua': 0, 'yuji': 0, 'zhonglei': [], 'fangshi': '', 'fangshiprice': 0, 'jiaopu': '', 'type': 1, 'typeVisible': false, 'provideVisible': false, 'markVisible': false, 'goodsList': [], 'markList': [{ 'name': '', 'goods': [], 'price': '' }], 'markChioseList': [] }
              return obj;
            })
            // 并且把所有soundLists 里面
          }
        });
      }

    })
    // 拿到刚才的存储的信息
    this.payfor = this.$store.getters.payList;
    this.topfor = this.$store.getters.topinfo;
    this.checkfor = this.$store.getters.checkinfo;
    let type = this.topfor.type;

    // console.log(this.topfor);
    // console.log(this.checkfor);
    // console.log(this.payfor);

  },
  watch: {

  },
  computed: {
    // 返回当前选中声部数量
    chioseSoundNum () {
      let num = 0;
      for (let key in this.soundList) {
        // console.log(this.soundLists[key])
        num += this.soundLists[key].length;

      }
      return num;
    },
    // 计划招生人数
    PlannedCount () {
      let Count = 0;
      for (let item in this.activeSoundList) {
        Count += parseInt(this.activeSoundList[item].jihua)
      }
      return Count
    }
  },
}
</script>
<style lang="scss" >
// .el-table__body tr.current-row > td {
//   background-color: #c6cbd4 !important;
// }
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #14928a;
  border-color: #14928a;
}
.el-select__tags .el-tag__close.el-icon-close {
  display: inline-block;
}
// .el-dialog__header {
//   padding: 0 32px !important;
//   height: 40px;
//   line-height: 40px;
//   background-color: #14928a;

//   .el-dialog__title {
//     color: #fff;
//     font-size: 16px;
//   }
// }
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #606266;
}
.sound-container {
  .chioseWrap {
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    padding: 0 25px;
    p {
      font-size: 14px;
      margin-right: 30px;
    }
  }
  .topMsg {
    padding: 0 25px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 14px;
    color: #444;
    margin-bottom: 15px;
  }
  .subTitle {
    width: 1203px;
    height: 40px;
    line-height: 40px;
    background-color: #fefceb;
    padding: 0 25px;
    box-sizing: border-box;
    font-size: 16px;
    color: #474747;
    margin-bottom: 20px;
  }
  .floor {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    height: 48px;
    line-height: 48px;
    background: rgba(237, 238, 240, 1);
    font-size: 14px;
    color: #444;
    align-items: center;
    position: relative;
    z-index: 1;
    .remove {
      width: 98px;
      height: 32px;
      background: rgba(248, 80, 67, 1);
      border-radius: 3px;
      color: #fff;
      line-height: 32px;
      text-align: center;
      margin-left: 164px;
      cursor: pointer;
    }
    .add {
      width: 98px;
      height: 32px;
      background: rgba(20, 146, 138, 1);
      border-radius: 3px;
      color: #fff;
      line-height: 32px;
      text-align: center;
      margin-left: 20px;
      cursor: pointer;
    }
  }
  .xuanze {
    width: 71px;
  }
  .chiose {
    width: 65px;
    height: 24px;
    line-height: 24px;
    border: 1px solid rgba(151, 151, 151, 1);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
  }
}
.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;
}
.btnWraps {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 150px;
  .dialogBtn {
    width: 188px;
    height: 40px;
    background: rgba(249, 114, 21, 1);
    border-radius: 4px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    cursor: pointer;
  }
}
.btnWrap {
  margin-top: 40px;
  .PrevBtn {
    background-color: #444444;
    width: 120px;
  }
  .submitBtn {
    background-color: #f85043;
    width: 120px;
  }
}
.el-icon-plus {
  cursor: pointer;
}
</style>