吉鹏 / gulu-admin

Commit 62b53535174ea5117dd4f691fb9ac7495bf67418

Authored by Adam 2020-05-11 23:37:44 +0800

Exists in master

Merge branch 'master' into 'master'

Master

See merge request !9

Showing 48 changed files Show diff stats

.env.development

Diff comments View file @62b5353

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

.eslintrc.js

Diff comments View file @62b5353

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

mock/article.js

Diff comments View file @62b5353

 import Mock from 'mockjs'
+// import logoPath from "~@/assets/img/yp_logo.jpeg"
 const List = []
 const count = 100
-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>'
+const baseContent = '<p>I am testing data, I am testing data.</p><p></p>'
-const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
+// const image_uri = logoPath
+const image_uri = 'https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'
 for (let i = 0; i < count; i++) {
   List.push(Mock.mock({
     id: '@increment',
     timestamp: +Mock.Random.date('T'),
     author: '@first',
     reviewer: '@first',
     title: '@title(5, 10)',
     content_short: 'mock data',
     content: baseContent,
     forecast: '@float(0, 100, 2, 2)',
     importance: '@integer(1, 3)',
     'type|1': ['CN', 'US', 'JP', 'EU'],
     'status|1': ['published', 'draft'],
     display_time: '@datetime',
     comment_disabled: true,
     pageviews: '@integer(300, 5000)',
     image_uri,
     platforms: ['a-platform']
   }))
 }
 export default [{
     url: '/yp/article/list',
     type: 'get',
     response: config => {
       const {
         importance,
         type,
         title,
         page = 1,
         limit = 20,
         sort
       } = config.query
       let mockList = List.filter(item => {
         if (importance && item.importance !== +importance) return false
         if (type && item.type !== type) return false
         if (title && item.title.indexOf(title) < 0) return false
         return true
       })
       if (sort === '-id') {
         mockList = mockList.reverse()
       }
       const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
       return {
         code: 20000,
         data: {
           total: mockList.length,
           items: pageList
         }
       }
     }
   },
   {
     url: '/yp/article/detail',
     type: 'get',
     response: config => {
       const {
         id
       } = config.query
       for (const article of List) {
         if (article.id === +id) {
           return {
             code: 20000,
             data: article
           }
         }
       }
     }
   },
   {
     url: '/yp/article/pv',
     type: 'get',
     response: _ => {
       return {
         code: 20000,
         data: {
           pvData: [{
               key: 'PC',
               pv: 1024
             },
             {
               key: 'mobile',
               pv: 1024
             },
             {
               key: 'ios',
               pv: 1024
             },
             {
               key: 'android',
               pv: 1024
             }
           ]
         }
       }
     }
   },
   {
     url: '/yp/article/create',
     type: 'post',
     response: _ => {
       return {
         code: 20000,
         data: 'success'
       }
     }
   },
   {
     url: '/yp/article/update',
     type: 'post',
     response: _ => {
       return {
         code: 20000,
         data: 'success'
       }
     }
   }
 ]

mock/big-tree.json

Diff comments View file @62b5353

File was created

mock/prod.js

Diff comments View file @62b5353

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 View file @62b5353

 // Just a mock data
