123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283 |
- <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() {},
- methods: {
- courseItemChange(row, index) {},
- 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>
|