dy-admin-manager/src/views/teamBuild/modals/accessories.vue

<template>
  <div>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <el-checkbox-group class="options" v-if="groupOptions.length" v-model="checkeds" @change="optionChange">
      <el-checkbox class="option" v-for="item in groupOptions" :label="item.id" :key="item.id">
        <strong>
          <span>{{item.name}}</span>
          <span>{{item.price}}元</span>
        </strong>
        <p v-for="sub in item.subs" :key="sub">{{sub}}</p>
      </el-checkbox>
    </el-checkbox-group>
    <el-checkbox-group class="options" v-else v-model="checkeds" @change="optionChange">
      <el-checkbox class="option" v-for="item in list" :label="item.id" :key="item.id">
        <strong>
          <span>{{item.name}}</span>
          <span>{{item.groupPurchasePrice > 0 ? item.groupPurchasePrice + ' 元' : '免费'}}</span>
        </strong>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
  export default {
    props: ['list', 'groupList'],
    data() {
      return {
        type: 'list',
        checkAll: false,
        checkeds: [],
        accessoriesByid: {},
        groupListById: {},
        selectMoney: 0,
        isIndeterminate: false
      };
    },
    watch: {
      checkeds(vals) {
        const optionsById = this.type === 'list' ? this.accessoriesByid : this.groupListById
        let selectMoney = 0
        if (this.type === 'list') {
          for (const item of vals) {
            const activeItem = this.accessoriesByid[item]
            if (activeItem) {
              selectMoney += parseFloat(activeItem.groupPurchasePrice)
            }
          }
        } else {
          for (const item of vals) {
            const activeItem = this.groupListById[item]
            if (activeItem) {
              selectMoney += parseFloat(activeItem.price)
            }
          }
        }
        let formatids = []
        if (this.type !== 'list') {
          for (const item of vals) {
            const active = this.groupListById[item]
            if (active) {
              const { goodsList } = this.groupListById[item]
              formatids = formatids.concat((goodsList || []).map(goods => goods.id))
            }
          }
        }
        this.$listeners.change(formatids, selectMoney)
      }
    },
    mounted() {
      this.$nextTick(() => {
        const accessoriesByid = {}
        for (const item of this.list) {
          accessoriesByid[item.id] = item
        }
        const groupListById = {}
        for (const item of this.groupList) {
          groupListById[item.id] = item
        }
        this.accessoriesByid = accessoriesByid
        this.groupListById = groupListById
      })
    },
    computed: {
      groupOptions() {
        console.log(this.groupList)
        const options = this.groupList.map(item => ({
          name: item.name,
          price:item.price,
          id: item.id,
          subs: item.goodsList ? item.goodsList.map(sub => sub.name) : []
        }))
        if (options.length) {
          this.type = 'group'
        }
        return options
      }
    },
    methods: {
      handleCheckAllChange(val) {
        const options = this.type === 'list' ? this.list : this.groupOptions
        const allids = options.map(item => item.id)
        this.checkeds = val ? allids : [];
        this.isIndeterminate = false;
      },
      optionChange(value) {
        const options = this.type === 'list' ? this.list : this.groupOptions
        const checkedCount = value.length;
        this.checkAll = checkedCount === options.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < options.length;
      }
    }
  };
</script>
<style lang="less" scoped>
  .options {
    display: block;
    .option{
      display: flex;
      width: 100%;
      margin-top: 10px;
      /deep/ .el-checkbox__label{
        flex: 1;
        >strong{
          display: flex;
          justify-content: space-between;
          align-items: center;
          >span:last-child{
            color: red;
          }
        }
        >p{
          line-height: 1.8;
          color: #606266;
        }
      }
    }
  }
</style>