vue步骤框代码

<template>
  <el-dialog
    :visible="checkModelShow"
    @close="cancel"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    class="init-dialog"
  >
    <el-steps :active="current" align-center class="mb30">
      <el-step title="系统初始化" icon="el-icon-s-help"></el-step>
      <el-step title="组织机构模板选择" icon="el-icon-s-grid"></el-step>
      <el-step title="建立组织机构" icon="el-icon-finished"></el-step>
    </el-steps>
    <el-form v-show="showStep1" label-width="200px">
      <el-form-item label="数据库连接：">
        <el-input v-model="connect" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="数据库用户名：">
        <el-input v-model="username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="数据库密码：">
        <el-input type="password" v-model="password" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <el-form v-show="showStep2">
      <el-form-item class="radio-btn-list">
        <el-radio-group v-model="editOuModelInitInfo.templateModelCode">
          <el-radio-button
            v-for="(item, index) in ouModelTemplates"
            :value="item.templateModelCode"
            :key="index"
            :label="item.name"
          /> 
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-form v-show="showStep3" label-width="200px">
      <el-form-item label="组织机构名称：">
        <el-input v-model="editOuModelInitInfo.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="组织机构编号：">
        <el-input v-model="editOuModelInitInfo.modelCode" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="initSystem" v-show="showStep1">系统初始化</el-button>
      <el-button @click="previous" v-show="showStep3">上一步</el-button>
      <el-button @click="next" v-show="!showStep3&&!showStep1">下一步</el-button>
      <el-button type="primary" v-if="showStep3" @click="confirm()">确 定</el-button>
    </span>
  </el-dialog>
</template>


<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import moment, { months } from "moment";
import { Form } from "element-ui";
import { State, Getter, Action, Mutation, namespace } from "vuex-class";
import { OuModelTemplate } from "@/@types/ou/model/organization/OuModelTemplate";
import { OuNode } from "@/@types/ou/model/organization/OuNode";
import { OuModelInitInfo } from "@/@types/ou/model/organization/OuModelInitInfo";

@Component
export default class EditTemplate extends Vue {
  @State ouModelTemplates!: OuModelTemplate[];
  @State rootNodes!: OuNode[];

  current: number = 1;
  checkModelShow: boolean = true;
  connect: string = "";
  username: string = "";
  password: string = "";
  fullscreenLoading: boolean = false;
  editOuModelInitInfo: OuModelInitInfo = this.newOuModelInitInfo();

  next() {
    if (this.current < 3) {
      this.current++;
    }
  }

  previous() {
    if (this.current > 2) {
      this.current--;
    }
  }

  get showStep1() {
    if (this.current === 1) {
      return true;
    } else {
      return false;
    }
  }

  get showStep2() {
    if (this.current === 2) {
      return true;
    } else {
      return false;
    }
  }

  get showStep3() {
    if (this.current === 3) {
      return true;
    } else {
      return false;
    }
  }

  newOuModelInitInfo(): OuModelInitInfo {
    return {
      modelCode: "",
      name: "",
      templateModelCode: ""
    };
  }

  // initSystem() {
  //     const loading = this.$loading({
  //       lock: true,
  //       text: 'Loading',
  //       spinner: 'el-icon-loading',
  //       background: 'rgba(0, 0, 0, 0.7)'
  //     });
  //     setTimeout(() => {
  //       loading.close();
  //       this.current++;
  //     }, 2000);
  // }

  initSystem() {
    this.current++;
  }

  get validateRules() {
    let rules: any = {
      name: [{ required: true, message: "请填写名称", trigger: "blur" }],
      radio: [{ required: true, message: "请选择模板", trigger: "blur" }]
    };
    return rules;
  }

  confirm() {
    this.ouModelTemplates.forEach(m => {
      if (m.name == this.editOuModelInitInfo.templateModelCode) {
        this.editOuModelInitInfo.templateModelCode = m.templateModelCode;
      }
    });
    this.$store.dispatch("saveInitInfo", this.editOuModelInitInfo);
    this.checkModelShow = false;
  }

  cancel() {
    this.checkModelShow = false;
  }
}
</script>