Skip to content

Commit

Permalink
提出一级菜单
Browse files Browse the repository at this point in the history
低版本浏览器提示
修复若干bug
感谢@Vondser
  • Loading branch information
smallweis committed Mar 20, 2018
1 parent ada5def commit 7f93552
Show file tree
Hide file tree
Showing 18 changed files with 257 additions and 102 deletions.
7 changes: 4 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv=“X-UA-Compatible” content=“chrome=1″ />
<link rel="stylesheet" href="/static/util/screen/screen.css">
<link rel="stylesheet" href="/static/cdn/element-ui/2.2.1/theme-chalk/index.css">
<link rel="stylesheet" href="/static/cdn/animate/3.5.2/animate.css">
<link rel="stylesheet" href="/static/cdn/iconfont/1.0.0/index.css">
Expand All @@ -18,14 +20,13 @@
<body>
<!--vue-ssr-outlet-->
<div id="app"></div>
<script src="/static/cdn/store/1.3.20/store.js"></script>
<script src="/static/util/screen/screen.js" charset="utf-8"></script>
<script src="/static/util/aes.js" charset="utf-8"></script>
<script src="/static/cdn/vue/2.5.2/vue.min.js" charset="utf-8"></script>
<script src="/static/cdn/vuex/2.4.1/vuex.min.js" charset="utf-8"></script>
<script src="/static/cdn/vue-router/3.0.1/vue-router.js" charset="utf-8"></script>
<script src="/static/cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
<script src="/static/cdn/element-ui/2.2.1/index.js" charset="utf-8"></script>
<script src="/static/util/screen.js" charset="utf-8"></script>
<script src="/static/util/aes.js" charset="utf-8"></script>
</body>

