eta_front/src/views/dataSource_manage/dataSourceListGL.vue

<template>
    <div class="data-source-list-page">
        <div class="top-wrap">
            <ul class="nav-box">
                <li 
                    :class="['nav-item',item.key===activeNav?'active':'']" 
                    v-for="item in navOpt" 
                    :key="item.key"
                    @click="activeNav=item.key"
                >{{item.name}}</li>
            </ul>
            <div>
                <el-date-picker
                    v-model="time"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    :clearable="false"
                    @change="handleDateChange"
                    style="width:200px"
                    v-if="activeNav!='DelEDBTable'"
                />
            </div>
        </div>
        <div class="main-box">
            <component :is='activeNav' ref="comIns"></component>
        </div>
    </div>
</template>

<script>
import DelEDBTable from './components/DelEDBTable.vue'
import DetailTable from './components/DetailTable.vue'
import EDBInfoChangeTable from './components/EDBInfoChangeTable.vue'
import StatisticTable from './components/StatisticTable.vue'
export default {
    components:{DelEDBTable,DetailTable,EDBInfoChangeTable,StatisticTable},
    watch: {
        activeNav(n){
            this.time=this.$moment().format('YYYY-MM-DD')
        }  
    },
    data() {
        return {
            navOpt:[
                {name:'数据源明细表',key:'DetailTable'},
                {name:'数据源统计表',key:'StatisticTable'},
                {name:'删除指标表',key:'DelEDBTable'},
                {name:'指标信息变更表',key:'EDBInfoChangeTable'}
            ],
            activeNav:'DetailTable',
            time:this.$moment().format('YYYY-MM-DD')||''
        }
    },
    methods: {
        handleShowSetTableCol(){
            this.$refs.comIns.handleShowSetTableCol()
        },

        handleDateChange(){
            this.$refs.comIns.filterState.dateVal=this.time
            this.$refs.comIns.handleRefreshList()
        }
    },
}
</script>

<style lang="scss" scoped>
.data-source-list-page{
    .top-wrap{
        padding: 20px 30px;
        border-radius: 4px;
        border: 1px solid #DCDFE6; 
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .nav-box{
            display: flex;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            overflow: hidden;
            &:last-child{
                border-right: none;
            }
            .nav-item{
                padding: 10px;
                color: #666;
                border-right: 1px solid #DCDFE6;
                cursor: pointer;
                &.active{
                    background-color: #0052D9;
                    color: #fff;
                }
            }
        }
    }
    .main-box{
        margin-top: 30px;
        padding: 30px;
        border-radius: 4px;
        border: 1px solid #DCDFE6; 
        background-color: #fff;
        min-height: calc(100vh - 380px);
        padding-bottom: 80px;
    }
}
</style>