WZC2/WinIn.FasterZ.Wms.Fe/src/components/StepsFormAlone/index.vue

<template>
<div class="StepsFormAloneComponents">
  <div 
    class="pageMainContain" 
    :class="stepsDirection && stepsDirection == 'vertical' ? 'pageMainContainVertical' : ''"
  >
  <!-- 步骤流程图 -->
    <div class="stepsContain">
      <el-steps 
        :active="active" 
        :process-status="processStatus"
        :finish-status="finishStatus"
        :direction="stepsDirection"
        :space="stepsSpace"
        :align-center="stepsAlignCenter"
        :simple="stepsSimple"
        :style="stepsStyle"
      >
        <el-step
          v-for="(item, index) in steps"
          :key="index"
          :title="item.title"
          :description="item.description"
          :icon="item.icon"
        ></el-step>
      </el-steps>
    </div>

    <!-- 步骤对应页面内容 -->
    <div class="allStepPages">
      <div 
        v-for="(item,index) in steps" 
        :key="index" 
        v-show="active == index"
        class="stepBottomPage"
        :class="'stepBottomPage'+(index+1)"  
      >
        <slot :name="'stepSlot'+(index+1)"></slot>
      </div>
    </div>
  </div>

  <!-- 操作按钮 -->
  <div class="stepsHandleBtns" v-if="(!((active == stepArray.length - 1) && hideLastBtsn))">
    <!-- 组件内已有按钮【前面】其他按钮位置插槽 -->
    <slot name="stepOtherBeforeButton"></slot>
    <!-- 组件内按钮 -->
    <el-button
      v-for="(item,index) in handleBtns"
      :key="index"
      v-show="!(active == 0 && item.name == 'cancle')"
      :type="item.type"
      @click="stepsHandleClick(item,index)"
      :class="'stepsAloneBtn-'+item.name"
    >{{item.label}}</el-button>
    <!-- 组件内已有按钮【后面】其他按钮位置插槽 -->
    <slot name="stepOtherAfterButton"></slot>
  </div>
</div>
</template>
<script>
export default {
  name: 'StepsFormAlone',
  props: {
    stepsStyle:{
      type: Object,
      default: () => {
        return {}
      }
    },
    // 结束状态
    finishStatus:{
      type: String,
      default: 'success'
    },
    // 当前步骤的状态
    processStatus:{
      type: String,
      default: 'success'
    },
    // 单独设置步骤名称
    stepNames: {
      type: Array,
      default: () => {
        return null
      }
    },
    //步骤options
    stepArray: {
      type: Array,
      default: () => {
        return [
          {title:"步骤一",description:"",icon:"",status:null},
          {title:"步骤二",description:"",icon:"",status:null},
          {title:"步骤三",description:"",icon:"",status:null},
        ]
      }
    },
    // 显示方向 如果更改为vertical：最好与stepsAlignCenter=false同步赋值
    stepsDirection:{
      type: String,
      default: 'horizontal'
    },
    //居中对齐
    stepsAlignCenter: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 每个 step 的间距
    stepsSpace:{
      type: Number,
      default: null
    },
    //简洁风格
    stepsSimple: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 步骤操作
    stepHandleFuncs:{
      type: Object,
      default: () => {}
    },
    // 最后一步是否隐藏按钮
    hideLastBtsn:{
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      active: 0,
      steps: null,//步骤标头
      // 操作按钮
      handleBtns:[
        {name:"cancle",label:"上一步"},
        {name:"next",label:"下一步",type:"primary"},
      ]
    }
  },
  created(){
    this.initStepsOption()
  },
  mounted () {
  },
  methods: {
    // 设置步骤标头
    initStepsOption(){
      this.steps = Object.assign([], this.stepArray);
      if(!this.stepNames)return;
      this.stepNames.forEach((item,key)=>{
        if(key < this.steps.length)
        this.steps[key].title = item
      })
    },
    // 操作按钮
    stepsHandleClick(item,index){
      // 上一步
      if(item.name == 'cancle'){
        if(this.steps[this.active].cancle){
          this.steps[this.active].cancle().then((data) => {
            this.active --
          }).catch((err) => {
            console.log('cancle-err',err)
          })
        }else{
          this.active --
        }
      }
      // 下一步
      if(item.name == 'next'){
        // 非最后一步
        if(this.active < this.steps.length - 1){
          if(this.steps[this.active].next){
            this.steps[this.active].next().then(res => {
              this.active ++
            }).catch((err) => {
              console.log('next-err',err)
            })
          }else{
            this.active ++
          }
        }
        // 最后一步
        else{
          if(this.steps[this.active].next){
            this.steps[this.active].next()
            // .then(res => {
            //   // 回到第一步
            //   this.returnFirstActive()
            //   console.log('res',res)
            // }).catch((err) => {
            //   console.log('next-err',err)
            // })
          }
        }
      }
    },
    returnFirstActive(){
      this.active = 0
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./style/index.scss";
</style>