Commit fedf6da3801def47a8d32c9db20cb8ac8f7ed354
1 parent
b858224eb6
Exists in
master
menu修改
Showing
14 changed files
with
198 additions
and
87 deletions
Show diff stats
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 '@/components/HeaderSearch' |
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 '@/layout' |
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 '@/layout' |
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
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
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
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 | } | ... | ... |