吉鹏 / gulu-admin

Merge Request #9

0 up

0 down

← To merge requests From adam:master into jp:master

Merged

Created by

Adam 2020-05-11 15:37:42 UTC

Master

Commits (8)

0bd81688e auto commit the code by alias command Browse Code »

Adam
2020-05-11 23:34:15 +0800
04e55fcfe auto commit the code by alias command Browse Code »

Adam
2020-05-11 23:34:04 +0800
a1b48a444 auto commit the code by alias command Browse Code »

Adam
2020-05-11 23:04:55 +0800
b58b17e1e auto commit the code by alias command Browse Code »

Adam
2020-05-11 22:54:18 +0800
5cb375940 auto commit the code by alias command Browse Code »

Adam
2020-05-10 03:06:44 +0800
f3ec4dd95 auto commit the code by alias command Browse Code »

Adam
2020-05-10 03:06:24 +0800
96898eae4 auto commit the code by alias command Browse Code »

Adam
2020-05-10 02:58:37 +0800
a6e433928 auto commit the code by alias command Browse Code »

Adam
2020-05-10 02:33:42 +0800

1 participants

Showing 48 changed files Show diff stats

.env.development

Diff comments Edit View file @0bd8168

1	# just a flag	1	# just a flag
2	ENV = 'development'	2	ENV = 'development'
3		3
4	# base api	4	# base api
5	VUE_APP_BASE_API = '/dev-api'	5	VUE_APP_BASE_API = '/dev-api'
		6	# VUE_APP_BASE_API = 'http://localhost:8087/'
6	# VUE_APP_BASE_API = 'http://localhost:8087/'	7	# VUE_APP_BASE_API = 'http://localhost/sys-glass/api/'
7	# VUE_APP_BASE_API = 'http://localhost/sys-glass/api/'	8	# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
8	# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,	9	# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
9	# to control whether the babel-plugin-dynamic-import-node plugin is enabled.	10	# It only does one thing by converting all import() to require().
10	# It only does one thing by converting all import() to require().	11	# This configuration can significantly increase the speed of hot updates,
11	# This configuration can significantly increase the speed of hot updates,	12	# when you have a large number of pages.
12	# when you have a large number of pages.	13	# Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
13	# Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js	14
14		15	VUE_CLI_BABEL_TRANSPILE_MODULES = true
15	VUE_CLI_BABEL_TRANSPILE_MODULES = true	16

.eslintrc.js

Diff comments Edit View file @0bd8168

1	module.exports = {	1	module.exports = {
2	root: true,	2	root: true,
3	parserOptions: {	3	parserOptions: {
4	parser: 'babel-eslint',	4	parser: 'babel-eslint',
5	sourceType: 'module'	5	sourceType: 'module'
6	},	6	},
7	env: {	7	env: {
8	browser: true,	8	browser: true,
9	node: true,	9	node: true,
10	es6: true,	10	es6: true,
11	},	11	},
12	extends: ['plugin:vue/recommended', 'eslint:recommended'],	12	extends: ['plugin:vue/recommended', 'eslint:recommended'],
13		13
14	// add your custom rules here	14	// add your custom rules here
15	//it is base on https://github.com/vuejs/eslint-config-vue	15	//it is base on https://github.com/vuejs/eslint-config-vue
16	rules: {	16	rules: {
17	"vue/max-attributes-per-line": [2, {	17	"vue/max-attributes-per-line": [2, {
18	"singleline": 10,	18	"singleline": 10,
19	"multiline": {	19	"multiline": {
20	"max": 1,	20	"max": 1,
21	"allowFirstLine": false	21	"allowFirstLine": false
22	}	22	}
23	}],	23	}],
24	"vue/singleline-html-element-content-newline": "off",	24	"vue/singleline-html-element-content-newline": "off",
25	"vue/multiline-html-element-content-newline": "off",	25	"vue/multiline-html-element-content-newline": "off",
26	"vue/name-property-casing": ["error", "PascalCase"],	26	"vue/name-property-casing": ["error", "PascalCase"],
27	"vue/no-v-html": "off",	27	"vue/no-v-html": "off",
28	'accessor-pairs': 2,	28	'accessor-pairs': 2,
29	'arrow-spacing': [2, {	29	'arrow-spacing': [2, {
30	'before': true,	30	'before': true,
31	'after': true	31	'after': true
32	}],	32	}],
33	'block-spacing': [2, 'always'],	33	'block-spacing': [2, 'always'],
34	'brace-style': [2, '1tbs', {	34	'brace-style': [2, '1tbs', {
35	'allowSingleLine': true	35	'allowSingleLine': true
36	}],	36	}],
37	'camelcase': [0, {	37	'camelcase': [0, {
38	'properties': 'always'	38	'properties': 'always'
39	}],	39	}],
40	'comma-dangle': [2, 'never'],	40	'comma-dangle': [2, 'never'],
41	'comma-spacing': [2, {	41	'comma-spacing': [2, {
42	'before': false,	42	'before': false,
43	'after': true	43	'after': true
44	}],	44	}],
45	'comma-style': [2, 'last'],	45	'comma-style': [2, 'last'],
46	'constructor-super': 2,	46	'constructor-super': 2,
47	'curly': [2, 'multi-line'],	47	'curly': [2, 'multi-line'],
48	'dot-location': [2, 'property'],	48	'dot-location': [2, 'property'],
49	'eol-last': 2,	49	'eol-last': 2,
50	// 'eqeqeq': ["error", "always", {"null": "ignore"}],	50	// 'eqeqeq': ["error", "always", {"null": "ignore"}],
		51	'eqeqeq': ["off"],
51	'eqeqeq': ["off"],	52	'generator-star-spacing': [2, {
52	'generator-star-spacing': [2, {	53	'before': true,
53	'before': true,	54	'after': true
54	'after': true	55	}],
55	}],	56	'handle-callback-err': [2, '^(err\|error)$'],
56	'handle-callback-err': [2, '^(err\|error)$'],	57	'indent': [2, 2, {
57	'indent': [2, 2, {	58	'SwitchCase': 1
58	'SwitchCase': 1	59	}],
59	}],	60	'jsx-quotes': [2, 'prefer-single'],
60	'jsx-quotes': [2, 'prefer-single'],	61	'key-spacing': [2, {
61	'key-spacing': [2, {	62	'beforeColon': false,
62	'beforeColon': false,	63	'afterColon': true
63	'afterColon': true	64	}],
64	}],	65	'keyword-spacing': [2, {
65	'keyword-spacing': [2, {	66	'before': true,
66	'before': true,	67	'after': true
67	'after': true	68	}],
68	}],	69	'new-cap': [2, {
69	'new-cap': [2, {	70	'newIsCap': true,
70	'newIsCap': true,	71	'capIsNew': false
71	'capIsNew': false	72	}],
72	}],	73	'new-parens': 2,
73	'new-parens': 2,	74	'no-array-constructor': 2,
74	'no-array-constructor': 2,	75	'no-caller': 2,
75	'no-caller': 2,	76	'no-console': 'off',
76	'no-console': 'off',	77	'no-class-assign': 2,
77	'no-class-assign': 2,	78	'no-cond-assign': 2,
78	'no-cond-assign': 2,	79	'no-const-assign': 2,
79	'no-const-assign': 2,	80	'no-control-regex': 0,
80	'no-control-regex': 0,	81	'no-delete-var': 2,
81	'no-delete-var': 2,	82	'no-dupe-args': 2,
82	'no-dupe-args': 2,	83	'no-dupe-class-members': 2,
83	'no-dupe-class-members': 2,	84	'no-dupe-keys': 2,
84	'no-dupe-keys': 2,	85	'no-duplicate-case': 2,
85	'no-duplicate-case': 2,	86	'no-empty-character-class': 2,
86	'no-empty-character-class': 2,	87	'no-empty-pattern': 2,
87	'no-empty-pattern': 2,	88	'no-eval': 2,
88	'no-eval': 2,	89	'no-ex-assign': 2,
89	'no-ex-assign': 2,	90	'no-extend-native': 2,
90	'no-extend-native': 2,	91	'no-extra-bind': 2,
91	'no-extra-bind': 2,	92	'no-extra-boolean-cast': 2,
92	'no-extra-boolean-cast': 2,	93	'no-extra-parens': [2, 'functions'],
93	'no-extra-parens': [2, 'functions'],	94	'no-fallthrough': 2,
94	'no-fallthrough': 2,	95	'no-floating-decimal': 2,
95	'no-floating-decimal': 2,	96	'no-func-assign': 2,
96	'no-func-assign': 2,	97	'no-implied-eval': 2,
97	'no-implied-eval': 2,	98	'no-inner-declarations': [2, 'functions'],
98	'no-inner-declarations': [2, 'functions'],	99	'no-invalid-regexp': 2,
99	'no-invalid-regexp': 2,	100	'no-irregular-whitespace': 2,
100	'no-irregular-whitespace': 2,	101	'no-iterator': 2,
101	'no-iterator': 2,	102	'no-label-var': 2,
102	'no-label-var': 2,	103	'no-labels': [2, {
103	'no-labels': [2, {	104	'allowLoop': false,
104	'allowLoop': false,	105	'allowSwitch': false
105	'allowSwitch': false	106	}],
106	}],	107	'no-lone-blocks': 2,
107	'no-lone-blocks': 2,	108	'no-mixed-spaces-and-tabs': 2,
108	'no-mixed-spaces-and-tabs': 2,	109	'no-multi-spaces': 2,
109	'no-multi-spaces': 2,	110	'no-multi-str': 2,
110	'no-multi-str': 2,	111	'no-multiple-empty-lines': [2, {
111	'no-multiple-empty-lines': [2, {	112	'max': 1
112	'max': 1	113	}],
113	}],	114	'no-native-reassign': 2,
114	'no-native-reassign': 2,	115	'no-negated-in-lhs': 2,
115	'no-negated-in-lhs': 2,	116	'no-new-object': 2,
116	'no-new-object': 2,	117	'no-new-require': 2,
117	'no-new-require': 2,	118	'no-new-symbol': 2,
118	'no-new-symbol': 2,	119	'no-new-wrappers': 2,
119	'no-new-wrappers': 2,	120	'no-obj-calls': 2,
120	'no-obj-calls': 2,	121	'no-octal': 2,
121	'no-octal': 2,	122	'no-octal-escape': 2,
122	'no-octal-escape': 2,	123	'no-path-concat': 2,
123	'no-path-concat': 2,	124	'no-proto': 2,
124	'no-proto': 2,	125	'no-redeclare': 2,
125	'no-redeclare': 2,	126	'no-regex-spaces': 2,
126	'no-regex-spaces': 2,	127	'no-return-assign': [2, 'except-parens'],
127	'no-return-assign': [2, 'except-parens'],	128	'no-self-assign': 2,
128	'no-self-assign': 2,	129	'no-self-compare': 2,
129	'no-self-compare': 2,	130	'no-sequences': 2,
130	'no-sequences': 2,	131	'no-shadow-restricted-names': 2,
131	'no-shadow-restricted-names': 2,	132	'no-spaced-func': 2,
132	'no-spaced-func': 2,	133	'no-sparse-arrays': 2,
133	'no-sparse-arrays': 2,	134	'no-this-before-super': 2,
134	'no-this-before-super': 2,	135	'no-throw-literal': 2,
135	'no-throw-literal': 2,	136	'no-trailing-spaces': 2,
136	'no-trailing-spaces': 2,	137	'no-undef': 2,
137	'no-undef': 2,	138	'no-undef-init': 2,
138	'no-undef-init': 2,	139	'no-unexpected-multiline': 2,
139	'no-unexpected-multiline': 2,	140	'no-unmodified-loop-condition': 2,
140	'no-unmodified-loop-condition': 2,	141	'no-unneeded-ternary': [2, {
141	'no-unneeded-ternary': [2, {	142	'defaultAssignment': false
142	'defaultAssignment': false	143	}],
143	}],	144	'no-unreachable': 2,
144	'no-unreachable': 2,	145	'no-unsafe-finally': 2,
145	'no-unsafe-finally': 2,	146	'no-unused-vars': [2, {
146	'no-unused-vars': [2, {	147	'vars': 'all',
147	'vars': 'all',	148	'args': 'none'
148	'args': 'none'	149	}],
149	}],	150	'no-useless-call': 2,
150	'no-useless-call': 2,	151	'no-useless-computed-key': 2,
151	'no-useless-computed-key': 2,	152	'no-useless-constructor': 2,
152	'no-useless-constructor': 2,	153	'no-useless-escape': 0,
153	'no-useless-escape': 0,	154	'no-whitespace-before-property': 2,
154	'no-whitespace-before-property': 2,	155	'no-with': 2,
155	'no-with': 2,	156	'one-var': [2, {
156	'one-var': [2, {	157	'initialized': 'never'
157	'initialized': 'never'	158	}],
158	}],	159	'operator-linebreak': [2, 'after', {
159	'operator-linebreak': [2, 'after', {	160	'overrides': {
160	'overrides': {	161	'?': 'before',
161	'?': 'before',	162	':': 'before'
162	':': 'before'	163	}
163	}	164	}],
164	}],	165	'padded-blocks': [2, 'never'],
165	'padded-blocks': [2, 'never'],	166	'quotes': [2, 'single', {
166	'quotes': [2, 'single', {	167	'avoidEscape': true,
167	'avoidEscape': true,	168	'allowTemplateLiterals': true
168	'allowTemplateLiterals': true	169	}],
169	}],	170	'semi': [2, 'never'],
170	'semi': [2, 'never'],	171	// 'semi': 0,
171	// 'semi': 0,	172	'semi-spacing': [2, {
172	'semi-spacing': [2, {	173	'before': false,
173	'before': false,	174	'after': true
174	'after': true	175	}],
175	}],	176	'space-before-blocks': [2, 'always'],
176	'space-before-blocks': [2, 'always'],	177	'space-before-function-paren': [2, 'never'],
177	'space-before-function-paren': [2, 'never'],	178	'space-in-parens': [2, 'never'],
178	'space-in-parens': [2, 'never'],	179	'space-infix-ops': 2,
179	'space-infix-ops': 2,	180	'space-unary-ops': [2, {
180	'space-unary-ops': [2, {	181	'words': true,
181	'words': true,	182	'nonwords': false
182	'nonwords': false	183	}],
183	}],	184	'spaced-comment': [2, 'always', {
184	'spaced-comment': [2, 'always', {	185	'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
185	'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']	186	}],
186	}],	187	'template-curly-spacing': [2, 'never'],
187	'template-curly-spacing': [2, 'never'],	188	'use-isnan': 2,
188	'use-isnan': 2,	189	'valid-typeof': 2,
189	'valid-typeof': 2,	190	'wrap-iife': [2, 'any'],
190	'wrap-iife': [2, 'any'],	191	'yield-star-spacing': [2, 'both'],
191	'yield-star-spacing': [2, 'both'],	192	'yoda': [2, 'never'],
192	'yoda': [2, 'never'],	193	'prefer-const': 2,
193	'prefer-const': 2,	194	'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
194	'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,	195	'object-curly-spacing': [2, 'always', {
195	'object-curly-spacing': [2, 'always', {	196	objectsInObjects: false
196	objectsInObjects: false	197	}],
197	}],	198	'array-bracket-spacing': [2, 'never']
198	'array-bracket-spacing': [2, 'never']	199	}
199	}	200	}
200	}	201

mock/article.js

Diff comments Edit View file @0bd8168

1	import Mock from 'mockjs'	1	import Mock from 'mockjs'
		2	// import logoPath from "~@/assets/img/yp_logo.jpeg"
2	// import logoPath from "~@/assets/img/yp_logo.jpeg"	3
3		4	const List = []
4	const List = []	5	const count = 100
5	const count = 100	6
6		7	const baseContent = '<p>I am testing data, I am testing data.</p><p></p>'
7	const baseContent = '<p>I am testing data, I am testing data.</p><p></p>'	8	// const image_uri = logoPath
		9	const image_uri = 'https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'
8	// const image_uri = logoPath	10
9	const image_uri = 'https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'	11	for (let i = 0; i < count; i++) {
10		12	List.push(Mock.mock({
11	for (let i = 0; i < count; i++) {	13	id: '@increment',
12	List.push(Mock.mock({	14	timestamp: +Mock.Random.date('T'),
13	id: '@increment',	15	author: '@first',
14	timestamp: +Mock.Random.date('T'),	16	reviewer: '@first',
15	author: '@first',	17	title: '@title(5, 10)',
16	reviewer: '@first',	18	content_short: 'mock data',
17	title: '@title(5, 10)',	19	content: baseContent,
18	content_short: 'mock data',	20	forecast: '@float(0, 100, 2, 2)',
19	content: baseContent,	21	importance: '@integer(1, 3)',
20	forecast: '@float(0, 100, 2, 2)',	22	'type\|1': ['CN', 'US', 'JP', 'EU'],
21	importance: '@integer(1, 3)',	23	'status\|1': ['published', 'draft'],
22	'type\|1': ['CN', 'US', 'JP', 'EU'],	24	display_time: '@datetime',
23	'status\|1': ['published', 'draft'],	25	comment_disabled: true,
24	display_time: '@datetime',	26	pageviews: '@integer(300, 5000)',
25	comment_disabled: true,	27	image_uri,
26	pageviews: '@integer(300, 5000)',	28	platforms: ['a-platform']
27	image_uri,	29	}))
28	platforms: ['a-platform']	30	}
29	}))	31
30	}	32	export default [{
31		33	url: '/yp/article/list',
32	export default [{	34	type: 'get',
33	url: '/yp/article/list',	35	response: config => {
34	type: 'get',	36	const {
35	response: config => {	37	importance,
36	const {	38	type,
37	importance,	39	title,
38	type,	40	page = 1,
39	title,	41	limit = 20,
40	page = 1,	42	sort
41	limit = 20,	43	} = config.query
42	sort	44
43	} = config.query	45	let mockList = List.filter(item => {
44		46	if (importance && item.importance !== +importance) return false
45	let mockList = List.filter(item => {	47	if (type && item.type !== type) return false
46	if (importance && item.importance !== +importance) return false	48	if (title && item.title.indexOf(title) < 0) return false
47	if (type && item.type !== type) return false	49	return true
48	if (title && item.title.indexOf(title) < 0) return false	50	})
49	return true	51
50	})	52	if (sort === '-id') {
51		53	mockList = mockList.reverse()
52	if (sort === '-id') {	54	}
53	mockList = mockList.reverse()	55
54	}	56	const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
55		57
56	const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))	58	return {
57		59	code: 20000,
58	return {	60	data: {
59	code: 20000,	61	total: mockList.length,
60	data: {	62	items: pageList
61	total: mockList.length,	63	}
62	items: pageList	64	}
63	}	65	}
64	}	66	},
65	}	67
66	},	68	{
67		69	url: '/yp/article/detail',
68	{	70	type: 'get',
69	url: '/yp/article/detail',	71	response: config => {
70	type: 'get',	72	const {
71	response: config => {	73	id
72	const {	74	} = config.query
73	id	75	for (const article of List) {
74	} = config.query	76	if (article.id === +id) {
75	for (const article of List) {	77	return {
76	if (article.id === +id) {	78	code: 20000,
77	return {	79	data: article
78	code: 20000,	80	}
79	data: article	81	}
80	}	82	}
81	}	83	}
82	}	84	},
83	}	85
84	},	86	{
85		87	url: '/yp/article/pv',
86	{	88	type: 'get',
87	url: '/yp/article/pv',	89	response: _ => {
88	type: 'get',	90	return {
89	response: _ => {	91	code: 20000,
90	return {	92	data: {
91	code: 20000,	93	pvData: [{
92	data: {	94	key: 'PC',
93	pvData: [{	95	pv: 1024
94	key: 'PC',	96	},
95	pv: 1024	97	{
96	},	98	key: 'mobile',
97	{	99	pv: 1024
98	key: 'mobile',	100	},
99	pv: 1024	101	{
100	},	102	key: 'ios',
101	{	103	pv: 1024
102	key: 'ios',	104	},
103	pv: 1024	105	{
104	},	106	key: 'android',
105	{	107	pv: 1024
106	key: 'android',	108	}
107	pv: 1024	109	]
108	}	110	}
109	]	111	}
110	}	112	}
111	}	113	},
112	}	114
113	},	115	{
114		116	url: '/yp/article/create',
115	{	117	type: 'post',
116	url: '/yp/article/create',	118	response: _ => {
117	type: 'post',	119	return {
118	response: _ => {	120	code: 20000,
119	return {	121	data: 'success'
120	code: 20000,	122	}
121	data: 'success'	123	}
122	}	124	},
123	}	125
124	},	126	{
125		127	url: '/yp/article/update',
126	{	128	type: 'post',
127	url: '/yp/article/update',	129	response: _ => {
128	type: 'post',	130	return {
129	response: _ => {	131	code: 20000,
130	return {	132	data: 'success'
131	code: 20000,	133	}
132	data: 'success'	134	}
133	}	135	}
134	}	136	]
135	}	137

mock/big-tree.json

Diff comments Edit View file @0bd8168

File was created

mock/prod.js

Diff comments Edit View file @0bd8168

File was created	1	import Mock from 'mockjs'
	2	// import logoPath from "~@/assets/img/yp_logo.jpeg"
	3
	4	const List = []
	5	const count = 20
	6
	7	const baseContent = '<p>I am testing data, I am testing data.</p><p></p>'
	8	// const image_uri = logoPath
	9	const image_uri = 'https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'
	10
	11	for (let i = 0; i < count; i++) {
	12	List.push(Mock.mock({
	13	pid: '@increment',
	14	pname: '@title(5,10)',
	15	timestamp: +Mock.Random.date('T'),
	16	shoper: '@first', //所属工厂
	17	salescount: '@first', //购买次数
	18	importance: '@integer(1, 3)', //排序权重
	19	prod_info_weight: '@integer(1, 3)', //重量
	20	prod_info_leg_long: '@integer(1, 3)', //腿长
	21	prod_info_glass_width: '@integer(1, 3)', //镜宽
	22	prod_info_glass_height: '@integer(1, 3)', //镜高
	23	prod_info_frame_width: '@integer(1, 3)', //框宽
	24	prod_info_frame_height: '@integer(1, 3)', //框高
	25	prod_info_norse_width: '@integer(1, 3)', //鼻宽
	26	prod_info_window_pic: [], //鼻宽
	27	image_uri: image_uri
	28	}))
	29	}
	30
	31	export default [{
	32	url: '/yp/prod/list',
	33	type: 'post',
	34	response: config => {
	35	const {
	36	importance,
	37	type,
	38	title,
	39	page = 1,
	40	limit = 20,
	41	sort
	42	} = config.query
	43
	44	let mockList = List.filter(item => {
	45	if (importance && item.importance !== +importance) return false
	46	if (type && item.type !== type) return false
	47	if (title && item.title.indexOf(title) < 0) return false
	48	return true
	49	})
	50
	51	if (sort === '-id') {
	52	mockList = mockList.reverse()
	53	}
	54
	55	const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
	56
	57	return {
	58	code: 20000,
	59	data: {
	60	total: mockList.length,
	61	items: pageList
	62	}
	63	}
	64	}
	65	},
	66
	67	{
	68	url: '/yp/prod/detail',
	69	type: 'get',
	70	response: config => {
	71	const {
	72	id
	73	} = config.query
	74	for (const prod of List) {
	75	if (prod.id === +id) {
	76	return {
	77	code: 20000,
	78	data: prod
	79	}
	80	}
	81	}
	82	}
	83	},
	84
	85	{
	86	url: '/yp/prod/pv',
	87	type: 'get',
	88	response: _ => {
	89	return {
	90	code: 20000,
	91	data: {
	92	pvData: [{
	93	key: 'PC',
	94	pv: 1024
	95	},
	96	{
	97	key: 'mobile',
	98	pv: 1024
	99	},
	100	{
	101	key: 'ios',
	102	pv: 1024
	103	},
	104	{
	105	key: 'android',
	106	pv: 1024
	107	}
	108	]
	109	}
	110	}
	111	}
	112	},
	113
	114	{
	115	url: '/yp/prod/create',
	116	type: 'post',
	117	response: _ => {
	118	return {
	119	code: 20000,
	120	data: 'success'
	121	}
	122	}
	123	},
	124
	125	{
	126	url: '/yp/prod/update',
	127	type: 'post',
	128	response: _ => {
	129	return {
	130	code: 20000,
	131	data: 'success'
	132	}
	133	}
	134	}
	135	]
	136

mock/role/routes.js

Diff comments Edit View file @0bd8168

