吉鹏 / gulu-admin

Download as
Browse Code »

Commit c44ba96f68e441edcd793a3b261d5e12a73eeabd

Authored by Adam
1 parent 3e54280cad
Exists in master

auto commit the code by alias command

Showing 16 changed files with 104 additions and 23 deletions   Show diff stats
1 # just a flag 1 # just a flag
2 ENV = 'development' 2 ENV = 'development'
3 3
4 # base api 4 # base api
5 VUE_APP_BASE_API = '/dev-api' 5 VUE_APP_BASE_API = '/dev-api'
6 6 # VUE_APP_BASE_API = 'http://localhost/sys-glass/api/'
7 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable, 7 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
8 # to control whether the babel-plugin-dynamic-import-node plugin is enabled. 8 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
9 # It only does one thing by converting all import() to require(). 9 # It only does one thing by converting all import() to require().
10 # This configuration can significantly increase the speed of hot updates, 10 # This configuration can significantly increase the speed of hot updates,
11 # when you have a large number of pages. 11 # when you have a large number of pages.
12 # Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js 12 # Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
13 13
14 VUE_CLI_BABEL_TRANSPILE_MODULES = true 14 VUE_CLI_BABEL_TRANSPILE_MODULES = true
15 15
1 import Mock from 'mockjs' 1 import Mock from 'mockjs'
2 2
3 const data = Mock.mock({ 3 const data = Mock.mock({
4 'items|30': [{ 4 'items|10': [{
5 id: '@id', 5 id: '@id',
6 title: '@sentence(10, 20)', 6 title: '@sentence(3, 10)',
7 'status|1': ['published', 'draft', 'deleted'], 7 'status|1': ['published', 'draft', 'deleted'],
8 author: 'name', 8 author: 'name@integer(300, 5000)',
9 display_time: '@datetime', 9 display_time: '@datetime',
10 pageviews: '@integer(300, 5000)' 10 pageviews: '@integer(300, 5000)'
11 }] 11 }]
12 }) 12 })
13 13
14 export default [ 14 export default [
15 { 15 {
16 url: '/vue-admin-template/table/list', 16 url: '/yp/table/list',
17 type: 'get', 17 type: 'get',
18 response: config => { 18 response: config => {
19 const items = data.items 19 const items = data.items
20 return { 20 return {
21 code: 20000, 21 code: 20000,
22 data: { 22 data: {
23 total: items.length, 23 total: items.length,
24 items: items 24 items: items
25 } 25 }
26 } 26 }
27 } 27 }
28 } 28 }
29 ] 29 ]
30 30
1 1
2 const tokens = { 2 const tokens = {
3 admin: { 3 admin: {
4 token: 'admin-token' 4 token: 'admin-token'
5 }, 5 },
6 assistant: {
7 token: 'assistant-token'
8 },
6 editor: { 9 editor: {
7 token: 'editor-token' 10 token: 'editor-token'
11 },
12 shoper: {
13 token: 'shoper-token'
8 } 14 }
9 } 15 }
10 16
11 const users = { 17 const users = {
12 'admin-token': { 18 'admin-token': {//管理员
13 roles: ['admin'], 19 roles: ['admin'],
14 introduction: 'I am a super administrator', 20 introduction: 'I am a super administrator',
15 avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', 21 avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
16 name: 'Super Admin' 22 name: 'Super Admin'
17 }, 23 },
18 'editor-token': { 24 'assistant-token': {//管理员助理
25 roles: ['assistant'],
26 introduction: 'I am a assistant of administrator',
27 avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
28 name: 'Super Admin'
29 },
30 'editor-token': {//运营人员
19 roles: ['editor'], 31 roles: ['editor'],
20 introduction: 'I am an editor', 32 introduction: 'I am an editor',
21 avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', 33 avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
22 name: 'Normal Editor' 34 name: 'Normal Editor'
35 },
36 'shoper-token': {//供应商
37 roles: ['shoper'],
38 introduction: 'I am an shoper',
39 avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
40 name: 'Normal Editor'
23 } 41 }
24 } 42 }
25 43
26 export default [ 44 export default [
27 // user login 45 // user login
28 { 46 {
29 url: '/vue-admin-template/user/login', 47 url: '/yp/user/login',
30 type: 'post', 48 type: 'post',
31 response: config => { 49 response: config => {
32 const { username } = config.body 50 const { username } = config.body
33 const token = tokens[username] 51 const token = tokens[username]
34
35 // mock error 52 // mock error
36 if (!token) { 53 if (!token) {
37 return { 54 return {
38 code: 60204, 55 code: 60204,
39 message: 'Account and password are incorrect.' 56 message: 'Account and password are incorrect.'
40 } 57 }
41 } 58 }
42 59
43 return { 60 return {
44 code: 20000, 61 code: 20000,
45 data: token 62 data: token
46 } 63 }
47 } 64 }
48 }, 65 },
49 66
50 // get user info 67 // get user info
51 { 68 {
52 url: '/vue-admin-template/user/info\.*', 69 url: '/yp/user/info\.*',
53 type: 'get', 70 type: 'get',
54 response: config => { 71 response: config => {
55 const { token } = config.query 72 const { token } = config.query
56 const info = users[token] 73 const info = users[token]
57 74
58 // mock error 75 // mock error
59 if (!info) { 76 if (!info) {
60 return { 77 return {
61 code: 50008, 78 code: 50008,
62 message: 'Login failed, unable to get user details.' 79 message: 'Login failed, unable to get user details.'
63 } 80 }
64 } 81 }
65 82
66 return { 83 return {
67 code: 20000, 84 code: 20000,
68 data: info 85 data: info
69 } 86 }
70 } 87 }
71 }, 88 },
72 89
73 // user logout 90 // user logout
74 { 91 {
75 url: '/vue-admin-template/user/logout', 92 url: '/yp/user/logout',
76 type: 'post', 93 type: 'post',
77 response: _ => { 94 response: _ => {
78 return { 95 return {
79 code: 20000, 96 code: 20000,
80 data: 'success' 97 data: 'success'
81 } 98 }
82 } 99 }
83 } 100 }
84 ] 101 ]
1 <template> 1 <template>
2 <div id="app"> 2 <div id="app">
3 <router-view /> 3 <router-view />
4 </div> 4 </div>
5 5
6 </template> 6 </template>
7 7
8 <script> 8 <script>
9 export default { 9 export default {
10 name: 'App' 10 name: 'App'
11 } 11 }
12 </script> 12 </script>
13 13
File was created 1 import request from '@/utils/request'
2
3 export function login(data) {
4 console.log('login....', data)
5 return request({
6 url: '/yp/user/login',
7 method: 'post',
8 data
9 })
10 }
11
12 export function getInfo(token) {
13 console.log('getInfo....', token)
14 return request({
15 url: '/yp/user/info',
16 method: 'get',
17 params: { token }
18 })
19 }
20
21 export function logout() {
22 console.log('logout....')
23 return request({
24 url: '/yp/user/logout',
25 method: 'post'
26 })
27 }
28
1 import request from '@/utils/request' 1 import request from '@/utils/request'
2 2
3 export function getList(params) { 3 export function getList(params) {
4 return request({ 4 return request({
5 url: '/vue-admin-template/table/list', 5 url: '/yp/table/list',
6 method: 'get', 6 method: 'get',
7 params 7 params
8 }) 8 })
9 } 9 }
10 10
1 import request from '@/utils/request' 1 import request from '@/utils/request'
2 2
3 export function login(data) { 3 export function login(data) {
4 console.log('login....', data) 4 console.log('login....', data)
5 return request({ 5 return request({
6 url: '/vue-admin-template/user/login', 6 url: '/yp/user/login',
7 method: 'post', 7 method: 'post',
8 data 8 data
9 }) 9 })
10 } 10 }
11 11
12 export function getInfo(token) { 12 export function getInfo(token) {
13 console.log('getInfo....', token) 13 console.log('getInfo....', token)
14 return request({ 14 return request({
15 url: '/vue-admin-template/user/info', 15 url: '/yp/user/info',
16 method: 'get',
17 params: { token }
18 })
19 }
20
21 export function list(token) {
22 console.log('listUser....', token)
23 return request({
24 url: '/yp/user/list',
16 method: 'get', 25 method: 'get',
17 params: { token } 26 params: { token }
18 }) 27 })
19 } 28 }
20 29
21 export function logout() { 30 export function logout() {
22 console.log('logout....') 31 console.log('logout....')
23 return request({ 32 return request({
24 url: '/vue-admin-template/user/logout', 33 url: '/yp/user/logout',
25 method: 'post' 34 method: 'post'
26 }) 35 })
27 } 36 }
28 37
src/router/index.js
Diff comments   View file @c44ba96
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Router from 'vue-router' 2 import Router from 'vue-router'
3 3
4 Vue.use(Router) 4 Vue.use(Router)
5 5
6 /* Layout */ 6 /* Layout */
7 import Layout from '@/layout' 7 import Layout from '@/layout'
8 8
9 /** 9 /**
10 * Note: sub-menu only appear when route children.length >= 1 10 * Note: sub-menu only appear when route children.length >= 1
11 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html 11 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
12 * 12 *
13 * hidden: true if set true, item will not show in the sidebar(default is false) 13 * hidden: true if set true, item will not show in the sidebar(default is false)
14 * alwaysShow: true if set true, will always show the root menu 14 * alwaysShow: true if set true, will always show the root menu
15 * if not set alwaysShow, when item has more than one children route, 15 * if not set alwaysShow, when item has more than one children route,
16 * it will becomes nested mode, otherwise not show the root menu 16 * it will becomes nested mode, otherwise not show the root menu
17 * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb 17 * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
18 * name:'router-name' the name is used by <keep-alive> (must set!!!) 18 * name:'router-name' the name is used by <keep-alive> (must set!!!)
19 * meta : { 19 * meta : {
20 roles: ['admin','editor'] control the page roles (you can set multiple roles) 20 roles: ['admin','editor'] control the page roles (you can set multiple roles)
21 title: 'title' the name show in sidebar and breadcrumb (recommend set) 21 title: 'title' the name show in sidebar and breadcrumb (recommend set)
22 icon: 'svg-name' the icon show in the sidebar 22 icon: 'svg-name' the icon show in the sidebar
23 breadcrumb: false if set false, the item will hidden in breadcrumb(default is true) 23 breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
24 activeMenu: '/example/list' if set path, the sidebar will highlight the path you set 24 activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
25 } 25 }
26 */ 26 */
27 27
28 /** 28 /**
29 * constantRoutes 29 * constantRoutes
30 * a base page that does not have permission requirements 30 * a base page that does not have permission requirements
31 * all roles can be accessed 31 * all roles can be accessed
32 */ 32 */
33 export const constantRoutes = [ 33 export const constantRoutes = [
34 { 34 {
35 path: '/login', 35 path: '/login',
36 component: () => import('@/views/login/index'), 36 component: () => import('@/views/login/index'),
37 hidden: true 37 hidden: true
38 }, 38 },
39 39
40 { 40 {
41 path: '/404', 41 path: '/404',
42 component: () => import('@/views/404'), 42 component: () => import('@/views/404'),
43 hidden: true 43 hidden: true
44 }, 44 },
45 45
46 { 46 {
47 path: '/', 47 path: '/',
48 component: Layout, 48 component: Layout,
49 redirect: '/dashboard', 49 redirect: '/dashboard',
50 children: [{ 50 children: [{
51 path: 'dashboard', 51 path: 'dashboard',
52 name: 'Dashboard', 52 name: 'Dashboard',
53 component: () => import('@/views/dashboard/index'), 53 component: () => import('@/views/dashboard/index'),
54 meta: { title: '标题-------dashboard', icon: 'dashboard' } 54 meta: { title: '中控台', icon: 'dashboard' }
55 }] 55 }]
56 }, 56 },
57 57 {
58 path: '/user',
59 component: Layout,
60 redirect: '/user/list',
61 name: 'user',
62 meta: { title: '用户管理', icon: 'example' },
63 children: [
64 {
65 path: 'user',
66 name: 'User',
67 component: () => import('@/views/table/index'),
68 meta: { title: '用户列表', icon: 'table' }
69 },
70 {
71 path: 'tree',
72 name: 'Table',
73 component: () => import('@/views/tree/index'),
74 meta: { title: 'Tree', icon: 'tree' }
75 }
76 ]
77 },
58 { 78 {
59 path: '/example', 79 path: '/example',
60 component: Layout, 80 component: Layout,
61 redirect: '/example/table', 81 redirect: '/example/table',
62 name: 'Example', 82 name: 'Example',
63 meta: { title: 'Example', icon: 'example' }, 83 meta: { title: 'E1111xample', icon: 'example' },
64 children: [ 84 children: [
65 { 85 {
66 path: 'table', 86 path: 'table',
67 name: 'Table', 87 name: 'Table',
68 component: () => import('@/views/table/index'), 88 component: () => import('@/views/table/index'),
69 meta: { title: 'Table', icon: 'table' } 89 meta: { title: 'Table', icon: 'table' }
70 }, 90 },
71 { 91 {
72 path: 'tree', 92 path: 'tree',
73 name: 'Tree', 93 name: 'Tree',
74 component: () => import('@/views/tree/index'), 94 component: () => import('@/views/tree/index'),
75 meta: { title: 'Tree', icon: 'tree' } 95 meta: { title: 'Tree', icon: 'tree' }
76 } 96 }
77 ] 97 ]
78 }, 98 },
79 99
80 { 100 {
81 path: '/form', 101 path: '/form',
82 component: Layout, 102 component: Layout,
83 children: [ 103 children: [
84 { 104 {
85 path: 'index', 105 path: 'index',
86 name: 'Form', 106 name: 'Form',
87 component: () => import('@/views/form/index'), 107 component: () => import('@/views/form/index'),
88 meta: { title: 'Form', icon: 'form' } 108 meta: { title: 'Form', icon: 'form' }
89 } 109 }
90 ] 110 ]
91 } 111 }
92 ] 112 ]
93 113
94 /** 114 /**
95 * asyncRoutes 115 * asyncRoutes
96 * the routes that need to be dynamically loaded based on user roles 116 * the routes that need to be dynamically loaded based on user roles
97 */ 117 */
98 export const asyncRoutes = [ 118 export const asyncRoutes = [
99 { 119 {
100 path: '/nested', 120 path: '/nested',
101 component: Layout, 121 component: Layout,
102 redirect: '/nested/menu1', 122 redirect: '/nested/menu1',
103 name: 'Nested', 123 name: 'Nested',
104 meta: { 124 meta: {
105 title: 'Nested', 125 title: 'Nested',
106 icon: 'nested' 126 icon: 'nested'
107 }, 127 },
108 children: [ 128 children: [
109 { 129 {
110 path: 'menu1', 130 path: 'menu1',
111 component: () => import('@/views/nested/menu1/index'), // Parent router-view 131 component: () => import('@/views/nested/menu1/index'), // Parent router-view
112 name: 'Menu1', 132 name: 'Menu1',
113 meta: { title: 'Menu1' }, 133 meta: { title: 'Menu1' },
114 children: [ 134 children: [
115 { 135 {
116 path: 'menu1-1', 136 path: 'menu1-1',
117 component: () => import('@/views/nested/menu1/menu1-1'), 137 component: () => import('@/views/nested/menu1/menu1-1'),
118 name: 'Menu1-1', 138 name: 'Menu1-1',
119 meta: { title: 'Menu1-1' } 139 meta: { title: 'Menu1-1' }
120 }, 140 },
121 { 141 {
122 path: 'menu1-2', 142 path: 'menu1-2',
123 component: () => import('@/views/nested/menu1/menu1-2'), 143 component: () => import('@/views/nested/menu1/menu1-2'),
124 name: 'Menu1-2', 144 name: 'Menu1-2',
125 meta: { title: 'Menu1-2' }, 145 meta: { title: 'Menu1-2' },
126 children: [ 146 children: [
127 { 147 {
128 path: 'menu1-2-1', 148 path: 'menu1-2-1',
129 component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'), 149 component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
130 name: 'Menu1-2-1', 150 name: 'Menu1-2-1',
131 meta: { title: 'Menu1-2-1' } 151 meta: { title: 'Menu1-2-1' }
132 }, 152 },
133 { 153 {
134 path: 'menu1-2-2', 154 path: 'menu1-2-2',
135 component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'), 155 component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
136 name: 'Menu1-2-2', 156 name: 'Menu1-2-2',
137 meta: { title: 'Menu1-2-2' } 157 meta: { title: 'Menu1-2-2' }
138 } 158 }
139 ] 159 ]
140 }, 160 },
141 { 161 {
142 path: 'menu1-3', 162 path: 'menu1-3',
143 component: () => import('@/views/nested/menu1/menu1-3'), 163 component: () => import('@/views/nested/menu1/menu1-3'),
144 name: 'Menu1-3', 164 name: 'Menu1-3',
145 meta: { title: 'Menu1-3' } 165 meta: { title: 'Menu1-3' }
146 } 166 }
147 ] 167 ]
148 }, 168 },
149 { 169 {
150 path: 'menu2', 170 path: 'menu2',
151 component: () => import('@/views/nested/menu2/index'), 171 component: () => import('@/views/nested/menu2/index'),
152 meta: { title: 'menu2' } 172 meta: { title: 'menu2' }
153 } 173 }
154 ] 174 ]
155 }, 175 },
156 176
157 { 177 {
158 path: 'external-link', 178 path: 'external-link',
159 component: Layout, 179 component: Layout,
160 children: [ 180 children: [
161 { 181 {
162 path: 'https://panjiachen.github.io/vue-element-admin-site/#/', 182 path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
163 meta: { title: 'External Link', icon: 'link' } 183 meta: { title: 'External Link', icon: 'link' }
164 } 184 }
165 ] 185 ]
166 }, 186 },
167 // 404 page must be placed at the end !!! 187 // 404 page must be placed at the end !!!
168 { 188 {
169 path: '*', 189 path: '*',
170 redirect: '/404' 190 redirect: '/404'
171 } 191 }
172 ] 192 ]
173 193
174 const createRouter = () => new Router({ 194 const createRouter = () => new Router({
175 // mode: 'history', // require service support 195 // mode: 'history', // require service support
176 scrollBehavior: () => ({ y: 0 }), 196 scrollBehavior: () => ({ y: 0 }),
177 routes: constantRoutes 197 routes: constantRoutes
178 }) 198 })
179 199
180 const router = createRouter() 200 const router = createRouter()
181 201
182 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 202 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
183 export function resetRouter() { 203 export function resetRouter() {
184 const newRouter = createRouter() 204 const newRouter = createRouter()
185 router.matcher = newRouter.matcher // reset router 205 router.matcher = newRouter.matcher // reset router
186 } 206 }
187 207
188 export default router 208 export default router
189 209
1 module.exports = { 1 module.exports = {
2 2
3 title: '鱼皮出海', 3 title: '鱼皮出海',
4 4
5 /** 5 /**
6 * @type {boolean} true | false 6 * @type {boolean} true | false
7 * @description Whether fix the header 7 * @description Whether fix the header
8 */ 8 */
9 fixedHeader: true, 9 fixedHeader: true,
10 10
11 /** 11 /**
12 * @type {boolean} true | false 12 * @type {boolean} true | false
13 * @description Whether show the logo in sidebar 13 * @description Whether show the logo in sidebar
14 */ 14 */
15 sidebarLogo:true 15 sidebarLogo: true
16 } 16 }
17 17
src/views/dashboard/index.vue
Diff comments   View file @c44ba96
1 <template> 1 <template>
2 <div class="dashboard-container"> 2 <div class="dashboard-container">
3 <div class="dashboard-text">用户名: {{ name }}</div> 3 <div class="dashboard-text">用户名: {{ name }}</div>
4 <div class="dashboard-text">角色： <span v-for="role in roles" :key="role">{{ role }}</span></div> 4 <div class="dashboard-text">角色： <span v-for="role in roles" :key="role">{{ role }}</span></div>
5 </div> 5 </div>
6 </template> 6 </template>
7 7
8
9
10 <script> 8 <script>
11 import { mapGetters } from 'vuex' 9 import { mapGetters } from 'vuex'
12 import ElementUI from 'element-ui' 10 // import ElementUI from 'element-ui'
11 // 按需引入 引入 ECharts 主模块
12 // var echarts = require('echarts/lib/echarts')
13 // 引入柱状图
14 // require('echarts/lib/chart/bar')
15 // 引入提示框和标题组件
16 // require('echarts/lib/component/tooltip')
17 // require('echarts/lib/component/title')
18 // 全部引入
19 // var echarts = require('echarts')
13 20
14 export default { 21 export default {
15 name: 'Dashboard', 22 name: 'Dashboard',
16 computed: { 23 computed: {
17 ...mapGetters([ 24 ...mapGetters([
18 'name', 25 'name',
19 'roles' 26 'roles'
20 ]) 27 ])
21 } 28 }
22 } 29 }
23 </script> 30 </script>
24 31
25 <style lang="scss" scoped> 32 <style lang="scss" scoped>
26 .dashboard { 33 .dashboard {
27 &-container { 34 &-container {
28 margin: 30px; 35 margin: 30px;
29 } 36 }
30 &-text { 37 &-text {
31 font-size: 30px; 38 font-size: 30px;
32 line-height: 46px; 39 line-height: 46px;
33 } 40 }
34 } 41 }
src/views/table/index.vue
Diff comments   View file @c44ba96
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 <el-table 3 <el-table
4 v-loading="listLoading" 4 v-loading="listLoading"
5 :data="list" 5 :data="list"
6 element-loading-text="Loading" 6 element-loading-text="Loading"
7 border 7 border
8 fit 8 fit
9 highlight-current-row 9 highlight-current-row
10 > 10 >
11 <el-table-column align="center" label="ID" width="95"> 11 <el-table-column align="center" label="ID" width="95">
12 <template slot-scope="scope"> 12 <template slot-scope="scope">
13 {{ scope.$index }} 13 {{ scope.$index }}
14 </template> 14 </template>
15 </el-table-column> 15 </el-table-column>
16 <el-table-column label="Title"> 16 <el-table-column label="Title">
17 <template slot-scope="scope"> 17 <template slot-scope="scope">
18 {{ scope.row.title }} 18 {{ scope.row.title }}
19 </template> 19 </template>
20 </el-table-column> 20 </el-table-column>
21 <el-table-column label="Author" width="110" align="center"> 21 <el-table-column label="Author" width="110" align="center">
22 <template slot-scope="scope"> 22 <template slot-scope="scope">
23 <span>{{ scope.row.author }}</span> 23 <span>{{ scope.row.author }}</span>
24 </template> 24 </template>
25 </el-table-column> 25 </el-table-column>
26 <el-table-column label="Pageviews" width="110" align="center"> 26 <el-table-column label="Pageviews" width="110" align="center">
27 <template slot-scope="scope"> 27 <template slot-scope="scope">
28 {{ scope.row.pageviews }} 28 {{ scope.row.pageviews }}
29 </template> 29 </template>
30 </el-table-column> 30 </el-table-column>
31 <el-table-column class-name="status-col" label="Status" width="110" align="center"> 31 <el-table-column class-name="status-col" label="Status" width="110" align="center">
32 <template slot-scope="scope"> 32 <template slot-scope="scope">
33 <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag> 33 <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
34 </template> 34 </template>
35 </el-table-column> 35 </el-table-column>
36 <el-table-column align="center" prop="created_at" label="Display_time" width="200"> 36 <el-table-column align="center" prop="created_at" label="Display_time" width="200">
37 <template slot-scope="scope"> 37 <template slot-scope="scope">
38 <i class="el-icon-time" /> 38 <i class="el-icon-time" />
39 <span>{{ scope.row.display_time }}</span> 39 <span>{{ scope.row.display_time }}</span>
40 </template> 40 </template>
41 </el-table-column> 41 </el-table-column>
42 </el-table> 42 </el-table>
43 </div> 43 </div>
44 </template> 44 </template>
45 45
46 <script> 46 <script>
47 import { getList } from '@/api/table' 47 import { getList } from '@/api/table'
48 48
49 export default { 49 export default {
50 filters: { 50 filters: {
51 statusFilter(status) { 51 statusFilter(status) {
52 const statusMap = { 52 const statusMap = {
53 published: 'success', 53 published: 'success',
54 draft: 'gray', 54 draft: 'gray',
55 deleted: 'danger' 55 deleted: 'danger'
56 } 56 }
57 return statusMap[status] 57 return statusMap[status]
58 } 58 }
59 }, 59 },
60 data() { 60 data() {
61 return { 61 return {
62 list: null, 62 list: null,
63 listLoading: true 63 listLoading: true
64 } 64 }
65 }, 65 },
66 created() { 66 created() {
67 this.fetchData() 67 this.fetchData()
68 }, 68 },
69 methods: { 69 methods: {
70 fetchData() { 70 fetchData() {
71 this.listLoading = true 71 this.listLoading = true
72 getList().then(response => { 72 getList().then(response => {
73 console.log('----getList---', response)
73 this.list = response.data.items 74 this.list = response.data.items
74 this.listLoading = false 75 this.listLoading = false
75 }) 76 })
76 } 77 }
77 } 78 }
78 } 79 }
79 </script> 80 </script>
80 81