吉鹏 / gulu-admin

.eslintrc.js

 module.exports = {
   root: true,
   parserOptions: {
     parser: 'babel-eslint',
     sourceType: 'module'
   },
   env: {
     browser: true,
     node: true,
     es6: true,
   },
   extends: ['plugin:vue/recommended', 'eslint:recommended'],
   // add your custom rules here
   //it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
     "vue/max-attributes-per-line": [2, {
       "singleline": 10,
       "multiline": {
         "max": 1,
         "allowFirstLine": false
       }
     }],
     "vue/singleline-html-element-content-newline": "off",
     "vue/multiline-html-element-content-newline":"off",
     "vue/name-property-casing": ["error", "PascalCase"],
     "vue/no-v-html": "off",
     'accessor-pairs': 2,
     'arrow-spacing': [2, {
       'before': true,
       'after': true
     }],
     'block-spacing': [2, 'always'],
     'brace-style': [2, '1tbs', {
       'allowSingleLine': true
     }],
     'camelcase': [0, {
       'properties': 'always'
     }],
     'comma-dangle': [2, 'never'],
     'comma-spacing': [2, {
       'before': false,
       'after': true
     }],
     'comma-style': [2, 'last'],
     'constructor-super': 2,
     'curly': [2, 'multi-line'],
     'dot-location': [2, 'property'],
     'eol-last': 2,
     'eqeqeq': ["error", "always", {"null": "ignore"}],
     'generator-star-spacing': [2, {
       'before': true,
       'after': true
     }],
     'handle-callback-err': [2, '^(err|error)$'],
     'indent': [2, 2, {
       'SwitchCase': 1
     }],
     'jsx-quotes': [2, 'prefer-single'],
     'key-spacing': [2, {
       'beforeColon': false,
       'afterColon': true
     }],
     'keyword-spacing': [2, {
       'before': true,
       'after': true
     }],
     'new-cap': [2, {
       'newIsCap': true,
       'capIsNew': false
     }],
     'new-parens': 2,
     'no-array-constructor': 2,
     'no-caller': 2,
     'no-console': 'off',
     'no-class-assign': 2,
     'no-cond-assign': 2,
     'no-const-assign': 2,
     'no-control-regex': 0,
     'no-delete-var': 2,
     'no-dupe-args': 2,
     'no-dupe-class-members': 2,
     'no-dupe-keys': 2,
     'no-duplicate-case': 2,
     'no-empty-character-class': 2,
     'no-empty-pattern': 2,
     'no-eval': 2,
     'no-ex-assign': 2,
     'no-extend-native': 2,
     'no-extra-bind': 2,
     'no-extra-boolean-cast': 2,
     'no-extra-parens': [2, 'functions'],
     'no-fallthrough': 2,
     'no-floating-decimal': 2,
     'no-func-assign': 2,
     'no-implied-eval': 2,
     'no-inner-declarations': [2, 'functions'],
     'no-invalid-regexp': 2,
     'no-irregular-whitespace': 2,
     'no-iterator': 2,
     'no-label-var': 2,
     'no-labels': [2, {
       'allowLoop': false,
       'allowSwitch': false
     }],
     'no-lone-blocks': 2,
     'no-mixed-spaces-and-tabs': 2,
     'no-multi-spaces': 2,
     'no-multi-str': 2,
     'no-multiple-empty-lines': [2, {
       'max': 1
     }],
     'no-native-reassign': 2,
     'no-negated-in-lhs': 2,
     'no-new-object': 2,
     'no-new-require': 2,
     'no-new-symbol': 2,
     'no-new-wrappers': 2,
     'no-obj-calls': 2,
     'no-octal': 2,
     'no-octal-escape': 2,
     'no-path-concat': 2,
     'no-proto': 2,
     'no-redeclare': 2,
     'no-regex-spaces': 2,
     'no-return-assign': [2, 'except-parens'],
     'no-self-assign': 2,
     'no-self-compare': 2,
     'no-sequences': 2,
     'no-shadow-restricted-names': 2,
     'no-spaced-func': 2,
     'no-sparse-arrays': 2,
     'no-this-before-super': 2,
     'no-throw-literal': 2,
     'no-trailing-spaces': 2,
     'no-undef': 2,
     'no-undef-init': 2,
     'no-unexpected-multiline': 2,
     'no-unmodified-loop-condition': 2,
     'no-unneeded-ternary': [2, {
       'defaultAssignment': false
     }],
     'no-unreachable': 2,
     'no-unsafe-finally': 2,
     'no-unused-vars': [2, {
       'vars': 'all',
       'args': 'none'
     }],
     'no-useless-call': 2,
     'no-useless-computed-key': 2,
     'no-useless-constructor': 2,
     'no-useless-escape': 0,
     'no-whitespace-before-property': 2,
     'no-with': 2,
     'one-var': [2, {
       'initialized': 'never'
     }],
     'operator-linebreak': [2, 'after', {
       'overrides': {
         '?': 'before',
         ':': 'before'
       }
     }],
     'padded-blocks': [2, 'never'],
     'quotes': [2, 'single', {
       'avoidEscape': true,
       'allowTemplateLiterals': true
     }],
     'semi': [2, 'never'],
+    // 'semi': 0,
     'semi-spacing': [2, {
       'before': false,
       'after': true
     }],
     'space-before-blocks': [2, 'always'],
     'space-before-function-paren': [2, 'never'],
     'space-in-parens': [2, 'never'],
     'space-infix-ops': 2,
     'space-unary-ops': [2, {
       'words': true,
       'nonwords': false
     }],
     'spaced-comment': [2, 'always', {
       'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
     }],
     'template-curly-spacing': [2, 'never'],
     'use-isnan': 2,
     'valid-typeof': 2,
     'wrap-iife': [2, 'any'],
     'yield-star-spacing': [2, 'both'],
     'yoda': [2, 'never'],
     'prefer-const': 2,
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
     'object-curly-spacing': [2, 'always', {
       objectsInObjects: false
     }],
     'array-bracket-spacing': [2, 'never']
   }
 }

babel.config.js

Diff comments Edit View file @1172ebb

		1	// module.exports = {
		2	// presets: [
		3	// '@vue/app'
		4	// ]
		5	// }
		6	// "@babel/preset-env",
		7	// {
		8	// "modules": false
		9	// },
1	module.exports = {	10	module.exports = {
2	presets: [	11	"presets": [
3	'@vue/app'	12	[
		13	'@vue/app',
		14	// '@babel/preset-env',
		15	{
		16	// "modules": false,
		17	// "targets": { // 配置代码的运行环境
		18	// "chrome": 64
		19	// },
		20	// "useBuiltIns": true // 开启对 babel-polyfill 的优化
		21	}
		22	]
		23	],
		24	"plugins": [
		25	[
		26	"component",
		27	{
		28	"libraryName": "element-ui",
		29	"styleLibraryName": "theme-chalk"
		30	}
		31	]
4	]	32	]
5	}	33	}
6		34

mock/index.js

Diff comments Edit View file @1172ebb

 import Mock from 'mockjs'
