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="课程类型"
        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
            >
              <el-option
                v-for="(item, index) in courseTypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="是否可选"
        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="是否可选"
              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="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"
              :min="1"
              placeholder="课程时长"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="现价(元)"
        width="120">
      </el-table-column>
      <el-table-column
        label="原价(元)"
        width="100">
        <template slot-scope="scope">
          {{ getOldMoney(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column
        width="60">
        <template slot-scope="scope">
          <i v-if="form.length > 1" @click="$listeners.remove(scope.$index)" class="el-icon-circle-close"></i>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      icon="el-icon-circle-plus-outline"
      plain
      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 numeral from 'numeral'
export default {
  props: ['form'],
  data() {
    return {
      courseTypeOptions: objectToOptions(courseType),
      boolOptionsOptions: objectToOptions(boolOptions),
    }
  },
  computed: {
    list() {
      return {
        form: this.form
      }
    }
  },
  methods: {
    getOldMoney(index) {
      return numeral(this.list.form[index].courseTotalMinuties * this.list.form[index].unitPrice).format('0,0.00')
    }
  },
}
</script>
<style lang="less" scoped>
.number-input{
  /deep/ .el-input__inner {
    text-align: left;
  }
}
</style>