forked from github/dataease
115 lines
3.2 KiB
Vue
115 lines
3.2 KiB
Vue
<template>
|
|
<de-container>
|
|
<de-aside-container style="padding: 0 10px;">
|
|
<el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick">
|
|
<el-tab-pane name="PanelList">
|
|
<span slot="label"><i class="el-icon-document" />{{ $t('panel.panel_list') }}</span>
|
|
<panel-list />
|
|
</el-tab-pane>
|
|
<el-tab-pane name="panels_star" :lazy="true">
|
|
<span slot="label"><i class="el-icon-star-off" />{{ $t('panel.store') }}</span>
|
|
<enshrine v-if="showEnshrine" />
|
|
</el-tab-pane>
|
|
<el-tab-pane name="panels_share" :lazy="true">
|
|
<span slot="label"><i class="el-icon-share" />{{ $t('panel.share') }}</span>
|
|
<share-tree v-if="showShare" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</de-aside-container>
|
|
<de-main-container>
|
|
<PanelViewShow v-if="mainActiveName==='PanelMain'" />
|
|
</de-main-container>
|
|
</de-container>
|
|
</template>
|
|
|
|
<script>
|
|
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
|
import DeContainer from '@/components/dataease/DeContainer'
|
|
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
|
import PanelList from '../list/PanelList'
|
|
import PanelViewShow from '../list/PanelViewShow'
|
|
import ShareTree from '../GrantAuth/shareTree'
|
|
import Enshrine from '../enshrine/index'
|
|
|
|
export default {
|
|
name: 'PanelMain',
|
|
components: { DeMainContainer, DeContainer, DeAsideContainer, PanelList, PanelViewShow, ShareTree, Enshrine },
|
|
data() {
|
|
return {
|
|
activeName: 'PanelList',
|
|
showShare: false,
|
|
showEnshrine: false
|
|
}
|
|
},
|
|
computed: {
|
|
mainActiveName() {
|
|
return this.$store.state.panel.mainActiveName
|
|
}
|
|
},
|
|
watch: {
|
|
// 切换展示页面后 重新点击一下当前节点
|
|
'$store.state.panel.mainActiveName': function(newVal, oldVal) {
|
|
if (newVal === 'PanelMain' && this.lastActiveNode && this.lastActiveNodeData) {
|
|
this.activeNodeAndClickOnly(this.lastActiveNodeData)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$store.dispatch('panel/setMainActiveName', 'PanelMain')
|
|
},
|
|
methods: {
|
|
handleClick(tab, event) {
|
|
// 点击分析面板需要刷新分享内容
|
|
if (tab.name === 'panels_share') {
|
|
this.refreshShare()
|
|
}
|
|
if (tab.name === 'panels_star') {
|
|
this.refreshEnshrine()
|
|
}
|
|
},
|
|
refreshShare() {
|
|
this.showShare = false
|
|
this.$nextTick(() => (this.showShare = true))
|
|
},
|
|
refreshEnshrine() {
|
|
this.showEnshrine = false
|
|
this.$nextTick(() => (this.showEnshrine = true))
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ms-aside-container {
|
|
height: calc(100vh - 56px);
|
|
padding: 0px;
|
|
min-width: 260px;
|
|
max-width: 460px;
|
|
}
|
|
.ms-main-container {
|
|
height: calc(100vh - 56px);
|
|
padding: 0px;
|
|
}
|
|
|
|
/*.tab-panel>>>.is-stretch{*/
|
|
/* min-width: 80% !important;*/
|
|
/*}*/
|
|
/*.tab-panel>>>.el-tabs__nav-scroll {*/
|
|
/* overflow: hidden;*/
|
|
/* text-align: center;*/
|
|
/* display: flex;*/
|
|
/* align-items: center;*/
|
|
/* justify-content: center;*/
|
|
/*}*/
|
|
.tab-panel>>>.el-tabs__nav-wrap{
|
|
padding: 0 10px;
|
|
}
|
|
.tab-panel>>>.el-tabs__nav-wrap::after {
|
|
height: 1px;
|
|
}
|
|
.tab-panel>>>.el-tabs__item{
|
|
/* width: 10px; */
|
|
padding: 0 10px;
|
|
}
|
|
</style>
|