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

<template>
  <div class="teamCourseList">
    <p class="coreTitle">
      乐团课
      <el-form-item
        class="titleFormItem"
        label="加课方式"
        prop="leixing"
        :rules="[
          {
            required: true,
            message: '请选择加课方式',
            trigger: 'change'
          }
        ]"
      >
        <!-- &&courseViewType != 2 -->
        <el-radio-group style="width: 100%" v-model="form.leixing">
          <el-radio label="1">标准课程</el-radio>
          <el-radio label="2">自定义课程</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- !this.rowDetail&&       v-if="
                    isCommon &&
                    form.musicGroupOrganizationCourseSettingId != 0 &&
                    courseViewType != 2
                  "-->
      <el-form-item
        class="titleFormItem"
        v-if="form.leixing == 1"
        label="收费标准"
        prop="musicGroupOrganizationCourseSettingId"
        :rules="[
          {
            required: true,
            message: '请选择收费标准',
            trigger: 'change'
          }
        ]"
      >
        <el-select
          style="width: 100% !important"
          v-model="form.musicGroupOrganizationCourseSettingId"
          placeholder="请选择收费标准"
          size="mini"
        >
          <el-option
            v-for="item in charges"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否展示"
        prop="isShowMusicCourseForPay"
        v-if="allCourseCurrentPrice == 0"
        class="titleFormItem"
      >
        <el-select
          style="width: 100% !important"
          v-model="form.isShowMusicCourseForPay"
          placeholder="请选择是否展示乐团费用"
          size="mini"
        >
          <el-option label="是" :value="true"> </el-option>
          <el-option label="否" :value="false"> </el-option>
        </el-select>
      </el-form-item>
      <el-button
        icon="el-icon-plus"
        size="mini"
        plain
        class="addBtn"
        @click="$listeners.create"
        v-if="!isDisabled"
        >新增课程类型</el-button
      >
    </p>
    <el-table
      class="courseTable"
      :data="form.eclass"
      style="width: 100% !important; background: #f9f9f9"
      :header-cell-style="{ background: '#F9F9F9', color: '#444' }"
    >
      <el-table-column
        label="课程类型"
        prop="courseType"
        key="courseType"
        width="170px"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'eclass.' + scope.$index + '.courseType'"
            :rules="{
              required: true,
              message: '请选择课程类型',
              trigger: 'change'
            }"
          >
            <el-select
              style="width: 90% !important"
              v-model="form.eclass[scope.$index].courseType"
              placeholder="课程类型"
              clearable
              @change="courseItemChange(scope.row, scope.$index)"
              :disabled="isDisabled"
            >
              <el-option
                v-for="(item, key) in courseUnitPriceSettingsByType"
                :key="key"
                :disabled="isOptionDisabled(key)"
                :label="courseType[key]"
                :value="key"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="课程时长(分钟)"
        prop="courseTotalMinuties"
        key="courseTotalMinuties"
        width="170px"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'eclass.' + scope.$index + '.courseTotalMinuties'"
            :rules="[
              {
                required: true,
                message: '请输入课程时长',
                trigger: 'blur'
              }
            ]"
          >
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.eclass[scope.$index].courseTotalMinuties"
              :controls="false"
              :precision="0"
              :min="0"
              :disabled="isDisabled"
              @change="$listeners.priceChange(scope.row, scope.$index)"
              placeholder="课程时长"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="售价(元)"
        prop="courseCurrentPrice"
        key="courseCurrentPrice"
        width="170px"
      >
        <template slot="header">
          <p style="">
            售价(元)
            <el-tooltip placement="top" popper-class="mTooltip">
              <div slot="content">学生实际缴费金额</div>
              <i
                class="el-icon-question"
                style="
                  font-size: 18px;
                  color: #f56c6c;
                  top: 2px;
                  position: relative;
                "
              ></i>
            </el-tooltip>
          </p>
        </template>
        <template slot-scope="scope">
          <el-form-item
            :prop="'eclass.' + scope.$index + '.courseCurrentPrice'"
            :rules="{
              required: true,
              message: '请输入售价',
              trigger: 'blur'
            }"
          >
            <!-- $listeners.moneyChange -->
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.eclass[scope.$index].courseCurrentPrice"
              :controls="false"
              :precision="0"
              :min="0"
              @change="change"
              placeholder="请输入售价"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="courseOriginalPrice"
        key="courseOriginalPrice"
        label="原价(元)"
        width="170px"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'eclass.' + scope.$index + '.courseOriginalPrice'"
            :rules="{
              required: true,
              message: '请输入原价',
              trigger: 'blur'
            }"
          >
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.eclass[scope.$index].courseOriginalPrice"
              :controls="false"
              :precision="0"
              :min="0"
              :disabled="true"
              placeholder="请输入原价"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="close" key="close">
        <template slot-scope="scope">
          <div
            style="color: #fa6400; cursor: pointer"
            v-if="!isDisabled && form.eclass.length > 1"
            @click="$listeners.remove && $listeners.remove(scope.$index)"
          >
            <!--  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"  -->
  </div>
</template>
<script>
import { courseType, boolOptions } from "@/constant";
import { objectToOptions } from "@/utils";
export default {
  props: ["form", "charges", "courseUnitPriceSettingsByType"],
  data() {
    return {
      clearable: false,

      courseType,
      courseTypeOptions: this.courseUnitPriceSettingsByType,
      boolOptionsOptions: objectToOptions(boolOptions),
      showisMusicGroupFee: false
    };
  },
  mounted() {
    console.log(
      this.courseUnitPriceSettingsByType,
      "courseUnitPriceSettingsByType"
    );
  },
  methods: {
    courseItemChange(row, index) {
      if (this.form.leixing == 2) {
        console.log(row, "courseItemChange", index);
        const course = this.courseUnitPriceSettingsByType[row.courseType];
        console.log(course, "course");
        this.form.eclass[index].unitPrice = course.unitPrice || 0;
      }
    },
    priceChange(row, index) {},
    isOptionDisabled(key) {
      const selected = this.form.eclass.map(item => item.courseType);
      return selected.includes(key);
    },
    change() {}
  },
  computed: {
    isDisabled() {
      return this.form.leixing == 1;
    },
    allCourseCurrentPrice() {
      let price = 0;
      this.form.eclass.forEach(element => {
        price += element.courseCurrentPrice;
      });
      if (price > 0) {
        this.form.isShowMusicCourseForPay = true;
      }
      return price;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/views/resetTeaming/modals/pay.scss";
</style>