吉鹏 / gulu-admin

Download as
Browse Code »

Commit fedf6da3801def47a8d32c9db20cb8ac8f7ed354

Authored by BigBoss
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
Diff comments   View file @fedf6da
1 <template> 1 <template>
2 <div class="navbar"> 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 <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> 5 <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
6 6
7 <div class="right-menu"> 7 <div class="right-menu">
8 <template v-if="device!=='mobile'"> 8 <template v-if="device!=='mobile'">
9 <search id="header-search" class="right-menu-item" /> 9 <search id="header-search" class="right-menu-item" />
10 10
11 <error-log class="errLog-container right-menu-item hover-effect" /> 11 <error-log class="errLog-container right-menu-item hover-effect" />
12 12
13 <screenfull id="screenfull" class="right-menu-item hover-effect" /> 13 <screenfull id="screenfull" class="right-menu-item hover-effect" />
14 14
15 <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom"> 15 <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
16 <size-select id="size-select" class="right-menu-item hover-effect" /> 16 <size-select id="size-select" class="right-menu-item hover-effect" />
17 </el-tooltip> 17 </el-tooltip>
18 18
19 <lang-select class="right-menu-item hover-effect" /> 19 <lang-select class="right-menu-item hover-effect" />
20 20
21 </template> 21 </template>
22 22
23 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> 23 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
24 <div class="avatar-wrapper"> 24 <div class="avatar-wrapper">
25 <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> 25 <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
26 <i class="el-icon-caret-bottom" /> 26 <i class="el-icon-caret-bottom" />
27 </div> 27 </div>
28 <el-dropdown-menu slot="dropdown"> 28 <el-dropdown-menu slot="dropdown">
29 <router-link to="/profile/index"> 29 <router-link to="/profile/index">
30 <el-dropdown-item> 30 <el-dropdown-item>
31 {{ $t('navbar.profile') }} 31 {{ $t('navbar.profile') }}
32 </el-dropdown-item> 32 </el-dropdown-item>
33 </router-link> 33 </router-link>
34 <router-link to="/"> 34 <router-link to="/">
35 <el-dropdown-item> 35 <el-dropdown-item>
36 {{ $t('navbar.dashboard') }} 36 {{ $t('navbar.dashboard') }}
37 </el-dropdown-item> 37 </el-dropdown-item>
38 </router-link> 38 </router-link>
39 <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/"> 39 <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
40 <el-dropdown-item> 40 <el-dropdown-item>
41 {{ $t('navbar.github') }} 41 {{ $t('navbar.github') }}
42 </el-dropdown-item> 42 </el-dropdown-item>
43 </a> 43 </a>
44 <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/"> 44 <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
45 <el-dropdown-item>Docs</el-dropdown-item> 45 <el-dropdown-item>Docs</el-dropdown-item>
46 </a> --> 46 </a> -->
47 <el-dropdown-item divided @click.native="logout"> 47 <el-dropdown-item divided @click.native="logout">
48 <span style="display:block;">{{ $t('navbar.logOut') }}</span> 48 <span style="display:block;">{{ $t('navbar.logOut') }}</span>
49 </el-dropdown-item> 49 </el-dropdown-item>
50 </el-dropdown-menu> 50 </el-dropdown-menu>
51 </el-dropdown> 51 </el-dropdown>
52 </div> 52 </div>
53 </div> 53 </div>
54 </template> 54 </template>
55 55
56 <script> 56 <script>
57 import { mapGetters } from 'vuex' 57 import { mapGetters } from 'vuex'
58 import Breadcrumb from '@/components/Breadcrumb' 58 import Breadcrumb from '@/components/Breadcrumb'
59 import Hamburger from '@/components/Hamburger' 59 // import Hamburger from '@/components/Hamburger'
60 import ErrorLog from '@/components/ErrorLog' 60 import ErrorLog from '@/components/ErrorLog'
61 import Screenfull from '@/components/Screenfull' 61 import Screenfull from '@/components/Screenfull'
62 import SizeSelect from '@/components/SizeSelect' 62 import SizeSelect from '@/components/SizeSelect'
63 import LangSelect from '@/components/LangSelect' 63 import LangSelect from '@/components/LangSelect'
64 import Search from '@/components/HeaderSearch' 64 import Search from '@/components/HeaderSearch'
65 65
66 export default { 66 export default {
67 components: { 67 components: {
68 Breadcrumb, 68 Breadcrumb,
69 Hamburger, 69 // Hamburger,
70 ErrorLog, 70 ErrorLog,
71 Screenfull, 71 Screenfull,
72 SizeSelect, 72 SizeSelect,
73 LangSelect, 73 LangSelect,
74 Search 74 Search
75 }, 75 },
76 computed: { 76 computed: {
77 ...mapGetters([ 77 ...mapGetters([
78 'sidebar', 78 'sidebar',
79 'avatar', 79 'avatar',
80 'device' 80 'device'
81 ]) 81 ])
82 }, 82 },
83 methods: { 83 methods: {
84 toggleSideBar() { 84 toggleSideBar() {
85 this.$store.dispatch('app/toggleSideBar') 85 this.$store.dispatch('app/toggleSideBar')
86 }, 86 },
87 async logout() { 87 async logout() {
88 await this.$store.dispatch('user/logout') 88 await this.$store.dispatch('user/logout')
89 this.$router.push(`/login?redirect=${this.$route.fullPath}`) 89 this.$router.push(`/login?redirect=${this.$route.fullPath}`)
90 } 90 }
91 } 91 }
92 } 92 }
93 </script> 93 </script>
94 94
95 <style lang="scss" scoped> 95 <style lang="scss" scoped>
96 .navbar { 96 .navbar {
97 height: 50px; 97 height: 50px;
98 overflow: hidden; 98 overflow: hidden;
99 position: relative; 99 position: relative;
100 background: #fff; 100 background: #fff;
101 box-shadow: 0 1px 4px rgba(0,21,41,.08); 101 box-shadow: 0 1px 4px rgba(0,21,41,.08);
102 102
103 .hamburger-container { 103 .hamburger-container {
104 line-height: 46px; 104 line-height: 46px;
105 height: 100%; 105 height: 100%;
106 float: left; 106 float: left;
107 cursor: pointer; 107 cursor: pointer;
108 transition: background .3s; 108 transition: background .3s;
109 -webkit-tap-highlight-color:transparent; 109 -webkit-tap-highlight-color:transparent;
110 110
111 &:hover { 111 &:hover {
112 background: rgba(0, 0, 0, .025) 112 background: rgba(0, 0, 0, .025)
113 } 113 }
114 } 114 }
115 115
116 .breadcrumb-container { 116 .breadcrumb-container {
117 float: left; 117 float: left;
118 } 118 }
119 119
120 .errLog-container { 120 .errLog-container {
121 display: inline-block; 121 display: inline-block;
122 vertical-align: top; 122 vertical-align: top;
123 } 123 }
124 124
125 .right-menu { 125 .right-menu {
126 float: right; 126 float: right;
127 height: 100%; 127 height: 100%;
128 line-height: 50px; 128 line-height: 50px;
129 129
130 &:focus { 130 &:focus {
131 outline: none; 131 outline: none;
132 } 132 }
133 133
134 .right-menu-item { 134 .right-menu-item {
135 display: inline-block; 135 display: inline-block;
136 padding: 0 8px; 136 padding: 0 8px;
137 height: 100%; 137 height: 100%;
138 font-size: 18px; 138 font-size: 18px;
139 color: #5a5e66; 139 color: #5a5e66;
140 vertical-align: text-bottom; 140 vertical-align: text-bottom;
141 141
142 &.hover-effect { 142 &.hover-effect {
143 cursor: pointer; 143 cursor: pointer;
144 transition: background .3s; 144 transition: background .3s;
145 145
146 &:hover { 146 &:hover {
147 background: rgba(0, 0, 0, .025) 147 background: rgba(0, 0, 0, .025)
148 } 148 }
149 } 149 }
150 } 150 }
151 151
152 .avatar-container { 152 .avatar-container {
153 margin-right: 30px; 153 margin-right: 30px;
154 154
155 .avatar-wrapper { 155 .avatar-wrapper {
156 margin-top: 5px; 156 margin-top: 5px;
157 position: relative; 157 position: relative;
158 158
159 .user-avatar { 159 .user-avatar {
160 cursor: pointer; 160 cursor: pointer;
161 width: 40px; 161 width: 40px;
162 height: 40px; 162 height: 40px;
163 border-radius: 10px; 163 border-radius: 10px;
164 } 164 }
165 165
166 .el-icon-caret-bottom { 166 .el-icon-caret-bottom {
167 cursor: pointer; 167 cursor: pointer;
168 position: absolute; 168 position: absolute;
169 right: -20px; 169 right: -20px;
170 top: 25px; 170 top: 25px;
171 font-size: 12px; 171 font-size: 12px;
172 } 172 }
173 } 173 }
174 } 174 }
175 } 175 }
176 } 176 }
177 </style> 177 </style>
178 178
src/layout/components/Sidebar/Logo.vue
Diff comments   View file @fedf6da
1 <template> 1 <template>
2 <div class="sidebar-logo-container" :class="{'collapse':collapse}"> 2 <div class="sidebar-logo-container" :class="{'collapse':collapse}">
3 <transition name="sidebarLogoFade" style="background:#FFF;"> 3 <transition name="sidebarLogoFade" style="background:#FFF;">
4 <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> 4 <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
5 <img v-if="logo" :src="logo" class="sidebar-logo"> 5 <img v-if="logo" :src="logo" class="sidebar-logo">
6 <h1 v-else class="sidebar-title">{{ title }} </h1> 6 <h1 v-else class="sidebar-title">{{ title }} </h1>
7 </router-link> 7 </router-link>
8 <router-link v-else key="expand" class="sidebar-logo-link" to="/"> 8 <router-link v-else key="expand" class="sidebar-logo-link" to="/">
9 <img v-if="logo" :src="logo" class="sidebar-logo"> 9 <img v-if="logo" :src="logo" class="sidebar-logo">
10 <h1 class="sidebar-title">{{ title }} </h1> 10 <h1 class="sidebar-title">{{ title }} </h1>
11 </router-link> 11 </router-link>
12 </transition> 12 </transition>
13 </div> 13 </div>
14 </template> 14 </template>
15 15
16 <script> 16 <script>
17 import logoPath from '@/assets/img/yp_logo.jpeg' 17 import logoPath from '@/assets/img/yp_logo.jpeg'
18 export default { 18 export default {
19 name: 'SidebarLogo', 19 name: 'SidebarLogo',
20 props: { 20 props: {
21 collapse: { 21 collapse: {
22 type: Boolean, 22 type: Boolean,
23 required: true 23 required: true
24 } 24 }
25 }, 25 },
26 data() { 26 data() {
27 return { 27 return {
28 title: '让我们荡起双浆', 28 title: '让我们荡起双浆',
29 logo: logoPath 29 logo: logoPath
30 } 30 }
31 } 31 }
32 } 32 }
33 </script> 33 </script>
34 34
35 <style lang="scss" scoped> 35 <style lang="scss" scoped>
36 .sidebarLogoFade-enter-active { 36 .sidebarLogoFade-enter-active {
37 transition: opacity 1.5s; 37 transition: opacity 1.5s;
38 } 38 }
39 39
40 .sidebarLogoFade-enter, 40 .sidebarLogoFade-enter,
41 .sidebarLogoFade-leave-to { 41 .sidebarLogoFade-leave-to {
42 opacity: 0; 42 opacity: 0;
43 } 43 }
44 44
45 .sidebar-logo-container { 45 .sidebar-logo-container {
46 position: relative; 46 position: relative;
47 width: 100%; 47 // width: 100%;
48 width: 154px;
48 height: 50px; 49 height: 50px;
49 line-height: 50px; 50 line-height: 50px;
50 background: #2b2f3a; 51 // background: #2b2f3a;
52 background:rgb(48, 65, 86);
51 text-align: center; 53 text-align: center;
52 overflow: hidden; 54 overflow: hidden;
55 z-index: 1;
56 float:left;
57 margin-right:54px;
53 58
54 & .sidebar-logo-link { 59 & .sidebar-logo-link {
55 height: 100%; 60 height: 100%;
56 width: 100%; 61 width: 100%;
57 62
58 & .sidebar-logo { 63 & .sidebar-logo {
59 width: 32px; 64 width: 32px;
60 height: 32px; 65 height: 32px;
61 vertical-align: middle; 66 vertical-align: middle;
62 margin-right: 12px; 67 margin-right: 12px;
63 } 68 }
64 69
65 & .sidebar-title { 70 & .sidebar-title {
66 display: inline-block; 71 display: inline-block;
67 margin: 0; 72 margin: 0;
68 color: #fff; 73 color: #fff;
69 font-weight: 600; 74 font-weight: 600;
70 line-height: 50px; 75 line-height: 50px;
71 font-size: 14px; 76 font-size: 14px;
72 font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; 77 font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
73 vertical-align: middle; 78 vertical-align: middle;
74 } 79 }
75 } 80 }
76 81
77 &.collapse { 82 &.collapse {
78 .sidebar-logo { 83 .sidebar-logo {
79 margin-right: 0px; 84 margin-right: 0px;
80 } 85 }
81 } 86 }
82 } 87 }
83 </style> 88 </style>
84 89
src/layout/components/Sidebar/index.vue
Diff comments   View file @fedf6da
1 <template> 1 <template>
2 <div :class="{'has-logo':showLogo}"> 2 <div :class="{'has-logo':showLogo}">
3 <logo v-if="showLogo" class="logo" :collapse="isCollapse" /> 3 <logo v-if="showLogo" class="logo" :collapse="isCollapse" />
4 <!-- <el-scrollbar wrap-class="scrollbar-wrapper"> --> 4 <!-- <el-scrollbar wrap-class="scrollbar-wrapper"> -->
5 <el-menu 5 <el-menu
6 :default-active="activeMenu" 6 :default-active="activeMenu"
7 :background-color="variables.menuBg" 7 :background-color="variables.menuBg"
8 :text-color="variables.menuText" 8 :text-color="variables.menuText"
9 :unique-opened="false" 9 :unique-opened="false"
10 :active-text-color="variables.menuActiveText" 10 :active-text-color="variables.menuActiveText"
11 :collapse-transition="false" 11 :collapse-transition="false"
12 mode="horizontal" 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 <sidebar-item :key="route.path" :item="route" :base-path="route.path" /> 15 <sidebar-item :key="route.path" :item="route" :base-path="route.path" />
16 </el-menu-item> 16 </el-menu-item>
17 17
18 </el-menu> 18 </el-menu>
19 <!-- </el-scrollbar> --> 19 <!-- </el-scrollbar> -->
20 </div> 20 </div>
21 </template> 21 </template>
22 22
23 <script> 23 <script>
24 import { mapGetters } from 'vuex' 24 import { mapGetters } from 'vuex'
25 import Logo from './Logo' 25 import Logo from './Logo'
26 import SidebarItem from './SidebarItem' 26 import SidebarItem from './SidebarItem'
27 import variables from '@/styles/variables.scss' 27 import variables from '@/styles/variables.scss'
28 28
29 export default { 29 export default {
30 components: { SidebarItem, Logo }, 30 components: { SidebarItem, Logo },
31 computed: { 31 computed: {
32 ...mapGetters([ 32 ...mapGetters([
33 'permission_routes', 33 'permission_routes',
34 'sidebar' 34 'sidebar'
35 ]), 35 ]),
36 activeRoute() {
37 return this.permission_routes.filter((route) => {
38 return !route.hidden
39 })
40 },
36 activeMenu() { 41 activeMenu() {
37 const route = this.$route 42 const route = this.$route
38 const { meta, path } = route 43 const { meta, path } = route
39 // if set path, the sidebar will highlight the path you set 44 // if set path, the sidebar will highlight the path you set
40 if (meta.activeMenu) { 45 if (meta.activeMenu) {
41 return meta.activeMenu 46 return meta.activeMenu
42 } 47 }
43 return path 48 return path
44 }, 49 },
45 showLogo() { 50 showLogo() {
46 return this.$store.state.settings.sidebarLogo 51 return this.$store.state.settings.sidebarLogo
47 }, 52 },
48 variables() { 53 variables() {
49 return variables 54 return variables
50 }, 55 },
51 isCollapse() { 56 isCollapse() {
52 return !this.sidebar.opened 57 return !this.sidebar.opened
53 } 58 }
54 } 59 }
55 } 60 }
56 </script> 61 </script>
57 <style> 62 <style>
58 .logo{ 63 .logo{
59 width:115px; 64 width:115px;
60 } 65 }
61 </style> 66 </style>
62 67
src/router/index.js
Diff comments   View file @fedf6da
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Router from 'vue-router' 2 import Router from 'vue-router'
3 3
4 Vue.use(Router) 4 Vue.use(Router)
5 5
6 /* Layout */ 6 /* Layout */
7 import Layout from '@/layout' 7 import Layout from '@/layout'
8 8
9 /* Router Modules */ 9 /* Router Modules */
10 // import componentsRouter from './modules/components' 10 // import componentsRouter from './modules/components'
11 // import chartsRouter from './modules/charts' 11 // import chartsRouter from './modules/charts'
12 // import tableRouter from './modules/table' 12 // import tableRouter from './modules/table'
13 // import nestedRouter from './modules/nested' 13 // import nestedRouter from './modules/nested'
14 import userRouter from './modules/user'// 用户 14 import userRouter from './modules/user'// 用户
15 import systemRouter from './modules/system'// 系统设置 15 // import systemRouter from './modules/system'// 系统设置
16 import prodRouter from './modules/prod'// 产品 16 import prodRouter from './modules/prod'// 产品
17 import orderRouter from './modules/order'// 订单 17 import orderRouter from './modules/order'// 订单
18 import metaRouter from './modules/meta'// 元定义 18 import metaRouter from './modules/meta'// 元定义
19 // import sitesRouter from './modules/sites' 19 // import sitesRouter from './modules/sites'
20 import applicationRouter from './modules/application'// 应用 20 // import applicationRouter from './modules/application'// 应用
21 import operationsRouter from './modules/operations'// 运营官 21 import operationsRouter from './modules/operations'// 运营官
22 import logisticsRouter from './modules/logistics'// 物流路由 22 import logisticsRouter from './modules/logistics'// 物流路由
23 import staffRouter from './modules/staff'// 员工 23 import staffRouter from './modules/staff'// 员工
24 import recommendRouter from './modules/recommend'// 推荐 24 import recommendRouter from './modules/recommend'// 推荐
25 // import manufacturerRouter from './modules/manufacturer' 25 // import manufacturerRouter from './modules/manufacturer'
26 26
27 /** 27 /**
28 * Note: sub-menu only appear when route children.length >= 1 28 * Note: sub-menu only appear when route children.length >= 1
29 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html 29 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
30 * 30 *
31 * hidden: true if set true, item will not show in the sidebar(default is false) 31 * hidden: true if set true, item will not show in the sidebar(default is false)
32 * alwaysShow: true if set true, will always show the root menu 32 * alwaysShow: true if set true, will always show the root menu
33 * if not set alwaysShow, when item has more than one children route, 33 * if not set alwaysShow, when item has more than one children route,
34 * it will becomes nested mode, otherwise not show the root menu 34 * it will becomes nested mode, otherwise not show the root menu
35 * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb 35 * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
36 * name:'router-name' the name is used by <keep-alive> (must set!!!) 36 * name:'router-name' the name is used by <keep-alive> (must set!!!)
37 * meta : { 37 * meta : {
38 roles: ['admin','assistant','runner', 'shoper'] control the page roles (you can set multiple roles) 38 roles: ['admin','assistant','runner', 'shoper'] control the page roles (you can set multiple roles)
39 title: 'title' the name show in sidebar and breadcrumb (recommend set) 39 title: 'title' the name show in sidebar and breadcrumb (recommend set)
40 icon: 'svg-name' the icon show in the sidebar 40 icon: 'svg-name' the icon show in the sidebar
41 noCache: true if set true, the page will no be cached(default is false) 41 noCache: true if set true, the page will no be cached(default is false)
42 affix: true if set true, the tag will affix in the tags-view 42 affix: true if set true, the tag will affix in the tags-view
43 breadcrumb: false if set false, the item will hidden in breadcrumb(default is true) 43 breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
44 activeMenu: '/example/list' if set path, the sidebar will highlight the path you set 44 activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
45 } 45 }
46 */ 46 */
47 47
48 /** 48 /**
49 * constantRoutes 49 * constantRoutes
50 * a base page that does not have permission requirements 50 * a base page that does not have permission requirements
51 * all roles can be accessed 51 * all roles can be accessed
52 */ 52 */
53 export const constantRoutes = [{ 53 export const constantRoutes = [{
54 path: '/redirect', 54 path: '/redirect',
55 component: Layout, 55 component: Layout,
56 hidden: true, 56 hidden: true,
57 children: [{ 57 children: [{
58 path: '/redirect/:path*', 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 {
63 path: '/login', 64 path: '/login',
64 component: () => import('@/views/login/index'), 65 component: () => import('@/views/login/index'),
65 hidden: true 66 hidden: true
66 }, 67 },
67 { 68 {
68 path: '/auth-redirect', 69 path: '/auth-redirect',
69 component: () => import('@/views/login/auth-redirect'), 70 component: () => import('@/views/login/auth-redirect'),
70 hidden: true 71 hidden: true
71 }, 72 },
72 { 73 {
73 path: '/404', 74 path: '/404',
74 component: () => import('@/views/error-page/404'), 75 component: () => import('@/views/error-page/404'),
75 hidden: true 76 hidden: true
76 }, 77 },
77 { 78 {
78 path: '/500', 79 path: '/500',
79 component: () => import('@/views/error-page/500'), 80 component: () => import('@/views/error-page/500'),
80 hidden: true 81 hidden: true
81 }, 82 },
82 { 83 {
83 path: '/401', 84 path: '/401',
84 component: () => import('@/views/error-page/401'), 85 component: () => import('@/views/error-page/401'),
85 hidden: true 86 hidden: true
86 }, 87 },
87 { 88 {
88 path: '/', 89 path: '/',
89 component: Layout, 90 component: Layout,
90 redirect: '/dashboard', 91 redirect: '/dashboard',
91 children: [{ 92 children: [{
92 path: 'dashboard', 93 path: 'dashboard',
93 component: () => import('@/views/dashboard/index'), 94 component: () => import('@/views/dashboard/index'),
94 name: 'Dashboard', 95 name: 'Dashboard',
95 meta: { 96 meta: {
96 title: 'dashboard', 97 title: 'dashboard',
97 icon: 'dashboard', 98 icon: 'dashboard',
98 affix: true 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 // path: '/documentation', 119 // path: '/documentation',
104 // component: Layout, 120 // component: Layout,
105 // children: [ 121 // children: [
106 // { 122 // {
107 // path: 'index', 123 // path: 'index',
108 // component: () => import('@/views/documentation/index'), 124 // component: () => import('@/views/documentation/index'),
109 // name: 'Documentation', 125 // name: 'Documentation',
110 // meta: { title: 'documentation', icon: 'documentation', affix: true } 126 // meta: { title: 'documentation', icon: 'documentation', affix: true }
111 // } 127 // }
112 // ] 128 // ]
113 // }, 129 // },
114 // { 130 // {
115 // path: '/guide', 131 // path: '/guide',
116 // component: Layout, 132 // component: Layout,
117 // redirect: '/guide/index', 133 // redirect: '/guide/index',
118 // children: [{ 134 // children: [{
119 // path: 'index', 135 // path: 'index',
120 // component: () => import('@/views/guide/index'), 136 // component: () => import('@/views/guide/index'),
121 // name: 'Guide', 137 // name: 'Guide',
122 // meta: { 138 // meta: {
123 // title: 'guide', 139 // title: 'guide',
124 // icon: 'guide', 140 // icon: 'guide',
125 // noCache: true 141 // noCache: true
126 // } 142 // }
127 // }] 143 // }]
128 // } 144 // }
129 // { 145 // {
130 // path: '/profile', 146 // path: '/profile',
131 // component: Layout, 147 // component: Layout,
132 // redirect: '/profile/index', 148 // redirect: '/profile/index',
133 // hidden: true, 149 // hidden: true,
134 // children: [ 150 // children: [
135 // { 151 // {
136 // path: 'index', 152 // path: 'index',
137 // component: () => import('@/views/profile/index'), 153 // component: () => import('@/views/profile/index'),
138 // name: 'Profile', 154 // name: 'Profile',
139 // meta: { title: 'profile', icon: 'user', noCache: true } 155 // meta: { title: 'profile', icon: 'user', noCache: true }
140 // } 156 // }
141 // ] 157 // ]
142 // } 158 // }
143 ] 159 ]
144 160
145 /** 161 /**
146 * asyncRoutes 162 * asyncRoutes
147 * the routes that need to be dynamically loaded based on user roles 163 * the routes that need to be dynamically loaded based on user roles
148 */ 164 */
149 export const asyncRoutes = [ 165 export const asyncRoutes = [
150 // { 166 // {
151 // path: '/permission', 167 // path: '/permission',
152 // component: Layout, 168 // component: Layout,
153 // redirect: '/permission/page', 169 // redirect: '/permission/page',
154 // alwaysShow: true, // will always show the root menu 170 // alwaysShow: true, // will always show the root menu
155 // name: 'Permission', 171 // name: 'Permission',
156 // meta: { 172 // meta: {
157 // title: 'permission', 173 // title: 'permission',
158 // icon: 'lock', 174 // icon: 'lock',
159 // roles: ['admin', 'assistant'] // you can set roles in root nav 175 // roles: ['admin', 'assistant'] // you can set roles in root nav
160 // }, 176 // },
161 // children: [ 177 // children: [
162 // { 178 // {
163 // path: 'page', 179 // path: 'page',
164 // component: () => import('@/views/permission/page'), 180 // component: () => import('@/views/permission/page'),
165 // name: 'PagePermission', 181 // name: 'PagePermission',
166 // meta: { 182 // meta: {
167 // title: 'pagePermission', 183 // title: 'pagePermission',
168 // roles: ['admin','assistant'] // or you can only set roles in sub nav 184 // roles: ['admin','assistant'] // or you can only set roles in sub nav
169 // } 185 // }
170 // }, 186 // },
171 // { 187 // {
172 // path: 'directive', 188 // path: 'directive',
173 // component: () => import('@/views/permission/directive'), 189 // component: () => import('@/views/permission/directive'),
174 // name: 'DirectivePermission', 190 // name: 'DirectivePermission',
175 // meta: { 191 // meta: {
176 // title: 'directivePermission', 192 // title: 'directivePermission',
177 // roles: ['admin', 'shoper'] 193 // roles: ['admin', 'shoper']
178 // // if do not set roles, means: this page does not require permission 194 // // if do not set roles, means: this page does not require permission
179 // } 195 // }
180 // }, 196 // },
181 // { 197 // {
182 // path: 'role', 198 // path: 'role',
183 // component: () => import('@/views/permission/role'), 199 // component: () => import('@/views/permission/role'),
184 // name: 'RolePermission', 200 // name: 'RolePermission',
185 // meta: { 201 // meta: {
186 // title: 'rolePermission', 202 // title: 'rolePermission',
187 // roles: ['admin', 'runner'] 203 // roles: ['admin', 'runner']
188 // } 204 // }
189 // } 205 // }
190 // ] 206 // ]
191 // }, 207 // },
192 // tableRouter, 208 // tableRouter,
193 applicationRouter, // 应用 209 // applicationRouter, // 应用
194 operationsRouter, // 运营官 210 operationsRouter, // 运营官
195 // manufacturerRouter, 211 // manufacturerRouter,
196 userRouter, // 用户 212 userRouter, // 用户
197 orderRouter, // 订单 213 orderRouter, // 订单
198 prodRouter, // 产品 214 prodRouter, // 产品
199 logisticsRouter, // 物流 215 logisticsRouter, // 物流
200 staffRouter, // 员工 216 staffRouter, // 员工
201 recommendRouter, // 推荐 217 recommendRouter, // 推荐
202 metaRouter, // 元定义 218 metaRouter, // 元定义
203 // sitesRouter, 219 // sitesRouter,
204 systemRouter, // 系统设置 220 // systemRouter, // 系统设置
205 // componentsRouter, 221 // componentsRouter,
206 // chartsRouter, 222 // chartsRouter,
207 // nestedRouter, 223 // nestedRouter,
208 // tableRouter, 224 // tableRouter,
209 // { 225 // {
210 // path: '/icon', 226 // path: '/icon',
211 // component: Layout, 227 // component: Layout,
212 // children: [{ 228 // children: [{
213 // path: 'index', 229 // path: 'index',
214 // component: () => import('@/views/icons/index'), 230 // component: () => import('@/views/icons/index'),
215 // name: 'Icons', 231 // name: 'Icons',
216 // meta: { 232 // meta: {
217 // title: 'icons', 233 // title: 'icons',
218 // icon: 'icon', 234 // icon: 'icon',
219 // noCache: true 235 // noCache: true
220 // } 236 // }
221 // }] 237 // }]
222 // }, 238 // },
223 /** when your routing map is too long, you can split it into small modules **/ 239 /** when your routing map is too long, you can split it into small modules **/
224 240
225 // { 241 // {
226 // path: '/example', 242 // path: '/example',
227 // component: Layout, 243 // component: Layout,
228 // redirect: '/example/list', 244 // redirect: '/example/list',
229 // name: 'Example', 245 // name: 'Example',
230 // meta: { 246 // meta: {
231 // title: 'example', 247 // title: 'example',
232 // icon: 'example' 248 // icon: 'example'
233 // }, 249 // },
234 // children: [{ 250 // children: [{
235 // path: 'create', 251 // path: 'create',
236 // component: () => import('@/views/example/create'), 252 // component: () => import('@/views/example/create'),
237 // name: 'CreateArticle', 253 // name: 'CreateArticle',
238 // meta: { 254 // meta: {
239 // title: 'createArticle', 255 // title: 'createArticle',
240 // icon: 'edit' 256 // icon: 'edit'
241 // } 257 // }
242 // }, 258 // },
243 // { 259 // {
244 // path: 'edit/:id(\\d+)', 260 // path: 'edit/:id(\\d+)',
245 // component: () => import('@/views/example/edit'), 261 // component: () => import('@/views/example/edit'),
246 // name: 'EditArticle', 262 // name: 'EditArticle',
247 // meta: { 263 // meta: {
248 // title: 'editArticle', 264 // title: 'editArticle',
249 // noCache: true, 265 // noCache: true,
250 // activeMenu: '/example/list' 266 // activeMenu: '/example/list'
251 // }, 267 // },
252 // hidden: true 268 // hidden: true
253 // }, 269 // },
254 // { 270 // {
255 // path: 'list', 271 // path: 'list',
256 // component: () => import('@/views/example/list'), 272 // component: () => import('@/views/example/list'),
257 // name: 'ArticleList', 273 // name: 'ArticleList',
258 // meta: { 274 // meta: {
259 // title: 'articleList', 275 // title: 'articleList',
260 // icon: 'list' 276 // icon: 'list'
261 // } 277 // }
262 // } 278 // }
263 // ] 279 // ]
264 // }, 280 // },
265 281
266 // { 282 // {
267 // path: '/tab', 283 // path: '/tab',
268 // component: Layout, 284 // component: Layout,
269 // children: [ 285 // children: [
270 // { 286 // {
271 // path: 'index', 287 // path: 'index',
272 // component: () => import('@/views/tab/index'), 288 // component: () => import('@/views/tab/index'),
273 // name: 'Tab', 289 // name: 'Tab',
274 // meta: { title: 'tab', icon: 'tab' } 290 // meta: { title: 'tab', icon: 'tab' }
275 // } 291 // }
276 // ] 292 // ]
277 // }, 293 // },
278 294
279 // { 295 // {
280 // path: '/error', 296 // path: '/error',
281 // component: Layout, 297 // component: Layout,
282 // redirect: 'noRedirect', 298 // redirect: 'noRedirect',
283 // name: 'ErrorPages', 299 // name: 'ErrorPages',
284 // meta: { 300 // meta: {
285 // title: 'errorPages', 301 // title: 'errorPages',
286 // icon: '404' 302 // icon: '404'
287 // }, 303 // },
288 // children: [ 304 // children: [
289 // { 305 // {
290 // path: '401', 306 // path: '401',
291 // component: () => import('@/views/error-page/401'), 307 // component: () => import('@/views/error-page/401'),
292 // name: 'Page401', 308 // name: 'Page401',
293 // meta: { title: 'page401', noCache: true } 309 // meta: { title: 'page401', noCache: true }
294 // }, 310 // },
295 // { 311 // {
296 // path: '404', 312 // path: '404',
297 // component: () => import('@/views/error-page/404'), 313 // component: () => import('@/views/error-page/404'),
298 // name: 'Page404', 314 // name: 'Page404',
299 // meta: { title: 'page404', noCache: true } 315 // meta: { title: 'page404', noCache: true }
300 // } 316 // }
301 // ] 317 // ]
302 // }, 318 // },
303 319
304 // { 320 // {
305 // path: '/error-log', 321 // path: '/error-log',
306 // component: Layout, 322 // component: Layout,
307 // children: [ 323 // children: [
308 // { 324 // {
309 // path: 'log', 325 // path: 'log',
310 // component: () => import('@/views/error-log/index'), 326 // component: () => import('@/views/error-log/index'),
311 // name: 'ErrorLog', 327 // name: 'ErrorLog',
312 // meta: { title: 'errorLog', icon: 'bug' } 328 // meta: { title: 'errorLog', icon: 'bug' }
313 // } 329 // }
314 // ] 330 // ]
315 // }, 331 // },
316 332
317 // { 333 // {
318 // path: '/excel', 334 // path: '/excel',
319 // component: Layout, 335 // component: Layout,
320 // redirect: '/excel/export-excel', 336 // redirect: '/excel/export-excel',
321 // name: 'Excel', 337 // name: 'Excel',
322 // meta: { 338 // meta: {
323 // title: 'excel', 339 // title: 'excel',
324 // icon: 'excel' 340 // icon: 'excel'
325 // }, 341 // },
326 // children: [ 342 // children: [
327 // { 343 // {
328 // path: 'export-excel', 344 // path: 'export-excel',
329 // component: () => import('@/views/excel/export-excel'), 345 // component: () => import('@/views/excel/export-excel'),
330 // name: 'ExportExcel', 346 // name: 'ExportExcel',
331 // meta: { title: 'exportExcel' } 347 // meta: { title: 'exportExcel' }
332 // }, 348 // },
333 // { 349 // {
334 // path: 'export-selected-excel', 350 // path: 'export-selected-excel',
335 // component: () => import('@/views/excel/select-excel'), 351 // component: () => import('@/views/excel/select-excel'),
336 // name: 'SelectExcel', 352 // name: 'SelectExcel',
337 // meta: { title: 'selectExcel' } 353 // meta: { title: 'selectExcel' }
338 // }, 354 // },
339 // { 355 // {
340 // path: 'export-merge-header', 356 // path: 'export-merge-header',
341 // component: () => import('@/views/excel/merge-header'), 357 // component: () => import('@/views/excel/merge-header'),
342 // name: 'MergeHeader', 358 // name: 'MergeHeader',
343 // meta: { title: 'mergeHeader' } 359 // meta: { title: 'mergeHeader' }
344 // }, 360 // },
345 // { 361 // {
346 // path: 'upload-excel', 362 // path: 'upload-excel',
347 // component: () => import('@/views/excel/upload-excel'), 363 // component: () => import('@/views/excel/upload-excel'),
348 // name: 'UploadExcel', 364 // name: 'UploadExcel',
349 // meta: { title: 'uploadExcel' } 365 // meta: { title: 'uploadExcel' }
350 // } 366 // }
351 // ] 367 // ]
352 // }, 368 // },
353 369
354 // { 370 // {
355 // path: '/zip', 371 // path: '/zip',
356 // component: Layout, 372 // component: Layout,
357 // redirect: '/zip/download', 373 // redirect: '/zip/download',
358 // alwaysShow: true, 374 // alwaysShow: true,
359 // name: 'Zip', 375 // name: 'Zip',
360 // meta: { title: 'zip', icon: 'zip' }, 376 // meta: { title: 'zip', icon: 'zip' },
361 // children: [ 377 // children: [
362 // { 378 // {
363 // path: 'download', 379 // path: 'download',
364 // component: () => import('@/views/zip/index'), 380 // component: () => import('@/views/zip/index'),
365 // name: 'ExportZip', 381 // name: 'ExportZip',
366 // meta: { title: 'exportZip' } 382 // meta: { title: 'exportZip' }
367 // } 383 // }
368 // ] 384 // ]
369 // }, 385 // },
370 386
371 // { 387 // {
372 // path: '/pdf', 388 // path: '/pdf',
373 // component: Layout, 389 // component: Layout,
374 // redirect: '/pdf/index', 390 // redirect: '/pdf/index',
375 // children: [ 391 // children: [
376 // { 392 // {
377 // path: 'index', 393 // path: 'index',
378 // component: () => import('@/views/pdf/index'), 394 // component: () => import('@/views/pdf/index'),
379 // name: 'PDF', 395 // name: 'PDF',
380 // meta: { title: 'pdf', icon: 'pdf' } 396 // meta: { title: 'pdf', icon: 'pdf' }
381 // } 397 // }
382 // ] 398 // ]
383 // }, 399 // },
384 // { 400 // {
385 // path: '/pdf/download', 401 // path: '/pdf/download',
386 // component: () => import('@/views/pdf/download'), 402 // component: () => import('@/views/pdf/download'),
387 // hidden: true 403 // hidden: true
388 // }, 404 // },
389 405
390 // { 406 // {
391 // path: '/theme', 407 // path: '/theme',
392 // component: Layout, 408 // component: Layout,
393 // children: [ 409 // children: [
394 // { 410 // {
395 // path: 'index', 411 // path: 'index',
396 // component: () => import('@/views/theme/index'), 412 // component: () => import('@/views/theme/index'),
397 // name: 'Theme', 413 // name: 'Theme',
398 // meta: { title: 'theme', icon: 'theme' } 414 // meta: { title: 'theme', icon: 'theme' }
399 // } 415 // }
400 // ] 416 // ]
401 // }, 417 // },
402 418
403 // { 419 // {
404 // path: '/clipboard', 420 // path: '/clipboard',
405 // component: Layout, 421 // component: Layout,
406 // children: [ 422 // children: [
407 // { 423 // {
408 // path: 'index', 424 // path: 'index',
409 // component: () => import('@/views/clipboard/index'), 425 // component: () => import('@/views/clipboard/index'),
410 // name: 'ClipboardDemo', 426 // name: 'ClipboardDemo',
411 // meta: { title: 'clipboardDemo', icon: 'clipboard' } 427 // meta: { title: 'clipboardDemo', icon: 'clipboard' }
412 // } 428 // }
413 // ] 429 // ]
414 // }, 430 // },
415 431
416 // { 432 // {
417 // path: '/i18n', 433 // path: '/i18n',
418 // component: Layout, 434 // component: Layout,
419 // children: [ 435 // children: [
420 // { 436 // {
421 // path: 'index', 437 // path: 'index',
422 // component: () => import('@/views/i18n-demo/index'), 438 // component: () => import('@/views/i18n-demo/index'),
423 // name: 'I18n', 439 // name: 'I18n',
424 // meta: { title: 'i18n', icon: 'international' } 440 // meta: { title: 'i18n', icon: 'international' }
425 // } 441 // }
426 // ] 442 // ]
427 // }, 443 // },
428 444
429 // { 445 // {
430 // path: 'external-link', 446 // path: 'external-link',
431 // component: Layout, 447 // component: Layout,
432 // children: [ 448 // children: [
433 // { 449 // {
434 // path: 'https://github.com/PanJiaChen/vue-element-admin', 450 // path: 'https://github.com/PanJiaChen/vue-element-admin',
435 // meta: { title: 'externalLink', icon: 'link' } 451 // meta: { title: 'externalLink', icon: 'link' }
436 // } 452 // }
437 // ] 453 // ]
438 // }, 454 // },
439 455
440 // 404 page must be placed at the end !!! 456 // 404 page must be placed at the end !!!
441 { 457 {
442 path: '*', 458 path: '*',
443 redirect: '/404', 459 redirect: '/404',
444 hidden: true 460 hidden: true
445 } 461 }
446 ] 462 ]
447 463
448 const createRouter = () => new Router({ 464 const createRouter = () => new Router({
449 // mode: 'history', // require service support 465 // mode: 'history', // require service support
450 scrollBehavior: () => ({ 466 scrollBehavior: () => ({
451 y: 0 467 y: 0
452 }), 468 }),
453 routes: constantRoutes 469 routes: constantRoutes
454 }) 470 })
455 471
456 const router = createRouter() 472 const router = createRouter()
457 473
458 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 474 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
459 export function resetRouter() { 475 export function resetRouter() {
460 const newRouter = createRouter() 476 const newRouter = createRouter()
461 router.matcher = newRouter.matcher // reset router 477 router.matcher = newRouter.matcher // reset router
462 } 478 }
463 479
464 export default router 480 export default router
465 481
src/router/modules/application.js
Diff comments   View file @fedf6da
1 import Layout from '@/layout' 1 import Layout from '@/layout'
2 2
3 const applicationRouter = { 3 const applicationRouter = {
4 path: '/application', 4 path: '/application',
5 component: Layout, 5 component: Layout,
6 redirect: '/application/page', 6 redirect: '/application',
7 alwaysShow: true, // will always show the root menu 7 alwaysShow: true, // will always show the root menu
8 name: 'Application', 8 children: [
9 meta: { 9 {
10 title: '应用', 10 path: 'appManage',
11 icon: 'component', 11 name: 'appManage',
12 roles: ['admin', 'assistant'] // you can set roles in root nav 12 component: () => import('@/views/application/appManage'),
13 }, 13 meta: { title: '应用管理', icon: 'component',
14 children: [{ 14 roles: ['admin', 'assistant'] }
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
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: '应用管理',
src/router/modules/logistics.js
Diff comments   View file @fedf6da
1 import Layout from '@/layout' 1 import Layout from '@/layout'
2 2
3 const logisticsRouter = { 3 const logisticsRouter = {
4 path: '/logistics', 4 path: '/logistics',
5 component: Layout, 5 component: Layout,
6 redirect: '/logistics/page', 6 redirect: '/logistics/page',
7 alwaysShow: true, // will always show the root menu 7 // alwaysShow: true, // will always show the root menu
8 name: 'logistics', 8 name: 'logistics',
9 meta: { 9 meta: {
10 title: '物流', 10 title: '物流',
11 icon: 'tree-table', 11 icon: 'tree-table',
12 roles: ['admin', 'assistant'] // you can set roles in root nav 12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 }, 13 },
14 children: [{ 14 children: [{
15 path: 'logisticspage', 15 path: 'logisticspage',
16 component: () => import('@/views/logistics/logistics'), 16 component: () => import('@/views/logistics/logistics'),
17 name: 'logistics', 17 name: 'logistics',
18 meta: { 18 meta: {
19 title: '物流管理', 19 title: '物流管理',
20 icon: 'tree-table', 20 icon: 'tree-table',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav 21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 } 22 }
23 }] 23 }]
24 } 24 }
25 export default logisticsRouter 25 export default logisticsRouter
26 26
src/router/modules/meta.js
Diff comments   View file @fedf6da
1 import Layout from '@/layout' 1 import Layout from '@/layout'
2 2
3 const metaRouter = { 3 const metaRouter = {
4 path: '/meta', 4 path: '/meta',
5 component: Layout, 5 component: Layout,
6 redirect: '/meta/page', 6 redirect: '/meta/page',
7 alwaysShow: true, // will always show the root menu 7 // alwaysShow: true, // will always show the root menu
8 name: 'Meta', 8 name: 'Meta',
9 meta: { 9 meta: {
10 title: '元定义', 10 title: '元定义',
11 icon: 'tree', 11 icon: 'tree',
12 roles: ['admin', 'assistant'] // you can set roles in root nav 12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 }, 13 },
14 children: [{ 14 children: [{
15 path: 'metapage', 15 path: 'metapage',
16 component: () => import('@/views/meta/tree'), 16 component: () => import('@/views/meta/tree'),
17 name: 'MetaList', 17 name: 'MetaList',
18 meta: { 18 meta: {
19 title: 'metas.list', 19 title: 'metas.list',
20 icon: 'tree', 20 icon: 'tree',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav 21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 } 22 }
23 }] 23 }]
24 } 24 }
25 export default metaRouter 25 export default metaRouter
26 26
src/router/modules/operations.js
Diff comments   View file @fedf6da
1 import Layout from '@/layout' 1 import Layout from '@/layout'
2 2
3 const operationsRouter = { 3 const operationsRouter = {
4 path: '/operations', 4 path: '/operations',
5 component: Layout, 5 component: Layout,
6 redirect: '/operations/page', 6 redirect: '/operations/page',
7 alwaysShow: true, // will always show the root menu 7 // alwaysShow: true, // will always show the root menu
8 name: 'operations', 8 name: 'operations',
9 meta: { 9 meta: {
10 title: '运营官', 10 title: '运营官',
11 icon: 'user', 11 icon: 'user',
12 roles: ['admin', 'assistant'] // you can set roles in root nav 12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 }, 13 },
14 children: [{ 14 children: [{
15 path: 'operationsManage', 15 path: 'operationsManage',
16 component: () => import('@/views/operations/operations'), 16 component: () => import('@/views/operations/operations'),
17 name: 'operations', 17 name: 'operations',
18 meta: { 18 meta: {
19 title: '运营官管理', 19 title: '运营官管理',
20 icon: 'user', 20 icon: 'user',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav 21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 } 22 }
23 }] 23 }]
24 } 24 }
25 export default operationsRouter 25 export default operationsRouter
26 26
src/router/modules/order.js
Diff comments   View file @fedf6da
1 /** When your routing table is too long, you can split it into small modules**/ 1 /** When your routing table is too long, you can split it into small modules**/
2 2
3 import Layout from '@/layout' 3 import Layout from '@/layout'
4 4
5 const orderRouter = { 5 const orderRouter = {
6 path: '/orders', 6 path: '/orders',
7 component: Layout, 7 component: Layout,
8 redirect: '/order/page', 8 redirect: '/order/page',
9 alwaysShow: true, // will always show the root menu 9 // alwaysShow: true, // will always show the root menu
10 name: 'Order', 10 name: 'Order',
11 meta: { 11 meta: {
12 title: 'orders', 12 title: 'orders',
13 icon: 'shopping', 13 icon: 'shopping',
14 roles: ['admin', 'assistant', 'runner', 'shoper'] // you can set roles in root nav 14 roles: ['admin', 'assistant', 'runner', 'shoper'] // you can set roles in root nav
15 }, 15 },
16 children: [{ 16 children: [{
17 path: 'orderpage', 17 path: 'orderpage',
18 component: () => import('@/views/order/list'), 18 component: () => import('@/views/order/list'),
19 name: 'list', 19 name: 'list',
20 meta: { 20 meta: {
21 title: 'orders', 21 title: 'orders',
22 roles: ['admin', 'assistant', 'runner', 'shoper'] // or you can only set roles in sub nav 22 roles: ['admin', 'assistant', 'runner', 'shoper'] // or you can only set roles in sub nav
23 } 23 }
24 }] 24 }]
25 } 25 }
26 26
27 export default orderRouter 27 export default orderRouter
28 28
src/router/modules/prod.js
Diff comments   View file @fedf6da
1 /** When your routing table is too long, you can split it into small modules**/ 1 /** When your routing table is too long, you can split it into small modules**/
2 2
3 import Layout from '@/layout' 3 import Layout from '@/layout'
4 4
5 const prodRouter = { 5 const prodRouter = {
6 path: '/prod', 6 path: '/prod',
7 component: Layout, 7 component: Layout,
8 redirect: '/prod/page', 8 redirect: '/prod/page',
9 alwaysShow: true, // will always show the root menu 9 // alwaysShow: true, // will always show the root menu
10 name: 'Prod', 10 name: 'Prod',
11 meta: { 11 meta: {
12 title: 'prods.prod_menu', // 会自动被i18n替换 12 title: 'prods.prod_menu', // 会自动被i18n替换
13 icon: 'star', 13 icon: 'star',
14 roles: ['admin', 'assistant', 'runner', 'shoper'] // you can set roles in root nav 14 roles: ['admin', 'assistant', 'runner', 'shoper'] // you can set roles in root nav
15 }, 15 },
16 children: [{ 16 children: [{
17 path: 'list', 17 path: 'list',
18 component: () => import('@/views/prod/list'), 18 component: () => import('@/views/prod/list'),
19 name: 'prodList', 19 name: 'prodList',
20 meta: { 20 meta: {
21 title: 'prods.prodlist', 21 title: 'prods.prodlist',
22 roles: ['admin', 'assistant', 'shoper', 'runner'] 22 roles: ['admin', 'assistant', 'shoper', 'runner']
23 } 23 }
24 }] 24 }]
25 } 25 }
26 26
27 export default prodRouter 27 export default prodRouter
28 28
src/router/modules/recommend.js
Diff comments   View file @fedf6da
1 import Layout from '@/layout' 1 import Layout from '@/layout'
2 2
3 const recommendRouter = { 3 const recommendRouter = {
4 path: '/recommend', 4 path: '/recommend',
5 component: Layout, 5 component: Layout,
6 redirect: '/recommend/page', 6 redirect: '/recommend/page',
7 alwaysShow: true, // will always show the root menu 7 // alwaysShow: true, // will always show the root menu
8 name: 'recommend', 8 name: 'recommend',
9 meta: { 9 meta: {
10 title: '推荐', 10 title: '推荐',
11 icon: 'table', 11 icon: 'table',
12 roles: ['admin', 'assistant'] // you can set roles in root nav 12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 }, 13 },
14 children: [{ 14 children: [{
15 path: 'recommendpage', 15 path: 'recommendpage',
16 component: () => import('@/views/recommend/recommend'), 16 component: () => import('@/views/recommend/recommend'),
17 name: 'recommend', 17 name: 'recommend',
18 meta: { 18 meta: {
19 title: '推荐系统', 19 title: '推荐系统',
20 icon: 'table', 20 icon: 'table',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav 21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 } 22 }
23 }] 23 }]
24 } 24 }
25 export default recommendRouter 25 export default recommendRouter
26 26
src/router/modules/staff.js
Diff comments   View file @fedf6da
1 import Layout from '@/layout' 1 import Layout from '@/layout'
2 2
3 const staffRouter = { 3 const staffRouter = {
4 path: '/staff', 4 path: '/staff',
5 component: Layout, 5 component: Layout,
6 redirect: '/staff/page', 6 redirect: '/staff/page',
7 alwaysShow: true, // will always show the root menu 7 // alwaysShow: true, // will always show the root menu
8 name: 'staff', 8 name: 'staff',
9 meta: { 9 meta: {
10 title: '员工', 10 title: '员工',
11 icon: 'people', 11 icon: 'people',
12 roles: ['admin', 'assistant'] // you can set roles in root nav 12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 }, 13 },
14 children: [{ 14 children: [{
15 path: 'staffpage', 15 path: 'staffpage',
16 component: () => import('@/views/staff/staff'), 16 component: () => import('@/views/staff/staff'),
17 name: 'staff', 17 name: 'staff',
18 meta: { 18 meta: {
19 title: '员工管理', 19 title: '员工管理',
20 icon: 'people', 20 icon: 'people',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav 21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 } 22 }
23 }] 23 }]
24 } 24 }
25 export default staffRouter 25 export default staffRouter
26 26
src/router/modules/user.js
Diff comments   View file @fedf6da
1 /** When your routing table is too long, you can split it into small modules**/ 1 /** When your routing table is too long, you can split it into small modules**/
2 2
3 import Layout from '@/layout' 3 import Layout from '@/layout'
4 4
5 const chartsRouter = { 5 const chartsRouter = {
6 path: '/users', 6 path: '/users',
7 component: Layout, 7 component: Layout,
8 redirect: '/users/page', 8 redirect: '/users/page',
9 alwaysShow: true, // will always show the root menu 9 // alwaysShow: true, // will always show the root menu
10 name: 'Users', 10 name: 'Users',
11 meta: { 11 meta: {
12 title: 'users.people', 12 title: 'users.people',
13 icon: 'peoples', 13 icon: 'peoples',
14 roles: ['admin', 'assistant'] // you can set roles in root nav 14 roles: ['admin', 'assistant'] // you can set roles in root nav
15 }, 15 },
16 children: [{ 16 children: [{
17 path: '用户管理', 17 path: '用户管理',
18 component: () => import('@/views/users/list'), 18 component: () => import('@/views/users/list'),
19 name: '用户管理', 19 name: '用户管理',
20 query: { 20 query: {
21 test: 'ssssss' 21 test: 'ssssss'
22 }, 22 },
23 meta: { 23 meta: {
24 title: '用户管理', 24 title: '用户管理',
25 roles: ['admin'] // or you can only set roles in sub nav 25 roles: ['admin'] // or you can only set roles in sub nav
26 } 26 }
27 } 27 }
28 ] 28 ]
29 } 29 }
30 30
31 export default chartsRouter 31 export default chartsRouter
32 32
src/views/application/appManage.vue
Diff comments   View file @fedf6da
1 <template> 1 <template>
2 <el-container class="app-container"> 2 <el-container class="app-container">
3 <el-header> 3 <el-aside width="250px" style="background-color: rgb(238, 241, 246)">
4 添加一个新应用（管理员不允许直接添加应用） 4 <el-menu :default-openeds="['1','2', '3']">
5 </el-header> 5 <el-menu-item index="1">
6 <el-main> 6 <template slot="title"><i class="el-icon-message" />应用管理</template>
7 <el-form ref="form" :model="form" label-width="120px"> 7 </el-menu-item>
8 <el-form-item label="app_name"> 8 <el-submenu index="2">
9 <el-input v-model="form.app_name" /> 9 <template slot="title"><i class="el-icon-message" />非常戴镜</template>
10 </el-form-item> 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"> 29 <el-container class="app-container">
13 <el-radio-group v-model="form.app_type"> 30 <el-header>
14 <el-radio label="自建站" /> 31 添加一个新应用（管理员不允许直接添加应用）
15 <el-radio label="自营小程序" /> 32 </el-header>
16 <el-radio label="淘宝店" /> 33 <el-main>
17 <el-radio label="微店" /> 34 <el-form ref="form" :model="form" label-width="120px">
18 <el-radio label="亚马逊店" /> 35 <el-form-item label="app_name">
19 <el-radio label="易贝店" /> 36 <el-input v-model="form.app_name" />
20 <el-radio label="拼多多店" /> 37 </el-form-item>
21 <el-radio label="抖音店" />
22 <el-radio label="朋友圈店" />
23 </el-radio-group>
24 </el-form-item>
25 38
26 <el-form-item label="app_desc"> 39 <el-form-item label="app_type">
27 <el-input v-model="form.app_desc" type="textarea" /> 40 <el-radio-group v-model="form.app_type">
28 </el-form-item> 41 <el-radio label="自建站" />
29 <el-form-item label="app_api_key"> 42 <el-radio label="自营小程序" />
30 <el-input v-model="form.app_api_key" /> 43 <el-radio label="淘宝店" />
31 </el-form-item> 44 <el-radio label="微店" />
32 <el-form-item label="app_user_defined"> 45 <el-radio label="亚马逊店" />
33 <el-input v-model="form.app_user_defined" /> 46 <el-radio label="易贝店" />
34 </el-form-item> 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"> 53 <el-form-item label="app_desc">
37 <el-input v-model="form.app_area_defined" /> 54 <el-input v-model="form.app_desc" type="textarea" />
38 </el-form-item> 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"> 63 <el-form-item label="app_area_defined">
41 <el-input v-model="form.app_lang_defined" /> 64 <el-input v-model="form.app_area_defined" />
42 </el-form-item> 65 </el-form-item>
43 66
44 <el-form-item> 67 <el-form-item label="app_lang_defined">
45 <el-button type="primary" @click="onSubmit">添加</el-button> 68 <el-input v-model="form.app_lang_defined" />
46 </el-form-item> 69 </el-form-item>
47 </el-form> 70
48 </el-main> 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 </el-container> 77 </el-container>
50 </template> 78 </template>
51 79
52 <script> 80 <script>
53 export default { 81 export default {
54 data() { 82 data() {
55 return { 83 return {
56 form: { 84 form: {
57 app_name: '', 85 app_name: '',
58 app_type: '', 86 app_type: '',
59 app_desc: '', 87 app_desc: '',
60 app_api_key: '', 88 app_api_key: '',
61 app_user_defined: '', 89 app_user_defined: '',
62 app_area_defined: '', 90 app_area_defined: '',
63 app_lang_defined: '' 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 methods: { 130 methods: {
68 onSubmit() { 131 onSubmit() {
69 this.$message('submit!') 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 }
73 </script> 143 </script>
74 144
75 <style scoped> 145 <style scoped>
76 .el-header{ 146 .el-header{
77 text-align: center; 147 text-align: center;