159 lines
4.2 KiB
Vue
159 lines
4.2 KiB
Vue
<template>
|
||
<el-container :style="{height: mainHeight + 'px'}">
|
||
<el-aside>
|
||
<el-tree :data="assetStructureList"
|
||
:load="expandTable"
|
||
:expand-on-click-node="false"
|
||
lazy
|
||
@node-click="(data) => showAuth=data.type"
|
||
: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>
|
||
<auth-data-source v-if="showAuth === 'dataSource'"/>
|
||
<auth-table v-else-if="showAuth === 'dataTable'"/>
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
import { tableNameList, tableNameList2 } from '@/api/system/accredit'
|
||
import AuthDataSource from './auth/AuthDataSource.vue'
|
||
import AuthTable from './auth/AuthTable.vue'
|
||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||
// 例如：import 《组件名称》 from '《组件路径》,
|
||
export default {
|
||
// import引入的组件需要注入到对象中才能使用"
|
||
components: {AuthTable, AuthDataSource},
|
||
props: {},
|
||
data() {
|
||
// 这里存放数据"
|
||
return {
|
||
mainHeight: window.innerHeight - 85,
|
||
defaultProps: {
|
||
children: 'childrenList',
|
||
label: 'name'
|
||
},
|
||
showAuth: null,
|
||
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: [
|
||
{
|
||
name: "sys_user",
|
||
as: "用户表",
|
||
dataTotal: 635847,
|
||
type: "dataTable",
|
||
childrenList: []
|
||
},
|
||
{
|
||
name: "sys_dept",
|
||
as: "部门表",
|
||
dataTotal: 362548,
|
||
type: "dataTable",
|
||
childrenList: []
|
||
},
|
||
{
|
||
name: "sys_notice",
|
||
as: "通知公告",
|
||
dataTotal: 6347,
|
||
type: "dataTable",
|
||
childrenList: []
|
||
}
|
||
]
|
||
}
|
||
},
|
||
// 计算属性 类似于data概念",
|
||
computed: {},
|
||
// 监控data中的数据变化",
|
||
watch: {},
|
||
// 方法集合",
|
||
methods: {
|
||
expandTable(node, resolve) {
|
||
if (node.level === 0) return resolve(this.assetStructureList);
|
||
const {data} = node;
|
||
if (data.type === 'dataTable') {
|
||
return resolve([])
|
||
}
|
||
setTimeout(() => {
|
||
resolve(this.childrenList)
|
||
}, 500);
|
||
},
|
||
thisLib() {
|
||
// tableNameList().then(res => {
|
||
// console.log(res.data)
|
||
// })
|
||
// tableNameList2().then(res => {
|
||
// this.childrenList = res.data
|
||
// console.log(res.data)
|
||
// })
|
||
// }
|
||
},
|
||
// 生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
this.thisLib()
|
||
},
|
||
// 生命周期 - 挂载完成（可以访问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>
|