iview的Steps用法

Steps的两个重要的API：current，status

• current：表示当前步骤（执行到第几步），从0开始计数
• status：当前状态，可选值为wait，process，finish，error Step的重要API：title，content，click.native
• title：每一步的标题
• content：步骤的详细描述
• click.native：每一步的点击事件 代码演示：

1. 第一层步骤嵌套第二层步骤
2. 第一层步骤分5步：基本信息、审批、执行、交付、完成，审批执行是，detail.status是2

3. 步骤执行中，包裹第二层步骤，分3步：第一步、第二步、第三步 4. 第一层步骤执行成功后，程序执行到第二步，执行到执行步骤时，内部嵌套的步骤开始状态为未开始，第一步、第二步成功后状态为已完成，失败为进行中，第三部完成状态为已完成 5. 点击第一步弹出弹窗，提交后，功能执行第二步，第二步提交后，功能执行到第三部 6. 注：当状态为未开始时，按钮不可点击，不能触发点击事件

最外层步骤：

// template：
<Steps :current="status_step_mongo[detail.status]" direction="vertical" :status="(detail.status == 3 || detail.status == 6 || detail.status == 8 || detail.status == 10) ? 'error' : 'finish'">
</Steps>

// dara:
status_step_mongo: {1: 1, 2: 2, 3: 2, 4: 2, 5: 2, 6: 2, 7: 3, 8: 2, 9: 5, 10: 3 },

// 执行状态根据detail.status显示是否完成

// 弹窗中显示的取消，提交，下一步，关闭按钮
// template：
<Button v-if="task_step == 0 && (detail.status == 2 || detail.status == 3 || detail.status == 4 || detail.status == 6)" @click="executeOkMongo" :loading="submitLoading">提交</Button> 
<Button v-if="(detail.status == 5 || detail.status == 7 || detail.status == 8 || detail.status == 9 || detail.status == 10)" @click="next_mongo" >{{exe_task == 2 ? '关闭': '下一步'}}</Button>
// method
// 下一步
// 点击下一步分3种情况，当exe_task=2时，说明已经到最后一步，弹窗关闭；当exe_task=1时，说明执行到第二步，查看当前detail.status的状态，如果是(7,9,10)，则当前第三步已经执行完，调用查看接口即可；如果是7,9,10，则调动提交接口，并将detail.status更改为已完成状态；如果exe_task=0时，说明当前在第零步，则查看第零步详情
next_mongo(){
    if(this.exe_task == 2) {
        // 关闭
        this.executeModal = false
        this.queryDetail(this.id)
    } else if(this.exe_task == 1) {
    // 第二步 调获取第三步的详情接口
    if(this.detail.status == 7 || this.detail.status == 9 || this.detail.status == 10) {
        // 查详情
        getApproveOperMongo(this.id, 4).then(res=>{
            res ? this.updateMsg = 'success' : this.updateMsg = res
        })
        getApproveOperMongo(this.id, 2).then(res=>{
            this.cluster_info = res.cluster_info
            this.db_deliver = res.db_init
            this.task_step = 3
            this.exe_task = 2
        })
    } else {
    // 改状态
        deliverMongo({apply_id: this.id,task: 3,status: 7}).then(res => {
            if(res.msg === 'success') {
                getApproveOperMongo(this.id, 4).then(res=>{
                  res ? this.updateMsg = 'success' : this.updateMsg = res
                  this.task_step = 2 
                  this.exe_task = 2
                })
                this.detail.status = 7
                // 执行到第二步，第二步已完成
                // task_step表示当前已完成到第几步
                this.task_step = 2 
                // 设置和完成状态一致，用于区分显示页面弹窗
                this.exe_task = 2
            }
            this.updateMsg = res.msg
         })
      }
    } else {
    // 第一步 调获取第二步的详情接口
        getApproveOperMongo(this.id, 2).then(res=>{
            this.cluster_info = res.cluster_info
            this.db_deliver = res.db_init
            this.task_step = 3
            this.exe_task = 1
        })
    }
}

// 提交
executeOkMongo(){
    // 校验是否必填
    this.$refs['executeForm'].validate((valid)=>{
        if(valid){
        // 只有第一步有提交状态，且第一步提交调用2个接口，第一个接口成功后，调用第二个接口
            // 第一个接口
            deliverMongo({apply_id: this.id,task: 1,status: 4,id: this.selectedClusters[0].id }).then(res => {
                if(res.msg === 'success') {
                  this.$Message.success({
                    content: "选择集群成功",
                    duration: 10
                  })
                  // 将detail.status的状态更新
                  this.detail.status = 4
                  // 第二个接口
                  deliverMongo({apply_id: this.id,task: 2,status: 5,}).then(res_create_user => {
                    this.submitLoading = false
                    if(res_create_user.msg === 'success') {
                      this.db_deliver = res_create_user.result
                      // 将detail.status的状态更新
                      this.detail.status = 5
                      this.task_step = 1
                      this.exe_task = 1
                      this.$Message.success(res_create_user.msg)
                    } else {
                      this.detail.status = 6
                        this.$Message.error({
                        content: res_create_user.msg,
                        duration: 10
                      })
                    }
                  })
                } else {
                  this.detail.status = 3
                  this.$Message.error({
                    content: "选择集群失败",
                    duration: 10
                  })
                }
            })
        }
    })
},

第二层步骤：

// template：
<Steps size="small" :current="task_step" direction="vertical">
    <Step 
        v-for="(item, index) in mongoTasks" 
        :key="index"
        :index="index"
        :title=" detail.status >= 4 ? (task_step  == index ? '待进行' : (task_step < index? '未开始' : '已完成') ) : '未开始'" 
        :content="item.content" 
        @click.native="step_one(index)">
    </Step>
</Steps>

// method：
// 打开弹窗
step_one(index){
    this.index = index
    // 判断弹窗是否打开，如果是已完成状态打开，未开始状态不打开
    this.executeModal = this.task_step >= index;
    this.exe_task = index
    if(index == 0){
         // 获取第0步详情  
        getApproveOperMongo(this.id,2).then(res=>{
            this.cluster_info = res.cluster_info
            this.db_init = res.db_init
            this.db_deliver = res.db_init
        })
    }else if(index == 2){
        // 获取第2步详情
        getApproveOperMongo(this.id,4).then(res=>{
           res ? this.updateMsg = 'success' : this.updateMsg = res
        })
    }else{
        getApproveOperMongo(this.id,2).then(res=>{
            this.cluster_info = res.cluster_info
            this.db_init = res.db_init
            this.db_deliver = res.db_init
        })
    }
}