141 lines
3.9 KiB
Vue
141 lines
3.9 KiB
Vue
<template>
|
||
<el-container :style="{height: mainHeight + 'px'}">
|
||
<el-aside>
|
||
<el-tree :data="assetStructureList"
|
||
:expand-on-click-node="false"
|
||
:load="expandTable"
|
||
lazy
|
||
@node-click="showAssetsFun"
|
||
:props="defaultProps">
|
||
<div class="custom-tree-node" slot-scope="{ node, data }">
|
||
<div v-if="data.type === 'dataSource'">{{ data.name + '('+data.databaseName + '-' + data.systemName+')' }}</div>
|
||
<div v-if="data.type === 'dataTable'">{{ data.name + '-'+data.as + '(' + data.dataTotal+'条)' }}</div>
|
||
</div>
|
||
</el-tree>
|
||
</el-aside>
|
||
<el-container>
|
||
<el-main>
|
||
<OverallAssets v-if="showAssets == null"/>
|
||
<overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/>
|
||
<overall-asset-structure v-if="showAssets === 'dataTable'" :title="tableName"/>
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
|
||
import OverallSpecificAssets from "@/views/assets/table/dashboard/OverallSpecificAssets.vue";
|
||
import OverallAssetStructure from "@/views/assets/table/dashboard/OverallAssetStructure.vue";
|
||
import OverallAssets from "@/views/assets/table/dashboard/OverallAssets.vue";
|
||
import { tableNameList, selNameListStructure, selNameTableList } from "@/api/system/accredit";
|
||
|
||
export default {
|
||
name: 'table',
|
||
components: { OverallAssetStructure, OverallSpecificAssets, OverallAssets },
|
||
data() {
|
||
return {
|
||
tableName: '',
|
||
mainHeight: window.innerHeight - 85,
|
||
defaultProps: {
|
||
children: 'childrenList',
|
||
label: 'name'
|
||
},
|
||
assetStructureList: [
|
||
{
|
||
name: "测试1",
|
||
systemName: "云计算系统",
|
||
databaseName: "yunjisuan",
|
||
type: "dataSource"
|
||
},
|
||
{
|
||
name: "测试2",
|
||
systemName: "网站系统",
|
||
databaseName: "wangzhan",
|
||
type: "dataSource"
|
||
},
|
||
{
|
||
name: "测试3",
|
||
systemName: "物联网系统",
|
||
databaseName: "wulianwang",
|
||
type: "dataSource"
|
||
},
|
||
{
|
||
name: "测试4",
|
||
systemName: "传媒系统",
|
||
databaseName: "chuanmei",
|
||
type: "dataSource"
|
||
},
|
||
],
|
||
childrenList: [],
|
||
showAssets: null,
|
||
title: null
|
||
}
|
||
},
|
||
methods: {
|
||
expandTable( node, resolve){
|
||
if (node.level === 0) return resolve(this.assetStructureList);
|
||
const {data} = node;
|
||
this.showAssets = data.type;
|
||
if (data.type === 'dataTable') {
|
||
this.tableName = data.name
|
||
return resolve([])
|
||
}
|
||
setTimeout(() => {
|
||
resolve(this.childrenList)
|
||
}, 500);
|
||
},
|
||
showAssetsFun(data){
|
||
this.title = data.name + '('+data.databaseName + '-' + data.systemName+')'
|
||
this.showAssets = data.type;
|
||
if (data.as == undefined){
|
||
console.log(1)
|
||
this.tableName = '';
|
||
}else{
|
||
console.log(2)
|
||
this.tableName = data.name
|
||
}
|
||
},
|
||
thisTable() {
|
||
tableNameList().then(res => {
|
||
this.childrenList = res.data
|
||
})
|
||
}
|
||
},
|
||
// 生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
this.thisTable()
|
||
},
|
||
// 生命周期 - 挂载完成（可以访问DOM元素）",
|
||
mounted() {
|
||
},
|
||
beforeCreate() {
|
||
}, // 生命周期 - 创建之前",
|
||
beforeMount() {
|
||
}, // 生命周期 - 挂载之前",
|
||
beforeUpdate() {
|
||
}, // 生命周期 - 更新之前",
|
||
updated() {
|
||
}, // 生命周期 - 更新之后",
|
||
beforeDestroy() {
|
||
}, // 生命周期 - 销毁之前",
|
||
destroyed() {
|
||
}, // 生命周期 - 销毁完成",
|
||
activated() {
|
||
} // 如果页面有keep-alive缓存功能，这个函数会触发",
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.el-aside {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 400px;
|
||
background-color: white;
|
||
}
|
||
.el-main {
|
||
background-color: #f1f1f1;
|
||
}
|
||
.custom-tree-node{
|
||
height: 30px;
|
||
}
|
||
</style>
|