Skip to content

Commit 18d5817

Browse files
ArsenseArsense
committed
menu和tree优化同步
1 parent 94ffec8 commit 18d5817

File tree

9 files changed

+318
-284
lines changed

9 files changed

+318
-284
lines changed

‎src/main/java/com/vue/adminlte4j/web/springmvc/ApiAdminController.java

Lines changed: 4 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -4,112 +4,28 @@
44
import com.vue.adminlte4j.model.Menu;
55
import com.vue.adminlte4j.model.UIModel;
66
import com.vue.adminlte4j.service.DefaultServiceRegister;
7-
import com.vue.adminlte4j.util.MenuUtils;
87
import com.vue.adminlte4j.util.Utils;
9-
import java.util.ArrayList;
10-
import java.util.Collections;
118
import java.util.List;
129
import javax.servlet.http.HttpServletRequest;
13-
import org.springframework.web.bind.annotation.RequestBody;
1410
import org.springframework.web.bind.annotation.RequestMapping;
1511
import org.springframework.web.bind.annotation.RequestMethod;
1612
import org.springframework.web.bind.annotation.ResponseBody;
17-
1813
/**
1914
* Created by bjliuyong on 2018/2/2.
2015
*/
21-
public class ApiAdminController extends DefaultServiceRegister
22-
implements AppInfoApiController, MenuApiController, ModelApiController{
16+
public class ApiAdminController extends DefaultServiceRegister implements AppInfoApiController ,MenuApiController , ModelApiController {
2317

2418
@RequestMapping(value = "/admin/app_info/get_all" , method = RequestMethod.GET)
2519
@ResponseBody
26-
public UIModel _getAllApiInfo(HttpServletRequest request) {
20+
public UIModel layoutInfo(HttpServletRequest request) {
2721
return Utils.call(() -> {
2822
AppInfo appInfo = getAppInfoService().get() ;
2923
UIModel uiModel = UIModel.success().appInfo(appInfo) ;
30-
configureMenu(uiModel);
3124
uiModel.setUserName(getUserName(request));
32-
MenuUtils.sortTreeData(uiModel.menu());
25+
List<Menu> menuList = _listMenu() ;
26+
uiModel.menu(menuList) ;
3327
return uiModel;
3428
}) ;
35-
3629
}
3730

38-
@RequestMapping(value = "/admin/app_info/get" , method = RequestMethod.GET)
39-
@ResponseBody
40-
public UIModel _getAppInfo() {
41-
return Utils.call(() -> UIModel.success().formData(getAppInfoService().get())) ;
42-
}
43-
44-
@RequestMapping(value = "/admin/app_info/update" , method = RequestMethod.POST)
45-
@ResponseBody
46-
public UIModel _updateAppInfo(@RequestBody AppInfo appinfo) {
47-
return Utils.call(()->{
48-
getAppInfoService().update(appinfo);
49-
return UIModel.success().setMsg("修改成功！") ;
50-
}) ;
51-
}
52-
53-
54-
// @RequestMapping(value = "/admin/menu/get/{id}" , method = RequestMethod.GET)
55-
// @ResponseBody
56-
// public UIModel getMenu(@PathVariable String id) {
57-
// return _getMenu(id) ;
58-
// }
59-
//
60-
// @RequestMapping(value = "/admin/menu/get/" , method = RequestMethod.GET)
61-
// @ResponseBody
62-
// public UIModel _getMenu(String id) {
63-
// Menu menu = null ;
64-
// if(id != null && !id.isEmpty()) {
65-
// UIModel uiModel = UIModel.success() ;
66-
// configureMenu(uiModel);
67-
// menu = MenuUtils.getMenu(uiModel.menu() , id );
68-
// }
69-
// return UIModel.success().formData(menu , Menu.class) ;
70-
// }
71-
72-
// //@GetMapping("/admin/menu/list")
73-
// @RequestMapping(value = "/admin/menu/list" , method = RequestMethod.GET)
74-
// @ResponseBody
75-
// public UIModel listMenu() throws Exception {
76-
// TableData tableData = TableBuilder.newBuilder(Menu.class)
77-
// .ignoreColumn("children")
78-
// .isPage(false)
79-
// .data(_listMenu())
80-
// .build();
81-
//
82-
// return UIModel.success().tableData(tableData);
83-
// }
84-
85-
// //@GetMapping("/admin/menu/tree")
86-
// @RequestMapping(value = "/admin/menu/tree" , method = RequestMethod.GET)
87-
// @ResponseBody
88-
// public UIModel treeMenu() throws Exception {
89-
// return UIModel.success().treeData(_listMenu()) ;
90-
// }
91-
//
92-
// private List<Menu> _listMenu() throws Exception{
93-
//
94-
// UIModel uiModel = new UIModel();
95-
// configureMenu(uiModel);
96-
// List<Menu> _menus = uiModel.menu() ;
97-
// List<Menu> out = new ArrayList<>() ;
98-
//
99-
// for(Menu menu : _menus) {
100-
// _listChildMenu(menu , out) ;
101-
// }
102-
// Collections.sort(out);
103-
// return out ;
104-
// }
105-
106-
// public void _listChildMenu(Menu menu, List<Menu> out) {
107-
// if(menu.getChildren() != null ) {
108-
// for(Menu child : menu.getChildren()) {
109-
// child.setPid(menu.getId());
110-
// _listChildMenu(child , out);
111-
// }
112-
// }
113-
// out.add(menu) ;
114-
// }
11531
}

‎src/main/static/src/components/layout/layout.vue

Lines changed: 73 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,81 @@
11
<template>
2-
<div class="wrapper">
3-
<v-header :data="app_info" :user_name="user_name" :user_img="user_img"></v-header>
4-
<v-sidebar :data="menu_items" ></v-sidebar>
5-
<v-content>
6-
<slot></slot>
7-
</v-content>
8-
<v-control-sidebar></v-control-sidebar>
9-
<v-footer :copyright="app_info.copyright" :version="app_info.version"></v-footer>
10-
</div>
2+
<div class="wrapper">
3+
<v-header :data="app_info" :user_name="user_name" :user_img="user_img"></v-header>
4+
<v-menu ref="menu" :data="menu_items" ></v-menu>
5+
<v-content>
6+
<slot></slot>
7+
</v-content>
8+
<v-control-sidebar></v-control-sidebar>
9+
<v-footer :copyright="app_info.copyright" :version="app_info.version"></v-footer>
10+
</div>
1111
</template>
1212

1313
<script>
14-
import VHeader from '../header.vue'
15-
import VFooter from '../v-footer.vue'
16-
import VSideBar from '../sidebar-menu.vue'
17-
import VContent from '../content.vue'
18-
import VControlSideBar from '../control-sidebar.vue'
19-
20-
export default {
21-
name: 'v-layout',
22-
props: {
23-
data: {type:Object , default:{}}
24-
} ,
25-
data(){
26-
return {
27-
user_name : '' ,
28-
user_img:'' ,
29-
app_info:{} ,
30-
menu_items:[]
31-
}
32-
} ,
33-
mounted() {
34-
this.ajaxGet('/admin/app_info/get_all' , null , function(data){
35-
this.app_info=data.app_info
36-
this.menu_items=data.menu_items
37-
this.user_name=data.user_name
38-
this.user_img=data.user_img
39-
var indexUrl = data.app_info.indexUrl
40-
var hash = window.location.hash
41-
if(hash)
42-
$.load_page(hash.substring(1))
43-
else if(indexUrl) {
44-
$.load_page(indexUrl )
45-
} else {
46-
$.load_page( false, "<br>Hi " + (data.user_name||'') + " , Welcome to " + this.app_info.appName|| 'Admin' + "!!")
14+
import VHeader from '../header.vue'
15+
import VFooter from '../v-footer.vue'
16+
import VMenu from './left-menu.vue'
17+
import VContent from '../content.vue'
18+
import VControlSideBar from '../control-sidebar.vue'
19+
import {buildTree ,findAncestorId} from '../../utils/util'
20+
export default {
21+
name: 'v-layout',
22+
props: {
23+
data: {type:Object , default:{}}
24+
} ,
25+
data(){
26+
return {
27+
user_name : '' ,
28+
user_img:'' ,
29+
app_info:{} ,
30+
menu_items:[]
4731
}
48-
if(this.app_info.appName)
49-
document.title= this.app_info.appName
50-
})
32+
} ,
33+
created() {
34+
this.ajaxGet('/admin/app_info/get_all' , null , function(data){
35+
this.app_info=data.app_info
36+
var hash = window.location.hash
37+
var pathname = hash.substring(1)
38+
this.menu_items = buildTree(data.menu_items , this.$refs.menu , function(e){
39+
if(e.data.url == pathname)
40+
e.tree.selected_node_id = findAncestorId(e).id
41+
})
42+
this.user_name=data.user_name
43+
this.user_img=data.user_img
44+
var indexUrl = data.app_info.indexUrl
45+
46+
if(hash)
47+
$.load_page(hash.substring(1))
48+
else if(indexUrl) {
49+
$.load_page(indexUrl )
50+
} else {
51+
$.load_page( false, "<br>Hi " + (data.user_name||'') + " , Welcome to " + this.app_info.appName|| 'Admin' + "!!")
52+
}
53+
if(this.app_info.appName)
54+
document.title= this.app_info.appName
55+
5156
52-
$(window).on("hashchange", function() {
53-
//var state = e.state;
54-
var hash = window.location.hash
55-
$.load_page(hash.substring(1))
56-
})
57-
window.addEventListener("popstate", function(e) {
58-
//var state = e.state;
59-
//var hash = window.location.hash
60-
//$("#screen_content").load(hash.substring(1))
61-
})
62-
} ,
63-
components: {
64-
'v-header': VHeader,
65-
'v-sidebar': VSideBar ,
66-
'v-content': VContent ,
67-
'v-control-sidebar': VControlSideBar ,
68-
'v-footer': VFooter
57+
58+
})
59+
60+
} ,
61+
mounted() {
62+
$(window).on("hashchange", function() {
63+
//var state = e.state;
64+
var hash = window.location.hash
65+
$.load_page(hash.substring(1))
66+
})
67+
window.addEventListener("popstate", function(e) {
68+
//var state = e.state;
69+
//var hash = window.location.hash
70+
//$("#screen_content").load(hash.substring(1))
71+
})
72+
} ,
73+
components: {
74+
'v-header': VHeader,
75+
'v-menu': VMenu ,
76+
'v-content': VContent ,
77+
'v-control-sidebar': VControlSideBar ,
78+
'v-footer': VFooter
79+
}
6980
}
70-
}
7181
</script>

‎src/main/static/src/components/layout/left-menu.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<aside class="main-sidebar">
3+
<section class="sidebar">
4+
<ul class="sidebar-menu" data-widget="tree" >
5+
<li class="header"></li>
6+
<template v-for="item in data">
7+
<v-menu :model="item" :key="item.id"></v-menu>
8+
</template>
9+
</ul>
10+
</section>
11+
</aside>
12+
</template>
13+
14+
<script>
15+
import VMenu from './menu.vue'
16+
export default {
17+
name: 'v-left-menu',
18+
props: {
19+
data: Array
20+
} ,
21+
data() {
22+
return {
23+
selected_node_id:null
24+
}
25+
} ,
26+
methods : {
27+
28+
} ,
29+
components : {
30+
'v-menu': VMenu,
31+
}
32+
33+
}
34+
</script>

‎src/main/static/src/components/layout/menu.vue

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<li v-if="model.children" :class="['treeview' , {'active' : model.id == model.tree.selected_node_id}]" >
3+
<a href="#"><i :class="icon"></i> <span v-text="text"></span>
4+
<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
5+
</a>
6+
<ul class="treeview-menu">
7+
<v-menu v-for="item in model.children" :model="item" :key="item.id"></v-menu>
8+
</ul>
9+
</li>
10+
<li :class="{'active' : model.id == model.tree.selected_node_id}" v-else>
11+
<a href="#" @click.prevent="link_click">
12+
<i :class="icon"></i><span v-text="text"></span>
13+
</a>
14+
</li>
15+
</template>
16+
17+
<script>
18+
import {findAncestorId} from '../../utils/util'
19+
export default {
20+
name: 'v-menu',
21+
props: {
22+
model: Object
23+
} ,
24+
methods : {
25+
link_click: function(){
26+
this.model.tree.selected_node_id = findAncestorId(this.model).id
27+
if(this.model.parent) {
28+
$("#page_header").html(this.model.parent.data.desc)
29+
} else {
30+
$("#page_header").html(this.text)
31+
}
32+
$("#lib_menu1").html(this.text)
33+
if(this.url != window.location.hash.substring(1))
34+
window.location.hash = this.url
35+
else
36+
$.load_page(this.url)
37+
}
38+
} ,
39+
computed : {
40+
icon() {
41+
return this.model.data.icon
42+
} ,
43+
text() {
44+
return this.model.data.desc
45+
} ,
46+
url() {
47+
return this.model.data.url
48+
}
49+
}
50+
51+
}
52+
</script>

0 commit comments

Comments
 (0)