dy-admin-manager/src/views/resetTeaming/components/resetSound.vue

<template>
  <div>
    <el-table :data='activeSoundList'
              :header-cell-style="{background:'#EDEEF0',color:'#444'}">
      <el-table-column align='center'
                       width="180px;"
                       prop="sound"
                       label="声部名称">
      </el-table-column>
      <el-table-column align='center'
                       width="180px;"
                       prop="yuji"
                       label="课程费用">
        <template slot-scope="scope">
          <div>
            <el-input style="width:100px"
                      v-model.trim="scope.row.yuji"></el-input>
          </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.trim="scope.row.typeVisible"
                        v-if='scope.row.type == 1'>
              <el-button type="text"
                         slot='reference'>
                修改
              </el-button>
              <!-- zhonglei -->
              <el-select v-model.trim="scope.row.zhonglei"
                         multiple
                         clearable
                         filterable
                         @change="changezhonglei(scope.row)"
                         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">
        <template slot-scope="scope">
          <div>
            <!-- <div class="chiose"
                  >选择</div> -->
            <div style='white-space:pre'
                 v-if="scope.row.fangshi.length >0">{{scope.row.fangshi | fangshiFilter(scope.row)}}</div>
            <i class='el-icon-edit'
               @click="setGiveMode(scope.row)">
            </i>
            <!-- <el-popover placement="bottom"
                          v-model.trim="scope.row.provideVisible"
                          v-if='scope.row.type == 1'>
                <i class='el-icon-edit'
                   slot='reference'>
                </i>

                <el-select v-model.trim="scope.row.fangshi"
                           clearable>
                  <el-option label="团购"
                             value="GROUP"></el-option>
                  <el-option label="借用"
                             value="LEASE"></el-option>
                  <el-option label="免费"
                             value="FREE"></el-option>
                </el-select>
                <el-input placeholder="请输入费用"
                          v-if='scope.row.fangshi == "LEASE"'
                          v-model.trim="scope.row.fangshiprice"
                          style='width:180px; margin-top:20px'></el-input>
                <div style="text-align: right; margin-top: 20px">
                  <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-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.trim="item.name"></el-input>
                    </el-form-item>
                    <el-form-item label="教辅商品">
                      <el-select v-model.trim="item.goods"
                                 filterable
                                 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'
                                @mousewheel.native.prevent
                                v-model.trim="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 && scope.row.markChioseList.length>0"
                    :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>
    <!-- <div class="remove"
             @click="removeListItem">删除</div> -->
    <div class="floor">
      <div class='add'
           @click="addListItem">添加</div>
    </div>
    <div class="btnWrap"
         style="margin-top:30px">
      <div class="closeBtn"
           @click="getSound">取消</div>
      <div class="okBtn"
           v-permission="{child: 'musicGroup/updateSubjectInfo', parent: '/resetTeaming/resetSound'}"
           @click="saveInfo">保存</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.trim="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':1500,'jiaopu':'','type':1,'typeVisible':false,'provideVisible':false,'markVisible':false,'goodsList':[],'markList':[],'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="btnWrapss">
        <div class="dialogBtn"
             @click="generates">确定</div>
      </div>
    </el-dialog>
    <el-dialog tilte='请选择乐器的提供方式及减免金额'
               width="800px"
               :visible.sync="reductionVisible">
      <div v-if="editSound&&editSound.fangshi.length >0">
        <div class="reductionWrap"
             v-for="(item,index) in editSound.fangshi"
             :key='index'>
          <div class="lineWrap">
            <div class="item">{{ item.shopName}}</div>
            <div class="item">提供方式</div>
            <div class="item">提供方式对应金额</div>
            <div class="item">减免金额</div>
          </div>

          <div class="lineWrap">
            <div class="item"></div>
            <div class="item">
              <el-checkbox v-model.trim="item.mode.isGROUP"></el-checkbox>
              团购
            </div>
            <div class="item">
              <el-input style="width:80%"
                        @mousewheel.native.prevent
                        v-model.trim="item.mode.price"
                        type="number"
                        disabled></el-input>
            </div>
            <div class="item">
              <el-input style="width:80%"
                        @mousewheel.native.prevent
                        @input='groupInput(item)'
                        type="number"
                        v-model.trim="item.mode.GROUP"></el-input>
            </div>

          </div>

          <div class="lineWrap">
            <div class="item"></div>
            <div class="item">
              <el-checkbox v-model.trim="item.mode.isLEASE"></el-checkbox>
              租赁
            </div>
            <div class="item">
              <el-input style="width:80%"
                        @mousewheel.native.prevent
                        type="number"
                        @input='(val)=>{
                            setDeposiInput(val,item)
                         }'
                        v-model.trim="item.mode.depositFee"></el-input>
            </div>
            <div class="item">
              <el-input style="width:80%"
                        type="number"
                        @mousewheel.native.prevent
                        @input='deposiInput(item)'
                        v-model.trim="item.mode.LEASE"></el-input>
            </div>

          </div>

          <div class="lineWrap">
            <div class="item"></div>
            <div class="item">
              <el-checkbox v-model.trim="item.mode.isFREE"></el-checkbox>
              免费
            </div>
            <div class="item">
              <el-input style="width:80%"
                        @mousewheel.native.prevent
                        disabled></el-input>
            </div>
            <div class="item">
              <!--  v-model.trim="item.mode.FREE" -->
              <el-input style="width:80%"
                        type="number"
                        @mousewheel.native.prevent
                        disabled></el-input>
            </div>

          </div>
        </div>
      </div>

      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="resetSoundItem">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { findMusicGroupSubjectInfo, resetSubjectPlan, getSoundTree, getGoods, updateSubjectInfo } from '@/api/buildTeam'
