吉鹏 / gulu-admin

src/App.vue

1	<template>	1	<template>
2	<div id="app">	2	<div id="app">
3	<router-view />	3	<router-view />
4	</div>	4	</div>
5
6	</template>	5	</template>
7		6
		7
8	<script>	8	<script>
9	export default {	9	export default {
10	name: 'App'	10	name: "App"
11	}	11	};
12	</script>	12	</script>
		13
		14
		15	<style>
		16	@import "//at.alicdn.com/t/font_1075796_5kpx2vwkmq3.css";
		17
		18	[class^="el-icon-mo"],
		19	[class^=" el-icon-mo"] {
		20	font-family: "iconfont", serif !important;
		21	font-size: 16px;
		22	font-style: normal;
		23	-webkit-font-smoothing: antialiased;
		24	-moz-osx-font-smoothing: grayscale;
		25	}

src/icons/svg/404.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/bug.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/chart.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/clipboard.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/component.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/documentation.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/drag.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/edit.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/education.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/email.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/excel.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/exit-fullscreen.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/fullscreen.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/guide.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/icon.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/international.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/language.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/list.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/lock.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/message.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/money.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/pdf.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/people.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/peoples.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/qq.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/search.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/shopping.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/size.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/skill.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/star.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/tab.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/theme.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/tree-table.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/wechat.svg

Diff comments View file @faa5c25

File was created

1

src/icons/svg/zip.svg

Diff comments View file @faa5c25

File was created

1

src/router/index.js

