dy-admin-manager/src/views/resetTeaming/modals/user-pay-form.vue

<template>
  <div>
    <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="加课信息设置"
        :closable="false"
        class="alert"
        type="info">
      </el-alert>
      <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
        ref="cycle"
        :form.sync="cycle"
        v-else
      />
    </template>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$listeners.close">取 消</el-button>
      <el-button
        type="primary"
        @click="submit"
        >下一步</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() {
      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
      }
    }
  },
};
</script>
<style lang="less" scoped>
  .dialog-footer{
    margin-top: 20px;
    display: block;
    text-align: right;
  }
  .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>