123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495 |
- var homeTab = {
- id: 'home',
- name: '首页',
- url: 'main.html',
- isNeedLoad: false,
- hideClose: true
- }
- var sa_admin = new Vue({
- components: {
- "nav-logo": httpVueLoader('sa-frame/nav/nav-logo.vue'),
- "nav-menu-bar": httpVueLoader('sa-frame/nav/nav-menu-bar.vue'),
- "nav-tool-bar": httpVueLoader('sa-frame/nav/nav-tool-bar.vue'),
- "nav-tab-bar": httpVueLoader('sa-frame/nav/nav-tab-bar.vue'),
- "nav-view-vessel": httpVueLoader('sa-frame/nav/nav-view-vessel.vue'),
- "com-right-menu": httpVueLoader('sa-frame/nav/com-right-menu.vue'),
- "com-add-tab": httpVueLoader('sa-frame/nav/com-add-tab.vue'),
- },
- el: '.app',
- data: {
-
- title: '',
- logo: '',
- icon: '',
- version: 'v1.40.0',
- updateTime: '2021-9-26',
- githubUrl: 'https://github.com/click33/sa-admin',
- isRemeOpen: true,
- printInfo: true,
- homeTab: homeTab,
- menuList: [],
- showList: [],
-
- plusVersion: 'v1.26.0',
- plusUpdateTime: '2021-10-24',
- plusGithubUrl: 'https://github.com/click33/sa-plus',
-
-
- themeV: localStorage.getItem('themeV') || '1',
- isOpen: true,
- isOpenRight: true,
- activeMenuId: '0',
- isDrag: false,
- dragTab: null,
- tabList: [homeTab],
- viewList: [homeTab],
- nativeTab: homeTab,
- user: null ,
- dropList: [],
- },
- watch: {
-
- title: function(newValue, oldValue) {
- document.querySelector('title').innerHTML = newValue;
- },
-
- icon: function(newValue, oldValue) {
- var icon = newValue;
- var iconTarget = document.querySelector('.admin-icon');
- if(iconTarget) {
- iconTarget.setAttribute('href', icon);
- }
- }
- },
- methods: {
-
-
-
- init: function(option) {
-
-
- this.showTabByHash();
- if(this.nativeTab.id == this.homeTab.id) {
- this.showHome();
- }
-
-
- if(this.printInfo) {
- this.printVesion();
- }
-
-
- window.onresize();
-
- },
-
-
- initMenu: function(showList) {
- this.setMenuList(window.menuList, showList);
- },
-
-
-
- setMenuList: function(menuList, showList) {
-
- this.menuList = this.arrayToTree(menuList);
-
- showList = showList || this.getAllId(this.menuList);
- for (var i = 0; i < showList.length; i++) {
- showList[i] = showList[i] + '';
- }
- this.showList = showList;
- },
-
-
-
- getMenuById: function(id) {
- return this.findMenuById(this.menuList, id);
- },
-
- showMenuById: function(id) {
- var menu = this.getMenuById(id);
- if(menu) {
- this.showTab(menu);
- }
- },
-
- showHome: function() {
- this.showTab(this.homeTab);
- },
-
- getYwList: function() {
- var arr = [];
- function _dg(menuList) {
- menuList = menuList || [];
- for (var i = 0; i < menuList.length; i++) {
- var menu = menuList[i];
- arr.push(menu);
-
- if(menu.childList) {
- _dg(menu.childList);
- }
- }
- }
- _dg(this.menuList);
- return arr;
- },
-
- getAllId: function() {
- var arr = [];
- this.getYwList().forEach(function(item) {
- arr.push(item.id);
- });
- return arr;
- },
-
-
-
- f5Tab: function(tab) {
- var cs = '#iframe-' + tab.id;
- var iframe = document.querySelector(cs);
- if(iframe) {
- iframe.setAttribute('src', this.getTabUrl(tab));
- } else {
- tab.isNeedLoad = false;
- this.$nextTick(function() {
- tab.isNeedLoad = true;
- })
- }
- },
-
- getTabById: function(id) {
- for (var i = 0; i < this.tabList.length; i++) {
- if(this.tabList[i].id + '' == id + '') {
- return this.tabList[i];
- }
- }
- return null;
- },
-
- addTab: function(tab) {
-
- if(!tab.id) {
- tab.id = new Date().getTime() + '' + this.randomNum();
- }
-
- if(tab.view === undefined) {
- if(this.getUrlExt(tab.url).toLowerCase() == 'vue') {
- tab.view = httpVueLoader(tab.url);
- }
- }
- if(tab.isNeedLoad === undefined) {
-
- Vue.set(tab, 'isNeedLoad', true);
- }
-
- this.tabList.push(tab);
- this.viewList.push(tab);
-
- if(this.tabList.length > 20 && this.tabList.length < 30) {
- sa_admin.$message({message: '选项卡过多会造成窗口卡顿,建议您关闭不使用的窗口', type: 'warning'});
- }
- },
-
- showTab: function(tab) {
-
-
- Vue.set(tab, 'isNeedLoad', true);
-
- if(tab.is_blank) {
- return open(tab.url);
- }
-
- if(tab == this.nativeTab) {
- return;
- }
-
- if(tab.click) {
- if(tab.click() !== true) {
- return;
- }
- }
-
- if(this.getTabById(tab.id) == null){
- this.addTab(tab);
- }
-
- this.nativeTab = tab;
-
- this.activeMenuId = tab.id + '';
-
-
- this.$nextTick(function() {
- this.f5HashByNativeTab();
- })
-
-
- this.$nextTick(function() {
- try{
- this.$refs['nav-tab-bar'].scrollToAuto();
- }catch(e){}
- })
- },
-
- showTabById: function(id) {
- var tab = this.getTabById(id);
- if(tab) {
- this.showTab(tab);
- }
- },
-
- closeTab: function(tab, callFn) {
-
-
- if(tab == this.homeTab || tab.hideClose){
- return;
- }
-
-
- var div = document.querySelector('#tab-' + tab.id);
- div.style.width = div.offsetWidth + 'px';
- setTimeout(function() {
- div.style.width = '0px';
- }, 0);
-
-
- setTimeout(function() {
-
-
- if(tab == this.nativeTab) {
- var index = this.tabList.indexOf(tab);
- var preTab = this.tabList[index - 1];
- if(preTab) {
- this.showTab(preTab);
- } else {
- var nextTab = this.tabList[index + 1];
- this.showTab(nextTab);
- }
- }
-
- sa_admin_code_util.arrayDelete(this.tabList, tab);
- sa_admin_code_util.arrayDelete(this.viewList, tab);
-
- if(callFn) {
- this.$nextTick(function() {
- callFn();
- })
- }
- }.bind(this), 150);
- },
-
- closeTabById: function(id, callFn) {
- var tab = this.getTabById(id);
- if(tab) {
- this.closeTab(tab, callFn);
- }
- },
-
- xfTab: function(tab) {
- console.log('悬浮');
-
- var index = layer.open({
- type: 2,
- title: tab.name,
- moveOut: true,
- maxmin: true,
- shadeClose: false,
- shade: 0,
- area: ['80%', '80%'],
- zIndex: layer.zIndex,
- content: this.getTabUrl(tab),
-
- resizing: function (layero) {
- sa_admin_code_util.solveLayerBug(index);
- },
-
- success: function(layero){
- layer.setTop(layero);
- }
- });
-
- document.querySelector('#layui-layer' + index + ' .layui-layer-max').onclick = function() {
- setTimeout(function() {
- sa_admin_code_util.solveLayerBug(index);
- }, 200)
- }
- },
-
- newWinTab: function(tab) {
- open(this.getTabUrl(tab));
-
- },
-
- getTabUrl: function(tab) {
- var cs = '#iframe-' + tab.id;
- var iframe = document.querySelector(cs);
- if(!iframe) {
- return tab.url;
- }
- try{
- return iframe.contentWindow.location.href;
- }catch(e){
- return iframe.getAttribute('src');
- }
- },
-
-
-
- startOpen: function() {
- this.isOpen = true;
- setTimeout(function() {
- this.isOpenRight = true;
- }.bind(this), 200);
- },
-
- endOpen: function() {
- this.isOpen = false;
- this.isOpenRight = false;
- },
-
-
-
- showTabByHash: function() {
-
- if(this.isRemeOpen == false) {
- return;
- }
-
- var hash = location.hash;
- var id = hash.replace('#', '');
- if(id == '') {
- return;
- }
-
- var tab = this.getTabById(id);
- if(tab) {
- return this.showTab(tab);
- }
-
- this.showMenuById(id);
-
-
-
- },
-
- f5HashByNativeTab: function() {
-
- if(this.isRemeOpen == false) {
- return;
- }
- location.hash = this.nativeTab.id;
- },
-
-
-
- msg: function(msg) {
- layer.msg(msg)
- },
-
- randomNum: function(min, max) {
- min = min || 1;
- max = max || 1000000000;
- return parseInt(Math.random() * (max - min + 1) + min, 10);
- },
-
- findMenuById: function(menuList, id) {
- for (var i = 0; i < menuList.length; i++) {
- var menu = menuList[i];
- if(menu.id + '' == id + '') {
- return menu;
- }
-
- if(menu.childList) {
- var menu2 = this.findMenuById(menu.childList, id);
- if(menu2 != null) {
- return menu2;
- }
- }
- }
- return null;
- },
-
- getUrlExt: function(url) {
- if(!url) {
- return "";
- }
- if(url.indexOf('?') > -1) {
- url = url.split('?')[0];
- }
- if(url.indexOf('#') > -1) {
- url = url.split('#')[0];
- }
- var index= url.lastIndexOf(".");
- if(index == -1) {
- return "";
- }
- var ext = url.substr(index + 1);
- return ext;
- },
-
- arrayToTree: function(menuList) {
- for (var i = 0; i < menuList.length; i++) {
- var menu = menuList[i];
-
- if(menu.parent_id) {
- var parent_menu = this.findMenuById(menuList, menu.parent_id);
- if(parent_menu) {
- menu.parent_menu = parent_menu;
- parent_menu.childList = parent_menu.childList || [];
- parent_menu.childList.push(menu);
- menuList.splice(i, 1);
- i--;
- }
- }
- }
- return menuList;
- },
-
-
-
- getTabWindow: function(tabId) {
- var iframe = document.querySelector('#iframe-' + tabId);
- if(iframe != null) {
- return iframe.contentWindow;
- }
- return null;
- },
-
-
-
-
-
- printVesion: function() {
- var str = ('欢迎使用sa-plus,当前版本:' + this.plusVersion + ",更新于:" + this.plusUpdateTime + ",GitHub地址:" + this.plusGithubUrl);
-
- var str2 = ('如在使用中发现任何bug或者疑问,请加入QQ群交流:782974737,点击加入:' + 'https://jq.qq.com/?_wv=1027&k=5DHN5Ib');
- console.log('%c%s', 'color: green; font-size: 12px; margin-top: 2px; margin-bottom: 2px;', str + ' \n' + str2);
- },
-
- },
- created:function(){
-
- }
- });
- var saAdmin = sa_admin;
- Vue.prototype.sa_admin = sa_admin;
- Vue.prototype.saAdmin = saAdmin;
- window.onresize = function() {
- if(document.body.clientWidth < 800) {
- sa_admin.endOpen();
- } else {
- sa_admin.startOpen();
- }
- }
- window.onhashchange = function() {
- sa_admin.showTabByHash();
- }
|