Diff comments View file @faa5c25

 import Vue from 'vue'
 import Router from 'vue-router'
 Vue.use(Router)
 /* Layout */
 import Layout from '@/layout'
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
  *
  * hidden: true                   if set true, item will not show in the sidebar(default is false)
  * alwaysShow: true               if set true, will always show the root menu
  *                                if not set alwaysShow, when item has more than one children route,
  *                                it will becomes nested mode, otherwise not show the root menu
  * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
  * name:'router-name'             the name is used by <keep-alive> (must set!!!)
  * meta : {
     roles: ['admin','editor']    control the page roles (you can set multiple roles)
     title: 'title'               the name show in sidebar and breadcrumb (recommend set)
     icon: 'svg-name'             the icon show in the sidebar
     breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
     activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
   }
  */
 /**
  * constantRoutes
  * a base page that does not have permission requirements
  * all roles can be accessed
  */
 export const constantRoutes = [{
     path: '/login',
     component: () => import('@/views/login/index'),
     hidden: true
   },
   {
     path: '/404',
     component: () => import('@/views/404'),
     hidden: true
   },
   {
     path: '/',
     component: Layout,
     redirect: '/dashboard',
     children: [{
       path: 'dashboard',
       name: 'Dashboard',
       component: () => import('@/views/dashboard/index'),
       meta: {
         title: '中控台',
         icon: 'dashboard'
       }
     }]
   },
   {
-    path: '/user',
+    path: '/user', //用户管理
     component: Layout,
     redirect: '/user/list',
     name: 'user',
     meta: {
       title: '用户管理',
-      icon: 'example'
+      icon: 'people'
     },
     children: [{
         path: 'user',
         name: 'User',
         component: () => import('@/views/table/index'),
         meta: {
           title: '用户列表',
-          icon: 'table'
+          icon: 'peoples'
-        }
-      },
-      {
-        path: 'tree',
-        name: 'Table',
-        component: () => import('@/views/tree/index'),
-        meta: {
-          title: 'Tree',
-          icon: 'tree'
         }
       }
+      // ,
+      // {
+      //   path: 'tree',
+      //   name: '',
+      //   component: () => import('@/views/tree/index'),
+      //   meta: {
+      //     title: '权限控制',
+      //     icon: 'lock'
+      //   }
+      // }
     ]
   },
   {
-    path: '/example',
+    path: '/shop',
     component: Layout,
-    redirect: '/example/table',
-    name: 'Example',
     meta: {
       title: '商家管理',
-      icon: 'example'
+      icon: 'shopping'
     },
     children: [{
-        path: 'table',
+        path: 'shop',
-        name: 'Table',
+        name: 'Shop',
         component: () => import('@/views/table/index'),
         meta: {
-          title: 'Table',
+          title: '商家列表',
           icon: 'table'
         }
       },
       {
         path: 'tree',
         name: 'Tree',
         component: () => import('@/views/tree/index'),
         meta: {
-          title: 'Tree',
+          title: '图片分析',
-          icon: 'tree'
+          icon: 'chart'
         }
       }
     ]
   },
   {
-    path: '/example',
+    path: '/prod',
     component: Layout,
-    redirect: '/example/table',
+    redirect: '/prod/table',
-    name: 'Example',
+    name: 'Prod',
     meta: {
       title: '产品管理',
-      icon: 'example'
+      icon: 'tree'
     },
     children: [{
         path: 'table',
-        name: 'Table',
+        name: 'Tree',
-        component: () => import('@/views/table/index'),
         meta: {
-          title: 'Table',
+          title: '成镜',
-          icon: 'table'
+          icon: 'tree-table'
-        }
+        },
+        children: [{
+          path: 'table',
+          name: 'tree',
+          component: () => import('@/views/tree/index'),
+          meta: {
+            title: '款式索引',
+            icon: 'tree-table'
+          },
+          children: [{
+            path: 'table',
+            name: 'Table1',
+            component: () => import('@/views/table/index'),
+            meta: {
+              title: '青春学子风',
+              icon: 'guide'
+            }
+          },{
+            path: 'table',
+            name: 'Table1',
+            component: () => import('@/views/table/index'),
+            meta: {
+              title: '质感哥特风',
+              icon: 'guide'
+            }
+          }]
+        },{
+          path: 'table',
+          name: 'tree',
+          component: () => import('@/views/table/index'),
+          meta: {
+            title: '颜色索引',
+            icon: 'tree-table'
+          }
+        }]
       },
       {
         path: 'tree',
         name: 'Tree',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/table/index'),
         meta: {
-          title: 'Tree',
+          title: '镜片',
-          icon: 'tree'
+          icon: 'tree-table'
         }
       }
     ]
   },
   {
-    path: '/example',
+    path: '/Meta',
     component: Layout,
-    redirect: '/example/table',
+    redirect: '/meta/table',
-    name: 'Example',
+    name: 'Meta',
     meta: {
       title: '元管理',
-      icon: 'example'
+      icon: 'guide'
     },
     children: [{
         path: 'table',
         name: 'Table',
         component: () => import('@/views/table/index'),
         meta: {
           title: 'Table',
           icon: 'table'
         }
       },
       {
         path: 'tree',
         name: 'Tree',
         component: () => import('@/views/tree/index'),
         meta: {
           title: 'Tree',
           icon: 'tree'
         }
       }
     ]
   },
   {
-    path: '/example',
+    path: '/trade',
     component: Layout,
     redirect: '/example/table',
-    name: 'Example',
+    name: 'Trade',
     meta: {
       title: '交易管理',
-      icon: 'example'
+      icon: 'money'
     },
     children: [{
         path: 'table',
         name: 'Table',
         component: () => import('@/views/table/index'),
         meta: {
-          title: 'Table',
+          title: '成交清单',
           icon: 'table'
         }
       },
       {
         path: 'tree',
         name: 'Tree',
         component: () => import('@/views/tree/index'),
         meta: {
-          title: 'Tree',
+          title: '未成交清单',
-          icon: 'tree'
+          icon: 'table'
         }
       }
     ]
   }, {
-    path: '/example',
+    path: '/recommand',
     component: Layout,
-    redirect: '/example/table',
+    redirect: '/recommand/table',
-    name: 'Example',
+    name: 'Recommand',
     meta: {
       title: '推荐系统',
-      icon: 'example'
+      icon: 'size'
     },
     children: [{
-        path: 'table',
+      path: 'table',
-        name: 'Table',
+      name: 'Table',
-        component: () => import('@/views/table/index'),
+      component: () => import('@/views/table/index'),
-        meta: {
+      meta: {
-          title: 'Table',
+        title: '推荐系统教学',
-          icon: 'table'
+        icon: 'table'
-        }
-      },
-      {
-        path: 'tree',
-        name: 'Tree',
-        component: () => import('@/views/tree/index'),
-        meta: {
-          title: 'Tree',
-          icon: 'tree'
-        }
       }
-    ]
+    }]
   }, {
     path: '/system',
     component: Layout,
     redirect: '/system/table',
     name: 'System',
     meta: {
       title: '系统设置',
-      icon: 'example'
+      icon: 'component'
     },
     children: [{
-        path: 'table',
+        path: 'hangye_seting',
-        name: 'Table',
+        name: 'Hangye',
         component: () => import('@/views/table/index'),
         meta: {
           title: '行业设置',
-          icon: 'table'
+          icon: 'guide'
         }
       },
       {
-        path: 'tree',
+        path: 'language_seting',
-        name: 'Tree',
+        name: 'Language',
         component: () => import('@/views/tree/index'),
         meta: {
           title: '语言设置',
-          icon: 'tree'
+          icon: 'language'
         }
       },
       {
-        path: 'tree',
+        path: 'money_seting',
-        name: 'Tree',
+        name: 'Money',
         component: () => import('@/views/tree/index'),
         meta: {
           title: '货币设置',
-          icon: 'tree'
+          icon: 'money'
         }
       },
       {
-        path: 'tree',
+        path: 'site_seting',
-        name: 'Tree',
+        name: 'Site',
         component: () => import('@/views/tree/index'),
         meta: {
           title: '站点类型设置',
-          icon: 'tree'
+          icon: 'form'
         }
       },
       {
-        path: 'tree',
+        path: 'template_seting',
-        name: 'Tree',
+        name: 'Template',
         component: () => import('@/views/tree/index'),
         meta: {
           title: '模版设置',
-          icon: 'tree'
+          icon: 'theme'
         }
       },
       {
-        path: 'tree',
+        path: 'power_seting',
-        name: 'Tree',
+        name: 'Power',
         component: () => import('@/views/tree/index'),
         meta: {
           title: '权限设置',
-          icon: 'tree'
+          icon: 'password'
         }
       }
     ]
   },
   {
     path: '/form',
     component: Layout,
     children: [{
       path: 'index',
       name: 'Form',
       component: () => import('@/views/form/index'),
       meta: {
         title: 'Form',
         icon: 'form'
       }
     }]
   }
 ]
 /**
  * asyncRoutes
  * the routes that need to be dynamically loaded based on user roles
  */
 export const asyncRoutes = [
   // 404 page must be placed at the end !!!

src/store/modules/permission.js

Diff comments View file @faa5c25

1	import { asyncRoutes, constantRoutes } from '@/router'	1	import { asyncRoutes, constantRoutes } from '@/router'
2		2
3	/**	3	/**
4	* Use meta.role to determine if the current user has permission	4	* Use meta.role to determine if the current user has permission
5	* @param roles	5	* @param roles
6	* @param route	6	* @param route
7	*/	7	*/
8	function hasPermission(roles, route) {	8	function hasPermission(roles, route) {
9	if (route.meta && route.meta.roles) {	9	if (route.meta && route.meta.roles) {
10	return roles.some(role => route.meta.roles.includes(role))	10	return roles.some(role => route.meta.roles.includes(role))
11	} else {	11	} else {
12	return true	12	return true
13	}	13	}
14	}	14	}
15		15
16	/**	16	/**
17	* Filter asynchronous routing tables by recursion	17	* Filter asynchronous routing tables by recursion
18	* @param routes asyncRoutes	18	* @param routes asyncRoutes
19	* @param roles	19	* @param roles
20	*/	20	*/
21	export function filterAsyncRoutes(routes, roles) {	21	export function filterAsyncRoutes(routes, roles) {
22	const res = []	22	const res = []
23
24	routes.forEach(route => {	23	routes.forEach(route => {
25	const tmp = { ...route }	24	const tmp = { ...route }
26	if (hasPermission(roles, tmp)) {	25	if (hasPermission(roles, tmp)) {
27	if (tmp.children) {	26	if (tmp.children) {
28	tmp.children = filterAsyncRoutes(tmp.children, roles)	27	tmp.children = filterAsyncRoutes(tmp.children, roles)
29	}	28	}
30	res.push(tmp)	29	res.push(tmp)
31	}	30	}
32	})	31	})
33		32
34	return res	33	return res
35	}	34	}
36		35
37	const state = {	36	const state = {
38	routes: [],	37	routes: [],
39	addRoutes: []	38	addRoutes: []
40	}	39	}
41		40
42	const mutations = {	41	const mutations = {
43	SET_ROUTES: (state, routes) => {	42	SET_ROUTES: (state, routes) => {
44	state.addRoutes = routes	43	state.addRoutes = routes
45	state.routes = constantRoutes.concat(routes)	44	state.routes = constantRoutes.concat(routes)
46	}	45	}
47	}	46	}
48		47	//根据动作进行判断
49	const actions = {	48	const actions = {
50	generateRoutes({ commit }, roles) {	49	generateRoutes({ commit }, roles) {
51	return new Promise(resolve => {	50	return new Promise(resolve => {
52	let accessedRoutes	51	let accessedRoutes
53	if (roles.includes('admin')) {	52	if (roles.includes('admin')) {
		53	console.log('------------generateRoutes----asyncRoutes-----------', asyncRoutes, roles);
54	accessedRoutes = asyncRoutes \|\| []	54	accessedRoutes = asyncRoutes \|\| []
55	} else {	55	} else {
56	accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)	56	accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
		57	accessedRoutes.push({});
57	}	58	}
58	commit('SET_ROUTES', accessedRoutes)	59	commit('SET_ROUTES', accessedRoutes)
59	resolve(accessedRoutes)	60	resolve(accessedRoutes)
60	})	61	})
61	}	62	}
62	}	63	}
63		64
64	export default {	65	export default {
65	namespaced: true,	66	namespaced: true,
66	state,	67	state,
67	mutations,	68	mutations,
68	actions	69	actions
69	}	70	}