1	// Just a mock data	1	// Just a mock data
2		2
3	export const constantRoutes = [{	3	export const constantRoutes = [{
4	path: '/redirect',
5	component: 'layout/Layout',	4	path: '/redirect',
6	hidden: true,	5	component: 'layout/Layout',
7	children: [{	6	hidden: true,
8	path: '/redirect/:path*',	7	children: [{
9	component: 'views/redirect/index'	8	path: '/redirect/:path*',
10	}]	9	component: 'views/redirect/index'
11	},	10	}]
12	{
13	path: '/login',
14	component: 'views/login/index',	11	},
15	hidden: true	12	{
16	},	13	path: '/login',
17	{	14	component: 'views/login/index',
18	path: '/auth-redirect',	15	hidden: true
19	component: 'views/login/auth-redirect',	16	},
20	hidden: true	17	{
21	},	18	path: '/auth-redirect',
22	{	19	component: 'views/login/auth-redirect',
23	path: '/401',	20	hidden: true
24	component: 'views/error-page/401',	21	},
25	hidden: true	22	{
26	},	23	path: '/401',
27	{	24	component: 'views/error-page/401',
28	path: '/403',	25	hidden: true
29	component: 'views/error-page/403',	26	},
30	hidden: true	27	{
31	},	28	path: '/403',
32	{	29	component: 'views/error-page/403',
33	path: '/404',	30	hidden: true
34	component: 'views/error-page/404',	31	},
35	hidden: true	32	{
36	},	33	path: '/404',
37	{	34	component: 'views/error-page/404',
38	path: '/500',	35	hidden: true
39	component: 'views/error-page/500',	36	},
40	hidden: true	37	{
41	},	38	path: '/500',
42	{	39	component: 'views/error-page/500',
43	path: '',	40	hidden: true
44	component: 'layout/Layout',	41	},
45	redirect: 'dashboard',	42	{
46	children: [{	43	path: '',
47	path: 'dashboard',	44	component: 'layout/Layout',
48	component: 'views/dashboard/index',	45	redirect: 'dashboard',
49	name: 'Dashboard',	46	children: [{
50	meta: {	47	path: 'dashboard',
51	title: 'dashboard',	48	component: 'views/dashboard/index',
52	icon: 'dashboard',	49	name: 'Dashboard',
53	affix: true	50	meta: {
54	}	51	title: 'dashboard',
		52	icon: 'dashboard',
		53	affix: true
55	}]	54	}
56	},	55	}]
57	{	56	},
58	path: '/documentation',	57	{
59	component: 'layout/Layout',	58	path: '/documentation',
60	children: [{	59	component: 'layout/Layout',
61	path: 'index',	60	children: [{
62	component: 'views/documentation/index',	61	path: 'index',
63	name: 'Documentation',	62	component: 'views/documentation/index',
64	meta: {	63	name: 'Documentation',
65	title: 'documentation',	64	meta: {
66	icon: 'documentation',	65	title: 'documentation',
		66	icon: 'documentation',
		67	affix: true
67	affix: true	68	}
68	}	69	}]
69	}]	70	},
70	},	71	{
71	{	72	path: '/guide',
72	path: '/guide',	73	component: 'layout/Layout',
73	component: 'layout/Layout',	74	redirect: '/guide/index',
74	redirect: '/guide/index',	75	children: [{
75	children: [{	76	path: 'index',
76	path: 'index',	77	component: 'views/guide/index',
77	component: 'views/guide/index',	78	name: 'Guide',
78	name: 'Guide',	79	meta: {
79	meta: {	80	title: 'guide',
		81	icon: 'guide',
		82	noCache: true
80	title: 'guide',	83	}
81	icon: 'guide',	84	}]
82	noCache: true	85	}
83	}	86	]
84	}]	87
85	}	88	export const asyncRoutes = [{
86	]	89	path: '/permission',
87		90	component: 'layout/Layout',
88	export const asyncRoutes = [{	91	redirect: '/permission/index',
89	path: '/permission',	92	alwaysShow: true,
90	component: 'layout/Layout',	93	meta: {
91	redirect: '/permission/index',	94	title: 'permission',
92	alwaysShow: true,	95	icon: 'lock',
93	meta: {	96	// roles: ['admin', 'assistant', 'runner', 'shoper']
94	title: 'permission',	97	},
95	icon: 'lock',	98	children: [{
96	// roles: ['admin', 'assistant', 'runner', 'shoper']	99	path: 'page',
97	},	100	component: 'views/permission/page',
98	children: [{	101	name: 'PagePermission',
99	path: 'page',	102	meta: {
100	component: 'views/permission/page',	103	title: 'pagePermission',
101	name: 'PagePermission',	104	roles: ['admin', 'assistant']
102	meta: {	105	}
103	title: 'pagePermission',	106	},
104	roles: ['admin', 'assistant']	107	{
105	}	108	path: 'directive',
106	},	109	component: 'views/permission/directive',
107	{	110	name: 'DirectivePermission',
108	path: 'directive',	111	meta: {
109	component: 'views/permission/directive',	112	title: 'directivePermission',
110	name: 'DirectivePermission',	113	roles: ['shoper']
111	meta: {	114	}
112	title: 'directivePermission',	115	},
113	roles: ['shoper']	116	{
114	}	117	path: 'role',
115	},	118	component: 'views/permission/role',
116	{	119	name: 'RolePermission',
117	path: 'role',	120	meta: {
118	component: 'views/permission/role',	121	title: 'rolePermission',
119	name: 'RolePermission',	122	roles: ['runner']
120	meta: {	123	}
121	title: 'rolePermission',	124	}
122	roles: ['runner']	125	]
123	}	126	},
124	}
125	]
126	},	127
127		128	{
128	{	129	path: '/icon',
129	path: '/icon',	130	component: 'layout/Layout',
130	component: 'layout/Layout',	131	meta: {
131	meta: {	132	title: 'ddddd',
132	title: 'ddddd',	133	icon: 'people',
133	icon: 'people',	134	roles: ['runner']
134	roles: ['runner']	135	},
135	},	136	children: [{
136	children: [{	137	path: 'index',
137	path: 'index',	138	component: 'views/icons/index',
138	component: 'views/icons/index',	139	name: 'Icons',
139	name: 'Icons',	140	meta: {
140	meta: {	141	title: 'icons',
		142	icon: 'icon',
		143	noCache: true
141	title: 'icons',	144	}
142	icon: 'icon',	145	}]
143	noCache: true	146	},
144	}	147
145	}]	148	{
146	},	149	path: '/components',
147		150	component: 'layout/Layout',
148	{	151	redirect: 'noRedirect',
149	path: '/components',	152	name: 'ComponentDemo',
150	component: 'layout/Layout',	153	meta: {
151	redirect: 'noRedirect',	154	title: 'components',
152	name: 'ComponentDemo',	155	icon: 'component'
153	meta: {	156	},
154	title: 'components',	157	children: [{
155	icon: 'component'
156	},	158	path: 'tinymce',
157	children: [{	159	component: 'views/components-demo/tinymce',
158	path: 'tinymce',	160	name: 'TinymceDemo',
159	component: 'views/components-demo/tinymce',	161	meta: {
		162	title: 'tinymce'
		163	}
160	name: 'TinymceDemo',	164	},
161	meta: {	165	{
162	title: 'tinymce'	166	path: 'markdown',
163	}	167	component: 'views/components-demo/markdown',
164	},	168	name: 'MarkdownDemo',
165	{	169	meta: {
		170	title: 'markdown'
		171	}
166	path: 'markdown',	172	},
167	component: 'views/components-demo/markdown',	173	{
168	name: 'MarkdownDemo',	174	path: 'json-editor',
169	meta: {	175	component: 'views/components-demo/json-editor',
170	title: 'markdown'	176	name: 'JsonEditorDemo',
171	}	177	meta: {
		178	title: 'jsonEditor'
		179	}
172	},	180	},
173	{	181	{
174	path: 'json-editor',	182	path: 'split-pane',
175	component: 'views/components-demo/json-editor',	183	component: 'views/components-demo/split-pane',
176	name: 'JsonEditorDemo',	184	name: 'SplitpaneDemo',
177	meta: {	185	meta: {
		186	title: 'splitPane'
		187	}
178	title: 'jsonEditor'	188	},
179	}	189	{
180	},	190	path: 'avatar-upload',
181	{	191	component: 'views/components-demo/avatar-upload',
182	path: 'split-pane',	192	name: 'AvatarUploadDemo',
183	component: 'views/components-demo/split-pane',	193	meta: {
		194	title: 'avatarUpload'
		195	}
184	name: 'SplitpaneDemo',	196	},
185	meta: {	197	{
186	title: 'splitPane'	198	path: 'dropzone',
187	}	199	component: 'views/components-demo/dropzone',
188	},	200	name: 'DropzoneDemo',
189	{	201	meta: {
		202	title: 'dropzone'
		203	}
190	path: 'avatar-upload',	204	},
191	component: 'views/components-demo/avatar-upload',	205	{
192	name: 'AvatarUploadDemo',	206	path: 'sticky',
193	meta: {	207	component: 'views/components-demo/sticky',
194	title: 'avatarUpload'	208	name: 'StickyDemo',
195	}	209	meta: {
		210	title: 'sticky'
		211	}
196	},	212	},
197	{	213	{
198	path: 'dropzone',	214	path: 'count-to',
199	component: 'views/components-demo/dropzone',	215	component: 'views/components-demo/count-to',
200	name: 'DropzoneDemo',	216	name: 'CountToDemo',
201	meta: {	217	meta: {
		218	title: 'countTo'
		219	}
202	title: 'dropzone'	220	},
203	}	221	{
204	},	222	path: 'mixin',
205	{	223	component: 'views/components-demo/mixin',
206	path: 'sticky',	224	name: 'ComponentMixinDemo',
207	component: 'views/components-demo/sticky',	225	meta: {
		226	title: 'componentMixin'
		227	}
208	name: 'StickyDemo',	228	},
209	meta: {	229	{
210	title: 'sticky'	230	path: 'back-to-top',
211	}	231	component: 'views/components-demo/back-to-top',
212	},	232	name: 'BackToTopDemo',
213	{	233	meta: {
		234	title: 'backToTop'
		235	}
214	path: 'count-to',	236	},
215	component: 'views/components-demo/count-to',	237	{
216	name: 'CountToDemo',	238	path: 'drag-dialog',
217	meta: {	239	component: 'views/components-demo/drag-dialog',
218	title: 'countTo'	240	name: 'DragDialogDemo',
219	}	241	meta: {
		242	title: 'dragDialog'
		243	}
220	},	244	},
221	{	245	{
222	path: 'mixin',	246	path: 'drag-select',
223	component: 'views/components-demo/mixin',	247	component: 'views/components-demo/drag-select',
224	name: 'ComponentMixinDemo',	248	name: 'DragSelectDemo',
225	meta: {	249	meta: {
		250	title: 'dragSelect'
		251	}
226	title: 'componentMixin'	252	},
227	}	253	{
228	},	254	path: 'dnd-list',
229	{	255	component: 'views/components-demo/dnd-list',
230	path: 'back-to-top',	256	name: 'DndListDemo',
231	component: 'views/components-demo/back-to-top',	257	meta: {
		258	title: 'dndList'
		259	}
232	name: 'BackToTopDemo',	260	},
233	meta: {	261	{
234	title: 'backToTop'	262	path: 'drag-kanban',
235	}	263	component: 'views/components-demo/drag-kanban',
236	},	264	name: 'DragKanbanDemo',
237	{	265	meta: {
		266	title: 'dragKanban'
		267	}
238	path: 'drag-dialog',	268	}
239	component: 'views/components-demo/drag-dialog',	269	]
240	name: 'DragDialogDemo',	270	},
241	meta: {	271	{
242	title: 'dragDialog'	272	path: '/charts',
243	}	273	component: 'layout/Layout',
244	},	274	redirect: 'noRedirect',
245	{	275	name: 'Charts',
246	path: 'drag-select',	276	meta: {
247	component: 'views/components-demo/drag-select',	277	title: 'charts',
248	name: 'DragSelectDemo',	278	icon: 'chart'
249	meta: {	279	},
250	title: 'dragSelect'	280	children: [{
251	}
252	},	281	path: 'keyboard',
253	{	282	component: 'views/charts/keyboard',
254	path: 'dnd-list',	283	name: 'KeyboardChart',
255	component: 'views/components-demo/dnd-list',	284	meta: {
		285	title: 'keyboardChart',
		286	noCache: true
		287	}
256	name: 'DndListDemo',	288	},
257	meta: {	289	{
258	title: 'dndList'	290	path: 'line',
259	}	291	component: 'views/charts/line',
260	},	292	name: 'LineChart',
261	{	293	meta: {
		294	title: 'lineChart',
		295	noCache: true
		296	}
262	path: 'drag-kanban',	297	},
263	component: 'views/components-demo/drag-kanban',	298	{
264	name: 'DragKanbanDemo',	299	path: 'mixchart',
265	meta: {	300	component: 'views/charts/mixChart',
266	title: 'dragKanban'	301	name: 'MixChart',
267	}	302	meta: {
		303	title: 'mixChart',
		304	noCache: true
		305	}
268	}	306	}
269	]	307	]
270	},	308	},
271	{	309	{
272	path: '/charts',	310	path: '/nested',
273	component: 'layout/Layout',	311	component: 'layout/Layout',
274	redirect: 'noRedirect',	312	redirect: '/nested/menu1/menu1-1',
275	name: 'Charts',	313	name: 'Nested',
276	meta: {	314	meta: {
277	title: 'charts',	315	title: 'nested',
278	icon: 'chart'	316	icon: 'nested'
279	},	317	},
280	children: [{	318	children: [{
281	path: 'keyboard',
282	component: 'views/charts/keyboard',	319	path: 'menu1',
283	name: 'KeyboardChart',	320	component: 'views/nested/menu1/index',
284	meta: {	321	name: 'Menu1',
285	title: 'keyboardChart',	322	meta: {
		323	title: 'menu1'
		324	},
286	noCache: true	325	redirect: '/nested/menu1/menu1-1',
287	}	326	children: [{
288	},
289	{	327	path: 'menu1-1',
290	path: 'line',	328	component: 'views/nested/menu1/menu1-1',
291	component: 'views/charts/line',	329	name: 'Menu1-1',
292	name: 'LineChart',	330	meta: {
		331	title: 'menu1-1'
		332	}
293	meta: {	333	},
294	title: 'lineChart',	334	{
295	noCache: true	335	path: 'menu1-2',
296	}	336	component: 'views/nested/menu1/menu1-2',
297	},	337	name: 'Menu1-2',
298	{	338	redirect: '/nested/menu1/menu1-2/menu1-2-1',
299	path: 'mixchart',	339	meta: {
300	component: 'views/charts/mixChart',	340	title: 'menu1-2'
301	name: 'MixChart',	341	},
		342	children: [{
302	meta: {	343	path: 'menu1-2-1',
303	title: 'mixChart',	344	component: 'views/nested/menu1/menu1-2/menu1-2-1',
304	noCache: true	345	name: 'Menu1-2-1',
305	}	346	meta: {
		347	title: 'menu1-2-1'
		348	}
306	}	349	},
307	]	350	{
308	},	351	path: 'menu1-2-2',
309	{	352	component: 'views/nested/menu1/menu1-2/menu1-2-2',
310	path: '/nested',	353	name: 'Menu1-2-2',
311	component: 'layout/Layout',	354	meta: {
		355	title: 'menu1-2-2'
		356	}
312	redirect: '/nested/menu1/menu1-1',	357	}
313	name: 'Nested',	358	]
314	meta: {	359	},
315	title: 'nested',	360	{
316	icon: 'nested'	361	path: 'menu1-3',
317	},	362	component: 'views/nested/menu1/menu1-3',
318	children: [{	363	name: 'Menu1-3',
319	path: 'menu1',	364	meta: {
		365	title: 'menu1-3'
		366	}
320	component: 'views/nested/menu1/index',	367	}
321	name: 'Menu1',	368	]
322	meta: {	369	},
323	title: 'menu1'	370	{
324	},	371	path: 'menu2',
325	redirect: '/nested/menu1/menu1-1',	372	name: 'Menu2',
326	children: [{	373	component: 'views/nested/menu2/index',
327	path: 'menu1-1',	374	meta: {
		375	title: 'menu2'
		376	}
328	component: 'views/nested/menu1/menu1-1',	377	}
329	name: 'Menu1-1',	378	]
330	meta: {	379	},
331	title: 'menu1-1'	380
332	}	381	{
333	},	382	path: '/example',
334	{	383	component: 'layout/Layout',
335	path: 'menu1-2',	384	redirect: '/example/list',
336	component: 'views/nested/menu1/menu1-2',	385	name: 'Example',
337	name: 'Menu1-2',	386	meta: {
338	redirect: '/nested/menu1/menu1-2/menu1-2-1',	387	title: 'example',
339	meta: {	388	icon: 'example'
340	title: 'menu1-2'	389	},
341	},	390	children: [{
342	children: [{
343	path: 'menu1-2-1',	391	path: 'create',
344	component: 'views/nested/menu1/menu1-2/menu1-2-1',	392	component: 'views/example/create',
345	name: 'Menu1-2-1',	393	name: 'CreateArticle',
346	meta: {	394	meta: {
		395	title: 'createArticle',
		396	icon: 'edit'
		397	}
347	title: 'menu1-2-1'	398	},
348	}	399	{
349	},	400	path: 'edit/:id(\\d+)',
350	{	401	component: 'views/example/edit',
351	path: 'menu1-2-2',	402	name: 'EditArticle',
352	component: 'views/nested/menu1/menu1-2/menu1-2-2',	403	meta: {
		404	title: 'editArticle',
		405	noCache: true
		406	},
353	name: 'Menu1-2-2',	407	hidden: true
354	meta: {	408	},
355	title: 'menu1-2-2'	409	{
356	}	410	path: 'list',
357	}	411	component: 'views/example/list',
358	]	412	name: 'ArticleList',
359	},	413	meta: {
		414	title: 'articleList',
		415	icon: 'list'
		416	}
360	{	417	}
361	path: 'menu1-3',	418	]
362	component: 'views/nested/menu1/menu1-3',	419	},
363	name: 'Menu1-3',	420
364	meta: {	421	{
365	title: 'menu1-3'	422	path: '/tab',
366	}	423	component: 'layout/Layout',
367	}	424	children: [{
368	]	425	path: 'index',
369	},	426	component: 'views/tab/index',
370	{	427	name: 'Tab',
371	path: 'menu2',	428	meta: {
372	name: 'Menu2',	429	title: 'tab',
		430	icon: 'tab'
373	component: 'views/nested/menu2/index',	431	}
374	meta: {	432	}]
375	title: 'menu2'	433	},
376	}	434
377	}	435	{
378	]	436	path: '/error',
379	},	437	component: 'layout/Layout',
380		438	redirect: 'noRedirect',
381	{	439	name: 'ErrorPages',
382	path: '/example',	440	meta: {
383	component: 'layout/Layout',	441	title: 'errorPages',
384	redirect: '/example/list',	442	icon: '404'
385	name: 'Example',	443	},
386	meta: {	444	children: [{
387	title: 'example',
388	icon: 'example'	445	path: '401',
389	},	446	component: 'views/error-page/401',
390	children: [{	447	name: 'Page401',
391	path: 'create',	448	meta: {
		449	title: 'page401',
		450	noCache: true
		451	}
392	component: 'views/example/create',	452	},
393	name: 'CreateArticle',	453	{
394	meta: {	454	path: '404',
395	title: 'createArticle',	455	component: 'views/error-page/404',
396	icon: 'edit'	456	name: 'Page404',
397	}	457	meta: {
		458	title: 'page404',
		459	noCache: true
		460	}
398	},	461	},
399	{	462	{
400	path: 'edit/:id(\\d+)',	463	path: '500',
401	component: 'views/example/edit',	464	component: 'views/error-page/500',
402	name: 'EditArticle',	465	name: 'Page500',
403	meta: {	466	meta: {
		467	title: 'page500',
		468	noCache: true
		469	}
404	title: 'editArticle',	470	}
405	noCache: true	471	]
406	},	472	},
407	hidden: true	473
408	},	474	{
409	{	475	path: '/error-log',
410	path: 'list',	476	component: 'layout/Layout',
411	component: 'views/example/list',	477	redirect: 'noRedirect',
412	name: 'ArticleList',	478	children: [{
413	meta: {	479	path: 'log',
414	title: 'articleList',	480	component: 'views/error-log/index',
415	icon: 'list'	481	name: 'ErrorLog',
416	}	482	meta: {
417	}	483	title: 'errorLog',
		484	icon: 'bug'
418	]	485	}
419	},	486	}]
420		487	},
421	{	488
422	path: '/tab',	489	{
423	component: 'layout/Layout',	490	path: '/excel',
424	children: [{	491	component: 'layout/Layout',
425	path: 'index',	492	redirect: '/excel/export-excel',
426	component: 'views/tab/index',	493	name: 'Excel',
427	name: 'Tab',	494	meta: {
428	meta: {	495	title: 'excel',
429	title: 'tab',	496	icon: 'excel'
430	icon: 'tab'	497	},
431	}	498	children: [{
432	}]
433	},	499	path: 'export-excel',
434		500	component: 'views/excel/export-excel',
435	{	501	name: 'ExportExcel',
436	path: '/error',	502	meta: {
		503	title: 'exportExcel'
		504	}
437	component: 'layout/Layout',	505	},
438	redirect: 'noRedirect',	506	{
439	name: 'ErrorPages',	507	path: 'export-selected-excel',
440	meta: {	508	component: 'views/excel/select-excel',
441	title: 'errorPages',	509	name: 'SelectExcel',
442	icon: '404'	510	meta: {
		511	title: 'selectExcel'
		512	}
443	},	513	},
444	children: [{	514	{
445	path: '401',	515	path: 'export-merge-header',
446	component: 'views/error-page/401',	516	component: 'views/excel/merge-header',
447	name: 'Page401',	517	name: 'MergeHeader',
448	meta: {	518	meta: {
		519	title: 'mergeHeader'
		520	}
449	title: 'page401',	521	},
450	noCache: true	522	{
451	}	523	path: 'upload-excel',
452	},	524	component: 'views/excel/upload-excel',
453	{	525	name: 'UploadExcel',
454	path: '404',	526	meta: {
		527	title: 'uploadExcel'
		528	}
455	component: 'views/error-page/404',	529	}
456	name: 'Page404',	530	]
457	meta: {	531	},
458	title: 'page404',	532
459	noCache: true	533	{
460	}	534	path: '/zip',
461	},	535	component: 'layout/Layout',
462	{	536	redirect: '/zip/download',
463	path: '500',	537	alwaysShow: true,
464	component: 'views/error-page/500',	538	meta: {
465	name: 'Page500',	539	title: 'zip',
466	meta: {	540	icon: 'zip'
467	title: 'page500',	541	},
468	noCache: true	542	children: [{
469	}	543	path: 'download',
470	}	544	component: 'views/zip/index',
		545	name: 'ExportZip',
		546	meta: {
		547	title: 'exportZip'
471	]	548	}
472	},	549	}]
473		550	},
474	{	551
475	path: '/error-log',	552	{
476	component: 'layout/Layout',	553	path: '/pdf',
477	redirect: 'noRedirect',	554	component: 'layout/Layout',
478	children: [{	555	redirect: '/pdf/index',
479	path: 'log',	556	children: [{
480	component: 'views/error-log/index',	557	path: 'index',
481	name: 'ErrorLog',	558	component: 'views/pdf/index',
482	meta: {	559	name: 'PDF',
483	title: 'errorLog',	560	meta: {
484	icon: 'bug'	561	title: 'pdf',
		562	icon: 'pdf'
485	}	563	}
486	}]	564	}]
487	},	565	},
488		566	{
489	{	567	path: '/pdf/download',
490	path: '/excel',	568	component: 'views/pdf/download',
491	component: 'layout/Layout',	569	hidden: true
492	redirect: '/excel/export-excel',	570	},
493	name: 'Excel',	571
494	meta: {	572	{
495	title: 'excel',	573	path: '/theme',
496	icon: 'excel'	574	component: 'layout/Layout',
497	},	575	redirect: 'noRedirect',
498	children: [{	576	children: [{
499	path: 'export-excel',	577	path: 'index',
500	component: 'views/excel/export-excel',	578	component: 'views/theme/index',
501	name: 'ExportExcel',	579	name: 'Theme',
502	meta: {	580	meta: {
503	title: 'exportExcel'	581	title: 'theme',
		582	icon: 'theme'
504	}	583	}
505	},	584	}]
506	{	585	},
507	path: 'export-selected-excel',	586
508	component: 'views/excel/select-excel',	587	{
509	name: 'SelectExcel',	588	path: '/clipboard',
510	meta: {	589	component: 'layout/Layout',
511	title: 'selectExcel'	590	redirect: 'noRedirect',
512	}	591	children: [{
513	},	592	path: 'index',
514	{	593	component: 'views/clipboard/index',
515	path: 'export-merge-header',	594	name: 'ClipboardDemo',
516	component: 'views/excel/merge-header',	595	meta: {
517	name: 'MergeHeader',	596	title: 'clipboardDemo',
		597	icon: 'clipboard'
518	meta: {	598	}
519	title: 'mergeHeader'	599	}]
520	}	600	},
521	},	601
522	{	602	{
523	path: 'upload-excel',	603	path: '/i18n',
524	component: 'views/excel/upload-excel',	604	component: 'layout/Layout',
525	name: 'UploadExcel',	605	children: [{
526	meta: {	606	path: 'index',
527	title: 'uploadExcel'	607	component: 'views/i18n-demo/index',
528	}	608	name: 'I18n',
529	}	609	meta: {
530	]	610	title: 'i18n',
		611	icon: 'international'
531	},	612	}
532		613	}]
533	{	614	},
534	path: '/zip',	615
535	component: 'layout/Layout',	616	{
536	redirect: '/zip/download',	617	path: 'external-link',
537	alwaysShow: true,	618	component: 'layout/Layout',
538	meta: {	619	children: [{
539	title: 'zip',	620	path: 'https://github.com/PanJiaChen/vue-element-admin',
540	icon: 'zip'	621	meta: {
541	},	622	title: 'externalLink',

mock/user.js

Diff comments Edit View file @0bd8168

1		1
2	import Mock from 'mockjs'	2	import Mock from 'mockjs'
3		3
4	const tokens = {	4	const tokens = {
5	admin: {	5	admin: {
6	token: 'admin-token'	6	token: 'admin-token'
7	},	7	},
8	assistant: {	8	assistant: {
9	token: 'assistant-token'	9	token: 'assistant-token'
10	},	10	},
11	runner: {	11	runner: {
12	token: 'runner-token'	12	token: 'runner-token'
13	},	13	},
14	shoper: {	14	shoper: {
15	token: 'shoper-token'	15	token: 'shoper-token'
16	}	16	}
17	}	17	}
18		18
19	const users = {	19	const users = {
20	'admin-token': {	20	'admin-token': {
21	roles: ['admin'],	21	roles: ['admin'],
22	introduction: 'I am a super administrator',	22	introduction: 'I am a super administrator',
23	avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',	23	avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
24	name: 'Super Admin'	24	name: 'Super Admin'
25	},	25	},
26	'assistant-token': {	26	'assistant-token': {
27	roles: ['assistant'],	27	roles: ['assistant'],
28	introduction: 'I am an assistant',	28	introduction: 'I am an assistant',
29	avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',	29	avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
30	name: 'Normal assistant'	30	name: 'Normal assistant'
31	},	31	},
32	'runner-token': {	32	'runner-token': {
33	roles: ['runner'],	33	roles: ['runner'],
34	introduction: 'I am an runner',	34	introduction: 'I am an runner',
35	avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',	35	avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
36	name: 'Normal runner'	36	name: 'Normal runner'
37	},	37	},
38	'shoper-token': {	38	'shoper-token': {
39	roles: ['shoper'],	39	roles: ['shoper'],
40	introduction: 'I am an shoper',	40	introduction: 'I am an shoper',
41	avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',	41	avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
42	name: 'Normal shoper'	42	name: 'Normal shoper'
43	}	43	}
44	}	44	}
45		45
46	const List = []	46	const List = []
47	const count = 10	47	const count = 10
48		48
49	const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'	49	const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
50	const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'	50	const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
51		51
52	for (let i = 0; i < count; i++) {	52	for (let i = 0; i < count; i++) {
53	List.push(Mock.mock({	53	List.push(Mock.mock({
54	uid: '@increment',	54	uid: '@increment',
55	create_time: +Mock.Random.date('T'),	55	create_time: +Mock.Random.date('T'),
56	nickname: '@first',	56	nickname: '@first',
57	// reviewer: '@first',	57	// reviewer: '@first',
58	// title: '@title(5, 10)',	58	// title: '@title(5, 10)',
59	openid: '@sentence(12,12)',	59	openid: '@sentence(12,12)',
60	comefromperson: '@title(1, 4)',	60	comefromperson: '@title(1, 4)',
61	buyvalue:'@integer(1,100)',	61	buyvalue:'@integer(1,100)',
62	buywill:'@integer(1,100)',	62	buywill:'@integer(1,100)',
63	// content_short: 'mock data',	63	// content_short: 'mock data',
		64	// content: baseContent,
		65	// forecast: '@float(0, 100, 2, 2)',
		66	// importance: '@integer(1, 3)',
64	// content: baseContent,	67	'type\|1': ['CN', 'US', 'JP', 'EU'],
65	// forecast: '@float(0, 100, 2, 2)',	68	'status\|1': ['published', 'draft'],
66	// importance: '@integer(1, 3)',	69	// display_time: '@datetime',
67	'type\|1': ['CN', 'US', 'JP', 'EU'],	70	// comment_disabled: true,
68	'status\|1': ['published', 'draft'],	71	son_of_adv: '@integer(300, 5000)',//下线
69	// display_time: '@datetime',	72	souceof:'@integer(300, 5000)',//源自
70	// comment_disabled: true,	73	image_uri,
71	son_of_adv: '@integer(300, 5000)',//下线	74	'roles\|1': ['admin', 'assistant', 'shoper', 'runner'],
72	souceof:'@integer(300, 5000)',//源自	75	platforms: ['a-platform']//哪个平台
73	image_uri,	76	}))
74	'roles\|1': ['admin', 'assistant', 'shoper', 'runner'],	77	}
75	platforms: ['a-platform']//哪个平台	78
76	}))	79	export default [
77	}	80	// user login
78		81	{
79	export default [	82	url: '/yp/user/login',
80	// user login	83	type: 'post',
81	{	84	response: config => {
82	url: '/yp/user/login',	85	const { username } = config.body
83	type: 'post',	86	const token = tokens[username]
84	response: config => {	87
85	const { username } = config.body	88	// mock error
86	const token = tokens[username]	89	if (!token) {
87		90	return {
88	// mock error	91	code: 60204,
89	if (!token) {	92	message: 'Account and password are incorrect.'
90	return {	93	}
91	code: 60204,	94	}
92	message: 'Account and password are incorrect.'	95
93	}	96	return {
94	}	97	code: 20000,
95		98	data: token
96	return {	99	}
97	code: 20000,	100	}
98	data: token	101	},
99	}	102
100	}	103	// get user info
101	},	104	{
102		105	url: '/yp/user/info\.*',
103	// get user info	106	type: 'get',
104	{	107	response: config => {
105	url: '/yp/user/info\.*',	108	const { token } = config.query
106	type: 'get',	109	const info = users[token]
107	response: config => {	110
108	const { token } = config.query	111	// mock error
109	const info = users[token]	112	if (!info) {
110		113	return {
111	// mock error	114	code: 50008,
112	if (!info) {	115	message: 'Login failed, unable to get user details.'
113	return {	116	}
114	code: 50008,	117	}
115	message: 'Login failed, unable to get user details.'	118
116	}	119	return {
117	}	120	code: 20000,
118		121	data: info
119	return {	122	}
120	code: 20000,	123	}
121	data: info	124	},
122	}	125
123	}	126	// user logout
124	},	127	{
125		128	url: '/yp/user/logout',
126	// user logout	129	type: 'post',
127	{	130	response: _ => {
128	url: '/yp/user/logout',	131	return {
129	type: 'post',	132	code: 20000,
130	response: _ => {	133	data: 'success'
131	return {	134	}
132	code: 20000,	135	}
133	data: 'success'	136	},
134	}	137	// user create
135	}	138	{
136	},	139	url: '/yp/user/create',
137	// user create	140	type: 'post',
138	{	141	response: _ => {
139	url: '/yp/user/create',	142	return {
140	type: 'post',	143	code: 20000,
141	response: _ => {	144	data: 'success'
142	return {	145	}
143	code: 20000,	146	}
144	data: 'success'	147	},
145	}	148	// user update
146	}	149	{
147	},	150	url: '/yp/user/update',
148	// user update	151	type: 'post',
149	{	152	response: _ => {
150	url: '/yp/user/update',	153	return {
151	type: 'post',	154	code: 20000,
152	response: _ => {	155	data: 'success'
153	return {	156	}
154	code: 20000,	157	}
155	data: 'success'	158	},
156	}	159	// user del
157	}	160	{
158	},	161	url: '/yp/user/del',
159	// user del	162	type: 'post',
160	{	163	response: _ => {
161	url: '/yp/user/del',	164	return {
162	type: 'post',	165	code: 20000,
163	response: _ => {	166	data: 'success'
164	return {	167	}
165	code: 20000,	168	}
166	data: 'success'	169	},
167	}	170	// user list
168	}	171	{
169	},	172	url: '/yp/user/list',
170	// user list	173	type: 'get',
171	{	174	response: config => {
172	url: '/yp/user/list',	175	const {
173	type: 'get',	176	importance,
174	response: config => {	177	type,
175	const {	178	title,
176	importance,	179	page = 1,
177	type,	180	limit = 20,
178	title,	181	sort
179	page = 1,	182	} = config.query
180	limit = 20,	183
181	sort	184	let mockList = List.filter(item => {
182	} = config.query	185	if (importance && item.importance !== +importance) return false
183		186	if (type && item.type !== type) return false
184	let mockList = List.filter(item => {	187	if (title && item.title.indexOf(title) < 0) return false
185	if (importance && item.importance !== +importance) return false	188	return true
186	if (type && item.type !== type) return false	189	})
187	if (title && item.title.indexOf(title) < 0) return false	190
188	return true	191	if (sort === '-id') {
189	})	192	mockList = mockList.reverse()
190		193	}
191	if (sort === '-id') {	194
192	mockList = mockList.reverse()	195	const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
193	}	196
194		197	return {
195	const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))	198	code: 20000,
196		199	data: {
197	return {	200	total: mockList.length,
198	code: 20000,	201	items: pageList
199	data: {	202	}
200	total: mockList.length,	203	}
201	items: pageList	204	}
202	}	205	}
203	}	206	]
204	}	207

package.json

Diff comments Edit View file @0bd8168

1	{	1	{
2	"name": "vue-element-admin",	2	"name": "vue-element-admin",
3	"version": "4.2.1",	3	"version": "4.2.1",
4	"description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",	4	"description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
5	"author": "Pan <panfree23@gmail.com>",	5	"author": "Pan <panfree23@gmail.com>",
6	"license": "MIT",	6	"license": "MIT",
7	"scripts": {	7	"scripts": {
8	"dev": "vue-cli-service serve",	8	"dev": "vue-cli-service serve",
9	"build:prod": "vue-cli-service build",	9	"build:prod": "vue-cli-service build",
10	"build:stage": "vue-cli-service build --mode staging",	10	"build:stage": "vue-cli-service build --mode staging",
11	"preview": "node build/index.js --preview",	11	"preview": "node build/index.js --preview",
12	"lint": "eslint --fix --ext .js,.vue src",	12	"lint": "eslint --fix --ext .js,.vue src",
13	"test:unit": "jest --clearCache && vue-cli-service test:unit",	13	"test:unit": "jest --clearCache && vue-cli-service test:unit",
14	"test:ci": "npm run lint && npm run test:unit",	14	"test:ci": "npm run lint && npm run test:unit",
15	"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",	15	"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
16	"new": "plop"	16	"new": "plop"
17	},	17	},
18	"husky": {	18	"husky": {
19	"hooks": {	19	"hooks": {
20	"pre-commit": "lint-staged"	20	"pre-commit": "lint-staged"
21	}	21	}
22	},	22	},
23	"lint-staged": {	23	"lint-staged": {
24	"src/*/.{js,vue}": [	24	"src/*/.{js,vue}": [
25	"eslint --fix",	25	"eslint --fix",
26	"git add"	26	"git add"
27	]	27	]
28	},	28	},
29	"keywords": [	29	"keywords": [
30	"vue",	30	"vue",
31	"admin",	31	"admin",
32	"dashboard",	32	"dashboard",
33	"element-ui",	33	"element-ui",
34	"boilerplate",	34	"boilerplate",
35	"admin-template",	35	"admin-template",
36	"management-system"	36	"management-system"
37	],	37	],
38	"repository": {	38	"repository": {
39	"type": "git",	39	"type": "git",
40	"url": "git+https://github.com/PanJiaChen/vue-element-admin.git"	40	"url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
41	},	41	},
42	"bugs": {	42	"bugs": {
43	"url": "https://github.com/PanJiaChen/vue-element-admin/issues"	43	"url": "https://github.com/PanJiaChen/vue-element-admin/issues"
44	},	44	},
45	"dependencies": {	45	"dependencies": {
46	"ant-design-vue": "^1.5.5",	46	"ant-design-vue": "^1.5.5",
47	"axios": "0.18.1",	47	"axios": "0.18.1",
48	"clipboard": "2.0.4",	48	"clipboard": "2.0.4",
49	"codemirror": "5.45.0",	49	"codemirror": "5.45.0",
50	"driver.js": "0.9.5",	50	"driver.js": "0.9.5",
51	"dropzone": "5.5.1",	51	"dropzone": "5.5.1",
52	"echarts": "4.2.1",	52	"echarts": "4.2.1",
53	"element-ui": "2.13.0",	53	"element-ui": "2.13.0",
54	"file-saver": "2.0.1",	54	"file-saver": "2.0.1",
55	"fuse.js": "3.4.4",	55	"fuse.js": "3.4.4",
56	"js-cookie": "2.2.0",	56	"js-cookie": "2.2.0",
57	"jsonlint": "1.6.3",	57	"jsonlint": "1.6.3",
58	"jszip": "3.2.1",	58	"jszip": "3.2.1",
59	"less-loader": "^6.1.0",	59	"less-loader": "^6.1.0",
60	"normalize.css": "7.0.0",	60	"normalize.css": "7.0.0",
61	"nprogress": "0.2.0",	61	"nprogress": "0.2.0",
62	"path-to-regexp": "2.4.0",	62	"path-to-regexp": "2.4.0",
63	"pinyin": "2.9.0",	63	"pinyin": "2.9.0",
64	"qs": "^6.9.4",	64	"qs": "^6.9.4",
65	"screenfull": "4.2.0",	65	"screenfull": "4.2.0",
66	"showdown": "1.9.0",	66	"showdown": "1.9.0",
67	"sortablejs": "1.8.4",	67	"sortablejs": "1.8.4",
68	"tui-editor": "1.3.3",	68	"tui-editor": "1.3.3",
69	"vant": "^2.8.0",	69	"vant": "^2.8.0",
70	"vue": "2.6.10",	70	"vue": "2.6.10",
71	"vue-count-to": "1.0.13",	71	"vue-count-to": "1.0.13",
		72	"vue-giant-tree": "^0.1.2",
72	"vue-giant-tree": "^0.1.2",	73	"vue-i18n": "7.3.2",
73	"vue-i18n": "7.3.2",	74	"vue-router": "3.0.2",
74	"vue-router": "3.0.2",	75	"vue-splitpane": "1.0.4",
		76	"vue-ztree": "^1.0.0",
75	"vue-splitpane": "1.0.4",	77	"vuedraggable": "2.20.0",
76	"vue-ztree": "^1.0.0",	78	"vuex": "3.1.0",
77	"vuedraggable": "2.20.0",	79	"xlsx": "0.14.1"
78	"vuex": "3.1.0",	80	},
79	"xlsx": "0.14.1"	81	"devDependencies": {
80	},	82	"@babel/core": "7.0.0",
81	"devDependencies": {	83	"@babel/register": "7.0.0",
82	"@babel/core": "7.0.0",	84	"@vue/cli-plugin-babel": "3.5.3",
83	"@babel/register": "7.0.0",	85	"@vue/cli-plugin-eslint": "^3.9.1",
84	"@vue/cli-plugin-babel": "3.5.3",	86	"@vue/cli-plugin-unit-jest": "3.5.3",
85	"@vue/cli-plugin-eslint": "^3.9.1",	87	"@vue/cli-service": "3.5.3",
86	"@vue/cli-plugin-unit-jest": "3.5.3",	88	"@vue/test-utils": "1.0.0-beta.29",
87	"@vue/cli-service": "3.5.3",	89	"autoprefixer": "^9.5.1",
88	"@vue/test-utils": "1.0.0-beta.29",	90	"babel-core": "7.0.0-bridge.0",
89	"autoprefixer": "^9.5.1",	91	"babel-eslint": "10.0.1",
90	"babel-core": "7.0.0-bridge.0",	92	"babel-jest": "23.6.0",
91	"babel-eslint": "10.0.1",	93	"chalk": "2.4.2",
92	"babel-jest": "23.6.0",	94	"chokidar": "2.1.5",
93	"chalk": "2.4.2",	95	"connect": "3.6.6",
94	"chokidar": "2.1.5",	96	"eslint": "5.15.3",
95	"connect": "3.6.6",	97	"eslint-plugin-vue": "5.2.2",
96	"eslint": "5.15.3",	98	"html-webpack-plugin": "3.2.0",
97	"eslint-plugin-vue": "5.2.2",	99	"husky": "1.3.1",
98	"html-webpack-plugin": "3.2.0",	100	"lint-staged": "8.1.5",
99	"husky": "1.3.1",	101	"mockjs": "1.0.1-beta3",
100	"lint-staged": "8.1.5",	102	"node-sass": "^4.9.0",
101	"mockjs": "1.0.1-beta3",	103	"plop": "2.3.0",
102	"node-sass": "^4.9.0",	104	"runjs": "^4.3.2",
103	"plop": "2.3.0",	105	"sass-loader": "^7.1.0",
104	"runjs": "^4.3.2",	106	"script-ext-html-webpack-plugin": "2.1.3",
105	"sass-loader": "^7.1.0",	107	"script-loader": "0.7.2",
106	"script-ext-html-webpack-plugin": "2.1.3",	108	"serve-static": "^1.13.2",
107	"script-loader": "0.7.2",	109	"svg-sprite-loader": "4.1.3",
108	"serve-static": "^1.13.2",	110	"svgo": "1.2.0",
109	"svg-sprite-loader": "4.1.3",	111	"vue-template-compiler": "2.6.10"
110	"svgo": "1.2.0",	112	},
111	"vue-template-compiler": "2.6.10"	113	"engines": {
112	},	114	"node": ">=8.9",
113	"engines": {	115	"npm": ">= 3.0.0"
114	"node": ">=8.9",	116	},
115	"npm": ">= 3.0.0"	117	"browserslist": [
116	},	118	"> 1%",
117	"browserslist": [	119	"last 2 versions"
118	"> 1%",	120	]
119	"last 2 versions"	121	}
120	]	122

src/api/prod.js

Diff comments Edit View file @0bd8168

		1	import request from '@/utils/request'
		2
		3	// export const getPersonInfo = data => {
		4	// return service({
		5	// url: '/person_pay/getpersoninfo',
		6	// method: 'post',
		7	// data
		8	// })
		9	// }
		10
		11	export function fetchList(query) {
		12	return request({
		13	url: '/yp/prod/list',
		14	method: 'post',
		15	params: query
		16	})
		17	}
		18
		19	export function fetchArticle(id) {
		20	return request({
		21	url: '/yp/prod/detail',
		22	method: 'get',
		23	params: {
		24	id
		25	}
		26	})
		27	}
		28
		29	export function fetchPv(pv) {
		30	return request({
		31	url: '/yp/prod/pv',
		32	method: 'get',
		33	params: {
		34	pv
		35	}
		36	})
		37	}
		38
		39	export function createArticle(data) {
		40	return request({
		41	url: '/yp/prod/create',
		42	method: 'post',
		43	data
		44	})
		45	}
		46
		47	export function updateArticle(data) {
		48	return request({
		49	url: '/yp/prod/update',
		50	method: 'post',
		51	data
		52	})
		53	}
1	import request from '@/utils/request'	54

src/api/user.js

Diff comments Edit View file @0bd8168

1	import request from '@/utils/request'	1	import request from '@/utils/request'
2	import {	2	import {
		3	Notification
		4	} from 'element-ui'
		5	// login
3	Notification	6	export function login(data) {
4	} from 'element-ui'	7	return request({
5	// login	8	url: '/yp/user/login',
6	export function login(data) {	9	method: 'post',
7	return request({	10	data
8	url: '/yp/user/login',	11	})
9	method: 'post',	12	}
10	data	13
		14	// getInfo
11	})	15	export function getInfo(token) {
12	}	16	return request({
13		17	url: '/yp/user/info',
14	// getInfo	18	method: 'get',
15	export function getInfo(token) {	19	params: {
		20	token
		21	}
16	return request({	22	})
17	url: '/yp/user/info',	23	}
18	method: 'get',	24
		25	// logout
19	params: {	26	export function logout() {
20	token	27	return request({
21	}	28	url: '/yp/user/logout',
22	})	29	method: 'post'
23	}	30	})
24		31	}
25	// logout	32
		33	// fetchList
26	export function logout() {	34	export function fetchList(query) {
		35	const options = {
		36	type: 'error',
		37	message: query,
		38	title: '==query value ===',
		39	showClose: true,
		40	duration: 4000
		41	}
		42	Notification(options)
27	return request({	43	return request({
28	url: '/yp/user/logout',	44	url: '/yp/user/list',
29	method: 'post'	45	method: 'get',
30	})	46	params: query
31	}	47	})
32		48	}
33	// fetchList	49
		50	// createUser
34	export function fetchList(query) {	51	export function createUser(query) {
35	const options = {	52	return request({
36	type: 'error',	53	url: '/yp/user/create',
37	message: query,	54	method: 'post',
38	title: '==query value ===',	55	params: query
39	showClose: true,	56	})
40	duration: 4000	57	}
41	}	58
		59	// updateUser
42	Notification(options)	60	export function updateUser(query) {
43	return request({	61	return request({
44	url: '/yp/user/list',	62	url: '/yp/user/update',
45	method: 'get',	63	method: 'post',
46	params: query	64	params: query
47	})	65	})
48	}	66	}
49		67
		68	// delUser
50	// createUser	69	export function delUser(query) {
51	export function createUser(query) {	70	return request({
52	return request({	71	url: '/yp/user/del',
53	url: '/yp/user/create',	72	method: 'post',
54	method: 'post',	73	params: query
55	params: query	74	})
56	})	75	}
57	}	76

src/assets/img/yp_logo.jpeg

Diff comments Edit View file @0bd8168

55.4 KB

src/assets/ztree/line_conn.gif

Diff comments Edit View file @0bd8168

45 Bytes

src/assets/ztree/loading.gif

Diff comments Edit View file @0bd8168

1.52 KB

src/assets/ztree/node.png

Diff comments Edit View file @0bd8168

390 Bytes

src/assets/ztree/root.png

Diff comments Edit View file @0bd8168

275 Bytes

src/assets/ztree/zTreeStandard.gif

Diff comments Edit View file @0bd8168

6.69 KB

src/assets/ztree/zTreeStandard.png

Diff comments Edit View file @0bd8168

12.3 KB

src/components/Ztree/vue-ztree.vue

Diff comments Edit View file @0bd8168

	File was created	1	<style>
		2	div.ztree_content_wrap {
		3	height: 380px;
		4	}
		5	div.ztree_content_wrap div.left {
		6	float: left;
		7	width: 100%;
		8	}
		9	div.zTreeDemoBackground {
		10	width: 100%;
		11	height: 500px;
		12	text-align: left;
		13	}
		14
		15	.expendIcon {
		16	background-position: -74px -36px;
		17	line-height: 0;
		18	margin: 0;
		19	width: 16px;
		20	height: 16px;
		21	display: inline-block;
		22	vertical-align: middle;
		23	border: 0 none;
		24	cursor: pointer;
		25	outline: none;
		26	position: absolute;
		27	top: 4px;
		28	background-color: transparent;
		29	background-repeat: no-repeat;
		30	background-attachment: scroll;
		31	background-image: url("../../assets/ztree/zTreeStandard.png");
		32	}
		33
		34	ul.ztree {
		35	border: 1px solid #ddd;
		36	background: #ffffff;
		37	width: 100%;
		38	height: auto;
		39	overflow-y: scroll;
		40	overflow-x: auto;
		41	}
		42
		43	.ztree * {
		44	padding: 0;
		45	margin: 0;
		46	font-size: 15px;
		47	font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif;
		48	}
		49	.ztree {
		50	margin: 0;
		51	padding: 5px;
		52	color: #333;
		53	}
		54	.ztree li {
		55	position: relative;
		56	padding: 0;
		57	margin: 0;
		58	list-style: none;
		59	line-height: 24px;
		60	text-align: left;
		61	white-space: nowrap;
		62	outline: 0;
		63	}
		64	.ztree li ul {
		65	margin: 0;
		66	padding: 0 0 0 18px;
		67	}
		68	.ztree li ul.line {
		69	background: url("../../assets/ztree/line_conn.gif") 0 0 repeat-y;
		70	}
		71
		72	.ztree li a {
		73	padding: 1px 3px 0 5px;
		74	margin: 0;
		75	cursor: pointer;
		76	height: 17px;
		77	color: #333;
		78	background-color: transparent;
		79	text-decoration: none;
		80	vertical-align: top;
		81	display: inline-block;
		82	}
		83	.ztree li a:hover {
		84	text-decoration: underline;
		85	color: blue;
		86	}
		87	.ztree li a.curSelectedNode {
		88	padding-top: 0px;
		89	background-color: #191d22;
		90	color: #fff;
		91	height: 24px;
		92	border: 1px #191d22 solid;
		93	opacity: 0.8;
		94	}
		95	.ztree li a.curSelectedNode_Edit {
		96	padding-top: 0px;
		97	background-color: #ffe6b0;
		98	color: black;
		99	height: 16px;
		100	border: 1px #ffb951 solid;
		101	opacity: 0.8;
		102	}
		103	.ztree li a.tmpTargetNode_inner {
		104	padding-top: 0px;
		105	background-color: #316ac5;
		106	color: white;
		107	height: 16px;
		108	border: 1px #316ac5 solid;
		109	opacity: 0.8;
		110	filter: alpha(opacity=80);
		111	}
		112	.ztree li a.tmpTargetNode_prev {
		113	}
		114	.ztree li a.tmpTargetNode_next {
		115	}
		116	.ztree li a input.rename {
		117	height: 14px;
		118	width: 80px;
		119	padding: 0;
		120	margin: 0;
		121	font-size: 12px;
		122	border: 1px #7ec4cc solid;
		123	*border: 0px;
		124	}
		125	.ztree li span {
		126	line-height: 16px;
		127	margin-right: 2px;
		128	top: 3px;
		129	display: inline-block;
		130	}
		131	.ztree li span.button {
		132	line-height: 0;
		133	margin: 0;
		134	width: 16px;
		135	height: 16px;
		136	display: inline-block;
		137	vertical-align: middle;
		138	border: 0 none;
		139	cursor: pointer;
		140	outline: none;
		141	background-color: transparent;
		142	background-repeat: no-repeat;
		143	background-attachment: scroll;
		144	background-image: url("../../assets/ztree/zTreeStandard.png");
		145	*background-image: url("../../assets/ztree/zTreeStandard.gif");
		146	}
		147
		148	.ztree li span.button.chk {
		149	width: 13px;
		150	height: 13px;
		151	margin: 0 3px 0 0;
		152	cursor: auto;
		153	}
		154	.ztree li span.button.chk.checkbox_false_full {
		155	background-position: 0 0;
		156	}
		157	.ztree li span.button.chk.checkbox_false_full_focus {
		158	background-position: 0 -14px;
		159	}
		160	.ztree li span.button.chk.checkbox_false_part {
		161	background-position: 0 -28px;
		162	}
		163	.ztree li span.button.chk.checkbox_false_part_focus {
		164	background-position: 0 -42px;
		165	}
		166	.ztree li span.button.chk.checkbox_false_disable {
		167	background-position: 0 -56px;
		168	}
		169	.ztree li span.button.chk.checkbox_true_full {
		170	background-position: -14px 0;
		171	}
		172	.ztree li span.button.chk.checkbox_true_full_focus {
		173	background-position: -14px -14px;
		174	}
		175	.ztree li span.button.chk.checkbox_true_part {
		176	background-position: -14px -28px;
		177	}
		178	.ztree li span.button.chk.checkbox_true_part_focus {
		179	background-position: -14px -42px;
		180	}
		181	.ztree li span.button.chk.checkbox_true_disable {
		182	background-position: -14px -56px;
		183	}
		184	.ztree li span.button.chk.radio_false_full {
		185	background-position: -28px 0;
		186	}
		187	.ztree li span.button.chk.radio_false_full_focus {
		188	background-position: -28px -14px;
		189	}
		190	.ztree li span.button.chk.radio_false_part {
		191	background-position: -28px -28px;
		192	}
		193	.ztree li span.button.chk.radio_false_part_focus {
		194	background-position: -28px -42px;
		195	}
		196	.ztree li span.button.chk.radio_false_disable {
		197	background-position: -28px -56px;
		198	}
		199	.ztree li span.button.chk.radio_true_full {
		200	background-position: -42px 0;
		201	}
		202	.ztree li span.button.chk.radio_true_full_focus {
		203	background-position: -42px -14px;
		204	}
		205	.ztree li span.button.chk.radio_true_part {
		206	background-position: -42px -28px;
		207	}
		208	.ztree li span.button.chk.radio_true_part_focus {
		209	background-position: -42px -42px;
		210	}
		211	.ztree li span.button.chk.radio_true_disable {
		212	background-position: -42px -56px;
		213	}
		214
		215	.ztree li span.button.switch {
		216	width: 18px;
		217	height: 18px;
		218	}
		219	.ztree li span.button.root_open {
		220	background-position: -92px -54px;
		221	}
		222	.ztree li span.button.root_close {
		223	background-position: -74px -54px;
		224	}
		225	.ztree li span.button.roots_open {
		226	background-position: -92px 0;
		227	}
		228	.ztree li span.button.roots_close {
		229	background-position: -74px 0;
		230	}
		231	.ztree li span.button.center_open {
		232	background-position: -92px -18px;
		233	}
		234	.ztree li span.button.center_close {
		235	background-position: -74px -18px;
		236	}
		237	.ztree li span.button.bottom_open {
		238	background-position: -92px -36px;
		239	}
		240	.ztree li span.button.bottom_close {
		241	background-position: -74px -36px;
		242	}
		243	.ztree li span.button.noline_open {
		244	background-position: -92px -72px;
		245	}
		246	.ztree li span.button.noline_close {
		247	background-position: -74px -72px;
		248	}
		249	.ztree li span.button.root_docu {
		250	background: none;
		251	}
		252	.ztree li span.button.roots_docu {
		253	background-position: -56px 0;
		254	}
		255	.ztree li span.button.center_docu {
		256	background-position: -56px -18px;
		257	}
		258	.ztree li span.button.bottom_docu {
		259	background-position: -56px -36px;
		260	}
		261	.ztree li span.button.noline_docu {
		262	background: none;
		263	}
		264
		265	.ztree li span.button.ico_open {
		266	margin-right: 2px;
		267	background-position: -110px -16px;
		268	vertical-align: top;
		269	*vertical-align: middle;
		270	}
		271	.ztree li span.button.ico_close {
		272	margin-right: 2px;
		273	background-position: -110px 0;
		274	vertical-align: top;
		275	*vertical-align: middle;
		276	}
		277	.ztree li span.button.ico_docu {
		278	margin-right: 2px;
		279	background-position: -110px -32px;
		280	vertical-align: top;
		281	*vertical-align: middle;
		282	}
		283	.ztree li span.button.edit {
		284	margin-right: 2px;
		285	background-position: -110px -48px;
		286	vertical-align: top;
		287	*vertical-align: middle;
		288	}
		289	.ztree li span.button.remove {
		290	margin-right: 2px;
		291	background-position: -110px -64px;
		292	vertical-align: top;
		293	*vertical-align: middle;
		294	}
		295
		296	/* ztree li span.button.ico_loading{margin-right:2px; background:url('../../assets/ztree/loading.gif') no-repeat scroll 0 0 transparent; */
		297	/* vertical-align:top; vertical-align:middle} /
		298
		299	ul.tmpTargetzTree {
		300	background-color: #ffe6b0;
		301	opacity: 0.8;
		302	filter: alpha(opacity=80);
		303	}
		304
		305	span.tmpzTreeMove_arrow {
		306	width: 16px;
		307	height: 16px;
		308	display: inline-block;
		309	padding: 0;
		310	margin: 2px 0 0 1px;
		311	border: 0 none;
		312	position: absolute;
		313	background-color: white;
		314	background-repeat: no-repeat;
		315	background-attachment: scroll;
		316	background-position: -110px -80px;
		317	background-image: url("../../assets/ztree/zTreeStandard.png");
		318	*background-image: url("../../assets/ztree/zTreeStandard.gif");
		319	}
		320
		321	ul.ztree.zTreeDragUL {
		322	margin: 0;
		323	padding: 0;
		324	position: absolute;
		325	width: auto;
		326	height: auto;
		327	overflow: hidden;
		328	background-color: #cfcfcf;
		329	border: 1px #00b83f dotted;
		330	opacity: 0.8;
		331	filter: alpha(opacity=80);
		332	}
		333
		334	.zTreeMask {
		335	z-index: 10000;
		336	background-color: #cfcfcf;
		337	opacity: 0;
		338	filter: alpha(opacity=0);
		339	position: absolute;
		340	}
		341
		342	.loadSyncNode {
		343	width: 16px;
		344	height: 16px;
		345	position: relative;
		346	display: inline-block;
		347	background-image: url("data:image/gif;base64,R0lGODlhEAAQAMQAAP///+7u7t3d3bu7u6qqqpmZmYiIiHd3d2ZmZlVVVURERDMzMyIiIhEREQARAAAAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBwAQACwAAAAAEAAQAAAFdyAkQgGJJOWoQgIjBM8jkKsoPEzgyMGsCjPDw7ADpkQBxRDmSCRetpRA6Rj4kFBkgLC4IlUGhbNQIwXOYYWCXDufzYPDMaoKGBoKb886OjAKdgZAAgQkfCwzAgsDBAUCgl8jAQkHEAVkAoA1AgczlyIDczUDA2UhACH5BAUHABAALAAAAAAPABAAAAVjICSO0IGIATkqIiMKDaGKC8Q49jPMYsE0hQdrlABCGgvT45FKiRKQhWA0mPKGPAgBcTjsspBCAoH4gl+FmXNEUEBVAYHToJAVZK/XWoQQDAgBZioHaX8igigFKYYQVlkCjiMhACH5BAUHABAALAAAAAAQAA8AAAVgICSOUGGQqIiIChMESyo6CdQGdRqUENESI8FAdFgAFwqDISYwPB4CVSMnEhSej+FogNhtHyfRQFmIol5owmEta/fcKITB6y4choMBmk7yGgSAEAJ8JAVDgQFmKUCCZnwhACH5BAUHABAALAAAAAAQABAAAAViICSOYkGe4hFAiSImAwotB+si6Co2QxvjAYHIgBAqDoWCK2Bq6A40iA4yYMggNZKwGFgVCAQZotFwwJIF4QnxaC9IsZNgLtAJDKbraJCGzPVSIgEDXVNXA0JdgH6ChoCKKCEAIfkEBQcAEAAsAAAAABAADgAABUkgJI7QcZComIjPw6bs2kINLB5uW9Bo0gyQx8LkKgVHiccKVdyRlqjFSAApOKOtR810StVeU9RAmLqOxi0qRG3LptikAVQEh4UAACH5BAUHABAALAAAAAAQABAAAAVxICSO0DCQKBQQonGIh5AGB2sYkMHIqYAIN0EDRxoQZIaC6bAoMRSiwMAwCIwCggRkwRMJWKSAomBVCc5lUiGRUBjO6FSBwWggwijBooDCdiFfIlBRAlYBZQ0PWRANaSkED1oQYHgjDA8nM3kPfCmejiEAIfkEBQcAEAAsAAAAABAAEAAABWAgJI6QIJCoOIhFwabsSbiFAotGMEMKgZoB3cBUQIgURpFgmEI0EqjACYXwiYJBGAGBgGIDWsVicbiNEgSsGbKCIMCwA4IBCRgXt8bDACkvYQF6U1OADg8mDlaACQtwJCEAIfkEBQcAEAAsAAABABAADwAABV4gJEKCOAwiMa4Q2qIDwq4wiriBmItCCREHUsIwCgh2q8MiyEKODK7ZbHCoqqSjWGKI1d2kRp+RAWGyHg+DQUEmKliGx4HBKECIMwG61AgssAQPKA19EAxRKz4QCVIhACH5BAUHABAALAAAAAAQABAAAAVjICSOUBCQqHhCgiAOKyqcLVvEZOC2geGiK5NpQBAZCilgAYFMogo/J0lgqEpHgoO2+GIMUL6p4vFojhQNg8rxWLgYBQJCASkwEKLC17hYFJtRIwwBfRAJDk4ObwsidEkrWkkhACH5BAUHABAALAAAAQAQAA8AAAVcICSOUGAGAqmKpjis6vmuqSrUxQyPhDEEtpUOgmgYETCCcrB4OBWwQsGHEhQatVFhB/mNAojFVsQgBhgKpSHRTRxEhGwhoRg0CCXYAkKHHPZCZRAKUERZMAYGMCEAIfkEBQcAEAAsAAABABAADwAABV0gJI4kFJToGAilwKLCST6PUcrB8A70844CXenwILRkIoYyBRk4BQlHo3FIOQmvAEGBMpYSop/IgPBCFpCqIuEsIESHgkgoJxwQAjSzwb1DClwwgQhgAVVMIgVyKCEAIfkECQcAEAAsAAAAABAAEAAABWQgJI5kSQ6NYK7Dw6xr8hCw+ELC85hCIAq3Am0U6JUKjkHJNzIsFAqDqShQHRhY6bKqgvgGCZOSFDhAUiWCYQwJSxGHKqGAE/5EqIHBjOgyRQELCBB7EAQHfySDhGYQdDWGQyUhADs=");
		348	}
		349	</style>
		350
		351	<template>
		352	<!--（ztree－🌲）-->
		353	<div
		354	v-if="treeDataSource.length>0"
		355	class="ztree_content_wrap"
		356	>
		357	<div class="zTreeDemoBackground left">
		358	<ul class="ztree">
		359	<ztree-item
		360	v-for="(m,i) in treeDataSource"
		361	:key="i"
		362	:model.sync="m"
		363	:num.sync="i"
		364	root="0"
		365	:nodes.sync="treeDataSource.length"
		366	:callback="func"
		367	:expandfunc="expand"
		368	:cxtmenufunc="contextmenu"
		369	:trees.sync="treeDataSource"
		370	/>
		371	</ul>
		372	</div>
		373	</div>
		374	</template>
		375
		376	<script>
		377	import Vue from 'vue'
		378	export default {
		379	components: {
		380	// 组件
		381	ztreeItem: {
		382	name: 'ztreeItem',
		383	props: {
		384	model: {
		385	type: Object,
		386	twoWay: true
		387	},
		388	num: {
		389	type: Number,
		390	twoWay: true
		391	},
		392	nodes: {
		393	type: Number,
		394	twoWay: true,
		395	default: 0
		396	},
		397	trees: {
		398	type: Array,
		399	twoWay: true,
		400	default: []
		401	},
		402	root: {
		403	type: String,
		404	twoWay: true
		405	},
		406	callback: {
		407	type: Function
		408	},
		409	expandfunc: {
		410	type: Function
		411	},
		412	cxtmenufunc: {
		413	type: Function
		414	}
		415	},
		416	methods: {
		417	Func(m) {
		418	// 查找点击的子节点
		419	var recurFunc = (data, list) => {
		420	data.forEach(i => {
		421	if (i.id == m.id) {
		422	i.clickNode = true
		423
		424	if (typeof this.callback === 'function') {
		425	this.callback.call(null, m, list, this.trees)
		426	}
		427	} else {
		428	i.clickNode = false
		429	}
		430
		431	if (i.children) {
		432	recurFunc(i.children, i)
		433	}
		434	})
		435	}
		436
		437	recurFunc(this.trees, this.trees)
		438	},
		439	open(m) {
		440	//
		441	m.isExpand = !m.isExpand
		442
		443	if (typeof this.expandfunc === 'function' && m.isExpand) {
		444	if (m.loadNode != 2) {
		445	//
		446	this.expandfunc.call(null, m)
		447	} else {
		448	m.isFolder = !m.isFolder
		449	}
		450	} else {
		451	m.isFolder = !m.isFolder
		452	}
		453	}
		454	},
		455	computed: {
		456	// 给（根和子树）赋值不同的样式
		457	rootClass() {
		458	var strRootClass = ''
		459
		460	// 根判断
		461	if (this.root == '0') {
		462	strRootClass =
		463	this.num == 0 && this.model.children.length == 0
		464	? 'roots_docu'
		465	: this.nodes == 1 \|\|
		466	(this.num == 0 && this.nodes != this.num + 1)
		467	? 'root_'
		468	: this.nodes == this.num + 1
		469	? 'bottom_'
		470	: 'center_'
		471
		472	// 子树判断
		473	} else if (this.root == '1') {
		474	strRootClass =
		475	this.nodes > 1 &&
		476	this.model.children.length > 0 &&
		477	this.nodes != this.num + 1
		478	? 'center_'
		479	: (this.num == 0 && this.nodes > 1) \|\|
		480	this.nodes != this.num + 1
		481	? 'center_docu'
		482	: (this.nodes == 1 && this.num != 0) \|\|
		483	(this.nodes == this.num + 1 && this.model.children.length > 0)
		484	? 'bottom_'
		485	: 'bottom_docu'
		486	}
		487
		488	return strRootClass
		489	},
		490	// 是否有儿子节点
		491	isChildren() {
		492	return this.num + 1 != this.nodes
		493	},
		494	// 展开/收起
		495	prefixClass() {
		496	var returnChar = ''
		497	if (this.rootClass.indexOf('docu') == -1) {
		498	if (this.model.isFolder) {
		499	returnChar = 'open'
		500	} else {
		501	returnChar = 'close'
		502	}
		503	}
		504
		505	if (
		506	this.model.children.length == 0 &&
		507	this.rootClass.indexOf('docu') == -1
		508	) {
		509	returnChar = 'docu'
		510	}
		511
		512	return returnChar
		513	},
		514	liClassVal() {
		515	return 'level' + this.num
		516	},
		517	spanClassVal() {
		518	return (
		519	'button level' +
		520	this.num +
		521	' switch ' +
		522	this.rootClass +
		523	this.prefixClass
		524	)
		525	},
		526	aClassVal() {
		527	return this.model.clickNode
		528	? 'level' + this.num + ' curSelectedNode'
		529	: 'level' + this.num
		530	},
		531	ulClassVal() {
		532	return this.isChildren && this.model.children.length > 0
		533	? 'level' + this.num + ' line'
		534	: 'level' + this.num
		535	}
		536	},
		537	template: `<li :class="liClassVal">
		538	<span :class="spanClassVal" @click='open(model)'></span>
		539	<a :class="aClassVal" @click='Func(model)' @contextmenu.prevent='cxtmenufunc(model)'>
		540	<span :class="{loadSyncNode:model.loadNode==1}" v-if='model.loadNode==1'></span>
		541	<span :class='model.iconClass' v-show='model.iconClass' v-else></span>
		542	<span class="node_name">{{model.name}}</span>
		543	</a>
		544	<ul :class="ulClassVal" v-show='model.isFolder'>
		545	<ztree-item v-for="(item,i) in model.children" :key='i' :callback='callback' :expandfunc='expandfunc' :cxtmenufunc='cxtmenufunc' :model.sync="item" :num.sync='i' root='1' :nodes.sync='model.children.length' :trees.sync='trees'></ztree-item>
		546	</ul>
		547	</li>`
		548	}
		549	},
		550	props: {
		551	// 树数据
		552	list: {
		553	type: Array,
		554	twoWay: true
		555	},
		556	// 点击节点回调
		557	func: {
		558	type: Function,
		559	default: null
		560	},
		561	// 点击展开回调
		562	expand: {
		563	type: Function,
		564	default: null
		565	},
		566	// 右击事件
		567	contextmenu: {
		568	type: Function,
		569	default: function() {
		570	console.log('defalt click contextmenu')
		571	}
		572	},
		573	// 是否展开
		574	isOpen: {
		575	type: Boolean,
		576	twoWay: true,
		577	default: false
		578	}
		579	},
		580	data() {
		581	return {
		582	treeDataSource: []
		583	}
		584	},
		585	watch: {
		586	list: {
		587	handler: function() {
		588	this.initTreeData()
		589	},
		590	deep: true
		591	}
		592	},
		593	mounted() {
		594	Vue.nextTick(() => {
		595	this.initTreeData()
		596	})
		597	},
		598	methods: {
		599	initTreeData() {
		600	var tempList = JSON.parse(JSON.stringify(this.list))
		601
		602	// 递归操作，增加删除一些属性。比如: 展开/收起
		603	var recurrenceFunc = data => {
		604	data.forEach(m => {
		605	if (!m.hasOwnProperty('clickNode')) {
		606	m.clickNode = m.hasOwnProperty('clickNode') ? m.clickNode : false
		607	}
		608
		609	m.children = m.children \|\| []
		610
		611	if (!m.hasOwnProperty('isFolder')) {
		612	m.isFolder = m.hasOwnProperty('open') ? m.open : this.isOpen
		613	}
		614
		615	if (!m.hasOwnProperty('isExpand')) {
		616	m.isExpand = m.hasOwnProperty('open') ? m.open : this.isOpen
		617	}
		618
		619	m.loadNode = 0
		620
		621	recurrenceFunc(m.children)
		622	})
		623	}
		624
		625	recurrenceFunc(tempList)
		626
		627	this.treeDataSource = tempList
		628	}
		629	},
		630	update() {
		631	this.initTreeData()
		632	}
		633	}
		634	</script>
1	<style>	635

src/directive/waves/waves.css

Diff comments Edit View file @0bd8168

1	.waves-ripple {	1	.waves-ripple {
2	position: absolute;	2	position: absolute;
3	border-radius: 100%;	3	border-radius: 100%;
4	/* background-color: rgba(0, 0, 0, 0.15); */	4	/* background-color: rgba(0, 0, 0, 0.15); */
		5	background-color: rgba(235, 45, 12, 0.15);
5	background-color: rgba(235, 45, 12, 0.15);	6	background-clip: padding-box;
6	background-clip: padding-box;	7	pointer-events: none;
7	pointer-events: none;	8	-webkit-user-select: none;
8	-webkit-user-select: none;	9	-moz-user-select: none;
9	-moz-user-select: none;	10	-ms-user-select: none;
10	-ms-user-select: none;	11	user-select: none;
11	user-select: none;	12	-webkit-transform: scale(0);
12	-webkit-transform: scale(0);	13	-ms-transform: scale(0);
13	-ms-transform: scale(0);	14	transform: scale(0);
14	transform: scale(0);	15	opacity: 1;
15	opacity: 1;	16	}
16	}	17
17		18	.waves-ripple.z-active {
18	.waves-ripple.z-active {	19	opacity: 0;
19	opacity: 0;	20	-webkit-transform: scale(2);
20	-webkit-transform: scale(2);	21	-ms-transform: scale(2);
21	-ms-transform: scale(2);	22	transform: scale(2);
22	transform: scale(2);	23	-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
23	-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;	24	transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
24	transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;	25	transition: opacity 1.2s ease-out, transform 0.6s ease-out;
25	transition: opacity 1.2s ease-out, transform 0.6s ease-out;	26	transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
26	transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;	27	}

src/icons/svg/address_card.svg

Diff comments Edit View file @0bd8168

File was created	1	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
	2	<path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-352 96c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H86.4C74 384 64 375.4 64 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2zM512 312c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z"></path>
	3	</svg>

src/icons/svg/gem.svg

Diff comments Edit View file @0bd8168

File was created	1	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
	2	<path d="M464 0H112c-4 0-7.8 2-10 5.4L2 152.6c-2.9 4.4-2.6 10.2.7 14.2l276 340.8c4.8 5.9 13.8 5.9 18.6 0l276-340.8c3.3-4.1 3.6-9.8.7-14.2L474.1 5.4C471.8 2 468.1 0 464 0zm-19.3 48l63.3 96h-68.4l-51.7-96h56.8zm-202.1 0h90.7l51.7 96H191l51.6-96zm-111.3 0h56.8l-51.7 96H68l63.3-96zm-43 144h51.4L208 352 88.3 192zm102.9 0h193.6L288 435.3 191.2 192zM368 352l68.2-160h51.4L368 352z"></path>
	3	</svg>

src/lang/zh.js

Diff comments Edit View file @0bd8168

1	export default {	1	export default {
2	// 添加的新词条------start	2	// 添加的新词条------start
3	prod: {	3	prod: {
4	menu_title: 'products',	4	menu_title: 'products',
		5	sku_modle_pic: '模型图',
		6	sku_buy_pic: '购买效果图',
		7	window_pic: '橱窗图',
		8	detail_pic: '详情图'
5	sku_modle_pic: '模型图',	9	},
6	sku_buy_pic: '购买效果图',	10	order: {
		11	refunding: '退款中',
		12	refunded: '退款完成',
7	window_pic: '橱窗图',	13
		14	pay_pending: '待支付',
		15	pay_finished: '支付完成',
		16
		17	deliver_pre: '准备配送',
		18	deliver_ing: '配送中',
		19	deliver_finished: '物流完成'
8	detail_pic: '详情图'	20	},
9	},	21	users: {
10	order: {	22	table: {
		23	uid: '用户id',
		24	username: '用户名',
		25	password: '密码',
		26	create_at: '注册时间',
		27	nickname: '昵称',
		28	roles: '角色',
		29	openid: 'openid',
		30	son_of_adv: '下线',
		31	status: '当前状态',
		32	level: '等级',
		33	oper: '操作',
		34	souceof: '上线',
		35	revernew: '收益',
		36	buyvalue: '消费价值',
		37	buywill: '消费潜力',
		38	score: '积分',
		39	weixin: '微信',
		40	facebook: 'facebook',
		41	comefromperson: '来自人',
		42	comefromplatform: '来自平台',
		43	benifit: '提成',
		44	coupon: '优惠券',
		45	remark: '备注',
		46	importance: '重要度',
		47	num: '数量'
		48	},
		49	add: '添加',
		50	search: '搜索',
		51	del: '删除',
		52	update: '修改',
		53	edit: '修改',
		54	selectall: '全选'
11	refunding: '退款中',	55	},
12	refunded: '退款完成',	56	site: {
		57	// seo:'seo',
13		58
14	pay_pending: '待支付',	59	},
15	pay_finished: '支付完成',	60	meta: {
16		61	metadefine: '元定义'
17	deliver_pre: '准备配送',	62	},
18	deliver_ing: '配送中',	63	system: {
19	deliver_finished: '物流完成'	64	memu: '系统'
20	},	65	},
21	users: {	66	route: {
22	table: {	67	users: {
23	uid: '用户id',	68	people: '用户',
		69	user: '普通用户',
		70	list: '列表',
		71	shoper: '厂商',
		72	runner: '运营官',
		73	assistant: '操作员',
		74	admin: '超级管理员'
		75	},
24	username: '用户名',	76	shopers: '厂商',
25	password: '密码',	77	prods: {
		78	prod_menu: '产品',
		79	prodlist: '产品列表'
		80	},
26	create_at: '注册时间',	81	orders: '订单',
27	nickname: '昵称',	82	sites: '站点',
28	roles: '角色',	83	metas: {
29	openid: 'openid',	84	metas: '元',
30	son_of_adv: '下线',	85	list: '树'
31	status: '当前状态',	86	},
32	level: '等级',	87	systems: {
33	oper: '操作',	88	systems: '系统设置',
34	souceof: '上线',	89	sites: '站点设置',
35	revernew: '收益',	90	money: '货币设置',
36	buyvalue: '消费价值',	91	industry: '行业设置',
37	buywill: '消费潜力',	92	template: '模版设置'
38	score: '积分',	93	},
39	weixin: '微信',	94	// 添加的新词条------end
40	facebook: 'facebook',	95	dashboard: '首页',
41	comefromperson: '来自人',	96	documentation: '文档',
42	comefromplatform: '来自平台',	97	guide: '引导页',
43	benifit: '提成',	98	permission: '权限测试页',
44	coupon: '优惠券',	99	rolePermission: '角色权限',
45	remark: '备注',	100	pagePermission: '页面权限',
46	importance: '重要度',	101	directivePermission: '指令权限',
47	num: '数量'	102	icons: '图标',
48	},	103	components: '组件',
49	add: '添加',	104	tinymce: '富文本编辑器',
50	search: '搜索',	105	markdown: 'Markdown',
51	del: '删除',	106	jsonEditor: 'JSON 编辑器',
52	update: '修改',	107	dndList: '列表拖拽',
53	edit: '修改',	108	splitPane: 'Splitpane',
54	selectall: '全选'	109	avatarUpload: '头像上传',
55	},	110	dropzone: 'Dropzone',
56	site: {	111	sticky: 'Sticky',
57	// seo:'seo',	112	countTo: 'Count To',
58		113	componentMixin: '小组件',
59	},	114	backToTop: '返回顶部',
60	meta: {	115	dragDialog: '拖拽 Dialog',
61	metadefine: '元定义'	116	dragSelect: '拖拽 Select',
62	},	117	dragKanban: '可拖拽看板',
63	system: {	118	charts: '图表',
64	memu: '系统'	119	keyboardChart: '键盘图表',
65	},	120	lineChart: '折线图',
66	route: {	121	mixChart: '混合图表',
67	users: {	122	example: '综合实例',
68	people: '用户',	123	nested: '路由嵌套',
69	user: '普通用户',	124	menu1: '菜单1',
70	list: '列表',	125	'menu1-1': '菜单 1-1',
71	shoper: '厂商',	126	'menu1-2': '菜单 1-2',
72	runner: '运营官',	127	'menu1-2-1': '菜单 1-2-1',
73	assistant: '操作员',	128	'menu1-2-2': '菜单 1-2-2',
74	admin: '超级管理员'	129	'menu1-3': '菜单 1-3',
75	},	130	menu2: '菜单 2',
76	shopers: '厂商',	131	Table: 'Table',
77	prods: {	132	dynamicTable: '动态 Table',
78	prod_menu: '产品',	133	dragTable: '拖拽 Table',
79	prodlist: '产品列表'	134	inlineEditTable: 'Table 内编辑',
80	},	135	complexTable: '综合 Table',
81	orders: '订单',	136	tab: 'Tab',
82	sites: '站点',	137	form: '表单',
83	metas: {	138	createArticle: '创建文章',
84	metas: '元',	139	editArticle: '编辑文章',
85	list: '树'	140	articleList: '文章列表',
86	},	141	errorPages: '错误页面',
87	systems: {	142	page401: '401',
88	systems: '系统设置',	143	page404: '404',
89	sites: '站点设置',	144	errorLog: '错误日志',
90	money: '货币设置',	145	excel: 'Excel',
91	industry: '行业设置',	146	exportExcel: '导出 Excel',
92	template: '模版设置'	147	selectExcel: '导出已选择项',
93	},	148	mergeHeader: '导出多级表头',
94	// 添加的新词条------end	149	uploadExcel: '上传 Excel',
95	dashboard: '首页',	150	zip: 'Zip',
96	documentation: '文档',	151	pdf: 'PDF',
97	guide: '引导页',	152	exportZip: 'Export Zip',
98	permission: '权限测试页',	153	theme: '换肤',
99	rolePermission: '角色权限',	154	clipboardDemo: 'Clipboard',
100	pagePermission: '页面权限',	155	i18n: '国际化',
101	directivePermission: '指令权限',	156	externalLink: '外链',
102	icons: '图标',	157	profile: '个人中心'
103	components: '组件',	158	},
104	tinymce: '富文本编辑器',	159	navbar: {
105	markdown: 'Markdown',	160	dashboard: '首页',
106	jsonEditor: 'JSON 编辑器',	161	github: '项目地址',
107	dndList: '列表拖拽',	162	logOut: '退出登录',
108	splitPane: 'Splitpane',	163	profile: '个人中心',
109	avatarUpload: '头像上传',	164	theme: '换肤',
110	dropzone: 'Dropzone',	165	size: '布局大小'
111	sticky: 'Sticky',	166	},
112	countTo: 'Count To',	167	login: {
113	componentMixin: '小组件',	168	runner: '运营官',
114	backToTop: '返回顶部',	169	shoper: '商家',
115	dragDialog: '拖拽 Dialog',	170	assistant: '操作员',
116	dragSelect: '拖拽 Select',	171	signup: '注册',
117	dragKanban: '可拖拽看板',	172	forgetpassword: '忘记密码',
118	charts: '图表',	173	rememberpassword: 'remember password',
119	keyboardChart: '键盘图表',	174
120	lineChart: '折线图',	175	title: '鱼皮出海--让我们荡起双浆',
121	mixChart: '混合图表',	176	logIn: '登录',
122	example: '综合实例',	177	username: '账号',
123	nested: '路由嵌套',	178	password: '密码',
124	menu1: '菜单1',	179	any: '随便填',
125	'menu1-1': '菜单 1-1',	180	thirdparty: '第三方登录',
126	'menu1-2': '菜单 1-2',	181	thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
127	'menu1-2-1': '菜单 1-2-1',	182	},
128	'menu1-2-2': '菜单 1-2-2',	183	documentation: {
129	'menu1-3': '菜单 1-3',	184	documentation: '文档',
130	menu2: '菜单 2',	185	github: 'Github 地址'
131	Table: 'Table',	186	},
132	dynamicTable: '动态 Table',	187	permission: {
133	dragTable: '拖拽 Table',	188	addRole: '新增角色',
134	inlineEditTable: 'Table 内编辑',	189	editPermission: '编辑权限',
135	complexTable: '综合 Table',	190	roles: '你的权限',
136	tab: 'Tab',	191	switchRoles: '切换权限',
137	form: '表单',	192	tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 el-tab 或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',
138	createArticle: '创建文章',	193	delete: '删除',
139	editArticle: '编辑文章',	194	confirm: '确定',
140	articleList: '文章列表',	195	cancel: '取消'
141	errorPages: '错误页面',	196	},
142	page401: '401',	197	guide: {
143	page404: '404',	198	description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
144	errorLog: '错误日志',	199	button: '打开引导'
145	excel: 'Excel',	200	},
146	exportExcel: '导出 Excel',	201	components: {
147	selectExcel: '导出已选择项',	202	documentation: '文档',
148	mergeHeader: '导出多级表头',	203	tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
149	uploadExcel: '上传 Excel',	204	dropzoneTips: '由于我司业务有特殊需求，而且要传七牛所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',
150	zip: 'Zip',	205	stickyTips: '当页面滚动到预设的位置会吸附在顶部',
151	pdf: 'PDF',	206	backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
152	exportZip: 'Export Zip',	207	backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置如需文字提示，可在外部使用Element的el-tooltip元素',
153	theme: '换肤',	208	imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'
154	clipboardDemo: 'Clipboard',	209	},
155	i18n: '国际化',	210	table: {
156	externalLink: '外链',	211	dynamicTips1: '固定表头, 按照表头顺序排序',
157	profile: '个人中心'	212	dynamicTips2: '不固定表头, 按照点击顺序排序',
158	},	213	dragTips1: '默认顺序',
159	navbar: {	214	dragTips2: '拖拽后顺序',
160	dashboard: '首页',	215	title: '标题',
161	github: '项目地址',	216	importance: '重要性',
162	logOut: '退出登录',	217	type: '类型',
163	profile: '个人中心',	218	remark: '点评',
164	theme: '换肤',	219	search: '搜索',
165	size: '布局大小'	220	add: '添加',
166	},	221	export: '导出',
167	login: {	222	reviewer: '审核人',
168	runner: '运营官',	223	id: '序号',
169	shoper: '商家',	224	date: '时间',
170	assistant: '操作员',	225	author: '作者',
171	signup: '注册',	226	readings: '阅读数',
172	forgetpassword: '忘记密码',	227	status: '状态',
173	rememberpassword: 'remember password',	228	actions: '操作',
174		229	edit: '编辑',
175	title: '鱼皮出海--让我们荡起双浆',	230	publish: '发布',
176	logIn: '登录',	231	draft: '草稿',
177	username: '账号',	232	delete: '删除',
178	password: '密码',	233	cancel: '取消',
179	any: '随便填',	234	confirm: '确定'
180	thirdparty: '第三方登录',	235	},
181	thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'	236	example: {
182	},	237	warning: '创建和编辑页面是不能被 keep-alive 缓存的，因为keep-alive 的 include 目前不支持根据路由来缓存，所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果，可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include，直接缓存所有页面。详情见'
183	documentation: {	238	},
184	documentation: '文档',	239	errorLog: {
185	github: 'Github 地址'	240	tips: '请点击右上角bug小图标',
186	},	241	description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',
187	permission: {	242	documentation: '文档介绍'
188	addRole: '新增角色',	243	},
189	editPermission: '编辑权限',	244	excel: {
190	roles: '你的权限',	245	export: '导出',
191	switchRoles: '切换权限',	246	selectedExport: '导出已选择项',
192	tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 el-tab 或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',	247	placeholder: '请输入文件名(默认excel-list)'
193	delete: '删除',	248	},
194	confirm: '确定',	249	zip: {
195	cancel: '取消'	250	export: '导出',
196	},	251	placeholder: '请输入文件名(默认file)'
197	guide: {	252	},
198	description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',	253	pdf: {
199	button: '打开引导'	254	tips: '这里使用 window.print() 来实现下载pdf的功能'
200	},	255	},
201	components: {	256	theme: {
202	documentation: '文档',	257	change: '换肤',
203	tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',	258	documentation: '换肤文档',
204	dropzoneTips: '由于我司业务有特殊需求，而且要传七牛所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',	259	tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。'
205	stickyTips: '当页面滚动到预设的位置会吸附在顶部',	260	},
206	backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',	261	tagsView: {
207	backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置如需文字提示，可在外部使用Element的el-tooltip元素',	262	refresh: '刷新',
208	imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'	263	close: '关闭',
209	},	264	closeOthers: '关闭其它',
210	table: {	265	closeAll: '关闭所有'
211	dynamicTips1: '固定表头, 按照表头顺序排序',	266	},
212	dynamicTips2: '不固定表头, 按照点击顺序排序',	267	settings: {
213	dragTips1: '默认顺序',	268	title: '系统布局配置',
214	dragTips2: '拖拽后顺序',	269	theme: '主题色',
215	title: '标题',	270	tagsView: '开启 Tags-View',
216	importance: '重要性',	271	fixedHeader: '固定 Header',
217	type: '类型',	272	sidebarLogo: '侧边栏 Logo'
218	remark: '点评',	273	}
219	search: '搜索',	274	}
220	add: '添加',	275

src/layout/components/Settings/index.vue

Diff comments Edit View file @0bd8168

1	<template>	1	<template>
2	<div class="drawer-container">	2	<div class="drawer-container">
3	<div>	3	<div>
4	<h3 class="drawer-title">{{ $t('settings.title') }}</h3>	4	<h3 class="drawer-title">{{ $t('settings.title') }}</h3>
5		5
6	<div class="drawer-item">	6	<div class="drawer-item">
7	<span>{{ $t('settings.theme') }}</span>	7	<span>{{ $t('settings.theme') }}</span>
8	<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />	8	<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
9	</div>	9	</div>
10		10
11	<div class="drawer-item">	11	<div class="drawer-item">
12	<span>{{ $t('settings.tagsView') }}</span>	12	<span>{{ $t('settings.tagsView') }}</span>
13	<el-switch v-model="tagsView" class="drawer-switch" />	13	<el-switch v-model="tagsView" class="drawer-switch" />
14	</div>	14	</div>
15		15
16	<div class="drawer-item">	16	<div class="drawer-item">
17	<span>{{ $t('settings.fixedHeader') }}</span>	17	<span>{{ $t('settings.fixedHeader') }}</span>
18	<el-switch v-model="fixedHeader" class="drawer-switch" />	18	<el-switch v-model="fixedHeader" class="drawer-switch" />
19	</div>	19	</div>
20		20
21	<div class="drawer-item">	21	<div class="drawer-item">
22	<span>{{ $t('settings.sidebarLogo') }}</span>	22	<span>{{ $t('settings.sidebarLogo') }}</span>
23	<el-switch v-model="sidebarLogo" class="drawer-switch" />	23	<el-switch v-model="sidebarLogo" class="drawer-switch" />
24	</div>	24	</div>
25		25
26	<a v-if="isShowJob" href="https://glass.xiuyetang.com/" target="_blank" class="job-link">	26	<a v-if="isShowJob" href="https://glass.xiuyetang.com/" target="_blank" class="job-link">
27	<el-alert	27	<el-alert
28	title="让我们荡起双浆极为宏大，而且极为可行，我们要努力写代码，尽快打通任督二脉，要做好很有钱的思想准备"	28	title="让我们荡起双浆极为宏大，而且极为可行，我们要努力写代码，尽快打通任督二脉，要做好很有钱的思想准备"
29	type="success"	29	type="success"
30	:closable="true"	30	:closable="true"
31	/>	31	/>
32	</a>	32	</a>
33		33
34	<div v-if="lang === 'zh'" class="drawer-item">	34	<div v-if="lang === 'zh'" class="drawer-item">
35	<span>菜单支持拼音搜索</span>	35	<span>菜单支持拼音搜索</span>
36	<el-switch v-model="supportPinyinSearch" class="drawer-switch" />	36	<el-switch v-model="supportPinyinSearch" class="drawer-switch" />
37	</div>	37	</div>
38		38
39	</div>	39	</div>
40	</div>	40	</div>
41	</template>	41	</template>
42		42
43	<script>	43	<script>
44	import ThemePicker from '@/components/ThemePicker'	44	import ThemePicker from '@/components/ThemePicker'
45		45
46	export default {	46	export default {
47	components: { ThemePicker },	47	components: { ThemePicker },
48	data() {	48	data() {
49	return {}	49	return {}
50	},	50	},
51	computed: {	51	computed: {
52	isShowJob() {	52	isShowJob() {
53	return this.$store.getters.language === 'zh'	53	return this.$store.getters.language === 'zh'
54	},	54	},
55	fixedHeader: {	55	fixedHeader: {
56	get() {	56	get() {
57	return this.$store.state.settings.fixedHeader	57	return this.$store.state.settings.fixedHeader
58	},	58	},
59	set(val) {	59	set(val) {
60	this.$store.dispatch('settings/changeSetting', {	60	this.$store.dispatch('settings/changeSetting', {
61	key: 'fixedHeader',	61	key: 'fixedHeader',
62	value: val	62	value: val
63	})	63	})
64	}	64	}
65	},	65	},
66	tagsView: {	66	tagsView: {
67	get() {	67	get() {
68	return this.$store.state.settings.tagsView	68	return this.$store.state.settings.tagsView
69	},	69	},
70	set(val) {	70	set(val) {
71	this.$store.dispatch('settings/changeSetting', {	71	this.$store.dispatch('settings/changeSetting', {
72	key: 'tagsView',	72	key: 'tagsView',
73	value: val	73	value: val
74	})	74	})
75	}	75	}
76	},	76	},
77	sidebarLogo: {	77	sidebarLogo: {
78	get() {	78	get() {
79	return this.$store.state.settings.sidebarLogo	79	return this.$store.state.settings.sidebarLogo
80	},	80	},
81	set(val) {	81	set(val) {
82	this.$store.dispatch('settings/changeSetting', {	82	this.$store.dispatch('settings/changeSetting', {
83	key: 'sidebarLogo',	83	key: 'sidebarLogo',
84	value: val	84	value: val
85	})	85	})
86	}	86	}
87	},	87	},
88	supportPinyinSearch: {	88	supportPinyinSearch: {
89	get() {	89	get() {
90	return this.$store.state.settings.supportPinyinSearch	90	return this.$store.state.settings.supportPinyinSearch
91	},	91	},
92	set(val) {	92	set(val) {
93	this.$store.dispatch('settings/changeSetting', {	93	this.$store.dispatch('settings/changeSetting', {
94	key: 'supportPinyinSearch',	94	key: 'supportPinyinSearch',
95	value: val	95	value: val
96	})	96	})
97	}	97	}
98	},	98	},
99	lang() {	99	lang() {
100	return this.$store.getters.language	100	return this.$store.getters.language
101	}	101	}
102	},	102	},
103	methods: {	103	methods: {
104	themeChange(val) {	104	themeChange(val) {
105	this.$store.dispatch('settings/changeSetting', {	105	this.$store.dispatch('settings/changeSetting', {
106	key: 'theme',	106	key: 'theme',
107	value: val	107	value: val
108	})	108	})
109	}	109	}
110	}	110	}
111	}	111	}
112	</script>	112	</script>
113		113
114	<style lang="scss" scoped>	114	<style lang="scss" scoped>
115	.drawer-container {	115	.drawer-container {
116	padding: 24px;	116	padding: 24px;
117	font-size: 14px;	117	font-size: 14px;
118	line-height: 1.5;	118	line-height: 1.5;
119	word-wrap: break-word;	119	word-wrap: break-word;
120		120
121	.drawer-title {	121	.drawer-title {
122	margin-bottom: 12px;	122	margin-bottom: 12px;
123	color: rgba(0, 0, 0, .85);	123	color: rgba(0, 0, 0, .85);
124	font-size: 14px;	124	font-size: 14px;
125	line-height: 22px;	125	line-height: 22px;
126	}	126	}
127		127
128	.drawer-item {	128	.drawer-item {
129	color: rgba(0, 0, 0, .65);	129	color: rgba(0, 0, 0, .65);
130	font-size: 14px;	130	font-size: 14px;
131	padding: 12px 0;	131	padding: 12px 0;
132	}	132	}
133		133
134	.drawer-switch {	134	.drawer-switch {
135	float: right	135	float: right
136	}	136	}
137		137
138	.job-link{	138	.job-link{
139	display: block;	139	display: block;
140	position: absolute;	140	position: absolute;
141	width: 100%;	141	width: 100%;
142	left: 0;	142	left: 0;
143	bottom: 0;	143	bottom: 0;
144	}	144	}
145	}	145	}
146	</style>	146	</style>
147		147

src/layout/components/Sidebar/Logo.vue

Diff comments Edit View file @0bd8168

1	<template>	1	<template>
2	<div class="sidebar-logo-container" :class="{'collapse':collapse}">	2	<div class="sidebar-logo-container" :class="{'collapse':collapse}">
3	<transition name="sidebarLogoFade" style="background:#FFF;">	3	<transition name="sidebarLogoFade" style="background:#FFF;">
4	<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">	4	<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
5	<img v-if="logo" :src="logo" class="sidebar-logo">	5	<img v-if="logo" :src="logo" class="sidebar-logo">
6	<h1 v-else class="sidebar-title">{{ title }} </h1>	6	<h1 v-else class="sidebar-title">{{ title }} </h1>
7	</router-link>	7	</router-link>
8	<router-link v-else key="expand" class="sidebar-logo-link" to="/">	8	<router-link v-else key="expand" class="sidebar-logo-link" to="/">
9	<img v-if="logo" :src="logo" class="sidebar-logo">	9	<img v-if="logo" :src="logo" class="sidebar-logo">
10	<h1 class="sidebar-title">{{ title }} </h1>	10	<h1 class="sidebar-title">{{ title }} </h1>
11	</router-link>	11	</router-link>
12	</transition>	12	</transition>
13	</div>	13	</div>
14	</template>	14	</template>
15		15
16	<script>	16	<script>
		17	import logoPath from '@/assets/img/yp_logo.jpeg'
17	import logoPath from '@/assets/img/yp_logo.jpeg'	18	export default {
18	export default {	19	name: 'SidebarLogo',
19	name: 'SidebarLogo',	20	props: {
20	props: {	21	collapse: {
21	collapse: {	22	type: Boolean,
22	type: Boolean,	23	required: true
23	required: true	24	}
24	}	25	},
25	},	26	data() {
26	data() {	27	return {
27	return {	28	title: '让我们荡起双浆',
28	title: '让我们荡起双浆',	29	logo: logoPath
29	logo: logoPath	30	}
30	}	31	}
31	}	32	}
32	}	33	</script>
33	</script>	34
34		35	<style lang="scss" scoped>
35	<style lang="scss" scoped>	36	.sidebarLogoFade-enter-active {
36	.sidebarLogoFade-enter-active {	37	transition: opacity 1.5s;
37	transition: opacity 1.5s;	38	}
38	}	39
39		40	.sidebarLogoFade-enter,
40	.sidebarLogoFade-enter,	41	.sidebarLogoFade-leave-to {
41	.sidebarLogoFade-leave-to {	42	opacity: 0;
42	opacity: 0;	43	}
43	}	44
44		45	.sidebar-logo-container {
45	.sidebar-logo-container {	46	position: relative;
46	position: relative;	47	width: 100%;
47	width: 100%;	48	height: 50px;
48	height: 50px;	49	line-height: 50px;
49	line-height: 50px;	50	background: #2b2f3a;
50	background: #2b2f3a;	51	text-align: center;
51	text-align: center;	52	overflow: hidden;
52	overflow: hidden;	53
53		54	& .sidebar-logo-link {
54	& .sidebar-logo-link {	55	height: 100%;
55	height: 100%;	56	width: 100%;
56	width: 100%;	57
57		58	& .sidebar-logo {
58	& .sidebar-logo {	59	width: 32px;
59	width: 32px;	60	height: 32px;
60	height: 32px;	61	vertical-align: middle;
61	vertical-align: middle;	62	margin-right: 12px;
62	margin-right: 12px;	63	}
63	}	64
64		65	& .sidebar-title {
65	& .sidebar-title {	66	display: inline-block;
66	display: inline-block;	67	margin: 0;
67	margin: 0;	68	color: #fff;
68	color: #fff;	69	font-weight: 600;
69	font-weight: 600;	70	line-height: 50px;
70	line-height: 50px;	71	font-size: 14px;
71	font-size: 14px;	72	font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
72	font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;	73	vertical-align: middle;
73	vertical-align: middle;	74	}
74	}	75	}
75	}	76
76		77	&.collapse {
77	&.collapse {	78	.sidebar-logo {
78	.sidebar-logo {	79	margin-right: 0px;
79	margin-right: 0px;	80	}
80	}	81	}
81	}	82	}
82	}	83	</style>
83	</style>	84

src/router/index.js

Diff comments Edit View file @0bd8168

1	import Vue from 'vue'	1	import Vue from 'vue'
2	import Router from 'vue-router'	2	import Router from 'vue-router'
3		3
4	Vue.use(Router)	4	Vue.use(Router)
5		5
6	/* Layout */	6	/* Layout */
7	import Layout from '@/layout'	7	import Layout from '@/layout'
8		8
9	/* Router Modules */	9	/* Router Modules */
10	import componentsRouter from './modules/components'	10	import componentsRouter from './modules/components'
11	// import chartsRouter from './modules/charts'	11	// import chartsRouter from './modules/charts'
12	// import tableRouter from './modules/table'	12	// import tableRouter from './modules/table'
13	// import nestedRouter from './modules/nested'	13	// import nestedRouter from './modules/nested'
14	import userRouter from './modules/user'	14	import userRouter from './modules/user'
15	import systemRouter from './modules/system'	15	import systemRouter from './modules/system'
16	import prodRouter from './modules/prod'	16	import prodRouter from './modules/prod'
		17	import orderRouter from './modules/order'
17	import orderRouter from './modules/order'	18	import metaRouter from './modules/meta'
		19	import sitesRouter from './modules/sites'
18	import metaRouter from './modules/meta'	20
19	import sitesRouter from './modules/sites'	21	/**
20		22	* Note: sub-menu only appear when route children.length >= 1
21	/**	23	* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
22	* Note: sub-menu only appear when route children.length >= 1	24	*
23	* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html	25	* hidden: true if set true, item will not show in the sidebar(default is false)
24	*	26	* alwaysShow: true if set true, will always show the root menu
25	* hidden: true if set true, item will not show in the sidebar(default is false)	27	* if not set alwaysShow, when item has more than one children route,
26	* alwaysShow: true if set true, will always show the root menu	28	* it will becomes nested mode, otherwise not show the root menu
27	* if not set alwaysShow, when item has more than one children route,	29	* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
28	* it will becomes nested mode, otherwise not show the root menu	30	* name:'router-name' the name is used by <keep-alive> (must set!!!)
29	* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb	31	* meta : {
30	* name:'router-name' the name is used by <keep-alive> (must set!!!)	32	roles: ['admin','assistant','runner', 'shoper'] control the page roles (you can set multiple roles)
31	* meta : {	33	title: 'title' the name show in sidebar and breadcrumb (recommend set)
32	roles: ['admin','assistant','runner', 'shoper'] control the page roles (you can set multiple roles)	34	icon: 'svg-name' the icon show in the sidebar
33	title: 'title' the name show in sidebar and breadcrumb (recommend set)	35	noCache: true if set true, the page will no be cached(default is false)
34	icon: 'svg-name' the icon show in the sidebar	36	affix: true if set true, the tag will affix in the tags-view
35	noCache: true if set true, the page will no be cached(default is false)	37	breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
36	affix: true if set true, the tag will affix in the tags-view	38	activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
37	breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)	39	}
38	activeMenu: '/example/list' if set path, the sidebar will highlight the path you set	40	*/
39	}	41
40	*/	42	/**
41		43	* constantRoutes
42	/**	44	* a base page that does not have permission requirements
43	* constantRoutes	45	* all roles can be accessed
44	* a base page that does not have permission requirements	46	*/
45	* all roles can be accessed	47	export const constantRoutes = [{
46	*/	48	path: '/redirect',
47	export const constantRoutes = [{	49	component: Layout,
48	path: '/redirect',	50	hidden: true,
49	component: Layout,	51	children: [{
50	hidden: true,	52	path: '/redirect/:path*',
51	children: [{	53	component: () => import('@/views/redirect/index')
52	path: '/redirect/:path*',	54	}]
53	component: () => import('@/views/redirect/index')	55	},
54	}]	56	{
55	},	57	path: '/login',
56	{	58	component: () => import('@/views/login/index'),
57	path: '/login',	59	hidden: true
58	component: () => import('@/views/login/index'),	60	},
59	hidden: true	61	{
60	},	62	path: '/auth-redirect',
61	{	63	component: () => import('@/views/login/auth-redirect'),
62	path: '/auth-redirect',	64	hidden: true
63	component: () => import('@/views/login/auth-redirect'),	65	},
64	hidden: true	66	{
65	},	67	path: '/404',
66	{	68	component: () => import('@/views/error-page/404'),
67	path: '/404',	69	hidden: true
68	component: () => import('@/views/error-page/404'),	70	},
69	hidden: true	71	{
70	},	72	path: '/500',
71	{	73	component: () => import('@/views/error-page/500'),
72	path: '/500',	74	hidden: true
73	component: () => import('@/views/error-page/500'),	75	},
74	hidden: true	76	{
75	},	77	path: '/401',
76	{	78	component: () => import('@/views/error-page/401'),
77	path: '/401',	79	hidden: true
78	component: () => import('@/views/error-page/401'),	80	},
79	hidden: true	81	{
80	},	82	path: '/',
81	{	83	component: Layout,
82	path: '/',	84	redirect: '/dashboard',
83	component: Layout,	85	children: [{
84	redirect: '/dashboard',	86	path: 'dashboard',
85	children: [{	87	component: () => import('@/views/dashboard/index'),
86	path: 'dashboard',	88	name: 'Dashboard',
87	component: () => import('@/views/dashboard/index'),	89	meta: {
88	name: 'Dashboard',	90	title: 'dashboard',
89	meta: {	91	icon: 'dashboard',
90	title: 'dashboard',	92	affix: true
91	icon: 'dashboard',	93	}
92	affix: true	94	}]
93	}	95	},
94	}]	96	// {
95	},	97	// path: '/documentation',
96	// {	98	// component: Layout,
97	// path: '/documentation',	99	// children: [
98	// component: Layout,	100	// {
99	// children: [	101	// path: 'index',
100	// {	102	// component: () => import('@/views/documentation/index'),
101	// path: 'index',	103	// name: 'Documentation',
102	// component: () => import('@/views/documentation/index'),	104	// meta: { title: 'documentation', icon: 'documentation', affix: true }
103	// name: 'Documentation',	105	// }
104	// meta: { title: 'documentation', icon: 'documentation', affix: true }	106	// ]
105	// }	107	// },
106	// ]	108	{
107	// },	109	path: '/guide',
108	{	110	component: Layout,
109	path: '/guide',	111	redirect: '/guide/index',
110	component: Layout,	112	children: [{
111	redirect: '/guide/index',	113	path: 'index',
112	children: [{	114	component: () => import('@/views/guide/index'),
113	path: 'index',	115	name: 'Guide',
114	component: () => import('@/views/guide/index'),	116	meta: {
115	name: 'Guide',	117	title: 'guide',
116	meta: {	118	icon: 'guide',
117	title: 'guide',	119	noCache: true
118	icon: 'guide',	120	}
119	noCache: true	121	}]
		122	}
120	}	123	// {
121	}]	124	// path: '/profile',
122	}	125	// component: Layout,
123	// {	126	// redirect: '/profile/index',
124	// path: '/profile',	127	// hidden: true,
125	// component: Layout,	128	// children: [
126	// redirect: '/profile/index',	129	// {
127	// hidden: true,	130	// path: 'index',
128	// children: [	131	// component: () => import('@/views/profile/index'),
129	// {	132	// name: 'Profile',
130	// path: 'index',	133	// meta: { title: 'profile', icon: 'user', noCache: true }
131	// component: () => import('@/views/profile/index'),	134	// }
132	// name: 'Profile',	135	// ]
133	// meta: { title: 'profile', icon: 'user', noCache: true }	136	// }
134	// }	137	]
135	// ]	138
136	// }	139	/**
137	]	140	* asyncRoutes
138		141	* the routes that need to be dynamically loaded based on user roles
139	/**	142	*/
140	* asyncRoutes	143	export const asyncRoutes = [
141	* the routes that need to be dynamically loaded based on user roles	144	// {
142	*/	145	// path: '/permission',
143	export const asyncRoutes = [	146	// component: Layout,
144	// {	147	// redirect: '/permission/page',
145	// path: '/permission',	148	// alwaysShow: true, // will always show the root menu
146	// component: Layout,	149	// name: 'Permission',
147	// redirect: '/permission/page',	150	// meta: {
148	// alwaysShow: true, // will always show the root menu	151	// title: 'permission',
149	// name: 'Permission',	152	// icon: 'lock',
150	// meta: {	153	// roles: ['admin', 'assistant'] // you can set roles in root nav
151	// title: 'permission',	154	// },
152	// icon: 'lock',	155	// children: [
153	// roles: ['admin', 'assistant'] // you can set roles in root nav	156	// {
154	// },	157	// path: 'page',
155	// children: [	158	// component: () => import('@/views/permission/page'),
156	// {	159	// name: 'PagePermission',
157	// path: 'page',	160	// meta: {
158	// component: () => import('@/views/permission/page'),	161	// title: 'pagePermission',
159	// name: 'PagePermission',	162	// roles: ['admin','assistant'] // or you can only set roles in sub nav
160	// meta: {	163	// }
161	// title: 'pagePermission',	164	// },
162	// roles: ['admin','assistant'] // or you can only set roles in sub nav	165	// {
163	// }	166	// path: 'directive',
164	// },	167	// component: () => import('@/views/permission/directive'),
165	// {	168	// name: 'DirectivePermission',
166	// path: 'directive',	169	// meta: {
167	// component: () => import('@/views/permission/directive'),	170	// title: 'directivePermission',
168	// name: 'DirectivePermission',	171	// roles: ['admin', 'shoper']
169	// meta: {	172	// // if do not set roles, means: this page does not require permission
170	// title: 'directivePermission',	173	// }
171	// roles: ['admin', 'shoper']	174	// },
172	// // if do not set roles, means: this page does not require permission	175	// {
173	// }	176	// path: 'role',
174	// },	177	// component: () => import('@/views/permission/role'),
175	// {	178	// name: 'RolePermission',
176	// path: 'role',	179	// meta: {
177	// component: () => import('@/views/permission/role'),	180	// title: 'rolePermission',
178	// name: 'RolePermission',	181	// roles: ['admin', 'runner']
179	// meta: {	182	// }
180	// title: 'rolePermission',	183	// }
181	// roles: ['admin', 'runner']	184	// ]
182	// }	185	// },
183	// }	186	// tableRouter,
184	// ]	187	metaRouter,
185	// },	188	userRouter,
186	// tableRouter,	189	prodRouter,
		190	orderRouter,
		191	sitesRouter,
		192	systemRouter,
		193	componentsRouter,
		194	// chartsRouter,
		195	// nestedRouter,
		196	// tableRouter,
187	metaRouter,	197	{
188	userRouter,	198	path: '/icon',
189	prodRouter,	199	component: Layout,
190	orderRouter,	200	children: [{
191	sitesRouter,	201	path: 'index',
192	systemRouter,	202	component: () => import('@/views/icons/index'),
193	componentsRouter,	203	name: 'Icons',
194	// chartsRouter,	204	meta: {
195	// nestedRouter,	205	title: 'icons',
196	// tableRouter,	206	icon: 'icon',
197	{	207	noCache: true
198	path: '/icon',
199	component: Layout,
200	children: [{
201	path: 'index',
202	component: () => import('@/views/icons/index'),
203	name: 'Icons',
204	meta: {
205	title: 'icons',
206	icon: 'icon',
207	noCache: true
208	}
209	}]
210	},
211	/ when your routing map is too long, you can split it into small modules /
212
213	{
214	path: '/example',
215	component: Layout,
216	redirect: '/example/list',
217	name: 'Example',	208	}
218	meta: {	209	}]
219	title: 'example',	210	},
		211	/ when your routing map is too long, you can split it into small modules /
		212
220	icon: 'example'	213	{
221	},	214	path: '/example',
222	children: [{	215	component: Layout,
223	path: 'create',	216	redirect: '/example/list',
224	component: () => import('@/views/example/create'),	217	name: 'Example',
225	name: 'CreateArticle',
226	meta: {	218	meta: {
227	title: 'createArticle',	219	title: 'example',
228	icon: 'edit'	220	icon: 'example'
229	}	221	},
		222	children: [{
		223	path: 'create',
		224	component: () => import('@/views/example/create'),
		225	name: 'CreateArticle',
		226	meta: {
		227	title: 'createArticle',
		228	icon: 'edit'
		229	}
230	},	230	},
231	{	231	{
232	path: 'edit/:id(\\d+)',	232	path: 'edit/:id(\\d+)',
233	component: () => import('@/views/example/edit'),	233	component: () => import('@/views/example/edit'),
234	name: 'EditArticle',	234	name: 'EditArticle',
235	meta: {	235	meta: {
236	title: 'editArticle',	236	title: 'editArticle',
237	noCache: true,	237	noCache: true,
238	activeMenu: '/example/list'	238	activeMenu: '/example/list'
239	},
240	hidden: true	239	},
241	},	240	hidden: true
242	{	241	},
243	path: 'list',	242	{
244	component: () => import('@/views/example/list'),	243	path: 'list',
245	name: 'ArticleList',	244	component: () => import('@/views/example/list'),
246	meta: {	245	name: 'ArticleList',
247	title: 'articleList',	246	meta: {
248	icon: 'list'	247	title: 'articleList',
249	}	248	icon: 'list'
250	}	249	}
		250	}
251	]	251	]
252	},	252	},
253		253
254	// {	254	// {
255	// path: '/tab',
256	// component: Layout,
257	// children: [
258	// {
259	// path: 'index',
260	// component: () => import('@/views/tab/index'),
261	// name: 'Tab',
262	// meta: { title: 'tab', icon: 'tab' }
263	// }
264	// ]
265	// },
266
267	// {
268	// path: '/error',
269	// component: Layout,
270	// redirect: 'noRedirect',
271	// name: 'ErrorPages',
272	// meta: {
273	// title: 'errorPages',
274	// icon: '404'
275	// },
276	// children: [
277	// {
278	// path: '401',
279	// component: () => import('@/views/error-page/401'),
280	// name: 'Page401',
281	// meta: { title: 'page401', noCache: true }
282	// },
283	// {
284	// path: '404',
285	// component: () => import('@/views/error-page/404'),
286	// name: 'Page404',
287	// meta: { title: 'page404', noCache: true }
288	// }
289	// ]
290	// },
291
292	// {
293	// path: '/error-log',
294	// component: Layout,
295	// children: [
296	// {
297	// path: 'log',
298	// component: () => import('@/views/error-log/index'),
299	// name: 'ErrorLog',
300	// meta: { title: 'errorLog', icon: 'bug' }
301	// }
302	// ]
303	// },
304
305	// {
306	// path: '/excel',	255	// path: '/tab',
307	// component: Layout,	256	// component: Layout,
308	// redirect: '/excel/export-excel',	257	// children: [
309	// name: 'Excel',	258	// {
310	// meta: {	259	// path: 'index',
311	// title: 'excel',	260	// component: () => import('@/views/tab/index'),
312	// icon: 'excel'	261	// name: 'Tab',
313	// },	262	// meta: { title: 'tab', icon: 'tab' }
314	// children: [	263	// }
315	// {	264	// ]
316	// path: 'export-excel',	265	// },
317	// component: () => import('@/views/excel/export-excel'),	266
318	// name: 'ExportExcel',	267	// {
319	// meta: { title: 'exportExcel' }	268	// path: '/error',
320	// },	269	// component: Layout,
321	// {	270	// redirect: 'noRedirect',
322	// path: 'export-selected-excel',	271	// name: 'ErrorPages',
323	// component: () => import('@/views/excel/select-excel'),	272	// meta: {
324	// name: 'SelectExcel',	273	// title: 'errorPages',
325	// meta: { title: 'selectExcel' }	274	// icon: '404'
326	// },	275	// },
327	// {	276	// children: [
328	// path: 'export-merge-header',	277	// {
329	// component: () => import('@/views/excel/merge-header'),	278	// path: '401',
330	// name: 'MergeHeader',	279	// component: () => import('@/views/error-page/401'),
331	// meta: { title: 'mergeHeader' }	280	// name: 'Page401',
332	// },	281	// meta: { title: 'page401', noCache: true }
333	// {	282	// },
334	// path: 'upload-excel',	283	// {
335	// component: () => import('@/views/excel/upload-excel'),	284	// path: '404',
336	// name: 'UploadExcel',	285	// component: () => import('@/views/error-page/404'),
337	// meta: { title: 'uploadExcel' }	286	// name: 'Page404',
338	// }	287	// meta: { title: 'page404', noCache: true }
339	// ]	288	// }
340	// },	289	// ]
341		290	// },
342	// {	291
343	// path: '/zip',	292	// {
344	// component: Layout,	293	// path: '/error-log',
345	// redirect: '/zip/download',	294	// component: Layout,
346	// alwaysShow: true,	295	// children: [
347	// name: 'Zip',	296	// {
348	// meta: { title: 'zip', icon: 'zip' },	297	// path: 'log',
349	// children: [	298	// component: () => import('@/views/error-log/index'),
350	// {	299	// name: 'ErrorLog',
351	// path: 'download',	300	// meta: { title: 'errorLog', icon: 'bug' }
352	// component: () => import('@/views/zip/index'),	301	// }
353	// name: 'ExportZip',	302	// ]
354	// meta: { title: 'exportZip' }	303	// },
355	// }	304
356	// ]	305	// {
357	// },	306	// path: '/excel',
358		307	// component: Layout,
359	// {	308	// redirect: '/excel/export-excel',
360	// path: '/pdf',	309	// name: 'Excel',
361	// component: Layout,	310	// meta: {
362	// redirect: '/pdf/index',	311	// title: 'excel',
363	// children: [	312	// icon: 'excel'
364	// {	313	// },
365	// path: 'index',	314	// children: [
366	// component: () => import('@/views/pdf/index'),	315	// {
367	// name: 'PDF',	316	// path: 'export-excel',
368	// meta: { title: 'pdf', icon: 'pdf' }	317	// component: () => import('@/views/excel/export-excel'),
369	// }	318	// name: 'ExportExcel',
370	// ]	319	// meta: { title: 'exportExcel' }
371	// },	320	// },
372	// {	321	// {
373	// path: '/pdf/download',	322	// path: 'export-selected-excel',
374	// component: () => import('@/views/pdf/download'),	323	// component: () => import('@/views/excel/select-excel'),
375	// hidden: true	324	// name: 'SelectExcel',
376	// },	325	// meta: { title: 'selectExcel' }
377		326	// },
378	// {	327	// {
379	// path: '/theme',	328	// path: 'export-merge-header',
380	// component: Layout,	329	// component: () => import('@/views/excel/merge-header'),
381	// children: [	330	// name: 'MergeHeader',
382	// {	331	// meta: { title: 'mergeHeader' }
383	// path: 'index',	332	// },
384	// component: () => import('@/views/theme/index'),	333	// {
385	// name: 'Theme',	334	// path: 'upload-excel',
386	// meta: { title: 'theme', icon: 'theme' }	335	// component: () => import('@/views/excel/upload-excel'),
387	// }	336	// name: 'UploadExcel',
388	// ]	337	// meta: { title: 'uploadExcel' }
389	// },	338	// }
390		339	// ]
391	// {	340	// },
392	// path: '/clipboard',	341
393	// component: Layout,	342	// {
394	// children: [	343	// path: '/zip',
395	// {	344	// component: Layout,
396	// path: 'index',	345	// redirect: '/zip/download',
397	// component: () => import('@/views/clipboard/index'),	346	// alwaysShow: true,
398	// name: 'ClipboardDemo',	347	// name: 'Zip',
399	// meta: { title: 'clipboardDemo', icon: 'clipboard' }	348	// meta: { title: 'zip', icon: 'zip' },
400	// }	349	// children: [
401	// ]	350	// {
402	// },	351	// path: 'download',
403		352	// component: () => import('@/views/zip/index'),
404	// {	353	// name: 'ExportZip',
405	// path: '/i18n',	354	// meta: { title: 'exportZip' }
406	// component: Layout,	355	// }
407	// children: [	356	// ]
408	// {	357	// },
409	// path: 'index',	358
410	// component: () => import('@/views/i18n-demo/index'),	359	// {
411	// name: 'I18n',	360	// path: '/pdf',
412	// meta: { title: 'i18n', icon: 'international' }	361	// component: Layout,
413	// }	362	// redirect: '/pdf/index',
414	// ]	363	// children: [
415	// },	364	// {
416		365	// path: 'index',
417	// {	366	// component: () => import('@/views/pdf/index'),
418	// path: 'external-link',	367	// name: 'PDF',
419	// component: Layout,	368	// meta: { title: 'pdf', icon: 'pdf' }
420	// children: [	369	// }
421	// {	370	// ]
422	// path: 'https://github.com/PanJiaChen/vue-element-admin',	371	// },
423	// meta: { title: 'externalLink', icon: 'link' }	372	// {
424	// }	373	// path: '/pdf/download',
425	// ]	374	// component: () => import('@/views/pdf/download'),
426	// },	375	// hidden: true
427		376	// },
428	// 404 page must be placed at the end !!!	377
429	{	378	// {
430	path: '*',	379	// path: '/theme',
431	redirect: '/404',	380	// component: Layout,
432	hidden: true	381	// children: [

src/router/modules/meta.js

Diff comments Edit View file @0bd8168

1	import Layout from '@/layout'	1	import Layout from '@/layout'
2		2
3	const metaRouter = {	3	const metaRouter = {
4	path: '/meta',	4	path: '/meta',
5	component: Layout,	5	component: Layout,
6	redirect: '/meta/page',	6	redirect: '/meta/page',
7	alwaysShow: true, // will always show the root menu	7	alwaysShow: true, // will always show the root menu
8	name: 'Meta',	8	name: 'Meta',
9	meta: {	9	meta: {
10	title: 'metas.metas',	10	title: 'metas.metas',
11	icon: 'zip',	11	icon: 'zip',
12	roles: ['admin', 'assistant'] // you can set roles in root nav	12	roles: ['admin', 'assistant'] // you can set roles in root nav
13	},	13	},
14	children: [{	14	children: [{
15	path: 'metapage',	15	path: 'metapage',
16	component: () => import('@/views/meta/tree'),	16	component: () => import('@/views/meta/tree'),
17	name: 'MetaList',	17	name: 'MetaList',
18	meta: {	18	meta: {
19	title: 'metas.list',	19	title: 'metas.list',
20	icon: 'zip',	20	icon: 'zip',
21	roles: ['admin', 'assistant'] // or you can only set roles in sub nav	21	roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22	}	22	}
23	}]	23	}]
24	}	24	}
25	export default metaRouter	25	export default metaRouter
26		26

src/router/modules/order.js

Diff comments Edit View file @0bd8168

	File was created	1	/ When your routing table is too long, you can split it into small modules/
		2
		3	import Layout from '@/layout'
		4
		5	const orderRouter = {
		6	path: '/orders',
		7	component: Layout,
		8	redirect: '/order/page',
		9	alwaysShow: true, // will always show the root menu
		10	name: 'Order',
		11	meta: {
		12	title: 'orders',
		13	icon: 'shopping',
		14	roles: ['admin', 'assistant', 'runner', 'shoper'] // you can set roles in root nav
		15	},
		16	children: [{
		17	path: 'orderpage',
		18	component: () => import('@/views/order/list'),
		19	name: 'list',
		20	meta: {
		21	title: 'orders',
		22	roles: ['admin', 'assistant', 'runner', 'shoper'] // or you can only set roles in sub nav
		23	}
		24	}]
		25	}
		26
		27	export default orderRouter
1	/ When your routing table is too long, you can split it into small modules/	28

src/router/modules/prod.js

Diff comments Edit View file @0bd8168

 /** When your routing table is too long, you can split it into small modules**/
 import Layout from '@/layout'
 const prodRouter = {
   path: '/prod',
   component: Layout,
   redirect: '/prod/page',
   alwaysShow: true, // will always show the root menu
   name: 'Prod',
   meta: {
     title: 'prods.prod_menu', // 会自动被i18n替换
     icon: 'star',
     roles: ['admin', 'assistant', 'runner', 'shoper'] // you can set roles in root nav
   },
   children: [{
     path: 'list',
     component: () => import('@/views/prod/list'),
     name: 'prodList',
     meta: {
       title: 'prods.prodlist',
       roles: ['admin', 'assistant', 'shoper', 'runner']
     }
   }]
-}
-export default prodRouter

src/router/modules/sites.js

Diff comments Edit View file @0bd8168

	File was created	1	import Layout from '@/layout'
		2
		3	const sitesRouter = {
		4	path: '/sites',
		5	component: Layout,
		6	redirect: '/site/page',
		7	alwaysShow: true, // will always show the root menu
		8	name: 'Site',
		9	meta: {
		10	title: 'sites',
		11	icon: 'people',
		12	roles: ['admin', 'assistant', 'runner'] // you can set roles in root nav
		13	},
		14	children: [{
		15	path: 'sitepage',
		16	component: () => import('@/views/site/list'),
		17	name: 'SiteList',
		18	meta: {
		19	title: '站点列表',
		20	roles: ['admin', 'runner']
		21
		22	}
		23	}]
		24	}
		25
		26	export default sitesRouter
1	import Layout from '@/layout'	27

src/router/modules/system.js

Diff comments Edit View file @0bd8168

1	import Layout from '@/layout'	1	import Layout from '@/layout'
2		2
3	const systemRouter = {	3	const systemRouter = {
4	path: '/system',	4	path: '/system',
5	component: Layout,	5	component: Layout,
6	redirect: '/system/page',	6	redirect: '/system/page',
7	alwaysShow: true, // will always show the root menu	7	alwaysShow: true, // will always show the root menu
8	name: 'System',	8	name: 'System',
9	meta: {	9	meta: {
10	title: 'systems.systems',	10	title: 'systems.systems',
11	icon: 'component',	11	icon: 'component',
12	roles: ['admin', 'assistant'] // you can set roles in root nav	12	roles: ['admin', 'assistant'] // you can set roles in root nav
13	},	13	},
14	children: [{	14	children: [{
15	path: 'systempage2',	15	path: 'systempage2',
16	component: () => import('@/views/example/list'),	16	component: () => import('@/views/example/list'),
17	name: 'SystemList1',	17	name: 'SystemList1',
18	meta: {	18	meta: {
19	title: 'systems.sites',	19	title: 'systems.sites',
20	roles: ['admin', 'assistant'] // or you can only set roles in sub nav	20	roles: ['admin', 'assistant'] // or you can only set roles in sub nav
21	}	21	}
22	},	22	},
23	{	23	{
24	path: 'sytempage2',	24	path: 'sytempage2',
25	component: () => import('@/views/example/list'),	25	component: () => import('@/views/example/list'),
26	name: 'SystemList2',	26	name: 'SystemList2',
27	meta: {	27	meta: {
28	title: 'systems.money',	28	title: 'systems.money',
29	roles: ['admin', 'assistant'] // or you can only set roles in sub nav	29	roles: ['admin', 'assistant'] // or you can only set roles in sub nav
30	}	30	}
31	},	31	},
32	{	32	{
33	path: 'systempage3',	33	path: 'systempage3',
34	component: () => import('@/views/example/list'),	34	component: () => import('@/views/example/list'),
35	name: 'SystemList3',	35	name: 'SystemList3',
36	meta: {	36	meta: {
37	title: 'systems.industry',	37	title: 'systems.industry',
38	roles: ['admin', 'assistant'] // or you can only set roles in sub nav	38	roles: ['admin', 'assistant'] // or you can only set roles in sub nav
39	}	39	}
40	},	40	},
41	{	41	{
42	path: 'systempage4',	42	path: 'systempage4',
43	component: () => import('@/views/example/list'),	43	component: () => import('@/views/example/list'),
44	name: 'SystemList4',	44	name: 'SystemList4',
45	meta: {	45	meta: {
46	title: 'systems.template',	46	title: 'systems.template',
47	roles: ['admin', 'assistant'] // or you can only set roles in sub nav	47	roles: ['admin', 'assistant'] // or you can only set roles in sub nav
48	}	48	}
49	}	49	}
50		50
51	]	51	]
52	}	52	}
53		53
54	export default systemRouter	54	export default systemRouter
55		55

src/router/modules/user.js

Diff comments Edit View file @0bd8168

1	/ When your routing table is too long, you can split it into small modules/	1	/ When your routing table is too long, you can split it into small modules/
2		2
3	import Layout from '@/layout'	3	import Layout from '@/layout'
4		4
5	const chartsRouter = {	5	const chartsRouter = {
6	path: '/users',	6	path: '/users',
7	component: Layout,	7	component: Layout,
8	redirect: '/users/page',	8	redirect: '/users/page',
9	alwaysShow: true, // will always show the root menu	9	alwaysShow: true, // will always show the root menu
10	name: 'Users',	10	name: 'Users',
11	meta: {	11	meta: {
12	title: 'users.people',	12	title: 'users.people',
13	icon: 'peoples',	13	icon: 'peoples',
14	roles: ['admin', 'assistant'] // you can set roles in root nav	14	roles: ['admin', 'assistant'] // you can set roles in root nav
15	},	15	},
16	children: [{	16	children: [{
17	path: 'assistant',	17	path: 'assistant',
18	component: () => import('@/views/users/list'),	18	component: () => import('@/views/users/list'),
19	name: 'assistant',	19	name: 'assistant',
		20	query: {
		21	test: 'ssssss'
		22	},
20	query: {	23	meta: {
21	test: 'ssssss'	24	title: 'users.assistant',
22	},	25	roles: ['admin'] // or you can only set roles in sub nav
		26	}
		27	},
		28	{
		29	path: 'runner',
		30	component: () => import('@/views/users/list'),
		31	name: 'runner',
		32	query: {
		33	test: 'ssssss'
		34	},
		35	meta: {
		36	title: 'users.runner',
		37	roles: ['admin', 'assistant'] // or you can only set roles in sub nav
		38	}
		39	},
		40	{
		41	path: 'shoper',
		42	component: () => import('@/views/users/list'),
		43	name: 'shoper',
		44	query: {
		45	test: 'ssssss'
		46	},
		47	meta: {
		48	title: 'users.shoper',
		49	roles: ['admin', 'assistant'] // or you can only set roles in sub nav
		50	}
		51	},
		52	{
		53	path: 'users',
		54	component: () => import('@/views/users/list'),
		55	name: 'users',
		56	query: {
		57	test: 'ssssss'
		58	},
		59	meta: {
		60	title: 'users.user',
		61	roles: ['admin', 'assistant'] // or you can only set roles in sub nav
23	meta: {	62	}
24	title: 'users.assistant',	63	}
25	roles: ['admin'] // or you can only set roles in sub nav	64	// ,{
26	}	65	// path: '/icons',
27	},	66	// component: () => import('@/views/icons/index'),
28	{	67	// name: 'icons',
29	path: 'runner',	68	// meta: {
30	component: () => import('@/views/users/list'),	69	// title: 'icons',
31	name: 'runner',	70	// roles: ['admin', 'assistant', 'shoper', 'runner'] // or you can only set roles in sub nav
32	query: {	71	// }
33	test: 'ssssss'	72	// }
34	},	73	]
35	meta: {	74	}
36	title: 'users.runner',	75
37	roles: ['admin', 'assistant'] // or you can only set roles in sub nav	76	export default chartsRouter
38	}	77

src/store/modules/tagsView.js

Diff comments Edit View file @0bd8168

1	const state = {	1	const state = {
2	visitedViews: [],	2	visitedViews: [],
3	cachedViews: []	3	cachedViews: []
4	}	4	}
5		5
6	const mutations = {	6	const mutations = {
7	ADD_VISITED_VIEW: (state, view) => {	7	ADD_VISITED_VIEW: (state, view) => {
8	if (state.visitedViews.some(v => v.path === view.path)) return	8	if (state.visitedViews.some(v => v.path === view.path)) return
9	state.visitedViews.push(	9	state.visitedViews.push(
10	Object.assign({}, view, {	10	Object.assign({}, view, {
11	title: view.meta.title \|\| 'no-name'	11	title: view.meta.title \|\| 'no-name'
12	})	12	})
13	)	13	)
14	},	14	},
15	ADD_CACHED_VIEW: (state, view) => {	15	ADD_CACHED_VIEW: (state, view) => {
16	if (state.cachedViews.includes(view.name)) return	16	if (state.cachedViews.includes(view.name)) return
17	if (!view.meta.noCache) {	17	if (!view.meta.noCache) {
18	state.cachedViews.push(view.name)	18	state.cachedViews.push(view.name)
19	}	19	}
20	},	20	},
21		21
22	DEL_VISITED_VIEW: (state, view) => {	22	DEL_VISITED_VIEW: (state, view) => {
23	for (const [i, v] of state.visitedViews.entries()) {	23	for (const [i, v] of state.visitedViews.entries()) {
24	if (v.path === view.path) {	24	if (v.path === view.path) {
25	state.visitedViews.splice(i, 1)	25	state.visitedViews.splice(i, 1)
26	break	26	break
27	}	27	}
28	}	28	}
29	},	29	},
30	DEL_CACHED_VIEW: (state, view) => {	30	DEL_CACHED_VIEW: (state, view) => {
31	const index = state.cachedViews.indexOf(view.name)	31	const index = state.cachedViews.indexOf(view.name)
32	index > -1 && state.cachedViews.splice(index, 1)	32	index > -1 && state.cachedViews.splice(index, 1)
33	},	33	},
34		34
35	DEL_OTHERS_VISITED_VIEWS: (state, view) => {	35	DEL_OTHERS_VISITED_VIEWS: (state, view) => {
36	state.visitedViews = state.visitedViews.filter(v => {	36	state.visitedViews = state.visitedViews.filter(v => {
37	return v.meta.affix \|\| v.path === view.path	37	return v.meta.affix \|\| v.path === view.path
38	})	38	})
39	},	39	},
40	DEL_OTHERS_CACHED_VIEWS: (state, view) => {	40	DEL_OTHERS_CACHED_VIEWS: (state, view) => {
41	const index = state.cachedViews.indexOf(view.name)	41	const index = state.cachedViews.indexOf(view.name)
42	if (index > -1) {	42	if (index > -1) {
43	state.cachedViews = state.cachedViews.slice(index, index + 1)	43	state.cachedViews = state.cachedViews.slice(index, index + 1)
44	} else {	44	} else {
45	// if index = -1, there is no cached tags	45	// if index = -1, there is no cached tags
46	state.cachedViews = []	46	state.cachedViews = []
47	}	47	}
48	},	48	},
49		49
50	DEL_ALL_VISITED_VIEWS: state => {	50	DEL_ALL_VISITED_VIEWS: state => {
51	// keep affix tags	51	// keep affix tags
52	const affixTags = state.visitedViews.filter(tag => tag.meta.affix)	52	const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
53	state.visitedViews = affixTags	53	state.visitedViews = affixTags
54	},	54	},
55	DEL_ALL_CACHED_VIEWS: state => {	55	DEL_ALL_CACHED_VIEWS: state => {
56	state.cachedViews = []	56	state.cachedViews = []
57	},	57	},
58		58
59	UPDATE_VISITED_VIEW: (state, view) => {	59	UPDATE_VISITED_VIEW: (state, view) => {
60	for (let v of state.visitedViews) {	60	for (let v of state.visitedViews) {
61	if (v.path === view.path) {	61	if (v.path === view.path) {
62	v = Object.assign(v, view)	62	v = Object.assign(v, view)
63	break	63	break
64	}	64	}
65	}	65	}
66	}	66	}
67	}	67	}
68		68
69	const actions = {	69	const actions = {
70	addView({	70	addView({
		71	dispatch
		72	}, view) {
71	dispatch	73	dispatch('addVisitedView', view)
72	}, view) {	74	dispatch('addCachedView', view)
73	dispatch('addVisitedView', view)	75	},
74	dispatch('addCachedView', view)	76	addVisitedView({
		77	commit
		78	}, view) {
75	},	79	commit('ADD_VISITED_VIEW', view)
76	addVisitedView({	80	},
77	commit	81	addCachedView({
		82	commit
		83	}, view) {
78	}, view) {	84	commit('ADD_CACHED_VIEW', view)
79	commit('ADD_VISITED_VIEW', view)	85	},
80	},	86
81	addCachedView({	87	delView({
		88	dispatch,
		89	state
		90	}, view) {
82	commit	91	return new Promise(resolve => {
83	}, view) {	92	dispatch('delVisitedView', view)
84	commit('ADD_CACHED_VIEW', view)	93	dispatch('delCachedView', view)
85	},	94	resolve({
86		95	visitedViews: [...state.visitedViews],
87	delView({	96	cachedViews: [...state.cachedViews]
88	dispatch,	97	})
89	state	98	})
90	}, view) {	99	},
91	return new Promise(resolve => {	100	delVisitedView({
		101	commit,
		102	state
		103	}, view) {
92	dispatch('delVisitedView', view)	104	return new Promise(resolve => {
93	dispatch('delCachedView', view)	105	commit('DEL_VISITED_VIEW', view)
94	resolve({	106	resolve([...state.visitedViews])
95	visitedViews: [...state.visitedViews],	107	})
96	cachedViews: [...state.cachedViews]	108	},
97	})	109	delCachedView({
		110	commit,
		111	state
		112	}, view) {
98	})	113	return new Promise(resolve => {
99	},	114	commit('DEL_CACHED_VIEW', view)
100	delVisitedView({	115	resolve([...state.cachedViews])
101	commit,	116	})
102	state	117	},
103	}, view) {	118
104	return new Promise(resolve => {	119	delOthersViews({
		120	dispatch,
		121	state
		122	}, view) {
105	commit('DEL_VISITED_VIEW', view)	123	return new Promise(resolve => {
106	resolve([...state.visitedViews])	124	dispatch('delOthersVisitedViews', view)
107	})	125	dispatch('delOthersCachedViews', view)
108	},	126	resolve({
109	delCachedView({	127	visitedViews: [...state.visitedViews],
110	commit,	128	cachedViews: [...state.cachedViews]
111	state	129	})
112	}, view) {	130	})
113	return new Promise(resolve => {	131	},
114	commit('DEL_CACHED_VIEW', view)	132	delOthersVisitedViews({
		133	commit,
		134	state
		135	}, view) {
115	resolve([...state.cachedViews])	136	return new Promise(resolve => {
116	})	137	commit('DEL_OTHERS_VISITED_VIEWS', view)
117	},	138	resolve([...state.visitedViews])
118		139	})
119	delOthersViews({	140	},
120	dispatch,	141	delOthersCachedViews({
		142	commit,
		143	state
		144	}, view) {
121	state	145	return new Promise(resolve => {
122	}, view) {	146	commit('DEL_OTHERS_CACHED_VIEWS', view)
123	return new Promise(resolve => {	147	resolve([...state.cachedViews])
124	dispatch('delOthersVisitedViews', view)	148	})
125	dispatch('delOthersCachedViews', view)	149	},
126	resolve({	150
127	visitedViews: [...state.visitedViews],	151	delAllViews({
		152	dispatch,
		153	state
		154	}, view) {
128	cachedViews: [...state.cachedViews]	155	return new Promise(resolve => {
129	})	156	dispatch('delAllVisitedViews', view)
130	})	157	dispatch('delAllCachedViews', view)
131	},	158	resolve({
132	delOthersVisitedViews({	159	visitedViews: [...state.visitedViews],
133	commit,	160	cachedViews: [...state.cachedViews]
134	state	161	})
135	}, view) {	162	})
136	return new Promise(resolve => {	163	},
137	commit('DEL_OTHERS_VISITED_VIEWS', view)	164	delAllVisitedViews({
		165	commit,
		166	state
		167	}) {
138	resolve([...state.visitedViews])	168	return new Promise(resolve => {
139	})	169	commit('DEL_ALL_VISITED_VIEWS')
140	},	170	resolve([...state.visitedViews])
141	delOthersCachedViews({	171	})
142	commit,	172	},
143	state	173	delAllCachedViews({
		174	commit,
		175	state
		176	}) {
144	}, view) {	177	return new Promise(resolve => {
145	return new Promise(resolve => {	178	commit('DEL_ALL_CACHED_VIEWS')
146	commit('DEL_OTHERS_CACHED_VIEWS', view)	179	resolve([...state.cachedViews])
147	resolve([...state.cachedViews])	180	})
148	})	181	},
149	},	182
150		183	updateVisitedView({
		184	commit
		185	}, view) {
151	delAllViews({	186	commit('UPDATE_VISITED_VIEW', view)
152	dispatch,	187	}
153	state	188	}
154	}, view) {	189
155	return new Promise(resolve => {	190	export default {
156	dispatch('delAllVisitedViews', view)	191	namespaced: true,
157	dispatch('delAllCachedViews', view)	192	state,
158	resolve({	193	mutations,
159	visitedViews: [...state.visitedViews],	194	actions
160	cachedViews: [...state.cachedViews]	195	}
161	})	196

src/utils/request.js

Diff comments Edit View file @0bd8168

1	import axios from 'axios'	1	import axios from 'axios'
2	import qs from 'qs'	2	import qs from 'qs'
3	import {	3	import {
4	MessageBox,	4	MessageBox,
5	Message,	5	Message,
6	// Loading,	6	// Loading,
7	Notification	7	Notification
8	} from 'element-ui'	8	} from 'element-ui'
9	import store from '@/store'	9	import store from '@/store'
10	import {	10	import {
11	getToken	11	getToken
12	} from '@/utils/auth'	12	} from '@/utils/auth'
13		13
		14	// const baseUrl = 'http://localhost/sys-glass/api';
		15	// const baseUrl = 'http://localhost:8087';
		16	const baseUrl = '/dev-api'
		17	// const baseUrl = process.env.VUE_APP_BASE_API // url = base url + request url
14	// const baseUrl = 'http://localhost/sys-glass/api';	18	// create an axios instance
15	// const baseUrl = 'http://localhost:8087';	19	const service = axios.create({
16	const baseUrl = '/dev-api'	20	// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
		21	baseURL: baseUrl, // url = base url + request url
17	// const baseUrl = process.env.VUE_APP_BASE_API // url = base url + request url	22	withCredentials: true, // send cookies when cross-domain requests
18	// create an axios instance	23	timeout: 3000 // request timeout
19	const service = axios.create({	24	})
20	// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url	25	// let loadingInstance
21	baseURL: baseUrl, // url = base url + request url	26	// request interceptor
22	withCredentials: true, // send cookies when cross-domain requests	27	service.interceptors.request.use(
23	timeout: 3000 // request timeout	28	config => {
24	})	29	const token = sessionStorage.getItem('access_token')
25	// let loadingInstance	30	// const csrf = store.getters.csrf
26	// request interceptor	31	if (token) {
27	service.interceptors.request.use(	32	config.headers = {
28	config => {	33	'access-token': token,
29	const token = sessionStorage.getItem('access_token')	34	'Content-Type': 'application/x-www-form-urlencoded'
30	// const csrf = store.getters.csrf	35	}
31	if (token) {	36	}
32	config.headers = {	37	if (config.url === 'refresh') {
33	'access-token': token,	38	config.headers = {
34	'Content-Type': 'application/x-www-form-urlencoded'	39	'refresh-token': sessionStorage.getItem('refresh_token'),
35	}	40	'Content-Type': 'application/x-www-form-urlencoded'
36	}	41	}
37	if (config.url === 'refresh') {	42	}
38	config.headers = {	43	// let options = {
39	'refresh-token': sessionStorage.getItem('refresh_token'),	44	// lock: true,
40	'Content-Type': 'application/x-www-form-urlencoded'	45	// fullscreen: false,
41	}	46	// text: '数据加载中……',
42	}	47	// // background: '#FFCC00',
43	// let options = {	48	// spinner: 'el-icon-loading'
44	// lock: true,	49	// };
45	// fullscreen: false,	50	const options = {
46	// text: '数据加载中……',	51	type: 'success',
47	// // background: '#FFCC00',	52	message: baseUrl + config.url,
48	// spinner: 'el-icon-loading'	53	title: 'request axios ',
49	// };	54	showClose: true,
50	const options = {	55	duration: 3000
51	type: 'success',	56	}
52	message: baseUrl + config.url,	57	Notification(options)
53	title: 'request axios ',	58	// loadingInstance = Loading.service(options);
54	showClose: true,	59	config.method === 'post'
55	duration: 3000	60	? config.data = qs.stringify({
56	}	61	...config.data
57	Notification(options)	62	})
58	// loadingInstance = Loading.service(options);	63	: config.params = {
59	config.method === 'post'	64	...config.params
60	? config.data = qs.stringify({	65	}
61	...config.data	66	if (store.getters.token) {
62	})	67	// let each request carry token
63	: config.params = {	68	// ['X-Token'] is a custom headers key
64	...config.params	69	// please modify it according to the actual situation
65	}	70	config.headers['X-Token'] = getToken()
66	if (store.getters.token) {	71	}
67	// let each request carry token	72	config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
68	// ['X-Token'] is a custom headers key	73
69	// please modify it according to the actual situation	74	return config
70	config.headers['X-Token'] = getToken()	75	// do something before request is sent
71	}	76	},
72	config.headers['Content-Type'] = 'application/x-www-form-urlencoded'	77	error => {
73		78	// do something with request error
74	return config	79	Message({
75	// do something before request is sent	80	message: error \|\| 'Error',
76	},	81	type: 'error',
77	error => {	82	duration: 5 * 1000
78	// do something with request error	83	})
79	Message({	84	console.log(error) // for debug
80	message: error \|\| 'Error',	85	return Promise.reject(error)
81	type: 'error',	86	}
82	duration: 5 * 1000	87	)
83	})	88
84	console.log(error) // for debug	89	// response interceptor
85	return Promise.reject(error)	90	service.interceptors.response.use(
86	}	91	/**
87	)	92	* If you want to get http information such as headers or status
88		93	* Please return response => response
89	// response interceptor	94	*/
90	service.interceptors.response.use(	95
91	/**	96	/**
92	* If you want to get http information such as headers or status	97	* Determine the request status by custom code
93	* Please return response => response	98	* Here is just an example
94	*/	99	* You can also judge the status by HTTP Status Code
95		100	*/
96	/**	101	response => {
97	* Determine the request status by custom code	102	const options = {
98	* Here is just an example	103	type: 'error',
99	* You can also judge the status by HTTP Status Code	104	message: response.status,
100	*/	105	title: 'response status value ',
101	response => {	106	showClose: true,
102	const options = {	107	duration: 1000
103	type: 'error',	108	}
104	message: response.status,	109	Notification(options)
105	title: 'response status value ',	110	// Notification.close()
		111
106	showClose: true,	112	// 这里根据后端提供的数据进行对应的处理
107	duration: 1000	113	console.log('response===>', response)
108	}	114	// 定时刷新access-token
109	Notification(options)	115	// if (!response.data.value && response.data.data.message === 'token invalid') {
110	// Notification.close()	116	// // 刷新token
111		117	// store.dispatch('refresh').then(response => {
112	// 这里根据后端提供的数据进行对应的处理	118	// sessionStorage.setItem('access_token', response.data)
113	console.log('response===>', response)	119	// }).catch(error => {
114	// 定时刷新access-token	120	// throw new Error('token刷新' + error)
115	// if (!response.data.value && response.data.data.message === 'token invalid') {	121	// })
116	// // 刷新token	122	// }
117	// store.dispatch('refresh').then(response => {	123
118	// sessionStorage.setItem('access_token', response.data)	124	const res = response.data
119	// }).catch(error => {	125
120	// throw new Error('token刷新' + error)	126	// if the custom code is not 20000, it is judged as an error.
121	// })	127	if (res.code !== 20000) {
122	// }	128	Message({
123		129	message: res.message \|\| 'Error',
124	const res = response.data	130	type: 'error',
125		131	duration: 5 * 1000
126	// if the custom code is not 20000, it is judged as an error.	132	})
127	if (res.code !== 20000) {	133
128	Message({	134	// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
129	message: res.message \|\| 'Error',	135	if (res.code === 50008 \|\| res.code === 50012 \|\| res.code === 50014) {
130	type: 'error',	136	// to re-login
131	duration: 5 * 1000	137	MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
132	})	138	confirmButtonText: 'Re-Login',
133		139	cancelButtonText: 'Cancel',
134	// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;	140	type: 'warning'
135	if (res.code === 50008 \|\| res.code === 50012 \|\| res.code === 50014) {	141	}).then(() => {
136	// to re-login	142	store.dispatch('user/resetToken').then(() => {
137	MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {	143	location.reload()
138	confirmButtonText: 'Re-Login',	144	})
139	cancelButtonText: 'Cancel',	145	})
140	type: 'warning'	146	}
141	}).then(() => {	147	return Promise.reject(new Error(res.message \|\| 'Error'))
142	store.dispatch('user/resetToken').then(() => {	148	} else {
143	location.reload()	149	return res
144	})	150	}
145	})	151	},
146	}	152	error => {
147	return Promise.reject(new Error(res.message \|\| 'Error'))	153	console.log('error', error)
148	} else {	154	// console.log(JSON.stringify(error));
149	return res	155	// 500的状态也应该处理一下
150	}	156	// 401-403的状态也应该处理一下
151	},	157	const text = JSON.parse(JSON.stringify(error)).response.status === 404
152	error => {	158	? '404'
153	console.log('error', error)	159	: '网络异常，请重试'
154	// console.log(JSON.stringify(error));	160	Message({
155	// 500的状态也应该处理一下	161	message: text \|\| 'Error',
156	// 401-403的状态也应该处理一下	162	type: 'error',
157	const text = JSON.parse(JSON.stringify(error)).response.status === 404	163	duration: 5 * 1000
158	? '404'	164	})
159	: '网络异常，请重试'	165
160	Message({	166	return Promise.reject(error)
161	message: text \|\| 'Error',	167	}
162	type: 'error',	168	)
163	duration: 5 * 1000	169
164	})	170	// 假设你想移除拦截器
165		171	// axios.interceptors.request.eject(service);
166	return Promise.reject(error)	172
167	}	173	export default service
168	)	174

src/views/dashboard/admin/components/BoxCard.vue

Diff comments Edit View file @0bd8168

1	<template>	1	<template>
2	<el-card class="box-card-component" style="margin-left:8px;">	2	<el-card class="box-card-component" style="margin-left:8px;">
3	<div slot="header" class="box-card-header">	3	<div slot="header" class="box-card-header">
4	<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">	4	<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
5	</div>	5	</div>
6	<div style="position:relative;">	6	<div style="position:relative;">
7	<pan-thumb :image="avatar" class="panThumb" />	7	<pan-thumb :image="avatar" class="panThumb" />
8	<mallki class-name="mallki-text" text="vue-element-admin" />	8	<mallki class-name="mallki-text" text="vue-element-admin" />
9	<div style="padding-top:35px;" class="progress-item">	9	<div style="padding-top:35px;" class="progress-item">
10	<span>Vue</span>	10	<span>Vue</span>
11	<el-progress :percentage="70" />	11	<el-progress :percentage="70" />
12	</div>	12	</div>
13	<div class="progress-item">	13	<div class="progress-item">
14	<span>JavaScript</span>	14	<span>JavaScript</span>
15	<el-progress :percentage="18" />	15	<el-progress :percentage="18" />
16	</div>	16	</div>
17	<div class="progress-item">	17	<div class="progress-item">
18	<span>Css</span>	18	<span>Css</span>
19	<el-progress :percentage="12" />	19	<el-progress :percentage="12" />
20	</div>	20	</div>
21	<div class="progress-item">	21	<div class="progress-item">
22	<span>ESLint</span>	22	<span>ESLint</span>
23	<el-progress :percentage="100" status="success" />	23	<el-progress :percentage="100" status="success" />
24	</div>	24	</div>
25	</div>	25	</div>
26	</el-card>	26	</el-card>
27	</template>	27	</template>
28		28
29	<script>	29	<script>
30	import { mapGetters } from 'vuex'	30	import { mapGetters } from 'vuex'
31	import PanThumb from '@/components/PanThumb'	31	import PanThumb from '@/components/PanThumb'
32	import Mallki from '@/components/TextHoverEffect/Mallki'	32	import Mallki from '@/components/TextHoverEffect/Mallki'
		33	// import logoPath from "~@/assets/img/yp_logo.jpeg"
33	// import logoPath from "~@/assets/img/yp_logo.jpeg"	34
34		35	export default {
35	export default {	36	components: { PanThumb, Mallki },
36	components: { PanThumb, Mallki },	37
37		38	filters: {
38	filters: {	39	statusFilter(status) {
39	statusFilter(status) {	40	const statusMap = {
40	const statusMap = {	41	success: 'success',
41	success: 'success',	42	pending: 'danger'
42	pending: 'danger'	43	}
43	}	44	return statusMap[status]
44	return statusMap[status]	45	}
45	}	46	},
46	},	47	data() {
47	data() {	48	return {
48	return {	49	statisticsData: {
49	statisticsData: {	50	article_count: 1024,
50	article_count: 1024,	51	pageviews_count: 1024
51	pageviews_count: 1024	52	}
52	}	53	}
53	}	54	},
54	},	55	computed: {
55	computed: {	56	...mapGetters([
56	...mapGetters([	57	'name',
57	'name',	58	'avatar',
58	'avatar',	59	'roles'
59	'roles'	60	])
60	])	61	}
61	}	62	}
62	}	63	</script>
63	</script>	64
64		65	<style lang="scss" >
65	<style lang="scss" >	66	.box-card-component{
66	.box-card-component{	67	.el-card__header {
67	.el-card__header {	68	padding: 0px!important;
68	padding: 0px!important;	69	}
69	}	70	}
70	}	71	</style>
71	</style>	72	<style lang="scss" scoped>
72	<style lang="scss" scoped>	73	.box-card-component {
73	.box-card-component {	74	.box-card-header {
74	.box-card-header {	75	position: relative;
75	position: relative;	76	height: 220px;
76	height: 220px;	77	img {
77	img {	78	width: 100%;
78	width: 100%;	79	height: 100%;
79	height: 100%;	80	transition: all 0.2s linear;
80	transition: all 0.2s linear;	81	&:hover {
81	&:hover {	82	transform: scale(1.1, 1.1);
82	transform: scale(1.1, 1.1);	83	filter: contrast(130%);
83	filter: contrast(130%);	84	}
84	}	85	}
85	}	86	}
86	}	87	.mallki-text {
87	.mallki-text {	88	position: absolute;
88	position: absolute;	89	top: 0px;
89	top: 0px;	90	right: 0px;
90	right: 0px;	91	font-size: 20px;
91	font-size: 20px;	92	font-weight: bold;
92	font-weight: bold;	93	}
93	}	94	.panThumb {
94	.panThumb {	95	z-index: 100;
95	z-index: 100;	96	height: 70px!important;
96	height: 70px!important;	97	width: 70px!important;
97	width: 70px!important;	98	position: absolute!important;
98	position: absolute!important;	99	top: -45px;
99	top: -45px;	100	left: 0px;
100	left: 0px;	101	border: 5px solid #ffffff;
101	border: 5px solid #ffffff;	102	background-color: #fff;
102	background-color: #fff;	103	margin: auto;
103	margin: auto;	104	box-shadow: none!important;
104	box-shadow: none!important;	105	/deep/ .pan-info {
105	/deep/ .pan-info {	106	box-shadow: none!important;
106	box-shadow: none!important;	107	}
107	}	108	}
108	}	109	.progress-item {
109	.progress-item {	110	margin-bottom: 10px;
110	margin-bottom: 10px;	111	font-size: 14px;
111	font-size: 14px;	112	}
112	}	113	@media only screen and (max-width: 1510px){
113	@media only screen and (max-width: 1510px){	114	.mallki-text{
114	.mallki-text{	115	display: none;
115	display: none;	116	}
116	}	117	}
117	}	118	}
118	}	119	</style>
119	</style>	120

src/views/dashboard/index.vue

Diff comments Edit View file @0bd8168

1	<template>	1	<template>
2	<div class="dashboard-container">	2	<div class="dashboard-container">
3	<component :is="currentRole" />	3	<component :is="currentRole" />
4	</div>	4	</div>
5	</template>	5	</template>
6		6
7	<script>	7	<script>
8	import { mapGetters } from 'vuex'	8	import { mapGetters } from 'vuex'
9	import adminDashboard from './admin'	9	import adminDashboard from './admin'
10	import runnerDashboard from './runner'	10	import runnerDashboard from './runner'
11		11
12	export default {	12	export default {
13	name: 'Dashboard',	13	name: 'Dashboard',
14	components: { adminDashboard, runnerDashboard },	14	components: { adminDashboard, runnerDashboard },
15	data() {	15	data() {
16	return {	16	return {
17	currentRole: 'adminDashboard'	17	currentRole: 'adminDashboard'
18	}	18	}
19	},	19	},
20	computed: {	20	computed: {
21	...mapGetters(['roles'])	21	...mapGetters(['roles'])
22	},
23	created() {
24	if (this.roles.includes('admin')) {	22	},
25	this.$notify({	23	created() {
26	title: '----admin---',	24	if (this.roles.includes('admin')) {
27	message: 'adminadminadminadmin',	25	this.$notify({
		26	title: '----admin---',
		27	message: 'adminadminadminadmin',
		28	type: 'success',
		29	duration: 2000
		30	})
		31	this.currentRole = 'adminDashboard'
		32	}
		33	if (this.roles.includes('assistant')) {
		34	this.$notify({
		35	title: '----assistant---',
		36	message: 'assistantassistantassistantassistant',
		37	type: 'success',
		38	duration: 2000
		39	})
		40	this.currentRole = 'adminDashboard'
		41	}
		42	if (this.roles.includes('runner')) {
		43	this.$notify({
		44	title: '----runner---',
		45	message: 'runnerrunnerrunnerrunner',
		46	type: 'success',
		47	duration: 2000
		48	})
		49	this.currentRole = 'runnerDashboard'
		50	}
		51	if (this.roles.includes('shoper')) {
		52	this.$notify({
		53	title: '----shoper---',
		54	message: 'shopershopershopershoper',
		55	type: 'success',
		56	duration: 2000
		57	})
		58	this.currentRole = 'runnerDashboard'
28	type: 'success',	59	}
29	duration: 2000	60	}
30	})	61	}

src/views/dashboard/runner/index.vue

Diff comments Edit View file @0bd8168

	File was created	1	<template>
		2	<div class="dashboard-editor-container">
		3	<div class="clearfix">
		4	<pan-thumb :image="avatar" style="float: left">
		5	Your roles:
		6	<span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
		7	</pan-thumb>
		8	<github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
		9	<div class="info-container">
		10	<span class="display_name">{{ name }}</span>
		11	<span style="font-size:20px;padding-top:20px;display:inline-block;">{{ roles }}'s Dashboard</span>
		12	</div>
		13	</div>
		14	<div>
		15	<img :src="emptyGif" class="emptyGif">
		16	</div>
		17	</div>
		18	</template>
		19
		20	<script>
		21	import { mapGetters } from 'vuex'
		22	import PanThumb from '@/components/PanThumb'
		23	// import GithubCorner from '@/components/GithubCorner'
		24
		25	export default {
		26	name: 'DashboardEditor',
		27	// components: { PanThumb, GithubCorner },
		28	components: { PanThumb },
		29	data() {
		30	return {
		31	emptyGif:
		32	'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
		33	}
		34	},
		35	computed: {
		36	...mapGetters(['name', 'avatar', 'roles'])
		37	}
		38	}
		39	</script>
		40
		41	<style lang="scss" scoped>
		42	.emptyGif {
		43	display: block;
		44	width: 45%;
		45	margin: 0 auto;
		46	}
		47
		48	.dashboard-editor-container {
		49	background-color: #e3e3e3;
		50	min-height: 100vh;
		51	padding: 50px 60px 0px;
		52	.pan-info-roles {
		53	font-size: 12px;
		54	font-weight: 700;
		55	color: #333;
		56	display: block;
		57	}
		58	.info-container {
		59	position: relative;
		60	margin-left: 190px;
		61	height: 150px;
		62	line-height: 200px;
		63	.display_name {
		64	font-size: 48px;
		65	line-height: 48px;
		66	color: #212121;
		67	position: absolute;
		68	top: 25px;
		69	}
		70	}
		71	}
		72	</style>
1	<template>	73

src/views/login/index.vue

Diff comments Edit View file @0bd8168

1	<template>	1	<template>
2	<div class="login-container">	2	<div class="login-container">
3	<el-form	3	<el-form
4	ref="loginForm"	4	ref="loginForm"
5	:model="loginForm"	5	:model="loginForm"
6	:rules="loginRules"	6	:rules="loginRules"
7	class="login-form"	7	class="login-form"
8	autocomplete="on"	8	autocomplete="on"
9	label-position="left"	9	label-position="left"
10	>	10	>
11	<div class="title-container">	11	<div class="title-container">
12	<h3 class="title">{{ $t('login.title') }}</h3>	12	<h3 class="title">{{ $t('login.title') }}</h3>
13	<lang-select class="set-language" />	13	<lang-select class="set-language" />
14	</div>	14	</div>
15		15
16	<el-form-item prop="username">	16	<el-form-item prop="username">
17	<span class="svg-container">	17	<span class="svg-container">
18	<svg-icon icon-class="user" />	18	<svg-icon icon-class="user" />
19	</span>	19	</span>
20	<el-input	20	<el-input
21	ref="username"	21	ref="username"
22	v-model="loginForm.username"	22	v-model="loginForm.username"
23	:placeholder="$t('login.username')"	23	:placeholder="$t('login.username')"
24	name="username"	24	name="username"
25	type="text"	25	type="text"
26	tabindex="1"	26	tabindex="1"
27	autocomplete="on"	27	autocomplete="on"
28	/>	28	/>
29	</el-form-item>	29	</el-form-item>
30		30
31	<el-tooltip	31	<el-tooltip
		32	v-model="capsTooltip"
		33	content="Caps lock is On"
		34	placement="right"
		35	manual
		36	>
32	v-model="capsTooltip"	37	<el-form-item prop="password">
33	content="Caps lock is On"	38	<span class="svg-container">
34	placement="right"	39	<svg-icon icon-class="password" />
35	manual	40	</span>
36	>	41	<el-input
37	<el-form-item prop="password">	42	:key="passwordType"
38	<span class="svg-container">	43	ref="password"
39	<svg-icon icon-class="password" />	44	v-model="loginForm.password"
40	</span>	45	:type="passwordType"
41	<el-input	46	:placeholder="$t('login.password')"
42	:key="passwordType"	47	name="password"
43	ref="password"	48	tabindex="2"
44	v-model="loginForm.password"	49	autocomplete="on"
45	:type="passwordType"	50	@keyup.native="checkCapslock"
46	:placeholder="$t('login.password')"	51	@blur="capsTooltip = false"
47	name="password"	52	@keyup.enter.native="handleLogin"
48	tabindex="2"	53	/>
49	autocomplete="on"	54	<span
		55	class="show-pwd"
		56	@click="showPwd"
		57	>
50	@keyup.native="checkCapslock"	58	<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
51	@blur="capsTooltip = false"	59	</span>
52	@keyup.enter.native="handleLogin"	60	</el-form-item>
53	/>	61	</el-tooltip>
54	<span	62	<div style="position:relative;text-align:right;height:30px;line-height:30px;border:0px #000 solid;margin-top:-20px;">
55	class="show-pwd"
56	@click="showPwd"
57	>	63	<!-- <el-checkbox v-model="checked">{{$t('rememberpassword')}}</el-checkbox> -->
58	<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />	64	<el-link type="primary">{{ $t('login.forgetpassword') }}</el-link>
		65	<el-link type="primary">{{ $t('login.signup') }}</el-link>
59	</span>	66	</div>
60	</el-form-item>	67	<el-button
61	</el-tooltip>	68	:loading="loading"
62	<div style="position:relative;text-align:right;height:30px;line-height:30px;border:0px #000 solid;margin-top:-20px;">	69	type="primary"
63	<!-- <el-checkbox v-model="checked">{{$t('rememberpassword')}}</el-checkbox> -->	70	style="width:100%;"
64	<el-link type="primary">{{ $t('login.forgetpassword') }}</el-link>	71	@click.native.prevent="handleLogin"
65	<el-link type="primary">{{ $t('login.signup') }}</el-link>	72	>{{ $t('login.logIn') }}</el-button>
66	</div>	73	<div style="position:relative;text-align:right;height:30px;line-height:30px;border:0px #000 solid;margin-bottom:30px;">
67	<el-button
68	:loading="loading"
69	type="primary"	74	<div class="tips">
70	style="width:100%;"	75	<el-button
		76	class="thirdparty-button"
		77	type="primary"
		78	@click="showDialog=true"
		79	>{{ $t('login.thirdparty') }}</el-button>
71	@click.native.prevent="handleLogin"	80	</div>
		81	<!-- <div class="tips">
		82	<span style="margin-right:18px;">{{ $t('login.username') }} : runner</span>
		83	<el-link type="primary">{{ $t('login.signup') }}</el-link>
		84	</div> -->
72	>{{ $t('login.logIn') }}</el-button>	85	</div>
73	<div style="position:relative;text-align:right;height:30px;line-height:30px;border:0px #000 solid;margin-bottom:30px;">	86	<div style="position:relative">
74	<div class="tips">	87	<!-- <div class="tips">
75	<el-button	88	<span>{{ $t('login.username') }} : admin</span>
76	class="thirdparty-button"	89	<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
77	type="primary"	90	</div>
78	@click="showDialog=true"	91	<div class="tips">
79	>{{ $t('login.thirdparty') }}</el-button>	92	<span style="margin-right:18px;">{{ $t('login.username') }} : assistant</span>
80	</div>	93	<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
81	<!-- <div class="tips">	94	</div>
82	<span style="margin-right:18px;">{{ $t('login.username') }} : runner</span>	95	<div class="tips">
83	<el-link type="primary">{{ $t('login.signup') }}</el-link>	96	<span style="margin-right:18px;">{{ $t('login.username') }} : runner</span>
84	</div> -->	97	<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
85	</div>	98	</div>
86	<div style="position:relative">	99	<div class="tips">
87	<!-- <div class="tips">	100	<span style="margin-right:18px;">{{ $t('login.username') }} : shoper</span>
88	<span>{{ $t('login.username') }} : admin</span>	101	<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
89	<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>	102	</div> -->
90	</div>
91	<div class="tips">
92	<span style="margin-right:18px;">{{ $t('login.username') }} : assistant</span>
93	<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
94	</div>
95	<div class="tips">	103	</div>
96	<span style="margin-right:18px;">{{ $t('login.username') }} : runner</span>	104	</el-form>
97	<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>	105
98	</div>	106	<el-dialog
		107	:title="$t('login.thirdparty')"
		108	:visible.sync="showDialog"
		109	>
99	<div class="tips">	110	{{ $t('login.thirdpartyTips') }}
100	<span style="margin-right:18px;">{{ $t('login.username') }} : shoper</span>	111	<br>
101	<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>	112	<br>
102	</div> -->	113	<br>
103	</div>	114	<social-sign />
104	</el-form>	115	</el-dialog>
105		116	<!-- <vfd></vfd> -->
106	<el-dialog	117	</div>
107	:title="$t('login.thirdparty')"	118	</template>
108	:visible.sync="showDialog"	119
109	>	120	<script>
110	{{ $t('login.thirdpartyTips') }}	121	import { validUsername } from '@/utils/validate'
111	<br>	122	import LangSelect from '@/components/LangSelect'
112	<br>	123	import SocialSign from './components/SocialSignin'
113	<br>	124	// import vfd from "vfd";
114	<social-sign />	125	export default {
115	</el-dialog>	126	name: 'Login',
116	<!-- <vfd></vfd> -->	127	// components: { LangSelect, SocialSign, vfd },
117	</div>	128	components: { LangSelect, SocialSign },
118	</template>	129	data() {
119		130	const validateUsername = (rule, value, callback) => {
120	<script>	131	if (!validUsername(value)) {
121	import { validUsername } from '@/utils/validate'	132	callback(new Error('Please enter the correct user name'))
122	import LangSelect from '@/components/LangSelect'	133	} else {
123	import SocialSign from './components/SocialSignin'	134	callback()
124	// import vfd from "vfd";	135	}
125	export default {	136	}
126	name: 'Login',	137	const validatePassword = (rule, value, callback) => {
127	// components: { LangSelect, SocialSign, vfd },	138	if (value.length < 6) {
128	components: { LangSelect, SocialSign },	139	callback(new Error('The password can not be less than 6 digits'))
129	data() {	140	} else {
130	const validateUsername = (rule, value, callback) => {	141	callback()
131	if (!validUsername(value)) {	142	}
132	callback(new Error('Please enter the correct user name'))	143	}
133	} else {	144	return {
134	callback()	145	loginForm: {
135	}	146	username: 'admin',
136	}	147	password: '111111'
137	const validatePassword = (rule, value, callback) => {	148	},
138	if (value.length < 6) {	149	loginRules: {
139	callback(new Error('The password can not be less than 6 digits'))	150	username: [
140	} else {	151	{ required: true, trigger: 'blur', validator: validateUsername }
141	callback()	152	],
142	}	153	password: [
143	}	154	{ required: true, trigger: 'blur', validator: validatePassword }
144	return {	155	]
145	loginForm: {	156	},
146	username: 'admin',	157	passwordType: 'password',
147	password: '111111'	158	capsTooltip: false,
148	},	159	loading: false,
149	loginRules: {	160	showDialog: false,
150	username: [	161	redirect: undefined,
151	{ required: true, trigger: 'blur', validator: validateUsername }	162	otherQuery: {}
152	],	163	}
153	password: [	164	},
154	{ required: true, trigger: 'blur', validator: validatePassword }	165	watch: {
155	]	166	$route: {
156	},	167	handler: function(route) {
157	passwordType: 'password',	168	const query = route.query
158	capsTooltip: false,	169	if (query) {
159	loading: false,	170	this.redirect = query.redirect
160	showDialog: false,	171	this.otherQuery = this.getOtherQuery(query)
161	redirect: undefined,	172	}
162	otherQuery: {}	173	},
163	}	174	immediate: true
164	},	175	}
165	watch: {	176	},
166	$route: {	177	created() {
167	handler: function(route) {	178	// window.addEventListener('storage', this.afterQRScan)
168	const query = route.query	179	},
169	if (query) {	180	mounted() {
170	this.redirect = query.redirect	181	if (this.loginForm.username === '') {
171	this.otherQuery = this.getOtherQuery(query)	182	this.$refs.username.focus()
172	}	183	} else if (this.loginForm.password === '') {
173	},	184	this.$refs.password.focus()
174	immediate: true	185	}
175	}	186	},
176	},	187	destroyed() {
177	created() {	188	// window.removeEventListener('storage', this.afterQRScan)
178	// window.addEventListener('storage', this.afterQRScan)	189	},
179	},	190	methods: {
180	mounted() {	191	checkCapslock(e) {
181	if (this.loginForm.username === '') {	192	const { key } = e
182	this.$refs.username.focus()	193	this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
183	} else if (this.loginForm.password === '') {	194	},
184	this.$refs.password.focus()	195	showPwd() {
185	}	196	if (this.passwordType === 'password') {
186	},	197	this.passwordType = ''
187	destroyed() {	198	} else {
188	// window.removeEventListener('storage', this.afterQRScan)	199	this.passwordType = 'password'
189	},	200	}
190	methods: {	201	this.$nextTick(() => {
191	checkCapslock(e) {	202	this.$refs.password.focus()
192	const { key } = e	203	})
193	this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'	204	},
194	},	205	handleLogin() {
195	showPwd() {	206	this.$refs.loginForm.validate(valid => {
196	if (this.passwordType === 'password') {	207	if (valid) {
197	this.passwordType = ''	208	this.loading = true
198	} else {	209	this.$store
199	this.passwordType = 'password'	210	.dispatch('user/login', this.loginForm)
200	}	211	.then(() => {
201	this.$nextTick(() => {	212	this.$router.push({
202	this.$refs.password.focus()	213	path: this.redirect \|\| '/',
203	})	214	query: this.otherQuery
204	},	215	})
205	handleLogin() {	216	this.loading = false
206	this.$refs.loginForm.validate(valid => {	217	})
207	if (valid) {	218	.catch(() => {
208	this.loading = true	219	this.loading = false
209	this.$store	220	})
210	.dispatch('user/login', this.loginForm)	221	} else {
211	.then(() => {	222	console.log('error submit!!')
212	this.$router.push({	223	return false
213	path: this.redirect \|\| '/',	224	}
214	query: this.otherQuery	225	})
215	})	226	},
216	this.loading = false	227	getOtherQuery(query) {
217	})	228	return Object.keys(query).reduce((acc, cur) => {
218	.catch(() => {	229	if (cur !== 'redirect') {
219	this.loading = false	230	acc[cur] = query[cur]
220	})	231	}
221	} else {	232	return acc
222	console.log('error submit!!')	233	}, {})
223	return false	234	}
224	}	235	// afterQRScan() {
225	})	236	// if (e.key === 'x-admin-oauth-code') {
226	},	237	// const code = getQueryObject(e.newValue)
227	getOtherQuery(query) {	238	// const codeMap = {
228	return Object.keys(query).reduce((acc, cur) => {	239	// wechat: 'code',
229	if (cur !== 'redirect') {	240	// tencent: 'code'
230	acc[cur] = query[cur]	241	// }
231	}	242	// const type = codeMap[this.auth_type]
232	return acc	243	// const codeName = code[type]
233	}, {})	244	// if (codeName) {
234	}	245	// this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
235	// afterQRScan() {	246	// this.$router.push({ path: this.redirect \|\| '/' })
236	// if (e.key === 'x-admin-oauth-code') {	247	// })
237	// const code = getQueryObject(e.newValue)	248	// } else {
238	// const codeMap = {	249	// alert('第三方登录失败')
239	// wechat: 'code',	250	// }
240	// tencent: 'code'	251	// }
241	// }	252	// }
242	// const type = codeMap[this.auth_type]	253	}
243	// const codeName = code[type]	254	}
244	// if (codeName) {	255	</script>
245	// this.$store.dispatch('LoginByThirdparty', codeName).then(() => {	256
246	// this.$router.push({ path: this.redirect \|\| '/' })	257	<style lang="scss">
247	// })	258	/* 修复input 背景不协调和光标变色 */
248	// } else {	259	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
249	// alert('第三方登录失败')	260
250	// }	261	$bg: #283443;
251	// }	262	$light_gray: #fff;
252	// }	263	$cursor: #fff;
253	}	264
254	}	265	@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
255	</script>	266	.login-container .el-input input {
256		267	color: $cursor;
257	<style lang="scss">	268	}
258	/* 修复input 背景不协调和光标变色 */	269	}
259	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */	270
260		271	/* reset element-ui css */
261	$bg: #283443;	272	.login-container {
262	$light_gray: #fff;	273	.el-input {
263	$cursor: #fff;	274	display: inline-block;
264		275	height: 47px;
265	@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {	276	width: 85%;
266	.login-container .el-input input {	277
267	color: $cursor;	278	input {
268	}	279	background: transparent;
269	}	280	border: 0px;
270		281	-webkit-appearance: none;
271	/* reset element-ui css */	282	border-radius: 0px;
272	.login-container {	283	padding: 12px 5px 12px 15px;
273	.el-input {	284	color: $light_gray;
274	display: inline-block;	285	height: 47px;
275	height: 47px;	286	caret-color: $cursor;
276	width: 85%;	287
277		288	&:-webkit-autofill {
278	input {	289	box-shadow: 0 0 0px 1000px $bg inset !important;
279	background: transparent;	290	-webkit-text-fill-color: $cursor !important;
280	border: 0px;	291	}
281	-webkit-appearance: none;	292	}
282	border-radius: 0px;	293	}
283	padding: 12px 5px 12px 15px;	294
284	color: $light_gray;	295	.el-form-item {
285	height: 47px;	296	border: 1px solid rgba(255, 255, 255, 0.1);
286	caret-color: $cursor;	297	background: rgba(0, 0, 0, 0.1);
287		298	border-radius: 5px;
288	&:-webkit-autofill {	299	color: #454545;
289	box-shadow: 0 0 0px 1000px $bg inset !important;	300	}
290	-webkit-text-fill-color: $cursor !important;	301	}
291	}	302	</style>
292	}	303
293	}	304	<style lang="scss" scoped>
294		305	$bg: #2d3a4b;
295	.el-form-item {	306	$dark_gray: #889aa4;
296	border: 1px solid rgba(255, 255, 255, 0.1);	307	$light_gray: #eee;
297	background: rgba(0, 0, 0, 0.1);	308
298	border-radius: 5px;	309	.login-container {
299	color: #454545;	310	min-height: 100%;
300	}	311	width: 100%;
301	}	312	background-color: $bg;
302	</style>	313	overflow: hidden;
303		314
304	<style lang="scss" scoped>	315	.login-form {
305	$bg: #2d3a4b;	316	position: relative;
306	$dark_gray: #889aa4;	317	width: 520px;
307	$light_gray: #eee;	318	max-width: 100%;
308		319	padding: 160px 35px 0;
309	.login-container {	320	margin: 0 auto;
310	min-height: 100%;	321	overflow: hidden;
311	width: 100%;	322	}
312	background-color: $bg;	323
313	overflow: hidden;	324	.tips {
314		325	font-size: 14px;
315	.login-form {	326	color: #fff;
316	position: relative;	327	margin-bottom: 10px;
317	width: 520px;	328
318	max-width: 100%;	329	span {
319	padding: 160px 35px 0;	330	&:first-of-type {
320	margin: 0 auto;	331	margin-right: 16px;
321	overflow: hidden;	332	}
322	}	333	}
323		334	}
324	.tips {	335
325	font-size: 14px;	336	.svg-container {
326	color: #fff;	337	padding: 6px 5px 6px 15px;
327	margin-bottom: 10px;	338	color: $dark_gray;
328		339	vertical-align: middle;
329	span {	340	width: 30px;
330	&:first-of-type {	341	display: inline-block;
331	margin-right: 16px;	342	}
332	}	343
333	}	344	.title-container {
334	}	345	position: relative;
335		346
336	.svg-container {	347	.title {
337	padding: 6px 5px 6px 15px;	348	font-size: 26px;
338	color: $dark_gray;	349	color: $light_gray;
339	vertical-align: middle;	350	margin: 0px auto 40px auto;
340	width: 30px;	351	text-align: center;
341	display: inline-block;	352	font-weight: bold;
342	}	353	}
343		354
344	.title-container {	355	.set-language {
345	position: relative;	356	color: #fff;
346		357	position: absolute;
347	.title {	358	top: 3px;
348	font-size: 26px;	359	font-size: 18px;
349	color: $light_gray;	360	right: 0px;
350	margin: 0px auto 40px auto;	361	cursor: pointer;
351	text-align: center;	362	}
352	font-weight: bold;	363	}
353	}	364
354		365	.show-pwd {
355	.set-language {	366	position: absolute;
356	color: #fff;	367	right: 10px;
357	position: absolute;	368	top: 7px;
358	top: 3px;	369	font-size: 16px;
359	font-size: 18px;	370	color: $dark_gray;
360	right: 0px;	371	cursor: pointer;
361	cursor: pointer;	372	user-select: none;
362	}	373	}
363	}	374
364		375	.thirdparty-button {
365	.show-pwd {	376	position: absolute;
366	position: absolute;	377	right: 0;
367	right: 10px;	378	bottom: 6px;
368	top: 7px;	379	}

src/views/meta/tree.vue

Diff comments Edit View file @0bd8168

	File was created	1	<template>
		2	<div class="login-container">
		3	<el-button
		4	type="primary"
		5	@click="() => addNode()"
		6	>{{ $t('users.add') }}</el-button>
		7	<el-tree
		8	ref="tree"
		9	:data="data"
		10	show-checkbox
		11	node-key="id"
		12	highlight-current
		13	check-strictly
		14	indent="40"
		15	icon-class="el-icon-pc"
		16	:props="defaultProps"
		17	>
		18	<!-- <el-tree
		19	:data="data"
		20	show-checkbox
		21	node-key="id"
		22	default-expand-all
		23	highlight-current
		24	isLeaf
		25	@node-contextmenu="()=>rightKey(node, data)"
		26	check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
		27	:expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点，默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
		28	:props="defaultProps"
		29	> -->
		30	<span
		31	slot-scope="{ node, data }"
		32	class="custom-tree-node"
		33	>
		34	<span>{{ node.label }}</span>
		35	<span>
		36	<el-button
		37	type="primary"
		38	icon="el-icon-upload"
		39	size="mini"
		40	@click="() => append(data)"
		41	>
		42	{{ $t('users.add') }}
		43	</el-button>
		44	<el-button
		45	type="primary"
		46	icon="el-icon-edit"
		47	size="mini"
		48	@click="() => update(node, data)"
		49	>
		50	{{ $t('users.update') }}
		51	</el-button>
		52	<el-button
		53	type="primary"
		54	icon="el-icon-delete"
		55	size="mini"
		56	class="danger"
		57	@click="() => remove(node, data)"
		58	>
		59	{{ $t('users.del') }}
		60	</el-button>
		61	</span>
		62	</span>
		63	</el-tree>
		64
		65	<!-- <div class="buttons">
		66	<el-button @click="getCheckedNodes">通过 node 获取</el-button>
		67	<el-button @click="getCheckedKeys">通过 key 获取</el-button>
		68	<el-button @click="setCheckedNodes">通过 node 设置</el-button>
		69	<el-button @click="setCheckedKeys">通过 key 设置</el-button>
		70	<el-button @click="resetChecked">清空</el-button>
		71	</div> -->
		72	</div>
		73	</template>
		74	<script>
		75	let id = 1000
		76	export default {
		77	data() {
		78	return {
		79	data: [
		80	{
		81	label: '成镜',
		82	id: '1',
		83	children: [
		84	{
		85	label: '款式',
		86	id: '11',
		87	children: [
		88	{ label: '青春学子风' },
		89	{ label: '休闲' },
		90	{ label: '商务' },
		91	{ label: '复古' },
		92	{ label: '时尚' },
		93	{ label: '质感哥特潮' },
		94	{ label: '轻简北欧风' },
		95	{ label: '理性几何派' },
		96	{ label: '多元新风尚' },
		97	{ label: '立体巴洛克' },
		98	{ label: '有机未来时' },
		99	{ label: '无界人文系' },
		100	{ label: '自然舒视角' },
		101	{ label: '流线洛可可' },
		102	{ label: '奶奶风' },
		103	{ label: '简约-极简文艺范' },
		104	{ label: '运动风' },
		105	{ label: '行政风' },
		106	{ label: '折射率' }
		107	]
		108	},
		109	{ label: '个性化服务', id: '267', children: [] },
		110	{
		111	label: '赠品',
		112	id: '259',
		113	children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
		114	},
		115	{
		116	label: '场景',
		117	id: '258',
		118	children: [
		119	{ label: '学校场景' },
		120	{ label: '出行交际' },
		121	{ label: '夜店迷人' },
		122	{ label: '明星同款' }
		123	]
		124	},
		125	{
		126	label: '销售保障',
		127	id: '245',
		128	children: [
		129	{ label: '可退' },
		130	{ label: '可换' },
		131	{ label: '可修' }
		132	]
		133	},
		134	{
		135	label: '功能',
		136	id: '140',
		137	children: [
		138	{ label: '防踩压' },
		139	{ label: '防扭曲' },
		140	{ label: '抗过敏' },
		141	{ label: '防腐蚀' },
		142	{ label: '耐磨损' },
		143	{ label: '抗蓝光' }
		144	]
		145	},
		146	{
		147	label: '品牌',
		148	id: '71',
		149	children: [
		150	{ label: '购易' },
		151	{ label: '海俪恩' },
		152	{ label: '沙漠风暴' },
		153	{ label: '古诗' },
		154	{ label: '暴龙' },
		155	{ label: '犀牛' },
		156	{ label: 'Ray-Ban雷朋' },
		157	{ label: 'PARIM派丽蒙' },
		158	{ label: '石狼' },
		159	{ label: '木九十' }
		160	]
		161	},
		162	{
		163	label: '边形',
		164	id: '49',
		165	children: [
		166	{ label: '半框' },
		167	{ label: '全框' },
		168	{ label: '无框' }
		169	]
		170	},
		171	{
		172	label: '性别',
		173	id: '23',
		174	children: [{ label: '男性' }, { label: '女性' }]
		175	},
		176	{
		177	label: '梁型',
		178	id: '20',
		179	children: [{ label: '双梁' }, { label: '单梁' }]
		180	},
		181	{
		182	label: '重量',
		183	id: '19',
		184	children: [{ label: '30克以下' }, { label: '80克以上' }]
		185	},
		186	{
		187	label: '适用脸型',
		188	id: '15',
		189	children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
		190	},
		191	{
		192	label: '形状',
		193	id: '14',
		194	children: [
		195	{ label: '正圆形' },
		196	{ label: '椭圆形' },
		197	{ label: '方圆' },
		198	{ label: '方形' },
		199	{ label: '多边形' },
		200	{ label: '内三角(蛤蟆)' },
		201	{ label: '外三角(蝶形)' }
		202	]
		203	},
		204	{ label: '年龄', id: '12', children: [{ label: '通用' }] },
		205	{
		206	label: '材质',
		207	id: '10',
		208	children: [
		209	{ label: '板材' },
		210	{ label: '纯钛' },
		211	{ label: 'TR90' },
		212	{ label: '木质' },
		213	{ label: '竹质' },
		214	{ label: 'β钛' },
		215	{ label: 'PC' },
		216	{ label: 'ULTEM塑钢' },
		217	{ label: '钨钛塑钢' },
		218	{ label: '镁铝合金' },
		219	{ label: '碳纤维' }
		220	]
		221	},
		222	{ label: '折射率', id: '286', children: [] },
		223	{
		224	label: '颜色',
		225	id: '13',
		226	children: [
		227	{ label: '金色' },
		228	{ label: '银色' },
		229	{ label: '黑色' },
		230	{ label: '彩色' },
		231	{ label: '枪色' }
		232	]
		233	}
		234	]
		235	},
		236	{
		237	label: '镜片',
		238	id: '2',
		239	children: [
		240	{
		241	label: '面型',
		242	id: '85',
		243	children: [{ label: '球面单光' }, { label: '非球面单光' }]
		244	},
		245	{ label: '近视度数', id: '92', children: [] },
		246	{ label: '散光', id: '93', children: [] },
		247	{
		248	label: '功能',
		249	id: '95',
		250	children: [
		251	{ label: '防起雾' },
		252	{ label: '防蓝光' },
		253	{ label: '防紫外线' },
		254	{ label: '偏光' },
		255	{ label: '染色' },
		256	{ label: '抗疲劳' },
		257	{ label: '青少年渐进' },
		258	{ label: '内渐进' },
		259	{ label: '变色' },
		260	{ label: '双光' },
		261	{ label: '耐磨损' },
		262	{ label: '防尘' },
		263	{ label: '防水' },
		264	{ label: '防摔' },
		265	{ label: '防指纹' },
		266	{ label: '防反光' }
		267	]
		268	},
		269	{
		270	label: '颜色',
		271	id: '100',
		272	children: [
		273	{ label: '透明' },
		274	{ label: '染色' },
		275	{ label: '变色' },
		276	{ label: '单色' }
		277	]
		278	},
		279	{
		280	label: '折射率',
		281	id: '101',
		282	children: [
		283	{ label: '1.56' },
		284	{ label: '1.60' },
		285	{ label: '1.65' },
		286	{ label: '1.67' },
		287	{ label: '1.71' },
		288	{ label: '1.74' }
		289	]
		290	},
		291	{ label: '阿贝数（色散）', id: '102', children: [] },
		292	{ label: '重量', id: '103', children: [] },
		293	{
		294	label: '材质',
		295	id: '104',
		296	children: [
		297	{ label: '树脂' },
		298	{ label: '玻璃' },
		299	{ label: '宇宙PC' },
		300	{ label: 'PC' }
		301	]
		302	},
		303	{
		304	label: '品牌',
		305	id: '118',
		306	children: [
		307	{ label: '好视力' },
		308	{ label: 'RAISE锐视' },
		309	{ label: '依视路' },
		310	{ label: '凯米' },
		311	{ label: '蔡司' },
		312	{ label: '舒曼' }
		313	]
		314	},
		315	{
		316	label: '销售保障',
		317	id: '249',
		318	children: [
		319	{ label: '可退' },
		320	{ label: '可换' },
		321	{ label: '可修' }
		322	]
		323	}
		324	]
		325	},
		326	{
		327	label: '隐形眼镜',
		328	id: '88',
		329	children: [
		330	{
		331	label: '颜色',
		332	id: '105',
		333	children: [
		334	{ label: '绿' },
		335	{ label: '灰' },
		336	{ label: '黑' },
		337	{ label: '紫' },
		338	{ label: '蓝' },
		339	{ label: '棕色' },
		340	{ label: '紫色' }
		341	]
		342	},
		343	{
		344	label: '颜料',
		345	id: '106',
		346	children: [{ label: '水性' }, { label: '油性' }]
		347	},
		348	{ label: '度数', id: '107', children: [] },
		349	{
		350	label: '周期',
		351	id: '108',
		352	children: [
		353	{ label: '日抛' },
		354	{ label: '周抛' },
		355	{ label: '双周抛' },
		356	{ label: '月抛' },
		357	{ label: '季抛' },
		358	{ label: '半年抛' },
		359	{ label: '年抛' }
		360	]
		361	},
		362	{
		363	label: '品牌',
		364	id: '133',
		365	children: [
		366	{ label: 'HolyNara' },
		367	{ label: '爱尔康' },
		368	{ label: 'MaxLook' },
		369	{ label: 'NEO' },
		370	{ label: 'GEO' },
		371	{ label: '实瞳' },
		372	{ label: '茵洛' },
		373	{ label: 'DAZZSHOP' },
		374	{ label: 'O-LENS' },
		375	{ label: 'envie' },
		376	{ label: '曼秀雷敦' },
		377	{ label: '妃蜜莉' },
		378	{ label: '海俪恩' },
		379	{ label: '凯达' },
		380	{ label: '蔡司' },
		381	{ label: '酷视' },
		382	{ label: 'LILMOON' },
		383	{ label: 'RICHBABY' },
		384	{ label: 'T-Garden' },
		385	{ label: 'lenstown' },
		386	{ label: '新加坡P2' },
		387	{ label: '星欧' },
		388	{ label: '美尼康' },
		389	{ label: '美汐' },
		390	{ label: '欧舒天' },
		391	{ label: '海昌' },
		392	{ label: '菲士康' },
		393	{ label: '卫康' },
		394	{ label: '库博' },
		395	{ label: '安视优' },
		396	{ label: '美若康' },
		397	{ label: '视康' },
		398	{ label: '澜柏' },
		399	{ label: '3N' },
		400	{ label: 'BIJOU' },
		401	{ label: '依视明' },
		402	{ label: '博士伦' },
		403	{ label: '瞳昕' },
		404	{ label: '科莱博' },
		405	{ label: '绮芙莉' },
		406	{ label: '雅培' },
		407	{ label: '爱能视' },
		408	{ label: '女神秘语' },
		409	{ label: '博视顿' },
		410	{ label: '妆美堂' },
		411	{ label: '人鱼姬' },
		412	{ label: 'EverColor' },
		413	{ label: 'Sincere' }
		414	]
		415	},
		416	{
		417	label: '工艺',
		418	id: '159',
		419	children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
		420	},
		421	{
		422	label: '材质',
		423	id: '164',
		424	children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
		425	},
		426	{
		427	label: '含水量',
		428	id: '174',
		429	children: [
		430	{ label: '0-40%' },
		431	{ label: '40-44%' },
		432	{ label: '45%以上' }
		433	]
		434	},
		435	{
		436	label: '基弧',
		437	id: '178',
		438	children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
		439	},
		440	{
		441	label: '直径',
		442	id: '181',
		443	children: [{ label: '13.4-14' }, { label: '14以上' }]
		444	},
		445	{
		446	label: '中心厚度',
		447	id: '184',
		448	children: [
		449	{ label: '0.0 - 0.03' },
		450	{ label: '0.04 - 0.09' },
		451	{ label: '0.1以上' }
		452	]
		453	},
		454	{ label: '销售保障', id: '253', children: [] },
		455	{ label: '赠品', id: '260', children: [] }
		456	]
		457	},
		458	{
		459	label: '特种镜',
		460	id: '146',
		461	children: [
		462	{
		463	label: '镜面颜色',
		464	id: '237',
		465	children: [{ label: '透明' }, { label: '亮金色' }]
		466	},
		467	{
		468	label: '品牌',
		469	id: '238',
		470	children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
		471	},
		472	{
		473	label: '销售保障',
		474	id: '254',
		475	children: [{ label: '包退' }, { label: '包换' }]
		476	},
		477	{
		478	label: '功能',
		479	id: '268',
		480	children: [
		481	{ label: '防风镜' },
		482	{ label: '防爆溅工作镜' },
		483	{ label: '泳镜' },
		484	{ label: '智能镜' }
		485	]
		486	}
		487	]
		488	}
		489	],
		490	defaultProps: {
		491	children: 'children',
		492	label: 'label'
		493	}
		494	}
		495	},
		496	methods: {
		497	getCheckedNodes() {
		498	console.log(this.$refs.tree.getCheckedNodes())
		499	},
		500	getCheckedKeys() {
		501	console.log(this.$refs.tree.getCheckedKeys())
		502	},
		503	addNode() {
		504	let h
		505	this.$message({
		506	message: h('p', null, [
		507	h('span', null, '添加一个新节点 ')
		508	// h("i", { style: "color: teal" }, "VNode")
		509	])
		510	})
		511	},
		512	append(data) {
		513	const newChild = { id: id++, label: 'testtest', children: [] }
		514	if (!data.children) {
		515	this.$set(data, 'children', [])
		516	}
		517	data.children.push(newChild)
		518	},
		519	remove(node, data) {
		520	// 删除
		521	const parent = node.parent
		522	const children = parent.data.children \|\| parent.data
		523	const index = children.findIndex(d => d.id === data.id)
		524	children.splice(index, 1)
		525	},
		526	rightKey(node, data) {
		527	// 右键
		528	const h = this.$createElement
		529	// console.log(data, this.$refs.tree);
		530	this.$message({
		531	message: h('p', null, [
		532	h('span', null, '右键了啊！ ' + node + data),
		533	h('i', { style: 'color: teal' }, 'VNode')
		534	])
		535	})
		536	},
		537	update(node, data) {
		538	// 更新
		539	const h = this.$createElement
		540	this.$message({
		541	message: h('p', null, [
		542	h('span', null, '内容可以是 '),
		543	h('i', { style: 'color: teal' }, 'VNode')
		544	])
		545	})
		546	},
		547	setCheckedNodes() {
		548	this.$refs.tree.setCheckedNodes([
		549	{
		550	id: 5,
		551	label: '二级 2-1'
		552	},
		553	{
		554	id: 9,
		555	label: '三级 1-1-1'
		556	}
		557	])
		558	},
		559	setCheckedKeys() {
		560	this.$refs.tree.setCheckedKeys([3])
		561	},
		562	resetChecked() {
		563	this.$refs.tree.setCheckedKeys([])
		564	}
		565	}
		566	}
		567	</script>
		568	<style>
		569	.custom-tree-node {
		570	flex: 1;
		571	display: flex;
		572	align-items: center;
		573	justify-content: space-between;
		574	font-size: 14px;
		575	padding-right: 8px;
		576	}
		577	</style>
1	<template>	578

src/views/order/list.vue

Diff comments Edit View file @0bd8168

	File was created	1	<template>
		2	<div class="app-container">
		3	<div class="filter-container">
		4	<el-input
		5	v-model="listQuery.title"
		6	:placeholder="$t('table.title')"
		7	style="width: 200px;"
		8	class="filter-item"
		9	@keyup.enter.native="handleFilter"
		10	/>
		11	<el-select
		12	v-model="listQuery.importance"
		13	:placeholder="$t('table.importance')"
		14	clearable
		15	style="width: 90px"
		16	class="filter-item"
		17	>
		18	<el-option
		19	v-for="item in importanceOptions"
		20	:key="item"
		21	:label="item"
		22	:value="item"
		23	/>
		24	</el-select>
		25	<el-select
		26	v-model="listQuery.type"
		27	:placeholder="$t('table.type')"
		28	clearable
		29	class="filter-item"
		30	style="width: 130px"
		31	>
		32	<el-option
		33	v-for="item in calendarTypeOptions"
		34	:key="item.key"
		35	:label="item.display_name+'('+item.key+')'"
		36	:value="item.key"
		37	/>
		38	</el-select>
		39	<el-select
		40	v-model="listQuery.sort"
		41	style="width: 140px"
		42	class="filter-item"
		43	@change="handleFilter"
		44	>
		45	<el-option
		46	v-for="item in sortOptions"
		47	:key="item.key"
		48	:label="item.label"
		49	:value="item.key"
		50	/>
		51	</el-select>
		52	<el-button
		53	v-waves
		54	class="filter-item"
		55	type="primary"
		56	icon="el-icon-search"
		57	@click="handleFilter"
		58	>
		59	{{ $t('table.search') }}
		60	</el-button>
		61	<el-button
		62	class="filter-item"
		63	style="margin-left: 10px;"
		64	type="primary"
		65	icon="el-icon-edit"
		66	@click="handleCreate"
		67	>
		68	{{ $t('table.add') }}
		69	</el-button>
		70	<el-button
		71	v-waves
		72	:loading="downloadLoading"
		73	class="filter-item"
		74	type="primary"
		75	icon="el-icon-download"
		76	@click="handleDownload"
		77	>
		78	{{ $t('table.export') }}
		79	</el-button>
		80	<el-checkbox
		81	v-model="showReviewer"
		82	class="filter-item"
		83	style="margin-left:15px;"
		84	@change="tableKey=tableKey+1"
		85	>
		86	{{ $t('table.reviewer') }}
		87	</el-checkbox>
		88	</div>
		89
		90	<el-table
		91	:key="tableKey"
		92	v-loading="listLoading"
		93	:data="list"
		94	border
		95	fit
		96	highlight-current-row
		97	style="width: 100%;"
		98	@sort-change="sortChange"
		99	>
		100	<el-table-column
		101	:label="$t('table.id')"
		102	prop="id"
		103	sortable="custom"
		104	align="center"
		105	width="80"
		106	:class-name="getSortClass('id')"
		107	>
		108	<template slot-scope="{row}">
		109	<span>{{ row.id }}</span>
		110	</template>
		111	</el-table-column>
		112	<el-table-column
		113	:label="$t('table.date')"
		114	width="150px"
		115	align="center"
		116	>
		117	<template slot-scope="{row}">
		118	<span>{{ row.timestamp \| parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
		119	</template>
		120	</el-table-column>
		121	<el-table-column
		122	:label="$t('table.title')"
		123	min-width="150px"
		124	>
		125	<template slot-scope="{row}">
		126	<span
		127	class="link-type"
		128	@click="handleUpdate(row)"
		129	>{{ row.title }}</span>
		130	<el-tag>{{ row.type \| typeFilter }}</el-tag>
		131	</template>
		132	</el-table-column>
		133	<el-table-column
		134	:label="$t('table.author')"
		135	width="110px"
		136	align="center"
		137	>
		138	<template slot-scope="{row}">
		139	<span>{{ row.author }}</span>
		140	</template>
		141	</el-table-column>
		142	<el-table-column
		143	v-if="showReviewer"
		144	:label="$t('table.reviewer')"
		145	width="110px"
		146	align="center"
		147	>
		148	<template slot-scope="{row}">
		149	<span style="color:red;">{{ row.reviewer }}</span>
		150	</template>
		151	</el-table-column>
		152	<el-table-column
		153	:label="$t('table.importance')"
		154	width="80px"
		155	>
		156	<template slot-scope="{row}">
		157	<svg-icon
		158	v-for="n in +row.importance"
		159	:key="n"
		160	icon-class="star"
		161	class="meta-item__icon"
		162	/>
		163	</template>
		164	</el-table-column>
		165	<el-table-column
		166	:label="$t('table.readings')"
		167	align="center"
		168	width="95"
		169	>
		170	<template slot-scope="{row}">
		171	<span
		172	v-if="row.pageviews"
		173	class="link-type"
		174	@click="handleFetchPv(row.pageviews)"
		175	>{{ row.pageviews }}</span>
		176	<span v-else>0</span>
		177	</template>
		178	</el-table-column>
		179	<el-table-column
		180	:label="$t('table.status')"
		181	class-name="status-col"
		182	width="100"
		183	>
		184	<template slot-scope="{row}">
		185	<el-tag :type="row.status \| statusFilter">
		186	{{ row.status }}
		187	</el-tag>
		188	</template>
		189	</el-table-column>
		190	<el-table-column
		191	:label="$t('table.actions')"
		192	align="center"
		193	width="230"
		194	class-name="small-padding fixed-width"
		195	>
		196	<template slot-scope="{row,$index}">
		197	<el-button
		198	type="primary"
		199	size="mini"
		200	@click="handleUpdate(row)"
		201	>
		202	{{ $t('table.edit') }}
		203	</el-button>
		204	<el-button
		205	v-if="row.status!='published'"
		206	size="mini"
		207	type="success"
		208	@click="handleModifyStatus(row,'published')"
		209	>
		210	{{ $t('table.publish') }}
		211	</el-button>
		212	<el-button
		213	v-if="row.status!='draft'"
		214	size="mini"
		215	@click="handleModifyStatus(row,'draft')"
		216	>
		217	{{ $t('table.draft') }}
		218	</el-button>
		219	<el-button
		220	v-if="row.status!='deleted'"
		221	size="mini"
		222	type="danger"
		223	@click="handleDelete(row,$index)"
		224	>
		225	{{ $t('table.delete') }}
		226	</el-button>
		227	</template>
		228	</el-table-column>
		229	</el-table>
		230
		231	<pagination
		232	v-show="total>0"
		233	:total="total"
		234	:page.sync="listQuery.page"
		235	:limit.sync="listQuery.limit"
		236	@pagination="getList"
		237	/>
		238
		239	<el-dialog
		240	:title="textMap[dialogStatus]"
		241	:visible.sync="dialogFormVisible"
		242	>
		243	<el-form
		244	ref="dataForm"
		245	:rules="rules"
		246	:model="temp"
		247	label-position="left"
		248	label-width="70px"
		249	style="width: 400px; margin-left:50px;"
		250	>
		251	<el-form-item
		252	:label="$t('table.type')"
		253	prop="type"
		254	>
		255	<el-select
		256	v-model="temp.type"
		257	class="filter-item"
		258	placeholder="Please select"
		259	>
		260	<el-option
		261	v-for="item in calendarTypeOptions"
		262	:key="item.key"
		263	:label="item.display_name"
		264	:value="item.key"
		265	/>
		266	</el-select>
		267	</el-form-item>
		268	<el-form-item
		269	:label="$t('table.date')"
		270	prop="timestamp"
		271	>
		272	<el-date-picker
		273	v-model="temp.timestamp"
		274	type="datetime"
		275	placeholder="Please pick a date"
		276	/>
		277	</el-form-item>
		278	<el-form-item
		279	:label="$t('table.title')"
		280	prop="title"
		281	>
		282	<el-input v-model="temp.title" />
		283	</el-form-item>
		284	<el-form-item :label="$t('table.status')">
		285	<el-select
		286	v-model="temp.status"
		287	class="filter-item"
		288	placeholder="Please select"
		289	>
		290	<el-option
		291	v-for="item in statusOptions"
		292	:key="item"
		293	:label="item"
		294	:value="item"
		295	/>
		296	</el-select>
		297	</el-form-item>
		298	<el-form-item :label="$t('table.importance')">
		299	<el-rate
		300	v-model="temp.importance"
		301	:colors="['#99A9BF', '#F7BA2A', '#FF9900']"
		302	:max="3"
		303	style="margin-top:8px;"
		304	/>
		305	</el-form-item>
		306	<el-form-item :label="$t('table.remark')">
		307	<el-input
		308	v-model="temp.remark"
		309	:autosize="{ minRows: 2, maxRows: 4}"
		310	type="textarea"
		311	placeholder="Please input"
		312	/>
		313	</el-form-item>
		314	</el-form>
		315	<div
		316	slot="footer"
		317	class="dialog-footer"
		318	>
		319	<el-button @click="dialogFormVisible = false">
		320	{{ $t('table.cancel') }}
		321	</el-button>
		322	<el-button
		323	type="primary"
		324	@click="dialogStatus==='create'?createData():updateData()"
		325	>
		326	{{ $t('table.confirm') }}
		327	</el-button>
		328	</div>
		329	</el-dialog>
		330
		331	<el-dialog
		332	:visible.sync="dialogPvVisible"
		333	title="Reading statistics"
		334	>
		335	<el-table
		336	:data="pvData"
		337	border
		338	fit
		339	highlight-current-row
		340	style="width: 100%"
		341	>
		342	<el-table-column
		343	prop="key"
		344	label="Channel"
		345	/>
		346	<el-table-column
		347	prop="pv"
		348	label="Pv"
		349	/>
		350	</el-table>
		351	<span
		352	slot="footer"
		353	class="dialog-footer"
		354	>
		355	<el-button
		356	type="primary"
		357	@click="dialogPvVisible = false"
		358	>{{ $t('table.confirm') }}</el-button>
		359	</span>
		360	</el-dialog>
		361	</div>
		362	</template>
		363
		364	<script>
		365	import {
		366	fetchList,
		367	fetchPv,
		368	createArticle,
		369	updateArticle
		370	} from '@/api/article'
		371	import waves from '@/directive/waves' // waves directive
		372	import { parseTime } from '@/utils'
		373	import Pagination from '@/components/Pagination' // secondary package based on el-pagination
		374
		375	const calendarTypeOptions = [
		376	{ key: 'CN', display_name: 'China' },
		377	{ key: 'US', display_name: 'USA' },
		378	{ key: 'JP', display_name: 'Japan' },
		379	{ key: 'EU', display_name: 'Eurozone' }
		380	]
		381
		382	// arr to obj, such as { CN : "China", US : "USA" }
		383	const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
		384	acc[cur.key] = cur.display_name
		385	return acc
		386	}, {})
		387
		388	export default {
		389	name: 'ComplexTable',
		390	components: { Pagination },
		391	directives: { waves },
		392	filters: {
		393	statusFilter(status) {
		394	const statusMap = {
		395	published: 'success',
		396	draft: 'info',
		397	deleted: 'danger'
		398	}
		399	return statusMap[status]
		400	},
		401	typeFilter(type) {
		402	return calendarTypeKeyValue[type]
		403	}
		404	},
		405	data() {
		406	return {
		407	tableKey: 0,
		408	list: null,
		409	total: 0,
		410	listLoading: true,
		411	listQuery: {
		412	page: 1,
		413	limit: 20,
		414	importance: undefined,
		415	title: undefined,
		416	type: undefined,
		417	sort: '+id'
		418	},
		419	importanceOptions: [1, 2, 3],
		420	calendarTypeOptions,
		421	sortOptions: [
		422	{ label: 'ID Ascending', key: '+id' },
		423	{ label: 'ID Descending', key: '-id' }
		424	],
		425	statusOptions: ['published', 'draft', 'deleted'],
		426	showReviewer: false,
		427	temp: {
		428	id: undefined,
		429	importance: 1,
		430	remark: '',
		431	timestamp: new Date(),
		432	title: '',
		433	type: '',
		434	status: 'published'
		435	},
		436	dialogFormVisible: false,
		437	dialogStatus: '',
		438	textMap: {
		439	update: 'Edit',
		440	create: 'Create'
		441	},
		442	dialogPvVisible: false,
		443	pvData: [],
		444	rules: {
		445	type: [
		446	{ required: true, message: 'type is required', trigger: 'change' }
		447	],
		448	timestamp: [
		449	{
		450	type: 'date',
		451	required: true,
		452	message: 'timestamp is required',
		453	trigger: 'change'
		454	}
		455	],
		456	title: [
		457	{ required: true, message: 'title is required', trigger: 'blur' }
		458	]
		459	},
		460	downloadLoading: false
		461	}
		462	},
		463	created() {
		464	this.getList()
		465	},
		466	methods: {
		467	getList() {
		468	this.listLoading = true
		469	fetchList(this.listQuery).then(response => {
		470	this.list = response.data.items
		471	this.total = response.data.total
		472
		473	// Just to simulate the time of the request
		474	setTimeout(() => {
		475	this.listLoading = false
		476	}, 1.5 * 1000)
		477	})
		478	},
		479	handleFilter() {
		480	this.listQuery.page = 1
		481	this.getList()
		482	},
		483	handleModifyStatus(row, status) {
		484	this.$message({
		485	message: '操作成功',
		486	type: 'success'
		487	})
		488	row.status = status
		489	},
		490	sortChange(data) {
		491	const { prop, order } = data
		492	if (prop === 'id') {
		493	this.sortByID(order)
		494	}
		495	},
		496	sortByID(order) {
		497	if (order === 'ascending') {
		498	this.listQuery.sort = '+id'
		499	} else {
		500	this.listQuery.sort = '-id'
		501	}
		502	this.handleFilter()
		503	},
		504	resetTemp() {
		505	this.temp = {
		506	id: undefined,
		507	importance: 1,
		508	remark: '',
		509	timestamp: new Date(),
		510	title: '',
		511	status: 'published',
		512	type: ''
		513	}
		514	},
		515	handleCreate() {
		516	this.resetTemp()
		517	this.dialogStatus = 'create'
		518	this.dialogFormVisible = true
		519	this.$nextTick(() => {
		520	this.$refs['dataForm'].clearValidate()
		521	})
		522	},
		523	createData() {
		524	this.$refs['dataForm'].validate(valid => {
		525	if (valid) {
		526	this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
		527	this.temp.author = '秀野堂主'
		528	createArticle(this.temp).then(() => {
		529	this.list.unshift(this.temp)
		530	this.dialogFormVisible = false
		531	this.$notify({
		532	title: '成功',
		533	message: '创建成功',
		534	type: 'success',
		535	duration: 2000
		536	})
		537	})
		538	}
		539	})
		540	},
		541	handleUpdate(row) {
		542	this.temp = Object.assign({}, row) // copy obj
		543	this.temp.timestamp = new Date(this.temp.timestamp)
		544	this.dialogStatus = 'update'
		545	this.dialogFormVisible = true
		546	this.$nextTick(() => {
		547	this.$refs['dataForm'].clearValidate()
		548	})
		549	},
		550	updateData() {
		551	this.$refs['dataForm'].validate(valid => {
		552	if (valid) {
		553	const tempData = Object.assign({}, this.temp)
		554	tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
		555	updateArticle(tempData).then(() => {
		556	const index = this.list.findIndex(v => v.id === this.temp.id)
		557	this.list.splice(index, 1, this.temp)
		558	this.dialogFormVisible = false
		559	this.$notify({
		560	title: '成功',
		561	message: '更新成功',
		562	type: 'success',
		563	duration: 2000
		564	})
		565	})
		566	}
		567	})
		568	},
		569	handleDelete(row, index) {
		570	this.$notify({
		571	title: '成功',
		572	message: '删除成功',
		573	type: 'success',
		574	duration: 2000
		575	})
		576	this.list.splice(index, 1)
		577	},
		578	handleFetchPv(pv) {
		579	fetchPv(pv).then(response => {
		580	this.pvData = response.data.pvData
		581	this.dialogPvVisible = true
		582	})
		583	},
		584	handleDownload() {
		585	this.downloadLoading = true
		586	import('@/vendor/Export2Excel').then(excel => {
		587	const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
		588	const filterVal = [
		589	'timestamp',
		590	'title',
		591	'type',
		592	'importance',
		593	'status'
		594	]
		595	const data = this.formatJson(filterVal)
		596	excel.export_json_to_excel({
		597	header: tHeader,
		598	data,
		599	filename: 'table-list'
		600	})
		601	this.downloadLoading = false
		602	})
		603	},
		604	formatJson(filterVal) {
		605	return this.list.map(v =>
		606	filterVal.map(j => {
		607	if (j === 'timestamp') {
		608	return parseTime(v[j])
		609	} else {
		610	return v[j]
		611	}
		612	})
		613	)
		614	},
		615	getSortClass: function(key) {
		616	const sort = this.listQuery.sort
		617	return sort === `+${key}` ? 'ascending' : 'descending'
		618	}
		619	}
		620	}
		621	</script>
1	<template>	622

src/views/prod/list.vue

Diff comments Edit View file @0bd8168

	File was created	1	<template>
		2	<div class="app-container">
		3	<el-table
		4	v-loading="listLoading"
		5	:data="list"
		6	border
		7	fit
		8	highlight-current-row
		9	style="width: 100%"
		10	>
		11	<el-table-column
		12	align="center"
		13	label="ID"
		14	width="80"
		15	>
		16	<template slot-scope="scope">
		17	<span>{{ scope.row.id }}</span>
		18	</template>
		19	</el-table-column>
		20
		21	<el-table-column
		22	width="180px"
		23	align="center"
		24	label="Date"
		25	>
		26	<template slot-scope="scope">
		27	<span>{{ scope.row.timestamp \| parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
		28	</template>
		29	</el-table-column>
		30
		31	<el-table-column
		32	width="120px"
		33	align="center"
		34	label="Author"
		35	>
		36	<template slot-scope="scope">
		37	<span>{{ scope.row.author }}</span>
		38	</template>
		39	</el-table-column>
		40
		41	<el-table-column
		42	width="100px"
		43	label="Importance"
		44	>
		45	<template slot-scope="scope">
		46	<svg-icon
		47	v-for="n in +scope.row.importance"
		48	:key="n"
		49	icon-class="star"
		50	class="meta-item__icon"
		51	/>
		52	</template>
		53	</el-table-column>
		54
		55	<el-table-column
		56	class-name="status-col"
		57	label="Status"
		58	width="110"
		59	>
		60	<template slot-scope="{row}">
		61	<el-tag :type="row.status \| statusFilter">
		62	{{ row.status }}
		63	</el-tag>
		64	</template>
		65	</el-table-column>
		66
		67	<el-table-column
		68	min-width="300px"
		69	label="Title"
		70	>
		71	<template slot-scope="{row}">
		72	<router-link
		73	:to="'/example/edit/'+row.id"
		74	class="link-type"
		75	>
		76	<span>{{ row.title }}</span>
		77	</router-link>
		78	</template>
		79	</el-table-column>
		80
		81	<el-table-column
		82	align="center"
		83	label="Actions"
		84	width="120"
		85	>
		86	<template slot-scope="scope">
		87	<router-link :to="'/example/edit/'+scope.row.id">
		88	<el-button
		89	type="primary"
		90	size="small"
		91	icon="el-icon-edit"
		92	>
		93	Edit
		94	</el-button>
		95	</router-link>
		96	</template>
		97	</el-table-column>
		98	</el-table>
		99
		100	<pagination
		101	v-show="total>0"
		102	:total="total"
		103	:page.sync="listQuery.page"
		104	:limit.sync="listQuery.limit"
		105	@pagination="getList"
		106	/>
		107	</div>
		108	</template>
		109
		110	<script>
		111	import { fetchList } from '@/api/article'
		112	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
		113
		114	export default {
		115	name: 'ArticleList',
		116	components: { Pagination },
		117	filters: {
		118	statusFilter(status) {
		119	const statusMap = {
		120	published: 'success',
		121	draft: 'info',
		122	deleted: 'danger'
		123	}
		124	return statusMap[status]
		125	}
		126	},
		127	data() {
		128	return {
		129	list: null,
		130	total: 0,
		131	listLoading: true,
		132	listQuery: {
		133	page: 1,
		134	limit: 20
		135	}
		136	}
		137	},
		138	created() {
		139	this.getList()
		140	},
		141	methods: {
		142	getList() {
		143	this.listLoading = true
		144	fetchList(this.listQuery).then(response => {
		145	this.list = response.data.items
		146	this.total = response.data.total
		147	this.listLoading = false
		148	})
		149	}
		150	}
		151	}
		152	</script>
		153
		154	<style scoped>
		155	.edit-input {
		156	padding-right: 100px;
		157	}
		158	.cancel-btn {
		159	position: absolute;
		160	right: 15px;
		161	top: 10px;
		162	}
		163	</style>
1	<template>	164

src/views/site/list.vue

Diff comments Edit View file @0bd8168

	File was created	1	<template>
		2	<div class="app-container">
		3	<el-table
		4	v-loading="listLoading"
		5	:data="list"
		6	border
		7	fit
		8	highlight-current-row
		9	style="width: 100%"
		10	>
		11	<el-table-column
		12	align="center"
		13	label="ID"
		14	width="80"
		15	>
		16	<template slot-scope="{row}">
		17	<span>{{ row.id }}</span>
		18	</template>
		19	</el-table-column>
		20
		21	<el-table-column
		22	width="180px"
		23	align="center"
		24	label="Date"
		25	>
		26	<template slot-scope="{row}">
		27	<span>{{ row.timestamp \| parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
		28	</template>
		29	</el-table-column>
		30
		31	<el-table-column
		32	width="120px"
		33	align="center"
		34	label="Author"
		35	>
		36	<template slot-scope="{row}">
		37	<span>{{ row.author }}</span>
		38	</template>
		39	</el-table-column>
		40
		41	<el-table-column
		42	width="100px"
		43	label="Importance"
		44	>
		45	<template slot-scope="{row}">
		46	<svg-icon
		47	v-for="n in + row.importance"
		48	:key="n"
		49	icon-class="star"
		50	class="meta-item__icon"
		51	/>
		52	</template>
		53	</el-table-column>
		54
		55	<el-table-column
		56	class-name="status-col"
		57	label="Status"
		58	width="110"
		59	>
		60	<template slot-scope="{row}">
		61	<el-tag :type="row.status \| statusFilter">
		62	{{ row.status }}
		63	</el-tag>
		64	</template>
		65	</el-table-column>
		66
		67	<el-table-column
		68	min-width="300px"
		69	label="Title"
		70	>
		71	<template slot-scope="{row}">
		72	<template v-if="row.edit">
		73	<el-input
		74	v-model="row.title"
		75	class="edit-input"
		76	size="small"
		77	/>
		78	<el-button
		79	class="cancel-btn"
		80	size="small"
		81	icon="el-icon-refresh"
		82	type="warning"
		83	@click="cancelEdit(row)"
		84	>
		85	cancel
		86	</el-button>
		87	</template>
		88	<span v-else>{{ row.title }}</span>
		89	</template>
		90	</el-table-column>
		91
		92	<el-table-column
		93	align="center"
		94	label="Actions"
		95	width="120"
		96	>
		97	<template slot-scope="{row}">
		98	<el-button
		99	v-if="row.edit"
		100	type="success"
		101	size="small"
		102	icon="el-icon-circle-check-outline"
		103	@click="confirmEdit(row)"
		104	>
		105	Ok
		106	</el-button>
		107	<el-button
		108	v-else
		109	type="primary"
		110	size="small"
		111	icon="el-icon-edit"
		112	@click="row.edit=!row.edit"
		113	>
		114	Edit
		115	</el-button>
		116	</template>
		117	</el-table-column>
		118	</el-table>
		119	</div>
		120	</template>
		121
		122	<script>
		123	import { fetchList } from '@/api/article'
		124
		125	export default {
		126	name: 'InlineEditTable',
		127	filters: {
		128	statusFilter(status) {
		129	const statusMap = {
		130	published: 'success',
		131	draft: 'info',
		132	deleted: 'danger'
		133	}
		134	return statusMap[status]
		135	}
		136	},
		137	data() {
		138	return {
		139	list: null,
		140	listLoading: true,
		141	listQuery: {
		142	page: 1,
		143	limit: 10
		144	}
		145	}
		146	},
		147	created() {
		148	this.getList()
		149	},
		150	methods: {
		151	async getList() {
		152	this.listLoading = true
		153	const { data } = await fetchList(this.listQuery)
		154	const items = data.items
		155	this.list = items.map(v => {
		156	this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
		157	v.originalTitle = v.title // will be used when user click the cancel botton
		158	return v
		159	})
		160	this.listLoading = false
		161	},
		162	cancelEdit(row) {
		163	row.title = row.originalTitle
		164	row.edit = false
		165	this.$message({
		166	message: 'The title has been restored to the original value',
		167	type: 'warning'
		168	})
		169	},
		170	confirmEdit(row) {
		171	row.edit = false
		172	row.originalTitle = row.title
		173	this.$message({
		174	message: 'The title has been edited',
		175	type: 'success'
		176	})
		177	}
		178	}
		179	}
		180	</script>
		181
		182	<style scoped>
		183	.edit-input {
		184	padding-right: 100px;
		185	}
		186	.cancel-btn {
		187	position: absolute;
		188	right: 15px;
		189	top: 10px;
		190	}
		191	</style>
1	<template>	192

src/views/table/complex-table.vue

Diff comments Edit View file @0bd8168

1	<template>	1	<template>
2	<div class="app-container">	2	<div class="app-container">
3	<div class="filter-container">	3	<div class="filter-container">
4	<el-input	4	<el-input
5	v-model="listQuery.title"	5	v-model="listQuery.title"
6	:placeholder="$t('table.title')"	6	:placeholder="$t('table.title')"
		7	style="width: 200px;"
		8	class="filter-item"
		9	@keyup.enter.native="handleFilter"
		10	/>
		11	<el-select
		12	v-model="listQuery.importance"
		13	:placeholder="$t('table.importance')"
		14	clearable
		15	style="width: 90px"
		16	class="filter-item"
		17	>
		18	<el-option
		19	v-for="item in importanceOptions"
		20	:key="item"
		21	:label="item"
		22	:value="item"
		23	/>
7	style="width: 200px;"	24	</el-select>
8	class="filter-item"	25	<el-select
9	@keyup.enter.native="handleFilter"	26	v-model="listQuery.type"
		27	:placeholder="$t('table.type')"
		28	clearable
		29	class="filter-item"
		30	style="width: 130px"
		31	>
		32	<el-option
		33	v-for="item in calendarTypeOptions"
		34	:key="item.key"
		35	:label="item.display_name+'('+item.key+')'"
		36	:value="item.key"
		37	/>
10	/>	38	</el-select>
11	<el-select	39	<el-select
12	v-model="listQuery.importance"	40	v-model="listQuery.sort"
		41	style="width: 140px"
		42	class="filter-item"
		43	@change="handleFilter"
		44	>
		45	<el-option
		46	v-for="item in sortOptions"
		47	:key="item.key"
		48	:label="item.label"
		49	:value="item.key"
		50	/>
13	:placeholder="$t('table.importance')"	51	</el-select>
14	clearable	52	<el-button
		53	v-waves
		54	class="filter-item"
		55	type="primary"
		56	icon="el-icon-search"
		57	@click="handleFilter"
		58	>
15	style="width: 90px"	59	{{ $t('table.search') }}
16	class="filter-item"	60	</el-button>
17	>	61	<el-button
		62	class="filter-item"
		63	style="margin-left: 10px;"
		64	type="primary"
		65	icon="el-icon-edit"
		66	@click="handleCreate"
		67	>
18	<el-option	68	{{ $t('table.add') }}
19	v-for="item in importanceOptions"	69	</el-button>
20	:key="item"	70	<el-button
		71	v-waves
		72	:loading="downloadLoading"
		73	class="filter-item"
		74	type="primary"
		75	icon="el-icon-download"
		76	@click="handleDownload"
		77	>
21	:label="item"	78	{{ $t('table.export') }}
22	:value="item"	79	</el-button>
23	/>	80	<el-checkbox
		81	v-model="showReviewer"
		82	class="filter-item"
		83	style="margin-left:15px;"
		84	@change="tableKey=tableKey+1"
		85	>
24	</el-select>	86	{{ $t('table.reviewer') }}
25	<el-select	87	</el-checkbox>
26	v-model="listQuery.type"	88	</div>
27	:placeholder="$t('table.type')"	89
28	clearable	90	<el-table
29	class="filter-item"	91	:key="tableKey"
30	style="width: 130px"	92	v-loading="listLoading"
31	>	93	:data="list"
32	<el-option	94	border
33	v-for="item in calendarTypeOptions"	95	fit
34	:key="item.key"	96	highlight-current-row
35	:label="item.display_name+'('+item.key+')'"	97	style="width: 100%;"
36	:value="item.key"	98	@sort-change="sortChange"
37	/>	99	>
38	</el-select>	100	<el-table-column
		101	:label="$t('table.id')"
		102	prop="id"
		103	sortable="custom"
		104	align="center"
		105	width="80"
		106	:class-name="getSortClass('id')"
		107	>
39	<el-select	108	<template slot-scope="{row}">
40	v-model="listQuery.sort"	109	<span>{{ row.id }}</span>
41	style="width: 140px"	110	</template>
42	class="filter-item"	111	</el-table-column>
43	@change="handleFilter"	112	<el-table-column
		113	:label="$t('table.date')"
		114	width="150px"
		115	align="center"
		116	>
44	>	117	<template slot-scope="{row}">
45	<el-option	118	<span>{{ row.timestamp \| parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
46	v-for="item in sortOptions"	119	</template>
47	:key="item.key"	120	</el-table-column>
48	:label="item.label"	121	<el-table-column
		122	:label="$t('table.title')"
		123	min-width="150px"
		124	>
49	:value="item.key"	125	<template slot-scope="{row}">
50	/>	126	<span
		127	class="link-type"
		128	@click="handleUpdate(row)"
		129	>{{ row.title }}</span>
51	</el-select>	130	<el-tag>{{ row.type \| typeFilter }}</el-tag>
52	<el-button	131	</template>
53	v-waves	132	</el-table-column>
54	class="filter-item"	133	<el-table-column
		134	:label="$t('table.author')"
		135	width="110px"
		136	align="center"
		137	>
55	type="primary"	138	<template slot-scope="{row}">
56	icon="el-icon-search"	139	<span>{{ row.author }}</span>
57	@click="handleFilter"	140	</template>
58	>	141	</el-table-column>
59	{{ $t('table.search') }}	142	<el-table-column
		143	v-if="showReviewer"
		144	:label="$t('table.reviewer')"
		145	width="110px"
		146	align="center"
		147	>
60	</el-button>	148	<template slot-scope="{row}">
61	<el-button	149	<span style="color:red;">{{ row.reviewer }}</span>
62	class="filter-item"	150	</template>
63	style="margin-left: 10px;"	151	</el-table-column>
64	type="primary"	152	<el-table-column
		153	:label="$t('table.importance')"
		154	width="80px"
		155	>
65	icon="el-icon-edit"	156	<template slot-scope="{row}">
66	@click="handleCreate"	157	<svg-icon
		158	v-for="n in +row.importance"
		159	:key="n"
		160	icon-class="star"
		161	class="meta-item__icon"
		162	/>
67	>	163	</template>
68	{{ $t('table.add') }}	164	</el-table-column>
69	</el-button>	165	<el-table-column
		166	:label="$t('table.readings')"
		167	align="center"
		168	width="95"
		169	>
70	<el-button	170	<template slot-scope="{row}">
71	v-waves	171	<span
		172	v-if="row.pageviews"
		173	class="link-type"
		174	@click="handleFetchPv(row.pageviews)"
		175	>{{ row.pageviews }}</span>
72	:loading="downloadLoading"	176	<span v-else>0</span>
73	class="filter-item"	177	</template>
74	type="primary"	178	</el-table-column>
75	icon="el-icon-download"	179	<el-table-column
		180	:label="$t('table.status')"
		181	class-name="status-col"
		182	width="100"
		183	>
76	@click="handleDownload"	184	<template slot-scope="{row}">
77	>	185	<el-tag :type="row.status \| statusFilter">
78	{{ $t('table.export') }}	186	{{ row.status }}
79	</el-button>	187	</el-tag>
80	<el-checkbox	188	</template>
81	v-model="showReviewer"	189	</el-table-column>
82	class="filter-item"	190	<el-table-column
		191	:label="$t('table.actions')"
		192	align="center"
		193	width="230"
		194	class-name="small-padding fixed-width"
		195	>
83	style="margin-left:15px;"	196	<template slot-scope="{row,$index}">
84	@change="tableKey=tableKey+1"	197	<el-button
		198	type="primary"
		199	size="mini"
		200	@click="handleUpdate(row)"
		201	>
85	>	202	{{ $t('table.edit') }}
86	{{ $t('table.reviewer') }}	203	</el-button>
87	</el-checkbox>	204	<el-button
		205	v-if="row.status!='published'"
		206	size="mini"
		207	type="success"
		208	@click="handleModifyStatus(row,'published')"
		209	>
88	</div>	210	{{ $t('table.publish') }}
89		211	</el-button>
90	<el-table	212	<el-button
		213	v-if="row.status!='draft'"
		214	size="mini"
		215	@click="handleModifyStatus(row,'draft')"
		216	>
91	:key="tableKey"	217	{{ $t('table.draft') }}
92	v-loading="listLoading"	218	</el-button>
93	:data="list"	219	<el-button
		220	v-if="row.status!='deleted'"
		221	size="mini"
		222	type="danger"
		223	@click="handleDelete(row,$index)"
		224	>
94	border	225	{{ $t('table.delete') }}
95	fit	226	</el-button>
96	highlight-current-row	227	</template>
97	style="width: 100%;"	228	</el-table-column>
98	@sort-change="sortChange"	229	</el-table>
99	>	230
100	<el-table-column	231	<pagination
		232	v-show="total>0"
		233	:total="total"
		234	:page.sync="listQuery.page"
		235	:limit.sync="listQuery.limit"
		236	@pagination="getList"
		237	/>
101	:label="$t('table.id')"	238
102	prop="id"	239	<el-dialog
103	sortable="custom"	240	:title="textMap[dialogStatus]"
104	align="center"	241	:visible.sync="dialogFormVisible"
105	width="80"	242	>
106	:class-name="getSortClass('id')"	243	<el-form
		244	ref="dataForm"
		245	:rules="rules"
		246	:model="temp"
		247	label-position="left"
		248	label-width="70px"
		249	style="width: 400px; margin-left:50px;"
		250	>
		251	<el-form-item
		252	:label="$t('table.type')"
		253	prop="type"
		254	>
		255	<el-select
		256	v-model="temp.type"
		257	class="filter-item"
		258	placeholder="Please select"
		259	>
		260	<el-option
		261	v-for="item in calendarTypeOptions"
		262	:key="item.key"
		263	:label="item.display_name"
		264	:value="item.key"
		265	/>
107	>	266	</el-select>
108	<template slot-scope="{row}">	267	</el-form-item>
109	<span>{{ row.id }}</span>	268	<el-form-item
110	</template>	269	:label="$t('table.date')"
		270	prop="timestamp"
		271	>
		272	<el-date-picker
		273	v-model="temp.timestamp"
		274	type="datetime"
		275	placeholder="Please pick a date"
		276	/>
111	</el-table-column>	277	</el-form-item>
112	<el-table-column	278	<el-form-item
		279	:label="$t('table.title')"
		280	prop="title"
		281	>
113	:label="$t('table.date')"	282	<el-input v-model="temp.title" />
114	width="150px"	283	</el-form-item>
115	align="center"	284	<el-form-item :label="$t('table.status')">
116	>	285	<el-select
117	<template slot-scope="{row}">	286	v-model="temp.status"
		287	class="filter-item"
		288	placeholder="Please select"
		289	>
		290	<el-option
		291	v-for="item in statusOptions"
		292	:key="item"
		293	:label="item"
		294	:value="item"
		295	/>
118	<span>{{ row.timestamp \| parseTime('{y}-{m}-{d} {h}:{i}') }}</span>	296	</el-select>
119	</template>	297	</el-form-item>
120	</el-table-column>	298	<el-form-item :label="$t('table.importance')">
121	<el-table-column	299	<el-rate
		300	v-model="temp.importance"
		301	:colors="['#99A9BF', '#F7BA2A', '#FF9900']"
		302	:max="3"
		303	style="margin-top:8px;"
		304	/>
122	:label="$t('table.title')"	305	</el-form-item>
123	min-width="150px"	306	<el-form-item :label="$t('table.remark')">
124	>	307	<el-input
		308	v-model="temp.remark"
		309	:autosize="{ minRows: 2, maxRows: 4}"
		310	type="textarea"
		311	placeholder="Please input"
		312	/>
125	<template slot-scope="{row}">	313	</el-form-item>
126	<span	314	</el-form>
127	class="link-type"	315	<div
		316	slot="footer"
		317	class="dialog-footer"
		318	>
128	@click="handleUpdate(row)"	319	<el-button @click="dialogFormVisible = false">
129	>{{ row.title }}</span>	320	{{ $t('table.cancel') }}
130	<el-tag>{{ row.type \| typeFilter }}</el-tag>	321	</el-button>
131	</template>	322	<el-button
		323	type="primary"
		324	@click="dialogStatus==='create'?createData():updateData()"
		325	>
132	</el-table-column>	326	{{ $t('table.confirm') }}
133	<el-table-column	327	</el-button>
134	:label="$t('table.author')"	328	</div>
135	width="110px"	329	</el-dialog>
136	align="center"	330
137	>	331	<el-dialog
138	<template slot-scope="{row}">	332	:visible.sync="dialogPvVisible"
139	<span>{{ row.author }}</span>	333	title="Reading statistics"
140	</template>	334	>
		335	<el-table
		336	:data="pvData"
		337	border
		338	fit
		339	highlight-current-row
		340	style="width: 100%"
		341	>
		342	<el-table-column
		343	prop="key"
		344	label="Channel"
		345	/>
		346	<el-table-column
		347	prop="pv"
		348	label="Pv"
		349	/>
141	</el-table-column>	350	</el-table>
142	<el-table-column	351	<span
143	v-if="showReviewer"	352	slot="footer"
		353	class="dialog-footer"
		354	>
		355	<el-button
		356	type="primary"
		357	@click="dialogPvVisible = false"
		358	>{{ $t('table.confirm') }}</el-button>
144	:label="$t('table.reviewer')"	359	</span>
145	width="110px"	360	</el-dialog>
146	align="center"	361	</div>
147	>	362	</template>
148	<template slot-scope="{row}">	363
149	<span style="color:red;">{{ row.reviewer }}</span>	364	<script>
150	</template>	365	import {
		366	fetchList,
		367	fetchPv,
		368	createArticle,
		369	updateArticle
		370	} from '@/api/article'
151	</el-table-column>	371	import waves from '@/directive/waves' // waves directive
152	<el-table-column	372	import { parseTime } from '@/utils'
153	:label="$t('table.importance')"	373	import Pagination from '@/components/Pagination' // secondary package based on el-pagination
154	width="80px"	374
155	>	375	const calendarTypeOptions = [
156	<template slot-scope="{row}">	376	{ key: 'CN', display_name: 'China' },
157	<svg-icon	377	{ key: 'US', display_name: 'USA' },
158	v-for="n in +row.importance"	378	{ key: 'JP', display_name: 'Japan' },
159	:key="n"	379	{ key: 'EU', display_name: 'Eurozone' }
160	icon-class="star"	380	]
161	class="meta-item__icon"	381
162	/>	382	// arr to obj, such as { CN : "China", US : "USA" }
163	</template>	383	const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
164	</el-table-column>	384	acc[cur.key] = cur.display_name
165	<el-table-column	385	return acc
166	:label="$t('table.readings')"	386	}, {})
167	align="center"	387
168	width="95"	388	export default {
169	>	389	name: 'ComplexTable',
170	<template slot-scope="{row}">	390	components: { Pagination },
171	<span	391	directives: { waves },
172	v-if="row.pageviews"	392	filters: {
173	class="link-type"	393	statusFilter(status) {
174	@click="handleFetchPv(row.pageviews)"	394	const statusMap = {
175	>{{ row.pageviews }}</span>	395	published: 'success',
176	<span v-else>0</span>	396	draft: 'info',
177	</template>	397	deleted: 'danger'
178	</el-table-column>	398	}
179	<el-table-column	399	return statusMap[status]
180	:label="$t('table.status')"	400	},
181	class-name="status-col"	401	typeFilter(type) {
182	width="100"	402	return calendarTypeKeyValue[type]
183	>	403	}
184	<template slot-scope="{row}">	404	},
185	<el-tag :type="row.status \| statusFilter">	405	data() {
186	{{ row.status }}	406	return {
187	</el-tag>	407	tableKey: 0,
188	</template>	408	list: null,
189	</el-table-column>	409	total: 0,
190	<el-table-column	410	listLoading: true,
191	:label="$t('table.actions')"	411	listQuery: {
192	align="center"	412	page: 1,
193	width="230"	413	limit: 20,
194	class-name="small-padding fixed-width"	414	importance: undefined,
195	>	415	title: undefined,
196	<template slot-scope="{row,$index}">	416	type: undefined,
197	<el-button	417	sort: '+id'
198	type="primary"	418	},
199	size="mini"	419	importanceOptions: [1, 2, 3],
200	@click="handleUpdate(row)"	420	calendarTypeOptions,
201	>	421	sortOptions: [
		422	{ label: 'ID Ascending', key: '+id' },
		423	{ label: 'ID Descending', key: '-id' }
		424	],
202	{{ $t('table.edit') }}	425	statusOptions: ['published', 'draft', 'deleted'],
203	</el-button>	426	showReviewer: false,
204	<el-button	427	temp: {
205	v-if="row.status!='published'"	428	id: undefined,
206	size="mini"	429	importance: 1,
207	type="success"	430	remark: '',
208	@click="handleModifyStatus(row,'published')"	431	timestamp: new Date(),
209	>	432	title: '',
210	{{ $t('table.publish') }}	433	type: '',
211	</el-button>	434	status: 'published'
212	<el-button	435	},
213	v-if="row.status!='draft'"	436	dialogFormVisible: false,
214	size="mini"	437	dialogStatus: '',
215	@click="handleModifyStatus(row,'draft')"	438	textMap: {
216	>	439	update: 'Edit',
217	{{ $t('table.draft') }}	440	create: 'Create'
218	</el-button>	441	},
219	<el-button	442	dialogPvVisible: false,
220	v-if="row.status!='deleted'"	443	pvData: [],
221	size="mini"	444	rules: {
222	type="danger"	445	type: [
223	@click="handleDelete(row,$index)"	446	{ required: true, message: 'type is required', trigger: 'change' }
224	>	447	],
		448	timestamp: [
		449	{
		450	type: 'date',
		451	required: true,
		452	message: 'timestamp is required',
		453	trigger: 'change'
		454	}
		455	],
		456	title: [
		457	{ required: true, message: 'title is required', trigger: 'blur' }
		458	]
225	{{ $t('table.delete') }}	459	},
226	</el-button>	460	downloadLoading: false
227	</template>	461	}
228	</el-table-column>	462	},
229	</el-table>	463	created() {
230		464	this.getList()
231	<pagination	465	},
232	v-show="total>0"	466	methods: {
233	:total="total"	467	getList() {
234	:page.sync="listQuery.page"	468	this.listLoading = true
235	:limit.sync="listQuery.limit"	469	fetchList(this.listQuery).then(response => {
236	@pagination="getList"	470	this.list = response.data.items
237	/>	471	this.total = response.data.total
238		472
239	<el-dialog	473	// Just to simulate the time of the request
240	:title="textMap[dialogStatus]"	474	setTimeout(() => {
241	:visible.sync="dialogFormVisible"	475	this.listLoading = false
242	>	476	}, 1.5 * 1000)
243	<el-form	477	})
244	ref="dataForm"	478	},
245	:rules="rules"	479	handleFilter() {
246	:model="temp"	480	this.listQuery.page = 1
247	label-position="left"	481	this.getList()
248	label-width="70px"	482	},
249	style="width: 400px; margin-left:50px;"	483	handleModifyStatus(row, status) {
250	>	484	this.$message({
251	<el-form-item	485	message: '操作成功',
252	:label="$t('table.type')"	486	type: 'success'
253	prop="type"	487	})
254	>	488	row.status = status
255	<el-select	489	},
256	v-model="temp.type"	490	sortChange(data) {
257	class="filter-item"	491	const { prop, order } = data
258	placeholder="Please select"	492	if (prop === 'id') {
259	>	493	this.sortByID(order)
260	<el-option	494	}
261	v-for="item in calendarTypeOptions"	495	},
262	:key="item.key"	496	sortByID(order) {
263	:label="item.display_name"	497	if (order === 'ascending') {
264	:value="item.key"	498	this.listQuery.sort = '+id'
265	/>	499	} else {
266	</el-select>	500	this.listQuery.sort = '-id'
267	</el-form-item>	501	}
268	<el-form-item	502	this.handleFilter()
269	:label="$t('table.date')"	503	},
270	prop="timestamp"	504	resetTemp() {
271	>	505	this.temp = {
272	<el-date-picker	506	id: undefined,
273	v-model="temp.timestamp"	507	importance: 1,
274	type="datetime"	508	remark: '',
275	placeholder="Please pick a date"	509	timestamp: new Date(),
276	/>	510	title: '',
277	</el-form-item>	511	status: 'published',
278	<el-form-item	512	type: ''
279	:label="$t('table.title')"	513	}
280	prop="title"	514	},
281	>	515	handleCreate() {
282	<el-input v-model="temp.title" />	516	this.resetTemp()
283	</el-form-item>	517	this.dialogStatus = 'create'
284	<el-form-item :label="$t('table.status')">	518	this.dialogFormVisible = true
285	<el-select	519	this.$nextTick(() => {
286	v-model="temp.status"	520	this.$refs['dataForm'].clearValidate()
287	class="filter-item"	521	})
288	placeholder="Please select"	522	},
289	>	523	createData() {
290	<el-option	524	this.$refs['dataForm'].validate(valid => {
291	v-for="item in statusOptions"	525	if (valid) {
292	:key="item"	526	this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
293	:label="item"	527	this.temp.author = '秀野堂主'
294	:value="item"	528	createArticle(this.temp).then(() => {
295	/>	529	this.list.unshift(this.temp)
296	</el-select>	530	this.dialogFormVisible = false
297	</el-form-item>	531	this.$notify({
298	<el-form-item :label="$t('table.importance')">	532	title: '成功',
299	<el-rate	533	message: '创建成功',
300	v-model="temp.importance"	534	type: 'success',
301	:colors="['#99A9BF', '#F7BA2A', '#FF9900']"	535	duration: 2000
302	:max="3"	536	})
303	style="margin-top:8px;"	537	})
304	/>	538	}
305	</el-form-item>	539	})
306	<el-form-item :label="$t('table.remark')">	540	},
307	<el-input	541	handleUpdate(row) {
308	v-model="temp.remark"	542	this.temp = Object.assign({}, row) // copy obj
309	:autosize="{ minRows: 2, maxRows: 4}"	543	this.temp.timestamp = new Date(this.temp.timestamp)
310	type="textarea"	544	this.dialogStatus = 'update'
311	placeholder="Please input"	545	this.dialogFormVisible = true
312	/>	546	this.$nextTick(() => {
313	</el-form-item>	547	this.$refs['dataForm'].clearValidate()
314	</el-form>	548	})
315	<div	549	},
316	slot="footer"	550	updateData() {
317	class="dialog-footer"	551	this.$refs['dataForm'].validate(valid => {
318	>	552	if (valid) {
319	<el-button @click="dialogFormVisible = false">	553	const tempData = Object.assign({}, this.temp)
320	{{ $t('table.cancel') }}	554	tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
321	</el-button>	555	updateArticle(tempData).then(() => {
322	<el-button	556	const index = this.list.findIndex(v => v.id === this.temp.id)
323	type="primary"	557	this.list.splice(index, 1, this.temp)
324	@click="dialogStatus==='create'?createData():updateData()"	558	this.dialogFormVisible = false
325	>	559	this.$notify({
326	{{ $t('table.confirm') }}	560	title: '成功',
327	</el-button>	561	message: '更新成功',
328	</div>	562	type: 'success',
329	</el-dialog>	563	duration: 2000
330		564	})
331	<el-dialog	565	})
332	:visible.sync="dialogPvVisible"	566	}
333	title="Reading statistics"	567	})
334	>	568	},
335	<el-table	569	handleDelete(row, index) {
336	:data="pvData"	570	this.$notify({
337	border	571	title: '成功',
338	fit	572	message: '删除成功',
339	highlight-current-row	573	type: 'success',
340	style="width: 100%"	574	duration: 2000
341	>	575	})
342	<el-table-column	576	this.list.splice(index, 1)
343	prop="key"	577	},
344	label="Channel"	578	handleFetchPv(pv) {
345	/>	579	fetchPv(pv).then(response => {
346	<el-table-column	580	this.pvData = response.data.pvData
347	prop="pv"	581	this.dialogPvVisible = true
348	label="Pv"	582	})
349	/>	583	},
350	</el-table>	584	handleDownload() {
351	<span	585	this.downloadLoading = true
352	slot="footer"	586	import('@/vendor/Export2Excel').then(excel => {
353	class="dialog-footer"	587	const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
354	>	588	const filterVal = [
		589	'timestamp',
		590	'title',
		591	'type',
		592	'importance',
		593	'status'
		594	]
355	<el-button	595	const data = this.formatJson(filterVal)
356	type="primary"	596	excel.export_json_to_excel({
357	@click="dialogPvVisible = false"	597	header: tHeader,
358	>{{ $t('table.confirm') }}</el-button>	598	data,
359	</span>	599	filename: 'table-list'
360	</el-dialog>	600	})
361	</div>	601	this.downloadLoading = false
362	</template>	602	})
363		603	},
364	<script>	604	formatJson(filterVal) {
365	import {	605	return this.list.map(v =>
366	fetchList,	606	filterVal.map(j => {
367	fetchPv,	607	if (j === 'timestamp') {
368	createArticle,	608	return parseTime(v[j])
369	updateArticle	609	} else {
370	} from '@/api/article'	610	return v[j]
371	import waves from '@/directive/waves' // waves directive	611	}
		612	})
		613	)
372	import { parseTime } from '@/utils'	614	},
373	import Pagination from '@/components/Pagination' // secondary package based on el-pagination	615	getSortClass: function(key) {
374		616	const sort = this.listQuery.sort
375	const calendarTypeOptions = [	617	return sort === `+${key}` ? 'ascending' : 'descending'
376	{ key: 'CN', display_name: 'China' },	618	}
377	{ key: 'US', display_name: 'USA' },	619	}
378	{ key: 'JP', display_name: 'Japan' },	620	}
379	{ key: 'EU', display_name: 'Eurozone' }	621	</script>
380	]	622

src/views/users/list.vue

Diff comments Edit View file @0bd8168

1	<template>	1	<template>
2	<div class="app-container">	2	<div class="app-container">
3	<div class="filter-container">	3	<div class="filter-container">
4	<el-input	4	<el-input
5	v-model="listQuery.title"	5	v-model="listQuery.title"
6	:placeholder="$t('users.table.username') + ' or ' + $t('users.table.nickname')"	6	:placeholder="$t('users.table.username') + ' or ' + $t('users.table.nickname')"
7	style="width: 200px;"	7	style="width: 200px;"
8	class="filter-item"	8	class="filter-item"
9	@keyup.enter.native="handleFilter"	9	@keyup.enter.native="handleFilter"
10	/>	10	/>
11	<el-select	11	<el-select
12	v-model="listQuery.importance"	12	v-model="listQuery.importance"
13	:placeholder="$t('table.importance')"	13	:placeholder="$t('table.importance')"
14	clearable	14	clearable
15	style="width: 90px"	15	style="width: 90px"
16	class="filter-item"	16	class="filter-item"
17	>	17	>
18	<el-option	18	<el-option
19	v-for="item in importanceOptions"	19	v-for="item in importanceOptions"
20	:key="item"	20	:key="item"
21	:label="item"	21	:label="item"
22	:value="item"	22	:value="item"
23	/>	23	/>
24	</el-select>	24	</el-select>
25	<el-select	25	<el-select
26	v-model="listQuery.type"	26	v-model="listQuery.type"
27	:placeholder="$t('table.type')"	27	:placeholder="$t('table.type')"
28	clearable	28	clearable
29	class="filter-item"	29	class="filter-item"
30	style="width: 130px"	30	style="width: 130px"
31	>	31	>
32	<el-option	32	<el-option
33	v-for="item in calendarTypeOptions"	33	v-for="item in calendarTypeOptions"
34	:key="item.key"	34	:key="item.key"
35	:label="item.display_name+'('+item.key+')'"	35	:label="item.display_name+'('+item.key+')'"
36	:value="item.key"	36	:value="item.key"
37	/>	37	/>
38	</el-select>	38	</el-select>
39	<el-select	39	<el-select
40	v-model="listQuery.sort"	40	v-model="listQuery.sort"
41	style="width: 140px"	41	style="width: 140px"
42	class="filter-item"	42	class="filter-item"
43	@change="handleFilter"	43	@change="handleFilter"
44	>	44	>
45	<el-option	45	<el-option
46	v-for="item in sortOptions"	46	v-for="item in sortOptions"
47	:key="item.key"	47	:key="item.key"
48	:label="item.label"	48	:label="item.label"
49	:value="item.key"	49	:value="item.key"
50	/>	50	/>
51	</el-select>	51	</el-select>
52	<el-button	52	<el-button
53	v-waves	53	v-waves
54	class="filter-item"	54	class="filter-item"
55	type="primary"	55	type="primary"
56	icon="el-icon-search"	56	icon="el-icon-search"
57	@click="handleFilter"	57	@click="handleFilter"
58	>	58	>
59	{{ $t('users.search') }}	59	{{ $t('users.search') }}
60	</el-button>	60	</el-button>
61	<el-button	61	<el-button
62	class="filter-item"	62	class="filter-item"
63	style="margin-left: 10px;"	63	style="margin-left: 10px;"
64	type="primary"	64	type="primary"
65	icon="el-icon-edit"	65	icon="el-icon-edit"
66	@click="handleCreate"	66	@click="handleCreate"
67	>	67	>
68	{{ $t('users.add') }}	68	{{ $t('users.add') }}
69	</el-button>	69	</el-button>
70	<el-button	70	<el-button
71	v-waves	71	v-waves
72	:loading="downloadLoading"	72	:loading="downloadLoading"
73	class="filter-item"	73	class="filter-item"
74	type="primary"	74	type="primary"
75	icon="el-icon-download"	75	icon="el-icon-download"
76	@click="handleDownload"	76	@click="handleDownload"
77	>	77	>
78	{{ $t('table.export') }}	78	{{ $t('table.export') }}
79	</el-button>	79	</el-button>
80	<el-checkbox	80	<el-checkbox
81	v-model="showReviewer"	81	v-model="showReviewer"
82	class="filter-item"	82	class="filter-item"
83	style="margin-left:15px;"	83	style="margin-left:15px;"
84	@change="tableKey=tableKey+1"	84	@change="tableKey=tableKey+1"
85	>	85	>
86	{{ $t('table.reviewer') }}	86	{{ $t('table.reviewer') }}
87	</el-checkbox>	87	</el-checkbox>
88	</div>	88	</div>
89		89
90	<el-table	90	<el-table
91	:key="tableKey"	91	:key="tableKey"
92	v-loading="listLoading"	92	v-loading="listLoading"
93	:data="list"	93	:data="list"
94	border	94	border
95	fit	95	fit
96	highlight-current-row	96	highlight-current-row
97	style="width: 100%;"	97	style="width: 100%;"
98	@sort-change="sortChange"	98	@sort-change="sortChange"
99	>	99	>
		100	<!--uid-->
100	<!--uid-->	101	<el-table-column
101	<el-table-column	102	:label="$t('users.table.uid')"
102	:label="$t('users.table.uid')"	103	prop="id"
103	prop="id"	104	sortable="custom"
104	sortable="custom"	105	align="center"
105	align="center"	106	width="80"
106	width="80"	107	:class-name="getSortClass('id')"
107	:class-name="getSortClass('id')"	108	>
108	>	109	<template slot-scope="{row}">
109	<template slot-scope="{row}">	110	<span>{{ row.uid }}</span>
110	<span>{{ row.uid }}</span>	111	</template>
111	</template>	112	</el-table-column>
		113	<!--create_time-->
112	</el-table-column>	114	<el-table-column
113	<!--create_time-->	115	:label="$t('users.table.create_at')"
114	<el-table-column	116	width="150px"
115	:label="$t('users.table.create_at')"	117	align="center"
116	width="150px"	118	>
117	align="center"	119	<template slot-scope="{row}">
118	>	120	<span>{{ row.create_time \| parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
119	<template slot-scope="{row}">	121	</template>
120	<span>{{ row.create_time \| parseTime('{y}-{m}-{d} {h}:{i}') }}</span>	122	</el-table-column>
		123	<!--openid-->
121	</template>	124	<el-table-column
122	</el-table-column>	125	:label="$t('users.table.openid')"
123	<!--openid-->	126	min-width="150px"
124	<el-table-column	127	>
125	:label="$t('users.table.openid')"	128	<template slot-scope="{row}">
126	min-width="150px"	129	<span
127	>	130	class="link-type"
128	<template slot-scope="{row}">	131	@click="handleUpdate(row)"
129	<span	132	>{{ row.title }}</span>
130	class="link-type"	133	</template>
131	@click="handleUpdate(row)"	134	</el-table-column>
		135	<!--nickname-->
132	>{{ row.title }}</span>	136	<el-table-column
133	</template>	137	:label="$t('users.table.nickname')"
134	</el-table-column>	138	width="110px"
135	<!--nickname-->	139	align="center"
136	<el-table-column	140	>
137	:label="$t('users.table.nickname')"	141	<template slot-scope="{row}">
138	width="110px"	142	<span>{{ row.nickname }}</span>
139	align="center"	143	<el-tag>{{ row.type \| typeFilter }}</el-tag>
140	>	144	</template>
141	<template slot-scope="{row}">	145	</el-table-column>
		146	<!--reviewer 审核人-->
142	<span>{{ row.nickname }}</span>	147	<el-table-column
143	<el-tag>{{ row.type \| typeFilter }}</el-tag>	148	v-if="showReviewer"
144	</template>	149	:label="$t('table.reviewer')"
145	</el-table-column>	150	width="110px"
146	<!--reviewer 审核人-->	151	align="center"
147	<el-table-column	152	>
148	v-if="showReviewer"	153	<template slot-scope="{row}">
149	:label="$t('table.reviewer')"	154	<span style="color:red;">{{ row.reviewer }}</span>
150	width="110px"	155	</template>
151	align="center"	156	</el-table-column>
		157	<!--son_of_adv-->
152	>	158	<el-table-column
153	<template slot-scope="{row}">	159	:label="$t('users.table.comefromperson')"
154	<span style="color:red;">{{ row.reviewer }}</span>	160	align="center"
		161	width="95"
155	</template>	162	>
156	</el-table-column>	163	<template slot-scope="{row}">
157	<!--son_of_adv-->	164	<span
158	<el-table-column	165	v-if="row.comefromperson"
159	:label="$t('users.table.comefromperson')"	166	class="link-type"
160	align="center"	167	@click="handleFetchPv(row.comefromperson)"
161	width="95"	168	>{{ row.comefromperson }}</span>
162	>	169	<span v-else>0</span>
163	<template slot-scope="{row}">	170	</template>
164	<span	171	</el-table-column>
		172	<!--son_of_adv-->
165	v-if="row.comefromperson"	173	<el-table-column
166	class="link-type"	174	:label="$t('users.table.son_of_adv')"
167	@click="handleFetchPv(row.comefromperson)"	175	align="center"
168	>{{ row.comefromperson }}</span>	176	width="95"
169	<span v-else>0</span>	177	>
170	</template>	178	<template slot-scope="{row}">
171	</el-table-column>	179	<span
172	<!--son_of_adv-->	180	v-if="row.son_of_adv"
173	<el-table-column	181	class="link-type"
174	:label="$t('users.table.son_of_adv')"	182	@click="handleFetchPv(row.son_of_adv)"
175	align="center"	183	>{{ row.son_of_adv }}</span>
176	width="95"	184	<span v-else>0</span>
177	>	185	</template>
178	<template slot-scope="{row}">	186	</el-table-column>
		187	<!--buy_value-->
179	<span	188	<el-table-column
180	v-if="row.son_of_adv"	189	:label="$t('users.table.buyvalue')"
		190	align="center"
		191	width="95"
		192	>
		193	<template slot-scope="{row}">
		194	<span
		195	v-if="row.buyvalue"
		196	class="link-type"
		197	@click="handleFetchPv(row.buyvalue)"
		198	>{{ row.buyvalue }}</span>
		199	<span v-else>0</span>
		200	</template>
		201	</el-table-column>
		202	<!--buywill-->
		203	<el-table-column
		204	:label="$t('users.table.buywill')"
		205	align="center"
		206	width="95"
		207	>
		208	<template slot-scope="{row}">
		209	<span
		210	v-if="row.buywill"
		211	class="link-type"
		212	@click="handleFetchPv(row.buywill)"
		213	>{{ row.son_of_adv }}</span>
		214	<span v-else>0</span>
		215	</template>
		216	</el-table-column>
		217	<!--status-->
		218	<el-table-column
		219	:label="$t('users.table.status')"
181	class="link-type"	220	class-name="status-col"
182	@click="handleFetchPv(row.son_of_adv)"	221	width="100"
183	>{{ row.son_of_adv }}</span>	222	>
184	<span v-else>0</span>	223	<template slot-scope="{row}">
185	</template>	224	<el-tag :type="row.status \| statusFilter">{{ row.status }}</el-tag>
186	</el-table-column>	225	</template>
187	<!--buy_value-->	226	</el-table-column>
		227	<!--actions-->
188	<el-table-column	228	<el-table-column
189	:label="$t('users.table.buyvalue')"	229	:label="$t('users.table.oper')"
190	align="center"	230	align="center"
191	width="95"	231	width="230"
192	>	232	class-name="small-padding fixed-width"
193	<template slot-scope="{row}">	233	>
194	<span	234	<template slot-scope="{row,$index}">
195	v-if="row.buyvalue"	235	<el-button
196	class="link-type"	236	type="primary"
197	@click="handleFetchPv(row.buyvalue)"	237	size="mini"
198	>{{ row.buyvalue }}</span>	238	@click="handleUpdate(row)"
199	<span v-else>0</span>	239	>{{ $t('users.edit') }}</el-button>
200	</template>	240	<el-button
201	</el-table-column>	241	v-if="row.status!='deleted'"
202	<!--buywill-->	242	size="mini"
203	<el-table-column	243	type="danger"
204	:label="$t('users.table.buywill')"	244	@click="handleDelete(row,$index)"
205	align="center"	245	>{{ $t('users.del') }}</el-button>
206	width="95"	246	</template>
207	>	247	</el-table-column>
208	<template slot-scope="{row}">	248	</el-table>
209	<span	249	<!--分页-->
210	v-if="row.buywill"	250	<pagination
211	class="link-type"	251	v-show="total>0"
212	@click="handleFetchPv(row.buywill)"	252	:total="total"
213	>{{ row.son_of_adv }}</span>	253	:page.sync="listQuery.page"
214	<span v-else>0</span>	254	:limit.sync="listQuery.limit"
215	</template>	255	@pagination="getList"
216	</el-table-column>	256	/>
217	<!--status-->	257	<el-dialog
218	<el-table-column	258	:title="textMap[dialogStatus]"
219	:label="$t('users.table.status')"	259	:visible.sync="dialogFormVisible"
220	class-name="status-col"	260	>
221	width="100"	261	<el-form
222	>	262	ref="dataForm"
223	<template slot-scope="{row}">	263	:rules="rules"
224	<el-tag :type="row.status \| statusFilter">{{ row.status }}</el-tag>	264	:model="temp"
225	</template>	265	label-position="left"
226	</el-table-column>	266	label-width="70px"
227	<!--actions-->	267	style="width: 400px; margin-left:50px;"
228	<el-table-column	268	>
229	:label="$t('users.table.oper')"	269	<el-form-item
230	align="center"	270	:label="$t('users.table.roles')"
231	width="230"	271	prop="roles"
232	class-name="small-padding fixed-width"	272	>
233	>	273	<el-select
234	<template slot-scope="{row,$index}">	274	v-model="temp.roles"
235	<el-button	275	class="filter-item"
236	type="primary"	276	placeholder="Please select"
237	size="mini"	277	>
238	@click="handleUpdate(row)"	278	<el-option
239	>{{ $t('users.edit') }}</el-button>	279	v-for="item in roles"
240	<el-button	280	:key="item.key"
241	v-if="row.status!='deleted'"	281	:label="item.roles"
242	size="mini"	282	:value="item.key"
243	type="danger"	283	/>
244	@click="handleDelete(row,$index)"	284	</el-select>
245	>{{ $t('users.del') }}</el-button>	285	</el-form-item>
246	</template>	286	<el-form-item
247	</el-table-column>	287	v-model="temp.username"
248	</el-table>	288	:rules="rules"
		289	:label="$t('users.table.username')"
		290	prop="username"
		291	>
		292	<el-input v-model="temp.username" />
		293	</el-form-item>
		294	<el-form-item
		295	v-model="temp.password"
		296	:rules="rules"
		297	:label="$t('users.table.password')"
		298	prop="password"
		299	>
		300	<el-input v-model="temp.password" />
		301	</el-form-item>
		302	<el-form-item
		303	:label="$t('users.table.create_at')"
		304	prop="create_at"
249	<!--分页-->	305	>
250	<pagination	306	<el-date-picker
251	v-show="total>0"	307	v-model="temp.create_at"
252	:total="total"	308	type="datetime"
253	:page.sync="listQuery.page"	309	placeholder="Please pick a date"
254	:limit.sync="listQuery.limit"	310	/>
255	@pagination="getList"	311	</el-form-item>
256	/>	312	<el-form-item
257	<el-dialog	313	:label="$t('users.table.openid')"
258	:title="textMap[dialogStatus]"	314	prop="title"
259	:visible.sync="dialogFormVisible"	315	>
260	>	316	<el-input v-model="temp.title" />
261	<el-form	317	</el-form-item>
		318
262	ref="dataForm"	319	<el-form-item :label="$t('table.status')">
263	:rules="rules"	320	<el-select
264	:model="temp"	321	v-model="temp.status"
265	label-position="left"	322	class="filter-item"
266	label-width="70px"	323	placeholder="Please select"
267	style="width: 400px; margin-left:50px;"	324	>
268	>	325	<el-option
269	<el-form-item	326	v-for="item in statusOptions"
270	:label="$t('users.table.roles')"	327	:key="item"
271	prop="roles"	328	:label="item"
272	>	329	:value="item"
273	<el-select	330	/>
274	v-model="temp.roles"	331	</el-select>
275	class="filter-item"	332	</el-form-item>
276	placeholder="Please select"	333	<el-form-item :label="$t('users.table.importance')">
277	>	334	<el-rate
278	<el-option	335	v-model="temp.importance"
279	v-for="item in roles"	336	:colors="['#99A9BF', '#F7BA2A', '#FF9900']"
280	:key="item.key"	337	:max="3"
281	:label="item.roles"	338	style="margin-top:8px;"
282	:value="item.key"	339	/>
283	/>	340	</el-form-item>
284	</el-select>	341	<el-form-item :label="$t('users.table.remark')">
285	</el-form-item>	342	<el-input
286	<el-form-item	343	v-model="temp.remark"
287	v-model="temp.username"	344	:autosize="{ minRows: 2, maxRows: 4}"
288	:rules="rules"	345	type="textarea"
289	:label="$t('users.table.username')"	346	placeholder="Please input"
290	prop="username"	347	/>
291	>	348	</el-form-item>
292	<el-input v-model="temp.username" />	349	</el-form>
293	</el-form-item>	350	<div
294	<el-form-item	351	slot="footer"
295	v-model="temp.password"	352	class="dialog-footer"
296	:rules="rules"	353	>
297	:label="$t('users.table.password')"	354	<el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
298	prop="password"	355	<el-button
299	>	356	type="primary"
300	<el-input v-model="temp.password" />	357	@click="dialogStatus==='create'?createData():updateData()"
301	</el-form-item>	358	>{{ $t('table.confirm') }}</el-button>
302	<el-form-item	359	</div>
303	:label="$t('users.table.create_at')"	360	</el-dialog>
304	prop="create_at"	361
305	>	362	<el-dialog
306	<el-date-picker	363	:visible.sync="dialogPvVisible"
307	v-model="temp.create_at"	364	title="Reading statistics"
308	type="datetime"	365	>
309	placeholder="Please pick a date"	366	<el-table
310	/>	367	:data="pvData"
311	</el-form-item>	368	border
312	<el-form-item	369	fit
313	:label="$t('users.table.openid')"	370	highlight-current-row
314	prop="title"	371	style="width: 100%"
315	>	372	>
316	<el-input v-model="temp.title" />	373	<el-table-column
317	</el-form-item>	374	prop="key"
318		375	label="Channel"
319	<el-form-item :label="$t('table.status')">	376	/>
320	<el-select	377	<el-table-column
321	v-model="temp.status"	378	prop="pv"
322	class="filter-item"	379	label="Pv"
323	placeholder="Please select"	380	/>
324	>	381	</el-table>
325	<el-option	382	<span
326	v-for="item in statusOptions"	383	slot="footer"
327	:key="item"	384	class="dialog-footer"
328	:label="item"	385	>
329	:value="item"	386	<el-button
330	/>	387	type="primary"
331	</el-select>	388	@click="dialogPvVisible = false"
332	</el-form-item>	389	>{{ $t('table.confirm') }}</el-button>
333	<el-form-item :label="$t('users.table.importance')">	390	</span>
334	<el-rate	391	</el-dialog>
335	v-model="temp.importance"	392	</div>
336	:colors="['#99A9BF', '#F7BA2A', '#FF9900']"	393	</template>
337	:max="3"	394
338	style="margin-top:8px;"	395	<script>
339	/>	396	import {
340	</el-form-item>	397	fetchList,
341	<el-form-item :label="$t('users.table.remark')">	398	fetchPv,
342	<el-input	399	createUser,
343	v-model="temp.remark"	400	updateUser,
344	:autosize="{ minRows: 2, maxRows: 4}"	401	delUser
345	type="textarea"	402	} from '@/api/user'
346	placeholder="Please input"	403	import waves from '@/directive/waves' // waves directive
347	/>	404	import { parseTime } from '@/utils'
348	</el-form-item>	405	import Pagination from '@/components/Pagination' // secondary package based on el-pagination
349	</el-form>	406
		407	const roles = [
		408	{ key: 'runner', display_name: 'runner' },
		409	{ key: 'admin', display_name: 'admin' },
		410	{ key: 'assistant', display_name: 'assistant' },
		411	{ key: 'shoper', display_name: 'shoper' }
		412	]
		413
350	<div	414	const calendarTypeOptions = [
351	slot="footer"	415	{ key: 'CN', display_name: '中国' },
352	class="dialog-footer"	416	{ key: 'US', display_name: 'USA' },
353	>	417	{ key: 'JP', display_name: '日本国' },
354	<el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>	418	{ key: 'EU', display_name: 'Eurozone' }
355	<el-button	419	]
356	type="primary"	420
357	@click="dialogStatus==='create'?createData():updateData()"	421	// arr to obj, such as { CN : "China", US : "USA" }
358	>{{ $t('table.confirm') }}</el-button>	422	const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
359	</div>	423	acc[cur.key] = cur.display_name
360	</el-dialog>	424	return acc
361		425	}, {})
362	<el-dialog	426
363	:visible.sync="dialogPvVisible"	427	export default {
364	title="Reading statistics"	428	name: 'ComplexTable', // 名称
365	>	429	components: { Pagination }, // 关联组件，分页
366	<el-table	430	directives: { waves }, // 特效指令
367	:data="pvData"	431	filters: {
		432	// TODO::这是啥？//过滤器？没弄明白
368	border	433	statusFilter(status) {
		434	// 过滤器？
369	fit	435	const statusMap = {
370	highlight-current-row	436	published: 'success',
371	style="width: 100%"	437	draft: 'info',
372	>	438	deleted: 'danger'
373	<el-table-column	439	}
374	prop="key"	440	return statusMap[status]
375	label="Channel"	441	},
376	/>	442	typeFilter(type) {
		443	// 过滤器？
377	<el-table-column	444	return calendarTypeKeyValue[type]
378	prop="pv"	445	}
379	label="Pv"	446	},
		447	// 数据初始化
380	/>	448	data() {
381	</el-table>	449	return {
382	<span	450	tableKey: 0,
383	slot="footer"	451	list: null,
384	class="dialog-footer"	452	total: 0,
385	>	453	listLoading: true,
386	<el-button	454	listQuery: {
387	type="primary"	455	page: 1,
388	@click="dialogPvVisible = false"	456	limit: 20,
389	>{{ $t('table.confirm') }}</el-button>	457	importance: undefined,
390	</span>	458	title: undefined,
391	</el-dialog>	459	type: undefined,
392	</div>	460	sort: '+id'
393	</template>	461	},
394		462	importanceOptions: [1, 2, 3],
395	<script>	463	calendarTypeOptions,
		464	roles,
396	import {	465	sortOptions: [
397	fetchList,	466	// { label: "ID Ascending", key: "+id" },
398	fetchPv,	467	// { label: "ID Descending", key: "-id" }
		468	{ label: '按ID 正序排', key: '+id' },
		469	{ label: '按ID 倒序排', key: '-id' }
399	createUser,	470	],
400	updateUser,	471	statusOptions: ['通过', '审核中', '删除'],
401	delUser	472	showReviewer: false,
402	} from '@/api/user'	473	temp: {
403	import waves from '@/directive/waves' // waves directive	474	id: undefined,
404	import { parseTime } from '@/utils'	475	importance: 1,
405	import Pagination from '@/components/Pagination' // secondary package based on el-pagination	476	remark: '',
406		477	create_time: new Date(),
407	const roles = [	478	title: '',
408	{ key: 'runner', display_name: 'runner' },	479	type: '',
409	{ key: 'admin', display_name: 'admin' },	480	status: '通过'
410	{ key: 'assistant', display_name: 'assistant' },	481	},
411	{ key: 'shoper', display_name: 'shoper' }	482	dialogFormVisible: false,
412	]	483	dialogStatus: '',
413		484	textMap: {
414	const calendarTypeOptions = [	485	update: 'Edit',
415	{ key: 'CN', display_name: '中国' },	486	create: 'Create'
416	{ key: 'US', display_name: 'USA' },	487	},
417	{ key: 'JP', display_name: '日本国' },	488	dialogPvVisible: false,
418	{ key: 'EU', display_name: 'Eurozone' }	489	pvData: [],
419	]	490	rules: {
420		491	type: [
421	// arr to obj, such as { CN : "China", US : "USA" }	492	{ required: true, message: 'type is required', trigger: 'change' }
422	const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {	493	],
423	acc[cur.key] = cur.display_name	494	create_time: [
424	return acc	495	{
425	}, {})	496	type: 'date',
426		497	required: true,
427	export default {	498	message: 'create_time is required',
428	name: 'ComplexTable', // 名称	499	trigger: 'change'
429	components: { Pagination }, // 关联组件，分页	500	}
430	directives: { waves }, // 特效指令	501	],
431	filters: {	502	title: [
432	// TODO::这是啥？//过滤器？没弄明白	503	{ required: true, message: 'title is required', trigger: 'blur' }
433	statusFilter(status) {	504	]
434	// 过滤器？	505	},
435	const statusMap = {	506	downloadLoading: false
436	published: 'success',	507	}
437	draft: 'info',	508	},
		509	// 页面状态 === created
438	deleted: 'danger'	510	created: async function() {
		511	console.log('this.$route', this.$route)
439	}	512	const params = {
440	return statusMap[status]	513	way: this.$route.path // TODO:::至少传了一个参过来了。。。
441	},	514	}
442	typeFilter(type) {	515	await this.getList(params)
443	// 过滤器？
444	return calendarTypeKeyValue[type]	516	},
445	}	517	methods: {
446	},	518	// 查询数据
		519	getList(params) {
		520	console.log('参数：：：', params)
447	// 数据初始化	521	this.listLoading = true
		522	this.listQuery.params = params
448	data() {	523	fetchList(this.listQuery).then(response => {
449	return {	524	this.list = response.data.items
450	tableKey: 0,	525	this.total = response.data.total
451	list: null,
452	total: 0,	526	// Just to simulate the time of the request
453	listLoading: true,	527	// setTimeout(() => {
454	listQuery: {	528	this.listLoading = false
455	page: 1,	529	// }, 1.5 * 1000);
456	limit: 20,	530	})
457	importance: undefined,	531	},
		532	// 过滤器的事件
458	title: undefined,	533	handleFilter() {
		534	this.$message({
		535	message: 'handleFilter',
		536	type: 'success'
		537	})
459	type: undefined,	538	this.listQuery.page = 1
460	sort: '+id'	539	this.getList()
461	},	540	},
		541	// 状态变化修改
462	importanceOptions: [1, 2, 3],	542	handleModifyStatus(row, status) {
463	calendarTypeOptions,	543	this.$message({
464	roles,	544	message: '操作成功',
465	sortOptions: [	545	type: 'success'
466	// { label: "ID Ascending", key: "+id" },	546	})
467	// { label: "ID Descending", key: "-id" }	547	row.status = status
468	{ label: '按ID 正序排', key: '+id' },	548	},
		549	// 搜索排序
469	{ label: '按ID 倒序排', key: '-id' }	550	sortChange(data) {
470	],	551	const { prop, order } = data
471	statusOptions: ['通过', '审核中', '删除'],	552	if (prop === 'id') {
472	showReviewer: false,	553	this.sortByID(order)
473	temp: {	554	}
474	id: undefined,	555	},
		556	// 搜索排序
475	importance: 1,	557	sortByID(order) {
476	remark: '',	558	if (order === 'ascending') {
477	create_time: new Date(),	559	this.listQuery.sort = '+id'
478	title: '',	560	} else {
479	type: '',	561	this.listQuery.sort = '-id'
480	status: '通过'	562	}
481	},	563	this.handleFilter()
482	dialogFormVisible: false,	564	},
		565
483	dialogStatus: '',	566	resetTemp() {
484	textMap: {	567	this.temp = {
485	update: 'Edit',	568	id: undefined,
486	create: 'Create'	569	importance: 1,
487	},	570	remark: '',
488	dialogPvVisible: false,	571	create_time: new Date(),
489	pvData: [],	572	title: '',
490	rules: {	573	status: '通过',
491	type: [	574	type: ''
492	{ required: true, message: 'type is required', trigger: 'change' }	575	}
493	],	576	},
		577	// 添加事件 -- 弹个框
494	create_time: [	578	handleCreate() {
		579	// Notification(options);
495	{	580	this.resetTemp()
496	type: 'date',	581	this.dialogStatus = 'create'
497	required: true,	582	this.dialogFormVisible = true
498	message: 'create_time is required',	583	this.$nextTick(() => {
499	trigger: 'change'	584	this.$refs['dataForm'].clearValidate()
500	}	585	})
501	],	586	const data = []
502	title: [	587	createUser(data).then(() => {
503	{ required: true, message: 'title is required', trigger: 'blur' }	588	this.$notify({
504	]	589	title: '成功',
505	},	590	message: '添加成功',
506	downloadLoading: false	591	type: 'success',
507	}	592	duration: 2000
508	},	593	})
509	// 页面状态 === created	594	})
510	created: async function() {	595	},
		596	// 添加事件 --上传数据
511	console.log('this.$route', this.$route)	597	createData() {
512	const params = {	598	this.$refs['dataForm'].validate(valid => {
513	way: this.$route.path // TODO:::至少传了一个参过来了。。。	599	if (valid) {
514	}	600	this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
		601	this.temp.nickname = '秀野堂主'
515	await this.getList(params)	602	this.temp.author = '秀野堂主'
		603	// this.temp.level = "秀野堂主";
		604	this.temp.roles = 'admin'
516	},	605	createUser(this.temp).then(() => {
517	methods: {	606	this.list.unshift(this.temp)
518	// 查询数据	607	this.dialogFormVisible = false
519	getList(params) {	608	this.$notify({
520	console.log('参数：：：', params)	609	title: '成功',
521	this.listLoading = true	610	message: '创建成功',
522	this.listQuery.params = params	611	type: 'success',
523	fetchList(this.listQuery).then(response => {	612	duration: 2000
524	this.list = response.data.items	613	})
525	this.total = response.data.total	614	})
526	// Just to simulate the time of the request	615	}
527	// setTimeout(() => {	616	})
528	this.listLoading = false	617	},
		618	// 修改事件 -- 弹个框
529	// }, 1.5 * 1000);	619	handleUpdate(row) {
530	})	620	this.temp = Object.assign({}, row) // copy obj
531	},	621	this.temp.create_time = new Date(this.temp.create_time)
532	// 过滤器的事件	622	this.dialogStatus = 'update'
533	handleFilter() {	623	this.dialogFormVisible = true
534	this.$message({	624	this.$nextTick(() => {
535	message: 'handleFilter',	625	this.$refs['dataForm'].clearValidate()
536	type: 'success'	626	})
537	})	627	},
		628	// 修改事件
538	this.listQuery.page = 1	629	updateData() {
539	this.getList()	630	this.$refs['dataForm'].validate(valid => {
540	},	631	if (valid) {
541	// 状态变化修改	632	const tempData = Object.assign({}, this.temp)
542	handleModifyStatus(row, status) {	633	tempData.create_time = +new Date(tempData.create_time) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
543	this.$message({	634	updateUser(tempData).then(() => {
544	message: '操作成功',	635	const index = this.list.findIndex(v => v.id === this.temp.id)
545	type: 'success'	636	this.list.splice(index, 1, this.temp)
546	})	637	this.dialogFormVisible = false
547	row.status = status	638	this.$notify({
548	},	639	title: '成功',
549	// 搜索排序	640	message: '更新成功',
550	sortChange(data) {	641	type: 'success',
551	const { prop, order } = data	642	duration: 2000
552	if (prop === 'id') {	643	})
553	this.sortByID(order)	644	})
554	}	645	}
555	},	646	})
556	// 搜索排序	647	},
		648	// 删除事件
557	sortByID(order) {	649	handleDelete(row, index) {
558	if (order === 'ascending') {	650	const data = []
559	this.listQuery.sort = '+id'	651	delUser(data).then(() => {
560	} else {	652	this.list.splice(index, 1)
561	this.listQuery.sort = '-id'	653	this.$notify({
562	}	654	title: '成功',
563	this.handleFilter()	655	message: '删除成功',
564	},	656	type: 'success',
565		657	duration: 2000
566	resetTemp() {	658	})
567	this.temp = {	659	})
568	id: undefined,	660	},
		661	// 页面跳转
569	importance: 1,	662	handleFetchPv(pv) {
570	remark: '',	663	fetchPv(pv).then(response => {
571	create_time: new Date(),	664	this.pvData = response.data.pvData
572	title: '',	665	this.dialogPvVisible = true
573	status: '通过',	666	})
574	type: ''	667	},
		668	// 下载
575	}	669	handleDownload() {
576	},	670	this.downloadLoading = true
577	// 添加事件 -- 弹个框	671	import('@/vendor/Export2Excel').then(excel => {
578	handleCreate() {	672	const tHeader = [
579	// Notification(options);	673	'create_time',
580	this.resetTemp()	674	'title',
581	this.dialogStatus = 'create'	675	'type',
582	this.dialogFormVisible = true	676	'importance',
583	this.$nextTick(() => {	677	'status'
584	this.$refs['dataForm'].clearValidate()	678	]
585	})	679	const filterVal = [
586	const data = []	680	'create_time',
587	createUser(data).then(() => {	681	'title',
588	this.$notify({	682	'type',
589	title: '成功',	683	'importance',
590	message: '添加成功',	684	'status'
591	type: 'success',	685	]
592	duration: 2000	686	const data = this.formatJson(filterVal)
593	})	687	excel.export_json_to_excel({
594	})	688	header: tHeader,
595	},	689	data,
596	// 添加事件 --上传数据	690	filename: 'table-list'
597	createData() {	691	})
598	this.$refs['dataForm'].validate(valid => {	692	this.downloadLoading = false
599	if (valid) {	693	})
600	this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id	694	},
		695	// 格式化json
601	this.temp.nickname = '秀野堂主'	696	formatJson(filterVal) {
602	this.temp.author = '秀野堂主'	697	return this.list.map(v =>
603	// this.temp.level = "秀野堂主";	698	filterVal.map(j => {
604	this.temp.roles = 'admin'	699	if (j === 'create_time') {
605	createUser(this.temp).then(() => {	700	return parseTime(v[j])
606	this.list.unshift(this.temp)	701	} else {
607	this.dialogFormVisible = false	702	return v[j]
608	this.$notify({	703	}
609	title: '成功',	704	})
610	message: '创建成功',	705	)
611	type: 'success',	706	},
		707	// 排序规则
612	duration: 2000	708	getSortClass: function(key) {
613	})	709	const sort = this.listQuery.sort
614	})	710	return sort === `+${key}` ? 'ascending' : 'descending'
615	}	711	}
616	})	712	}
617	},	713	}

vue.config.js

Diff comments Edit View file @0bd8168

1	'use strict'	1	'use strict'
2	const path = require('path')	2	const path = require('path')
3	const defaultSettings = require('./src/settings.js')	3	const defaultSettings = require('./src/settings.js')
4		4
5	function resolve(dir) {	5	function resolve(dir) {
6	return path.join(__dirname, dir)	6	return path.join(__dirname, dir)
7	}	7	}
8		8
9	const name = defaultSettings.title \|\| 'vue Element Admin' // page title	9	const name = defaultSettings.title \|\| 'vue Element Admin' // page title
10		10
11	// If your port is set to 80,	11	// If your port is set to 80,
12	// use administrator privileges to execute the command line.	12	// use administrator privileges to execute the command line.
13	// For example, Mac: sudo npm run	13	// For example, Mac: sudo npm run
14	// You can change the port by the following method:	14	// You can change the port by the following method:
15	// port = 9527 npm run dev OR npm run dev --port = 9527	15	// port = 9527 npm run dev OR npm run dev --port = 9527
16	const port = process.env.port \|\| process.env.npm_config_port \|\| 9527 // dev port	16	const port = process.env.port \|\| process.env.npm_config_port \|\| 9527 // dev port
17		17
18	// All configuration item explanations can be find in https://cli.vuejs.org/config/	18	// All configuration item explanations can be find in https://cli.vuejs.org/config/
19	module.exports = {	19	module.exports = {
20	/**	20	/**
21	* You will need to set publicPath if you plan to deploy your site under a sub path,	21	* You will need to set publicPath if you plan to deploy your site under a sub path,
22	* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,	22	* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
23	* then publicPath should be set to "/bar/".	23	* then publicPath should be set to "/bar/".
24	* In most cases please use '/' !!!	24	* In most cases please use '/' !!!
25	* Detail: https://cli.vuejs.org/config/#publicpath	25	* Detail: https://cli.vuejs.org/config/#publicpath
26	*/	26	*/
27	publicPath: '/',	27	publicPath: '/',
28	outputDir: 'dist',	28	outputDir: 'dist',
29	assetsDir: 'static',	29	assetsDir: 'static',
30	lintOnSave: process.env.NODE_ENV === 'development',	30	lintOnSave: process.env.NODE_ENV === 'development',
31	productionSourceMap: false,	31	productionSourceMap: false,
32	devServer: {	32	devServer: {
33	port: port,	33	port: port,
34	open: true,	34	open: true,
35	overlay: {	35	overlay: {
36	warnings: false,	36	warnings: false,
37	errors: true	37	errors: true
38	},	38	},
39	before: require('./mock/mock-server.js')	39	before: require('./mock/mock-server.js')
40	},	40	},
41	configureWebpack: {	41	configureWebpack: {
42	// provide the app's title in webpack's name field, so that	42	// provide the app's title in webpack's name field, so that
43	// it can be accessed in index.html to inject the correct title.	43	// it can be accessed in index.html to inject the correct title.
44	name: name,	44	name: name,
45	resolve: {	45	resolve: {
46	alias: {	46	alias: {
47	'@': resolve('src')	47	'@': resolve('src')
48	}	48	}
49	}	49	}
50	},	50	},
51	chainWebpack(config) {//链式打包	51	chainWebpack(config) {//链式打包
52	config.plugins.delete('preload') // TODO: need test	52	config.plugins.delete('preload') // TODO: need test
53	config.plugins.delete('prefetch') // TODO: need test	53	config.plugins.delete('prefetch') // TODO: need test
54		54
55	// set svg-sprite-loader	55	// set svg-sprite-loader
56	config.module	56	config.module
57	.rule('svg')	57	.rule('svg')
58	.exclude.add(resolve('src/icons'))	58	.exclude.add(resolve('src/icons'))
59	.end()	59	.end()
60	config.module	60	config.module
61	.rule('icons')	61	.rule('icons')
62	.test(/\.svg$/)	62	.test(/\.svg$/)
63	.include.add(resolve('src/icons'))	63	.include.add(resolve('src/icons'))
64	.end()	64	.end()
65	.use('svg-sprite-loader')	65	.use('svg-sprite-loader')
66	.loader('svg-sprite-loader')	66	.loader('svg-sprite-loader')
67	.options({	67	.options({
68	symbolId: 'icon-[name]'	68	symbolId: 'icon-[name]'
69	})	69	})
70	.end()	70	.end()
71		71
72	// set preserveWhitespace	72	// set preserveWhitespace
73	config.module	73	config.module
74	.rule('vue')	74	.rule('vue')
75	.use('vue-loader')	75	.use('vue-loader')
76	.loader('vue-loader')	76	.loader('vue-loader')
77	.tap(options => {	77	.tap(options => {
78	options.compilerOptions.preserveWhitespace = true	78	options.compilerOptions.preserveWhitespace = true
79	return options	79	return options
80	})	80	})
81	.end()	81	.end()
82		82
83	config	83	config
84	// https://webpack.js.org/configuration/devtool/#development	84	// https://webpack.js.org/configuration/devtool/#development
85	.when(process.env.NODE_ENV === 'development',	85	.when(process.env.NODE_ENV === 'development',
86	config => config.devtool('cheap-source-map')	86	config => config.devtool('cheap-source-map')
87	)	87	)
88		88
89	config	89	config
90	.when(process.env.NODE_ENV !== 'development',	90	.when(process.env.NODE_ENV !== 'development',
91	config => {	91	config => {
92	config	92	config
93	.plugin('ScriptExtHtmlWebpackPlugin')	93	.plugin('ScriptExtHtmlWebpackPlugin')
94	.after('html')	94	.after('html')
95	.use('script-ext-html-webpack-plugin', [{	95	.use('script-ext-html-webpack-plugin', [{
96	// `runtime` must same as runtimeChunk name. default is `runtime`	96	// `runtime` must same as runtimeChunk name. default is `runtime`
97	inline: /runtime\..*\.js$/	97	inline: /runtime\..*\.js$/
98	}])	98	}])
99	.end()	99	.end()
100	config	100	config
101	.optimization.splitChunks({	101	.optimization.splitChunks({
102	chunks: 'all',	102	chunks: 'all',
103	cacheGroups: {	103	cacheGroups: {
104	libs: {	104	libs: {
105	name: 'chunk-libs',	105	name: 'chunk-libs',
106	test: /[\\/]node_modules[\\/]/,	106	test: /[\\/]node_modules[\\/]/,
107	priority: 10,	107	priority: 10,
108	chunks: 'initial' // only package third parties that are initially dependent	108	chunks: 'initial' // only package third parties that are initially dependent
109	},	109	},
110	elementUI: {	110	elementUI: {
111	name: 'chunk-elementUI', // split elementUI into a single package	111	name: 'chunk-elementUI', // split elementUI into a single package
112	priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app	112	priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
113	test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm	113	test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
114	},	114	},
115	commons: {	115	commons: {
116	name: 'chunk-commons',	116	name: 'chunk-commons',
117	test: resolve('src/components'), // can customize your rules	117	test: resolve('src/components'), // can customize your rules
118	minChunks: 3, // minimum common number	118	minChunks: 3, // minimum common number
119	priority: 5,	119	priority: 5,
120	reuseExistingChunk: true	120	reuseExistingChunk: true
121	}	121	}
122	}	122	}
123	})	123	})
124	config.optimization.runtimeChunk('single')	124	config.optimization.runtimeChunk('single')
125	}	125	}
126	)	126	)
127	}	127	}
128	}	128	}
129		129

GITLAB

吉鹏 / gulu-admin

Merge Request #9

Master

Merged by Adam 2020-05-11 15:37:44 UTC

Merge Request #9

How to merge

Master

Merged by Adam 2020-05-11 15:37:44 UTC $('.time_ago').timeago().tooltip()

Merged by Adam 2020-05-11 15:37:44 UTC