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

<template>
  <el-form
    ref="form"
    :model="list"
  >
    <el-table
      :data="form"
      style="width: 100%;text-alogn: center;"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column
        label="学员姓名"
        prop="username"></el-table-column>
      <el-table-column
        label="手机号码"
        prop="phone"></el-table-column>
      <el-table-column
        label="课程类型"
        prop="courseType"
        key="courseType"
        width="150">
        <template slot-scope="scope">
          {{courseType[list.form[scope.$index].courseType]}}
        </template>
      </el-table-column>
      <el-table-column
        label="课程时长(分钟)"
        prop="courseTime"
        width="130"></el-table-column>
      <el-table-column
        label="现价(元)"
        prop="courseCurrentPrice"
        key="courseCurrentPrice"
        width="140">
        <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
          class="tableItem"
            :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"
              placeholder="请输入现价"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="courseOriginalPrice"
        key="courseOriginalPrice"
        label="原价(元)"
        width="140">
        <template slot-scope="scope">
          <el-form-item
            class="tableItem"
            :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 && $listeners.remove"
        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: {
    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')
    },
    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;
  }
}
.tableItem {
  margin-bottom: 0!important;
}
</style>