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

<template>
  <div class="teamCourseList">
    <p class="coreTitle">团练宝<span class="dot"></span></p>
    <el-table
      :data="form.eclass"
      style="width: 100% !important; background: #f9f9f9"
      :header-cell-style="{ background: '#F9F9F9', color: '#444' }"
    >
      <el-table-column
       width="170px"
        label="会员类型"
        prop="memberRankSettingId"
        key="memberRankSettingId"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'eclass.' + scope.$index + '.memberRankSettingId'"
            :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="optionalFlag" key="optionalFlag"  width="170px">
        <template slot-scope="scope">
          <el-form-item
            :prop="'eclass.' + scope.$index + '.optionalFlag'"
            :rules="{
              required: true,
              message: '请选择是否必选',
              trigger: 'change',
            }"
          >
            <el-select
              style="width: 90% !important"
              v-model="form.eclass[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="会员周期" prop="periodEnum" key="periodEnum"  width="170px">
        <template slot-scope="scope">
          <el-form-item
            :prop="'eclass.' + scope.$index + '.periodEnum'"
            :rules="[
              {
                required: true,
                message: '请选择会员周期',
                trigger: 'blur',
              },
            ]"
          >
            <!--    @change="
                            $listeners.priceChange(scope.row, scope.$index)
                          " -->
            <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"
              placeholder="课程时长"
            />
          </el-form-item>
        </template>
      </el-table-column>
         <el-table-column label="会员数量" prop="periodEnum" key="periodEnum"  width="170px">
        <template slot-scope="scope">
          <el-form-item
            :prop="'eclass.' + scope.$index + '.periodEnum'"
            :rules="[
              {
                required: true,
                message: '请选择会员数量',
                trigger: 'blur',
              },
            ]"
          >
            <!--    @change="
                            $listeners.priceChange(scope.row, scope.$index)
                          " -->
            <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"
              placeholder="会员数量"
            />
          </el-form-item>
        </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="'eclass.' + scope.$index + '.actualAmount'"
            :rules="{
              required: true,
              message: '请输入现价',
              trigger: 'blur',
            }"
          >
            <!-- $listeners.moneyChange -->
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.eclass[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="'eclass.' + scope.$index + '.originalAmount'"
            :rules="{
              required: true,
              message: '请输入原价',
              trigger: 'blur',
            }"
          >
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.eclass[scope.$index].originalAmount"
              :controls="false"
              :precision="0"
              :min="0"
              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="form.length > 1" v-if="clearable" -->
            <i
              @click="$listeners.remove && $listeners.remove(scope.$index)"
              class="el-icon-error"
              style="margin-bottom: 24px"
            ></i>
            删除
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--          v-if="!isCommon && $listeners.create"  @click="$listeners.create"-->
    <!-- <el-button icon="el-icon-plus" plain class="addBtn">新增课程类型</el-button> -->
  </div>
</template>
<script>
export default {
  props: ["form"],
  data() {
    return {
      charges: [],
      clearable: false,
      isDisabled: false,
      courseUnitPriceSettingsByType: [],
      boolOptionsOptions: [],
    };
  },
  methods: {
    courseItemChange(row, index) {},
    priceChange(row, index) {},
    isOptionDisabled(key) {},
    change() {},
  },
};
</script>
<style lang="scss" scoped>
@import "~@/views/resetTeaming/modals/pay.scss";
</style>