朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 19992abeb9f9e5f76b5ffcd6e813a5edbe42159d 1 个父辈 708d165a

菜单组件化

内嵌 并排对比
正在显示 9 个修改的文件 包含 97 行增加 和 83 行删除
@@ -47,82 +47,29 @@ @@ -47,82 +47,29 @@
47 <script> 47 <script>
48 import userInfo from '@/api/base'; 48 import userInfo from '@/api/base';
49 import {userMenu} from '@/api/perm_api'; 49 import {userMenu} from '@/api/perm_api';
  50 + import {mapActions, mapGetters} from 'vuex'
50 export default { 51 export default {
51 name: 'NavMenus', 52 name: 'NavMenus',
52 props:['collapsed'], 53 props:['collapsed'],
53 data() { 54 data() {
54 return { 55 return {
55 rotate:false, 56 rotate:false,
56 - menu:[  
57 - {  
58 - permissionId:1,  
59 - name:'系统设置',  
60 - permissionOrder:'1',  
61 - description:'',  
62 - ismenu:true,  
63 - hidden:false,  
64 - parentId:0,  
65 - path:'/',  
66 - url:'/',  
67 - method:'',  
68 - iconCls:'el-icon-setting',  
69 - component:'',  
70 - hasChild:true,  
71 - children:[  
72 - {  
73 - permissionId:2,  
74 - name:'用户管理',  
75 - permissionOrder:'1',  
76 - description:'',  
77 - ismenu:true,  
78 - hidden:false,  
79 - parentId:0,  
80 - path:'/user',  
81 - url:'/user/**',  
82 - method:'',  
83 - iconCls:'',  
84 - component:'',  
85 - children:[]  
86 - },  
87 - {  
88 - permissionId:3,  
89 - name:'权限管理',  
90 - permissionOrder:'2',  
91 - description:'',  
92 - ismenu:true,  
93 - hidden:false,  
94 - parentId:0,  
95 - path:'/user1',  
96 - url:'/user/**',  
97 - method:'',  
98 - iconCls:'',  
99 - component:'',  
100 - children:[] 57 + menu:[]
101 } 58 }
102 - ]  
103 }, 59 },
104 - {  
105 - permissionId:4,  
106 - name:'舱单申报',  
107 - permissionOrder:'1',  
108 - description:'',  
109 - ismenu:true,  
110 - hidden:false,  
111 - parentId:0,  
112 - path:'/main',  
113 - url:'/',  
114 - method:'',  
115 - iconCls:'el-icon-setting',  
116 - component:'',  
117 - children:[]  
118 - }  
119 - ] 60 + methods: {
  61 + initMenu:function(){
  62 + if (this.getUserMenuStore.length > 0){
  63 + this.menu = this.getUserMenuStore;
  64 + }else {
  65 + this.getUserMenu();
120 } 66 }
121 }, 67 },
122 - methods: { 68 + ...mapActions( // 语法糖
  69 + ['setUserMenuStore'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
  70 + ),
123 start(){ 71 start(){
124 this.rotate=!this.rotate; 72 this.rotate=!this.rotate;
125 - console.log(this.rotate)  
126 }, 73 },
127 collapse:function(){ 74 collapse:function(){
128 this.collapsed=!this.collapsed; 75 this.collapsed=!this.collapsed;
@@ -150,6 +97,7 @@ @@ -150,6 +97,7 @@
150 userMenu(para).then((res) => { 97 userMenu(para).then((res) => {
151 console.log("ce"+res.data); 98 console.log("ce"+res.data);
152 _this.menu = res.data.data; 99 _this.menu = res.data.data;
  100 + this.setUserMenuStore(_this.menu);
153 }).catch((error) => { 101 }).catch((error) => {
154 if(null!= error.response && error.response!==undefined){ 102 if(null!= error.response && error.response!==undefined){
155 let status= error.response.status; 103 let status= error.response.status;
@@ -179,9 +127,13 @@ @@ -179,9 +127,13 @@
179 }) 127 })
180 }, 128 },
181 }, 129 },
  130 + computed: {
  131 + ...mapGetters(['getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
  132 + },
182 mounted() { 133 mounted() {
183 - console.log(userInfo)  
184 - this.getUserMenu(); 134 + console.log(userInfo);
  135 + this.initMenu();
  136 +
185 } 137 }
186 } 138 }
187 </script> 139 </script>
@@ -45,12 +45,12 @@ @@ -45,12 +45,12 @@
45 // 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态 45 // 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
46 // 当当前路由是首页时，添加首页到store，并设置激活状态 46 // 当当前路由是首页时，添加首页到store，并设置激活状态
47 if (this.$route.path !== '/' && this.$route.path !== '/main') { 47 if (this.$route.path !== '/' && this.$route.path !== '/main') {
48 - // console.log('1'); 48 + console.log('1');
49 this.$store.commit('add_tabs', {route: '/main' , name: '首页'}); 49 this.$store.commit('add_tabs', {route: '/main' , name: '首页'});
50 this.$store.commit('add_tabs', {route: this.$route.path , name: this.$route.name }); 50 this.$store.commit('add_tabs', {route: this.$route.path , name: this.$route.name });
51 this.$store.commit('set_active_index', this.$route.path); 51 this.$store.commit('set_active_index', this.$route.path);
52 } else { 52 } else {
53 - // console.log('2'); 53 + console.log('2');
54 this.$store.commit('add_tabs', {route: '/main', name: '首页'}); 54 this.$store.commit('add_tabs', {route: '/main', name: '首页'});
55 this.$store.commit('set_active_index', '/main'); 55 this.$store.commit('set_active_index', '/main');
56 this.$router.push('/main'); 56 this.$router.push('/main');
@@ -473,10 +473,10 @@ let routes = [ @@ -473,10 +473,10 @@ let routes = [
473 // leaf: true,//只有一个节点 473 // leaf: true,//只有一个节点
474 children: [ 474 children: [
475 { path: '/water_stations_patrol', component: WaterStationsPatrol, name: '二水厂-水站巡视记录单管理' }, 475 { path: '/water_stations_patrol', component: WaterStationsPatrol, name: '二水厂-水站巡视记录单管理' },
476 - // { path: '/page6', component: Page6, name: '水质量检测' },  
477 - // { path: '/page6', component: Page6, name: '污水站' },  
478 - // { path: '/page6', component: Page6, name: '一水厂' },  
479 - // { path: '/page6', component: Page6, name: '综合楼空调站' }, 476 + { path: '/page6', component: Page6, name: '水质量检测' },
  477 + { path: '/page6', component: Page6, name: '污水站' },
  478 + { path: '/page6', component: Page6, name: '一水厂' },
  479 + { path: '/page6', component: Page6, name: '综合楼空调站' },
480 ] 480 ]
481 }, 481 },
482 482
@@ -500,7 +500,7 @@ @@ -500,7 +500,7 @@
500 } 500 }
501 .el-submenu__title:hover { 501 .el-submenu__title:hover {
502 background-color: #4f6273; 502 background-color: #4f6273;
503 - border-left: 3px solid #be1fd9 503 + border-left: 3px solid #be1fd9logo-width
504 504
505 } 505 }
506 } 506 }
@@ -135,16 +135,16 @@ @@ -135,16 +135,16 @@
135 //设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了 135 //设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了
136 axios.defaults.headers.common['Authorization'] = 'Bearer '+token; 136 axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
137 //处理用户menu 137 //处理用户menu
138 - _this.userMenus = loginUserMenus.list; 138 + // _this.userMenus = loginUserMenus.list;
139 // console.log("userMenus:"); 139 // console.log("userMenus:");
140 // console.log(_this.userMenus); 140 // console.log(_this.userMenus);
141 // console.log(loginUserMenus.list); 141 // console.log(loginUserMenus.list);
142 - let sysMenus = _this.$router.options.routes; 142 + // let sysMenus = _this.$router.options.routes;
143 143
144 // console.log("sysMenus:"); 144 // console.log("sysMenus:");
145 // console.log(sysMenus); 145 // console.log(sysMenus);
146 146
147 - _this.handleMenuList(_this.$router.options.routes,_this.userMenus); 147 + // _this.handleMenuList(_this.$router.options.routes,_this.userMenus);
148 148
149 // console.log("user:"); 149 // console.log("user:");
150 // console.log(_this.$router.options.routes); 150 // console.log(_this.$router.options.routes);
@@ -23,6 +23,7 @@ @@ -23,6 +23,7 @@
23 :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small" 23 :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
24 row-key="permissionId" 24 row-key="permissionId"
25 border 25 border
  26 + :row-class-name="tableRowClassName"
26 :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 27 :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
27 > 28 >
28 <el-table-column type="selection" width="55"> 29 <el-table-column type="selection" width="55">
@@ -37,7 +38,9 @@ @@ -37,7 +38,9 @@
37 </el-table-column> 38 </el-table-column>
38 <el-table-column prop="ismenu" label="是否目录" width="100" :formatter="formatState" sortable> 39 <el-table-column prop="ismenu" label="是否目录" width="100" :formatter="formatState" sortable>
39 </el-table-column> 40 </el-table-column>
40 - <el-table-column prop="url" label="访问路径" width="300" sortable> 41 + <el-table-column prop="path" label="访问路径" width="300" sortable>
  42 + </el-table-column>
  43 + <el-table-column prop="permissionOrder" label="排序" width="100" sortable>
41 </el-table-column> 44 </el-table-column>
42 <el-table-column label="操作" min-width="100" fixed="right"> 45 <el-table-column label="操作" min-width="100" fixed="right">
43 <template slot-scope="scope"> 46 <template slot-scope="scope">
@@ -63,16 +66,21 @@ @@ -63,16 +66,21 @@
63 <span>{{addForm.permissionId}}</span> 66 <span>{{addForm.permissionId}}</span>
64 </el-form-item> 67 </el-form-item>
65 <el-row :gutter="20"> 68 <el-row :gutter="20">
66 - <el-col :span="12"> 69 + <el-col :span="8">
67 <el-form-item label="权限名称" prop="name"> 70 <el-form-item label="权限名称" prop="name">
68 <el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input> 71 <el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>
69 </el-form-item> 72 </el-form-item>
70 </el-col> 73 </el-col>
71 - <el-col :span="12"> 74 + <el-col :span="8">
72 <el-form-item label="权限描述" prop="description"> 75 <el-form-item label="权限描述" prop="description">
73 <el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input> 76 <el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>
74 </el-form-item> 77 </el-form-item>
75 </el-col> 78 </el-col>
  79 + <el-col :span="8">
  80 + <el-form-item label="图标" prop="iconCls">
  81 + <el-input v-model="addForm.iconCls" auto-complete="off" placeholder="element icon图标名称"></el-input>
  82 + </el-form-item>
  83 + </el-col>
76 </el-row> 84 </el-row>
77 <el-row :gutter="20"> 85 <el-row :gutter="20">
78 <el-col> 86 <el-col>
@@ -111,7 +119,7 @@ @@ -111,7 +119,7 @@
111 </el-row> 119 </el-row>
112 120
113 121
114 - <el-form-item label="是否是目录" prop="ismenu"> 122 + <el-form-item label="是否目录" prop="ismenu">
115 <el-switch 123 <el-switch
116 v-model="addForm.ismenu" 124 v-model="addForm.ismenu"
117 active-color="#13ce66" 125 active-color="#13ce66"
@@ -121,6 +129,16 @@ @@ -121,6 +129,16 @@
121 > 129 >
122 </el-switch> 130 </el-switch>
123 </el-form-item> 131 </el-form-item>
  132 + <el-form-item label="是否隐藏" prop="hidden">
  133 + <el-switch
  134 + v-model="addForm.hidden"
  135 + active-color="#13ce66"
  136 + inactive-color="#ff4949"
  137 + active-text="是"
  138 + inactive-text="否"
  139 + >
  140 + </el-switch>
  141 + </el-form-item>
124 </el-form> 142 </el-form>
125 <div slot="footer" class="dialog-footer"> 143 <div slot="footer" class="dialog-footer">
126 <el-button @click.native="addFormVisible = false">取消</el-button> 144 <el-button @click.native="addFormVisible = false">取消</el-button>
@@ -230,7 +248,9 @@ @@ -230,7 +248,9 @@
230 permissionOrder: '0', 248 permissionOrder: '0',
231 chidren: [], 249 chidren: [],
232 component: '', 250 component: '',
233 - method: '' 251 + method: '*',
  252 + hidden: false,
  253 + iconCls:''
234 } 254 }
235 255
236 } 256 }
@@ -411,6 +431,14 @@ @@ -411,6 +431,14 @@
411 for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){ 431 for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
412 this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand; 432 this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand;
413 } 433 }
  434 + },
  435 + tableRowClassName({row, rowIndex}) {
  436 + if (row.parentId == 0) {
  437 + return 'warning-row';
  438 + } else {
  439 + return 'success-row';
  440 + }
  441 + return '';
414 } 442 }
415 }, 443 },
416 mounted() { 444 mounted() {
@@ -431,6 +459,13 @@ @@ -431,6 +459,13 @@
431 margin-right: 0px; 459 margin-right: 0px;
432 } 460 }
433 } 461 }
  462 + .el-table .warning-row {
  463 + background: oldlace;
  464 + }
  465 +
  466 + .el-table .success-row {
  467 + background: #f0f9eb;
  468 + }
