|
|
@@ -1,67 +1,187 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-form
|
|
|
- label-width="160px"
|
|
|
- ref="form"
|
|
|
- :model="form"
|
|
|
- label-suffix=": "
|
|
|
- >
|
|
|
+ <el-alert
|
|
|
+ title="基础信息设置"
|
|
|
+ :closable="false"
|
|
|
+ class="alert"
|
|
|
+ type="info">
|
|
|
+ </el-alert>
|
|
|
+ <userBaseinfo
|
|
|
+ :form.sync="form"
|
|
|
+ :isCommon="isCommon"
|
|
|
+ :isUserType="isUserType"
|
|
|
+ ref="base"
|
|
|
+ />
|
|
|
+ <template v-if="!isCommon">
|
|
|
<el-alert
|
|
|
- title="基础信息设置"
|
|
|
+ title="加课信息设置"
|
|
|
:closable="false"
|
|
|
class="alert"
|
|
|
type="info">
|
|
|
</el-alert>
|
|
|
- <userBaseinfo
|
|
|
- :form.sync="form"
|
|
|
+ <extraClass
|
|
|
+ :form="eclass"
|
|
|
+ ref="eclass"
|
|
|
+ @create="addExtraClass"
|
|
|
+ @remove="removeExtraClass"
|
|
|
/>
|
|
|
+ </template>
|
|
|
+ <template v-if="isUserType">
|
|
|
<el-alert
|
|
|
title="缴费周期设置"
|
|
|
:closable="false"
|
|
|
class="alert"
|
|
|
type="info">
|
|
|
</el-alert>
|
|
|
+ <template v-if="isCommon">
|
|
|
+ <el-collapse :value="collapse" @change="collapseChange" >
|
|
|
+ <el-collapse-item
|
|
|
+ v-for="(item, index) in cycles"
|
|
|
+ :key="index"
|
|
|
+ :name="index"
|
|
|
+ >
|
|
|
+ <template slot="title">
|
|
|
+ <div class="collapse-title">
|
|
|
+ <span>缴费周期 {{index + 1}}</span>
|
|
|
+ <i v-if="index !== 0" class="el-icon-circle-close" @click.stop="removeCycle(index)"></i>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <paymentCycle
|
|
|
+ ref="cycles"
|
|
|
+ :form="item"
|
|
|
+ />
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-circle-plus-outline"
|
|
|
+ plain
|
|
|
+ type="info"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%;margin: 20px 0;"
|
|
|
+ @click="addCycle"
|
|
|
+ >新增缴费周期</el-button>
|
|
|
+ </template>
|
|
|
<paymentCycle
|
|
|
- :form.sync="form"
|
|
|
+ ref="cycle"
|
|
|
+ :form.sync="cycle"
|
|
|
+ v-else
|
|
|
/>
|
|
|
- </el-form>
|
|
|
+ </template>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="$listeners.close">取 消</el-button>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
@click="submit"
|
|
|
- >确 定</el-button>
|
|
|
+ >下一步</el-button>
|
|
|
</div>
|
|
|
+ <el-dialog
|
|
|
+ :title="nextTitle"
|
|
|
+ :visible.sync="nextVisible"
|
|
|
+ width="600px"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <classrooms
|
|
|
+ @close="closeNext"
|
|
|
+ />
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import userBaseinfo from './user-baseinfo'
|
|
|
import paymentCycle from './payment-cycle'
|
|
|
+import extraClass from './extra-class'
|
|
|
+import classrooms from './classrooms'
|
|
|
+
|
|
|
export default {
|
|
|
+ props: ['type'],
|
|
|
components: {
|
|
|
userBaseinfo,
|
|
|
paymentCycle,
|
|
|
+ extraClass,
|
|
|
+ classrooms,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
options: [],
|
|
|
form: {
|
|
|
-
|
|
|
- }
|
|
|
+ leixing: '0',
|
|
|
+ },
|
|
|
+ cycles: [{}],
|
|
|
+ cycle: {},
|
|
|
+ eclass: [{}],
|
|
|
+ collapse: [],
|
|
|
+ nextVisible: false,
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ isCommon() {
|
|
|
+ console.log(this.form.leixing)
|
|
|
+ return this.form.leixing === '0'
|
|
|
+ },
|
|
|
+ isUserType() {
|
|
|
+ return this.type === 'user'
|
|
|
+ },
|
|
|
+ nextTitle() {
|
|
|
+ return this.isCommon ? '乐团课程-班级选择' : '临时加课-班级选择'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ eclass() {
|
|
|
+ console.log([...this.eclass])
|
|
|
+ },
|
|
|
+ 'form.leixing'() {
|
|
|
+ this.cycles = [{}]
|
|
|
+ this.collapse = [0]
|
|
|
+ this.cycle = {}
|
|
|
+ },
|
|
|
+ },
|
|
|
mounted() {
|
|
|
-
|
|
|
+ console.log(this.refs)
|
|
|
},
|
|
|
methods: {
|
|
|
+ addExtraClass() {
|
|
|
+ this.eclass.push({})
|
|
|
+ },
|
|
|
+ removeExtraClass(index) {
|
|
|
+ this.eclass[index] = null
|
|
|
+ this.eclass = this.eclass.filter(item => !!item)
|
|
|
+ },
|
|
|
+ addCycle() {
|
|
|
+ this.cycles.push({})
|
|
|
+ this.collapse.push(this.collapse.length)
|
|
|
+ },
|
|
|
+ removeCycle(index) {
|
|
|
+ this.cycles[index] = null
|
|
|
+ this.cycles = this.cycles.filter(item => !!item)
|
|
|
+ this.collapse.pop()
|
|
|
+ },
|
|
|
+ collapseChange(val) {
|
|
|
+ this.collapse = val
|
|
|
+ },
|
|
|
+ closeNext() {
|
|
|
+ this.nextVisible = false
|
|
|
+ },
|
|
|
+ getForms() {
|
|
|
+ const { $refs: refs } = this
|
|
|
+ return [...refs.cycles, refs.base, refs.eclass, refs.cycle]
|
|
|
+ .filter(item => !!item)
|
|
|
+ .map(item => item.$refs.form)
|
|
|
+ },
|
|
|
async submit() {
|
|
|
- console.log({...this.form}, this.$refs)
|
|
|
- this.$refs.form.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- // this.$listeners.submited()
|
|
|
- // this.$listeners.close()
|
|
|
- }
|
|
|
- })
|
|
|
+ const forms = this.getForms()
|
|
|
+ console.log(forms)
|
|
|
+ const valided = []
|
|
|
+ for (const form of forms) {
|
|
|
+ form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ valided.push(form)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (valided.length === forms.length) {
|
|
|
+ console.log({...this.form}, this.cycle, this.cycles, this.eclass)
|
|
|
+ this.nextVisible = true
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
@@ -75,4 +195,17 @@ export default {
|
|
|
.alert{
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
+ .collapse-title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ .el-icon-circle-close{
|
|
|
+ font-size: 16px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/ .el-collapse-item__wrap{
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
</style>
|
wolyshaw