优化 完成 首页 布局

This commit is contained in:
java110 2022-02-26 16:59:58 +08:00
parent 35b9825359
commit e14f624b86
8 changed files with 103 additions and 110 deletions

View File

@ -12,7 +12,7 @@
icon: '',
seq: '',
storeType: '',
url: '',
url: '#',
isShow: '',
}

View File

@ -20,42 +20,24 @@
_freshBreadCrumbByUrl: function() {
let tabs = vc.getTabFromLocal();
let _tmpMenus = vc.getMenus();
if (_tmpMenus == null || _tmpMenus == undefined) {
return;
}
let _curPath = location.hash;
if (_curPath.indexOf('?') != -1) {
_curPath = _curPath.substring(0, _curPath.indexOf('?'));
}
tabs.forEach(item => {
let _path = item;
let _path = item.url;
if (_path.indexOf('?') != -1) {
_path = _path.substring(0, _path.indexOf('?'));
}
let _url = vc.getUrl() + _path;
_tmpMenus.forEach(_menu => {
_menu.childs.forEach(child => {
//console.log(_url, child.href)
if (_url != child.href) {
return;
}
_tmpBreadCrumbInf = {
href: item,
pageName: child.name,
active: '0'
};
if (_path == _curPath) {
_tmpBreadCrumbInf.active = '1'
}
this.breadCrumbs.push(_tmpBreadCrumbInf);
})
})
_tmpBreadCrumbInf = {
href: item.url,
pageName: item.name,
active: '0'
};
if (_path == _curPath) {
_tmpBreadCrumbInf.active = '1'
}
this.breadCrumbs.push(_tmpBreadCrumbInf);
});
},
@ -70,7 +52,8 @@
},
_deleteSmallTab: function(_item) {
let _tabs = vc.getTabFromLocal();
vc.deleteTabToLocal(_item.href);
_item.url = _item.href;
vc.deleteTabToLocal(_item);
vm.breadCrumbs = [];
if (_item.active == '0') {
vm._freshBreadCrumbByUrl();
@ -80,7 +63,7 @@
vc.jumpToPage("/");
return;
}
vc.jumpToPage(vc.getUrl() + _tabs[_tabs.length - 2]);
vc.jumpToPage(vc.getUrl() + _tabs[_tabs.length - 2].url);
}
},

View File

@ -12,7 +12,7 @@
</div>
</li>
<li v-for="menu in menus" v-bind:class="{ active: menu.active }" :key="menu.id">
<li v-for="menu in menus" v-bind:class="{ active: menu.active }" :key="menu.id">
<a v-if="menu.childs != undefined && menu.childs.length >0" href="#" v-on:click="switchMenu(menu.id)">
<i class="fa " v-bind:class="menu.icon"></i>
<span class="nav-label">{{vc.i18n(menu.name)}}</span>
@ -21,10 +21,10 @@
</a>
<ul v-if="menu.childs != undefined && menu.childs.length >0" class="nav nav-second-level collapse" v-bind:class="{in: menu.active}">
<li v-for="subMenu in menu.childs" v-if="subMenu.isShow == 'Y'" v-bind:class="{ active: subMenu.active }">
<a v-on:click="_gotoPage(subMenu.href)" href="javascript:void(0)" >{{vc.i18n(subMenu.name)}}</a>
<a v-on:click="_gotoPage(subMenu.href,subMenu.name)" href="javascript:void(0)">{{vc.i18n(subMenu.name)}}</a>
</li>
</ul>
<a v-if="menu.childs == undefined || menu.childs.length ==0" href="javascript:void(0)" v-on:click="_gotoPage(menu.href)">
<a v-if="menu.childs == undefined || menu.childs.length ==0" href="javascript:void(0)" v-on:click="_gotoPage(menu.href,subMenu.name)">
<i class="fa " v-bind:class="menu.icon"></i>
<span class="nav-label">{{vc.i18n(menu.name)}}</span>
</a>

View File

