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 | } | ... | ... |