-import { param2Obj } from '../src/utils'
+import {
+  param2Obj
+} from '../src/utils'
 import user from './user'
 import table from './table'
 const mocks = [
   ...user,
   ...table
 ]
 // for front mock
 // please use it cautiously, it will redefine XMLHttpRequest,
 // which will cause many of your third-party libraries to be invalidated(like progress event).
 export function mockXHR() {
   // mock patch
   // https://github.com/nuysoft/Mock/issues/300
   Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
-  Mock.XHR.prototype.send = function() {
+  Mock.XHR.prototype.send = function () {
     if (this.custom.xhr) {
       this.custom.xhr.withCredentials = this.withCredentials || false
       if (this.responseType) {
         this.custom.xhr.responseType = this.responseType
       }
     }
     this.proxy_send(...arguments)
   }
   function XHR2ExpressReqWrap(respond) {
-    return function(options) {
+    return function (options) {
       let result = null
       if (respond instanceof Function) {
-        const { body, type, url } = options
+        const {
+          body,
+          type,
+          url
+        } = options
         // https://expressjs.com/en/4x/api.html#req
         result = respond({
           method: type,
           body: JSON.parse(body),
           query: param2Obj(url)
         })
       } else {
         result = respond
       }
       return Mock.mock(result)
     }
   }
   for (const i of mocks) {
     Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
   }
 }
 // for mock server
 const responseFake = (url, type, respond) => {
   return {
     url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
     type: type || 'get',
     response(req, res) {
       console.log('request invoke:' + req.path)
       res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
     }
   }
 }
 export default mocks.map(route => {
   return responseFake(route.url, route.type, route.response)
 })

mock/table.js

Diff comments Edit View file @1172ebb

 import Mock from 'mockjs'
 const data = Mock.mock({
   'items|10': [{
     id: '@id',
-    title: '@sentence(3, 10)',
+    title: '@sentence(10, 10)',
     'status|1': ['published', 'draft', 'deleted'],
-    author: 'name@integer(300, 5000)',
+    username: '@sentence(1, 2)',
-    display_time: '@datetime',
+    create_at: '@datetime',
-    pageviews: '@integer(300, 5000)'
+    pageviews: '@integer(10, 500)',
+    openid: '@sentence(1, 1)',
+    avatar:'----'
   }]
 })
 export default [
   {
     url: '/yp/table/list',
     type: 'get',
     response: config => {
       const items = data.items
       return {
         code: 20000,
         data: {
           total: items.length,
           items: items
         }
       }
     }
   }
 ]

package.json

Diff comments Edit View file @1172ebb

 {
   "name": "yp-plan",
   "version": "4.2.1",
   "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
   "author": "XYT==admin@xiuyetang.com",
   "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",
     "test:ci": "npm run lint && npm run test:unit",
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
     "axios": "0.18.1",
+    "babel-polyfill": "^6.26.0",
     "echarts": "^4.7.0",
     "element-ui": "2.13.0",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "plop": "^2.6.0",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
+    "@babel/preset-env": "^7.9.6",
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.6.0",
     "@vue/cli-plugin-eslint": "^3.9.1",
     "@vue/cli-plugin-unit-jest": "3.6.3",
     "@vue/cli-service": "3.6.0",
     "@vue/test-utils": "1.0.0-beta.29",
     "autoprefixer": "^9.5.1",
+    "babel-cli": "^6.26.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
+    "babel-plugin-component": "^1.1.1",
+    "babel-preset-env": "^1.7.0",
     "chalk": "2.4.2",
     "connect": "3.6.6",
     "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "html-webpack-plugin": "3.2.0",
     "mockjs": "1.0.1-beta3",
     "node-sass": "^4.9.0",
     "runjs": "^4.3.2",
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "0.7.2",
     "serve-static": "^1.13.2",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
+    "vue-schart": "^2.0.0",
     "vue-template-compiler": "2.6.10"
   },
   "engines": {
     "node": ">=8.9",
     "npm": ">= 3.0.0"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions"
   ]
 }

src/api/admin.js

Diff comments Edit View file @1172ebb

1	import request from '@/utils/request'	1	// import request from '@/utils/request'
2
3	export function login(data) {
4	console.log('login....', data)
5	return request({
6	url: '/yp/user/login',
7	method: 'post',
8	data
9	})
10	}
11
12	export function getInfo(token) {
13	console.log('getInfo....', token)
14	return request({
15	url: '/yp/user/info',
16	method: 'get',
17	params: { token }
18	})
19	}
20
21	export function logout() {
22	console.log('logout....')
23	return request({
24	url: '/yp/user/logout',
25	method: 'post'
26	})
27	}
28		2

src/api/meta.js

Diff comments Edit View file @1172ebb

		1	import request from '@/utils/request'
		2
		3	export function listMeta(params) {
		4	return request({
		5	url: '/yp/meta/list',
		6	method: 'get',
		7	params
		8	})
		9	}
		10
		11	export function addMeta(params) {
		12	return request({
		13	url: '/yp/meta/add',
		14	method: 'get',
		15	params
		16	})
		17	}
		18
		19	export function delMeta(params) {
		20	return request({
		21	url: '/yp/meta/del',
		22	method: 'get',
		23	params
		24	})
		25	}
		26
		27	export function modiMeta(params) {
		28	return request({
		29	url: '/yp/meta/modi',
		30	method: 'get',
		31	params
		32	})
		33	}
		34

src/api/relation.js

Diff comments Edit View file @1172ebb

File was created	1	import request from '@/utils/request'
	2
	3	export function build(params) {
	4	return request({
	5	url: '/yp/relation/build',
	6	method: 'get',
	7	params
	8	})
	9	}
	10
	11	export function del(params) {
	12	return request({
	13	url: '/yp/relation/del',
	14	method: 'get',
	15	params
	16	})
	17	}
	18

src/api/user.js

Diff comments Edit View file @1172ebb

 import request from '@/utils/request'
 export function login(data) {
   console.log('login....', data)
   return request({
     url: '/yp/user/login',
     method: 'post',
     data
   })
 }
 export function getInfo(token) {
   console.log('getInfo....', token)
   return request({
     url: '/yp/user/info',
     method: 'get',
     params: { token }
   })
 }
 export function list(token) {
   console.log('listUser....', token)
   return request({
     url: '/yp/user/list',
     method: 'get',
     params: { token }
   })
 }
+export function add(token) {
+  console.log('addUser....', token)
+  return request({
+    url: '/yp/user/add',
+    method: 'get',
+    params: { token }
+  })
+}
+export function modi(token) {
+  console.log('modiUser....', token)
+  return request({
+    url: '/yp/user/modi',
+    method: 'get',
+    params: { token }
+  })
+}
 export function logout() {
   console.log('logout....')
   return request({
     url: '/yp/user/logout',
     method: 'post'
   })
 }

src/assets/img/img.jpg

Diff comments Edit View file @1172ebb

6 KB

src/assets/img/login-bg.jpg

Diff comments Edit View file @1172ebb

68.9 KB

src/common/Header.vue

Diff comments Edit View file @1172ebb

File was created	1	<template>
	2	<div class="header">
	3	<!-- 折叠按钮 -->
	4	<div class="collapse-btn" @click="collapseChage">
	5	<i v-if="!collapse" class="el-icon-s-fold"></i>
	6	<i v-else class="el-icon-s-unfold"></i>
	7	</div>
	8	<div class="logo">后台管理系统</div>
	9	<div class="header-right">
	10	<div class="header-user-con">
	11	<!-- 全屏显示 -->
	12	<div class="btn-fullscreen" @click="handleFullScreen">
	13	<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
	14	<i class="el-icon-rank"></i>
	15	</el-tooltip>
	16	</div>
	17	<!-- 消息中心 -->
	18	<div class="btn-bell">
	19	<el-tooltip
	20	effect="dark"
	21	:content="message?`有${message}条未读消息`:`消息中心`"
	22	placement="bottom"
	23	>
	24	<router-link to="/tabs">
	25	<i class="el-icon-bell"></i>
	26	</router-link>
	27	</el-tooltip>
	28	<span class="btn-bell-badge" v-if="message"></span>
	29	</div>
	30	<!-- 用户头像 -->
	31	<div class="user-avator">
	32	<img src="../assets/img/img.jpg" />
	33	</div>
	34	<!-- 用户名下拉菜单 -->
	35	<el-dropdown class="user-name" trigger="click" @command="handleCommand">
	36	<span class="el-dropdown-link">
	37	{{username}}
	38	<i class="el-icon-caret-bottom"></i>
	39	</span>
	40	<el-dropdown-menu slot="dropdown">
	41	<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
	42	<el-dropdown-item>项目仓库</el-dropdown-item>
	43	</a>
	44	<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
	45	</el-dropdown-menu>
	46	</el-dropdown>
	47	</div>
	48	</div>
	49	</div>
	50	</template>
	51	<script>
	52	import bus from './bus';
	53	export default {
	54	data() {
	55	return {
	56	collapse: false,
	57	fullscreen: false,
	58	name: 'linxin',
	59	message: 2
	60	};
	61	},
	62	computed: {
	63	username() {
	64	let username = localStorage.getItem('ms_username');
	65	return username ? username : this.name;
	66	}
	67	},
	68	methods: {
	69	// 用户名下拉菜单选择事件
	70	handleCommand(command) {
	71	if (command == 'loginout') {
	72	localStorage.removeItem('ms_username');
	73	this.$router.push('/login');
	74	}
	75	},
	76	// 侧边栏折叠
	77	collapseChage() {
	78	this.collapse = !this.collapse;
	79	bus.$emit('collapse', this.collapse);
	80	},
	81	// 全屏事件
	82	handleFullScreen() {
	83	let element = document.documentElement;
	84	if (this.fullscreen) {
	85	if (document.exitFullscreen) {
	86	document.exitFullscreen();
	87	} else if (document.webkitCancelFullScreen) {
	88	document.webkitCancelFullScreen();
	89	} else if (document.mozCancelFullScreen) {
	90	document.mozCancelFullScreen();
	91	} else if (document.msExitFullscreen) {
	92	document.msExitFullscreen();
	93	}
	94	} else {
	95	if (element.requestFullscreen) {
	96	element.requestFullscreen();
	97	} else if (element.webkitRequestFullScreen) {
	98	element.webkitRequestFullScreen();
	99	} else if (element.mozRequestFullScreen) {
	100	element.mozRequestFullScreen();
	101	} else if (element.msRequestFullscreen) {
	102	// IE11
	103	element.msRequestFullscreen();
	104	}
	105	}
	106	this.fullscreen = !this.fullscreen;
	107	}
	108	},
	109	mounted() {
	110	if (document.body.clientWidth < 1500) {
	111	this.collapseChage();
	112	}
	113	}
	114	};
	115	</script>
	116	<style scoped>
	117	.header {
	118	position: relative;
	119	box-sizing: border-box;
	120	width: 100%;
	121	height: 70px;
	122	font-size: 22px;
	123	color: #fff;
	124	}
	125	.collapse-btn {
	126	float: left;
	127	padding: 0 21px;
	128	cursor: pointer;
	129	line-height: 70px;
	130	}
	131	.header .logo {
	132	float: left;
	133	width: 250px;
	134	line-height: 70px;
	135	}
	136	.header-right {
	137	float: right;
	138	padding-right: 50px;
	139	}
	140	.header-user-con {
	141	display: flex;
	142	height: 70px;
	143	align-items: center;
	144	}
	145	.btn-fullscreen {
	146	transform: rotate(45deg);
	147	margin-right: 5px;
	148	font-size: 24px;
	149	}
	150	.btn-bell,
	151	.btn-fullscreen {
	152	position: relative;
	153	width: 30px;
	154	height: 30px;
	155	text-align: center;
	156	border-radius: 15px;
	157	cursor: pointer;
	158	}
	159	.btn-bell-badge {
	160	position: absolute;
	161	right: 0;
	162	top: -2px;
	163	width: 8px;
	164	height: 8px;
	165	border-radius: 4px;
	166	background: #f56c6c;
	167	color: #fff;
	168	}
	169	.btn-bell .el-icon-bell {
	170	color: #fff;
	171	}
	172	.user-name {
	173	margin-left: 10px;
	174	}
	175	.user-avator {
	176	margin-left: 20px;
	177	}
	178	.user-avator img {
	179	display: block;
	180	width: 40px;
	181	height: 40px;
	182	border-radius: 50%;
	183	}
	184	.el-dropdown-link {
	185	color: #fff;
	186	cursor: pointer;
	187	}
	188	.el-dropdown-menu__item {
	189	text-align: center;
	190	}
	191	</style>

src/common/Home.vue

Diff comments Edit View file @1172ebb

File was created	1	<template>
	2	<div class="wrapper">
	3	<v-head></v-head>
	4	<v-sidebar></v-sidebar>
	5	<div class="content-box" :class="{'content-collapse':collapse}">
	6	<v-tags></v-tags>
	7	<div class="content">
	8	<transition name="move" mode="out-in">
	9	<keep-alive :include="tagsList">
	10	<router-view></router-view>
	11	</keep-alive>
	12	</transition>
	13	<el-backtop target=".content"></el-backtop>
	14	</div>
	15	</div>
	16	</div>
	17	</template>
	18
	19	<script>
	20	import vHead from './Header.vue';
	21	import vSidebar from './Sidebar.vue';
	22	import vTags from './Tags.vue';
	23	import bus from './bus';
	24	export default {
	25	data() {
	26	return {
	27	tagsList: [],
	28	collapse: false
	29	};
	30	},
	31	components: {
	32	vHead,
	33	vSidebar,
	34	vTags
	35	},
	36	created() {
	37	bus.$on('collapse-content', msg => {
	38	this.collapse = msg;
	39	});
	40	// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
	41	bus.$on('tags', msg => {
	42	let arr = [];
	43	for (let i = 0, len = msg.length; i < len; i++) {
	44	msg[i].name && arr.push(msg[i].name);
	45	}
	46	this.tagsList = arr;
	47	});
	48	}
	49	};
	50	</script>

src/common/Sidebar.vue

Diff comments Edit View file @1172ebb

File was created	1	<template>
	2	<div class="sidebar">
	3	<el-menu
	4	class="sidebar-el-menu"
	5	:default-active="onRoutes"
	6	:collapse="collapse"
	7	background-color="#324157"
	8	text-color="#bfcbd9"
	9	active-text-color="#20a0ff"
	10	unique-opened
	11	router
	12	>
	13	<template v-for="item in items">
	14	<template v-if="item.subs">
	15	<el-submenu :index="item.index" :key="item.index">
	16	<template slot="title">
	17	<i :class="item.icon"></i>
	18	<span slot="title">{{ item.title }}</span>
	19	</template>
	20	<template v-for="subItem in item.subs">
	21	<el-submenu
	22	v-if="subItem.subs"
	23	:index="subItem.index"
	24	:key="subItem.index"
	25	>
	26	<template slot="title">{{ subItem.title }}</template>
	27	<el-menu-item
	28	v-for="(threeItem,i) in subItem.subs"
	29	:key="i"
	30	:index="threeItem.index"
	31	>{{ threeItem.title }}</el-menu-item>
	32	</el-submenu>
	33	<el-menu-item
	34	v-else
	35	:index="subItem.index"
	36	:key="subItem.index"
	37	>{{ subItem.title }}</el-menu-item>
	38	</template>
	39	</el-submenu>
	40	</template>
	41	<template v-else>
	42	<el-menu-item :index="item.index" :key="item.index">
	43	<i :class="item.icon"></i>
	44	<span slot="title">{{ item.title }}</span>
	45	</el-menu-item>
	46	</template>
	47	</template>
	48	</el-menu>
	49	</div>
	50	</template>
	51
	52	<script>
	53	import bus from './bus';
	54	export default {
	55	data() {
	56	return {
	57	collapse: false,
	58	items: [
	59	{
	60	icon: 'el-icon-lx-home',
	61	index: 'dashboard',
	62	title: '系统首页'
	63	},
	64	{
	65	icon: 'el-icon-lx-cascades',
	66	index: 'table',
	67	title: '基础表格'
	68	},
	69	{
	70	icon: 'el-icon-lx-copy',
	71	index: 'tabs',
	72	title: 'tab选项卡'
	73	},
	74	{
	75	icon: 'el-icon-lx-calendar',
	76	index: '3',
	77	title: '表单相关',
	78	subs: [
	79	{
	80	index: 'form',
	81	title: '基本表单'
	82	},
	83	{
	84	index: '3-2',
	85	title: '三级菜单',
	86	subs: [
	87	{
	88	index: 'editor',
	89	title: '富文本编辑器'
	90	},
	91	{
	92	index: 'markdown',
	93	title: 'markdown编辑器'
	94	}
	95	]
	96	},
	97	{
	98	index: 'upload',
	99	title: '文件上传'
	100	}
	101	]
	102	},
	103	{
	104	icon: 'el-icon-lx-emoji',
	105	index: 'icon',
	106	title: '自定义图标'
	107	},
	108	{
	109	icon: 'el-icon-pie-chart',
	110	index: 'charts',
	111	title: 'schart图表'
	112	},
	113	{
	114	icon: 'el-icon-rank',
	115	index: '6',
	116	title: '拖拽组件',
	117	subs: [
	118	{
	119	index: 'drag',
	120	title: '拖拽列表'
	121	},
	122	{
	123	index: 'dialog',
	124	title: '拖拽弹框'
	125	}
	126	]
	127	},
	128	{
	129	icon: 'el-icon-lx-global',
	130	index: 'i18n',
	131	title: '国际化功能'
	132	},
	133	{
	134	icon: 'el-icon-lx-warn',
	135	index: '7',
	136	title: '错误处理',
	137	subs: [
	138	{
	139	index: 'permission',
	140	title: '权限测试'
	141	},
	142	{
	143	index: '404',
	144	title: '404页面'
	145	}
	146	]
	147	},
	148	{
	149	icon: 'el-icon-lx-redpacket_fill',
	150	index: '/donate',
	151	title: '支持作者'
	152	}
	153	]
	154	};
	155	},
	156	computed: {
	157	onRoutes() {
	158	return this.$route.path.replace('/', '');
	159	}
	160	},
	161	created() {
	162	// 通过 Event Bus 进行组件间通信，来折叠侧边栏
	163	bus.$on('collapse', msg => {
	164	this.collapse = msg;
	165	bus.$emit('collapse-content', msg);
	166	});
	167	}
	168	};
	169	</script>
	170
	171	<style scoped>
	172	.sidebar {
	173	display: block;
	174	position: absolute;
	175	left: 0;
	176	top: 70px;
	177	bottom: 0;
	178	overflow-y: scroll;
	179	}
	180	.sidebar::-webkit-scrollbar {
	181	width: 0;
	182	}
	183	.sidebar-el-menu:not(.el-menu--collapse) {
	184	width: 250px;
	185	}
	186	.sidebar > ul {
	187	height: 100%;
	188	}
	189	</style>

src/common/Tags.vue

Diff comments Edit View file @1172ebb

File was created	1	<template>
	2	<div class="tags" v-if="showTags">
	3	<ul>
	4	<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
	5	<router-link :to="item.path" class="tags-li-title">
	6	{{item.title}}
	7	</router-link>
	8	<span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
	9	</li>
	10	</ul>
	11	<div class="tags-close-box">
	12	<el-dropdown @command="handleTags">
	13	<el-button size="mini" type="primary">
	14	标签选项<i class="el-icon-arrow-down el-icon--right"></i>
	15	</el-button>
	16	<el-dropdown-menu size="small" slot="dropdown">
	17	<el-dropdown-item command="other">关闭其他</el-dropdown-item>
	18	<el-dropdown-item command="all">关闭所有</el-dropdown-item>
	19	</el-dropdown-menu>
	20	</el-dropdown>
	21	</div>
	22	</div>
	23	</template>
	24
	25	<script>
	26	import bus from './bus';
	27	export default {
	28	data() {
	29	return {
	30	tagsList: []
	31	}
	32	},
	33	methods: {
	34	isActive(path) {
	35	return path === this.$route.fullPath;
	36	},
	37	// 关闭单个标签
	38	closeTags(index) {
	39	const delItem = this.tagsList.splice(index, 1)[0];
	40	const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
	41	if (item) {
	42	delItem.path === this.$route.fullPath && this.$router.push(item.path);
	43	}else{
	44	this.$router.push('/');
	45	}
	46	},
	47	// 关闭全部标签
	48	closeAll(){
	49	this.tagsList = [];
	50	this.$router.push('/');
	51	},
	52	// 关闭其他标签
	53	closeOther(){
	54	const curItem = this.tagsList.filter(item => {
	55	return item.path === this.$route.fullPath;
	56	})
	57	this.tagsList = curItem;
	58	},
	59	// 设置标签
	60	setTags(route){
	61	const isExist = this.tagsList.some(item => {
	62	return item.path === route.fullPath;
	63	})
	64	if(!isExist){
	65	if(this.tagsList.length >= 8){
	66	this.tagsList.shift();
	67	}
	68	this.tagsList.push({
	69	title: route.meta.title,
	70	path: route.fullPath,
	71	name: route.matched[1].components.default.name
	72	})
	73	}
	74	bus.$emit('tags', this.tagsList);
	75	},
	76	handleTags(command){
	77	command === 'other' ? this.closeOther() : this.closeAll();
	78	}
	79	},
	80	computed: {
	81	showTags() {
	82	return this.tagsList.length > 0;
	83	}
	84	},
	85	watch:{
	86	$route(newValue, oldValue){
	87	this.setTags(newValue);
	88	}
	89	},
	90	created(){
	91	this.setTags(this.$route);
	92	// 监听关闭当前页面的标签页
	93	bus.$on('close_current_tags', () => {
	94	for (let i = 0, len = this.tagsList.length; i < len; i++) {
	95	const item = this.tagsList[i];
	96	if(item.path === this.$route.fullPath){
	97	if(i < len - 1){
	98	this.$router.push(this.tagsList[i+1].path);
	99	}else if(i > 0){
	100	this.$router.push(this.tagsList[i-1].path);
	101	}else{
	102	this.$router.push('/');
	103	}
	104	this.tagsList.splice(i, 1);
	105	break;
	106	}
	107	}
	108	})
	109	}
	110	}
	111	</script>
	112
	113
	114	<style>
	115	.tags {
	116	position: relative;
	117	height: 30px;
	118	overflow: hidden;
	119	background: #fff;
	120	padding-right: 120px;
	121	box-shadow: 0 5px 10px #ddd;
	122	}
	123	.tags ul {
	124	box-sizing: border-box;
	125	width: 100%;
	126	height: 100%;
	127	}
	128	.tags-li {
	129	float: left;
	130	margin: 3px 5px 2px 3px;
	131	border-radius: 3px;
	132	font-size: 12px;
	133	overflow: hidden;
	134	cursor: pointer;
	135	height: 23px;
	136	line-height: 23px;
	137	border: 1px solid #e9eaec;
	138	background: #fff;
	139	padding: 0 5px 0 12px;
	140	vertical-align: middle;
	141	color: #666;
	142	-webkit-transition: all .3s ease-in;
	143	-moz-transition: all .3s ease-in;
	144	transition: all .3s ease-in;
	145	}
	146	.tags-li:not(.active):hover {
	147	background: #f8f8f8;
	148	}
	149	.tags-li.active {
	150	color: #fff;
	151	}
	152	.tags-li-title {
	153	float: left;
	154	max-width: 80px;
	155	overflow: hidden;
	156	white-space: nowrap;
	157	text-overflow: ellipsis;
	158	margin-right: 5px;
	159	color: #666;
	160	}
	161	.tags-li.active .tags-li-title {
	162	color: #fff;
	163	}
	164	.tags-close-box {
	165	position: absolute;
	166	right: 0;
	167	top: 0;
	168	box-sizing: border-box;
	169	padding-top: 1px;
	170	text-align: center;
	171	width: 110px;
	172	height: 30px;
	173	background: #fff;
	174	box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
	175	z-index: 10;
	176	}
	177	</style>

src/common/bus.js

Diff comments Edit View file @1172ebb

File was created	1	import Vue from 'vue';
	2
	3	// 使用 Event Bus
	4	const bus = new Vue();
	5
	6	export default bus;
	7

src/common/directives.js

Diff comments Edit View file @1172ebb

File was created	1	import Vue from 'vue';
	2
	3	// v-dialogDrag: 弹窗拖拽属性
	4	Vue.directive('dialogDrag', {
	5	bind(el, binding, vnode, oldVnode) {
	6	const dialogHeaderEl = el.querySelector('.el-dialog__header');
	7	const dragDom = el.querySelector('.el-dialog');
	8
	9	dialogHeaderEl.style.cssText += ';cursor:move;'
	10	dragDom.style.cssText += ';top:0px;'
	11
	12	// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
	13	const sty = (() => {
	14	if (window.document.currentStyle) {
	15	return (dom, attr) => dom.currentStyle[attr];
	16	} else {
	17	return (dom, attr) => getComputedStyle(dom, false)[attr];
	18	}
	19	})()
	20
	21	dialogHeaderEl.onmousedown = (e) => {
	22	// 鼠标按下，计算当前元素距离可视区的距离
	23	const disX = e.clientX - dialogHeaderEl.offsetLeft;
	24	const disY = e.clientY - dialogHeaderEl.offsetTop;
	25
	26	const screenWidth = document.body.clientWidth; // body当前宽度
	27	const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
	28
	29	const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
	30	const dragDomheight = dragDom.offsetHeight; // 对话框高度
	31
	32	const minDragDomLeft = dragDom.offsetLeft;
	33	const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
	34
	35	const minDragDomTop = dragDom.offsetTop;
	36	const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
	37
	38
	39	// 获取到的值带px 正则匹配替换
	40	let styL = sty(dragDom, 'left');
	41	let styT = sty(dragDom, 'top');
	42
	43	// 注意在ie中第一次获取到的值为组件自带50% 移动之后赋值为px
	44	if (styL.includes('%')) {
	45	styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
	46	styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
	47	} else {
	48	styL = +styL.replace(/\px/g, '');
	49	styT = +styT.replace(/\px/g, '');
	50	};
	51
	52	document.onmousemove = function (e) {
	53	// 通过事件委托，计算移动的距离
	54	let left = e.clientX - disX;
	55	let top = e.clientY - disY;
	56
	57	// 边界处理
	58	if (-(left) > minDragDomLeft) {
	59	left = -(minDragDomLeft);
	60	} else if (left > maxDragDomLeft) {
	61	left = maxDragDomLeft;
	62	}
	63
	64	if (-(top) > minDragDomTop) {
	65	top = -(minDragDomTop);
	66	} else if (top > maxDragDomTop) {
	67	top = maxDragDomTop;
	68	}
	69
	70	// 移动当前元素
	71	dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
	72	};
	73
	74	document.onmouseup = function (e) {
	75	document.onmousemove = null;
	76	document.onmouseup = null;
	77	};
	78	}
	79	}
	80	})

src/common/i18n.js

Diff comments Edit View file @1172ebb

File was created	1	export const messages = {
	2	'zh': {
	3	i18n: {
	4	breadcrumb: '国际化产品',
	5	tips: '通过切换语言按钮，来改变当前内容的语言。',
	6	btn: '切换英文',
	7	title1: '常用用法',
	8	p1: '要是你把你的秘密告诉了风，那就别怪风把它带给树。',
	9	p2: '没有什么比信念更能支撑我们度过艰难的时光了。',
	10	p3: '只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。',
	11	title2: '组件插值',
	12	info: 'Element组件需要国际化，请参考 {action}。',
	13	value: '文档'
	14	}
	15	},
	16	'en': {
	17	i18n: {
	18	breadcrumb: 'International Products',
	19	tips: 'Click on the button to change the current language. ',
	20	btn: 'Switch Chinese',
	21	title1: 'Common usage',
	22	p1: "If you reveal your secrets to the wind you should not blame the wind for revealing them to the trees.",
	23	p2: "Nothing can help us endure dark times better than our faith. ",
	24	p3: "If you can do what you do best and be happy, you're further along in life than most people.",
	25	title2: 'Component interpolation',
	26	info: 'The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.',
	27	value: 'documentation'
	28	}
	29	}
	30	}

src/layout/components/Navbar.vue

Diff comments Edit View file @1172ebb

 <template>
   <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
     <breadcrumb class="breadcrumb-container" />
     <div class="right-menu">
-      语言设置
+      <el-menu
-      <el-dropdown class="avatar-container" trigger="click">
+        :default-active="activeIndex"
-        <div class="avatar-wrapper">
+        class="el-menu-demo"
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+        mode="horizontal"
-          <i class="el-icon-caret-bottom" />
+        @select="handleSelect"
-        </div>
+      >
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-menu-item index="1">
-          <router-link to="/">
+          <i class="el-icon-bell"></i>通知中心
-            <el-dropdown-item>
+          <el-badge class="mark" :value="12" />
-              Home
+        </el-menu-item>
-            </el-dropdown-item>
+        <el-submenu index="2">
-          </router-link>
+          <template slot="title">
-          <router-link to="/seting">
+            <i class="el-icon-custom"></i>个人设置
-            <el-dropdown-item>
+          </template>
-              个人设置
+          <el-menu-item index="2-1">选项1</el-menu-item>
-            </el-dropdown-item>
+          <el-menu-item index="2-2">选项2</el-menu-item>
-          </router-link>
+          <el-menu-item index="2-3">选项3</el-menu-item>
-          <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
+        </el-submenu>
+        <el-dropdown class="avatar-container" trigger="click">
+          <div class="avatar-wrapper">
+            <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar" />
+            <i class="el-icon-caret-bottom" />
+          </div>
+          <el-dropdown-menu slot="dropdown" class="user-dropdown">
+            <router-link to="/">
+              <el-dropdown-item>Home</el-dropdown-item>
+            </router-link>
+            <router-link to="/seting">
+              <el-dropdown-item>个人设置</el-dropdown-item>
+            </router-link>
+            <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
             <el-dropdown-item>Github</el-dropdown-item>
-          </a> -->
+            </a>-->
-          <!-- <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
+            <!-- <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
             <el-dropdown-item>Docs</el-dropdown-item>
-          </a> -->
+            </a>-->
-          <el-dropdown-item divided @click.native="logout">
+            <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">退出系统</span>
+              <span style="display:block;">退出系统</span>
-          </el-dropdown-item>
+            </el-dropdown-item>
-        </el-dropdown-menu>
+          </el-dropdown-menu>
-      </el-dropdown>
+        </el-dropdown>
+        <el-menu-item index="3" disabled>ddd</el-menu-item>
+        <el-menu-item index="4">
+          <a href="https://glass.xiuyetang.com" target="_blank">跳到外部链接</a>
+        </el-menu-item>
+      </el-menu>
     </div>
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
-import Breadcrumb from '@/components/Breadcrumb'
+import Breadcrumb from "@/components/Breadcrumb";
-import Hamburger from '@/components/Hamburger'
+import Hamburger from "@/components/Hamburger";
 export default {
   components: {
     Breadcrumb,
     Hamburger
   },
   computed: {
-    ...mapGetters([
+    ...mapGetters(["sidebar", "avatar"])
-      'sidebar',
-      'avatar'
-    ])
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      await this.$store.dispatch('user/logout')
+      await this.$store.dispatch("user/logout");
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
+.item {
+  margin-top: 10px;
+  margin-right: 20px;
+}
 .navbar {
   height: 50px;
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
+    transition: background 0.3s;
-    -webkit-tap-highlight-color:transparent;
+    -webkit-tap-highlight-color: transparent;
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
   .breadcrumb-container {
     float: left;
   }
   .right-menu {
     float: right;
     height: 100%;
     line-height: 50px;
     &:focus {
       outline: none;
     }
     .right-menu-item {
       display: inline-block;
       padding: 0 8px;
       height: 100%;
       font-size: 18px;
       color: #5a5e66;
       vertical-align: text-bottom;
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }
     .avatar-container {
       margin-right: 30px;
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;
         .user-avatar {
           cursor: pointer;
           width: 40px;
           height: 40px;
           border-radius: 10px;
         }
         .el-icon-caret-bottom {
           cursor: pointer;
           position: absolute;
           right: -20px;
           top: 25px;
           font-size: 12px;
         }
       }
     }
   }

src/layout/components/index.js

Diff comments Edit View file @1172ebb

		1	// export { default as Navbar } from '../../common/Header'
1	export { default as Navbar } from './Navbar'	2	export { default as Navbar } from './Navbar'
2	export { default as Sidebar } from './Sidebar'	3	export { default as Sidebar } from './Sidebar'
3	export { default as AppMain } from './AppMain'	4	export { default as AppMain } from './AppMain'
4		5

src/main.js

Diff comments Edit View file @1172ebb

 import Vue from 'vue'
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import locale from 'element-ui/lib/locale/lang/en' // lang i18n
+// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
 // import local_zh from 'element-ui/lib/locale/lang/zh-CN' // 在node_module里面
 import '@/styles/index.scss' // global css
 import App from './App'
 import store from './store'
 import router from './router'
 import '@/icons' // icon
 import '@/permission' // permission control
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
  * you can execute: mockXHR()
  *
  * Currently MockJs will be used in the production environment,
  * please remove it before going online ! ! !
  */
 if (process.env.NODE_ENV === 'production') {
   const { mockXHR } = require('../mock')
   mockXHR()
 }
+Vue.use(ElementUI, { size: 'small', zIndex: 3000 })
 // set ElementUI lang to EN
-Vue.use(ElementUI, { locale })
+// Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明
 // Vue.use(ElementUI, {local_zh})
 Vue.config.productionTip = false
 new Vue({
   el: '#app',
   router,
   store,
   render: h => h(App)
 })

src/router/index.js

Diff comments Edit View file @1172ebb

 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 = [
+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' }
+      meta: {
+        title: '中控台',
+        icon: 'dashboard'
+      }
     }]
   },
   {
     path: '/user',
     component: Layout,
     redirect: '/user/list',
     name: 'user',
-    meta: { title: '用户管理', icon: 'example' },
+    meta: {
-    children: [
+      title: '用户管理',
-      {
+      icon: 'example'
+    },
+    children: [{
         path: 'user',
         name: 'User',
         component: () => import('@/views/table/index'),
-        meta: { title: '用户列表', icon: 'table' }
+        meta: {
+          title: '用户列表',
+          icon: 'table'
+        }
       },
       {
         path: 'tree',
         name: 'Table',
         component: () => import('@/views/tree/index'),
-        meta: { title: 'Tree', icon: 'tree' }
+        meta: {
+          title: 'Tree',
+          icon: 'tree'
+        }
       }
     ]
   },
   {
     path: '/example',
     component: Layout,
     redirect: '/example/table',
     name: 'Example',
-    meta: { title: 'E1111xample', icon: 'example' },
+    meta: {
-    children: [
+      title: '商家管理',
-      {
+      icon: 'example'
+    },
+    children: [{
         path: 'table',
         name: 'Table',
         component: () => import('@/views/table/index'),
-        meta: { title: 'Table', icon: 'table' }
+        meta: {
+          title: 'Table',
+          icon: 'table'
+        }
       },
       {
         path: 'tree',
         name: 'Tree',
         component: () => import('@/views/tree/index'),
-        meta: { title: 'Tree', icon: 'tree' }
+        meta: {
+          title: 'Tree',
+          icon: 'tree'
+        }
       }
     ]
   },
   {
-    path: '/form',
+    path: '/example',
     component: Layout,
-    children: [
+    redirect: '/example/table',
+    name: 'Example',
+    meta: {
+      title: '产品管理',
+      icon: 'example'
+    },
+    children: [{
+        path: 'table',
+        name: 'Table',
+        component: () => import('@/views/table/index'),
+        meta: {
+          title: 'Table',
+          icon: 'table'
+        }
+      },
       {
-        path: 'index',
+        path: 'tree',
-        name: 'Form',
+        name: 'Tree',
-        component: () => import('@/views/form/index'),
+        component: () => import('@/views/tree/index'),
-        meta: { title: 'Form', icon: 'form' }
+        meta: {
+          title: 'Tree',
+          icon: 'tree'
+        }
       }
     ]
-  }
+  },
-]
-/**
- * asyncRoutes
- * the routes that need to be dynamically loaded based on user roles
- */
-export const asyncRoutes = [
   {
-    path: '/nested',
+    path: '/example',
     component: Layout,
-    redirect: '/nested/menu1',
+    redirect: '/example/table',
-    name: 'Nested',
+    name: 'Example',
     meta: {
-      title: 'Nested',
+      title: '元管理',
-      icon: 'nested'
+      icon: 'example'
     },
-    children: [
+    children: [{
-      {
+        path: 'table',
-        path: 'menu1',
+        name: 'Table',
-        component: () => import('@/views/nested/menu1/index'), // Parent router-view
+        component: () => import('@/views/table/index'),
-        name: 'Menu1',
+        meta: {
-        meta: { title: 'Menu1' },
+          title: 'Table',
-        children: [
+          icon: 'table'
-          {
+        }
-            path: 'menu1-1',
-            component: () => import('@/views/nested/menu1/menu1-1'),
-            name: 'Menu1-1',
-            meta: { title: 'Menu1-1' }
-          },
-          {
-            path: 'menu1-2',
-            component: () => import('@/views/nested/menu1/menu1-2'),
-            name: 'Menu1-2',
-            meta: { title: 'Menu1-2' },
-            children: [
-              {
-                path: 'menu1-2-1',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-                name: 'Menu1-2-1',
-                meta: { title: 'Menu1-2-1' }
-              },
-              {
-                path: 'menu1-2-2',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-                name: 'Menu1-2-2',
-                meta: { title: 'Menu1-2-2' }
-              }
-            ]
-          },
-          {
-            path: 'menu1-3',
-            component: () => import('@/views/nested/menu1/menu1-3'),
-            name: 'Menu1-3',
-            meta: { title: 'Menu1-3' }
-          }
-        ]
       },
       {
-        path: 'menu2',
+        path: 'tree',
-        component: () => import('@/views/nested/menu2/index'),
+        name: 'Tree',
-        meta: { title: 'menu2' }
+        component: () => import('@/views/tree/index'),
+        meta: {
+          title: 'Tree',
+          icon: 'tree'
+        }
       }
     ]
   },
   {
-    path: 'external-link',
+    path: '/example',
+    component: Layout,
+    redirect: '/example/table',
+    name: 'Example',
+    meta: {
+      title: '交易管理',
+      icon: 'example'
+    },
+    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',
     component: Layout,
-    children: [
+    redirect: '/example/table',
+    name: 'Example',
+    meta: {
+      title: '推荐系统',
+      icon: 'example'
+    },
+    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: '/system',
+    component: Layout,
+    redirect: '/system/table',
+    name: 'System',
+    meta: {
+      title: '系统设置',
+      icon: 'example'
+    },
+    children: [{
+        path: 'table',
+        name: 'Table',
+        component: () => import('@/views/table/index'),
+        meta: {
+          title: '行业设置',
+          icon: 'table'
+        }
+      },
+      {
+        path: 'tree',
+        name: 'Tree',
+        component: () => import('@/views/tree/index'),
+        meta: {
+          title: '语言设置',
+          icon: 'tree'
+        }
+      },
+      {
+        path: 'tree',
+        name: 'Tree',
+        component: () => import('@/views/tree/index'),
+        meta: {
+          title: '货币设置',
+          icon: 'tree'
+        }
+      },
+      {
+        path: 'tree',
+        name: 'Tree',
+        component: () => import('@/views/tree/index'),
+        meta: {
+          title: '站点类型设置',
+          icon: 'tree'
+        }
+      },
+      {
+        path: 'tree',
+        name: 'Tree',
+        component: () => import('@/views/tree/index'),
+        meta: {
+          title: '模版设置',
+          icon: 'tree'
+        }
+      },
       {
-        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
+        path: 'tree',
-        meta: { title: 'External Link', icon: 'link' }
+        name: 'Tree',
+        component: () => import('@/views/tree/index'),
+        meta: {
+          title: '权限设置',
+          icon: 'tree'
+        }
       }
     ]
   },
+  {
+    path: '/form',
+    component: Layout,

src/views/403.vue

Diff comments Edit View file @1172ebb

File was created	1	<template>
	2	<div class="error-page">
	3	<div class="error-code">
	4	4
	5	<span>0</span>3
	6	</div>
	7	<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
	8	<div class="error-handle">
	9	<router-link to="/">
	10	<el-button type="primary" size="large">返回首页</el-button>
	11	</router-link>
	12	<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
	13	</div>
	14	</div>
	15	</template>
	16
	17	<script>
	18	export default {
	19	methods: {
	20	goBack() {
	21	this.$router.go(-1);
	22	}
	23	}
	24	};
	25	</script>
	26
	27
	28	<style scoped>
	29	.error-page {
	30	display: flex;
	31	justify-content: center;
	32	align-items: center;
	33	flex-direction: column;
	34	width: 100%;
	35	height: 100%;
	36	background: #f3f3f3;
	37	box-sizing: border-box;
	38	}
	39	.error-code {
	40	line-height: 1;
	41	font-size: 250px;
	42	font-weight: bolder;
	43	color: #f02d2d;
	44	}
	45	.error-code span {
	46	color: #00a854;
	47	}
	48	.error-desc {
	49	font-size: 30px;
	50	color: #777;
	51	}
	52	.error-handle {
	53	margin-top: 30px;
	54	padding-bottom: 200px;
	55	}
	56	.error-btn {
	57	margin-left: 100px;
	58	}
	59	</style>

src/views/404.vue

Diff comments Edit View file @1172ebb

 <template>
   <div class="wscn-http404-container">
     <div class="wscn-http404">
       <div class="pic-404">
-        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404" />
-        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404" />
-        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404" />
-        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404" />
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">All rights reserved
+        <div class="bullshit__info">
-          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
+          All rights reserved
+          <a
+            style="color:#20a0ff"
+            href="https://wallstreetcn.com"
+            target="_blank"
+          >wallstreetcn</a>
         </div>
         <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
+        <div
-        <a href="" class="bullshit__return-home">Back to home</a>
+          class="bullshit__info"
+        >Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
+        <a href class="bullshit__return-home">Back to home</a>
       </div>
     </div>
   </div>
 </template>
 <script>
 export default {
-  name: 'Page404',
+  name: "Page404",
   computed: {
     message() {
-      return 'The webmaster said that you can not enter this page...'
+      return "The webmaster said that you can not enter this page...";
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
-.wscn-http404-container{
+.wscn-http404-container {
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   position: absolute;
   top: 40%;
   left: 50%;
 }
 .wscn-http404 {
   position: relative;
   width: 1200px;
   padding: 0 50px;
   overflow: hidden;
   .pic-404 {
     position: relative;
     float: left;
     width: 600px;
     overflow: hidden;
     &__parent {
       width: 100%;
     }
     &__child {
       position: absolute;
       &.left {
         width: 80px;
         top: 17px;
         left: 220px;
         opacity: 0;
         animation-name: cloudLeft;
         animation-duration: 2s;
         animation-timing-function: linear;
         animation-fill-mode: forwards;
         animation-delay: 1s;
       }
       &.mid {
         width: 46px;
         top: 10px;
         left: 420px;
         opacity: 0;
         animation-name: cloudMid;
         animation-duration: 2s;
         animation-timing-function: linear;
         animation-fill-mode: forwards;
         animation-delay: 1.2s;
       }
       &.right {
         width: 62px;
         top: 100px;
         left: 500px;
         opacity: 0;
         animation-name: cloudRight;
         animation-duration: 2s;
         animation-timing-function: linear;
         animation-fill-mode: forwards;
         animation-delay: 1s;
       }
       @keyframes cloudLeft {
         0% {
           top: 17px;
           left: 220px;
           opacity: 0;
         }
         20% {
           top: 33px;
           left: 188px;
           opacity: 1;
         }
         80% {
           top: 81px;
           left: 92px;
           opacity: 1;
         }
         100% {
           top: 97px;
           left: 60px;
           opacity: 0;
         }
       }
       @keyframes cloudMid {
         0% {
           top: 10px;
           left: 420px;
           opacity: 0;
         }
         20% {
           top: 40px;
           left: 360px;
           opacity: 1;
         }
         70% {
           top: 130px;
           left: 180px;
           opacity: 1;
         }
         100% {
           top: 160px;
           left: 120px;
           opacity: 0;
         }
       }
       @keyframes cloudRight {
         0% {
           top: 100px;
           left: 500px;
           opacity: 0;
         }
         20% {
           top: 120px;
           left: 460px;
           opacity: 1;
         }
         80% {
           top: 180px;
           left: 340px;
           opacity: 1;
         }
         100% {
           top: 200px;
           left: 300px;
           opacity: 0;
         }
       }
     }
   }
   .bullshit {
     position: relative;
     float: left;
     width: 300px;
     padding: 30px 0;
     overflow: hidden;
     &__oops {
       font-size: 32px;
       font-weight: bold;
       line-height: 40px;
       color: #1482f0;
       opacity: 0;
       margin-bottom: 20px;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-fill-mode: forwards;
     }
     &__headline {
       font-size: 20px;
       line-height: 24px;
       color: #222;
       font-weight: bold;
       opacity: 0;
       margin-bottom: 10px;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-delay: 0.1s;
       animation-fill-mode: forwards;
     }
     &__info {
       font-size: 13px;
       line-height: 21px;
       color: grey;
       opacity: 0;
       margin-bottom: 30px;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-delay: 0.2s;
       animation-fill-mode: forwards;
     }
     &__return-home {
       display: block;
       float: left;
       width: 110px;
       height: 36px;
       background: #1482f0;
       border-radius: 100px;
       text-align: center;
       color: #ffffff;
       opacity: 0;
       font-size: 14px;
       line-height: 36px;
       cursor: pointer;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-delay: 0.3s;
       animation-fill-mode: forwards;
     }
     @keyframes slideUp {
       0% {
         transform: translateY(60px);
         opacity: 0;
       }
       100% {
         transform: translateY(0);
         opacity: 1;
       }
     }
   }
 }
 </style>

src/views/502.vue

Diff comments Edit View file @1172ebb

File was created	1	<template>
	2	<div class="error-page">
	3	<div class="error-code">
	4	5
	5	<span>0</span>2
	6	</div>
	7	<div class="error-desc">啊哦~ 系统出了故障！</div>
	8	<div class="error-handle">
	9	<router-link to="/">
	10	<el-button type="primary" size="large">返回首页</el-button>
	11	</router-link>
	12	<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
	13	</div>
	14	</div>
	15	</template>
	16
	17	<script>
	18	export default {
	19	methods: {
	20	goBack() {
	21	this.$router.go(-1);
	22	}
	23	}
	24	};
	25	</script>
	26	<style scoped>
	27	.error-page {
	28	display: flex;
	29	justify-content: center;
	30	align-items: center;
	31	flex-direction: column;
	32	width: 100%;
	33	height: 100%;
	34	background: #f3f3f3;
	35	box-sizing: border-box;
	36	}
	37	.error-code {
	38	line-height: 1;
	39	font-size: 250px;
	40	font-weight: bolder;
	41	color: #f02d2d;
	42	}
	43	.error-code span {
	44	color: #00a854;
	45	}
	46	.error-desc {
	47	font-size: 30px;
	48	color: #777;
	49	}
	50	.error-handle {
	51	margin-top: 30px;
	52	padding-bottom: 200px;
	53	}
	54	.error-btn {
	55	margin-left: 100px;
	56	}
	57	</style>

src/views/dashboard/index.vue

Diff comments Edit View file @1172ebb

1	<template>	1	<template>
2	<div class="dashboard-container">	2	<div>
3	<div class="dashboard-text">用户名: {{ name }}</div>	3	<el-row :gutter="20">
4	<div class="dashboard-text">角色： <span v-for="role in roles" :key="role">{{ role }}</span></div>	4	<el-col :span="8">
		5	<el-card shadow="hover" class="mgb20" style="height:252px;">
		6	<div class="user-info">
		7	<img src="../../assets/img/img.jpg" class="user-avator" alt />
		8	<div class="user-info-cont">
		9	<div class="user-info-name">{{name}}</div>
		10	<div>{{role}}</div>
		11	</div>
		12	</div>
		13	<div class="user-info-list">
		14	上次登录时间：
		15	<span>2019-11-01</span>
		16	</div>
		17	<div class="user-info-list">
		18	上次登录地点：
		19	<span>东莞</span>
		20	</div>
		21	</el-card>
		22	<el-card shadow="hover" style="height:252px;">
		23	<div slot="header" class="clearfix">
		24	<span>语言详情</span>
		25	</div>Vue
		26	<el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
		27	<el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
		28	<el-progress :percentage="13.7"></el-progress>HTML
		29	<el-progress :percentage="5.9" color="#f56c6c"></el-progress>
		30	</el-card>
		31	</el-col>
		32	<el-col :span="16">
		33	<el-row :gutter="20" class="mgb20">
		34	<el-col :span="8">
		35	<el-card shadow="hover" :body-style="{padding: '0px'}">
		36	<div class="grid-content grid-con-1">
		37	<i class="el-icon-lx-people grid-con-icon"></i>
		38	<div class="grid-cont-right">
		39	<div class="grid-num">1234</div>
		40	<div>用户访问量</div>
		41	</div>
		42	</div>
		43	</el-card>
		44	</el-col>
		45	<el-col :span="8">
		46	<el-card shadow="hover" :body-style="{padding: '0px'}">
		47	<div class="grid-content grid-con-2">
		48	<i class="el-icon-lx-notice grid-con-icon"></i>
		49	<div class="grid-cont-right">
		50	<div class="grid-num">321</div>
		51	<div>系统消息</div>
		52	</div>
		53	</div>
		54	</el-card>
		55	</el-col>
		56	<el-col :span="8">
		57	<el-card shadow="hover" :body-style="{padding: '0px'}">
		58	<div class="grid-content grid-con-3">
		59	<i class="el-icon-lx-goods grid-con-icon"></i>
		60	<div class="grid-cont-right">
		61	<div class="grid-num">5000</div>
		62	<div>数量</div>
		63	</div>
		64	</div>
		65	</el-card>
		66	</el-col>
		67	</el-row>
		68	<el-card shadow="hover" style="height:403px;">
		69	<div slot="header" class="clearfix">
		70	<span>待办事项</span>
		71	<el-button style="float: right; padding: 3px 0" type="text" @click="addAction">添加</el-button>
		72	</div>
		73	<el-table :show-header="false" :data="todoList" style="width:100%;">
		74	<el-table-column width="40">
		75	<template slot-scope="scope">
		76	<el-checkbox v-model="scope.row.status"></el-checkbox>
		77	</template>
		78	</el-table-column>
		79	<el-table-column>
		80	<template slot-scope="scope">
		81	<div
		82	class="todo-item"
		83	:class="{'todo-item-del': scope.row.status}"
		84	>{{scope.row.title}}</div>
		85	</template>
		86	</el-table-column>
		87	<el-table-column width="60">
		88	<template>
		89	<i class="el-icon-edit" @click="modiAction"></i>
		90	<i class="el-icon-delete" @click="delAction"></i>
		91	</template>
		92	</el-table-column>
		93	</el-table>
		94	</el-card>
		95	</el-col>
		96	</el-row>
		97	<el-row :gutter="20">
		98	<el-col :span="12">
		99	<el-card shadow="hover">
		100	<schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
		101	</el-card>
		102	</el-col>
		103	<el-col :span="12">
		104	<el-card shadow="hover">
		105	<schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
		106	</el-card>
		107	</el-col>
		108	</el-row>
5	</div>	109	</div>
6	</template>	110	</template>
7		111
8	<script>	112	<script>
9	import { mapGetters } from 'vuex'	113	import { mapGetters } from "vuex";
		114	import Vue from "vue";
		115	import {
		116	Pagination,
		117	Dialog,
		118	Autocomplete,
		119	Dropdown,
		120	DropdownMenu,
		121	DropdownItem,
		122	Menu,
		123	Submenu,
		124	MenuItem,
		125	MenuItemGroup,
		126	Input,
		127	InputNumber,
		128	Radio,
		129	RadioGroup,
		130	RadioButton,
		131	Checkbox,
		132	CheckboxButton,
		133	CheckboxGroup,
		134	Switch,
		135	Select,
		136	Option,
		137	OptionGroup,
		138	Button,
		139	ButtonGroup,
		140	Table,
		141	TableColumn,
		142	DatePicker,
		143	TimeSelect,
		144	TimePicker,
		145	Popover,
		146	Tooltip,
		147	Breadcrumb,
		148	BreadcrumbItem,
		149	Form,
		150	FormItem,
		151	Tabs,
		152	TabPane,
		153	Tag,
		154	Tree,
		155	Alert,
		156	Slider,
		157	Icon,
		158	Row,
		159	Col,
		160	Upload,
		161	Progress,
		162	Spinner,
		163	Badge,
		164	Card,
		165	Rate,
		166	Steps,
		167	Step,
		168	Carousel,
		169	CarouselItem,
		170	Collapse,
		171	CollapseItem,
		172	Cascader,
		173	ColorPicker,
		174	Transfer,
		175	Container,
		176	Header,
		177	Aside,
		178	Main,
		179	Footer,
		180	Timeline,
		181	TimelineItem,
		182	Link,
		183	Divider,
		184	Image,
		185	Calendar,
		186	Backtop,
		187	PageHeader,
		188	CascaderPanel,
		189	Loading,
		190	MessageBox,
		191	Message,
		192	Notification
		193	} from "element-ui";
10	// import ElementUI from 'element-ui'	194	// import ElementUI from 'element-ui'
		195	Vue.prototype.$ELEMENT = { size: "small", zIndex: 3000 };
		196	Vue.use(Pagination);
		197	Vue.use(Dialog);
		198	Vue.use(Autocomplete);
		199	Vue.use(Dropdown);
		200	Vue.use(DropdownMenu);
		201	Vue.use(DropdownItem);
		202	Vue.use(Menu);
		203	Vue.use(Submenu);
		204	Vue.use(MenuItem);
		205	Vue.use(MenuItemGroup);
		206	Vue.use(Input);
		207	Vue.use(InputNumber);
		208	Vue.use(Radio);
		209	Vue.use(RadioGroup);
		210	Vue.use(RadioButton);
		211	Vue.use(Checkbox);
		212	Vue.use(CheckboxButton);
		213	Vue.use(CheckboxGroup);
		214	Vue.use(Switch);
		215	Vue.use(Select);
		216	Vue.use(Option);
		217	Vue.use(OptionGroup);
		218	Vue.use(Button);
		219	Vue.use(ButtonGroup);
		220	Vue.use(Table);
		221	Vue.use(TableColumn);
		222	Vue.use(DatePicker);
		223	Vue.use(TimeSelect);
		224	Vue.use(TimePicker);
		225	Vue.use(Popover);
		226	Vue.use(Tooltip);
		227	Vue.use(Breadcrumb);
		228	Vue.use(BreadcrumbItem);
		229	Vue.use(Form);
		230	Vue.use(FormItem);
		231	Vue.use(Tabs);
		232	Vue.use(TabPane);
		233	Vue.use(Tag);
		234	Vue.use(Tree);
		235	Vue.use(Alert);
		236	Vue.use(Slider);
		237	Vue.use(Icon);
		238	Vue.use(Row);
		239	Vue.use(Col);
		240	Vue.use(Upload);
		241	Vue.use(Progress);
		242	Vue.use(Spinner);
		243	Vue.use(Badge);
		244	Vue.use(Card);
		245	Vue.use(Rate);
		246	Vue.use(Steps);
		247	Vue.use(Step);
		248	Vue.use(Carousel);
		249	Vue.use(CarouselItem);
		250	Vue.use(Collapse);
		251	Vue.use(CollapseItem);
		252	Vue.use(Cascader);
		253	Vue.use(ColorPicker);
		254	Vue.use(Transfer);
		255	Vue.use(Container);
		256	Vue.use(Header);
		257	Vue.use(Aside);
		258	Vue.use(Main);
		259	Vue.use(Footer);
		260	Vue.use(Timeline);
		261	Vue.use(TimelineItem);
		262	Vue.use(Link);
		263	Vue.use(Divider);
		264	Vue.use(Image);
		265	Vue.use(Calendar);
		266	Vue.use(Backtop);
		267	Vue.use(PageHeader);
		268	Vue.use(CascaderPanel);
		269	Vue.use(Loading.directive);
		270
		271	import Schart from "vue-schart";
		272	import bus from "../../common/bus";
		273
11	// 按需引入引入 ECharts 主模块	274	// 按需引入引入 ECharts 主模块
12	// var echarts = require('echarts/lib/echarts')	275	// var echarts = require('echarts/lib/echarts')
13	// 引入柱状图	276	// 引入柱状图
14	// require('echarts/lib/chart/bar')	277	// require('echarts/lib/chart/bar')
15	// 引入提示框和标题组件	278	// 引入提示框和标题组件
16	// require('echarts/lib/component/tooltip')	279	// require('echarts/lib/component/tooltip')
17	// require('echarts/lib/component/title')	280	// require('echarts/lib/component/title')
18	// 全部引入	281	// 全部引入
19	// var echarts = require('echarts')	282	// var echarts = require('echarts')
20		283
21	export default {	284	export default {
22	name: 'Dashboard',	285	name: "Dashboard",
		286	data() {
		287	return {
		288	name: localStorage.getItem("ms_username"),
		289	todoList: [
		290	{
		291	title: "今天要修复100个bug",
		292	status: true
		293	},
		294	{
		295	title: "今天要写100行代码加几个bug吧",
		296	status: true
		297	}
		298	],
		299	data: [
		300	{
		301	name: "2018/09/04",
		302	value: 1083
		303	},
		304	{
		305	name: "2018/09/10",
		306	value: 1065
		307	}
		308	],
		309	options: {
		310	type: "bar",
		311	title: {
		312	text: "最近一周各品类销售图"
		313	},
		314	xRorate: 25,
		315	labels: ["周一", "周二", "周三", "周四", "周五"],
		316	datasets: [
		317	{
		318	label: "百货",
		319	data: [164, 178, 190, 135, 160]
		320	},
		321	{
		322	label: "食品",
		323	data: [144, 198, 150, 235, 120]
		324	}
		325	]
		326	},
		327	options2: {
		328	type: "line",
		329	title: {
		330	text: "最近几个月各品类销售趋势图"
		331	},
		332	labels: ["6月", "7月", "8月", "9月", "10月"],
		333	datasets: [
		334	{
		335	label: "百货",
		336	data: [164, 178, 150, 135, 160]
		337	},
		338	{
		339	label: "食品",
		340	data: [74, 118, 200, 235, 90]
		341	}
		342	]
		343	}
		344	};
		345	},
		346	components: {
		347	Schart
		348	},
23	computed: {	349	computed: {
24	...mapGetters([	350	// ...mapGetters(["name", "roles"])
25	'name',	351	role() {
26	'roles'	352	return this.name === "admin" ? "超级管理员" : "普通用户";
27	])	353	}
		354	},
		355	methods: {
		356	addAction(){
		357	this.$prompt("请输入内容", "提示", {
		358	confirmButtonText: "确定",
		359	cancelButtonText: "取消",
		360	inputErrorMessage: "内容不能为空"
		361	})
		362	.then(({ value }) => {
		363	this.$message({
		364	type: "success",
		365	message: "你的邮箱是: " + value
		366	});
		367	})
		368	.catch(() => {
		369	this.$message({
		370	type: "info",
		371	message: "取消输入"
		372	});
		373	});
		374	},
		375	modiAction() {
		376	// this.$prompt("请输入邮箱", "提示", {
		377	// confirmButtonText: "确定",
		378	// cancelButtonText: "取消",
		379	// inputPattern: /[\w!#$%&'+/=?^_`{\|}~-]+(?:\.[\w!#$%&'+/=?^_`{\|}~-]+)@(?:[\w](?:[\w-][\w])?\.)+[\w](?:[\w-]*[\w])?/,
		380	// inputErrorMessage: "邮箱格式不正确"
		381	// })
		382	this.$prompt("请输入内容", "提示", {
		383	confirmButtonText: "确定",
		384	cancelButtonText: "取消",
		385	inputErrorMessage: "内容不能为空"
		386	})
		387	.then(({ value }) => {
		388	this.$message({
		389	type: "success",
		390	message: "你的邮箱是: " + value
		391	});
		392	})
		393	.catch(() => {
		394	this.$message({
		395	type: "info",
		396	message: "取消输入"
		397	});
		398	});
		399	},
		400	delAction() {
		401	this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
		402	confirmButtonText: "确定",
		403	cancelButtonText: "取消",
		404	type: "warning"
		405	})
		406	.then(() => {
		407	this.$message({
		408	type: "success",
		409	message: "删除成功!"
		410	});
		411	})
		412	.catch(() => {
		413	this.$message({
		414	type: "info",
		415	message: "已取消删除"
		416	});
		417	});
		418	},
		419	changeDate() {
		420	const now = new Date().getTime();
		421	this.data.forEach((item, index) => {
		422	const date = new Date(now - (6 - index) * 86400000);
		423	item.name = `${date.getFullYear()}/${date.getMonth() +
		424	1}/${date.getDate()}`;
		425	});
		426	}
28	}	427	}
29	}	428	};
30	</script>	429	</script>
31		430
32	<style lang="scss" scoped>	431	<style scoped>
33	.dashboard {	432	.el-row {
34	&-container {	433	margin-bottom: 20px;
35	margin: 30px;	434	}
36	}	435	.grid-content {
37	&-text {	436	display: flex;
38	font-size: 30px;	437	align-items: center;
39	line-height: 46px;	438	height: 100px;
40	}	439	}
		440	.grid-cont-right {
		441	flex: 1;
		442	text-align: center;
		443	font-size: 14px;
		444	color: #999;
		445	}
		446	.grid-num {
		447	font-size: 30px;
		448	font-weight: bold;
		449	}
		450	.grid-con-icon {
		451	font-size: 50px;
		452	width: 100px;
		453	height: 100px;
		454	text-align: center;
		455	line-height: 100px;
		456	color: #fff;
		457	}
		458	.grid-con-1 .grid-con-icon {
		459	background: rgb(45, 140, 240);
		460	}
		461	.grid-con-1 .grid-num {
		462	color: rgb(45, 140, 240);
		463	}
		464	.grid-con-2 .grid-con-icon {
		465	background: rgb(100, 213, 114);
		466	}
		467	.grid-con-2 .grid-num {
		468	color: rgb(45, 140, 240);
		469	}
		470	.grid-con-3 .grid-con-icon {
		471	background: rgb(242, 94, 67);
		472	}
		473	.grid-con-3 .grid-num {
		474	color: rgb(242, 94, 67);
		475	}
		476	.user-info {
		477	display: flex;
		478	align-items: center;
		479	padding-bottom: 20px;
		480	border-bottom: 2px solid #ccc;
		481	margin-bottom: 20px;
		482	}
		483	.user-avator {
		484	width: 120px;
		485	height: 120px;
		486	border-radius: 50%;
		487	}
		488	.user-info-cont {
		489	padding-left: 50px;
		490	flex: 1;
		491	font-size: 14px;
		492	color: #999;
		493	}
		494	.user-info-cont div:first-child {
		495	font-size: 30px;
		496	color: #222;
		497	}
		498	.user-info-list {
		499	font-size: 14px;
		500	color: #999;
		501	line-height: 25px;
		502	}
		503	.user-info-list span {
		504	margin-left: 70px;
		505	}
		506	.mgb20 {
		507	margin-bottom: 20px;
		508	}
		509	.todo-item {
		510	font-size: 14px;
		511	}
		512	.todo-item-del {
		513	text-decoration: line-through;
		514	color: #999;
		515	}
		516	.schart {
		517	width: 100%;
		518	height: 300px;
41	}	519	}
42	</style>	520	</style>
43		521

src/views/form/index.vue

Diff comments Edit View file @1172ebb

 <template>
   <div class="app-container">
     <el-form ref="form" :model="form" label-width="120px">
       <el-form-item label="Activity name">
         <el-input v-model="form.name" />
       </el-form-item>
       <el-form-item label="Activity zone">
         <el-select v-model="form.region" placeholder="please select your zone">
           <el-option label="Zone one" value="shanghai" />
           <el-option label="Zone two" value="beijing" />
         </el-select>
       </el-form-item>
       <el-form-item label="Activity time">
         <el-col :span="11">
-          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
+          <el-date-picker
+            v-model="form.date1"
+            type="date"
+            placeholder="Pick a date"
+            style="width: 100%;"
+          />
         </el-col>
         <el-col :span="2" class="line">-</el-col>
         <el-col :span="11">
-          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
+          <el-time-picker
+            v-model="form.date2"
+            type="fixed-time"
+            placeholder="Pick a time"
+            style="width: 100%;"
+          />
         </el-col>
       </el-form-item>
       <el-form-item label="Instant delivery">
         <el-switch v-model="form.delivery" />
       </el-form-item>
       <el-form-item label="Activity type">
         <el-checkbox-group v-model="form.type">
           <el-checkbox label="Online activities" name="type" />
           <el-checkbox label="Promotion activities" name="type" />
           <el-checkbox label="Offline activities" name="type" />
           <el-checkbox label="Simple brand exposure" name="type" />
         </el-checkbox-group>
       </el-form-item>
       <el-form-item label="Resources">
         <el-radio-group v-model="form.resource">
           <el-radio label="Sponsor" />
           <el-radio label="Venue" />
         </el-radio-group>
       </el-form-item>
       <el-form-item label="Activity form">
         <el-input v-model="form.desc" type="textarea" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Create</el-button>
         <el-button @click="onCancel">Cancel</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
       form: {
-        name: '',
+        name: "",
-        region: '',
+        region: "",
-        date1: '',
+        date1: "",
-        date2: '',
+        date2: "",
         delivery: false,
         type: [],
-        resource: '',
+        resource: "",
-        desc: ''
+        desc: ""
       }
-    }
+    };
   },
   methods: {
     onSubmit() {
-      this.$message('submit!')
+      this.$message("submit!");
     },
     onCancel() {
       this.$message({
-        message: 'cancel!',
+        message: "cancel!",
-        type: 'warning'
+        type: "warning"
-      })
+      });
     }
   }
-}
+};
 </script>
 <style scoped>
-.line{
+.line {
   text-align: center;
 }
 </style>

src/views/nested/menu1/menu1-1/index.vue

Diff comments Edit View file @1172ebb

 <template>
   <div style="padding:30px;">
     <el-alert :closable="false" title="menu 1-1" type="success">
       <router-view />
     </el-alert>
   </div>
 </template>
+<template functional>
+  <div style="padding:30px;">
+    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
+  </div>
+</template>

src/views/table/index.vue

Diff comments Edit View file @1172ebb

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

GITLAB

吉鹏 / gulu-admin

Merge Request #3

Master

Merged by Adam 2020-05-06 18:40:47 UTC

Merge Request #3

How to merge

Master

Merged by Adam 2020-05-06 18:40:47 UTC $('.time_ago').timeago().tooltip()

Merged by Adam 2020-05-06 18:40:47 UTC