drp-ui/src/views/qualityControl/index.vue

<template>
    <div class="app-container">
      <el-tabs v-model="activeName" >
        <el-tab-pane :label="num1" name="approval" @click="tabClick"></el-tab-pane>
        <el-tab-pane :label="num2" name="approved" @click="tabClick" ></el-tab-pane>
      </el-tabs>
      <component :is="currentPage" :oid="ocode"></component>
    </div>
  </template>
  
  <script>
  import { getCountStatus } from "@/api/qualityControl/qualityControl";
  import approval from '@/views/qualityControl/approval';
  import approved from '@/views/qualityControl/approved';
import { _ } from "core-js";
  export default {
    mounted() {
      let code = this.$route.query.mid; // 质管企微跳转ID
      if(code!= undefined){
        this.ocode = code;
        this.activeName = 'approved';
      }
    },
    name: "tabs",
    data() {
      return {
        ocode: '',
        num1: '',
        num2: '',
        queryParams1: '0',
        queryParams2: '1',
        activeName: 'approval' // 默认激活第一个标签
      };
    },
    watch: {
      currentPage(newValue, oldValue) {
          if(oldValue != newValue){
            this.tabClick();
            if(newValue == 'approval'){
              this.$router.replace('/business/qualityControl/index');
            }
          }
        },
      },
    created() {
      this.tabClick();
    },
    methods: {
      tabClick(){
        getCountStatus(this.queryParams1).then(response => {
          this.num1 = "待处理 ("+response.data+")";
        });
        getCountStatus(this.queryParams2).then(response => {
          this.num2 = "已处理 ("+response.data+")";
        });
      }
    },
    components:{
      approval,
      approved
    },
    computed: {
      // 计算属性返回当前应该显示的组件
      currentPage() {
        return this.activeName;
      }
    }
  };
  </script>