624 lines
21 KiB
JavaScript
624 lines
21 KiB
JavaScript
|
(function () {
|
|||
|
if (window.frameElement) {
|
|||
|
window.frameElement.contentWindow.parent.callback()
|
|||
|
}
|
|||
|
|
|||
|
window.addEventListener('hashchange', function (e) {
|
|||
|
if (e.newURL != e.oldURL) {
|
|||
|
openByHash()
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
function openByHash() {
|
|||
|
var hash = location.hash;
|
|||
|
hash = hash.substring(1)
|
|||
|
|
|||
|
for (var i = 0; i < app.menuData.length; i++) {
|
|||
|
var item = app.menuData[i]
|
|||
|
if ((item.url || '/') == hash) {
|
|||
|
|
|||
|
app.openTab(item, item.eid, true, false);
|
|||
|
break;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
function changeUrl(data) {
|
|||
|
if (data.url && data.url.indexOf('http') != 0) {
|
|||
|
location.hash = '#' + (data.url || '/')
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
window.callback = function () {
|
|||
|
window.location.reload()
|
|||
|
}
|
|||
|
|
|||
|
var fontConfig = new Vue({
|
|||
|
// el: '#dynamicCss',
|
|||
|
data: {
|
|||
|
fontSize: null
|
|||
|
},
|
|||
|
created: function () {
|
|||
|
var val = getCookie('fontSize');
|
|||
|
if (val) {
|
|||
|
this.fontSize = parseInt(val);
|
|||
|
} else {
|
|||
|
this.fontSize = 0;
|
|||
|
}
|
|||
|
},
|
|||
|
watch: {
|
|||
|
fontSize: function (newValue) {
|
|||
|
if (newValue != 0) {
|
|||
|
var fontStyle = document.getElementById('fontStyle');
|
|||
|
if (!fontStyle) {
|
|||
|
fontStyle = document.createElement('style');
|
|||
|
fontStyle.id = 'fontStyle';
|
|||
|
fontStyle.type = 'text/css';
|
|||
|
document.head.append(fontStyle);
|
|||
|
}
|
|||
|
fontStyle.innerHTML = '*{font-size:' + newValue + 'px!important;}'
|
|||
|
|
|||
|
} else {
|
|||
|
var fontStyle = document.getElementById('fontStyle');
|
|||
|
if (fontStyle) {
|
|||
|
fontStyle.remove();
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
},
|
|||
|
methods: {}
|
|||
|
});
|
|||
|
|
|||
|
// Waves.init();
|
|||
|
|
|||
|
//为元素注册水波纹效果
|
|||
|
Vue.directive('waves', {
|
|||
|
// 当被绑定的元素插入到 DOM 中时……
|
|||
|
inserted: function (el) {
|
|||
|
// 聚焦元素
|
|||
|
Waves.attach(el);
|
|||
|
Waves.init();
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
|
|||
|
window.getLanuage = function (key) {
|
|||
|
if (!window.Lanuages) {
|
|||
|
return "";
|
|||
|
}
|
|||
|
var val = Lanuages[key];
|
|||
|
if (!val || val == "") {
|
|||
|
val = key;
|
|||
|
}
|
|||
|
return val
|
|||
|
}
|
|||
|
|
|||
|
new Vue({
|
|||
|
el: '#main',
|
|||
|
data: {
|
|||
|
drawer: false,
|
|||
|
mobile: false,
|
|||
|
upgrade: {
|
|||
|
isUpdate: false,
|
|||
|
body: '',
|
|||
|
version: '',
|
|||
|
dialogVisible: false
|
|||
|
},
|
|||
|
isResize: false,
|
|||
|
searchInput: '',
|
|||
|
height: 1000,
|
|||
|
fold: false,
|
|||
|
zoom: false,
|
|||
|
timeline: true,
|
|||
|
tabs: [home],
|
|||
|
tabModel: 0,
|
|||
|
tabIndex: 0,
|
|||
|
menus: [],
|
|||
|
menuActive: '0',
|
|||
|
breadcrumbs: [],
|
|||
|
language: window.language,
|
|||
|
pwdDialog: {},
|
|||
|
themeDialogVisible: false,
|
|||
|
small: false,
|
|||
|
themes: SimpleuiThemes,
|
|||
|
theme: "",
|
|||
|
themeName: "",
|
|||
|
popup: {
|
|||
|
left: 0,
|
|||
|
top: 0,
|
|||
|
show: false,
|
|||
|
tab: null,
|
|||
|
menus: [{
|
|||
|
text: getLanuage('Refresh'),
|
|||
|
icon: 'el-icon-refresh',
|
|||
|
handler: function (tab, item) {
|
|||
|
try {
|
|||
|
document.getElementById(tab.id).contentWindow.location.reload(true);
|
|||
|
} catch (e) {
|
|||
|
console.log(e)
|
|||
|
var url = tab.url.split('?')[0];
|
|||
|
tab.url = url + '?_=' + new Date().getTime()
|
|||
|
}
|
|||
|
}
|
|||
|
}, {
|
|||
|
text: getLanuage('Close current'),
|
|||
|
icon: 'el-icon-circle-close',
|
|||
|
handler: function (tab, item) {
|
|||
|
app.handleTabsEdit(tab.id, 'remove');
|
|||
|
}
|
|||
|
}, {
|
|||
|
text: getLanuage('Close other'),
|
|||
|
icon: 'far fa-copy',
|
|||
|
handler: function (tab) {
|
|||
|
app.tabs.forEach(item => {
|
|||
|
if (item.id != tab.id) {
|
|||
|
app.handleTabsEdit(item.id, 'remove');
|
|||
|
}
|
|||
|
})
|
|||
|
}
|
|||
|
}, {
|
|||
|
text: getLanuage('Close all'),
|
|||
|
icon: 'el-icon-close',
|
|||
|
handler: function (tab, item) {
|
|||
|
|
|||
|
app.$confirm(Lanuages["Are you sure you want them all closed"], Lanuages.Tips, {
|
|||
|
confirmButtonText: Lanuages.ConfirmYes,
|
|||
|
cancelButtonText: Lanuages.ConfirmNo,
|
|||
|
type: 'warning'
|
|||
|
}).then(function () {
|
|||
|
app.tabs.forEach((tab, index) => {
|
|||
|
if (index != 0) {
|
|||
|
app.handleTabsEdit(tab.id, 'remove');
|
|||
|
}
|
|||
|
});
|
|||
|
app.menuActive = '1';
|
|||
|
}).catch(function () {
|
|||
|
|
|||
|
});
|
|||
|
|
|||
|
}
|
|||
|
}, {
|
|||
|
text: getLanuage('Open in a new page'),
|
|||
|
icon: 'el-icon-news',
|
|||
|
handler: function (tab, item) {
|
|||
|
window.open(tab.newUrl);
|
|||
|
}
|
|||
|
}]
|
|||
|
},
|
|||
|
//菜单里面的模块
|
|||
|
models: [],
|
|||
|
fontDialogVisible: false,
|
|||
|
fontSlider: 12,
|
|||
|
loading: false,
|
|||
|
menuTextShow: true,
|
|||
|
menuData: []
|
|||
|
},
|
|||
|
watch: {
|
|||
|
theme: function (newValue, oldValue) {
|
|||
|
this.$nextTick(function () {
|
|||
|
if (window.renderCallback) {
|
|||
|
window.renderCallback(this);
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
fold: function (newValue, oldValue) {
|
|||
|
// console.log(newValue)
|
|||
|
},
|
|||
|
menus: function (newValue, oldValue) {
|
|||
|
var self = this;
|
|||
|
|
|||
|
newValue.forEach(item => {
|
|||
|
if (item.id == '0') {
|
|||
|
return;
|
|||
|
}
|
|||
|
|
|||
|
let models = [];
|
|||
|
|
|||
|
function deep(menus) {
|
|||
|
menus.forEach(item => {
|
|||
|
//这是首页,不显示
|
|||
|
if (item.eid === "1") {
|
|||
|
return;
|
|||
|
}
|
|||
|
|
|||
|
if (item.models) {
|
|||
|
deep(item.models);
|
|||
|
} else {
|
|||
|
//没有子级的时候,才加入到首页菜单中去
|
|||
|
models.push(item);
|
|||
|
}
|
|||
|
|
|||
|
})
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
deep(newValue);
|
|||
|
|
|||
|
self.models = models;
|
|||
|
|
|||
|
});
|
|||
|
}
|
|||
|
/*,
|
|||
|
tabs: function (newValue, oldValue) {
|
|||
|
|
|||
|
//改变tab时把状态储存到sessionStorage
|
|||
|
console.log(newValue)
|
|||
|
}*/
|
|||
|
},
|
|||
|
created: function () {
|
|||
|
|
|||
|
// this.watch.theme('');
|
|||
|
|
|||
|
var val = getCookie('fold') == 'true';
|
|||
|
this.small = this.fold = val;
|
|||
|
this.menuTextShow = !this.fold;
|
|||
|
|
|||
|
var self = this;
|
|||
|
window.onresize = function () {
|
|||
|
|
|||
|
self.height = document.documentElement.clientHeight || document.body.clientHeight
|
|||
|
var width = document.documentElement.clientWidth || document.body.clientWidth;
|
|||
|
|
|||
|
if (!self.small) {
|
|||
|
|
|||
|
self.menuTextShow = !(width < 800);
|
|||
|
self.$nextTick(() => {
|
|||
|
self.fold = width < 800;
|
|||
|
})
|
|||
|
}
|
|||
|
self.isResize = true;
|
|||
|
self.mobile = width < 800;
|
|||
|
|
|||
|
//判断全屏状态
|
|||
|
try {
|
|||
|
self.zoom = document.webkitIsFullScreen;
|
|||
|
} catch (e) {
|
|||
|
//不是非webkit内核下,无能为力
|
|||
|
}
|
|||
|
}
|
|||
|
window.app = this;
|
|||
|
|
|||
|
|
|||
|
menus = this.handlerMenus(menus);
|
|||
|
|
|||
|
this.menus = window.menus
|
|||
|
|
|||
|
this.theme = getCookie('theme');
|
|||
|
this.themeName = getCookie('theme_name');
|
|||
|
|
|||
|
|
|||
|
//接收子页面的事件注册
|
|||
|
window.themeEvents = [];
|
|||
|
window.fontEvents = [];
|
|||
|
window.addEvent = function (name, handler) {
|
|||
|
if (name == 'theme') {
|
|||
|
themeEvents.push(handler);
|
|||
|
} else if (name == 'font') {
|
|||
|
fontEvents.push(handler);
|
|||
|
}
|
|||
|
}
|
|||
|
var temp_tabs = sessionStorage['tabs'];
|
|||
|
|
|||
|
if (temp_tabs && temp_tabs != '') {
|
|||
|
this.tabs = JSON.parse(temp_tabs);
|
|||
|
}
|
|||
|
if (location.hash != '') {
|
|||
|
openByHash();
|
|||
|
}
|
|||
|
|
|||
|
//elementui布局问题,导致页面不能正常撑开,调用resize使其重新计算
|
|||
|
if (window.onresize) {
|
|||
|
window.onresize();
|
|||
|
}
|
|||
|
this.$nextTick(function () {
|
|||
|
if (window.renderCallback) {
|
|||
|
window.renderCallback(this);
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
methods: {
|
|||
|
handlerMenus(menus) {
|
|||
|
let self = this;
|
|||
|
menus.forEach(item => {
|
|||
|
item.icon = getIcon(item.name, item.icon);
|
|||
|
|
|||
|
if (item.models) {
|
|||
|
item.models.forEach(mItem => {
|
|||
|
mItem.icon = getIcon(mItem.name, mItem.icon);
|
|||
|
self.menuData.push(mItem)
|
|||
|
if (mItem.models) {
|
|||
|
self.handlerMenus(mItem.models);
|
|||
|
}
|
|||
|
});
|
|||
|
} else {
|
|||
|
self.menuData.push(item)
|
|||
|
}
|
|||
|
});
|
|||
|
return menus;
|
|||
|
},
|
|||
|
syncTabs: function () {
|
|||
|
if (window.sessionStorage) {
|
|||
|
sessionStorage['tabs'] = JSON.stringify(this.tabs);
|
|||
|
}
|
|||
|
},
|
|||
|
reset: function () {
|
|||
|
this.fontSlider = 14;
|
|||
|
fontConfig.fontSize = 0;
|
|||
|
|
|||
|
setCookie('fontSize', 0);
|
|||
|
|
|||
|
this.fontDialogVisible = false;
|
|||
|
fontEvents.forEach(handler => {
|
|||
|
handler(0);
|
|||
|
});
|
|||
|
},
|
|||
|
fontClick: function () {
|
|||
|
this.fontSlider = fontConfig.fontSize;
|
|||
|
this.fontDialogVisible = !this.fontDialogVisible;
|
|||
|
},
|
|||
|
fontSlideChange: function (value) {
|
|||
|
fontConfig.fontSize = value;
|
|||
|
//写入cookie
|
|||
|
setCookie('fontSize', value);
|
|||
|
fontEvents.forEach(handler => {
|
|||
|
handler(value);
|
|||
|
});
|
|||
|
|
|||
|
},
|
|||
|
iframeLoad: function (tab, e) {
|
|||
|
url = e.target.contentWindow.location.href
|
|||
|
|
|||
|
tab.newUrl = url;
|
|||
|
tab.loading = false;
|
|||
|
this.$forceUpdate();
|
|||
|
var self = this;
|
|||
|
e.target.contentWindow.beforeLoad = function () {
|
|||
|
tab.loading = true;
|
|||
|
self.$forceUpdate();
|
|||
|
}
|
|||
|
this.loading = false;
|
|||
|
},
|
|||
|
setTheme: function (item) {
|
|||
|
var url = window.themeUrl;
|
|||
|
if (item.file && item.file != '') {
|
|||
|
this.theme = url + item.file;
|
|||
|
} else {
|
|||
|
this.theme = '';
|
|||
|
}
|
|||
|
this.themeName = item.text;
|
|||
|
setCookie('theme', this.theme);
|
|||
|
setCookie('theme_name', item.text);
|
|||
|
|
|||
|
var self = this;
|
|||
|
//通知子页面
|
|||
|
window.themeEvents.forEach(handler => {
|
|||
|
handler(self.theme)
|
|||
|
});
|
|||
|
},
|
|||
|
openUrl: function (url) {
|
|||
|
window.open(url);
|
|||
|
},
|
|||
|
contextmenu: function (item, e) {
|
|||
|
//右键菜单,如果x+菜单宽度超过屏幕宽度,就默认为屏幕宽度-10-菜单宽度
|
|||
|
|
|||
|
//home没有popup menu
|
|||
|
if (item.id == '0') {
|
|||
|
return;
|
|||
|
}
|
|||
|
this.popup.tab = item;
|
|||
|
this.popup.show = true;
|
|||
|
this.$nextTick(function () {
|
|||
|
let el = this.$refs.popupmenu;
|
|||
|
el.style.width = '150px';
|
|||
|
let x = e.clientX;
|
|||
|
|
|||
|
let w = document.body.offsetWidth
|
|||
|
if (x + 150 > w) {
|
|||
|
x = w - 160;
|
|||
|
}
|
|||
|
|
|||
|
this.popup.left = x;
|
|||
|
this.popup.top = e.clientY;
|
|||
|
});
|
|||
|
},
|
|||
|
mainClick: function (e) {
|
|||
|
this.popup.show = false;
|
|||
|
},
|
|||
|
tabClick: function (tab) {
|
|||
|
var item = this.tabs[tab.index];
|
|||
|
var index = item.index;
|
|||
|
this.menuActive = String(index);
|
|||
|
this.breadcrumbs = item.breadcrumbs;
|
|||
|
if (tab.index == '0') {
|
|||
|
item.url = '/'
|
|||
|
}
|
|||
|
changeUrl(item);
|
|||
|
},
|
|||
|
handleTabsEdit: function (targetName, action) {
|
|||
|
|
|||
|
var self = this;
|
|||
|
if (action === 'remove') {
|
|||
|
var next = '0';
|
|||
|
this.tabs.forEach((tab, index) => {
|
|||
|
if (tab.id == targetName) {
|
|||
|
var temp = self.tabs[index + 1] || self.tabs[index - 1];
|
|||
|
if (temp) {
|
|||
|
next = temp.id;
|
|||
|
self.menuActive = temp.index;
|
|||
|
self.breadcrumbs = temp.breadcrumbs;
|
|||
|
changeUrl(temp)
|
|||
|
}
|
|||
|
}
|
|||
|
});
|
|||
|
this.tabModel = next;
|
|||
|
|
|||
|
if (targetName != 0) {
|
|||
|
this.tabs = this.tabs.filter(tab => tab.id !== targetName);
|
|||
|
}
|
|||
|
this.syncTabs();
|
|||
|
}
|
|||
|
}
|
|||
|
,
|
|||
|
openTab: function (data, index, selected, loading) {
|
|||
|
if (data.breadcrumbs) {
|
|||
|
this.breadcrumbs = data.breadcrumbs;
|
|||
|
}
|
|||
|
//如果data没有eid,就直接打开或者添加,根据url
|
|||
|
if (!data.eid) {
|
|||
|
data.eid = new Date().getTime() + "" + Math.random();
|
|||
|
}
|
|||
|
|
|||
|
if (index) {
|
|||
|
this.menuActive = String(index);
|
|||
|
}
|
|||
|
if (selected) {
|
|||
|
//找到name,打开
|
|||
|
// console.log(data)
|
|||
|
for (var i = 0; i < this.tabs.length; i++) {
|
|||
|
if (this.tabs[i].url == data.url) {
|
|||
|
this.tabModel = this.tabs[i].id;
|
|||
|
break;
|
|||
|
}
|
|||
|
}
|
|||
|
return;
|
|||
|
}
|
|||
|
|
|||
|
this.breadcrumbs = data.breadcrumbs;
|
|||
|
var exists = null;
|
|||
|
//判断是否存在,存在就直接打开
|
|||
|
for (var i = 0; i < this.tabs.length; i++) {
|
|||
|
var tab = this.tabs[i];
|
|||
|
if (tab.eid == data.eid) {
|
|||
|
exists = tab;
|
|||
|
continue;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
if (exists) {
|
|||
|
this.tabModel = exists.id;
|
|||
|
} else {
|
|||
|
//其他的网址loading会一直转
|
|||
|
if (data.url && data.url.indexOf('http') != 0) {
|
|||
|
if (loading) {
|
|||
|
data.loading = true;
|
|||
|
this.loading = true;
|
|||
|
} else {
|
|||
|
data.loading = false;
|
|||
|
this.loading = false;
|
|||
|
}
|
|||
|
}
|
|||
|
// data.id = new Date().getTime() + "" + Math.random();
|
|||
|
data.id = data.eid;
|
|||
|
data.index = index;
|
|||
|
this.tabs.push(data);
|
|||
|
this.tabModel = data.id;
|
|||
|
}
|
|||
|
changeUrl(data)
|
|||
|
this.syncTabs();
|
|||
|
}
|
|||
|
,
|
|||
|
foldClick: function () {
|
|||
|
|
|||
|
//移动端浮动菜单
|
|||
|
var width = document.documentElement.clientWidth || document.body.clientWidth;
|
|||
|
if (width < 800) {
|
|||
|
this.drawer = !this.drawer;
|
|||
|
return;
|
|||
|
}
|
|||
|
this.menuTextShow = !this.menuTextShow;
|
|||
|
this.$nextTick(() => {
|
|||
|
this.fold = !this.fold;
|
|||
|
|
|||
|
this.small = this.fold;
|
|||
|
//设置进cookie
|
|||
|
setCookie('fold', this.fold);
|
|||
|
});
|
|||
|
|
|||
|
|
|||
|
}
|
|||
|
,
|
|||
|
changePassword: function () {
|
|||
|
var width = document.documentElement.clientWidth || document.body.clientWidth;
|
|||
|
if (width > 800) {
|
|||
|
this.pwdDialog = {
|
|||
|
url: window.urls.changePassword + '?dialog=1',
|
|||
|
name: language.change_password,
|
|||
|
show: true
|
|||
|
};
|
|||
|
} else {
|
|||
|
this.openTab({
|
|||
|
url: window.urls.changePassword,
|
|||
|
icon: 'far fa-edit',
|
|||
|
name: language.change_password,
|
|||
|
breadcrumbs: [{
|
|||
|
name: language.change_password,
|
|||
|
icon: 'far fa-edit'
|
|||
|
}]
|
|||
|
})
|
|||
|
app.breadcrumbs = [language.change_password];
|
|||
|
}
|
|||
|
}
|
|||
|
,
|
|||
|
logout: function () {
|
|||
|
this.$confirm(language.confirm, Lanuages.Tips, {
|
|||
|
confirmButtonText: language.yes,
|
|||
|
cancelButtonText: language.no,
|
|||
|
type: 'warning'
|
|||
|
}).then(function () {
|
|||
|
//清除cookie主题设置和sessionStore数据
|
|||
|
delete sessionStorage['tabs'];
|
|||
|
setCookie('theme', '');
|
|||
|
setCookie('theme_name', '');
|
|||
|
window.location.href = window.urls.logout;
|
|||
|
}).catch(function () {
|
|||
|
|
|||
|
});
|
|||
|
}
|
|||
|
,
|
|||
|
goIndex: function (url) {
|
|||
|
if (!url || url == 'None') {
|
|||
|
url = '/';
|
|||
|
}
|
|||
|
window.open(url);
|
|||
|
}
|
|||
|
,
|
|||
|
getLanuage: getLanuage,
|
|||
|
getIcon: getIcon,
|
|||
|
goZoom: function () {
|
|||
|
var el = window.document.body;
|
|||
|
if (!this.zoom) {
|
|||
|
|
|||
|
var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
|
|||
|
if (!isFullscreen) {//进入全屏,多重短路表达式
|
|||
|
(el.requestFullscreen && el.requestFullscreen()) ||
|
|||
|
(el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
|
|||
|
(el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || (el.msRequestFullscreen && el.msRequestFullscreen());
|
|||
|
}
|
|||
|
this.zoom = true;
|
|||
|
} else {
|
|||
|
|
|||
|
document.exitFullscreen ? document.exitFullscreen() :
|
|||
|
document.mozCancelFullScreen ? document.mozCancelFullScreen() :
|
|||
|
document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
|
|||
|
this.zoom = false;
|
|||
|
}
|
|||
|
}
|
|||
|
,
|
|||
|
displayTimeline: function () {
|
|||
|
this.timeline = !this.timeline;
|
|||
|
},
|
|||
|
report: function (url) {
|
|||
|
if (!url) {
|
|||
|
if (document.querySelector('html').lang) {
|
|||
|
url = 'https://simpleui.72wo.com';
|
|||
|
} else {
|
|||
|
url = 'https://github.com/newpanjing/simpleui/issues';
|
|||
|
}
|
|||
|
}
|
|||
|
window.open(url);
|
|||
|
}
|
|||
|
}
|
|||
|
})
|
|||
|
|
|||
|
|
|||
|
})();
|