朱兆平 / vue_cli · 提交

转到一个项目

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

菜单组件化

内嵌 并排对比
正在显示 9 个修改的文件 包含 97 行增加 和 83 行删除
... ... @@ -47,82 +47,29 @@
<script>
import userInfo from '@/api/base';
import {userMenu} from '@/api/perm_api';
import {mapActions, mapGetters} from 'vuex'
export default {
name: 'NavMenus',
props:['collapsed'],
data() {
return {
rotate:false,
menu:[
{
permissionId:1,
name:'系统设置',
permissionOrder:'1',
description:'',
ismenu:true,
hidden:false,
parentId:0,
path:'/',
url:'/',
method:'',
iconCls:'el-icon-setting',
component:'',
hasChild:true,
children:[
{
permissionId:2,
name:'用户管理',
permissionOrder:'1',
description:'',
ismenu:true,
hidden:false,
parentId:0,
path:'/user',
url:'/user/**',
method:'',
iconCls:'',
component:'',
children:[]
},
{
permissionId:3,
name:'权限管理',
permissionOrder:'2',
description:'',
ismenu:true,
hidden:false,
parentId:0,
path:'/user1',
url:'/user/**',
method:'',
iconCls:'',
component:'',
children:[]
menu:[]
}
]
},
{
permissionId:4,
name:'舱单申报',
permissionOrder:'1',
description:'',
ismenu:true,
hidden:false,
parentId:0,
path:'/main',
url:'/',
method:'',
iconCls:'el-icon-setting',
component:'',
children:[]
}
]
methods: {
initMenu:function(){
if (this.getUserMenuStore.length > 0){
this.menu = this.getUserMenuStore;
}else {
this.getUserMenu();
}
},
methods: {
...mapActions( // 语法糖
['setUserMenuStore'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
),
start(){
this.rotate=!this.rotate;
console.log(this.rotate)
},
collapse:function(){
this.collapsed=!this.collapsed;
... ... @@ -150,6 +97,7 @@
userMenu(para).then((res) => {
console.log("ce"+res.data);
_this.menu = res.data.data;
this.setUserMenuStore(_this.menu);
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
... ... @@ -179,9 +127,13 @@
})
},
},
computed: {
...mapGetters(['getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
},
mounted() {
console.log(userInfo)
this.getUserMenu();
console.log(userInfo);
this.initMenu();
}
}
</script>
... ...
... ... @@ -45,12 +45,12 @@
// 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
// 当当前路由是首页时，添加首页到store，并设置激活状态
if (this.$route.path !== '/' && this.$route.path !== '/main') {
// console.log('1');
console.log('1');
this.$store.commit('add_tabs', {route: '/main' , name: '首页'});
this.$store.commit('add_tabs', {route: this.$route.path , name: this.$route.name });
this.$store.commit('set_active_index', this.$route.path);
} else {
// console.log('2');
console.log('2');
this.$store.commit('add_tabs', {route: '/main', name: '首页'});
this.$store.commit('set_active_index', '/main');
this.$router.push('/main');
... ...
... ... @@ -473,10 +473,10 @@ let routes = [
// leaf: true,//只有一个节点
children: [
{ path: '/water_stations_patrol', component: WaterStationsPatrol, name: '二水厂-水站巡视记录单管理' },
// { path: '/page6', component: Page6, name: '水质量检测' },
// { path: '/page6', component: Page6, name: '污水站' },
// { path: '/page6', component: Page6, name: '一水厂' },
// { path: '/page6', component: Page6, name: '综合楼空调站' },
{ path: '/page6', component: Page6, name: '水质量检测' },
{ path: '/page6', component: Page6, name: '污水站' },
{ path: '/page6', component: Page6, name: '一水厂' },
{ path: '/page6', component: Page6, name: '综合楼空调站' },
]
},
... ...
... ... @@ -500,7 +500,7 @@
}
.el-submenu__title:hover {
background-color: #4f6273;
border-left: 3px solid #be1fd9
border-left: 3px solid #be1fd9logo-width
}
}
... ...
... ... @@ -135,16 +135,16 @@
//设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了
axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
//处理用户menu
_this.userMenus = loginUserMenus.list;
// _this.userMenus = loginUserMenus.list;
// console.log("userMenus:");
// console.log(_this.userMenus);
// console.log(loginUserMenus.list);
let sysMenus = _this.$router.options.routes;
// let sysMenus = _this.$router.options.routes;
// console.log("sysMenus:");
// console.log(sysMenus);
_this.handleMenuList(_this.$router.options.routes,_this.userMenus);
// _this.handleMenuList(_this.$router.options.routes,_this.userMenus);
// console.log("user:");
// console.log(_this.$router.options.routes);
... ...
... ... @@ -23,6 +23,7 @@
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
row-key="permissionId"
border
:row-class-name="tableRowClassName"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column type="selection" width="55">
... ... @@ -37,7 +38,9 @@
</el-table-column>
<el-table-column prop="ismenu" label="是否目录" width="100" :formatter="formatState" sortable>
</el-table-column>
<el-table-column prop="url" label="访问路径" width="300" sortable>
<el-table-column prop="path" label="访问路径" width="300" sortable>
</el-table-column>
<el-table-column prop="permissionOrder" label="排序" width="100" sortable>
</el-table-column>
<el-table-column label="操作" min-width="100" fixed="right">
<template slot-scope="scope">
... ... @@ -63,16 +66,21 @@
<span>{{addForm.permissionId}}</span>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-col :span="8">
<el-form-item label="权限名称" prop="name">
<el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="8">
<el-form-item label="权限描述" prop="description">
<el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="图标" prop="iconCls">
<el-input v-model="addForm.iconCls" auto-complete="off" placeholder="element icon图标名称"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col>
... ... @@ -111,7 +119,7 @@
</el-row>
<el-form-item label="是否是目录" prop="ismenu">
<el-form-item label="是否目录" prop="ismenu">
<el-switch
v-model="addForm.ismenu"
active-color="#13ce66"
... ... @@ -121,6 +129,16 @@
>
</el-switch>
</el-form-item>
<el-form-item label="是否隐藏" prop="hidden">
<el-switch
v-model="addForm.hidden"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="是"
inactive-text="否"
>
</el-switch>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
... ... @@ -230,7 +248,9 @@
permissionOrder: '0',
chidren: [],
component: '',
method: ''
method: '*',
hidden: false,
iconCls:''
}
}
... ... @@ -411,6 +431,14 @@
for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand;
}
},
tableRowClassName({row, rowIndex}) {
if (row.parentId == 0) {
return 'warning-row';
} else {
return 'success-row';
}
return '';
}
},
mounted() {
... ... @@ -431,6 +459,13 @@
margin-right: 0px;
}
}
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
... ...
... ... @@ -5,3 +5,7 @@ export const increment = ({commit}) => {
export const decrement = ({commit}) => {
commit('DECREMENT')
}
export const setUserMenuStore = ({commit},menuList) => {
commit('set_user_menu',menuList)
}
... ...
... ... @@ -2,3 +2,8 @@
export const getCount = state => {
return state.count
}
// 获取最终的状态信息
export const getUserMenuStore = state => {
return state.userMenu
}
... ...
... ... @@ -9,14 +9,28 @@ Vue.use(Vuex)
const state = {
count: 10,
openTab:[],//所有打开的路由
activeIndex: '/main' //激活状态
activeIndex: '/main',//激活状态,
userMenu:[] //用户菜单
}
// 定义所需的 mutations
const mutations = {
// 添加tabs
add_tabs (state, data) {
this.state.openTab.push(data);
const _this = this;
let flag = false;
if (this.state.openTab.length>0){
this.state.openTab.forEach(function (v) {
if (data && v.route === data.route) {
flag = true;
}
});
if (!flag) {
_this.state.openTab.push(data);
}
}else{
_this.state.openTab.push(data);
}
},
set_tabs(state,value){
this.state.openTab= value;
... ... @@ -36,6 +50,10 @@ const mutations = {
set_active_index (state, index) {
this.state.activeIndex = index;
},
//设置用户菜单
set_user_menu(state, menu){
this.state.userMenu = menu;
},
INCREMENT(state) {
state.count++
},
... ...