168 lines
3.9 KiB
Vue
168 lines
3.9 KiB
Vue
<template>
|
||
<div class="home">
|
||
<!-- 使用topology组件 -->
|
||
<topology
|
||
:configs="topologyConfigs"
|
||
:materials="materials"
|
||
:user="user"
|
||
:data="data"
|
||
@event="onEvent"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Vue from 'vue'
|
||
// 导入topology-vue组件
|
||
import topology from 'topology-vue'
|
||
// 需要导入topology-vue.css
|
||
import '@/styles/topology-vue.css'
|
||
Vue.use(topology)
|
||
import {
|
||
defalutMenus,
|
||
defalutUserMenus,
|
||
defalutMaterials,
|
||
images
|
||
} from './data'
|
||
|
||
export default {
|
||
name: 'Home',
|
||
data: function() {
|
||
return {
|
||
topologyConfigs: {
|
||
license: {
|
||
key: '企业版授权码',
|
||
value: '国产原创开源发展做出我们的贡献'
|
||
},
|
||
logo: {
|
||
img: 'http://topology.le5le.com/assets/img/favicon.ico',
|
||
url: 'http://topology.le5le.com',
|
||
target: '_blank'
|
||
},
|
||
menus: defalutMenus,
|
||
loginUrl: 'https://account.le5le.com',
|
||
signupUrl: 'https://account.le5le.com',
|
||
userMenus: defalutUserMenus,
|
||
dataOptionsFn: (pen, key, value) => {
|
||
console.log(pen, key, value)
|
||
const keys = ['aaa', 'bbb']
|
||
const values = [
|
||
{
|
||
value: 111,
|
||
label: '111'
|
||
},
|
||
{
|
||
value: 222,
|
||
label: '222'
|
||
}
|
||
]
|
||
return {
|
||
keys,
|
||
// value: 80,
|
||
values
|
||
}
|
||
}
|
||
},
|
||
user: {
|
||
username: 'le5le'
|
||
},
|
||
materials: {
|
||
system: defalutMaterials,
|
||
user: [],
|
||
images,
|
||
uploadUrl: '/api/file',
|
||
uploadHeaders: {
|
||
Authorization: 'your token'
|
||
},
|
||
uploadParams: {
|
||
mydata: 1
|
||
}
|
||
},
|
||
data: {}
|
||
}
|
||
},
|
||
created: function() {},
|
||
mounted() {
|
||
// 请确保 7777777(类似数字).js 和 rg.js已下载，正确加载
|
||
if (window.registerTools) {
|
||
window.registerTools()
|
||
if (window.topologyTools) {
|
||
this.materials.system[0].list = window.topologyTools
|
||
}
|
||
// 确保从预览页面返回是时清空存储
|
||
const json = sessionStorage.getItem('topologyData')
|
||
if (!this.$route.query.id && json) {
|
||
this.data = JSON.parse(json)
|
||
setTimeout(() => {
|
||
// 读到后清除对应 session
|
||
sessionStorage.removeItem('topologyData')
|
||
}, 200)
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
onEvent(e) {
|
||
switch (e.name) {
|
||
case 'logout':
|
||
// 退出登录
|
||
this.user = null
|
||
// Do sth.
|
||
break
|
||
|
||
case 'openMaterialGroup':
|
||
// 展开/折叠图标工具栏分组
|
||
console.log('openMaterialGroup', e.params)
|
||
// Do sth.
|
||
break
|
||
|
||
case 'addMaterial':
|
||
// 添加“我的组件”
|
||
// Do sth. For example:
|
||
this.$router.push({
|
||
path: '/',
|
||
query: { component: '1' }
|
||
})
|
||
break
|
||
|
||
case 'editMaterial':
|
||
// 编辑“我的组件”
|
||
// Do sth. For example:
|
||
this.$router.push({
|
||
path: '/',
|
||
query: { id: e.params.id, component: '1' }
|
||
})
|
||
break
|
||
|
||
case 'open':
|
||
// 导航菜单configs.menus里面定义的action
|
||
// 比如这里表示打开文件
|
||
break
|
||
case 'save':
|
||
// 导航菜单configs.menus里面定义的action
|
||
// 比如这里表示保存文件
|
||
break
|
||
case 'addImageUrl':
|
||
// 在“我的图片”里面添加了一张新图片
|
||
// this.addImageUrl(e.params);
|
||
break
|
||
case 'deleteImage':
|
||
// 在“我的图片”里面删除了一张图片
|
||
// this.deleteImage(e.params);
|
||
break
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.home {
|
||
height: calc(100vh - 50px);
|
||
}
|
||
.avater{
|
||
display: none;
|
||
}
|
||
a.menu:first-of-type{
|
||
display: none !important
|
||
}
|
||
</style>
|