eta_front/src/views/smartReport/components/ETAChart.vue

<template>
    <div class="eta-chart-wrap">
        <div class="top-box">
            <div class="left-card">
                <span :class="['item',activeType==='ETA图库'?'active':'']" @click="activeTypeChange('ETA图库')">{{$t('ReportManage.ReportList.chart_inventory_radio')}}</span>
                <span :class="['item',activeType==='MyETA'?'active':'']" @click="activeTypeChange('MyETA')">{{$t('MyEtaPage.tab_my')}}</span>
            </div>
            <div class="right">
                <el-input
                    class="search-box"
					:placeholder="$t('ReportManage.ReportList.chart_name')"
					v-model="keyword"
					size="medium"
					prefix-icon="el-icon-search"
                    v-if="activeType==='ETA图库'"
                    @input="handleETAChartSearch"
				/>
            </div>
        </div>
        <div class="main-box">
            <ImportETAChart ref="ETAChartWrap" v-if="activeType==='ETA图库'"/>
            <ImportMyETAChart @handleImportMyChart="handleImportMyChart" v-if="activeType==='MyETA'"/>
        </div>
    </div>
</template>

<script>
import ImportETAChart from './ImportETAChart.vue';
import ImportMyETAChart from './ImportMyETAChart.vue';
export default {
    name:"ETAChartWrap",
    components:{ImportETAChart,ImportMyETAChart},
    data() {
        return {
            keyword:'',
            activeType:'ETA图库',
        }
    },
    methods: {
        activeTypeChange(e){
            if(this.activeType===e) return
            this.activeType=e
        },

        handleETAChartSearch(){
            this.$refs.ETAChartWrap.handleSearch(this.keyword)
        },

        handleImportMyChart(list){
            this.$emit('handleImportMyChart',list)
        }
    },
}
</script>

<style lang="scss" scoped>
div{
    box-sizing: border-box;
}
.eta-chart-wrap{
    width: 100%;
    min-width: 600px;
    overflow-x: auto;
    .top-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-card{
            border-radius: 4px;
            border: 1px solid var(--unnamed, #DCDFE6);
            background: var(--gary-gy-3-disabled, #EBEFF6);
            display: flex;
            align-items: center;
            padding: 6px;
            .item{
                cursor: pointer;
                display: block;
                width: 110px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                border-radius: 4px;
                font-size: 18px;
                color: #666;
                &.active{
                    background: #FFF;
                    color: #002D78;
                }
            }
        }
        .right{
            .search-box{
                width: 330px;
            }
        }
    }
    .main-box{
        margin-top: 30px;
        height: calc(100vh - 180px);
        border-radius: 4px;
        border: 1px solid var(--gary-gy-5-line, #C8CDD9);
        background: #FFF;
        padding: 0 20px 20px 20px;
    }
}
</style>