434 469
435 470
436 </style> 471 </style>
@@ -5,3 +5,7 @@ export const increment = ({commit}) => { @@ -5,3 +5,7 @@ export const increment = ({commit}) => {
5 export const decrement = ({commit}) => { 5 export const decrement = ({commit}) => {
6 commit('DECREMENT') 6 commit('DECREMENT')
7 } 7 }
  8 +
  9 +export const setUserMenuStore = ({commit},menuList) => {
  10 + commit('set_user_menu',menuList)
  11 +}
@@ -2,3 +2,8 @@ @@ -2,3 +2,8 @@
2 export const getCount = state => { 2 export const getCount = state => {
3 return state.count 3 return state.count
4 } 4 }
  5 +
  6 +// 获取最终的状态信息
  7 +export const getUserMenuStore = state => {
  8 + return state.userMenu
  9 +}
@@ -9,14 +9,28 @@ Vue.use(Vuex) @@ -9,14 +9,28 @@ Vue.use(Vuex)
9 const state = { 9 const state = {
10 count: 10, 10 count: 10,
11 openTab:[],//所有打开的路由 11 openTab:[],//所有打开的路由
12 - activeIndex: '/main' //激活状态 12 + activeIndex: '/main',//激活状态,
  13 + userMenu:[] //用户菜单
13 } 14 }
14 15
15 // 定义所需的 mutations 16 // 定义所需的 mutations
16 const mutations = { 17 const mutations = {
17 // 添加tabs 18 // 添加tabs
18 add_tabs (state, data) { 19 add_tabs (state, data) {
19 - this.state.openTab.push(data); 20 + const _this = this;
  21 + let flag = false;
  22 + if (this.state.openTab.length>0){
  23 + this.state.openTab.forEach(function (v) {
  24 + if (data && v.route === data.route) {
  25 + flag = true;
  26 + }
  27 + });
  28 + if (!flag) {
  29 + _this.state.openTab.push(data);
  30 + }
  31 + }else{
  32 + _this.state.openTab.push(data);
  33 + }
20 }, 34 },
21 set_tabs(state,value){ 35 set_tabs(state,value){
22 this.state.openTab= value; 36 this.state.openTab= value;
@@ -36,6 +50,10 @@ const mutations = { @@ -36,6 +50,10 @@ const mutations = {
36 set_active_index (state, index) { 50 set_active_index (state, index) {
37 this.state.activeIndex = index; 51 this.state.activeIndex = index;
38 }, 52 },
  53 + //设置用户菜单
  54 + set_user_menu(state, menu){
  55 + this.state.userMenu = menu;
  56 + },
39 INCREMENT(state) { 57 INCREMENT(state) {
40 state.count++ 58 state.count++
41 }, 59 },