@ -10,7 +10,11 @@
},
mounted: function() {
this._initSysInfo();
this.getMenus();
//监听 菜单目录改变
document.body.addEventListener('loadMenu', function(_param) {
vm.getMenus(_param.detail);
}, false);
let _menuDiv = document.getElementById('menu-nav');
vcFramework.eleResize.on(_menuDiv, function() {
//console.log('resize', '大小修改了');
@ -35,31 +39,21 @@
_gotoIndex: function() {
vc.jumpToPage("/")
},
getMenus: function() {
let _tmpMenus = vc.getMenus();
//浏览器缓存中能获取到
if (_tmpMenus != null && _tmpMenus != undefined) {
this.miniMenu();
this.menus = _tmpMenus;
// 子菜单默认选中
var _currentHref = window.location.pathname + window.location.hash;
this._setSelectedMenusChild(_currentHref);
return;
}
let param = {
getMenus: function(_catalog) {
let _param = {
params: {
msg: this.message
caId: _catalog.caId
}
}
//发送get请求
vc.http.get('menu',
'getMenus',
param,
vc.http.apiGet('/menu.listCatalogMenus',
_param,
function(json, res) {
let _menus = JSON.parse(json);
let _menuData = JSON.parse(json);
if (_menuData.code != 0) {
return;
}
let _menus = _menuData.data;
if (_menus == null || _menus.length == 0) {
return;
}
@ -77,7 +71,6 @@
);
},
refreshMenuActive: function(jsonArray, _id) {
console.log(jsonArray);
for (var menuIndex = 0; menuIndex < jsonArray.length; menuIndex++) {
if (jsonArray[menuIndex].hasOwnProperty('childs')) {
@ -124,13 +117,13 @@
$("body").toggleClass("mini-navbar");
vc.setMenuState('OFF');
},
_gotoPage: function(_href) {
_gotoPage: function(_href, _tabName) {
// 子菜单默认选中
this._setSelectedMenusChild(_href);
if (_href.indexOf('?') > -1) {
_href += "&tab=on"
_href += ("&tab=" + _tabName)
} else {
_href += "?tab=on"
_href += ("?tab=" + _tabName)
}
vc.jumpToPage(_href);
},

View File

@ -3,39 +3,9 @@
<div class="navbar-header">
<span class="navbar-minimalize minimalize-styl-2 " @click="_doMenu()"><i class="fa fa-list-ul"></i> </span>
<ul class="nav navbar-top-links ">
<li class="nav-item dropdown tab-active">
<span class="dropdown-toggle count-info vc-tab-text" data-toggle="dropdown" href="/">
<i class="fa fa-home"></i>首页
</span>
</li>
<li class="nav-item dropdown">
<span class="dropdown-toggle count-info vc-tab-text" data-toggle="dropdown" href="/">
<i class="fa fa-calculator"></i>业务受理
</span>
</li>
<li class="nav-item dropdown">
<span class="dropdown-toggle count-info vc-tab-text" data-toggle="dropdown" href="/">
<i class="fa fa-bar-chart-o"></i> 费用报表
</span>
</li>
<li class="nav-item dropdown">
<span class="dropdown-toggle count-info vc-tab-text" data-toggle="dropdown" href="/">
<i class="fa fa-users"></i>物业服务
</span>
</li>
<li class="nav-item dropdown">
<span class="dropdown-toggle count-info vc-tab-text" data-toggle="dropdown" href="/">
<i class="fa fa-automobile"></i> 停车
</span>
</li>
<li class="nav-item dropdown">
<span class="dropdown-toggle count-info vc-tab-text" data-toggle="dropdown" href="/">
<i class="fa fa-desktop"></i>设备
</span>
</li>
<li class="nav-item dropdown">
<span class="dropdown-toggle count-info vc-tab-text" data-toggle="dropdown" href="/">
<i class="fa fa-gear"></i>设置
<li class="nav-item dropdown " :class="{'tab-active' :item.active == '1' }" v-for="(item,index) in nav.catalogs">
<span class="dropdown-toggle count-info vc-tab-text" data-toggle="dropdown" @click="_changeMenuCatalog(item)">
<i :class="item.icon"></i>{{item.name}}
</span>
</li>
</ul>
@ -56,7 +26,7 @@
</li>
<li style="padding: 5px">
<span class="m-r-sm text-muted welcome-message">
<i class="fa fa-user"></i>{{userName}}</span>
<i class="fa fa-user margin-right-xs"></i>{{userName}}</span>
</li>
<li class="dropdown">
<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">

View File

@ -13,7 +13,8 @@
total: 0,
_currentCommunity: '',
communityInfos: [],
storeTypeCd: ''
storeTypeCd: '',
catalogs: [],
},
logo: '',
userName: ""
@ -22,7 +23,8 @@
this._initSysInfo();
this.getNavCommunity(1, 3);
this.getNavData();
//this.getUserInfo();
this._getMenuCatalog();
// 定义事件名为'build'.
},
methods: {
_initSysInfo: function() {
@ -34,8 +36,7 @@
this.logo = sysInfo.logo;
},
getNavData: function() {
var param = {
let param = {
params: {
page: 1,
row: 3,
@ -78,14 +79,8 @@
);
},
getUserInfo: function() {
// var _userInfo = vc.getData("_userInfo");
// //浏览器缓存中能获取到
// if(_userInfo != null && _userInfo != undefined){
// vm.userName = _userInfo.name;
// return ;
// }
//获取用户名
var param = {
let param = {
msg: '123',
};
//发送get请求
@ -178,6 +173,37 @@
}
);
},
_getMenuCatalog: function() {
let _param = {
params: {
page: 1,
row: 10,
isShow: 'Y',
}
}
vc.http.apiGet('/menu.listCatalog',
_param,
function(json, res) {
let _listCatalogs = JSON.parse(json);
if (_listCatalogs.code != 0) {
return;
}
vm.nav.catalogs = _listCatalogs.data;
vm._emitMsg(_listCatalogs.data[0])
},
function(e) {
console.log('请求失败处理', e);
}
);
},
_emitMsg: function(_param) {
vm._settingActiveCatalog(_param);
let event = new CustomEvent('loadMenu', {
"detail": _param
});
document.body.dispatchEvent(event);
},
_doMenu: function() {
let body = document.getElementsByTagName("body")[0];
let className = body.className;
@ -192,7 +218,26 @@
},
_viewDocument: function() {
vc.emit('document', 'openDocument', {});
}
},
_settingActiveCatalog: function(_catalog) {
let _catalogs = this.nav.catalogs;
_catalogs.forEach(item => {
item.active = '0'
if (item.caId == _catalog.caId) {
item.active = '1';
}
});
//this.nav.catalogs = _catalogs;
this.$forceUpdate();
},
_changeMenuCatalog: function(_catalog) {
if (_catalog.url != '#') {
vm._settingActiveCatalog(_catalog);
vc.jumpToPage(_catalog.url);
return;
}
vm._emitMsg(_catalog);
},
}
});
vm.getUserInfo();

View File

@ -85,7 +85,7 @@
<div class="btn-group">
<button class="btn-white btn btn-xs" v-on:click="_openEditMenuCatalogModel(menuCatalog)">修改</button>
</div>
<div class="btn-group">
<div class="btn-group" v-if="menuCatalog.url == '#' || menuCatalog.url == '/'">
<button class="btn-white btn btn-xs" v-on:click="_openMenuCatalogGroup(menuCatalog)">菜单组</button>
</div>
<div class="btn-group">

View File

@ -2016,7 +2016,10 @@
let _tab = vc.getParam('tab')
if (_tab) {
vcFramework.setTabToLocal(_componentUrl);
vcFramework.setTabToLocal({
url: _componentUrl,
name: _tab
});
}
refreshVcFramework();
vcFramework.reBuilderVcTree();
@ -2688,7 +2691,6 @@
routes.splice(loction, 1);
}
window.localStorage.setItem('vcPageRoute', JSON.stringify(routes));
}
@ -2748,7 +2750,7 @@
//判断是否已经有 如果有则删除
for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
_tmpTab = tabs[tabIndex];
if (_tmpTab == _obj) {
if (_tmpTab.url == _obj.url) {
return;
}
}
@ -2764,7 +2766,7 @@
for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
_tmpTab = tabs[tabIndex];
console.log(_tmpTab[tabIndex], _obj)
if (_tmpTab == _obj) {
if (_tmpTab.url == _obj.url) {
tabs.splice(tabIndex, 1);
}
}