export default {
  name: 'resetSound',
  data () {
    return {
      reductionVisible: false,
      dialogTableVisible: false,
      tableList: [],
      teamid: '',
      activeSoundList: [],
      soundList: [],
      checkList: [],
      multipleSelection: [], // 列表选择的集合
      soundList: [],
      soundLists: [], // 存储选中项的声部id 记录变量
      editSound: null
    }
  },
  mounted () {

    this.init()
  },
  activated () {
    this.init()
  },
  methods: {
    init () {
      // 获取声部信息
      this.teamid = this.$route.query.id

      sessionStorage.setItem('resetCode', '2');
      // 获取所有声部
      getSoundTree({tenantId:1}).then(res => {
        if (res.code == 200) {
          this.soundList = res.data.rows;
          // // 生成动态的checkList
          for (let key in this.soundList) {
            this.$set(this.soundLists, key, [])
          }
          this.getSound();
        }

      })
    },
    changeList (e) {
    },
    getSound () {
      findMusicGroupSubjectInfo({ musicGroupId: this.teamid }).then(res => {
        if (res.code == 200) {
          this.activeSoundList = res.data.musicGroupSubjectPlans.map(item => {
            let fangshi = []
            res.data.musicGroupSubjectGoodsGroups.forEach(sub => {
              if (sub.subjectId == item.subjectId && sub.type == 'INSTRUMENT') {
                let FREE, LEASE, GROUP;
                let isFREE = false
                let isLEASE = false
                let isGROUP = false
                let depositFee = sub.depositFee
                let price = sub.price
                if (sub.kitGroupPurchaseTypeJson) {
                  let expectJson = JSON.parse(sub.kitGroupPurchaseTypeJson);
                  if (expectJson && expectJson.hasOwnProperty("FREE")) {
                    FREE = expectJson.FREE
                    isFREE = true

                  }
                  if (expectJson && expectJson.hasOwnProperty("LEASE")) {
                    LEASE = expectJson.LEASE
                    isLEASE = true;
                  }
                  if (expectJson && expectJson.hasOwnProperty("GROUP")) {
                    GROUP = expectJson.GROUP
                    isGROUP = true
                  }

                }
                fangshi.push({
                  shopName: sub.name,
                  id: sub.goodsIdList,
                  mode: {
                    'FREE': FREE || 0,
                    'GROUP': GROUP || 0,
                    'LEASE': LEASE || 0,
                    'depositFee': depositFee || 1500, // 保证金
                    'price': price,
                    'isFREE': isFREE,
                    'isGROUP': isGROUP,
                    'isLEASE': isLEASE,
                  }
                })
              }
            })
            let obj = { 'id': item.subjectId, 'sound': item.subName, 'jihua': item.expectedStudentNum, 'yuji': item.fee, 'zhonglei': [], 'fangshi': fangshi, 'fangshiprice': item.depositFee, 'jiaopu': '', 'type': 1, 'typeVisible': false, 'provideVisible': false, 'markVisible': false, 'goodsList': [], 'markList': [], 'markChioseList': [] }
            this.checkinlist(obj)
            return obj;
          })
          // 这里循环
          for (let z = 0; z < this.activeSoundList.length; z++) {
            for (let x = 0; x < this.soundList.length; x++) {
              let tempSound = this.soundList[x].subjects
              for (let y = 0; y < tempSound.length; y++) {
                if (tempSound[y].id == this.activeSoundList[z].id) {
                  tempSound.splice(y, 1)
                  y--
                }
              }
            }
          }

          // this.soundList.forEach((item, i) => {
          //   item.subjects.forEach((some, j) => {

          //     this.activeSoundList.forEach((sub, x) => {
          //       console.log(some.name + '-' + sub.sound)
          //       console.log(some.id + '-' + sub.id)
          //       if (sub.id == some.id) {
          //         console.log(1)
          //         item.subjects.splice(x, 1)
          //       }
          //     })
          //   })
          // })
          // 循环列表里的声部 拿取商品
          for (let i in this.activeSoundList) {
            for (let j in res.data.musicGroupSubjectGoodsGroups) {
              if (this.activeSoundList[i].id == res.data.musicGroupSubjectGoodsGroups[j].subjectId) {
                // 
                if (res.data.musicGroupSubjectGoodsGroups[j].type == 'INSTRUMENT') {
                  this.activeSoundList[i].zhonglei = this.activeSoundList[i].zhonglei.concat(res.data.musicGroupSubjectGoodsGroups[j].goodsIdList)
                  this.activeSoundList[i].zhonglei = this.activeSoundList[i].zhonglei.map(item => {
                    return parseInt(item);
                  })

                  this.activeSoundList[i].goodsList = this.activeSoundList[i].goodsList.concat(res.data.musicGroupSubjectGoodsGroups[j].goodsList);

                  // goodsList

                }
                // 拿辅件
                if (res.data.musicGroupSubjectGoodsGroups[j].type == 'ACCESSORIES') {
                  if (res.data.musicGroupSubjectGoodsGroups[j].goodsList.length >= 0) {
                    this.activeSoundList[i].markList ? this.activeSoundList[i].markList : this.activeSoundList[i].markList = []
                    let obj = {};
                    obj.goods = res.data.musicGroupSubjectGoodsGroups[j].goodsIdList.split(',');
                    obj.goods = obj.goods.map(item => {
                      return parseInt(item);
                    })
                    obj.name = res.data.musicGroupSubjectGoodsGroups[j].name
                    obj.price = res.data.musicGroupSubjectGoodsGroups[j].price;
                    this.activeSoundList[i].markList.push(obj);
                    // this.activeSoundList[i].markList.goodsList.goods = JSON.parse(res.data.musicGroupSubjectGoodsGroups[j].goodsIdList)
                    this.activeSoundList[i].markChioseList = this.activeSoundList[i].markChioseList.concat(res.data.musicGroupSubjectGoodsGroups[j].goodsList);
                  }

                }
              }
            }
          }
        }
      })
    },
    // 添加教辅
    addMark (row) {
      row.markList.push({ 'name': '', 'goods': [], 'price': '' })
    },
    removeMartItem (row, index) {
      row.markList.splice(index, 1);
    },
    saveInfo () {
      // 只提交第二页的数据
      let obj = {};
      let activeSoundList = this.activeSoundList
      // 添加商品以及教辅
      obj.musicGroupId = this.teamid
      obj.musicGroupStatus = 'PROGRESS';
      obj.musicGroupSubjectGoodsGroups = []
      obj.musicGroupSubjectPlans = []
      activeSoundList.forEach(active => {
        // 乐器
        active.zhonglei.forEach(zl => {
          let goodsItem = []
          active.goodsList.forEach(goods => {
            if (goods.id == zl) {
              goodsItem = goods
            }
          })
          let kitGroupPurchaseTypeJson = null
          let depositFee;
          let price
          active.fangshi.forEach(fs => {
            if (fs.id == zl) {
              depositFee = fs.mode.depositFee
              price = fs.mode.price
              let types = {}

              if (fs.mode.isFREE) {
                types.FREE = fs.mode.FREE
              }
              if (fs.mode.isGROUP) {
                types.GROUP = fs.mode.GROUP
              }
              if (fs.mode.isLEASE) {
                types.LEASE = fs.mode.LEASE
              }
              kitGroupPurchaseTypeJson = JSON.stringify(types)

              if (kitGroupPurchaseTypeJson.length <= 0) {
                kitGroupPurchaseTypeJson = null
              }
            }
          })
          let some = {
            subjectId: active.id,
            type: 'INSTRUMENT',
            goodsIdList: zl,
            name: goodsItem.name,
            kitGroupPurchaseTypeJson,
            depositFee,
            price
          }
          obj.musicGroupSubjectGoodsGroups.push(some);
        })
        // 遍历声部里的教辅
        active.markList.forEach(mark => {
          if (mark.goods.length >= 1) {
            let some = {
              subjectId: active.id,
              type: 'ACCESSORIES',
              goodsIdList: mark.goods.join(','),
              name: mark.name,
              price: mark.price
            }
            obj.musicGroupSubjectGoodsGroups.push(some);
          }
        })
        // 添加声部
        let item = {
          expectedStudentNum: active.jihua,
          fee: active.yuji,
          // kitGroupPurchaseType: active.fangshi,
          subName: active.sound,
          subjectId: active.id,
          depositFee: active.fangshiprice // depositFee  只有租赁才有
        }
        obj.musicGroupSubjectPlans.push(item);
      })
      // 发请求修改声部信息
      this.$confirm(`确定提交?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateSubjectInfo(obj).then(res => {
          if (res.code == 200) {
            this.$message.success('提交成功')
            // this.$router.push({ path: '/business/teamDetail' })
            this.getSound();
          }
        })
      }).catch(() => { })
    },
    // 根据声部id查询可选教辅
    chioseMark (row) {
      row.markVisible = true
      let id = row.id;
      getGoods({ 'subjectId': id, 'type': 'ACCESSORIES' }).then(res => {
        if (res.code == 200) {
          row.markChioseList = res.data;

        }
      })
    },    // 根据声部id获取可选乐器种类
    chioseType (row) {
      // 根据id查询可选类型种类
      let id = row.id;
      // 'subjectId': id, ' type'='INSTRUMENT'
      getGoods({ 'subjectId': id, 'type': 'INSTRUMENT' }).then(res => {
        if (res.code == 200) {
          row.goodsList = res.data;
        }
      })
    },
    // 勾选选中框处理数据,存储勾选过的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);
          }
        }
      }
    },
    // 添加声部
    // 点击添加按钮
    addListItem () {
      this.dialogTableVisible = true;
    },
    // 点击确认按钮生成表单
    generates () {
      this.dialogTableVisible = false;
    },
    // 设置乐器提供方式
    setGiveMode (row) {
      // goodsList
      if (row.zhonglei.length <= 0) {
        this.$message.error('请先选择乐器规格')
        return
      }
      // row.fangshi = []
      // row.zhonglei
      // row.goodsList
      if (row.fangshi[0] && row.fangshi[0].mode) {
      } else {
        for (let i in row.goodsList) {
          for (let j in row.zhonglei) {

            if (row.goodsList[i].id == row.zhonglei[j]) {
              console.log(row.goodsList[i].groupPurchasePrice)
              row.fangshi.push({
                shopName: row.goodsList[i].name,
                id: row.goodsList[i].id,
                mode: {
                  'FREE': 0,
                  'GROUP': 0,
                  'LEASE': 0,
                  'depositFee': 1500, // 保证金
                  'price': row.goodsList[i].groupPurchasePrice,// 团购价
                  'isFREE': false,
                  'isGROUP': false,
                  'isLEASE': false,
                }
              })
            }
          }
        }
      }

      this.editSound = row;
      this.reductionVisible = true
    },
    resetSoundItem () {
      for (let i in this.activeSoundList) {
        if (this.activeSoundList[i].id == this.editSound.id) {
          this.activeSoundList[i].id = this.editSound.id
          this.reductionVisible = false
        }
      }
    },
    groupInput (item) {
      if (item.mode.price - item.mode.GROUP < 0) {
        item.mode.GROUP = item.mode.price
      }
    },
    deposiInput (item) {
      if (item.mode.depositFee - item.mode.LEASE < 0) {
        item.mode.LEASE = item.mode.depositFee
      }

    },
    setDeposiInput (val, item) {
      item.mode.LEASE = 0;
    },
    changezhonglei (row) {
      row.fangshi = []
    },

  }, filters: {
    zhongleiFilter (val, list) {
      if (list && list.length <= 0) {
        return;
      }
      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)
          }
        }
      }
      if (arr.length > 0) {
        return arr.join(',')
      } else {
        return ''
      }

    },
    fangshiFilter (val, price) {
      let str = ''
      for (let i in val) {
        str += `${val[i].shopName}:`
        if (val[i].mode.isFREE) {
          str += `免费:减免金额${val[i].mode['FREE']}\n`
        }
        if (val[i].mode.isGROUP) {
          str += `团购:减免金额${val[i].mode['GROUP']}\n`
        }
        if (val[i].mode.isLEASE) {
          str += `租赁:${val[i].mode.depositFee},减免金额${val[i].mode['LEASE']}\n`
        }
      }
      // if (val == 'FREE') {
      //   str = '免费'
      //   return str;
      // } else if (val == 'GROUP') {
      //   str = '团购'
      //   return str
      // } else if (val == 'LEASE') {
      //   str = '借用'
      // }
      // str = str.substring(0, str.length - 1)
      return str
    },
    goodsFilter (val, list) {
      if (list && list.length <= 0) {
        return '';
      }
      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);
          }
        }
      }
      if (arr.length > 0) {
        return arr.join(',')
      } else {
        return ''
      }
    }
    // markFilter(val){
    //   for
    //   let name = val.name;
    //   let goods = val.goods.join(',');
    //   let price = val.price
    // }
  }, computed: {
    // 返回当前选中声部数量
    chioseSoundNum () {
      let num = 0;
      for (let key in this.soundList) {
        num += this.soundLists[key].length;

      }
      return num;
    }
  }

}
</script>
<style lang="scss">
.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;
  }
}
.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;
}
.btnWrapss {
  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;
  }
}
.reductionWrap {
  width: 100%;
  .lineWrap {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    .item {
      width: 25%;
      text-align: left;
    }
  }
}
</style>