|
@@ -1,13 +1,15 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<el-form :model="form"
|
|
|
- :rules="rules"
|
|
|
- ref="ruleForm">
|
|
|
+ label-suffix=": "
|
|
|
+ ref="form">
|
|
|
<el-form-item label="所属分部"
|
|
|
prop="organId"
|
|
|
+ :rules="[{required: true, message: '请选择所属分部', trigger: 'change'}]"
|
|
|
:label-width="formLabelWidth">
|
|
|
<el-select v-model.trim="form.organId"
|
|
|
clearable
|
|
|
+ placeholder="请选择所属分部"
|
|
|
filterable>
|
|
|
<el-option v-for="(item, index) in branchList"
|
|
|
:key="index"
|
|
@@ -16,11 +18,13 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="收费类型"
|
|
|
+ <el-form-item label="乐团模式"
|
|
|
prop="chargeTypeId"
|
|
|
+ :rules="[{required: true, message: '请选择乐团模式', trigger: 'change'}]"
|
|
|
:label-width="formLabelWidth">
|
|
|
<el-select v-model.trim="form.chargeTypeId"
|
|
|
clearable
|
|
|
+ placeholder="请选择乐团模式"
|
|
|
filterable>
|
|
|
<el-option v-for="(item, index) in typesList"
|
|
|
:key="index"
|
|
@@ -29,84 +33,104 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="收费方式名称"
|
|
|
+ prop="name"
|
|
|
+ :rules="[{required: true, message: '请输入收费方式名称', trigger: 'blur'}]"
|
|
|
+ :label-width="formLabelWidth">
|
|
|
+ <el-input v-model.trim="form.name"
|
|
|
+ placeholder="请输入收费方式名称"
|
|
|
+ clearable>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
<div class="class-items">
|
|
|
<div class="items">
|
|
|
<div class="items-header">
|
|
|
<span class="name">课程类型</span>
|
|
|
- <span class="name">是否免费</span>
|
|
|
+ <span class="name">是否可选</span>
|
|
|
<span class="name">课程总时长(分钟)</span>
|
|
|
- <span class="name">每分钟费用(元)</span>
|
|
|
- <span class="name">课程费用(元)</span>
|
|
|
+ <span class="name">现价(元)</span>
|
|
|
+ <span class="name">原价(元)</span>
|
|
|
<span class="ctrl"></span>
|
|
|
</div>
|
|
|
- <div class="item" v-for="(item, index) in items" :key="index">
|
|
|
- <el-form-item prop="organId">
|
|
|
- <el-select v-model.trim="item.type"
|
|
|
+ <div class="item" v-for="(item, index) in form.details" :key="index">
|
|
|
+ <el-form-item
|
|
|
+ :prop="`details.${index}.courseType`"
|
|
|
+ :rules="[{required: true, message: '请选择课程类型', trigger: 'change'}]"
|
|
|
+ >
|
|
|
+ <el-select v-model.trim="item.courseType"
|
|
|
size="mini"
|
|
|
clearable
|
|
|
filterable>
|
|
|
- <el-option label="1"
|
|
|
- value="1">
|
|
|
- </el-option>
|
|
|
- <el-option label="2"
|
|
|
- value="2">
|
|
|
+ <el-option v-for="item in courseTypeOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :disabled="isOptionDisabled(item.value)"
|
|
|
+ :value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="organId">
|
|
|
- <el-select v-model.trim="item.free"
|
|
|
+ <el-form-item
|
|
|
+ :prop="`details.${index}.isStudentOptional`"
|
|
|
+ :rules="[{required: true, message: '请选择是否可选', trigger: 'change'}]"
|
|
|
+ >
|
|
|
+ <el-select v-model.trim="item.isStudentOptional"
|
|
|
size="mini"
|
|
|
clearable
|
|
|
filterable>
|
|
|
- <el-option label="1"
|
|
|
- value="1">
|
|
|
- </el-option>
|
|
|
- <el-option label="2"
|
|
|
- value="2">
|
|
|
+ <el-option v-for="item in boolOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="organId">
|
|
|
- <el-select v-model.trim="item.time"
|
|
|
- size="mini"
|
|
|
- clearable
|
|
|
- filterable>
|
|
|
- <el-option label="1"
|
|
|
- value="1">
|
|
|
- </el-option>
|
|
|
- <el-option label="2"
|
|
|
- value="2">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
+ <el-form-item
|
|
|
+ :prop="`details.${index}.courseTotalMinuties`"
|
|
|
+ :rules="[{required: true, message: '请输入课程总时长', trigger: 'blur'}]"
|
|
|
+ >
|
|
|
+ <el-input-number
|
|
|
+ size="mini"
|
|
|
+ style="width: 90%!important;"
|
|
|
+ class="number-input"
|
|
|
+ v-model="item.courseTotalMinuties"
|
|
|
+ :controls="false"
|
|
|
+ :precision="0"
|
|
|
+ :min="1"
|
|
|
+ placeholder="课程总时长"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="organId">
|
|
|
- <el-select v-model.trim="item.fee"
|
|
|
- size="mini"
|
|
|
- clearable
|
|
|
- filterable>
|
|
|
- <el-option label="1"
|
|
|
- value="1">
|
|
|
- </el-option>
|
|
|
- <el-option label="2"
|
|
|
- value="2">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
+ <el-form-item
|
|
|
+ :prop="`details.${index}.courseOriginalPrice`"
|
|
|
+ :rules="[{required: true, message: '请输入课程原价', trigger: 'blur'}]"
|
|
|
+ >
|
|
|
+ <el-input-number
|
|
|
+ size="mini"
|
|
|
+ style="width: 90%!important;"
|
|
|
+ class="number-input"
|
|
|
+ v-model="item.courseOriginalPrice"
|
|
|
+ :controls="false"
|
|
|
+ :precision="0"
|
|
|
+ :min="1"
|
|
|
+ placeholder="课程原价"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="organId">
|
|
|
- <el-select v-model.trim="item.allfee"
|
|
|
- size="mini"
|
|
|
- clearable
|
|
|
- filterable>
|
|
|
- <el-option label="1"
|
|
|
- value="1">
|
|
|
- </el-option>
|
|
|
- <el-option label="2"
|
|
|
- value="2">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
+ <el-form-item
|
|
|
+ :prop="`details.${index}.courseCurrentPrice`"
|
|
|
+ :rules="[{required: true, message: '请输入课程现价', trigger: 'blur'}]"
|
|
|
+ >
|
|
|
+ <el-input-number
|
|
|
+ size="mini"
|
|
|
+ style="width: 90%!important;"
|
|
|
+ class="number-input"
|
|
|
+ v-model="item.courseCurrentPrice"
|
|
|
+ :controls="false"
|
|
|
+ :precision="0"
|
|
|
+ :min="1"
|
|
|
+ placeholder="课程现价"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<span class="ctrl">
|
|
|
- <i @click="removeItem(index)" v-if="index !== 0" class="el-icon-circle-close" />
|
|
|
+ <i @click="removeItem(index)" v-if="form.details.length > 1" class="el-icon-circle-close" />
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -118,56 +142,140 @@
|
|
|
@click="addItem"
|
|
|
>新增课程类型</el-button>
|
|
|
</div>
|
|
|
- <el-form-item label="课程费用"
|
|
|
- prop="courseFee"
|
|
|
- :label-width="formLabelWidth">
|
|
|
- <el-input type="number"
|
|
|
- @mousewheel.native.prevent
|
|
|
- v-model.trim="form.courseFee"
|
|
|
- autocomplete="off"></el-input>
|
|
|
- </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="原价"
|
|
|
+ prop="totalOriginalPrice"
|
|
|
+ label-width="50px">
|
|
|
+ {{ totalOriginalPrice | moneyFormat}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="现价"
|
|
|
+ prop="totalCurrentPrice"
|
|
|
+ label-width="50px">
|
|
|
+ {{ totalCurrentPrice | moneyFormat}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-form>
|
|
|
<span slot="footer"
|
|
|
class="dialog-footer">
|
|
|
- <el-button @click="chargeStatus = false">取 消</el-button>
|
|
|
- <el-button @click="onTypesSubmit('ruleForm')"
|
|
|
+ <el-button @click="$listeners.close">取 消</el-button>
|
|
|
+ <el-button @click="submit"
|
|
|
type="primary">确 定</el-button>
|
|
|
</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
const initItem = {
|
|
|
- type: '',
|
|
|
- free: '',
|
|
|
- time: '',
|
|
|
- fee: '',
|
|
|
- allfee: '',
|
|
|
+ courseType: '',
|
|
|
+ isStudentOptional: '',
|
|
|
+ courseTotalMinuties: '',
|
|
|
+ courseOriginalPrice: '',
|
|
|
+ courseCurrentPrice: '',
|
|
|
}
|
|
|
+import { musicGroupOrganizationCourseSettingsAdd, musicGroupOrganizationCourseSettingsUpdate } from '@/api/specialSetting'
|
|
|
+import { classTimeList } from '@/utils/searchArray'
|
|
|
+import { courseType, boolOptions } from '@/constant'
|
|
|
+import { objectToOptions } from '@/utils'
|
|
|
+import numeral from 'numeral'
|
|
|
+
|
|
|
+const plusNum = (items = [], key) => {
|
|
|
+ let money = 0
|
|
|
+ const _items = items.filter(item => item.isStudentOptional < 1)
|
|
|
+ for (const item of _items) {
|
|
|
+ money += parseFloat(item[key] || 0).toFixed(2) || 0
|
|
|
+ }
|
|
|
+ return money
|
|
|
+}
|
|
|
+
|
|
|
+const initForm = {
|
|
|
+ organId: '',
|
|
|
+ classTimeList: '',
|
|
|
+ chargeTypeId: '',
|
|
|
+ name: '',
|
|
|
+ details: [{}],
|
|
|
+}
|
|
|
+
|
|
|
export default {
|
|
|
+ name: 'modal-chargesForm',
|
|
|
+ props: ['branchList', 'typesList', 'rowDetail'],
|
|
|
data() {
|
|
|
return {
|
|
|
- form: {},
|
|
|
- items: [],
|
|
|
- formLabelWidth: '100px',
|
|
|
+ form: {...initForm},
|
|
|
+ formLabelWidth: '120px',
|
|
|
+ courseTypeOptions: objectToOptions(courseType),
|
|
|
+ boolOptions: objectToOptions(boolOptions),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ totalOriginalPrice() {
|
|
|
+ return plusNum(this.form.details, 'courseOriginalPrice')
|
|
|
+ },
|
|
|
+ totalCurrentPrice() {
|
|
|
+ return plusNum(this.form.details, 'courseCurrentPrice')
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- items() {
|
|
|
- console.log(this.items)
|
|
|
+ rowDetail() {
|
|
|
+ console.log({...this.rowDetail})
|
|
|
+ this.updateForm()
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.items.push({})
|
|
|
+ this.updateForm()
|
|
|
},
|
|
|
methods: {
|
|
|
+ updateForm() {
|
|
|
+ if (this.rowDetail) {
|
|
|
+ const { organId, classTimeList, chargeTypeId, name, details } = this.rowDetail
|
|
|
+ this.form = {
|
|
|
+ organId,
|
|
|
+ classTimeList,
|
|
|
+ chargeTypeId,
|
|
|
+ name,
|
|
|
+ details: details.map(item => ({
|
|
|
+ ...item,
|
|
|
+ isStudentOptional: String(item.isStudentOptional)
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.form = {...initForm}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isOptionDisabled(key) {
|
|
|
+ const selected = this.form.details.map(item => item.courseType)
|
|
|
+ return selected.includes(key)
|
|
|
+ },
|
|
|
addItem() {
|
|
|
- const _items = [...this.items, {}]
|
|
|
- this.items = _items
|
|
|
+ const _items = [...this.form.details, {}]
|
|
|
+ this.form.details = _items
|
|
|
},
|
|
|
removeItem(index) {
|
|
|
- const _items = [...this.items]
|
|
|
+ const _items = [...this.form.details]
|
|
|
_items[index] = null
|
|
|
- this.items = _items.filter(item => !!item)
|
|
|
+ this.form.details = _items.filter(item => !!item)
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ this.$refs.form.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ try {
|
|
|
+ if (this.rowDetail) {
|
|
|
+ const res = await musicGroupOrganizationCourseSettingsUpdate({
|
|
|
+ id: this.rowDetail.id,
|
|
|
+ ...this.form
|
|
|
+ })
|
|
|
+ this.$message.success('更新成功')
|
|
|
+ } else {
|
|
|
+ const res = await musicGroupOrganizationCourseSettingsAdd(this.form)
|
|
|
+ this.$message.success('提交成功')
|
|
|
+ }
|
|
|
+ this.$listeners.close()
|
|
|
+ this.$listeners.submited()
|
|
|
+ } catch (error) {}
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
}
|
|
@@ -204,9 +312,6 @@ export default {
|
|
|
width: 100%;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
- .class-items{
|
|
|
- padding-left: 30px;
|
|
|
- }
|
|
|
.ctrl{
|
|
|
display: flex;
|
|
|
align-items: center;
|