Vue_New/src/xt_pages/workforce/remind.vue

<template>
<div class="main-contain">
  <div class="position">
     <bread-crumb :crumbs="crumbs"></bread-crumb>

  </div>
  <div class="app-container">

    <el-tabs v-model="activeName"  ref="elTabs">
        <el-tab-pane name="thisWeek">
            <span slot="label"><i class="el-icon-date"></i> 本周（{{theWeek.thisWeek}}）</span>
        </el-tab-pane>
        <el-tab-pane name="nextWeek">
            <span slot="label"><i class="el-icon-date"></i> 下一周（{{theWeek.nextWeek}}）</span>
        </el-tab-pane> 
    </el-tabs>
    <table-push v-if="activeName=='pushTime'"></table-push>
    <!-- <table-weeks v-else :week-time="activeName"> </table-weeks> -->
     
   <table-weeks v-if="activeName == 'thisWeek'"> </table-weeks>
   <nextTableWeeks v-if="activeName =='nextWeek'"></nextTableWeeks>
  </div>
</div>
</template>

<script>
import {getWeekPanels} from '@/api/schedule';
import tableWeeks from './components/tableWeeks'
import nextTableWeeks from './components/nextTableWeeks'
import tablePush from './components/tablePush'
import BreadCrumb from '../components/bread-crumb'
export default {
    name:'remind',
     data() {
      return {
        crumbs: [
          { path: false, name: '排班管理' },
          { path: '/workforce/remind', name: '排班提醒' },
        ],
        activeName: 'thisWeek',
        theWeek:{thisWeek:0,nextWeek:0,}
      };
    },
    components:{
      BreadCrumb,
        tableWeeks,
        tablePush,
        nextTableWeeks
    },
    methods: {

      getWeekPanels(){
        getWeekPanels(0).then(response=>{
          if (response.data.state==0) {
            return false
          }
          this.theWeek.thisWeek = response.data.data.theWeek;
         console.log("上一周",this.theWeek.thisWeek)
        //  this.theWeek.nextWeek = this.theWeek.thisWeek+1;

          let childrenRefs = this.$refs.elTabs.$children
          this.$nextTick(() => {
            childrenRefs.forEach(child => child.$forceUpdate())
          })
        });
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      changeActiveName(val){
        console.log("val------",val)
        this.activeName = val
      }
    },
    created(){
        this.getWeekPanels();
    },
    watch:{
      activeName:function(val){
       console.log("val----",val)
      }
    }
};
</script>

<style  rel="stylesheet/css" lang="scss" scoped>


</style>