src/store/modules/user.js

Diff comments View file @faa5c25

 import {
   login,
   logout,
   getInfo
 } from '@/api/user'
 import {
   getToken,
   setToken,
   removeToken
 } from '@/utils/auth'
 import {
   resetRouter
 } from '@/router'
 const getDefaultState = () => {
   return {
     token: getToken(),
     name: '',
     avatar: '',
     roles: []
   }
 }
 const state = getDefaultState()
 const mutations = {
   RESET_STATE: (state) => {
     Object.assign(state, getDefaultState())
   },
   SET_TOKEN: (state, token) => {
     state.token = token
   },
   SET_NAME: (state, name) => {
     state.name = name
   },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
   },
   SET_ROLES: (state, roles) => {
     state.roles = roles
   }
 }
 const actions = {
   // user login
   login({
     commit
   }, userInfo) {
     const {
       username,
       password
     } = userInfo
     return new Promise((resolve, reject) => {
       login({
         username: username.trim(),
         password: password
       }).then(response => {
         console.log('返回的数据-- step 3------>', response);
         // const { token, name, id, password } = response
-        const {token,name} = response
+        const {
+          token,
+          name
+        } = response
         console.log('返回的数据-- step 4------>', response);
         commit('SET_TOKEN', token)
         setToken(token)
         resolve()
       }).catch(error => {
         console.log('返回的数据-- step 4.1------>', error);
         reject(error)
       })
     })
   },
   // get user info
   getInfo({
     commit,
     state
   }) {
     return new Promise((resolve, reject) => {
       getInfo(state.token).then(response => {
         console.log('返回的数据-- step 5------>', state);
         console.log('返回的数据-- step 5.1------>', response);
-        const {avatar,id,name,password,roles,token} = response
+        const {
+          avatar,
+          id,
+          name,
+          password,
+          roles,
+          token
+        } = response
         if (!roles) {
           reject('Verification failed, please Login again.')
         }
         console.error('返回的数据-- step 5.2------>', response);
         // roles must be a non-empty array
         if (!roles || roles.length <= 0) {
           reject('getInfo: roles must be a non-null array!')
         }
         commit('SET_ROLES', roles)
         commit('SET_NAME', name)
         commit('SET_AVATAR', avatar)
         resolve(response)
       }).catch(error => {
         console.log('返回的数据-- step 5.3------>', error);
         reject(error)
       })
     })
   },
   // user logout
   logout({
     commit,
     state
   }) {
     return new Promise((resolve, reject) => {
       logout(state.token).then(() => {
         removeToken() // must remove  token  first
         resetRouter()
         commit('RESET_STATE')
         resolve()
       }).catch(error => {
         reject(error)
       })
     })
   },
   // remove token
   resetToken({
     commit
   }) {
     return new Promise(resolve => {
       removeToken() // must remove  token  first
       commit('RESET_STATE')
       resolve()
     })
   }
 }
 export default {
   namespaced: true,
   state,
   mutations,
   actions
 }