</html>
7 changes: 4 additions & 3 deletions src/api/user.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,15 @@ export const getUserInfo = () => {
resolve({ data: userInfo });
})
}
export const getMenu = () => {
export const getMenu = (parentId) => {
return new Promise((resolve, reject) => {
resolve({ data: menu });
if (!parentId) parentId = 0;
resolve({ data: menu[parentId] });
})
}
export const getMenuAll = () => {
return new Promise((resolve, reject) => {
resolve({ data: menu });
resolve({ data: menu[0] });
})
}

Expand Down
31 changes: 14 additions & 17 deletions src/mock/menu.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,7 @@
import {
baseUrl
} from '@/config/env'
export const menu = [{
id: 1,
label: "首页",
href: '/wel/index',
icon: 'icon-huanyingye',
meta: {},
children: [],
}, {
id: 13,
label: "权限测试页",
href: '/role/index',
icon: 'icon-quanxian',
meta: {
roles: ['admin'],
},
children: [],
}, {
const first = [{
id: 14,
label: "数据展示",
href: '/exhibition/index',
Expand Down Expand Up @@ -123,4 +107,17 @@ export const menu = [{
]
}
]
const second = [
{
id: 13,
label: "权限测试页",
href: '/role/index',
icon: 'icon-quanxian',
meta: {
roles: ['admin'],
},
children: [],
}
]
export const menu = [first, second];

78 changes: 36 additions & 42 deletions src/page/admin/menu/index.vue
Original file line number Diff line number Diff line change
@@ -1,47 +1,41 @@
<template>
<el-container class="menu-container pull-height">
<el-header class="menu-header">
<el-button-group>
<el-button type="primary" icon="el-icon-plus" size="small" @click.native="handleAdd" v-if="permission.sys_menu_btn_add">新增</el-button>
<el-button type="primary" icon="el-icon-edit" size="small" @click.native="handleEdit" v-if="permission.sys_menu_btn_edit">编辑</el-button>
<el-button type="primary" icon="el-icon-delete" size="small" @click.native="handleDel" v-if="permission.sys_menu_btn_del">删除</el-button>
</el-button-group>
</el-header>
<el-container>
<el-aside width="300px">
<el-tree
:data="menuAll"
node-key="id"
highlight-current
default-expand-all
:expand-on-click-node="false"
@node-click="handleNodeClick"></el-tree>
</el-aside>
<el-main>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="父节点ID">
<el-input v-model="parentForm.id" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="父节点">
<el-input v-model="parentForm.label" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="菜单名称">
<el-input v-model="form.label" :disabled="formGrade"></el-input>
</el-form-item>
<el-form-item label="菜单图标">
<el-input v-model="form.icon" :disabled="formGrade"></el-input>
</el-form-item>
<el-form-item label="菜单路径">
<el-input v-model="form.href" :disabled="formGrade"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit" :disabled="formGrade" v-if="formStatus=='add'">新增</el-button>
<el-button type="primary" @click="handleSubmit" :disabled="formGrade" v-if="formStatus=='edit'">修改</el-button>
</el-form-item>
</el-form>
</el-main>
<el-container class="menu-container pull-chheight">
<el-header class="menu-header">
<el-button-group>
<el-button type="primary" icon="el-icon-plus" size="small" @click.native="handleAdd" v-if="permission.sys_menu_btn_add">新增</el-button>
<el-button type="primary" icon="el-icon-edit" size="small" @click.native="handleEdit" v-if="permission.sys_menu_btn_edit">编辑</el-button>
<el-button type="primary" icon="el-icon-delete" size="small" @click.native="handleDel" v-if="permission.sys_menu_btn_del">删除</el-button>
</el-button-group>
</el-header>
<el-container>
<el-aside width="300px">
<el-tree :data="menuAll" node-key="id" highlight-current default-expand-all :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree>
</el-aside>
<el-main>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="父节点ID">
<el-input v-model="parentForm.id" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="父节点">
<el-input v-model="parentForm.label" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="菜单名称">
<el-input v-model="form.label" :disabled="formGrade"></el-input>
</el-form-item>
<el-form-item label="菜单图标">
<el-input v-model="form.icon" :disabled="formGrade"></el-input>
</el-form-item>
<el-form-item label="菜单路径">
<el-input v-model="form.href" :disabled="formGrade"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit" :disabled="formGrade" v-if="formStatus=='add'">新增</el-button>
<el-button type="primary" @click="handleSubmit" :disabled="formGrade" v-if="formStatus=='edit'">修改</el-button>
</el-form-item>
</el-form>
</el-main>
</el-container>
</el-container>
</el-container>
</template>

<script>
Expand Down
2 changes: 1 addition & 1 deletion src/page/index/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default {
overflow-y: auto;
}
.right {
padding-top: 102px;
padding-top: 90px;
position: relative;
flex: 1;
box-sizing: border-box;
Expand Down
13 changes: 3 additions & 10 deletions src/page/index/sidebar/index.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
<template>
<el-menu
unique-opened
:default-active="tag.value"
class="el-menu-vertical-demo"
background-color="#495060"
text-color="#c9cbd0"
active-text-color="#409EFF"
:collapse="isCollapse">
<sidebar-item :menu="menu" :show="!isCollapse"></sidebar-item>
</el-menu>
<el-menu unique-opened :default-active="tag.value" class="el-menu-vertical-demo" background-color="#495060" text-color="#c9cbd0" active-text-color="#fff" :collapse="isCollapse">
<sidebar-item :menu="menu" :show="!isCollapse"></sidebar-item>
</el-menu>
</template>

<script>
Expand Down
10 changes: 7 additions & 3 deletions src/page/index/top/index.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<template>
<div class="header">
<div class="header-button is-left">
<h3 style="letter-spacing: 1px;">Avue 通用管理系统快速开发框架</h3>
<top-logo></top-logo>
</div>
<h1 class="header-title"></h1>
<h1 class="header-title">
<topMenu></topMenu>
</h1>
<div class="header-button is-right">
<el-tooltip class="item" effect="dark" content="锁屏" placement="bottom">
<span class="header-item">
Expand Down Expand Up @@ -43,9 +45,11 @@
<script>
import { mapState, mapGetters } from "vuex";
import { fullscreenToggel } from "@/util/util";
import topLogo from "./top-logo";
import topLock from "./top-lock";
import topMenu from "./top-menu";
export default {
components: { topLock },
components: { topLock, topLogo, topMenu },
name: "top",
data() {
return {};
Expand Down
36 changes: 36 additions & 0 deletions src/page/index/top/top-logo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<div class="pull-auto">
<div class="logo">
<span class="logo_title is-bold">Avue </span>
<span>通用管理系统快速开发框架</span>
</div>
</div>
</template>

<script>
export default {
name: "top-logo",
data() {
return {};
},
created() {},
computed: {},
methods: {}
};
</script>

<style scoped="scoped" lang="scss">
.logo {
display: flex;
align-items: flex-end;
}
.logo_title {
padding: 0 8px 0 0;
color: #409eff;
font-size: 28px;
font-style: italic;
&.is-bold {
font-weight: 700;
}
}
</style>
65 changes: 65 additions & 0 deletions src/page/index/top/top-menu.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<template>
<div class="pull-auto top-menu">
<el-menu :default-active="activeIndex" mode="horizontal">
<template v-for="item in items">
<el-menu-item :index="item.parentId+''" @click.native="openMenu(item)">{{item.label}}</el-menu-item>
</template>
</el-menu>
</div>
</template>

<script>
import { resolveUrlPath } from "@/util/util";
import { mapState, mapGetters } from "vuex";
export default {
name: "top-menu",
data() {
return {
activeIndex: "0",
items: [
{
label: "首页",
href: "/wel/index",
parentId: 0
},
{
label: "设置",
parentId: 1
}
]
};
},
created() {},
computed: {
...mapGetters(["tagCurrent", "menu"])
},
methods: {
openMenu(item) {
this.$store.dispatch("GetMenu", item.parentId).then(data => {
this.$store.commit("DEL_ALL_TAG");
let tagCurrent = Object.assign([], this.tagCurrent);
tagCurrent[0] = {
label: item.label,
value: item.href
};
this.$store.commit("SET_TAG_CURRENT", tagCurrent);
this.$router.push({
path: resolveUrlPath(item.href ? item.href : this.menu[0].href)
});
this.$store.commit("ADD_TAG", {
label: item.label ? item.label : this.menu[0].label,
value: item.href ? item.href : this.menu[0].href
});
});
}
}
};
</script>

<style scoped="scoped" lang="scss">
.top-menu {
padding: 0 50px;
margin-top: -4px;
box-sizing: border-box;
}
</style>
2 changes: 1 addition & 1 deletion src/store/modules/tags.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const navs = {
label: "首页",
value: "/wel/index"
},
tagCurrent: [{
tagCurrent: getStore({ name: 'tagCurrent' }) || [{
label: "首页",
value: "/wel/index"
}],
Expand Down
5 changes: 3 additions & 2 deletions src/store/modules/user.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,10 @@ const user = {
})
},
//获取系统菜单
GetMenu({ commit }) {
GetMenu({ commit }, parentId) {
parentId
return new Promise(resolve => {
getMenu().then((res) => {
getMenu(parentId).then((res) => {
const data = res.data;
commit('SET_MENU', data);
resolve(data);
Expand Down
7 changes: 0 additions & 7 deletions src/styles/sidebar.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@


.el-menu{
border-right: 0;
.is-active{
color:#fff !important;
}
}
.hideSidebar {
.sidebar-container,.sidebar-container .el-menu {
width: 36px!important;
Expand Down
2 changes: 1 addition & 1 deletion src/styles/tags.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
display: flex;
align-items: center;
padding: 0 16px;
height: 60px;
height: 50px;
}
.tags-breadcrumb-list{
padding: 0 25px;
Expand Down
12 changes: 0 additions & 12 deletions static/util/screen.js

This file was deleted.

Binary file added static/util/screen/guge.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/util/screen/huohu.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 7f93552

Please sign in to comment.