dy-admin-manager/src/views/organManager/organOperation.vue

<!--  -->
<template>
  <div class="m-container">
    <h2>
      <el-page-header @back="onCancel" :content="(payType == 'create' ? '新增机构' : '修改机构')"></el-page-header>
    </h2>
    <div class="m-core" style="overflow: hidden">
      <div style="display: block;overflow: hidden;">
        <el-col :span="8" :lg="10" :md="18" :sm="18" :xs="24">
          <el-steps :active="active" finish-status="success" simple align-center>
            <el-step title="机构信息" ></el-step>
            <el-step title="产品定价" ></el-step>
            <el-step title="确认设置" ></el-step>
          </el-steps>
        </el-col>
      </div>
      <!-- 机构基本信息 -->
      <organInfo ref="organInfo" v-show="active == 0" />
      <!-- 产品定价 确认设置 -->
      <div v-show="[1, 2].includes(active)">
        <openService ref="openService" :type="getType" />
        <memberSetting ref="memberSetting" :type="getType" />
        <roomRules ref="roomRules" :type="getType" />
        <rateSetting ref="rateSetting" :type="getType" />
      </div>
      <div style="padding-left: 120px;display: flex;width: 100%;">
        <el-button type="primary" size="small" v-if="active > 0" @click="active -= 1">上一步</el-button>
        <el-button type="primary" size="small" @click="onNext">{{ active >= 2 ? '提交' : '下一步' }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import organInfo from './components/organInfo'
import openService from './components/openService'
import memberSetting from './components/memberSetting'
import roomRules from './components/roomRules'
import rateSetting from './components/rateSetting'
import { tenantInfoAdd } from './api'
export default {
  name: 'serviceManger',
  components: { organInfo, openService, memberSetting, roomRules, rateSetting },
  data () {
    const query = this.$route.query
    return {
      payType: query.type,
      active: 0, // 当前第几步
    };
  },
  mounted () {
  },
  computed: {
    getType() {
      return this.active == 2 ? 'setting' : null
    }
  },
  methods: {
    async onNext() {
      if(this.active == 0) {
        const organStatus = await this.$refs.organInfo.onSubmit()
        console.log(organStatus)
        if(organStatus) {
          this.active += 1
        }
      } else if(this.active == 1) {
        const openStatus = await this.$refs.openService.onSubmit()
        const memberStatus = await this.$refs.memberSetting.onSubmit()
        const ruleStatus = await this.$refs.roomRules.onSubmit()
        const rateStatus = await this.$refs.rateSetting.onSubmit()
        console.log('验证中')
        if(openStatus && memberStatus && ruleStatus && rateStatus) {
          this.active += 1
        }
      } else if(this.active == 2) {
        // 处理提交
        const organData = await this.$refs.organInfo.getValues()
        const openData = await this.$refs.openService.getValues()
        const memberData = await this.$refs.memberSetting.getValues()
        const ruleData = await this.$refs.roomRules.getValues()
        const rateData = await this.$refs.rateSetting.getValues()
        const { member_config, teachingMaterialId } = memberData
        let config = {
          member_config,
          ruleData
        }
        let params = {
          ...organData,
          productInfo: openData,
          config: {
            config: JSON.stringify(config),
            teachingMaterialId: teachingMaterialId.join(','),
            ...rateData
          }
        }
        console.log(params)
        try {
          const res = await tenantInfoAdd(params)
          console.log(res)
        } catch(e) {}
      }
    },
    onCancel () {
      this.$store.dispatch('delVisitedViews', this.$route)
      this.$router.push({
        path: "/organManager/organList"
      });
    }
  },
};
</script>
<style lang='scss' scoped>


</style>