django_base/static/admin/simpleui-x/js/index.js

624 lines
21 KiB
JavaScript
Raw Permalink Normal View History

2022-05-06 16:37:35 +08:00
(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);
}
}
})
})();