src/views/table/index.vue

Diff comments View file @faa5c25

1	<template>	1	<template>
2	<div class="app-container">	2	<div class="app-container">
3	<el-table	3	<el-table
4	v-loading="listLoading"	4	v-loading="listLoading"
5	:data="list"	5	:data="list"
6	element-loading-text="Loading"	6	element-loading-text="Loading"
7	border	7	border
8	fit	8	fit
9	highlight-current-row	9	highlight-current-row
10	>	10	>
11	<el-table-column align="center" label="用户id">	11	<el-table-column align="center" label="用户id">
12	<template slot-scope="scope">{{ scope.$index }}</template>	12	<template slot-scope="scope">{{ scope.$index }}</template>
13	</el-table-column>	13	</el-table-column>
14		14
15	<el-table-column label="openid">	15	<el-table-column label="openid">
16	<template slot-scope="scope">{{ scope.row.openid }}</template>	16	<template slot-scope="scope">{{ scope.row.openid }}</template>
17	</el-table-column>	17	</el-table-column>
18		18
19	<el-table-column label="昵称" width="110" align="center">	19	<el-table-column label="昵称" width="110" align="center">
20	<template slot-scope="scope">	20	<template slot-scope="scope">
21	<span>{{ scope.row.username }}</span>	21	<span>{{ scope.row.username }}</span>
22	</template>	22	</template>
23	</el-table-column>	23	</el-table-column>
24		24
25	<el-table-column label="头像" width="110" align="center">	25	<el-table-column label="头像" width="110" align="center">
26	<template slot-scope="scope">{{ scope.row.avatar }}</template>	26	<template slot-scope="scope">{{ scope.row.avatar }}</template>
27	</el-table-column>	27	</el-table-column>
28		28
29	<el-table-column class-name="status-col" label="状态" align="center">	29	<el-table-column class-name="status-col" label="状态" align="center">
30	<template slot-scope="scope">	30	<template slot-scope="scope">
31	<el-tag :type="scope.row.status \| statusFilter">{{ scope.row.status }}</el-tag>	31	<el-tag :type="scope.row.status \| statusFilter">{{ scope.row.status }}</el-tag>
32	</template>	32	</template>
33	</el-table-column>	33	</el-table-column>
34		34
35	<el-table-column align="center" prop="created_at" label="注册时间">	35	<el-table-column align="center" prop="created_at" label="注册时间">
36	<template slot-scope="scope">	36	<template slot-scope="scope">
37	<i class="el-icon-time" />	37	<i class="el-icon-time" />
38	<span>{{ scope.row.create_at }}</span>	38	<span>{{ scope.row.create_at }}</span>
39	</template>	39	</template>
40	</el-table-column>	40	</el-table-column>
41	<el-table-column align="center" prop="created_at" label="成交记录">	41	<el-table-column align="center" prop="created_at" label="成交记录">
42	<template slot-scope="scope">	42	<template slot-scope="scope">
43	<i class="el-icon-time" />	43	<i class="el-icon-time" />
44	<span>{{ scope.row.pageviews }}</span>	44	<span>{{ scope.row.pageviews }}</span>
45	</template>	45	</template>
46	</el-table-column>	46	</el-table-column>
47	<el-table-column align="center" prop="created_at" label="引流图">	47	<el-table-column align="center" prop="created_at" label="引流图">
48	<template slot-scope="scope">	48	<template slot-scope="scope">
49	<span>	49	<span>
50	<el-button type="primary">子用户{{scope.row.pageviews}}</el-button>	50	<el-button type="primary">子用户{{scope.row.pageviews}}</el-button>
51	</span>	51	</span>
52	</template>	52	</template>
53	</el-table-column>	53	</el-table-column>
54	</el-table>	54	</el-table>
55	<el-pagination background layout="prev, pager, next" :total="100"></el-pagination>	55	<el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
56	</div>	56	</div>
57	</template>	57	</template>
58		58
59	<script>	59	<script>
60	import { getList } from "@/api/table";	60	import { getList } from "@/api/table";
61		61
62	export default {	62	export default {
63	filters: {	63	filters: {
64	statusFilter(status) {	64	statusFilter(status) {
65	const statusMap = {	65	const statusMap = {
66	published: "success",	66	published: "success",
67	draft: "gray",	67	draft: "gray",
68	deleted: "danger"	68	deleted: "danger"
69	};	69	};
70	return statusMap[status];	70	return statusMap[status];
71	}	71	}
72	},	72	},
73	data() {	73	data() {
74	return {	74	return {
75	list: null,	75	list: null,
76	listLoading: true	76	listLoading: true
77	};	77	};
78	},	78	},
79	created() {	79	created() {
80	this.fetchData();	80	this.fetchData();
81	},	81	},
82	methods: {	82	methods: {
83	fetchData() {	83	fetchData() {
84	this.listLoading = true;	84	this.listLoading = true;
85	getList().then(response => {	85	getList().then(response => {
86	console.log("----getList---", response);	86	console.log("----getList---", response);
87	this.list = response.data.items;	87	this.list = response.items;
88	this.listLoading = false;	88	this.listLoading = false;
89	});	89	});
90	}	90	}
91	}	91	}
92	};	92	};
93	</script>	93	</script>
94		94

GITLAB

吉鹏 / gulu-admin

Merge branch 'master' into 'master'