dy-admin-manager/src/views/resetTeaming/modals/extra-class.vue

<template>
  <el-form
    ref="form"
    :model="list"
  >
    <el-table
      :data="form"
      style="width: 100%;text-alogn: center;"
    >
      <el-table-column
        label="课程类型"
        prop="courseType"
        key="courseType"
        width="150">
        <template slot-scope="scope">
          <el-form-item
            :prop="'form.' + scope.$index + '.courseType'"
            :rules="{ required: true, message: '请选择课程类型', trigger: 'change' }"
          >
            <el-select
              style="width: 90%!important;"
              size="small"
              v-model="list.form[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="是否可选"
        v-if="isCommon"
        prop="isStudentOptional"
        key="isStudentOptional"
        width="150">
        <template slot-scope="scope">
          <el-form-item
            :prop="'form.' + scope.$index + '.isStudentOptional'"
            :rules="{ required: true, message: '请选择是否可选', trigger: 'change' }"
          >
            <el-select
              style="width: 90%!important;"
              size="small"
              v-model="list.form[scope.$index].isStudentOptional"
              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="courseTotalMinuties"
        key="courseTotalMinuties"
        width="150">
        <template slot-scope="scope">
          <el-form-item
            :prop="'form.' + scope.$index + '.courseTotalMinuties'"
            :rules="[
              { required: true, message: '请输入课程时长', trigger: 'blur' },
            ]"
          >
            <el-input-number
              size="small"
              style="width: 90%!important;"
              class="number-input"
              v-model="list.form[scope.$index].courseTotalMinuties"
              :controls="false"
              :precision="0"
              @change="$listeners.priceChange(scope.row, scope.$index)"
              :min="0"
              :disabled="isDisabled"
              placeholder="课程时长"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="现价(元)"
        prop="courseCurrentPrice"
        key="courseCurrentPrice"
        width="150">
        <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="'form.' + scope.$index + '.courseCurrentPrice'"
            :rules="{ required: true, message: '请输入现价', trigger: 'blur' }"
          >
            <!-- $listeners.moneyChange -->
            <el-input-number
              size="small"
              style="width: 90%!important;"
              class="number-input"
              v-model="list.form[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="原价(元)">
        <template slot-scope="scope">
          <el-form-item
            :prop="'form.' + scope.$index + '.courseOriginalPrice'"
            :rules="{ required: true, message: '请输入原价', trigger: 'blur' }"
          >
            <el-input-number
              size="small"
              style="width: 90%!important;"
              class="number-input"
              v-model="list.form[scope.$index].courseOriginalPrice"
              :controls="false"
              :precision="0"
              :min="0"
              placeholder="请输入原价"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        v-if="clearable"
        prop="close"
        key="close"
        width="60">
        <template slot-scope="scope">
          <i
            v-if="form.length > 1"
            @click="$listeners.remove && $listeners.remove(scope.$index)"
            class="el-icon-circle-close"
            style="margin-bottom: 24px;cursor: pointer;"
          ></i>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      icon="el-icon-circle-plus-outline"
      plain
      v-if="!isCommon && $listeners.create"
      type="info"
      size="small"
      style="width: 100%;margin: 20px 0;"
      @click="$listeners.create"
    >新增课程类型</el-button>
  </el-form>
</template>
<script>
import { courseType, boolOptions } from '@/constant'
import { objectToOptions } from '@/utils'
import { classTimeList, array2object } from '@/utils/searchArray'
import numeral from 'numeral'
import MusicStore from '@/views/resetTeaming/store'
export default {
  props: ['form', 'isCommon', 'isDisabled', 'isUserType', 'courseUnitPriceSettingsByType', 'clearable'],
  data() {
    return {
      courseType,
      courseTypeOptions: this.courseUnitPriceSettingsByType,
      boolOptionsOptions: objectToOptions(boolOptions),
    }
  },
  computed: {
    list() {
      return {
        form: this.form
      }
    },
    classTimeList() {
      return array2object(classTimeList)
    },
  },
  methods: {
    change(val) {
      this.$listeners.moneyChange()
    },
    isOptionDisabled(key) {
      const selected = this.form.map(item => item.courseType)
      return selected.includes(key)
    },
    getOldMoney(index) {
      return numeral(this.list.form[index].courseTotalMinuties * this.list.form[index].unitPrice).format('0,0.00')
    },
    courseItemChange(item, index) {
      this.$listeners.priceChange(item, index)
      this.$refs.form.validateField(`form.${index}.courseTotalMinuties`)
    },
    validatorCourseTotalMinuties(index) {
      return (rule, value, callback) => {
        const { courseType } = this.list.form[index]
        if (courseType && value > 1 && this.classTimeList[courseType] &&  value < this.classTimeList[courseType]) {
          callback(new Error(`单节课不得少于${this.classTimeList[courseType]}分钟`))
          return
        }
        callback()
      }
    }
  },
}
</script>
<style lang="less" scoped>
.number-input{
  /deep/ .el-input__inner {
    text-align: left;
  }
}
</style>