Commit fedf6da3801def47a8d32c9db20cb8ac8f7ed354

Authored by BigBoss
1 parent b858224eb6
Exists in master

menu修改

src/layout/components/Navbar.vue
1 1 <template>
2 2 <div class="navbar">
3   - <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
  3 + <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
4 4  
5 5 <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
6 6  
... ... @@ -56,7 +56,7 @@
56 56 <script>
57 57 import { mapGetters } from 'vuex'
58 58 import Breadcrumb from '@/components/Breadcrumb'
59   -import Hamburger from '@/components/Hamburger'
  59 +// import Hamburger from '@/components/Hamburger'
60 60 import ErrorLog from '@/components/ErrorLog'
61 61 import Screenfull from '@/components/Screenfull'
62 62 import SizeSelect from '@/components/SizeSelect'
... ... @@ -66,7 +66,7 @@ import Search from &#39;@/components/HeaderSearch&#39;
66 66 export default {
67 67 components: {
68 68 Breadcrumb,
69   - Hamburger,
  69 + // Hamburger,
70 70 ErrorLog,
71 71 Screenfull,
72 72 SizeSelect,
... ...
src/layout/components/Sidebar/Logo.vue
... ... @@ -44,12 +44,17 @@ export default {
44 44  
45 45 .sidebar-logo-container {
46 46 position: relative;
47   - width: 100%;
  47 + // width: 100%;
  48 + width: 154px;
48 49 height: 50px;
49 50 line-height: 50px;
50   - background: #2b2f3a;
  51 + // background: #2b2f3a;
  52 + background:rgb(48, 65, 86);
51 53 text-align: center;
52 54 overflow: hidden;
  55 + z-index: 1;
  56 + float:left;
  57 + margin-right:54px;
53 58  
54 59 & .sidebar-logo-link {
55 60 height: 100%;
... ...
src/layout/components/Sidebar/index.vue
... ... @@ -11,7 +11,7 @@
11 11 :collapse-transition="false"
12 12 mode="horizontal"
13 13 >
14   - <el-menu-item v-for="route in permission_routes" :key="route.path">
  14 + <el-menu-item v-for="route in activeRoute" :key="route.path">
15 15 <sidebar-item :key="route.path" :item="route" :base-path="route.path" />
16 16 </el-menu-item>
17 17  
... ... @@ -33,6 +33,11 @@ export default {
33 33 'permission_routes',
34 34 'sidebar'
35 35 ]),
  36 + activeRoute() {
  37 + return this.permission_routes.filter((route) => {
  38 + return !route.hidden
  39 + })
  40 + },
36 41 activeMenu() {
37 42 const route = this.$route
38 43 const { meta, path } = route
... ...
src/router/index.js
... ... @@ -12,12 +12,12 @@ import Layout from &#39;@/layout&#39;
12 12 // import tableRouter from './modules/table'
13 13 // import nestedRouter from './modules/nested'
14 14 import userRouter from './modules/user'// 用户
15   -import systemRouter from './modules/system'// 系统设置
  15 +// import systemRouter from './modules/system'// 系统设置
16 16 import prodRouter from './modules/prod'// 产品
17 17 import orderRouter from './modules/order'// 订单
18 18 import metaRouter from './modules/meta'// 元定义
19 19 // import sitesRouter from './modules/sites'
20   -import applicationRouter from './modules/application'// 应用
  20 +// import applicationRouter from './modules/application'// 应用
21 21 import operationsRouter from './modules/operations'// 运营官
22 22 import logisticsRouter from './modules/logistics'// 物流路由
23 23 import staffRouter from './modules/staff'// 员工
... ... @@ -56,7 +56,8 @@ export const constantRoutes = [{
56 56 hidden: true,
57 57 children: [{
58 58 path: '/redirect/:path*',
59   - component: () => import('@/views/redirect/index')
  59 + component: () => import('@/views/redirect/index'),
  60 + hidden: true
60 61 }]
61 62 },
62 63 {
... ... @@ -98,7 +99,22 @@ export const constantRoutes = [{
98 99 affix: true
99 100 }
100 101 }]
  102 +},
  103 +{
  104 + path: '/application',
  105 + component: Layout,
  106 + redirect: '/application',
  107 + children: [
  108 + {
  109 + path: 'appManage',
  110 + component: () => import('@/views/application/appManage'),
  111 + name: 'appManage',
  112 + meta: { title: '应用管理', icon: 'component', affix: true },
  113 + roles: ['admin', 'assistant']
  114 + }
  115 + ]
101 116 }
  117 +
102 118 // {
103 119 // path: '/documentation',
104 120 // component: Layout,
... ... @@ -190,7 +206,7 @@ export const asyncRoutes = [
190 206 // ]
191 207 // },
192 208 // tableRouter,
193   - applicationRouter, // 应用
  209 + // applicationRouter, // 应用
194 210 operationsRouter, // 运营官
195 211 // manufacturerRouter,
196 212 userRouter, // 用户
... ... @@ -201,7 +217,7 @@ export const asyncRoutes = [
201 217 recommendRouter, // 推荐
202 218 metaRouter, // 元定义
203 219 // sitesRouter,
204   - systemRouter, // 系统设置
  220 + // systemRouter, // 系统设置
205 221 // componentsRouter,
206 222 // chartsRouter,
207 223 // nestedRouter,
... ...
src/router/modules/application.js
... ... @@ -3,34 +3,49 @@ import Layout from &#39;@/layout&#39;
3 3 const applicationRouter = {
4 4 path: '/application',
5 5 component: Layout,
6   - redirect: '/application/page',
  6 + redirect: '/application',
7 7 alwaysShow: true, // will always show the root menu
8   - name: 'Application',
9   - meta: {
10   - title: '应用',
11   - icon: 'component',
12   - roles: ['admin', 'assistant'] // you can set roles in root nav
13   - },
14   - children: [{
15   - path: 'appManage',
16   - component: () => import('@/views/application/appManage'), // 应用管理/添加
17   - name: 'appManage',
18   - meta: {
19   - title: '应用管理',
20   - icon: 'component',
21   - roles: ['admin', 'assistant'] // or you can only set roles in sub nav
  8 + children: [
  9 + {
  10 + path: 'appManage',
  11 + name: 'appManage',
  12 + component: () => import('@/views/application/appManage'),
  13 + meta: { title: '应用管理', icon: 'component',
  14 + roles: ['admin', 'assistant'] }
22 15 }
23   - },
24   - {
25   - path: 'appList',
26   - component: () => import('@/views/application/appList'), // 应用列表
27   - name: 'appList',
28   - meta: {
29   - title: '应用列表',
30   - icon: 'list',
31   - roles: ['admin', 'assistant'] // or you can only set roles in sub nav
32   - }
33   - }
34 16 ]
35 17 }
  18 +// const applicationRouter = {
  19 +// path: '/application',
  20 +// component: Layout,
  21 +// redirect: '/application',
  22 +// alwaysShow: true, // will always show the root menu
  23 +// name: 'Application',
  24 +// meta: {
  25 +// title: '应用',
  26 +// icon: 'component',
  27 +// roles: ['admin', 'assistant'] // you can set roles in root nav
  28 +// },
  29 +// children: [{
  30 +// path: 'appManage',
  31 +// component: () => import('@/views/application/appManage'), // 应用管理/添加
  32 +// name: 'appManage',
  33 +// meta: {
  34 +// title: '应用管理',
  35 +// icon: 'component',
  36 +// roles: ['admin', 'assistant'] // or you can only set roles in sub nav
  37 +// }
  38 +// },
  39 +// {
  40 +// path: 'appList',
  41 +// component: () => import('@/views/application/appList'), // 应用列表
  42 +// name: 'appList',
  43 +// meta: {
  44 +// title: '应用列表',
  45 +// icon: 'list',
  46 +// roles: ['admin', 'assistant'] // or you can only set roles in sub nav
  47 +// }
  48 +// }
  49 +// ]
  50 +// }
36 51 export default applicationRouter
... ...
src/router/modules/logistics.js
... ... @@ -4,7 +4,7 @@ const logisticsRouter = {
4 4 path: '/logistics',
5 5 component: Layout,
6 6 redirect: '/logistics/page',
7   - alwaysShow: true, // will always show the root menu
  7 + // alwaysShow: true, // will always show the root menu
8 8 name: 'logistics',
9 9 meta: {
10 10 title: '物流',
... ...
src/router/modules/meta.js
... ... @@ -4,7 +4,7 @@ const metaRouter = {
4 4 path: '/meta',
5 5 component: Layout,
6 6 redirect: '/meta/page',
7   - alwaysShow: true, // will always show the root menu
  7 + // alwaysShow: true, // will always show the root menu
8 8 name: 'Meta',
9 9 meta: {
10 10 title: '元定义',
... ...
src/router/modules/operations.js
... ... @@ -4,7 +4,7 @@ const operationsRouter = {
4 4 path: '/operations',
5 5 component: Layout,
6 6 redirect: '/operations/page',
7   - alwaysShow: true, // will always show the root menu
  7 + // alwaysShow: true, // will always show the root menu
8 8 name: 'operations',
9 9 meta: {
10 10 title: '运营官',
... ...
src/router/modules/order.js
... ... @@ -6,7 +6,7 @@ const orderRouter = {
6 6 path: '/orders',
7 7 component: Layout,
8 8 redirect: '/order/page',
9   - alwaysShow: true, // will always show the root menu
  9 + // alwaysShow: true, // will always show the root menu
10 10 name: 'Order',
11 11 meta: {
12 12 title: 'orders',
... ...
src/router/modules/prod.js
... ... @@ -6,7 +6,7 @@ const prodRouter = {
6 6 path: '/prod',
7 7 component: Layout,
8 8 redirect: '/prod/page',
9   - alwaysShow: true, // will always show the root menu
  9 + // alwaysShow: true, // will always show the root menu
10 10 name: 'Prod',
11 11 meta: {
12 12 title: 'prods.prod_menu', // 会自动被i18n替换
... ...
src/router/modules/recommend.js
... ... @@ -4,7 +4,7 @@ const recommendRouter = {
4 4 path: '/recommend',
5 5 component: Layout,
6 6 redirect: '/recommend/page',
7   - alwaysShow: true, // will always show the root menu
  7 + // alwaysShow: true, // will always show the root menu
8 8 name: 'recommend',
9 9 meta: {
10 10 title: '推荐',
... ...
src/router/modules/staff.js
... ... @@ -4,7 +4,7 @@ const staffRouter = {
4 4 path: '/staff',
5 5 component: Layout,
6 6 redirect: '/staff/page',
7   - alwaysShow: true, // will always show the root menu
  7 + // alwaysShow: true, // will always show the root menu
8 8 name: 'staff',
9 9 meta: {
10 10 title: '员工',
... ...
src/router/modules/user.js
... ... @@ -6,7 +6,7 @@ const chartsRouter = {
6 6 path: '/users',
7 7 component: Layout,
8 8 redirect: '/users/page',
9   - alwaysShow: true, // will always show the root menu
  9 + // alwaysShow: true, // will always show the root menu
10 10 name: 'Users',
11 11 meta: {
12 12 title: 'users.people',
... ...
src/views/application/appManage.vue
1 1 <template>
2 2 <el-container class="app-container">
3   - <el-header>
4   - 添加一个新应用(管理员不允许直接添加应用)
5   - </el-header>
6   - <el-main>
7   - <el-form ref="form" :model="form" label-width="120px">
8   - <el-form-item label="app_name">
9   - <el-input v-model="form.app_name" />
10   - </el-form-item>
  3 + <el-aside width="250px" style="background-color: rgb(238, 241, 246)">
  4 + <el-menu :default-openeds="['1','2', '3']">
  5 + <el-menu-item index="1">
  6 + <template slot="title"><i class="el-icon-message" />应用管理</template>
  7 + </el-menu-item>
  8 + <el-submenu index="2">
  9 + <template slot="title"><i class="el-icon-message" />非常戴镜</template>
  10 + <el-menu-item v-for="(item,i) in nav_menu_data" :key="i" :index="item.name">{{ item.title }}</el-menu-item>
  11 + </el-submenu>
  12 + <el-submenu index="3">
  13 + <template slot="title"><i class="el-icon-menu" />亚当光学</template>
  14 + <el-menu-item index="2-1">产品列表</el-menu-item>
  15 + <el-menu-item index="2-2">订单列表</el-menu-item>
  16 + <el-menu-item index="2-3">用户列表</el-menu-item>
  17 + <el-menu-item index="2-4">运行分析</el-menu-item>
  18 + </el-submenu>
  19 + <el-submenu index="4">
  20 + <template slot="title"><i class="el-icon-setting" />秀野光学</template>
  21 + <el-menu-item index="3-1">产品列表</el-menu-item>
  22 + <el-menu-item index="3-2">订单列表</el-menu-item>
  23 + <el-menu-item index="3-3">用户列表</el-menu-item>
  24 + <el-menu-item index="3-4">运行分析</el-menu-item>
  25 + </el-submenu>
  26 + </el-menu>
  27 + </el-aside>
11 28  
12   - <el-form-item label="app_type">
13   - <el-radio-group v-model="form.app_type">
14   - <el-radio label="自建站" />
15   - <el-radio label="自营小程序" />
16   - <el-radio label="淘宝店" />
17   - <el-radio label="微店" />
18   - <el-radio label="亚马逊店" />
19   - <el-radio label="易贝店" />
20   - <el-radio label="拼多多店" />
21   - <el-radio label="抖音店" />
22   - <el-radio label="朋友圈店" />
23   - </el-radio-group>
24   - </el-form-item>
  29 + <el-container class="app-container">
  30 + <el-header>
  31 + 添加一个新应用(管理员不允许直接添加应用)
  32 + </el-header>
  33 + <el-main>
  34 + <el-form ref="form" :model="form" label-width="120px">
  35 + <el-form-item label="app_name">
  36 + <el-input v-model="form.app_name" />
  37 + </el-form-item>
25 38  
26   - <el-form-item label="app_desc">
27   - <el-input v-model="form.app_desc" type="textarea" />
28   - </el-form-item>
29   - <el-form-item label="app_api_key">
30   - <el-input v-model="form.app_api_key" />
31   - </el-form-item>
32   - <el-form-item label="app_user_defined">
33   - <el-input v-model="form.app_user_defined" />
34   - </el-form-item>
  39 + <el-form-item label="app_type">
  40 + <el-radio-group v-model="form.app_type">
  41 + <el-radio label="自建站" />
  42 + <el-radio label="自营小程序" />
  43 + <el-radio label="淘宝店" />
  44 + <el-radio label="微店" />
  45 + <el-radio label="亚马逊店" />
  46 + <el-radio label="易贝店" />
  47 + <el-radio label="拼多多店" />
  48 + <el-radio label="抖音店" />
  49 + <el-radio label="朋友圈店" />
  50 + </el-radio-group>
  51 + </el-form-item>
35 52  
36   - <el-form-item label="app_area_defined">
37   - <el-input v-model="form.app_area_defined" />
38   - </el-form-item>
  53 + <el-form-item label="app_desc">
  54 + <el-input v-model="form.app_desc" type="textarea" />
  55 + </el-form-item>
  56 + <el-form-item label="app_api_key">
  57 + <el-input v-model="form.app_api_key" />
  58 + </el-form-item>
  59 + <el-form-item label="app_user_defined">
  60 + <el-input v-model="form.app_user_defined" />
  61 + </el-form-item>
39 62  
40   - <el-form-item label="app_lang_defined">
41   - <el-input v-model="form.app_lang_defined" />
42   - </el-form-item>
  63 + <el-form-item label="app_area_defined">
  64 + <el-input v-model="form.app_area_defined" />
  65 + </el-form-item>
43 66  
44   - <el-form-item>
45   - <el-button type="primary" @click="onSubmit">添加</el-button>
46   - </el-form-item>
47   - </el-form>
48   - </el-main>
  67 + <el-form-item label="app_lang_defined">
  68 + <el-input v-model="form.app_lang_defined" />
  69 + </el-form-item>
  70 +
  71 + <el-form-item>
  72 + <el-button type="primary" @click="onSubmit">添加</el-button>
  73 + </el-form-item>
  74 + </el-form>
  75 + </el-main>
  76 + </el-container>
49 77 </el-container>
50 78 </template>
51 79  
... ... @@ -61,12 +89,54 @@ export default {
61 89 app_user_defined: '',
62 90 app_area_defined: '',
63 91 app_lang_defined: ''
64   - }
  92 + },
  93 + activeName: 'second',
  94 + path: '',
  95 + nav_menu_data: [{
  96 + title: '产品列表',
  97 + name: 'appList'
  98 + }, {
  99 + title: '订单列表',
  100 + name: 'orderList'
  101 + }, {
  102 + title: '用户列表',
  103 + name: 'userList'
  104 + }, {
  105 + title: '运营分析',
  106 + name: 'analys'
  107 + }],
  108 + prodListTableData: [{
  109 + prodInfo: 'pic',
  110 + prodTag: '非常带劲',
  111 + stock: '102'
  112 + },
  113 + {
  114 + prodInfo: 'pic',
  115 + prodTag: '非常带劲',
  116 + stock: '4531'
  117 + },
  118 + {
  119 + prodInfo: 'pic',
  120 + prodTag: '非常带劲',
  121 + stock: '531'
  122 + },
  123 + {
  124 + prodInfo: 'pic',
  125 + prodTag: '非常带劲',
  126 + stock: '768'
  127 + }]
65 128 }
66 129 },
67 130 methods: {
68 131 onSubmit() {
69 132 this.$message('submit!')
  133 + },
  134 + onRouteChanged() {
  135 + const that = this
  136 + that.path = that.$route.path
  137 + },
  138 + handleClick(tab, event) {
  139 + console.log(tab, event)
70 140 }
71 141 }
72 142 }
... ...