dy-admin-manager/src/views/teamBuild/components/soundSetComponents/chioseMusic.vue

<template>
  <div>
    <el-form :model="item">
    <div v-for="(music, index) in item.chioseMusic" :key="index">
      <div class="chioseMusic">
        <div class="flexRow bigFlex">
          <div class="chioseWrap">
            <p class="title">可选乐器{{ index + 1 }}:</p>

            <el-select
              style="width: 180px"
              :disabled="basdisabled"
              v-model="music.musical"
              clearable
              @change="
                (val) => {
                  chioseMusic(val, music);
                }
              "
            >
              <el-option
                v-for="(item, index) in item.goodsList"
                :key="index"
                :label="item.name"
                :value="item.id"
                :disabled="checkDisabled(item)"
              >
              </el-option>
            </el-select>
          </div>
          <div class="chioseWrap">
            <p class="title">乐器提供方式:</p>
            <el-checkbox-group v-model="music.type" class="marginLeft10">
              <el-checkbox :disabled="basdisabled" label="GROUP"
                >团购</el-checkbox
              >
              <el-checkbox :disabled="basdisabled" label="LEASE"
                >租赁</el-checkbox
              >
              <el-checkbox :disabled="basdisabled" label="FREE"
                >免费</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="chioseWrap">
            <p
              class="title"
              v-show="
                music.type && music.type.length > 0
                  ? music.type.includes('GROUP')
                  : false
              "
            >
              团购价:
            </p>

            <div
              v-show="
                music.type && music.type.length > 0
                  ? music.type.includes('GROUP')
                  : false
              "
              style="width: 180px;margin-top: 20px;"
            >

                <el-form-item
                  :prop="'chioseMusic.'+index+'.groupPrice'"
                  :rules="[{ validator:(rule, value, callback)=> checkGroupPrice(rule, value, callback,music), trigger: 'blur' }]"
                >
                  <el-input type="number" v-model="music.groupPrice">
                    <template slot="append">元</template></el-input
                  >
                </el-form-item>

            </div>
          </div>
          <div class="chioseWrap">
            <p
              class="title"
              v-show="
                music.type && music.type.length > 0
                  ? music.type.includes('LEASE')
                  : false
              "
            >
              租赁押金:
            </p>
            <div
              v-show="
                music.type && music.type.length > 0
                  ? music.type.includes('LEASE')
                  : false
              "
              style="width: 180px"
            >
              <el-input
                type="number"
                v-model="music.borrowPrice"
                :disabled="basdisabled"
              >
                <template slot="append">元</template></el-input
              >
            </div>
            <i
              class="el-icon-circle-plus-outline marginLeft10 iconStyle"
              v-if="!basdisabled && index == 0"
              @click="addMusic"
              style="font-size: 20px; cursor: pointer"
            ></i>
            <i
              class="el-icon-remove-outline marginLeft10 iconStyle"
              v-if="item.chioseMusic.length > 1 && !basdisabled"
              @click="deleteMusic(music)"
              style="font-size: 20px; cursor: pointer"
            ></i>
          </div>
        </div>
        <div
          style="margin-top: 5px"
          v-show="
            music.type && music.type.length > 0
              ? music.type.includes('GROUP')
              : false
          "
        >
          <div class="flexRow">
            <p class="title">团购乐器减免课程费用:</p>
            <el-radio-group
              v-model="music.groupRemissionCourseFee"
              v-show="
                music.type && music.type.length > 0
                  ? music.type.includes('GROUP')
                  : false
              "
            >
              <el-radio :disabled="basdisabled" :label="true">是</el-radio>
              <el-radio :disabled="basdisabled" :label="false">否</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- <div class="flexRow"></div> -->
        <!-- <div class="flexRow">

        </div> -->
      </div>
      <el-divider></el-divider>
    </div>
    <!-- <div class="coreItemRow" v-if="!basdisabled">
      <p class="title"></p>
      <el-button
        type="info"
        plain
        style="width: 558px"

        icon="el-icon-plus"
        @click="addMusic"
        >新增可选乐器</el-button
      >
    </div> -->
  </el-form>
  </div>
</template>
<script>
export default {
  props: ["item", "basdisabled", "activeSoundList",'dividend'],
  data() {
    return {
      radio: "",
      goods: "",
    };
  },
  created() {},
  mounted() {
    console.log(this.dividend,'dividend')
    if ( this.item.chioseMusic.length < 1) {
      this.item.chioseMusic.push({
        musical: "",
        type: [],
        groupPrice: 0,
        borrowPrice: 1500,
        groupRemissionCourseFee: false,
      });
    }
  },
  methods: {
    chioseMusic(val, music) {
      this.item.goodsList.map((some, index) => {
        if (some.id == val) {
          music.groupPrice = some.groupPurchasePrice;
          music.groupPurchasePrice = some.groupPurchasePrice;
        }
      });
    },
    addMusic() {
      this.item.chioseMusic.push({
        musical: "",
        type: [],
        groupPrice: null,
        borrowPrice: 1500,
        groupRemissionCourseFee: 0,
      });
      this.$emit("lookMusic");
    },
    deleteMusic(music) {
      this.item.chioseMusic.forEach((element, index) => {
        if (element.musical == music.musical) {
          this.item.chioseMusic.splice(index, 1);
        }
      });
    },
    checkDisabled(item) {
      let flag = false;
      this.activeSoundList.forEach((musics) => {
        musics.chioseMusic.forEach((music) => {
          if (item.id == music.musical) {
            flag = true;
          }
        });
      });
      return flag;
    },
    changeFee(val, music) {
      this.$set(music, "groupRemissionCourseFee", val);
    },
    checkGroupPrice(rule, value, callback,music) {
      console.log(rule, value, this.dividend,music);
      if (!value) {
        callback(new Error("请输入团购价格"));
      } else if (value*1 >(music.groupPurchasePrice+this.dividend)) {
        callback(new Error(`团购金额不得大于${music.groupPurchasePrice+this.dividend}`));
      } else if (value*1 <(music.groupPurchasePrice)) {
        callback(new Error(`团购金额不得小于${music.groupPurchasePrice}`));
      }else {
        callback();
      }
    },
  },
  // watch: {
  //   item: {
  //     immediate: true,
  //     handler(newVal, oldVal) {
  //       console.log(newVal, oldVal);
  //       if (!oldVal) {
  //         // 第一次赋值的时候
  //         // 每当item 改变的时候 验证一下
  //         // 1.是不是每个选中的商品chioseMusic 都在goodsList
  //         // 2.是不是每个markChioseList 都在markList
  //         //
  //       }
  //     },
  //   },
  // },
};
</script>
<style lang="scss" scoped>
.iconStyle {
  color: #999;
}
.chioseMusic {
  width: 100%;
  // margin: 30px 0 0;
}
.coreItemRow {
  padding-left: 20px;
  height: 50px;
  line-height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
p {
  margin-right: 10px;
}
.title {
  width: 140px !important;
  text-align: right;
  margin-right: 10px;
}
.marginLeft10 {
  margin-left: 10px;
}
.flexRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 20px;
  margin-top: 10px;
  width: 100%;
  flex-wrap: wrap;
}
.bigFlex {
  margin-bottom: -10px;
}
.chioseWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;

}
:deep(.el-form-item) {
    margin-bottom: 0!important;
  }
</style>