302 lines
13 KiB
HTML
302 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>MetaKit</title>
|
||
<link rel="stylesheet" href="/res/zui/css/zui.min.css">
|
||
<!--<link rel="stylesheet" href="/res/css/zui-theme.css">-->
|
||
<link rel="stylesheet" href="/res/css/zui-theme-x.css">
|
||
<link rel="stylesheet" href="/res/css/red-kit.css">
|
||
<link rel="stylesheet" href="/res/ztree/zTreeStyle.css">
|
||
</head>
|
||
<body id="home">
|
||
<div class="container-fluid">
|
||
<row>
|
||
<div class="col-md-12 col-xs-12" id="top">
|
||
<div class="logo">
|
||
<!--<h1>Meta-Kit</h1>-->
|
||
<h1>{{sysPlat.platname}}</h1>
|
||
</div>
|
||
<ul class="nav nav-tabs">
|
||
<!--item in pages-->
|
||
<li v-for="item in pages" @click="loadMain(item)" :class="{active:item.name==pageId}">
|
||
<a data-tab href="#" v-text="item.name"></a>
|
||
</li>
|
||
|
||
<li class="pull-right" title="刷新服务端缓存数据">
|
||
<a @click="refresh()" href="javascript:;" class="btn btn-default" style="padding: 6px 15px;border: 0;background-color: #404a53!important;color: #fff;">
|
||
<i class="icon icon-repeat"></i>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="pull-right">
|
||
<a @click="logout()" href="javascript:;" class="btn btn-default" style="padding: 6px 15px;border: 0;background-color: #404a53!important;color: #fff;">
|
||
<i class="icon icon-user"></i> 退出
|
||
</a>
|
||
</li>
|
||
|
||
<li class="pull-right">
|
||
<select v-model="sysPlat" class="form-control plat-switch">
|
||
<option v-for="item in sysPlats" :value="item" v-text="item.platname"></option>
|
||
</select>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="mainDiv" :class="{leftMini:leftMini}">
|
||
<div :class="['col-md-1 col-xs-1']" id="left">
|
||
<nav class="menu" data-ride="menu">
|
||
<ul class="nav nav-primary">
|
||
<li class="active show nav-parent" style="width: 100%;">
|
||
<!--<a href="javascript:;"><i class="icon icon-tasks"></i> <span v-text="pageId"></span></a>-->
|
||
<ul class="nav" v-if="!leftMini">
|
||
<!-- item in menus -->
|
||
<li v-for="item in menus" @click="loadPage(item)" :class="{active:page.url==item.url}">
|
||
<a href="javascript:;"><i :class="['icon', item.icon ? item.icon : 'icon-circle-blank']"></i> <span v-text="item.name"></span></a>
|
||
</li>
|
||
|
||
</ul>
|
||
<ul class="nav" v-if="leftMini">
|
||
<!-- item in menus -->
|
||
<li v-for="item in menus" @click="loadPage(item)" :class="{active:page.url==item.url}"
|
||
data-toggle="tooltip"
|
||
:title="item.name">
|
||
<a href="javascript:;"><i
|
||
:class="['icon', item.icon ? item.icon : 'icon-circle-blank']"></i>
|
||
<!--<span v-text="item.name"></span>-->
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<!--<div class="user">
|
||
<a style="cursor: pointer">绝尘</a>
|
||
</div>-->
|
||
<div class="footer" @click="leftMiniSwitch()">
|
||
<i :class="['icon', leftMini? 'icon-caret-right':'icon-caret-left']"></i>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<div class="col-md-11 col-xs-11">
|
||
<!--<div style="height: 40px;background-color: #fff;"></div>-->
|
||
<!-- load main body to here -->
|
||
<div id="main"></div>
|
||
<div class="footer">
|
||
Meta-Kit Dev-v0.2.1
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</row>
|
||
</div>
|
||
|
||
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
|
||
<script src="/res/libs/vue.min.js"></script>
|
||
<script src="/res/zui/lib/jquery/jquery.js"></script>
|
||
<script src="/res/libs/axios.min.js"></script>
|
||
<script src="/res/zui/js/zui.js"></script>
|
||
<script src="/res/js/red.js"></script>
|
||
<script src="/api/meta.js"></script>
|
||
<script src="/api/plat.js"></script>
|
||
<script src="/api/qtask.js"></script>
|
||
<script src="/api/db.js"></script>
|
||
<script src="/api/table.js"></script>
|
||
<script src="/api/dict.js"></script>
|
||
<script src="/api/tmp.js"></script>
|
||
<script src="/res/zui/lib/sortable/zui.sortable.js"></script>
|
||
<script src="/res/zui/lib/uploader/zui.uploader.min.js"></script>
|
||
<script src="/res/ztree/jquery.ztree.all.min.js"></script>
|
||
<script type="module">
|
||
import { logout } from './api/user.js'
|
||
let { refresh } = meta
|
||
let { platList } = plat
|
||
let { dictData } = dict
|
||
|
||
let dictKv = {} //字典数据
|
||
let vm = new Vue({
|
||
el: ".container-fluid",
|
||
data: {
|
||
sysPlat: red.getData('sysPlat'),
|
||
sysPlats: red.getData('sysPlats'),
|
||
pages: [
|
||
/*{name: "DDL", url: "/qtask/ddl.html"},*/
|
||
{name: "元服务", url: "/meta", nodes: [
|
||
/*{url:"/metadata/metatable/list.html", name:"TableList"},*/
|
||
{url:"/metadata/metatable/metaTable.html", name:"实体管理", icon: "icon-cubes"},
|
||
/*{url:"/metadata/metatable/import.html", name:"导入实体"},*/
|
||
{url:"/metadata/metaLink.html", name:"实体关系", icon:"icon-branch"},
|
||
{url:"/metadata/metaService.html", name:"业务管理", icon: "icon-sliders"},
|
||
{url:"/metadata/dataList.html", name:"业务预览", icon:"icon-window-alt"},
|
||
/*{url: "/oth/ddlCompare.html", name: "DDL-Compare", icon: "icon-table"},*/
|
||
/*{url:"/metadata/dict.html", name:"字典管理", icon:"icon-usecase"},*/
|
||
/*{url:"/content/list.html", name:"游戏查询", icon:"icon-usecase"},
|
||
{url:"/content/funs.html", name:"平台功能", icon:"icon-usecase"},*/
|
||
]
|
||
},
|
||
{
|
||
name: "QTask", url: "/qtask", nodes: [
|
||
{url:"/qtask/list.html", name:"QTask", icon:"icon-cube-alt"},
|
||
/*{url:"/qtask/debug.html", name:"QTask-Debug", icon:"icon-bug"},*/
|
||
]
|
||
},
|
||
{
|
||
name: "平台管理", url: "/plat/db.html", nodes: [
|
||
{url:"/plat/db.html", name:"数据源", icon: "icon-database"},
|
||
{url:"/plat/index.html", name:"应用平台", icon:"icon-server"},
|
||
]
|
||
},
|
||
{name: "关于", url: "/single", nodes: [
|
||
{url:"/single/about.html", name:"关于MetaKit", icon:"icon-server"},
|
||
{url:"/single/code.html", name:"整体实现", icon:"icon-server"},
|
||
{url:"/single/core.html", name:"组件关系", icon:"icon-server"},
|
||
{url:"/single/metaFlow.html", name:"MetaKit使用", icon:"icon-server"},
|
||
]
|
||
},
|
||
/*{
|
||
name: "其他服务", url: "/plat/db.html", nodes: [
|
||
{url:"/oth/index.html", name:"业务平台管理", icon: "icon-database"},
|
||
{url:"/oth/file.html", name:"文件服务", icon: "icon-database"},
|
||
{url:"/content/create.html", name:"内容管理", icon:"icon-edit-sign"},
|
||
{url:"/plat/dev.html", name:"dev", icon:"icon-beaker"},
|
||
]
|
||
},*/
|
||
{name: "Zhub", url: "/zhub", nodes: [
|
||
{url:"/zhub/monitor.html", name:"Monitor", icon:"icon-server"},
|
||
{url:"/zhub/topic.html", name:"Topics", icon:"icon-server"},
|
||
{url:"/zhub/delay.html", name:"Delays", icon:"icon-server"},
|
||
{url:"/zhub/timer.html", name:"Timer", icon:"icon-server"},
|
||
]
|
||
},
|
||
/*{name: "微信公众号", url: "/weixin", nodes: [
|
||
{url:"/weixin/wxapp.html", name:"公众号管理", icon:"icon-server"},
|
||
{url:"/weixin/user.html", name:"用户管理", icon:"icon-server"},
|
||
{url:"/weixin/templateMessage.html", name:"模板消息", icon:"icon-server"},
|
||
{url:"/weixin/timer.html", name:"Timer", icon:"icon-server"},
|
||
]
|
||
}*/
|
||
],
|
||
menus: {},
|
||
page: {},
|
||
pageId: '',
|
||
leftMini: red.getData('leftMini') === 'Min',
|
||
},
|
||
watch: {
|
||
page: function () {
|
||
//page main chenged，up all cache for munus/pageId/page data
|
||
red.setData("page", this.page);
|
||
red.setData("menus", this.menus);
|
||
red.setData("pageId", this.pageId);
|
||
},
|
||
sysPlat: function (v) {
|
||
red.setData("sysPlat", v);
|
||
this.loadPage();
|
||
},
|
||
leftMini: function () {
|
||
this.tooltipShow()
|
||
},
|
||
menus: function () {
|
||
this.tooltipShow()
|
||
}
|
||
},
|
||
methods: {
|
||
loadPage(page) {
|
||
if (page && this.page.url == page.url) {
|
||
return false;
|
||
}
|
||
page = page || this.page;
|
||
this.page = page;
|
||
$("#main").load(page.url, () => this.showInfo());
|
||
|
||
},
|
||
showInfo() {
|
||
if (red.getData('userName') === 'root' || red.getData('userName') === 'admin') {
|
||
$('#main .info').show()
|
||
}
|
||
},
|
||
loadMain(item) {
|
||
this.menus = item.nodes || [item];
|
||
this.pageId = item.name;
|
||
|
||
// 加载新模块下的第一个
|
||
this.loadPage(this.menus[0]);
|
||
},
|
||
refresh() {
|
||
refresh().then(res => {
|
||
platList().then(res => { // 刷新平台列表缓存
|
||
let rows = res.rows
|
||
this.sysPlats = rows
|
||
red.setData("sysPlats", rows)
|
||
})
|
||
this.loadDictData()
|
||
red.showOk()
|
||
})
|
||
},
|
||
logout() {
|
||
logout()
|
||
},
|
||
|
||
loadDictData() {
|
||
|
||
|
||
dictData().then(res => {
|
||
let data = {}
|
||
for (let k in res) {
|
||
let vs = {}
|
||
for(let i in res[k]) {
|
||
vs[res[k][i]['value']] = res[k][i]['label']
|
||
}
|
||
data[k] = vs
|
||
}
|
||
red.setData("dictKv", data)
|
||
red.getData()
|
||
})
|
||
},
|
||
|
||
leftMiniSwitch() {
|
||
this.leftMini = !this.leftMini;
|
||
red.setData("leftMini", this.leftMini ? 'Min' : 'Max');
|
||
},
|
||
tooltipShow() {
|
||
$('[data-toggle="tooltip"]').tooltip('destroy');
|
||
if (!this.leftMini) {
|
||
return
|
||
}
|
||
setTimeout(function () {
|
||
$('[data-toggle="tooltip"]').tooltip({placement: 'right'});
|
||
}, 5)
|
||
},
|
||
},
|
||
mounted: function () {
|
||
this.loadDictData()
|
||
|
||
this.menus = red.getData('menus', this.pages[0]['nodes'])
|
||
this.page = red.getData('page', this.menus[0])
|
||
this.pageId = red.getData("pageId", this.page['mame'])
|
||
//绑定事件
|
||
$('.menu .nav').on('click', 'li:not(.nav-parent) > a', function() {
|
||
let $this = $(this);
|
||
$('.menu .nav .active').removeClass('active');
|
||
$this.closest('li').addClass('active');
|
||
$this.closest('.nav-parent').addClass('active');
|
||
});
|
||
|
||
$("#main").load(this.page.url,() => this.showInfo());
|
||
//this.loadPage(this.page);
|
||
|
||
//监听浏览器窗口大小变化
|
||
function autoLeftHeight() {
|
||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||
$("#left").attr("style", "height:" + (h - 50) + "px");
|
||
$("#main").attr("style", "height:" + (h - 90) + "px; overflow: auto;");
|
||
$(".sheet-cell").attr("style", "height:" + (h - 265) + "px;margin-bottom:20px;");
|
||
}
|
||
autoLeftHeight();
|
||
$(window).resize(function () {
|
||
autoLeftHeight();
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |