[JavaScript知识库]el-steps进度条 el-tabs标签切换页的结合

<template>
    <div class="rf_container">
    <el-container class="rf_H_A_M">
      <el-header height="auto">
        <div class="title">{{title}}
          <span style="float:left"> <el-button size="mini" @click="back()" type="primary"><i class="el-icon-arrow-left"></i>返回列表</el-button></span>
           <span style="float:left;margin-left:10px"> <el-button size="mini" @click="cxsb()" v-if="show" type="warning">撤销申报</el-button></span>
            <!-- <el-link :underline="false" type="danger" :href="'/dev/ZscqSb/scsbs/'+id">生成申报书</el-link> -->
            <a  type="danger" @click="scsbs()">生成申报书</a>
        </div>
        <div class="steps">
          <el-steps  :active="active" finish-status="success" simple>
           <el-step title="新增知识产权优势企业申报信息"></el-step>
            <el-step title="市局评审"></el-step>
            <el-step title="区局评审"></el-step>
            <el-step title="专家评分" ></el-step>
            <el-step title="省级最终审核" ></el-step>
          </el-steps>
        </div>
      </el-header>

      <el-container>
        <el-main>
            <component :is="currentView"></component>
        </el-main>
      </el-container>
    </el-container>
    </div>
</template>

<script>
import tabs from "../jdlc/tabs.vue";
import zscqsb from "@/api/zscqsb";
export default {
  components: {
   tabs
  },
  data() {
    return {
     active:0,//激活节点状态
     title:'广西知识产权优势企业培育单位',
     currentView:'',//节点挂载
     status:'',
     id:'',
     show:false,
     ysqytype:''
    };
  },
   created() {
    this.currentView="tabs"
    this.id =this.$route.query.id ||this.$route.query.infoId
    this.status = this.$route.query.status
    this.zt = this.$route.query.zt
    if(this.zt==3){
     this.show=true
    }else{
     this.show=false
    }
    if(!this.status){
      this.active=  Number(this.$route.query.ysqytype)
    }else{
      this.active=  Number(this.$route.query.status)
    }
   },
  methods: {
   back(){
      this.$router.back(-1)
   },
   cxsb(){
       this.$confirm('是否确认撤销申报？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        zscqsb.cancelSb( this.id ).then(res => {
         if(res.code=="200"){
          this.$alert(res.msg, "提示", {
            confirmButtonText: "确定",
          })
              setTimeout(() => {
              this.$router.back(-1)
            }, 10);
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });          
      });
   },
   scsbs(){
    
      //  this.$confirm('是否确认生成申报书？', '提示', {
      // confirmButtonText: '确定',
      // cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
        zscqsb.scsbs( this.id ).then(res => {
         if(res.code=="200"){
          this.$alert(res.msg, "提示", {
            confirmButtonText: "确定",
          })
            }
          })
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消操作'
      //   });          
      // });
   }
  },
};
</script>

<style scoped>
.rf_container >>> .el-header {
  border-bottom: 2px solid #1c95fd;
}

.rf_container .rf_H_A_M .el-header .title {
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  line-height: 6rem;
}

.rf_container .rf_H_A_M .steps {
  margin-bottom: 10px;
}

.rf_container >>> .el-steps--simple {
  padding: 13px 2%;
}
.title {
    position: relative;
    margin: 0px auto;
    text-align: center;
    color: #707070;
    font-size: 20px;
}


</style>

<template>
  <div>
    <el-tabs
      v-model="activeName"
      tab-position="left"
      type="border-card"
      @tab-click="changexm"
    >
      <el-tab-pane label="申报项目基本信息" name="1">
        <sbxmjbxx :infoId="infoId"> </sbxmjbxx>
      </el-tab-pane>
      <el-tab-pane label="知识产权工作情况" name="2">
        <zscqgzqk v-if="tabs['2']"> </zscqgzqk>
      </el-tab-pane>
      <el-tab-pane label="近三年专利申请、授权情况" name="3">
        <sqqk v-if="tabs['3']"> </sqqk>
      </el-tab-pane>
      <el-tab-pane label="主导产品专利相关情况" name="4">
        <zdcp v-if="tabs['4']"> </zdcp>
      </el-tab-pane>
      <el-tab-pane label="单位意见" name="5">
        <dwyj v-if="tabs['5']"></dwyj>
      </el-tab-pane>
      <el-tab-pane label="附件材料" name="6">
        <fjcl v-if="tabs['6']"></fjcl>
      </el-tab-pane>
      <el-tab-pane v-if="showpf"   name="7" label="评分细则">
        <pfxz v-if="tabs['7']"></pfxz>
      </el-tab-pane>
      <el-tab-pane v-if="showpfxz"  name="7" label="评分细则">
        <pfpsxz  v-if="tabs['7']"></pfpsxz>
      </el-tab-pane>
      <el-tab-pane v-if="showps" name="7" label="评审意见">
        <psyj   v-if="tabs['7']" ></psyj>
      </el-tab-pane>
         <el-tab-pane v-if="showps1" name="8" label="评审意见">
        <psyj   v-if="tabs['8']" ></psyj>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import sbxmjbxx from "../tabxx/sbxmjbxx.vue";
import zscqgzqk from "../tabxx/zscqgzqk.vue";
import sqqk from "../tabxx/sqqk.vue";
import zdcp from "../tabxx/zdcp.vue";
import dwyj from "../tabxx/dwyj.vue";
import fjcl from "../tabxx/fjcl.vue";
import psyj from "../tabxx/psyj.vue";
import pfxz from "../tabxx/pfxz.vue";
import pfpsxz from "../tabxx/pfpsxz.vue";
export default {
  components: {
    sbxmjbxx,
    zscqgzqk,
    sqqk,
    zdcp,
    dwyj,
    fjcl,
    psyj,
    pfxz,
    pfpsxz,
  },
  data() {
    return {
      showps: false,
      showpf: false,
      showpfxz: false,
      userType:'',
      showps1:false,
      zt: "",
      infoId: "",
      activeName: "1",
      tabs: {
        '2': false,
        '3': false,
        '4': false,
        '5': false,
        '6': false,
        '7': false,
        '8': false,
      },
    };
  },
  created() {
    this.zt = this.$route.query.zt;
     this.userType =sessionStorage.getItem('userType')
    if (this.zt == 0 || this.zt == 3) {
      //未提交申报,已提交待审核
      this.showps = false;
      this.showpf = false;
      this.showpfxz = false;
    } else if (this.zt == 5 || this.zt == 8) {
      //待市局审核,待区局审核
      this.showps = true;
      this.showpf = false;
      this.showpfxz = false;
    } else if (this.zt == 11||this.userType==3) {
      //待专家评分
      this.showps = false;
      this.showpf = true;
      this.showpfxz = false;
    } else if (this.zt == 14) {
      //最终审核
      this.showps = false;
      this.showpf = false;
      this.showpfxz = true;
      this.showps1 =true
    }
  },

  methods: {
    changexm(index) {
      this.tabs[`${index.name}`] = true;
    },
  },
};
</script>
<style scoped>
</style>