dy-admin-manager/src/views/resetTeaming/modals/payTeamActive.vue

<template>
  <div class="teamCourseList">
    <p class="coreTitle">乐团小课  <el-button size="mini" icon="el-icon-plus" plain class="addBtn" @click="$listeners.create">新增活动</el-button></p>
    <el-table
    class="courseTable"
      :data="form.activeList"
      style="width: 100% !important; background: #f9f9f9"
      :header-cell-style="{ background: '#F9F9F9', color: '#444' }"
    >
      <el-table-column
        label="活动方案"
        prop="activityId"
        key="activityId"
        width="170px"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'activeList.' + scope.$index + '.activityId'"
            :rules="{
              required: true,
              message: '请选择活动方案',
              trigger: 'change',
            }"
          >
            <el-select
              style="width: 90% !important"
              v-model="form.activeList[scope.$index].activityId"
              placeholder="活动方案"
              clearable
              @change="courseItemChange(scope.row, scope.$index,form.activeList[scope.$index].activityId)"
              :disabled="isDisabled"
            >
              <el-option
                v-for="(item, key) in activeList"
                :key="key"
                :disabled="isOptionDisabled(item.id)"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="是否必选"
        prop="optionalFlag"
        key="optionalFlag"
        width="170px"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'activeList.' + scope.$index + '.optionalFlag'"
            :rules="{
              required: true,
              message: '请选择是必选',
              trigger: 'change',
            }"
          >
            <el-select
              style="width: 90% !important"
              v-model="form.activeList[scope.$index].optionalFlag"
              placeholder="是否必选"
              :disabled="isDisabled"
              clearable
            >
              <el-option
                v-for="(item, index) in boolOptionsOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="活动课程"

        width="170px"
      >
        <template slot-scope="scope">
           <el-input style="width: 90% !important" :disabled="true" v-model="form.activeList[scope.$index].vipGroupCategoryNames"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="课时数"
        prop="courseTotalMinuties"
        key="courseTotalMinuties"
        width="170px"
      >
        <template slot-scope="scope">
          <el-input style="width: 90% !important" :disabled="true" v-model="form.activeList[scope.$index].num"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="现价(元)"
        prop="actualAmount"
        key="actualAmount"
        width="170px"
      >
        <template slot="header">
          <p style="position: relative">
            现价(元)
            <el-tooltip placement="top" popper-class="mTooltip">
              <div slot="content">学生实际缴费金额</div>
              <i
                class="el-icon-question"
                style="font-size: 18px; color: #f56c6c"
              ></i>
            </el-tooltip>
          </p>
        </template>
        <template slot-scope="scope">
          <el-form-item
            :prop="'activeList.' + scope.$index + '.actualAmount'"
            :rules="{
              required: true,
              message: '请输入现价',
              trigger: 'blur',
            }"
          >
            <!-- $listeners.moneyChange -->
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.activeList[scope.$index].actualAmount"
              :controls="false"
              :precision="0"
              :min="0"
              @change="change"
              placeholder="请输入现价"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="originalAmount"
        key="originalAmount"
        label="原价(元)"
        width="170px"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'activeList.' + scope.$index + '.originalAmount'"
            :rules="{
              required: true,
              message: '请输入原价',
              trigger: 'blur',
            }"
          >
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.activeList[scope.$index].originalAmount"
              :controls="false"
              :precision="0"
              :min="0"
              placeholder="请输入原价"
              :disabled="true"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="close" key="close">
        <template slot-scope="scope">
          <div style="color: #fa6400; cursor: pointer"  @click="$listeners.remove && $listeners.remove(scope.$index)"  v-if="form.activeList.length > 1">
            <!--  v-if="form.length > 1" v-if="clearable" -->
            <i
              class="el-icon-error"
            ></i>
            删除
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--          v-if="!isCommon && $listeners.create"  @click="$listeners.create"-->

  </div>
</template>
<script>
import { courseType, boolOptions } from "@/constant";
import { objectToOptions } from "@/utils";
export default {
  props: ["form",'activeList'],
  data() {
    return {
      charges: [],
      clearable: false,
      isDisabled: false,
      courseUnitPriceSettingsByType: [],
     boolOptionsOptions: objectToOptions(boolOptions),
    };
  },
  methods: {
    courseItemChange(row, index,id) {
      this.activeList.forEach(element => {
        if(id == element.id){
          if(element.courseType == 'PRACTICE'){
              this.$set(this.form.activeList[index],'vipGroupCategoryNames','网管课')
          }else{
              this.$set(this.form.activeList[index],'vipGroupCategoryNames',element.vipGroupCategoryNames)
          }
          // this.$set(this.form.activeList[index],'name',element.name)
          this.$set(this.form.activeList[index],'num',element.maxCourseNum)

          this.$set(this.form.activeList[index],'actualAmount',element.marketPrice)
          this.$set(this.form.activeList[index],'originalAmount',element.originalPrice)
        }
      });
      console.log(row,index)
      // 修改活动名称  活动价格

      // this.$listeners.priceChange(item, index);
      // this.$refs.form.validateField(`form.${index}.courseTotalMinuties`);
    },
    isOptionDisabled(key) {

      const selected = this.form.activeList.map((item) => item.activityId);
      return selected.includes(key);
    },
    change() {},
  },
};
</script>
<style lang="scss" scoped>
@import "~@/views/resetTeaming/modals/pay.scss";
</style>