Steps 步骤条 使用

<template>
  <el-card class="form-container" style="width: 100%" shadow="never">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="11111" description="11111111111"></el-step>
      <el-step title="22222222222222" description="22222222222222222222"></el-step>
      <el-step title="3333333333333333333333" description="33333333333333333333333333"></el-step>
      <el-step title="444444444444444444" description="44444444444444"></el-step>
      <el-step title="5555555555555555" description="555555555555555555555555555"></el-step>
      <el-step title="66666666666666666666666" description="66666666666666666666666666"></el-step>
      <el-step title="7777777777777777777777" description="777777777777777777777777"></el-step>
      <el-step title="888888888888888888888888888" description="8888888888888888888888888"></el-step>
    </el-steps>

    <desulfurization-towerInlet-flueGas-parameters v-if="showStatus[0]" v-model="projectParam" :is-edit="isEdit"
      @nextStep="nextStep"></desulfurization-towerInlet-flueGas-parameters>

    <a-ownerHas-fuel-parameters-input-value v-if="showStatus[1]" v-model="projectParam" :is-edit="isEdit"
      @nextStep="nextStep" @prevStep="prevStep"></a-ownerHas-fuel-parameters-input-value>

    <a-ownerHas-fuel-parameters-calculation-results v-if="showStatus[2]" v-model="projectParam" :is-edit="isEdit"
      @nextStep="nextStep" @prevStep="prevStep"></a-ownerHas-fuel-parameters-calculation-results>

    <a-ownerHas-fuel-parameters-output-result v-if="showStatus[3]" v-model="projectParam" :is-edit="isEdit"
      @nextStep="nextStep" @prevStep="prevStep"></a-ownerHas-fuel-parameters-output-result>

    <b-owner-no-fuel-parameters-input-value v-if="showStatus[4]" v-model="projectParam" :is-edit="isEdit"
      @nextStep="nextStep" @prevStep="prevStep"></b-owner-no-fuel-parameters-input-value>

    <b-owner-no-fuel-parameters-output-result v-if="showStatus[5]" v-model="projectParam" :is-edit="isEdit"
      @nextStep="nextStep" @prevStep="prevStep"></b-owner-no-fuel-parameters-output-result>

    <determine-inlet-flue-gas-parameters v-if="showStatus[6]" v-model="projectParam" :is-edit="isEdit"
      @nextStep="nextStep" @prevStep="prevStep"></determine-inlet-flue-gas-parameters>

    <desulfurization-tower-outlet-flue-gas-parameters v-if="showStatus[7]" v-model="projectParam" :is-edit="isEdit"
      @prevStep="prevStep" @finishCommit="finishCommit"></desulfurization-tower-outlet-flue-gas-parameters>
  </el-card>
</template>

<script>
import DesulfurizationTowerInletFlueGasParameters from './stepByFlueGasParameterInput/DesulfurizationTowerInletFlueGasParameters'
import AOwnerHasFuelParametersInputValue from './stepByFlueGasParameterInput/AOwnerHasFuelParametersInputValue'
import AOwnerHasFuelParametersCalculationResults from './stepByFlueGasParameterInput/AOwnerHasFuelParametersCalculationResults'
import AOwnerHasFuelParametersOutputResult from './stepByFlueGasParameterInput/AOwnerHasFuelParametersOutputResult'
import BOwnerNoFuelParametersInputValue from './stepByFlueGasParameterInput/BOwnerNoFuelParametersInputValue'
import BOwnerNoFuelParametersOutputResult from './stepByFlueGasParameterInput/BOwnerNoFuelParametersOutputResult'
import DetermineInletFlueGasParameters from './stepByFlueGasParameterInput/DetermineInletFlueGasParameters'
import DesulfurizationTowerOutletFlueGasParameters from './stepByFlueGasParameterInput/DesulfurizationTowerOutletFlueGasParameters'

const defaultProjectParam = {}

export default {
  components: {
    DesulfurizationTowerInletFlueGasParameters,
    AOwnerHasFuelParametersInputValue,
    AOwnerHasFuelParametersCalculationResults,
    AOwnerHasFuelParametersOutputResult,
    BOwnerNoFuelParametersInputValue,
    BOwnerNoFuelParametersOutputResult,
    DetermineInletFlueGasParameters,
    DesulfurizationTowerOutletFlueGasParameters
  },

  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      //设置当前激活步骤：默认第一步
      active: 0,
      showStatus: [
        true,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false
      ],
      projectParam: Object.assign({}, defaultProjectParam)
    }
  },

  created() { },

  mounted() {
    console.log(this.$store.state.num)
  },

  methods: {
    nextStep() {
      console.log('00000')
      if (this.active < this.showStatus.length - 1) {
        this.active++
        this.hideall()
        this.showStatus[this.active] = true
      }
    },

    hideall() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false
      }
    },

    prevStep() {
      if (this.active > 0 && this.active < this.showStatus.length) {
        this.active--
        this.hideall()
        this.showStatus[this.active] = true
      }
    },

    finishCommit(isEdit) {
      //填写筛选条件
      this.$confirm('是否要提交该参数输入信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.hideall()
        this.active = 0
        this.showStatus[this.active] = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.flowchart-container {
  background: rgb(239, 239, 239);
  overflow: auto;
  width: 100%;
  height: 100%;
  padding-bottom: 11px;
  font-family: PingFangSC-Regular;

  .W-badEvent {
    display: flex;
    flex-direction: row;
    margin-top: 10px;

    &>div {
      flex: 1;
    }

    &>div:nth-child(2) {
      margin: 0 10px 0 10px;
    }
  }
}
</style>
``