shujuju/ruoyi-ui/src/views/workbench/handled/index.vue

<template>
    <div class="InstanceManagementList">
      <!-- <Breadcrumb separator=">">
        <BreadcrumbItem  v-if="tabalive==='待办流程'"  @click.native="routeClick(1)">待办流程</BreadcrumbItem>
        <BreadcrumbItem  v-if="tabalive==='历史流程'"  @click.native="routeClick(2)">历史流程</BreadcrumbItem>
    </Breadcrumb> -->
    <!-- <Tabs :value="tabalive" @on-click="onClick"> -->
        <!-- <TabPane label="待办流程" name="待办流程"><todoProcess v-if="tabalive === '待办流程'" :tabalive="tabalive"></todoProcess></TabPane> -->
        <TabPane label="历史流程" name="历史流程"><HistoricalProcess :falg="1" v-if="tabalive === '历史流程'" :tabalive="tabalive"></HistoricalProcess></TabPane>
    <!-- </Tabs> -->
    </div>
</template>
<script>
import todoProcess from '@/components/todoProcess/index';
import HistoricalProcess from '@/components/HistoricalProcess';
// import router from '../config/router.config'
export default {
    name:'handled',
    // todoProcess,
    components:{todoProcess,HistoricalProcess},
    data(){
        return{
            tabalive:"历史流程",//tab切换默认值
            tabConfig:[{
                label:'待办流程',
                name:'待办流程'
            },{
                label:'历史流程',
                name:'历史流程'
            }]
        }
    },
    methods:{
        routeClick(val){
            if(val === 1){
                this.tabalive = '待办流程';
            } else if (val === 2) {
                this.tabalive = '历史流程';
            }
        },
        //tab切换点击事件
        onClick(val){
            this.tabalive=val;
            if(val==='历史流程'){
             window.history.replaceState({}, '', "/#/InstanceManagementList?type=2");
            }else{
             window.history.replaceState({}, '', "/#/InstanceManagementList?type=1");
            }

        },
    },
    created(){
       this.routeClick(2);
    }

}
</script>
<style lang="scss" >
.InstanceManagementList{
     background: white;
     padding: 20px;
     display: flex;
     flex-direction: column;
    .burgeon-breadcrumb{
        font-size:18px;
        margin-bottom: 12px;
    }
    .burgeon-tabs{
        flex:1;
        display: flex;
       -webkit-box-direction: column;
        flex-direction: column;
        .burgeon-tabs-bar{
            // height: 27px;
        }
        .burgeon-tabs-content-animated{
        flex:1;
        .burgeon-tabs-tabpane{
            display: flex;
        }
    }
    }

}
</style>