-export const constantRoutes = [
+export const constantRoutes = [{
-  {
     path: '/redirect',
     component: 'layout/Layout',
     hidden: true,
-    children: [
+    children: [{
-      {
+      path: '/redirect/:path*',
-        path: '/redirect/:path*',
+      component: 'views/redirect/index'
-        component: 'views/redirect/index'
+    }]
-      }
-    ]
   },
   {
     path: '/login',
     component: 'views/login/index',
     hidden: true
   },
   {
     path: '/auth-redirect',
     component: 'views/login/auth-redirect',
     hidden: true
   },
   {
     path: '/401',
     component: 'views/error-page/401',
     hidden: true
   },
   {
     path: '/403',
     component: 'views/error-page/403',
     hidden: true
   },
   {
     path: '/404',
     component: 'views/error-page/404',
     hidden: true
   },
   {
     path: '/500',
     component: 'views/error-page/500',
     hidden: true
   },
   {
     path: '',
     component: 'layout/Layout',
     redirect: 'dashboard',
-    children: [
+    children: [{
-      {
+      path: 'dashboard',
-        path: 'dashboard',
+      component: 'views/dashboard/index',
-        component: 'views/dashboard/index',
+      name: 'Dashboard',
-        name: 'Dashboard',
+      meta: {
-        meta: { title: 'dashboard', icon: 'dashboard', affix: true }
+        title: 'dashboard',
+        icon: 'dashboard',
+        affix: true
       }
-    ]
+    }]
   },
   {
     path: '/documentation',
     component: 'layout/Layout',
-    children: [
+    children: [{
-      {
+      path: 'index',
-        path: 'index',
+      component: 'views/documentation/index',
-        component: 'views/documentation/index',
+      name: 'Documentation',
-        name: 'Documentation',
+      meta: {
-        meta: { title: 'documentation', icon: 'documentation', affix: true }
+        title: 'documentation',
+        icon: 'documentation',
+        affix: true
       }
-    ]
+    }]
   },
   {
     path: '/guide',
     component: 'layout/Layout',
     redirect: '/guide/index',
-    children: [
+    children: [{
-      {
+      path: 'index',
-        path: 'index',
+      component: 'views/guide/index',
-        component: 'views/guide/index',
+      name: 'Guide',
-        name: 'Guide',
+      meta: {
-        meta: { title: 'guide', icon: 'guide', noCache: true }
+        title: 'guide',
+        icon: 'guide',
+        noCache: true
       }
-    ]
+    }]
   }
 ]
-export const asyncRoutes = [
+export const asyncRoutes = [{
-  // {
+    path: '/permission',
-  //   path: '/permission',
+    component: 'layout/Layout',
-  //   component: 'layout/Layout',
+    redirect: '/permission/index',
-  //   redirect: '/permission/index',
+    alwaysShow: true,
-  //   alwaysShow: true,
+    meta: {
-  //   meta: {
+      title: 'permission',
-  //     title: 'permission',
+      icon: 'lock',
-  //     icon: 'lock',
+      // roles: ['admin', 'assistant', 'runner', 'shoper']
-  //     // roles: ['admin', 'assistant', 'runner', 'shoper']
+    },
-  //   },
+    children: [{
-  //   children: [
+        path: 'page',
-  //     {
+        component: 'views/permission/page',
-  //       path: 'page',
+        name: 'PagePermission',
-  //       component: 'views/permission/page',
+        meta: {
-  //       name: 'PagePermission',
+          title: 'pagePermission',
-  //       meta: {
+          roles: ['admin', 'assistant']
-  //         title: 'pagePermission',
+        }
-  //         roles: ['admin','assistant']
+      },
-  //       }
+      {
-  //     },
+        path: 'directive',
-  //     {
+        component: 'views/permission/directive',
-  //       path: 'directive',
+        name: 'DirectivePermission',
-  //       component: 'views/permission/directive',
+        meta: {
-  //       name: 'DirectivePermission',
+          title: 'directivePermission',
-  //       meta: {
+          roles: ['shoper']
-  //         title: 'directivePermission',
+        }
-  //         roles:['shoper']
+      },
-  //       }
+      {
-  //     },
+        path: 'role',
-  //     {
+        component: 'views/permission/role',
-  //       path: 'role',
+        name: 'RolePermission',
-  //       component: 'views/permission/role',
+        meta: {
-  //       name: 'RolePermission',
+          title: 'rolePermission',
-  //       meta: {
+          roles: ['runner']
-  //         title: 'rolePermission',
+        }
-  //         roles: ['runner']
+      }
-  //       }
+    ]
-  //     }
+  },
-  //   ]
-  // },
   {
     path: '/icon',
     component: 'layout/Layout',
     meta: {
       title: 'ddddd',
-      icon:'people',
+      icon: 'people',
       roles: ['runner']
     },
-    children: [
+    children: [{
-      {
+      path: 'index',
-        path: 'index',
+      component: 'views/icons/index',
-        component: 'views/icons/index',
+      name: 'Icons',
-        name: 'Icons',
+      meta: {
-        meta: { title: 'icons', icon: 'icon', noCache: true }
+        title: 'icons',
+        icon: 'icon',
+        noCache: true
       }
-    ]
+    }]
   },
   {
     path: '/components',
     component: 'layout/Layout',
     redirect: 'noRedirect',
     name: 'ComponentDemo',
     meta: {
       title: 'components',
       icon: 'component'
     },
-    children: [
+    children: [{
-      {
         path: 'tinymce',
         component: 'views/components-demo/tinymce',
         name: 'TinymceDemo',
-        meta: { title: 'tinymce' }
+        meta: {
+          title: 'tinymce'
+        }
       },
       {
         path: 'markdown',
         component: 'views/components-demo/markdown',
         name: 'MarkdownDemo',
-        meta: { title: 'markdown' }
+        meta: {
+          title: 'markdown'
+        }
       },
       {
         path: 'json-editor',
         component: 'views/components-demo/json-editor',
         name: 'JsonEditorDemo',
-        meta: { title: 'jsonEditor' }
+        meta: {
+          title: 'jsonEditor'
+        }
       },
       {
         path: 'split-pane',
         component: 'views/components-demo/split-pane',
         name: 'SplitpaneDemo',
-        meta: { title: 'splitPane' }
+        meta: {
+          title: 'splitPane'
+        }
       },
       {
         path: 'avatar-upload',
         component: 'views/components-demo/avatar-upload',
         name: 'AvatarUploadDemo',
-        meta: { title: 'avatarUpload' }
+        meta: {
+          title: 'avatarUpload'
+        }
       },
       {
         path: 'dropzone',
         component: 'views/components-demo/dropzone',
         name: 'DropzoneDemo',
-        meta: { title: 'dropzone' }
+        meta: {
+          title: 'dropzone'
+        }
       },
       {
         path: 'sticky',
         component: 'views/components-demo/sticky',
         name: 'StickyDemo',
-        meta: { title: 'sticky' }
+        meta: {
+          title: 'sticky'
+        }
       },
       {
         path: 'count-to',
         component: 'views/components-demo/count-to',
         name: 'CountToDemo',
-        meta: { title: 'countTo' }
+        meta: {
+          title: 'countTo'
+        }
       },
       {
         path: 'mixin',
         component: 'views/components-demo/mixin',
         name: 'ComponentMixinDemo',
-        meta: { title: 'componentMixin' }
+        meta: {
+          title: 'componentMixin'
+        }
       },
       {
         path: 'back-to-top',
         component: 'views/components-demo/back-to-top',
         name: 'BackToTopDemo',
-        meta: { title: 'backToTop' }
+        meta: {
+          title: 'backToTop'
+        }
       },
       {
         path: 'drag-dialog',
         component: 'views/components-demo/drag-dialog',
         name: 'DragDialogDemo',
-        meta: { title: 'dragDialog' }
+        meta: {
+          title: 'dragDialog'
+        }
       },
       {
         path: 'drag-select',
         component: 'views/components-demo/drag-select',
         name: 'DragSelectDemo',
-        meta: { title: 'dragSelect' }
+        meta: {
+          title: 'dragSelect'
+        }
       },
       {
         path: 'dnd-list',
         component: 'views/components-demo/dnd-list',
         name: 'DndListDemo',
-        meta: { title: 'dndList' }
+        meta: {
+          title: 'dndList'
+        }
       },
       {
         path: 'drag-kanban',
         component: 'views/components-demo/drag-kanban',
         name: 'DragKanbanDemo',
-        meta: { title: 'dragKanban' }
+        meta: {
+          title: 'dragKanban'
+        }
       }
     ]
   },
   {
     path: '/charts',
     component: 'layout/Layout',
     redirect: 'noRedirect',
     name: 'Charts',
     meta: {
       title: 'charts',
       icon: 'chart'
     },
-    children: [
+    children: [{
-      {
         path: 'keyboard',
         component: 'views/charts/keyboard',
         name: 'KeyboardChart',
-        meta: { title: 'keyboardChart', noCache: true }
+        meta: {
+          title: 'keyboardChart',
+          noCache: true
+        }
       },
       {
         path: 'line',
         component: 'views/charts/line',
         name: 'LineChart',
-        meta: { title: 'lineChart', noCache: true }
+        meta: {
+          title: 'lineChart',
+          noCache: true
+        }
       },
       {
         path: 'mixchart',
         component: 'views/charts/mixChart',
         name: 'MixChart',
-        meta: { title: 'mixChart', noCache: true }
+        meta: {
+          title: 'mixChart',
+          noCache: true
+        }
       }
     ]
   },
   {
     path: '/nested',
     component: 'layout/Layout',
     redirect: '/nested/menu1/menu1-1',
     name: 'Nested',
     meta: {
       title: 'nested',
       icon: 'nested'
     },
-    children: [
+    children: [{
-      {
         path: 'menu1',
         component: 'views/nested/menu1/index',
         name: 'Menu1',
-        meta: { title: 'menu1' },
+        meta: {
+          title: 'menu1'
+        },
         redirect: '/nested/menu1/menu1-1',
-        children: [
+        children: [{
-          {
             path: 'menu1-1',
             component: 'views/nested/menu1/menu1-1',
             name: 'Menu1-1',
-            meta: { title: 'menu1-1' }
+            meta: {
+              title: 'menu1-1'
+            }
           },
           {
             path: 'menu1-2',
             component: 'views/nested/menu1/menu1-2',
             name: 'Menu1-2',
             redirect: '/nested/menu1/menu1-2/menu1-2-1',
-            meta: { title: 'menu1-2' },
+            meta: {
-            children: [
+              title: 'menu1-2'
-              {
+            },
+            children: [{
                 path: 'menu1-2-1',
                 component: 'views/nested/menu1/menu1-2/menu1-2-1',
                 name: 'Menu1-2-1',
-                meta: { title: 'menu1-2-1' }
+                meta: {
+                  title: 'menu1-2-1'
+                }
               },
               {
                 path: 'menu1-2-2',
                 component: 'views/nested/menu1/menu1-2/menu1-2-2',
                 name: 'Menu1-2-2',
-                meta: { title: 'menu1-2-2' }
+                meta: {
+                  title: 'menu1-2-2'
+                }
               }
             ]
           },
           {
             path: 'menu1-3',
             component: 'views/nested/menu1/menu1-3',
             name: 'Menu1-3',
-            meta: { title: 'menu1-3' }
+            meta: {
+              title: 'menu1-3'
+            }
           }
         ]
       },
       {
         path: 'menu2',
         name: 'Menu2',
         component: 'views/nested/menu2/index',
-        meta: { title: 'menu2' }
+        meta: {
+          title: 'menu2'
+        }
       }
     ]
   },
   {
     path: '/example',
     component: 'layout/Layout',
     redirect: '/example/list',
     name: 'Example',
     meta: {
       title: 'example',
       icon: 'example'
     },
-    children: [
+    children: [{
-      {
         path: 'create',
         component: 'views/example/create',
         name: 'CreateArticle',
-        meta: { title: 'createArticle', icon: 'edit' }
+        meta: {
+          title: 'createArticle',
+          icon: 'edit'
+        }
       },
       {
         path: 'edit/:id(\\d+)',
         component: 'views/example/edit',
         name: 'EditArticle',
-        meta: { title: 'editArticle', noCache: true },
+        meta: {
+          title: 'editArticle',
+          noCache: true
+        },
         hidden: true
       },
       {
         path: 'list',
         component: 'views/example/list',
         name: 'ArticleList',
-        meta: { title: 'articleList', icon: 'list' }
+        meta: {
+          title: 'articleList',
+          icon: 'list'
+        }
       }
     ]
   },
   {
     path: '/tab',
     component: 'layout/Layout',
-    children: [
+    children: [{
-      {
+      path: 'index',
-        path: 'index',
+      component: 'views/tab/index',
-        component: 'views/tab/index',
+      name: 'Tab',
-        name: 'Tab',
+      meta: {
-        meta: { title: 'tab', icon: 'tab' }
+        title: 'tab',
+        icon: 'tab'
       }
-    ]
+    }]
   },
   {
     path: '/error',
     component: 'layout/Layout',
     redirect: 'noRedirect',
     name: 'ErrorPages',
     meta: {
       title: 'errorPages',
       icon: '404'
     },
-    children: [
+    children: [{
-      {
         path: '401',
         component: 'views/error-page/401',
         name: 'Page401',
-        meta: { title: 'page401', noCache: true }
+        meta: {
+          title: 'page401',
+          noCache: true
+        }
       },
       {
         path: '404',
         component: 'views/error-page/404',
         name: 'Page404',
-        meta: { title: 'page404', noCache: true }
+        meta: {
+          title: 'page404',
+          noCache: true
+        }
       },
       {
         path: '500',
         component: 'views/error-page/500',
         name: 'Page500',
-        meta: { title: 'page500', noCache: true }
+        meta: {
+          title: 'page500',
+          noCache: true
+        }
       }
     ]
   },
   {
     path: '/error-log',
     component: 'layout/Layout',
     redirect: 'noRedirect',
-    children: [
+    children: [{
-      {
+      path: 'log',
-        path: 'log',
+      component: 'views/error-log/index',
-        component: 'views/error-log/index',
+      name: 'ErrorLog',
-        name: 'ErrorLog',
+      meta: {
-        meta: { title: 'errorLog', icon: 'bug' }
+        title: 'errorLog',
+        icon: 'bug'
       }
-    ]
+    }]
   },
   {
     path: '/excel',
     component: 'layout/Layout',
     redirect: '/excel/export-excel',
     name: 'Excel',
     meta: {
       title: 'excel',
       icon: 'excel'
     },
-    children: [
+    children: [{
-      {
         path: 'export-excel',
         component: 'views/excel/export-excel',
         name: 'ExportExcel',
-        meta: { title: 'exportExcel' }
+        meta: {
+          title: 'exportExcel'
+        }
       },
       {
         path: 'export-selected-excel',
         component: 'views/excel/select-excel',
         name: 'SelectExcel',
-        meta: { title: 'selectExcel' }
+        meta: {
+          title: 'selectExcel'
+        }
       },
       {
         path: 'export-merge-header',
         component: 'views/excel/merge-header',
         name: 'MergeHeader',
-        meta: { title: 'mergeHeader' }
+        meta: {
+          title: 'mergeHeader'
+        }
       },
       {
         path: 'upload-excel',
         component: 'views/excel/upload-excel',
         name: 'UploadExcel',
-        meta: { title: 'uploadExcel' }
+        meta: {
+          title: 'uploadExcel'
+        }
       }
     ]
   },
   {
     path: '/zip',
     component: 'layout/Layout',
     redirect: '/zip/download',
     alwaysShow: true,
-    meta: { title: 'zip', icon: 'zip' },
+    meta: {
-    children: [
+      title: 'zip',
-      {
+      icon: 'zip'
-        path: 'download',
+    },
-        component: 'views/zip/index',
+    children: [{
-        name: 'ExportZip',
+      path: 'download',
-        meta: { title: 'exportZip' }
+      component: 'views/zip/index',
+      name: 'ExportZip',
+      meta: {
+        title: 'exportZip'
       }
-    ]
+    }]
   },
   {
     path: '/pdf',
     component: 'layout/Layout',
     redirect: '/pdf/index',
-    children: [
+    children: [{
-      {
+      path: 'index',
-        path: 'index',
+      component: 'views/pdf/index',
-        component: 'views/pdf/index',
+      name: 'PDF',
-        name: 'PDF',
+      meta: {
-        meta: { title: 'pdf', icon: 'pdf' }
+        title: 'pdf',
+        icon: 'pdf'
       }
-    ]
+    }]
   },
   {
     path: '/pdf/download',
     component: 'views/pdf/download',
     hidden: true
   },
   {
     path: '/theme',
     component: 'layout/Layout',
     redirect: 'noRedirect',
-    children: [
+    children: [{
-      {
+      path: 'index',
-        path: 'index',
+      component: 'views/theme/index',
-        component: 'views/theme/index',
+      name: 'Theme',
-        name: 'Theme',
+      meta: {
-        meta: { title: 'theme', icon: 'theme' }
+        title: 'theme',
+        icon: 'theme'
       }
-    ]
+    }]
   },
   {
     path: '/clipboard',
     component: 'layout/Layout',
     redirect: 'noRedirect',
-    children: [
+    children: [{
-      {
+      path: 'index',
-        path: 'index',
+      component: 'views/clipboard/index',
-        component: 'views/clipboard/index',
+      name: 'ClipboardDemo',
-        name: 'ClipboardDemo',
+      meta: {
-        meta: { title: 'clipboardDemo', icon: 'clipboard' }
+        title: 'clipboardDemo',
+        icon: 'clipboard'
       }
-    ]
+    }]
   },
   {
     path: '/i18n',
     component: 'layout/Layout',
-    children: [
+    children: [{
-      {
+      path: 'index',
-        path: 'index',
+      component: 'views/i18n-demo/index',
-        component: 'views/i18n-demo/index',
+      name: 'I18n',
-        name: 'I18n',
+      meta: {
-        meta: { title: 'i18n', icon: 'international' }
+        title: 'i18n',
+        icon: 'international'
       }
-    ]
+    }]
   },
   {
     path: 'external-link',
     component: 'layout/Layout',
-    children: [
+    children: [{
-      {
+      path: 'https://github.com/PanJiaChen/vue-element-admin',
-        path: 'https://github.com/PanJiaChen/vue-element-admin',
+      meta: {
-        meta: { title: 'externalLink', icon: 'link' }
+        title: 'externalLink',

mock/user.js

Diff comments View file @62b5353

 import Mock from 'mockjs'
 const tokens = {
   admin: {
     token: 'admin-token'
   },
   assistant: {
     token: 'assistant-token'
   },
   runner: {
     token: 'runner-token'
   },
   shoper: {
     token: 'shoper-token'
   }
 }
 const users = {
   'admin-token': {
     roles: ['admin'],
     introduction: 'I am a super administrator',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Super Admin'
   },
   'assistant-token': {
     roles: ['assistant'],
     introduction: 'I am an assistant',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Normal assistant'
   },
   'runner-token': {
     roles: ['runner'],
     introduction: 'I am an runner',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Normal runner'
   },
   'shoper-token': {
     roles: ['shoper'],
     introduction: 'I am an shoper',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Normal shoper'
   }
 }
 const List = []
-const count = 100
+const count = 10
 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>'
 const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
 for (let i = 0; i < count; i++) {
   List.push(Mock.mock({
     uid: '@increment',
     create_time: +Mock.Random.date('T'),
     nickname: '@first',
-    reviewer: '@first',
+    // reviewer: '@first',
-    title: '@title(5, 10)',
+    // title: '@title(5, 10)',
-    openid:'@sentence(12,12)',
+    openid: '@sentence(12,12)',
-    content_short: 'mock data',
+    comefromperson: '@title(1, 4)',
-    content: baseContent,
+    buyvalue:'@integer(1,100)',
-    forecast: '@float(0, 100, 2, 2)',
+    buywill:'@integer(1,100)',
-    importance: '@integer(1, 3)',
+    // content_short: 'mock data',
+    // content: baseContent,
+    // forecast: '@float(0, 100, 2, 2)',
+    // importance: '@integer(1, 3)',
     'type|1': ['CN', 'US', 'JP', 'EU'],
     'status|1': ['published', 'draft'],
-    display_time: '@datetime',
+    // display_time: '@datetime',
-    comment_disabled: true,
+    // comment_disabled: true,
     son_of_adv: '@integer(300, 5000)',//下线
     souceof:'@integer(300, 5000)',//源自
     image_uri,
     'roles|1': ['admin', 'assistant', 'shoper', 'runner'],
     platforms: ['a-platform']//哪个平台
   }))
 }
 export default [
   // user login
   {
     url: '/yp/user/login',
     type: 'post',
     response: config => {
       const { username } = config.body
       const token = tokens[username]
       // mock error
       if (!token) {
         return {
           code: 60204,
           message: 'Account and password are incorrect.'
         }
       }
       return {
         code: 20000,
         data: token
       }
     }
   },
   // get user info
   {
     url: '/yp/user/info\.*',
     type: 'get',
     response: config => {
       const { token } = config.query
       const info = users[token]
       // mock error
       if (!info) {
         return {
           code: 50008,
           message: 'Login failed, unable to get user details.'
         }
       }
       return {
         code: 20000,
         data: info
       }
     }
   },
   // user logout
   {
     url: '/yp/user/logout',
     type: 'post',
     response: _ => {
       return {
         code: 20000,
         data: 'success'
       }
     }
   },
   // user create
   {
     url: '/yp/user/create',
     type: 'post',
     response: _ => {
       return {
         code: 20000,
         data: 'success'
       }
     }
   },
   // user update
   {
     url: '/yp/user/update',
     type: 'post',
     response: _ => {
       return {
         code: 20000,
         data: 'success'
       }
     }
   },
   // user del
   {
     url: '/yp/user/del',
     type: 'post',
     response: _ => {
       return {
         code: 20000,
         data: 'success'
       }
     }
   },
   // user list
   {
     url: '/yp/user/list',
     type: 'get',
     response: config => {
       const {
         importance,
         type,
         title,
         page = 1,
         limit = 20,
         sort
       } = config.query
       let mockList = List.filter(item => {
         if (importance && item.importance !== +importance) return false
         if (type && item.type !== type) return false
         if (title && item.title.indexOf(title) < 0) return false
         return true
       })
       if (sort === '-id') {
         mockList = mockList.reverse()
       }
       const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
       return {
         code: 20000,
         data: {
           total: mockList.length,
           items: pageList
         }
       }
     }
   }
 ]

package.json

Diff comments View file @62b5353

 {
   "name": "vue-element-admin",
   "version": "4.2.1",
   "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
   "author": "Pan <panfree23@gmail.com>",
   "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "lint": "eslint --fix --ext .js,.vue src",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",
     "test:ci": "npm run lint && npm run test:unit",
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
     "new": "plop"
   },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {
     "src/**/*.{js,vue}": [
       "eslint --fix",
       "git add"
     ]
   },
   "keywords": [
     "vue",
     "admin",
     "dashboard",
     "element-ui",
     "boilerplate",
     "admin-template",
     "management-system"
   ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
   },
   "bugs": {
     "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
   },
   "dependencies": {
     "ant-design-vue": "^1.5.5",
     "axios": "0.18.1",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
     "echarts": "4.2.1",
     "element-ui": "2.13.0",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
     "jszip": "3.2.1",
     "less-loader": "^6.1.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "pinyin": "2.9.0",
     "qs": "^6.9.4",
     "screenfull": "4.2.0",
     "showdown": "1.9.0",
     "sortablejs": "1.8.4",
     "tui-editor": "1.3.3",
     "vant": "^2.8.0",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
+    "vue-giant-tree": "^0.1.2",
     "vue-i18n": "7.3.2",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
+    "vue-ztree": "^1.0.0",
     "vuedraggable": "2.20.0",
     "vuex": "3.1.0",
     "xlsx": "0.14.1"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.5.3",
     "@vue/cli-plugin-eslint": "^3.9.1",
     "@vue/cli-plugin-unit-jest": "3.5.3",
     "@vue/cli-service": "3.5.3",
     "@vue/test-utils": "1.0.0-beta.29",
     "autoprefixer": "^9.5.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
     "chalk": "2.4.2",
     "chokidar": "2.1.5",
     "connect": "3.6.6",
     "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "html-webpack-plugin": "3.2.0",
     "husky": "1.3.1",
     "lint-staged": "8.1.5",
     "mockjs": "1.0.1-beta3",
     "node-sass": "^4.9.0",
     "plop": "2.3.0",
     "runjs": "^4.3.2",
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "0.7.2",
     "serve-static": "^1.13.2",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.0",
     "vue-template-compiler": "2.6.10"
   },
   "engines": {
     "node": ">=8.9",
     "npm": ">= 3.0.0"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions"
   ]
 }

src/api/prod.js

Diff comments View file @62b5353

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

src/api/user.js

Diff comments View file @62b5353

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

src/assets/img/yp_logo.jpeg

Diff comments View file @62b5353

55.4 KB

src/assets/ztree/line_conn.gif

Diff comments View file @62b5353

45 Bytes

src/assets/ztree/loading.gif

Diff comments View file @62b5353

1.52 KB

src/assets/ztree/node.png

Diff comments View file @62b5353

390 Bytes

src/assets/ztree/root.png

Diff comments View file @62b5353

275 Bytes

src/assets/ztree/zTreeStandard.gif

Diff comments View file @62b5353

6.69 KB

src/assets/ztree/zTreeStandard.png

Diff comments View file @62b5353

12.3 KB

src/components/Ztree/vue-ztree.vue

Diff comments View file @62b5353

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>
	635

src/directive/waves/waves.css

Diff comments View file @62b5353

 .waves-ripple {
     position: absolute;
     border-radius: 100%;
-    background-color: rgba(0, 0, 0, 0.15);
+    /* background-color: rgba(0, 0, 0, 0.15); */
+    background-color: rgba(235, 45, 12, 0.15);
     background-clip: padding-box;
     pointer-events: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     -webkit-transform: scale(0);
     -ms-transform: scale(0);
     transform: scale(0);
     opacity: 1;
 }
 .waves-ripple.z-active {
     opacity: 0;
     -webkit-transform: scale(2);
     -ms-transform: scale(2);
     transform: scale(2);
     -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
     transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
     transition: opacity 1.2s ease-out, transform 0.6s ease-out;
     transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
 }

src/icons/svg/address_card.svg

Diff comments View file @62b5353

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 View file @62b5353

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 View file @62b5353

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

src/layout/components/Settings/index.vue

Diff comments View file @62b5353

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 View file @62b5353

 <template>
   <div class="sidebar-logo-container" :class="{'collapse':collapse}">
-    <transition name="sidebarLogoFade">
+    <transition name="sidebarLogoFade" style="background:#FFF;">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo">
         <h1 v-else class="sidebar-title">{{ title }} </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo">
         <h1 class="sidebar-title">{{ title }} </h1>
       </router-link>
     </transition>
   </div>
 </template>
 <script>
+import logoPath from '@/assets/img/yp_logo.jpeg'
 export default {
   name: 'SidebarLogo',
   props: {
     collapse: {
       type: Boolean,
       required: true
     }
   },
   data() {
     return {
-      title: '鱼皮计划',
+      title: '让我们荡起双浆',
-      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+      logo: logoPath
     }
   }
 }
 </script>
 <style lang="scss" scoped>
 .sidebarLogoFade-enter-active {
   transition: opacity 1.5s;
 }
 .sidebarLogoFade-enter,
 .sidebarLogoFade-leave-to {
   opacity: 0;
 }
 .sidebar-logo-container {
   position: relative;
   width: 100%;
   height: 50px;
   line-height: 50px;
   background: #2b2f3a;
   text-align: center;
   overflow: hidden;
   & .sidebar-logo-link {
     height: 100%;
     width: 100%;
     & .sidebar-logo {
       width: 32px;
       height: 32px;
       vertical-align: middle;
       margin-right: 12px;
     }
     & .sidebar-title {
       display: inline-block;
       margin: 0;
       color: #fff;
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
     }
   }
   &.collapse {
     .sidebar-logo {
       margin-right: 0px;
     }
   }
 }
 </style>

src/router/index.js

Diff comments View file @62b5353

 import Vue from 'vue'
 import Router from 'vue-router'
 Vue.use(Router)
 /* Layout */
 import Layout from '@/layout'
 /* Router Modules */
-// import componentsRouter from './modules/components'
+import componentsRouter from './modules/components'
 // import chartsRouter from './modules/charts'
-import tableRouter from './modules/table'
+// import tableRouter from './modules/table'
 // import nestedRouter from './modules/nested'
 import userRouter from './modules/user'
 import systemRouter from './modules/system'
 import prodRouter from './modules/prod'
+import orderRouter from './modules/order'
 import metaRouter from './modules/meta'
+import sitesRouter from './modules/sites'
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
  *
  * hidden: true                   if set true, item will not show in the sidebar(default is false)
  * alwaysShow: true               if set true, will always show the root menu
  *                                if not set alwaysShow, when item has more than one children route,
  *                                it will becomes nested mode, otherwise not show the root menu
  * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
  * name:'router-name'             the name is used by <keep-alive> (must set!!!)
  * meta : {
     roles: ['admin','assistant','runner', 'shoper']    control the page roles (you can set multiple roles)
     title: 'title'               the name show in sidebar and breadcrumb (recommend set)
     icon: 'svg-name'             the icon show in the sidebar
     noCache: true                if set true, the page will no be cached(default is false)
     affix: true                  if set true, the tag will affix in the tags-view
     breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
     activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
   }
  */
 /**
  * constantRoutes
  * a base page that does not have permission requirements
  * all roles can be accessed
  */
-export const constantRoutes = [
+export const constantRoutes = [{
-  {
+  path: '/redirect',
-    path: '/redirect',
+  component: Layout,
-    component: Layout,
+  hidden: true,
-    hidden: true,
+  children: [{
-    children: [
+    path: '/redirect/:path*',
-      {
+    component: () => import('@/views/redirect/index')
-        path: '/redirect/:path*',
+  }]
-        component: () => import('@/views/redirect/index')
+},
-      }
+{
-    ]
+  path: '/login',
-  },
+  component: () => import('@/views/login/index'),
-  {
+  hidden: true
-    path: '/login',
+},
-    component: () => import('@/views/login/index'),
+{
-    hidden: true
+  path: '/auth-redirect',
-  },
+  component: () => import('@/views/login/auth-redirect'),
-  {
+  hidden: true
-    path: '/auth-redirect',
+},
-    component: () => import('@/views/login/auth-redirect'),
+{
-    hidden: true
+  path: '/404',
-  },
+  component: () => import('@/views/error-page/404'),
-  {
+  hidden: true
-    path: '/404',
+},
-    component: () => import('@/views/error-page/404'),
+{
-    hidden: true
+  path: '/500',
-  },
+  component: () => import('@/views/error-page/500'),
-  {
+  hidden: true
-    path: '/500',
+},
-    component: () => import('@/views/error-page/500'),
+{
-    hidden: true
+  path: '/401',
-  },
+  component: () => import('@/views/error-page/401'),
-  {
+  hidden: true
-    path: '/401',
+},
-    component: () => import('@/views/error-page/401'),
+{
-    hidden: true
+  path: '/',
-  },
+  component: Layout,
-  {
+  redirect: '/dashboard',
-    path: '/',
+  children: [{
-    component: Layout,
+    path: 'dashboard',
-    redirect: '/dashboard',
+    component: () => import('@/views/dashboard/index'),
-    children: [
+    name: 'Dashboard',
-      {
+    meta: {
-        path: 'dashboard',
+      title: 'dashboard',
-        component: () => import('@/views/dashboard/index'),
+      icon: 'dashboard',
-        name: 'Dashboard',
+      affix: true
-        meta: { title: 'dashboard', icon: 'dashboard', affix: true }
+    }
-      }
+  }]
-    ]
+},
-  },
+// {
-  // {
+//   path: '/documentation',
-  //   path: '/documentation',
+//   component: Layout,
-  //   component: Layout,
+//   children: [
-  //   children: [
+//     {
-  //     {
+//       path: 'index',
-  //       path: 'index',
+//       component: () => import('@/views/documentation/index'),
-  //       component: () => import('@/views/documentation/index'),
+//       name: 'Documentation',
-  //       name: 'Documentation',
+//       meta: { title: 'documentation', icon: 'documentation', affix: true }
-  //       meta: { title: 'documentation', icon: 'documentation', affix: true }
+//     }
-  //     }
+//   ]
-  //   ]
+// },
-  // },
+{
-  {
+  path: '/guide',
-    path: '/guide',
+  component: Layout,
-    component: Layout,
+  redirect: '/guide/index',
-    redirect: '/guide/index',
+  children: [{
-    children: [
+    path: 'index',
-      {
+    component: () => import('@/views/guide/index'),
-        path: 'index',
+    name: 'Guide',
-        component: () => import('@/views/guide/index'),
+    meta: {
-        name: 'Guide',
+      title: 'guide',
-        meta: { title: 'guide', icon: 'guide', noCache: true }
+      icon: 'guide',
-      }
+      noCache: true
-    ]
+    }
-  }
+  }]
+}
   // {
   //   path: '/profile',
   //   component: Layout,
   //   redirect: '/profile/index',
   //   hidden: true,
   //   children: [
   //     {
   //       path: 'index',
   //       component: () => import('@/views/profile/index'),
   //       name: 'Profile',
   //       meta: { title: 'profile', icon: 'user', noCache: true }
   //     }
   //   ]
   // }
 ]
 /**
  * asyncRoutes
  * the routes that need to be dynamically loaded based on user roles
  */
 export const asyncRoutes = [
   // {
   //   path: '/permission',
   //   component: Layout,
   //   redirect: '/permission/page',
   //   alwaysShow: true, // will always show the root menu
   //   name: 'Permission',
   //   meta: {
   //     title: 'permission',
   //     icon: 'lock',
   //     roles: ['admin', 'assistant'] // you can set roles in root nav
   //   },
   //   children: [
   //     {
   //       path: 'page',
   //       component: () => import('@/views/permission/page'),
   //       name: 'PagePermission',
   //       meta: {
   //         title: 'pagePermission',
   //         roles: ['admin','assistant'] // or you can only set roles in sub nav
   //       }
   //     },
   //     {
   //       path: 'directive',
   //       component: () => import('@/views/permission/directive'),
   //       name: 'DirectivePermission',
   //       meta: {
   //         title: 'directivePermission',
   //         roles: ['admin', 'shoper']
   //         // if do not set roles, means: this page does not require permission
   //       }
   //     },
   //     {
   //       path: 'role',
   //       component: () => import('@/views/permission/role'),
   //       name: 'RolePermission',
   //       meta: {
   //         title: 'rolePermission',
   //         roles: ['admin', 'runner']
   //       }
   //     }
   //   ]
   // },
-  tableRouter,
+  // tableRouter,
   metaRouter,
   userRouter,
   prodRouter,
+  orderRouter,
+  sitesRouter,
+  systemRouter,
+  componentsRouter,
+  // chartsRouter,
+  // nestedRouter,
+  // tableRouter,
   {
-    path: '/orders',
+    path: '/icon',
     component: Layout,
-    redirect: '/order/page',
+    children: [{
-    alwaysShow: true, // will always show the root menu
+      path: 'index',
-    name: 'Order',
+      component: () => import('@/views/icons/index'),
-    meta: {
+      name: 'Icons',
-      title: 'orders',
+      meta: {
-      icon: 'shopping',
+        title: 'icons',
-      roles: ['admin', 'assistant', 'runner', 'shoper'] // you can set roles in root nav
+        icon: 'icon',
-    },
+        noCache: true
-    children: [
-      {
-        path: 'page',
-        component: () => import('@/views/permission/page'),
-        name: 'OrderList',
-        meta: {
-          title: 'OrderList',
-          roles: ['admin', 'assistant', 'runner', 'shoper'] // or you can only set roles in sub nav
-        }
-      },
-      {
-        path: 'defined',
-        component: () => import('@/views/permission/directive'),
-        name: 'OrderDefiend',
-        meta: {
-          title: 'OrderDefiend',
-          roles: ['admin', 'assistant', 'runner', 'shoper']
-          // if do not set roles, means: this page does not require permission
-        }
       }
-    ]
+    }]
   },
+  /** when your routing map is too long, you can split it into small modules **/
   {
-    path: '/sites',
+    path: '/example',
     component: Layout,
-    redirect: '/site/page',
+    redirect: '/example/list',
-    alwaysShow: true, // will always show the root menu
+    name: 'Example',
-    name: 'Site',
     meta: {
-      title: 'sites',
+      title: 'example',
-      icon: 'people',
+      icon: 'example'
-      roles: ['admin', 'assistant', 'runner'] // you can set roles in root nav
+    },
+    children: [{
+      path: 'create',
+      component: () => import('@/views/example/create'),
+      name: 'CreateArticle',
+      meta: {
+        title: 'createArticle',
+        icon: 'edit'
+      }
     },
-    children: [
+    {
-      {
+      path: 'edit/:id(\\d+)',
-        path: 'page',
+      component: () => import('@/views/example/edit'),
-        component: () => import('@/views/permission/page'),
+      name: 'EditArticle',
-        name: 'SiteList',
+      meta: {
-        meta: {
+        title: 'editArticle',
-          title: 'SiteList',
+        noCache: true,
-          roles: ['admin', 'assistant', 'runner'] // or you can only set roles in sub nav
+        activeMenu: '/example/list'
-        }
       },
-      {
+      hidden: true
-        path: 'defined',
+    },
-        component: () => import('@/views/permission/directive'),
+    {
-        name: 'SiteDefiend',
+      path: 'list',
-        meta: {
+      component: () => import('@/views/example/list'),
-          title: 'SiteDefiend',
+      name: 'ArticleList',
-          roles: ['admin', 'assistant', 'runner']
+      meta: {
-          // if do not set roles, means: this page does not require permission
+        title: 'articleList',
-        }
+        icon: 'list'
       }
+    }
     ]
   },
   // {
-  //   path: '/icon',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/icons/index'),
-  //       name: 'Icons',
-  //       meta: { title: 'icons', icon: 'icon', noCache: true }
-  //     }
-  //   ]
-  // },
-  systemRouter,
-  /** when your routing map is too long, you can split it into small modules **/
-  // componentsRouter,
-  // chartsRouter,
-  // nestedRouter,
-  // tableRouter,
-  // {
-  //   path: '/example',
-  //   component: Layout,
-  //   redirect: '/example/list',
-  //   name: 'Example',
-  //   meta: {
-  //     title: 'example',
-  //     icon: 'example'
-  //   },
-  //   children: [
-  //     {
-  //       path: 'create',
-  //       component: () => import('@/views/example/create'),
-  //       name: 'CreateArticle',
-  //       meta: { title: 'createArticle', icon: 'edit' }
-  //     },
-  //     {
-  //       path: 'edit/:id(\\d+)',
-  //       component: () => import('@/views/example/edit'),
-  //       name: 'EditArticle',
-  //       meta: { title: 'editArticle', noCache: true, activeMenu: '/example/list' },
-  //       hidden: true
-  //     },
-  //     {
-  //       path: 'list',
-  //       component: () => import('@/views/example/list'),
-  //       name: 'ArticleList',
-  //       meta: { title: 'articleList', icon: 'list' }
-  //     }
-  //   ]
-  // },
-  // {
   //   path: '/tab',
   //   component: Layout,
   //   children: [
   //     {
   //       path: 'index',
   //       component: () => import('@/views/tab/index'),
   //       name: 'Tab',
   //       meta: { title: 'tab', icon: 'tab' }
   //     }
   //   ]
   // },
   // {
   //   path: '/error',
   //   component: Layout,
   //   redirect: 'noRedirect',
   //   name: 'ErrorPages',
   //   meta: {
   //     title: 'errorPages',
   //     icon: '404'
   //   },
   //   children: [
   //     {
   //       path: '401',
   //       component: () => import('@/views/error-page/401'),
   //       name: 'Page401',
   //       meta: { title: 'page401', noCache: true }
   //     },
   //     {
   //       path: '404',
   //       component: () => import('@/views/error-page/404'),
   //       name: 'Page404',
   //       meta: { title: 'page404', noCache: true }
   //     }
   //   ]
   // },
   // {
   //   path: '/error-log',
   //   component: Layout,
   //   children: [
   //     {
   //       path: 'log',
   //       component: () => import('@/views/error-log/index'),
   //       name: 'ErrorLog',
   //       meta: { title: 'errorLog', icon: 'bug' }
   //     }
   //   ]
   // },
   // {
   //   path: '/excel',
   //   component: Layout,
   //   redirect: '/excel/export-excel',
   //   name: 'Excel',
   //   meta: {
   //     title: 'excel',
   //     icon: 'excel'
   //   },
   //   children: [
   //     {
   //       path: 'export-excel',
   //       component: () => import('@/views/excel/export-excel'),
   //       name: 'ExportExcel',
   //       meta: { title: 'exportExcel' }
   //     },
   //     {
   //       path: 'export-selected-excel',
   //       component: () => import('@/views/excel/select-excel'),
   //       name: 'SelectExcel',
   //       meta: { title: 'selectExcel' }
   //     },
   //     {
   //       path: 'export-merge-header',
   //       component: () => import('@/views/excel/merge-header'),
   //       name: 'MergeHeader',
   //       meta: { title: 'mergeHeader' }
   //     },
   //     {
   //       path: 'upload-excel',
   //       component: () => import('@/views/excel/upload-excel'),
   //       name: 'UploadExcel',
   //       meta: { title: 'uploadExcel' }
   //     }
   //   ]
   // },
   // {
   //   path: '/zip',
   //   component: Layout,
   //   redirect: '/zip/download',
   //   alwaysShow: true,
   //   name: 'Zip',
   //   meta: { title: 'zip', icon: 'zip' },
   //   children: [
   //     {
   //       path: 'download',
   //       component: () => import('@/views/zip/index'),
   //       name: 'ExportZip',
   //       meta: { title: 'exportZip' }
   //     }
   //   ]
   // },
   // {
   //   path: '/pdf',
   //   component: Layout,
   //   redirect: '/pdf/index',
   //   children: [
   //     {
   //       path: 'index',
   //       component: () => import('@/views/pdf/index'),
   //       name: 'PDF',
   //       meta: { title: 'pdf', icon: 'pdf' }
   //     }
   //   ]
   // },
   // {
   //   path: '/pdf/download',
   //   component: () => import('@/views/pdf/download'),
   //   hidden: true
   // },
   // {
   //   path: '/theme',
   //   component: Layout,
   //   children: [
   //     {
   //       path: 'index',
   //       component: () => import('@/views/theme/index'),
   //       name: 'Theme',
   //       meta: { title: 'theme', icon: 'theme' }
   //     }
   //   ]
   // },
   // {
   //   path: '/clipboard',
   //   component: Layout,
   //   children: [
   //     {
   //       path: 'index',
   //       component: () => import('@/views/clipboard/index'),
   //       name: 'ClipboardDemo',
   //       meta: { title: 'clipboardDemo', icon: 'clipboard' }
   //     }
   //   ]
   // },
   // {
   //   path: '/i18n',
   //   component: Layout,
   //   children: [
   //     {
   //       path: 'index',
   //       component: () => import('@/views/i18n-demo/index'),
   //       name: 'I18n',
   //       meta: { title: 'i18n', icon: 'international' }
   //     }
   //   ]
   // },
   // {
   //   path: 'external-link',
   //   component: Layout,
   //   children: [
   //     {
   //       path: 'https://github.com/PanJiaChen/vue-element-admin',
   //       meta: { title: 'externalLink', icon: 'link' }
   //     }
   //   ]
   // },

src/router/modules/meta.js

Diff comments View file @62b5353

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: 'page',	15	path: 'metapage',
16	component: () => import('@/views/meta/complex-table'),	16	component: () => import('@/views/meta/tree'),
17	name: 'MetaList',	17	name: 'MetaList',
18	meta: {	18	meta: {
19	title: 'MetaList',	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 View file @62b5353

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
	28

src/router/modules/prod.js

Diff comments View file @62b5353

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

src/router/modules/sites.js

Diff comments View file @62b5353

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
	27

src/router/modules/system.js

Diff comments View file @62b5353

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', 'runner'] // 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: 'page',	15	path: 'systempage2',
16	component: () => import('@/views/example/list'),	16	component: () => import('@/views/example/list'),
17	name: 'SystemList',	17	name: 'SystemList1',
18	meta: {	18	meta: {
19	title: 'systems.sites',	19	title: 'systems.sites',
20	roles: ['admin', 'assistant', 'runner'] // 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: 'page',	24	path: 'sytempage2',
25	component: () => import('@/views/example/list'),	25	component: () => import('@/views/example/list'),
26	name: 'SystemList',	26	name: 'SystemList2',
27	meta: {	27	meta: {
28	title: 'systems.money',	28	title: 'systems.money',
29	roles: ['admin', 'assistant', 'runner'] // 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: 'page',	33	path: 'systempage3',
34	component: () => import('@/views/example/list'),	34	component: () => import('@/views/example/list'),
35	name: 'SystemList',	35	name: 'SystemList3',
36	meta: {	36	meta: {
37	title: 'systems.industry',	37	title: 'systems.industry',
38	roles: ['admin', 'assistant', 'runner'] // 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: 'page',	42	path: 'systempage4',
43	component: () => import('@/views/example/list'),	43	component: () => import('@/views/example/list'),
44	name: 'SystemList',	44	name: 'SystemList4',
45	meta: {	45	meta: {
46	title: 'systems.template',	46	title: 'systems.template',
47	roles: ['admin', 'assistant', 'runner'] // 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 View file @62b5353

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',	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: 'page',	17	path: 'assistant',
18	component: () => import('@/views/users/list'),	18	component: () => import('@/views/users/list'),
19	name: 'UserList',	19	name: 'assistant',
		20	query: {
		21	test: 'ssssss'
		22	},
20	meta: {	23	meta: {
21	title: 'UserList',	24	title: 'users.assistant',
22	roles: ['admin', 'assistant', 'shoper', 'runner'] // or you can only set roles in sub nav	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	}	62	}
24	}	63	}
25	// ,{	64	// ,{
26	// path: '/icons',	65	// path: '/icons',
27	// component: () => import('@/views/icons/index'),	66	// component: () => import('@/views/icons/index'),
28	// name: 'icons',	67	// name: 'icons',
29	// meta: {	68	// meta: {
30	// title: 'icons',	69	// title: 'icons',
31	// roles: ['admin', 'assistant', 'shoper', 'runner'] // or you can only set roles in sub nav	70	// roles: ['admin', 'assistant', 'shoper', 'runner'] // or you can only set roles in sub nav
32	// }	71	// }
33	// }	72	// }
34	]	73	]
35	}	74	}
36		75
37	export default chartsRouter	76	export default chartsRouter
38		77

src/store/modules/tagsView.js

Diff comments View file @62b5353

 const state = {
   visitedViews: [],
   cachedViews: []
 }
 const mutations = {
   ADD_VISITED_VIEW: (state, view) => {
     if (state.visitedViews.some(v => v.path === view.path)) return
     state.visitedViews.push(
       Object.assign({}, view, {
         title: view.meta.title || 'no-name'
       })
     )
   },
   ADD_CACHED_VIEW: (state, view) => {
     if (state.cachedViews.includes(view.name)) return
     if (!view.meta.noCache) {
       state.cachedViews.push(view.name)
     }
   },
   DEL_VISITED_VIEW: (state, view) => {
     for (const [i, v] of state.visitedViews.entries()) {
       if (v.path === view.path) {
         state.visitedViews.splice(i, 1)
         break
       }
     }
   },
   DEL_CACHED_VIEW: (state, view) => {
     const index = state.cachedViews.indexOf(view.name)
     index > -1 && state.cachedViews.splice(index, 1)
   },
   DEL_OTHERS_VISITED_VIEWS: (state, view) => {
     state.visitedViews = state.visitedViews.filter(v => {
       return v.meta.affix || v.path === view.path
     })
   },
   DEL_OTHERS_CACHED_VIEWS: (state, view) => {
     const index = state.cachedViews.indexOf(view.name)
     if (index > -1) {
       state.cachedViews = state.cachedViews.slice(index, index + 1)
     } else {
       // if index = -1, there is no cached tags
       state.cachedViews = []
     }
   },
   DEL_ALL_VISITED_VIEWS: state => {
     // keep affix tags
     const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
     state.visitedViews = affixTags
   },
   DEL_ALL_CACHED_VIEWS: state => {
     state.cachedViews = []
   },
   UPDATE_VISITED_VIEW: (state, view) => {
     for (let v of state.visitedViews) {
       if (v.path === view.path) {
         v = Object.assign(v, view)
         break
       }
     }
   }
 }
 const actions = {
-  addView({ dispatch }, view) {
+  addView({
+    dispatch
+  }, view) {
     dispatch('addVisitedView', view)
     dispatch('addCachedView', view)
   },
-  addVisitedView({ commit }, view) {
+  addVisitedView({
+    commit
+  }, view) {
     commit('ADD_VISITED_VIEW', view)
   },
-  addCachedView({ commit }, view) {
+  addCachedView({
+    commit
+  }, view) {
     commit('ADD_CACHED_VIEW', view)
   },
-  delView({ dispatch, state }, view) {
+  delView({
+    dispatch,
+    state
+  }, view) {
     return new Promise(resolve => {
       dispatch('delVisitedView', view)
       dispatch('delCachedView', view)
       resolve({
         visitedViews: [...state.visitedViews],
         cachedViews: [...state.cachedViews]
       })
     })
   },
-  delVisitedView({ commit, state }, view) {
+  delVisitedView({
+    commit,
+    state
+  }, view) {
     return new Promise(resolve => {
       commit('DEL_VISITED_VIEW', view)
       resolve([...state.visitedViews])
     })
   },
-  delCachedView({ commit, state }, view) {
+  delCachedView({
+    commit,
+    state
+  }, view) {
     return new Promise(resolve => {
       commit('DEL_CACHED_VIEW', view)
       resolve([...state.cachedViews])
     })
   },
-  delOthersViews({ dispatch, state }, view) {
+  delOthersViews({
+    dispatch,
+    state
+  }, view) {
     return new Promise(resolve => {
       dispatch('delOthersVisitedViews', view)
       dispatch('delOthersCachedViews', view)
       resolve({
         visitedViews: [...state.visitedViews],
         cachedViews: [...state.cachedViews]
       })
     })
   },
-  delOthersVisitedViews({ commit, state }, view) {
+  delOthersVisitedViews({
+    commit,
+    state
+  }, view) {
     return new Promise(resolve => {
       commit('DEL_OTHERS_VISITED_VIEWS', view)
       resolve([...state.visitedViews])
     })
   },
-  delOthersCachedViews({ commit, state }, view) {
+  delOthersCachedViews({
+    commit,
+    state
+  }, view) {
     return new Promise(resolve => {
       commit('DEL_OTHERS_CACHED_VIEWS', view)
       resolve([...state.cachedViews])
     })
   },
-  delAllViews({ dispatch, state }, view) {
+  delAllViews({
+    dispatch,
+    state
+  }, view) {
     return new Promise(resolve => {
       dispatch('delAllVisitedViews', view)
       dispatch('delAllCachedViews', view)
       resolve({
         visitedViews: [...state.visitedViews],
         cachedViews: [...state.cachedViews]
       })
     })
   },
-  delAllVisitedViews({ commit, state }) {
+  delAllVisitedViews({
+    commit,
+    state
+  }) {
     return new Promise(resolve => {
       commit('DEL_ALL_VISITED_VIEWS')
       resolve([...state.visitedViews])
     })
   },
-  delAllCachedViews({ commit, state }) {
+  delAllCachedViews({
+    commit,
+    state
+  }) {
     return new Promise(resolve => {
       commit('DEL_ALL_CACHED_VIEWS')
       resolve([...state.cachedViews])
     })
   },
-  updateVisitedView({ commit }, view) {
+  updateVisitedView({
+    commit
+  }, view) {
     commit('UPDATE_VISITED_VIEW', view)
   }
 }
 export default {
   namespaced: true,
   state,
   mutations,
   actions
 }

src/utils/request.js

Diff comments View file @62b5353

 import axios from 'axios'
 import qs from 'qs'
 import {
   MessageBox,
   Message,
   // Loading,
   Notification
 } from 'element-ui'
 import store from '@/store'
 import {
   getToken
 } from '@/utils/auth'
+// const baseUrl = 'http://localhost/sys-glass/api';
+// const baseUrl = 'http://localhost:8087';
+const baseUrl = '/dev-api'
+// const baseUrl = process.env.VUE_APP_BASE_API // url = base url + request url
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  baseURL: baseUrl, // url = base url + request url
   withCredentials: true, // send cookies when cross-domain requests
   timeout: 3000 // request timeout
 })
 // let loadingInstance
 // request interceptor
 service.interceptors.request.use(
   config => {
     const token = sessionStorage.getItem('access_token')
     // const csrf = store.getters.csrf
     if (token) {
       config.headers = {
         'access-token': token,
         'Content-Type': 'application/x-www-form-urlencoded'
       }
     }
     if (config.url === 'refresh') {
       config.headers = {
         'refresh-token': sessionStorage.getItem('refresh_token'),
         'Content-Type': 'application/x-www-form-urlencoded'
       }
     }
     // let options = {
     //   lock: true,
     //   fullscreen: false,
     //   text: '数据加载中……',
     //   // background: '#FFCC00',
     //   spinner: 'el-icon-loading'
     // };
     const options = {
       type: 'success',
-      message: config.url,
+      message: baseUrl + config.url,
       title: 'request axios ',
       showClose: true,
       duration: 3000
     }
     Notification(options)
     // loadingInstance = Loading.service(options);
     config.method === 'post'
       ? config.data = qs.stringify({
         ...config.data
       })
       : config.params = {
         ...config.params
       }
     if (store.getters.token) {
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
       config.headers['X-Token'] = getToken()
     }
     config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
     return config
     // do something before request is sent
   },
   error => {
     // do something with request error
     Message({
       message: error || 'Error',
       type: 'error',
       duration: 5 * 1000
     })
     console.log(error) // for debug
     return Promise.reject(error)
   }
 )
 // response interceptor
 service.interceptors.response.use(
   /**
    * If you want to get http information such as headers or status
    * Please return  response => response
    */
   /**
    * Determine the request status by custom code
    * Here is just an example
    * You can also judge the status by HTTP Status Code
    */
   response => {
     const options = {
       type: 'error',
       message: response.status,
       title: 'response status value ',
       showClose: true,
       duration: 1000
     }
     Notification(options)
     // Notification.close()
     // 这里根据后端提供的数据进行对应的处理
     console.log('response===>', response)
     // 定时刷新access-token
     // if (!response.data.value && response.data.data.message === 'token invalid') {
     //   // 刷新token
     //   store.dispatch('refresh').then(response => {
     //   sessionStorage.setItem('access_token', response.data)
     //   }).catch(error => {
     //   throw new Error('token刷新' + error)
     //   })
     // }
     const res = response.data
     // if the custom code is not 20000, it is judged as an error.
     if (res.code !== 20000) {
       Message({
         message: res.message || 'Error',
         type: 'error',
         duration: 5 * 1000
       })
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
         // to re-login
         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
           confirmButtonText: 'Re-Login',
           cancelButtonText: 'Cancel',
           type: 'warning'
         }).then(() => {
           store.dispatch('user/resetToken').then(() => {
             location.reload()
           })
         })
       }
       return Promise.reject(new Error(res.message || 'Error'))
     } else {
       return res
     }
   },
   error => {
     console.log('error', error)
     // console.log(JSON.stringify(error));
     // 500的状态也应该处理一下
     // 401-403的状态也应该处理一下
     const text = JSON.parse(JSON.stringify(error)).response.status === 404
       ? '404'
       : '网络异常，请重试'
     Message({
       message: text || 'Error',
       type: 'error',
       duration: 5 * 1000
     })
     return Promise.reject(error)
   }
 )
 // 假设你想移除拦截器
 // axios.interceptors.request.eject(service);
 export default service

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

Diff comments View file @62b5353

 <template>
   <el-card class="box-card-component" style="margin-left:8px;">
     <div slot="header" class="box-card-header">
       <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
     </div>
     <div style="position:relative;">
       <pan-thumb :image="avatar" class="panThumb" />
       <mallki class-name="mallki-text" text="vue-element-admin" />
       <div style="padding-top:35px;" class="progress-item">
         <span>Vue</span>
         <el-progress :percentage="70" />
       </div>
       <div class="progress-item">
         <span>JavaScript</span>
         <el-progress :percentage="18" />
       </div>
       <div class="progress-item">
         <span>Css</span>
         <el-progress :percentage="12" />
       </div>
       <div class="progress-item">
         <span>ESLint</span>
         <el-progress :percentage="100" status="success" />
       </div>
     </div>
   </el-card>
 </template>
 <script>
 import { mapGetters } from 'vuex'
 import PanThumb from '@/components/PanThumb'
 import Mallki from '@/components/TextHoverEffect/Mallki'
+// import logoPath from "~@/assets/img/yp_logo.jpeg"
 export default {
   components: { PanThumb, Mallki },
   filters: {
     statusFilter(status) {
       const statusMap = {
         success: 'success',
         pending: 'danger'
       }
       return statusMap[status]
     }
   },
   data() {
     return {
       statisticsData: {
         article_count: 1024,
         pageviews_count: 1024
       }
     }
   },
   computed: {
     ...mapGetters([
       'name',
       'avatar',
       'roles'
     ])
   }
 }
 </script>
 <style lang="scss" >
 .box-card-component{
   .el-card__header {
     padding: 0px!important;
   }
 }
 </style>
 <style lang="scss" scoped>
 .box-card-component {
   .box-card-header {
     position: relative;
     height: 220px;
     img {
       width: 100%;
       height: 100%;
       transition: all 0.2s linear;
       &:hover {
         transform: scale(1.1, 1.1);
         filter: contrast(130%);
       }
     }
   }
   .mallki-text {
     position: absolute;
     top: 0px;
     right: 0px;
     font-size: 20px;
     font-weight: bold;
   }
   .panThumb {
     z-index: 100;
     height: 70px!important;
     width: 70px!important;
     position: absolute!important;
     top: -45px;
     left: 0px;
     border: 5px solid #ffffff;
     background-color: #fff;
     margin: auto;
     box-shadow: none!important;
     /deep/ .pan-info {
       box-shadow: none!important;
     }
   }
   .progress-item {
     margin-bottom: 10px;
     font-size: 14px;
   }
   @media only screen and (max-width: 1510px){
     .mallki-text{
       display: none;
     }
   }
 }
 </style>

src/views/dashboard/editor/index.vue

View file @4e2abd1

1	<template>		File was deleted
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>
73		1	<template>

src/views/dashboard/index.vue

Diff comments View file @62b5353

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 editorDashboard from './editor'	10	import runnerDashboard from './runner'
11		11
12	export default {	12	export default {
13	name: 'Dashboard',	13	name: 'Dashboard',
14	components: { adminDashboard, editorDashboard },	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([	21	...mapGetters(['roles'])
22	'roles'
23	])
24	},	22	},
25	created() {	23	created() {
26	if (!this.roles.includes('admin')) {	24	if (this.roles.includes('admin')) {
27	this.currentRole = 'editorDashboard'	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	}	59	}
29	}	60	}
30	}	61	}

src/views/dashboard/runner/index.vue

Diff comments View file @62b5353

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>
	73

src/views/login/index.vue

Diff comments View file @62b5353

 <template>
   <div class="login-container">
     <el-form
       ref="loginForm"
       :model="loginForm"
       :rules="loginRules"
       class="login-form"
       autocomplete="on"
       label-position="left"
     >
       <div class="title-container">
         <h3 class="title">{{ $t('login.title') }}</h3>
         <lang-select class="set-language" />
       </div>
       <el-form-item prop="username">
         <span class="svg-container">
           <svg-icon icon-class="user" />
         </span>
         <el-input
           ref="username"
           v-model="loginForm.username"
           :placeholder="$t('login.username')"
           name="username"
           type="text"
           tabindex="1"
           autocomplete="on"
         />
       </el-form-item>
-      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
+      <el-tooltip
+        v-model="capsTooltip"
+        content="Caps lock is On"
+        placement="right"
+        manual
+      >
         <el-form-item prop="password">
           <span class="svg-container">
             <svg-icon icon-class="password" />
           </span>
           <el-input
             :key="passwordType"
             ref="password"
             v-model="loginForm.password"
             :type="passwordType"
             :placeholder="$t('login.password')"
             name="password"
             tabindex="2"
             autocomplete="on"
             @keyup.native="checkCapslock"
             @blur="capsTooltip = false"
             @keyup.enter.native="handleLogin"
           />
-          <span class="show-pwd" @click="showPwd">
+          <span
+            class="show-pwd"
+            @click="showPwd"
+          >
             <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
           </span>
         </el-form-item>
       </el-tooltip>
-      <div
+      <div style="position:relative;text-align:right;height:30px;line-height:30px;border:0px #000 solid;margin-top:-20px;">
-        style="position:relative;text-align:right;height:30px;line-height:30px;border:0px #000 solid;margin-top:-20px;"
-      >
         <!-- <el-checkbox v-model="checked">{{$t('rememberpassword')}}</el-checkbox> -->
         <el-link type="primary">{{ $t('login.forgetpassword') }}</el-link>
+        <el-link type="primary">{{ $t('login.signup') }}</el-link>
       </div>
       <el-button
         :loading="loading"
         type="primary"
         style="width:100%;"
         @click.native.prevent="handleLogin"
       >{{ $t('login.logIn') }}</el-button>
-      <div
+      <div style="position:relative;text-align:right;height:30px;line-height:30px;border:0px #000 solid;margin-bottom:30px;">
-        style="position:relative;text-align:right;height:30px;line-height:30px;border:0px #000 solid;margin-bottom:30px;"
-      >
         <div class="tips">
-          <el-link type="primary">{{ $t('login.signup') }}</el-link>
+          <el-button
+            class="thirdparty-button"
+            type="primary"
+            @click="showDialog=true"
+          >{{ $t('login.thirdparty') }}</el-button>
         </div>
+        <!-- <div class="tips">
+          <span style="margin-right:18px;">{{ $t('login.username') }} : runner</span>
+          <el-link type="primary">{{ $t('login.signup') }}</el-link>
+        </div> -->
       </div>
       <div style="position:relative">
-        <div class="tips">
+        <!-- <div class="tips">
           <span>{{ $t('login.username') }} : admin</span>
           <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
         </div>
         <div class="tips">
           <span style="margin-right:18px;">{{ $t('login.username') }} : assistant</span>
           <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
         </div>
         <div class="tips">
           <span style="margin-right:18px;">{{ $t('login.username') }} : runner</span>
           <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
         </div>
         <div class="tips">
           <span style="margin-right:18px;">{{ $t('login.username') }} : shoper</span>
           <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
-        </div>
+        </div> -->
-        <el-button
-          class="thirdparty-button"
-          type="primary"
-          @click="showDialog=true"
-        >{{ $t('login.thirdparty') }}</el-button>
       </div>
     </el-form>
-    <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
+    <el-dialog
+      :title="$t('login.thirdparty')"
+      :visible.sync="showDialog"
+    >
       {{ $t('login.thirdpartyTips') }}
       <br>
       <br>
       <br>
       <social-sign />
     </el-dialog>
     <!-- <vfd></vfd> -->
   </div>
 </template>
 <script>
 import { validUsername } from '@/utils/validate'
 import LangSelect from '@/components/LangSelect'
 import SocialSign from './components/SocialSignin'
 // import vfd from "vfd";
 export default {
   name: 'Login',
   // components: { LangSelect, SocialSign, vfd },
   components: { LangSelect, SocialSign },
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!validUsername(value)) {
         callback(new Error('Please enter the correct user name'))
       } else {
         callback()
       }
     }
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
         callback(new Error('The password can not be less than 6 digits'))
       } else {
         callback()
       }
     }
     return {
       loginForm: {
         username: 'admin',
         password: '111111'
       },
       loginRules: {
         username: [
           { required: true, trigger: 'blur', validator: validateUsername }
         ],
         password: [
           { required: true, trigger: 'blur', validator: validatePassword }
         ]
       },
       passwordType: 'password',
       capsTooltip: false,
       loading: false,
       showDialog: false,
       redirect: undefined,
       otherQuery: {}
     }
   },
   watch: {
     $route: {
       handler: function(route) {
         const query = route.query
         if (query) {
           this.redirect = query.redirect
           this.otherQuery = this.getOtherQuery(query)
         }
       },
       immediate: true
     }
   },
   created() {
     // window.addEventListener('storage', this.afterQRScan)
   },
   mounted() {
     if (this.loginForm.username === '') {
       this.$refs.username.focus()
     } else if (this.loginForm.password === '') {
       this.$refs.password.focus()
     }
   },
   destroyed() {
     // window.removeEventListener('storage', this.afterQRScan)
   },
   methods: {
     checkCapslock(e) {
       const { key } = e
       this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
     },
     showPwd() {
       if (this.passwordType === 'password') {
         this.passwordType = ''
       } else {
         this.passwordType = 'password'
       }
       this.$nextTick(() => {
         this.$refs.password.focus()
       })
     },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true
           this.$store
             .dispatch('user/login', this.loginForm)
             .then(() => {
               this.$router.push({
                 path: this.redirect || '/',
                 query: this.otherQuery
               })
               this.loading = false
             })
             .catch(() => {
               this.loading = false
             })
         } else {
           console.log('error submit!!')
           return false
         }
       })
     },
     getOtherQuery(query) {
       return Object.keys(query).reduce((acc, cur) => {
         if (cur !== 'redirect') {
           acc[cur] = query[cur]
         }
         return acc
       }, {})
     }
     // afterQRScan() {
     //   if (e.key === 'x-admin-oauth-code') {
     //     const code = getQueryObject(e.newValue)
     //     const codeMap = {
     //       wechat: 'code',
     //       tencent: 'code'
     //     }
     //     const type = codeMap[this.auth_type]
     //     const codeName = code[type]
     //     if (codeName) {
     //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
     //         this.$router.push({ path: this.redirect || '/' })
     //       })
     //     } else {
     //       alert('第三方登录失败')
     //     }
     //   }
     // }
   }
 }
 </script>
 <style lang="scss">
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 $bg: #283443;
 $light_gray: #fff;
 $cursor: #fff;
 @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
   .login-container .el-input input {
     color: $cursor;
   }
 }
 /* reset element-ui css */
 .login-container {
   .el-input {
     display: inline-block;
     height: 47px;
     width: 85%;
     input {
       background: transparent;
       border: 0px;
       -webkit-appearance: none;
       border-radius: 0px;
       padding: 12px 5px 12px 15px;
       color: $light_gray;
       height: 47px;
       caret-color: $cursor;
       &:-webkit-autofill {
         box-shadow: 0 0 0px 1000px $bg inset !important;
         -webkit-text-fill-color: $cursor !important;
       }
     }
   }
   .el-form-item {
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(0, 0, 0, 0.1);
     border-radius: 5px;
     color: #454545;
   }
 }
 </style>
 <style lang="scss" scoped>
 $bg: #2d3a4b;
 $dark_gray: #889aa4;
 $light_gray: #eee;
 .login-container {
   min-height: 100%;
   width: 100%;
   background-color: $bg;
   overflow: hidden;
   .login-form {
     position: relative;
     width: 520px;
     max-width: 100%;
     padding: 160px 35px 0;
     margin: 0 auto;
     overflow: hidden;
   }
   .tips {
     font-size: 14px;
     color: #fff;
     margin-bottom: 10px;
     span {
       &:first-of-type {
         margin-right: 16px;
       }
     }
   }
   .svg-container {
     padding: 6px 5px 6px 15px;
     color: $dark_gray;
     vertical-align: middle;
     width: 30px;
     display: inline-block;
   }
   .title-container {
     position: relative;
     .title {
       font-size: 26px;
       color: $light_gray;
       margin: 0px auto 40px auto;
       text-align: center;
       font-weight: bold;
     }
     .set-language {
       color: #fff;
       position: absolute;
       top: 3px;
       font-size: 18px;
       right: 0px;
       cursor: pointer;
     }
   }
   .show-pwd {
     position: absolute;
     right: 10px;
     top: 7px;
     font-size: 16px;
     color: $dark_gray;
     cursor: pointer;
     user-select: none;
   }
   .thirdparty-button {
     position: absolute;
     right: 0;
     bottom: 6px;
   }

src/views/meta/complex-table.vue

View file @4e2abd1

1	<template>		File was deleted
2	<div class="app-container">
3	<div class="filter-container">
4	<el-input v-model="listQuery.title" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
5	<el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
6	<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
7	</el-select>
8	<el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
9	<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
10	</el-select>
11	<el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
12	<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
13	</el-select>
14	<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
15	{{ $t('table.search') }}
16	</el-button>
17	<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
18	{{ $t('table.add') }}
19	</el-button>
20	<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
21	{{ $t('table.export') }}
22	</el-button>
23	<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
24	{{ $t('table.reviewer') }}
25	</el-checkbox>
26	</div>
27
28	<el-table
29	:key="tableKey"
30	v-loading="listLoading"
31	:data="list"
32	border
33	fit
34	highlight-current-row
35	style="width: 100%;"
36	@sort-change="sortChange"
37	>
38	<el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
39	<template slot-scope="{row}">
40	<span>{{ row.id }}</span>
41	</template>
42	</el-table-column>
43	<el-table-column :label="$t('table.date')" width="150px" align="center">
44	<template slot-scope="{row}">
45	<span>{{ row.timestamp \| parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
46	</template>
47	</el-table-column>
48	<el-table-column :label="$t('table.title')" min-width="150px">
49	<template slot-scope="{row}">
50	<span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
51	<el-tag>{{ row.type \| typeFilter }}</el-tag>
52	</template>
53	</el-table-column>
54	<el-table-column :label="$t('table.author')" width="110px" align="center">
55	<template slot-scope="{row}">
56	<span>{{ row.author }}</span>
57	</template>
58	</el-table-column>
59	<el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
60	<template slot-scope="{row}">
61	<span style="color:red;">{{ row.reviewer }}</span>
62	</template>
63	</el-table-column>
64	<el-table-column :label="$t('table.importance')" width="80px">
65	<template slot-scope="{row}">
66	<svg-icon v-for="n in +row.importance" :key="n" icon-class="star" class="meta-item__icon" />
67	</template>
68	</el-table-column>
69	<el-table-column :label="$t('table.readings')" align="center" width="95">
70	<template slot-scope="{row}">
71	<span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
72	<span v-else>0</span>
73	</template>
74	</el-table-column>
75	<el-table-column :label="$t('table.status')" class-name="status-col" width="100">
76	<template slot-scope="{row}">
77	<el-tag :type="row.status \| statusFilter">
78	{{ row.status }}
79	</el-tag>
80	</template>
81	</el-table-column>
82	<el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
83	<template slot-scope="{row,$index}">
84	<el-button type="primary" size="mini" @click="handleUpdate(row)">
85	{{ $t('table.edit') }}
86	</el-button>
87	<el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
88	{{ $t('table.publish') }}
89	</el-button>
90	<el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
91	{{ $t('table.draft') }}
92	</el-button>
93	<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
94	{{ $t('table.delete') }}
95	</el-button>
96	</template>
97	</el-table-column>
98	</el-table>
99
100	<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
101
102	<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
103	<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
104	<el-form-item :label="$t('table.type')" prop="type">
105	<el-select v-model="temp.type" class="filter-item" placeholder="Please select">
106	<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
107	</el-select>
108	</el-form-item>
109	<el-form-item :label="$t('table.date')" prop="timestamp">
110	<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
111	</el-form-item>
112	<el-form-item :label="$t('table.title')" prop="title">
113	<el-input v-model="temp.title" />
114	</el-form-item>
115	<el-form-item :label="$t('table.status')">
116	<el-select v-model="temp.status" class="filter-item" placeholder="Please select">
117	<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
118	</el-select>
119	</el-form-item>
120	<el-form-item :label="$t('table.importance')">
121	<el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
122	</el-form-item>
123	<el-form-item :label="$t('table.remark')">
124	<el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
125	</el-form-item>
126	</el-form>
127	<div slot="footer" class="dialog-footer">
128	<el-button @click="dialogFormVisible = false">
129	{{ $t('table.cancel') }}
130	</el-button>
131	<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
132	{{ $t('table.confirm') }}
133	</el-button>
134	</div>
135	</el-dialog>
136
137	<el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
138	<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
139	<el-table-column prop="key" label="Channel" />
140	<el-table-column prop="pv" label="Pv" />
141	</el-table>
142	<span slot="footer" class="dialog-footer">
143	<el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
144	</span>
145	</el-dialog>
146	</div>
147	</template>
148
149	<script>
150	import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
151	import waves from '@/directive/waves' // waves directive
152	import { parseTime } from '@/utils'
153	import Pagination from '@/components/Pagination' // secondary package based on el-pagination
154
155	const calendarTypeOptions = [
156	{ key: 'CN', display_name: 'China' },
157	{ key: 'US', display_name: 'USA' },
158	{ key: 'JP', display_name: 'Japan' },
159	{ key: 'EU', display_name: 'Eurozone' }
160	]
161
162	// arr to obj, such as { CN : "China", US : "USA" }
163	const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
164	acc[cur.key] = cur.display_name
165	return acc
166	}, {})
167
168	export default {
169	name: 'ComplexTable',
170	components: { Pagination },
171	directives: { waves },
172	filters: {
173	statusFilter(status) {
174	const statusMap = {
175	published: 'success',
176	draft: 'info',
177	deleted: 'danger'
178	}
179	return statusMap[status]
180	},
181	typeFilter(type) {
182	return calendarTypeKeyValue[type]
183	}
184	},
185	data() {
186	return {
187	tableKey: 0,
188	list: null,
189	total: 0,
190	listLoading: true,
191	listQuery: {
192	page: 1,
193	limit: 20,
194	importance: undefined,
195	title: undefined,
196	type: undefined,
197	sort: '+id'
198	},
199	importanceOptions: [1, 2, 3],
200	calendarTypeOptions,
201	sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
202	statusOptions: ['published', 'draft', 'deleted'],
203	showReviewer: false,
204	temp: {
205	id: undefined,
206	importance: 1,
207	remark: '',
208	timestamp: new Date(),
209	title: '',
210	type: '',
211	status: 'published'
212	},
213	dialogFormVisible: false,
214	dialogStatus: '',
215	textMap: {
216	update: 'Edit',
217	create: 'Create'
218	},
219	dialogPvVisible: false,
220	pvData: [],
221	rules: {
222	type: [{ required: true, message: 'type is required', trigger: 'change' }],
223	timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
224	title: [{ required: true, message: 'title is required', trigger: 'blur' }]
225	},
226	downloadLoading: false
227	}
228	},
229	created() {
230	this.getList()
231	},
232	methods: {
233	getList() {
234	this.listLoading = true
235	fetchList(this.listQuery).then(response => {
236	this.list = response.data.items
237	this.total = response.data.total
238
239	// Just to simulate the time of the request
240	setTimeout(() => {
241	this.listLoading = false
242	}, 1.5 * 1000)
243	})
244	},
245	handleFilter() {
246	this.listQuery.page = 1
247	this.getList()
248	},
249	handleModifyStatus(row, status) {
250	this.$message({
251	message: '操作成功',
252	type: 'success'
253	})
254	row.status = status
255	},
256	sortChange(data) {
257	const { prop, order } = data
258	if (prop === 'id') {
259	this.sortByID(order)
260	}
261	},
262	sortByID(order) {
263	if (order === 'ascending') {
264	this.listQuery.sort = '+id'
265	} else {
266	this.listQuery.sort = '-id'
267	}
268	this.handleFilter()
269	},
270	resetTemp() {
271	this.temp = {
272	id: undefined,
273	importance: 1,
274	remark: '',
275	timestamp: new Date(),
276	title: '',
277	status: 'published',
278	type: ''
279	}
280	},
281	handleCreate() {
282	this.resetTemp()
283	this.dialogStatus = 'create'
284	this.dialogFormVisible = true
285	this.$nextTick(() => {
286	this.$refs['dataForm'].clearValidate()
287	})
288	},
289	createData() {
290	this.$refs['dataForm'].validate((valid) => {
291	if (valid) {
292	this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
293	this.temp.author = '秀野堂主'
294	createArticle(this.temp).then(() => {
295	this.list.unshift(this.temp)
296	this.dialogFormVisible = false
297	this.$notify({
298	title: '成功',
299	message: '创建成功',
300	type: 'success',
301	duration: 2000
302	})
303	})
304	}
305	})
306	},
307	handleUpdate(row) {
308	this.temp = Object.assign({}, row) // copy obj
309	this.temp.timestamp = new Date(this.temp.timestamp)
310	this.dialogStatus = 'update'
311	this.dialogFormVisible = true
312	this.$nextTick(() => {
313	this.$refs['dataForm'].clearValidate()
314	})
315	},
316	updateData() {
317	this.$refs['dataForm'].validate((valid) => {
318	if (valid) {
319	const tempData = Object.assign({}, this.temp)
320	tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
321	updateArticle(tempData).then(() => {
322	const index = this.list.findIndex(v => v.id === this.temp.id)
323	this.list.splice(index, 1, this.temp)
324	this.dialogFormVisible = false
325	this.$notify({
326	title: '成功',
327	message: '更新成功',
328	type: 'success',
329	duration: 2000
330	})
331	})
332	}
333	})
334	},
335	handleDelete(row, index) {
336	this.$notify({
337	title: '成功',
338	message: '删除成功',
339	type: 'success',
340	duration: 2000
341	})
342	this.list.splice(index, 1)
343	},
344	handleFetchPv(pv) {
345	fetchPv(pv).then(response => {
346	this.pvData = response.data.pvData
347	this.dialogPvVisible = true
348	})
349	},
350	handleDownload() {
351	this.downloadLoading = true
352	import('@/vendor/Export2Excel').then(excel => {
353	const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
354	const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
355	const data = this.formatJson(filterVal)
356	excel.export_json_to_excel({
357	header: tHeader,
358	data,
359	filename: 'table-list'
360	})
361	this.downloadLoading = false
362	})
363	},
364	formatJson(filterVal) {
365	return this.list.map(v => filterVal.map(j => {
366	if (j === 'timestamp') {
367	return parseTime(v[j])
368	} else {
369	return v[j]
370	}
371	}))
372	},
373	getSortClass: function(key) {
374	const sort = this.listQuery.sort
375	return sort === `+${key}` ? 'ascending' : 'descending'
376	}
377	}
378	}
379	</script>
380		1	<template>

src/views/meta/tree.vue

Diff comments View file @62b5353

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>
	578

src/views/order/complex-table.vue

View file @4e2abd1

1	<template>		File was deleted
2	<div class="app-container">
3	<div class="filter-container">
4	<el-input v-model="listQuery.title" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
5	<el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
6	<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
7	</el-select>
8	<el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
9	<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
10	</el-select>
11	<el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
12	<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
13	</el-select>
14	<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
15	{{ $t('table.search') }}
16	</el-button>
17	<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
18	{{ $t('table.add') }}
19	</el-button>
20	<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
21	{{ $t('table.export') }}
22	</el-button>
23	<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
24	{{ $t('table.reviewer') }}
25	</el-checkbox>
26	</div>
27
28	<el-table
29	:key="tableKey"
30	v-loading="listLoading"
31	:data="list"
32	border
33	fit
34	highlight-current-row
35	style="width: 100%;"
36	@sort-change="sortChange"
37	>
38	<el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
39	<template slot-scope="{row}">
40	<span>{{ row.id }}</span>
41	</template>
42	</el-table-column>
43	<el-table-column :label="$t('table.date')" width="150px" align="center">
44	<template slot-scope="{row}">
45	<span>{{ row.timestamp \| parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
46	</template>
47	</el-table-column>
48	<el-table-column :label="$t('table.title')" min-width="150px">
49	<template slot-scope="{row}">
50	<span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
51	<el-tag>{{ row.type \| typeFilter }}</el-tag>
52	</template>
53	</el-table-column>
54	<el-table-column :label="$t('table.author')" width="110px" align="center">
55	<template slot-scope="{row}">
56	<span>{{ row.author }}</span>
57	</template>
58	</el-table-column>
59	<el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
60	<template slot-scope="{row}">
61	<span style="color:red;">{{ row.reviewer }}</span>
62	</template>
63	</el-table-column>
64	<el-table-column :label="$t('table.importance')" width="80px">
65	<template slot-scope="{row}">
66	<svg-icon v-for="n in +row.importance" :key="n" icon-class="star" class="meta-item__icon" />
67	</template>
68	</el-table-column>
69	<el-table-column :label="$t('table.readings')" align="center" width="95">
70	<template slot-scope="{row}">
71	<span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
72	<span v-else>0</span>
73	</template>
74	</el-table-column>
75	<el-table-column :label="$t('table.status')" class-name="status-col" width="100">
76	<template slot-scope="{row}">
77	<el-tag :type="row.status \| statusFilter">
78	{{ row.status }}
79	</el-tag>
80	</template>
81	</el-table-column>
82	<el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
83	<template slot-scope="{row,$index}">
84	<el-button type="primary" size="mini" @click="handleUpdate(row)">
85	{{ $t('table.edit') }}
86	</el-button>
87	<el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
88	{{ $t('table.publish') }}
89	</el-button>
90	<el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
91	{{ $t('table.draft') }}
92	</el-button>
93	<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
94	{{ $t('table.delete') }}
95	</el-button>
96	</template>
97	</el-table-column>
98	</el-table>
99
100	<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
101
102	<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
103	<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
104	<el-form-item :label="$t('table.type')" prop="type">
105	<el-select v-model="temp.type" class="filter-item" placeholder="Please select">
106	<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
107	</el-select>
108	</el-form-item>
109	<el-form-item :label="$t('table.date')" prop="timestamp">
110	<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
111	</el-form-item>
112	<el-form-item :label="$t('table.title')" prop="title">
113	<el-input v-model="temp.title" />
114	</el-form-item>
115	<el-form-item :label="$t('table.status')">
116	<el-select v-model="temp.status" class="filter-item" placeholder="Please select">
117	<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
118	</el-select>
119	</el-form-item>
120	<el-form-item :label="$t('table.importance')">
121	<el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
122	</el-form-item>
123	<el-form-item :label="$t('table.remark')">
124	<el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
125	</el-form-item>
126	</el-form>
127	<div slot="footer" class="dialog-footer">
128	<el-button @click="dialogFormVisible = false">
129	{{ $t('table.cancel') }}
130	</el-button>
131	<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
132	{{ $t('table.confirm') }}
133	</el-button>
134	</div>
135	</el-dialog>
136
137	<el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
138	<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
139	<el-table-column prop="key" label="Channel" />
140	<el-table-column prop="pv" label="Pv" />
141	</el-table>
142	<span slot="footer" class="dialog-footer">
143	<el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
144	</span>
145	</el-dialog>
146	</div>
147	</template>
148
149	<script>
150	import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
151	import waves from '@/directive/waves' // waves directive
152	import { parseTime } from '@/utils'
153	import Pagination from '@/components/Pagination' // secondary package based on el-pagination
154
155	const calendarTypeOptions = [
156	{ key: 'CN', display_name: 'China' },
157	{ key: 'US', display_name: 'USA' },
158	{ key: 'JP', display_name: 'Japan' },
159	{ key: 'EU', display_name: 'Eurozone' }
160	]
161
162	// arr to obj, such as { CN : "China", US : "USA" }
163	const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
164	acc[cur.key] = cur.display_name
165	return acc
166	}, {})
167
168	export default {
169	name: 'ComplexTable',
170	components: { Pagination },
171	directives: { waves },
172	filters: {
173	statusFilter(status) {
174	const statusMap = {
175	published: 'success',
176	draft: 'info',
177	deleted: 'danger'
178	}
179	return statusMap[status]
180	},
181	typeFilter(type) {
182	return calendarTypeKeyValue[type]
183	}
184	},
185	data() {
186	return {
187	tableKey: 0,
188	list: null,
189	total: 0,
190	listLoading: true,
191	listQuery: {
192	page: 1,
193	limit: 20,
194	importance: undefined,
195	title: undefined,
196	type: undefined,
197	sort: '+id'
198	},
199	importanceOptions: [1, 2, 3],
200	calendarTypeOptions,
201	sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
202	statusOptions: ['published', 'draft', 'deleted'],
203	showReviewer: false,
204	temp: {
205	id: undefined,
206	importance: 1,
207	remark: '',
208	timestamp: new Date(),
209	title: '',
210	type: '',
211	status: 'published'
212	},
213	dialogFormVisible: false,
214	dialogStatus: '',
215	textMap: {
216	update: 'Edit',
217	create: 'Create'
218	},
219	dialogPvVisible: false,
220	pvData: [],
221	rules: {
222	type: [{ required: true, message: 'type is required', trigger: 'change' }],
223	timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
224	title: [{ required: true, message: 'title is required', trigger: 'blur' }]
225	},
226	downloadLoading: false
227	}
228	},
229	created() {
230	this.getList()
231	},
232	methods: {
233	getList() {
234	this.listLoading = true
235	fetchList(this.listQuery).then(response => {
236	this.list = response.data.items
237	this.total = response.data.total
238
239	// Just to simulate the time of the request
240	setTimeout(() => {
241	this.listLoading = false
242	}, 1.5 * 1000)
243	})
244	},
245	handleFilter() {
246	this.listQuery.page = 1
247	this.getList()
248	},
249	handleModifyStatus(row, status) {
250	this.$message({
251	message: '操作成功',
252	type: 'success'
253	})
254	row.status = status
255	},
256	sortChange(data) {
257	const { prop, order } = data
258	if (prop === 'id') {
259	this.sortByID(order)
260	}
261	},
262	sortByID(order) {
263	if (order === 'ascending') {
264	this.listQuery.sort = '+id'
265	} else {
266	this.listQuery.sort = '-id'
267	}
268	this.handleFilter()
269	},
270	resetTemp() {
271	this.temp = {
272	id: undefined,
273	importance: 1,
274	remark: '',
275	timestamp: new Date(),
276	title: '',
277	status: 'published',
278	type: ''
279	}
280	},
281	handleCreate() {
282	this.resetTemp()
283	this.dialogStatus = 'create'
284	this.dialogFormVisible = true
285	this.$nextTick(() => {
286	this.$refs['dataForm'].clearValidate()
287	})
288	},
289	createData() {
290	this.$refs['dataForm'].validate((valid) => {
291	if (valid) {
292	this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
293	this.temp.author = '秀野堂主'
294	createArticle(this.temp).then(() => {
295	this.list.unshift(this.temp)
296	this.dialogFormVisible = false
297	this.$notify({
298	title: '成功',
299	message: '创建成功',
300	type: 'success',
301	duration: 2000
302	})
303	})
304	}
305	})
306	},
307	handleUpdate(row) {
308	this.temp = Object.assign({}, row) // copy obj
309	this.temp.timestamp = new Date(this.temp.timestamp)
310	this.dialogStatus = 'update'
311	this.dialogFormVisible = true
312	this.$nextTick(() => {
313	this.$refs['dataForm'].clearValidate()
314	})
315	},
316	updateData() {
317	this.$refs['dataForm'].validate((valid) => {
318	if (valid) {
319	const tempData = Object.assign({}, this.temp)
320	tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
321	updateArticle(tempData).then(() => {
322	const index = this.list.findIndex(v => v.id === this.temp.id)
323	this.list.splice(index, 1, this.temp)
324	this.dialogFormVisible = false
325	this.$notify({
326	title: '成功',
327	message: '更新成功',
328	type: 'success',
329	duration: 2000
330	})
331	})
332	}
333	})
334	},
335	handleDelete(row, index) {
336	this.$notify({
337	title: '成功',
338	message: '删除成功',
339	type: 'success',
340	duration: 2000
341	})
342	this.list.splice(index, 1)
343	},
344	handleFetchPv(pv) {
345	fetchPv(pv).then(response => {
346	this.pvData = response.data.pvData
347	this.dialogPvVisible = true
348	})
349	},
350	handleDownload() {
351	this.downloadLoading = true
352	import('@/vendor/Export2Excel').then(excel => {
353	const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
354	const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
355	const data = this.formatJson(filterVal)
356	excel.export_json_to_excel({
357	header: tHeader,
358	data,
359	filename: 'table-list'
360	})
361	this.downloadLoading = false
362	})
363	},
364	formatJson(filterVal) {
365	return this.list.map(v => filterVal.map(j => {
366	if (j === 'timestamp') {
367	return parseTime(v[j])
368	} else {
369	return v[j]
370	}
371	}))
372	},
373	getSortClass: function(key) {
374	const sort = this.listQuery.sort
375	return sort === `+${key}` ? 'ascending' : 'descending'
376	}
377	}
378	}
379	</script>
380		1	<template>

src/views/order/list.vue

Diff comments View file @62b5353

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>
	622

src/views/prod/complex-table.vue

View file @4e2abd1

1	<template>		File was deleted
2	<div class="app-container">
3	<div class="filter-container">
4	<el-input v-model="listQuery.title" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
5	<el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
6	<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
7	</el-select>
8	<el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
9	<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
10	</el-select>
11	<el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
12	<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
13	</el-select>
14	<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
15	{{ $t('table.search') }}
16	</el-button>
17	<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
18	{{ $t('table.add') }}
19	</el-button>
20	<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
21	{{ $t('table.export') }}
22	</el-button>
23	<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
24	{{ $t('table.reviewer') }}
25	</el-checkbox>
26	</div>
27
28	<el-table
29	:key="tableKey"
30	v-loading="listLoading"
31	:data="list"
32	border
33	fit
34	highlight-current-row
35	style="width: 100%;"
36	@sort-change="sortChange"
37	>
38	<el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
39	<template slot-scope="{row}">
40	<span>{{ row.id }}</span>
41	</template>
42	</el-table-column>
43	<el-table-column :label="$t('table.date')" width="150px" align="center">
44	<template slot-scope="{row}">
45	<span>{{ row.timestamp \| parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
46	</template>
47	</el-table-column>
48	<el-table-column :label="$t('table.title')" min-width="150px">
49	<template slot-scope="{row}">
50	<span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
51	<el-tag>{{ row.type \| typeFilter }}</el-tag>
52	</template>
53	</el-table-column>
54	<el-table-column :label="$t('table.author')" width="110px" align="center">
55	<template slot-scope="{row}">
56	<span>{{ row.author }}</span>
57	</template>
58	</el-table-column>
59	<el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
60	<template slot-scope="{row}">
61	<span style="color:red;">{{ row.reviewer }}</span>
62	</template>
63	</el-table-column>
64	<el-table-column :label="$t('table.importance')" width="80px">
65	<template slot-scope="{row}">
66	<svg-icon v-for="n in +row.importance" :key="n" icon-class="star" class="meta-item__icon" />
67	</template>
68	</el-table-column>
69	<el-table-column :label="$t('table.readings')" align="center" width="95">
70	<template slot-scope="{row}">
71	<span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
72	<span v-else>0</span>
73	</template>
74	</el-table-column>
75	<el-table-column :label="$t('table.status')" class-name="status-col" width="100">
76	<template slot-scope="{row}">
77	<el-tag :type="row.status \| statusFilter">
78	{{ row.status }}
79	</el-tag>
80	</template>
81	</el-table-column>
82	<el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
83	<template slot-scope="{row,$index}">
84	<el-button type="primary" size="mini" @click="handleUpdate(row)">
85	{{ $t('table.edit') }}
86	</el-button>
87	<el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
88	{{ $t('table.publish') }}
89	</el-button>
90	<el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
91	{{ $t('table.draft') }}
92	</el-button>
93	<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
94	{{ $t('table.delete') }}
95	</el-button>
96	</template>
97	</el-table-column>
98	</el-table>
99
100	<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
101
102	<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
103	<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
104	<el-form-item :label="$t('table.type')" prop="type">
105	<el-select v-model="temp.type" class="filter-item" placeholder="Please select">
106	<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
107	</el-select>
108	</el-form-item>
109	<el-form-item :label="$t('table.date')" prop="timestamp">
110	<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
111	</el-form-item>
112	<el-form-item :label="$t('table.title')" prop="title">
113	<el-input v-model="temp.title" />
114	</el-form-item>
115	<el-form-item :label="$t('table.status')">
116	<el-select v-model="temp.status" class="filter-item" placeholder="Please select">
117	<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
118	</el-select>
119	</el-form-item>
120	<el-form-item :label="$t('table.importance')">
121	<el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
122	</el-form-item>
123	<el-form-item :label="$t('table.remark')">
124	<el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
125	</el-form-item>
126	</el-form>
127	<div slot="footer" class="dialog-footer">
128	<el-button @click="dialogFormVisible = false">
129	{{ $t('table.cancel') }}
130	</el-button>
131	<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
132	{{ $t('table.confirm') }}
133	</el-button>
134	</div>
135	</el-dialog>
136
137	<el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
138	<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
139	<el-table-column prop="key" label="Channel" />
140	<el-table-column prop="pv" label="Pv" />
141	</el-table>
142	<span slot="footer" class="dialog-footer">
143	<el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
144	</span>
145	</el-dialog>
146	</div>
147	</template>
148
149	<script>
150	import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
151	import waves from '@/directive/waves' // waves directive
152	import { parseTime } from '@/utils'
153	import Pagination from '@/components/Pagination' // secondary package based on el-pagination
154
155	const calendarTypeOptions = [
156	{ key: 'CN', display_name: 'China' },
157	{ key: 'US', display_name: 'USA' },
158	{ key: 'JP', display_name: 'Japan' },
159	{ key: 'EU', display_name: 'Eurozone' }
160	]
161
162	// arr to obj, such as { CN : "China", US : "USA" }
163	const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
164	acc[cur.key] = cur.display_name
165	return acc
166	}, {})
167
168	export default {
169	name: 'ComplexTable',
170	components: { Pagination },
171	directives: { waves },
172	filters: {
173	statusFilter(status) {
174	const statusMap = {
175	published: 'success',
176	draft: 'info',
177	deleted: 'danger'
178	}
179	return statusMap[status]
180	},
181	typeFilter(type) {
182	return calendarTypeKeyValue[type]
183	}
184	},
185	data() {
186	return {
187	tableKey: 0,
188	list: null,
189	total: 0,
190	listLoading: true,
191	listQuery: {
192	page: 1,
193	limit: 20,
194	importance: undefined,
195	title: undefined,
196	type: undefined,
197	sort: '+id'
198	},
199	importanceOptions: [1, 2, 3],
200	calendarTypeOptions,
201	sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
202	statusOptions: ['published', 'draft', 'deleted'],
203	showReviewer: false,
204	temp: {
205	id: undefined,
206	importance: 1,
207	remark: '',
208	timestamp: new Date(),
209	title: '',
210	type: '',
211	status: 'published'
212	},
213	dialogFormVisible: false,
214	dialogStatus: '',
215	textMap: {
216	update: 'Edit',
217	create: 'Create'
218	},
219	dialogPvVisible: false,
220	pvData: [],
221	rules: {
222	type: [{ required: true, message: 'type is required', trigger: 'change' }],
223	timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
224	title: [{ required: true, message: 'title is required', trigger: 'blur' }]
225	},
226	downloadLoading: false
227	}
228	},
229	created() {
230	this.getList()
231	},
232	methods: {
233	getList() {
234	this.listLoading = true
235	fetchList(this.listQuery).then(response => {
236	this.list = response.data.items
237	this.total = response.data.total
238
239	// Just to simulate the time of the request
240	setTimeout(() => {
241	this.listLoading = false
242	}, 1.5 * 1000)
243	})
244	},
245	handleFilter() {
246	this.listQuery.page = 1
247	this.getList()
248	},
249	handleModifyStatus(row, status) {
250	this.$message({
251	message: '操作成功',
252	type: 'success'
253	})
254	row.status = status
255	},
256	sortChange(data) {
257	const { prop, order } = data
258	if (prop === 'id') {
259	this.sortByID(order)
260	}
261	},
262	sortByID(order) {
263	if (order === 'ascending') {
264	this.listQuery.sort = '+id'
265	} else {
266	this.listQuery.sort = '-id'
267	}
268	this.handleFilter()
269	},
270	resetTemp() {
271	this.temp = {
272	id: undefined,
273	importance: 1,
274	remark: '',
275	timestamp: new Date(),
276	title: '',
277	status: 'published',
278	type: ''
279	}
280	},
281	handleCreate() {
282	this.resetTemp()
283	this.dialogStatus = 'create'
284	this.dialogFormVisible = true
285	this.$nextTick(() => {
286	this.$refs['dataForm'].clearValidate()
287	})
288	},
289	createData() {
290	this.$refs['dataForm'].validate((valid) => {
291	if (valid) {
292	this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
293	this.temp.author = '秀野堂主'
294	createArticle(this.temp).then(() => {
295	this.list.unshift(this.temp)
296	this.dialogFormVisible = false
297	this.$notify({
298	title: '成功',
299	message: '创建成功',
300	type: 'success',
301	duration: 2000
302	})
303	})
304	}
305	})
306	},
307	handleUpdate(row) {
308	this.temp = Object.assign({}, row) // copy obj
309	this.temp.timestamp = new Date(this.temp.timestamp)
310	this.dialogStatus = 'update'
311	this.dialogFormVisible = true
312	this.$nextTick(() => {
313	this.$refs['dataForm'].clearValidate()
314	})
315	},
316	updateData() {
317	this.$refs['dataForm'].validate((valid) => {
318	if (valid) {
319	const tempData = Object.assign({}, this.temp)
320	tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
321	updateArticle(tempData).then(() => {
322	const index = this.list.findIndex(v => v.id === this.temp.id)
323	this.list.splice(index, 1, this.temp)
324	this.dialogFormVisible = false
325	this.$notify({
326	title: '成功',
327	message: '更新成功',
328	type: 'success',
329	duration: 2000
330	})
331	})
332	}
333	})
334	},
335	handleDelete(row, index) {
336	this.$notify({
337	title: '成功',
338	message: '删除成功',
339	type: 'success',
340	duration: 2000
341	})
342	this.list.splice(index, 1)
343	},
344	handleFetchPv(pv) {
345	fetchPv(pv).then(response => {
346	this.pvData = response.data.pvData
347	this.dialogPvVisible = true
348	})
349	},
350	handleDownload() {
351	this.downloadLoading = true
352	import('@/vendor/Export2Excel').then(excel => {
353	const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
354	const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
355	const data = this.formatJson(filterVal)
356	excel.export_json_to_excel({
357	header: tHeader,
358	data,
359	filename: 'table-list'
360	})
361	this.downloadLoading = false
362	})
363	},
364	formatJson(filterVal) {
365	return this.list.map(v => filterVal.map(j => {
366	if (j === 'timestamp') {
367	return parseTime(v[j])
368	} else {
369	return v[j]
370	}
371	}))
372	},
373	getSortClass: function(key) {
374	const sort = this.listQuery.sort
375	return sort === `+${key}` ? 'ascending' : 'descending'
376	}
377	}
378	}
379	</script>
380		1	<template>

src/views/prod/list.vue

Diff comments View file @62b5353

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>
	164

src/views/site/list.vue

Diff comments View file @62b5353

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>
	192

src/views/table/complex-table.vue

Diff comments View file @62b5353

 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="listQuery.title" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input
-      <el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
+        v-model="listQuery.title"
-        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
+        :placeholder="$t('table.title')"
+        style="width: 200px;"
+        class="filter-item"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-select
+        v-model="listQuery.importance"
+        :placeholder="$t('table.importance')"
+        clearable
+        style="width: 90px"
+        class="filter-item"
+      >
+        <el-option
+          v-for="item in importanceOptions"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
       </el-select>
-      <el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
+      <el-select
-        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
+        v-model="listQuery.type"
+        :placeholder="$t('table.type')"
+        clearable
+        class="filter-item"
+        style="width: 130px"
+      >
+        <el-option
+          v-for="item in calendarTypeOptions"
+          :key="item.key"
+          :label="item.display_name+'('+item.key+')'"
+          :value="item.key"
+        />
       </el-select>
-      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
+      <el-select
-        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
+        v-model="listQuery.sort"
+        style="width: 140px"
+        class="filter-item"
+        @change="handleFilter"
+      >
+        <el-option
+          v-for="item in sortOptions"
+          :key="item.key"
+          :label="item.label"
+          :value="item.key"
+        />
       </el-select>
-      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+      <el-button
+        v-waves
+        class="filter-item"
+        type="primary"
+        icon="el-icon-search"
+        @click="handleFilter"
+      >
         {{ $t('table.search') }}
       </el-button>
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px;"
+        type="primary"
+        icon="el-icon-edit"
+        @click="handleCreate"
+      >
         {{ $t('table.add') }}
       </el-button>
-      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
+      <el-button
+        v-waves
+        :loading="downloadLoading"
+        class="filter-item"
+        type="primary"
+        icon="el-icon-download"
+        @click="handleDownload"
+      >
         {{ $t('table.export') }}
       </el-button>
-      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
+      <el-checkbox
+        v-model="showReviewer"
+        class="filter-item"
+        style="margin-left:15px;"
+        @change="tableKey=tableKey+1"
+      >
         {{ $t('table.reviewer') }}
       </el-checkbox>
     </div>
     <el-table
       :key="tableKey"
       v-loading="listLoading"
       :data="list"
       border
       fit
       highlight-current-row
       style="width: 100%;"
       @sort-change="sortChange"
     >
-      <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
+      <el-table-column
+        :label="$t('table.id')"
+        prop="id"
+        sortable="custom"
+        align="center"
+        width="80"
+        :class-name="getSortClass('id')"
+      >
         <template slot-scope="{row}">
           <span>{{ row.id }}</span>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('table.date')" width="150px" align="center">
+      <el-table-column
+        :label="$t('table.date')"
+        width="150px"
+        align="center"
+      >
         <template slot-scope="{row}">
           <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('table.title')" min-width="150px">
+      <el-table-column
+        :label="$t('table.title')"
+        min-width="150px"
+      >
         <template slot-scope="{row}">
-          <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
+          <span
+            class="link-type"
+            @click="handleUpdate(row)"
+          >{{ row.title }}</span>
           <el-tag>{{ row.type | typeFilter }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('table.author')" width="110px" align="center">
+      <el-table-column
+        :label="$t('table.author')"
+        width="110px"
+        align="center"
+      >
         <template slot-scope="{row}">
           <span>{{ row.author }}</span>
         </template>
       </el-table-column>
-      <el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
+      <el-table-column
+        v-if="showReviewer"
+        :label="$t('table.reviewer')"
+        width="110px"
+        align="center"
+      >
         <template slot-scope="{row}">
           <span style="color:red;">{{ row.reviewer }}</span>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('table.importance')" width="80px">
+      <el-table-column
+        :label="$t('table.importance')"
+        width="80px"
+      >
         <template slot-scope="{row}">
-          <svg-icon v-for="n in +row.importance" :key="n" icon-class="star" class="meta-item__icon" />
+          <svg-icon
+            v-for="n in +row.importance"
+            :key="n"
+            icon-class="star"
+            class="meta-item__icon"
+          />
         </template>
       </el-table-column>
-      <el-table-column :label="$t('table.readings')" align="center" width="95">
+      <el-table-column
+        :label="$t('table.readings')"
+        align="center"
+        width="95"
+      >
         <template slot-scope="{row}">
-          <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
+          <span
+            v-if="row.pageviews"
+            class="link-type"
+            @click="handleFetchPv(row.pageviews)"
+          >{{ row.pageviews }}</span>
           <span v-else>0</span>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('table.status')" class-name="status-col" width="100">
+      <el-table-column
+        :label="$t('table.status')"
+        class-name="status-col"
+        width="100"
+      >
         <template slot-scope="{row}">
           <el-tag :type="row.status | statusFilter">
             {{ row.status }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
+      <el-table-column
+        :label="$t('table.actions')"
+        align="center"
+        width="230"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="{row,$index}">
-          <el-button type="primary" size="mini" @click="handleUpdate(row)">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleUpdate(row)"
+          >
             {{ $t('table.edit') }}
           </el-button>
-          <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
+          <el-button
+            v-if="row.status!='published'"
+            size="mini"
+            type="success"
+            @click="handleModifyStatus(row,'published')"
+          >
             {{ $t('table.publish') }}
           </el-button>
-          <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
+          <el-button
+            v-if="row.status!='draft'"
+            size="mini"
+            @click="handleModifyStatus(row,'draft')"
+          >
             {{ $t('table.draft') }}
           </el-button>
-          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
+          <el-button
+            v-if="row.status!='deleted'"
+            size="mini"
+            type="danger"
+            @click="handleDelete(row,$index)"
+          >
             {{ $t('table.delete') }}
           </el-button>
         </template>
       </el-table-column>
     </el-table>
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.limit"
+      @pagination="getList"
+    />
-    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+    <el-dialog
-      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
+      :title="textMap[dialogStatus]"
-        <el-form-item :label="$t('table.type')" prop="type">
+      :visible.sync="dialogFormVisible"
-          <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
+    >
-            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
+      <el-form
+        ref="dataForm"
+        :rules="rules"
+        :model="temp"
+        label-position="left"
+        label-width="70px"
+        style="width: 400px; margin-left:50px;"
+      >
+        <el-form-item
+          :label="$t('table.type')"
+          prop="type"
+        >
+          <el-select
+            v-model="temp.type"
+            class="filter-item"
+            placeholder="Please select"
+          >
+            <el-option
+              v-for="item in calendarTypeOptions"
+              :key="item.key"
+              :label="item.display_name"
+              :value="item.key"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('table.date')" prop="timestamp">
+        <el-form-item
-          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
+          :label="$t('table.date')"
+          prop="timestamp"
+        >
+          <el-date-picker
+            v-model="temp.timestamp"
+            type="datetime"
+            placeholder="Please pick a date"
+          />
         </el-form-item>
-        <el-form-item :label="$t('table.title')" prop="title">
+        <el-form-item
+          :label="$t('table.title')"
+          prop="title"
+        >
           <el-input v-model="temp.title" />
         </el-form-item>
         <el-form-item :label="$t('table.status')">
-          <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
+          <el-select
-            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
+            v-model="temp.status"
+            class="filter-item"
+            placeholder="Please select"
+          >
+            <el-option
+              v-for="item in statusOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('table.importance')">
-          <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
+          <el-rate
+            v-model="temp.importance"
+            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
+            :max="3"
+            style="margin-top:8px;"
+          />
         </el-form-item>
         <el-form-item :label="$t('table.remark')">
-          <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
+          <el-input
+            v-model="temp.remark"
+            :autosize="{ minRows: 2, maxRows: 4}"
+            type="textarea"
+            placeholder="Please input"
+          />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
         <el-button @click="dialogFormVisible = false">
           {{ $t('table.cancel') }}
         </el-button>
-        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
+        <el-button
+          type="primary"
+          @click="dialogStatus==='create'?createData():updateData()"
+        >
           {{ $t('table.confirm') }}
         </el-button>
       </div>
     </el-dialog>
-    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
+    <el-dialog
-      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
+      :visible.sync="dialogPvVisible"
-        <el-table-column prop="key" label="Channel" />
+      title="Reading statistics"
-        <el-table-column prop="pv" label="Pv" />
+    >
+      <el-table
+        :data="pvData"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="key"
+          label="Channel"
+        />
+        <el-table-column
+          prop="pv"
+          label="Pv"
+        />
       </el-table>
-      <span slot="footer" class="dialog-footer">
+      <span
-        <el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          type="primary"
+          @click="dialogPvVisible = false"
+        >{{ $t('table.confirm') }}</el-button>
       </span>
     </el-dialog>
   </div>
 </template>
 <script>
-import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
+import {
+  fetchList,
+  fetchPv,
+  createArticle,
+  updateArticle
+} from '@/api/article'
 import waves from '@/directive/waves' // waves directive
 import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 const calendarTypeOptions = [
   { key: 'CN', display_name: 'China' },
   { key: 'US', display_name: 'USA' },
   { key: 'JP', display_name: 'Japan' },
   { key: 'EU', display_name: 'Eurozone' }
 ]
 // arr to obj, such as { CN : "China", US : "USA" }
 const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
   acc[cur.key] = cur.display_name
   return acc
 }, {})
 export default {
   name: 'ComplexTable',
   components: { Pagination },
   directives: { waves },
   filters: {
     statusFilter(status) {
       const statusMap = {
         published: 'success',
         draft: 'info',
         deleted: 'danger'
       }
       return statusMap[status]
     },
     typeFilter(type) {
       return calendarTypeKeyValue[type]
     }
   },
   data() {
     return {
       tableKey: 0,
       list: null,
       total: 0,
       listLoading: true,
       listQuery: {
         page: 1,
         limit: 20,
         importance: undefined,
         title: undefined,
         type: undefined,
         sort: '+id'
       },
       importanceOptions: [1, 2, 3],
       calendarTypeOptions,
-      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
+      sortOptions: [
+        { label: 'ID Ascending', key: '+id' },
+        { label: 'ID Descending', key: '-id' }
+      ],
       statusOptions: ['published', 'draft', 'deleted'],
       showReviewer: false,
       temp: {
         id: undefined,
         importance: 1,
         remark: '',
         timestamp: new Date(),
         title: '',
         type: '',
         status: 'published'
       },
       dialogFormVisible: false,
       dialogStatus: '',
       textMap: {
         update: 'Edit',
         create: 'Create'
       },
       dialogPvVisible: false,
       pvData: [],
       rules: {
-        type: [{ required: true, message: 'type is required', trigger: 'change' }],
+        type: [
-        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
+          { required: true, message: 'type is required', trigger: 'change' }
-        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
+        ],
+        timestamp: [
+          {
+            type: 'date',
+            required: true,
+            message: 'timestamp is required',
+            trigger: 'change'
+          }
+        ],
+        title: [
+          { required: true, message: 'title is required', trigger: 'blur' }
+        ]
       },
       downloadLoading: false
     }
   },
   created() {
     this.getList()
   },
   methods: {
     getList() {
       this.listLoading = true
       fetchList(this.listQuery).then(response => {
         this.list = response.data.items
         this.total = response.data.total
         // Just to simulate the time of the request
         setTimeout(() => {
           this.listLoading = false
         }, 1.5 * 1000)
       })
     },
     handleFilter() {
       this.listQuery.page = 1
       this.getList()
     },
     handleModifyStatus(row, status) {
       this.$message({
         message: '操作成功',
         type: 'success'
       })
       row.status = status
     },
     sortChange(data) {
       const { prop, order } = data
       if (prop === 'id') {
         this.sortByID(order)
       }
     },
     sortByID(order) {
       if (order === 'ascending') {
         this.listQuery.sort = '+id'
       } else {
         this.listQuery.sort = '-id'
       }
       this.handleFilter()
     },
     resetTemp() {
       this.temp = {
         id: undefined,
         importance: 1,
         remark: '',
         timestamp: new Date(),
         title: '',
         status: 'published',
         type: ''
       }
     },
     handleCreate() {
       this.resetTemp()
       this.dialogStatus = 'create'
       this.dialogFormVisible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].clearValidate()
       })
     },
     createData() {
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs['dataForm'].validate(valid => {
         if (valid) {
           this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
           this.temp.author = '秀野堂主'
           createArticle(this.temp).then(() => {
             this.list.unshift(this.temp)
             this.dialogFormVisible = false
             this.$notify({
               title: '成功',
               message: '创建成功',
               type: 'success',
               duration: 2000
             })
           })
         }
       })
     },
     handleUpdate(row) {
       this.temp = Object.assign({}, row) // copy obj
       this.temp.timestamp = new Date(this.temp.timestamp)
       this.dialogStatus = 'update'
       this.dialogFormVisible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].clearValidate()
       })
     },
     updateData() {
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs['dataForm'].validate(valid => {
         if (valid) {
           const tempData = Object.assign({}, this.temp)
           tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
           updateArticle(tempData).then(() => {
             const index = this.list.findIndex(v => v.id === this.temp.id)
             this.list.splice(index, 1, this.temp)
             this.dialogFormVisible = false
             this.$notify({
               title: '成功',
               message: '更新成功',
               type: 'success',
               duration: 2000
             })
           })
         }
       })
     },
     handleDelete(row, index) {
       this.$notify({
         title: '成功',
         message: '删除成功',
         type: 'success',
         duration: 2000
       })
       this.list.splice(index, 1)
     },
     handleFetchPv(pv) {
       fetchPv(pv).then(response => {
         this.pvData = response.data.pvData
         this.dialogPvVisible = true
       })
     },
     handleDownload() {
       this.downloadLoading = true
       import('@/vendor/Export2Excel').then(excel => {
         const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
-        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
+        const filterVal = [
+          'timestamp',
+          'title',
+          'type',
+          'importance',
+          'status'
+        ]
         const data = this.formatJson(filterVal)
         excel.export_json_to_excel({
           header: tHeader,
           data,
           filename: 'table-list'
         })
         this.downloadLoading = false
       })
     },
     formatJson(filterVal) {
-      return this.list.map(v => filterVal.map(j => {
+      return this.list.map(v =>
-        if (j === 'timestamp') {
+        filterVal.map(j => {
-          return parseTime(v[j])
+          if (j === 'timestamp') {
-        } else {
+            return parseTime(v[j])
-          return v[j]
+          } else {
-        }
+            return v[j]
-      }))
+          }
+        })
+      )
     },
     getSortClass: function(key) {
       const sort = this.listQuery.sort
       return sort === `+${key}` ? 'ascending' : 'descending'
     }
   }
 }
 </script>

src/views/users/list.vue

Diff comments View file @62b5353

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

vue.config.js

Diff comments View file @62b5353

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