吉鹏 / gulu-admin

Download as
Browse Code »

Commit b58b17e1ee81c077e69948655f50c7e74b68c56b

Authored by Adam
1 parent 5cb3759400
Exists in master

auto commit the code by alias command

Showing 14 changed files with 331 additions and 100 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 # VUE_APP_BASE_API = 'http://localhost:8087/'
6 # VUE_APP_BASE_API = 'http://localhost/sys-glass/api/' 7 # VUE_APP_BASE_API = 'http://localhost/sys-glass/api/'
7 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable, 8 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
8 # to control whether the babel-plugin-dynamic-import-node plugin is enabled. 9 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
9 # It only does one thing by converting all import() to require(). 10 # It only does one thing by converting all import() to require().
10 # This configuration can significantly increase the speed of hot updates, 11 # This configuration can significantly increase the speed of hot updates,
11 # when you have a large number of pages. 12 # 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 13 # Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
13 14
14 VUE_CLI_BABEL_TRANSPILE_MODULES = true 15 VUE_CLI_BABEL_TRANSPILE_MODULES = true
15 16
mock/prod/list.js
Diff comments   View file @b58b17e
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 article of List) {
75 // if (article.id === +id) {
76 // return {
77 // code: 20000,
78 // data: article
79 // }
80 // }
81 // }
82 // }
83 // },
84
85 // {
86 // url: '/yp/article/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/article/create',
116 // type: 'post',
117 // response: _ => {
118 // return {
119 // code: 20000,
120 // data: 'success'
121 // }
122 // }
123 // },
124
125 // {
126 // url: '/yp/article/update',
127 // type: 'post',
128 // response: _ => {
129 // return {
130 // code: 20000,
131 // data: 'success'
132 // }
133 // }
134 // }
135 ]
136
1 import request from '@/utils/request'
2 import {
3 Notification
4 } from 'element-ui'
5 // export const getPersonInfo = data => {
6 // return service({
7 // url: '/person_pay/getpersoninfo',
8 // method: 'post',
9 // data
10 // })
11 // }
12
13 export function fetchList(query) {
14 // console.log('api/prod/list/ ==fetchList=== query', query);
15 const options = {
16 type: 'error',
17 message: query,
18 title: '==query value ===',
19 showClose: true,
20 duration: 4000
21 }
22 Notification(options)
23 return request({
24 url: '/yp/prod/list',
25 method: 'post',
26 params: query
27 })
28 }
29
30 // export function fetchArticle(id) {
31 // return request({
32 // url: '/yp/article/detail',
33 // method: 'get',
34 // params: {
35 // id
36 // }
37 // })
38 // }
39
40 // export function fetchPv(pv) {
41 // return request({
42 // url: '/yp/article/pv',
43 // method: 'get',
44 // params: {
45 // pv
46 // }
47 // })
48 // }
49
50 // export function createArticle(data) {
51 // return request({
52 // url: '/yp/article/create',
53 // method: 'post',
54 // data
55 // })
56 // }
57
58 // export function updateArticle(data) {
59 // return request({
60 // url: '/yp/article/update',
61 // method: 'post',
62 // data
63 // })
64 // }
65
1 import request from '@/utils/request' 1 import request from '@/utils/request'
2 import { 2 import {
3 Notification 3 Notification
4 } from 'element-ui' 4 } from 'element-ui'
5 // login 5 // login
6 export function login(data) { 6 export function login(data) {
7 return request({ 7 return request({
8 url: '/yp/user/login', 8 url: '/yp/user/login',
9 method: 'post', 9 method: 'post',
10 data 10 data
11 }) 11 })
12 } 12 }
13 13
14 // getInfo 14 // getInfo
15 export function getInfo(token) { 15 export function getInfo(token) {
16 return request({ 16 return request({
17 url: '/yp/user/info', 17 url: '/yp/user/info',
18 method: 'get', 18 method: 'get',
19 params: { token } 19 params: {
20 token
21 }
20 }) 22 })
21 } 23 }
22 24
23 // logout 25 // logout
24 export function logout() { 26 export function logout() {
25 return request({ 27 return request({
26 url: '/yp/user/logout', 28 url: '/yp/user/logout',
27 method: 'post' 29 method: 'post'
28 }) 30 })
29 } 31 }
30 32
31 // fetchList 33 // fetchList
32 export function fetchList(query) { 34 export function fetchList(query) {
33 const options = { 35 const options = {
34 type: 'error', 36 type: 'error',
35 message: query, 37 message: query,
36 title: '==query value ===', 38 title: '==query value ===',
37 showClose: true, 39 showClose: true,
38 duration: 4000 40 duration: 4000
39 } 41 }
40 Notification(options) 42 Notification(options)
41 return request({ 43 return request({
42 url: '/yp/user/list', 44 url: '/yp/user/list',
43 method: 'get', 45 method: 'get',
44 params: query 46 params: query
45 }) 47 })
46 } 48 }
47 49
48 // createUser 50 // createUser
49 export function createUser(query) { 51 export function createUser(query) {
50 return request({ 52 return request({
51 url: '/yp/user/create', 53 url: '/yp/user/create',
52 method: 'post', 54 method: 'post',
53 params: query 55 params: query
54 }) 56 })
55 } 57 }
56 58
57 // updateUser 59 // updateUser
58 export function updateUser(query) { 60 export function updateUser(query) {
59 return request({ 61 return request({
60 url: '/yp/user/update', 62 url: '/yp/user/update',
61 method: 'post', 63 method: 'post',
62 params: query 64 params: query
63 }) 65 })
64 } 66 }
65 67
66 // delUser 68 // delUser
67 export function delUser(query) { 69 export function delUser(query) {
68 return request({ 70 return request({
69 url: '/yp/user/del', 71 url: '/yp/user/del',
70 method: 'post', 72 method: 'post',
71 params: query 73 params: query
72 }) 74 })
73 } 75 }
74 76
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: '模型图', 5 sku_modle_pic: '模型图',
6 sku_buy_pic: '购买效果图', 6 sku_buy_pic: '购买效果图',
7 window_pic: '橱窗图', 7 window_pic: '橱窗图',
8 detail_pic: '详情图' 8 detail_pic: '详情图'
9 }, 9 },
10 order: { 10 order: {
11 refunding: '退款中', 11 refunding: '退款中',
12 refunded: '退款完成', 12 refunded: '退款完成',
13 13
14 pay_pending: '待支付', 14 pay_pending: '待支付',
15 pay_finished: '支付完成', 15 pay_finished: '支付完成',
16 16
17 deliver_pre: '准备配送', 17 deliver_pre: '准备配送',
18 deliver_ing: '配送中', 18 deliver_ing: '配送中',
19 deliver_finished: '物流完成' 19 deliver_finished: '物流完成'
20 }, 20 },
21 users: { 21 users: {
22 table: { 22 table: {
23 uid: '用户id', 23 uid: '用户id',
24 username: '用户名', 24 username: '用户名',
25 password: '密码', 25 password: '密码',
26 create_at: '注册时间', 26 create_at: '注册时间',
27 nickname: '昵称', 27 nickname: '昵称',
28 roles: '角色', 28 roles: '角色',
29 openid: 'openid', 29 openid: 'openid',
30 son_of_adv: '下线', 30 son_of_adv: '下线',
31 status: '当前状态', 31 status: '当前状态',
32 level: '等级', 32 level: '等级',
33 oper: '操作', 33 oper: '操作',
34 souceof: '上线', 34 souceof: '上线',
35 revernew: '收益', 35 revernew: '收益',
36 buyvalue: '消费价值', 36 buyvalue: '消费价值',
37 buywill: '消费潜力', 37 buywill: '消费潜力',
38 score: '积分', 38 score: '积分',
39 weixin: '微信', 39 weixin: '微信',
40 facebook: 'facebook', 40 facebook: 'facebook',
41 comefromperson: '来自人', 41 comefromperson: '来自人',
42 comefromplatform: '来自平台', 42 comefromplatform: '来自平台',
43 benifit: '提成', 43 benifit: '提成',
44 coupon: '优惠券', 44 coupon: '优惠券',
45 remark: '备注', 45 remark: '备注',
46 importance: '重要度', 46 importance: '重要度',
47 num: '数量' 47 num: '数量'
48 }, 48 },
49 add: '添加', 49 add: '添加',
50 search: '搜索', 50 search: '搜索',
51 del: '删除', 51 del: '删除',
52 update: '修改', 52 update: '修改',
53 edit: '修改', 53 edit: '修改',
54 selectall: '全选' 54 selectall: '全选'
55 }, 55 },
56 site: { 56 site: {
57 // seo:'seo', 57 // seo:'seo',
58 58
59 }, 59 },
60 meta: { 60 meta: {
61 metadefine: '元定义' 61 metadefine: '元定义'
62 }, 62 },
63 system: { 63 system: {
64 memu: '系统' 64 memu: '系统'
65 }, 65 },
66 route: { 66 route: {
67 users: { 67 users: {
68 people: '用户', 68 people: '用户',
69 user: '普通用户', 69 user: '普通用户',
70 list: '列表', 70 list: '列表',
71 shoper: '厂商', 71 shoper: '厂商',
72 runner: '运营官', 72 runner: '运营官',
73 assistant: '操作员', 73 assistant: '操作员',
74 admin: '超级管理员' 74 admin: '超级管理员'
75 }, 75 },
76 shopers: '厂商', 76 shopers: '厂商',
77 prods: '产品', 77 prods: {
78 prod_menu: '产品',
79 prodlist: '产品列表'
80 },
78 orders: '订单', 81 orders: '订单',
79 sites: '站点', 82 sites: '站点',
80 metas: { 83 metas: {
81 metas: '元', 84 metas: '元',
82 list: '树' 85 list: '树'
83 }, 86 },
84 systems: { 87 systems: {
85 systems: '系统设置', 88 systems: '系统设置',
86 sites: '站点设置', 89 sites: '站点设置',
87 money: '货币设置', 90 money: '货币设置',
88 industry: '行业设置', 91 industry: '行业设置',
89 template: '模版设置' 92 template: '模版设置'
90 }, 93 },
91 // 添加的新词条------end 94 // 添加的新词条------end
92 dashboard: '首页', 95 dashboard: '首页',
93 documentation: '文档', 96 documentation: '文档',
94 guide: '引导页', 97 guide: '引导页',
95 permission: '权限测试页', 98 permission: '权限测试页',
96 rolePermission: '角色权限', 99 rolePermission: '角色权限',
97 pagePermission: '页面权限', 100 pagePermission: '页面权限',
98 directivePermission: '指令权限', 101 directivePermission: '指令权限',
99 icons: '图标', 102 icons: '图标',
100 components: '组件', 103 components: '组件',
101 tinymce: '富文本编辑器', 104 tinymce: '富文本编辑器',
102 markdown: 'Markdown', 105 markdown: 'Markdown',
103 jsonEditor: 'JSON 编辑器', 106 jsonEditor: 'JSON 编辑器',
104 dndList: '列表拖拽', 107 dndList: '列表拖拽',
105 splitPane: 'Splitpane', 108 splitPane: 'Splitpane',
106 avatarUpload: '头像上传', 109 avatarUpload: '头像上传',
107 dropzone: 'Dropzone', 110 dropzone: 'Dropzone',
108 sticky: 'Sticky', 111 sticky: 'Sticky',
109 countTo: 'Count To', 112 countTo: 'Count To',
110 componentMixin: '小组件', 113 componentMixin: '小组件',
111 backToTop: '返回顶部', 114 backToTop: '返回顶部',
112 dragDialog: '拖拽 Dialog', 115 dragDialog: '拖拽 Dialog',
113 dragSelect: '拖拽 Select', 116 dragSelect: '拖拽 Select',
114 dragKanban: '可拖拽看板', 117 dragKanban: '可拖拽看板',
115 charts: '图表', 118 charts: '图表',
116 keyboardChart: '键盘图表', 119 keyboardChart: '键盘图表',
117 lineChart: '折线图', 120 lineChart: '折线图',
118 mixChart: '混合图表', 121 mixChart: '混合图表',
119 example: '综合实例', 122 example: '综合实例',
120 nested: '路由嵌套', 123 nested: '路由嵌套',
121 menu1: '菜单1', 124 menu1: '菜单1',
122 'menu1-1': '菜单 1-1', 125 'menu1-1': '菜单 1-1',
123 'menu1-2': '菜单 1-2', 126 'menu1-2': '菜单 1-2',
124 'menu1-2-1': '菜单 1-2-1', 127 'menu1-2-1': '菜单 1-2-1',
125 'menu1-2-2': '菜单 1-2-2', 128 'menu1-2-2': '菜单 1-2-2',
126 'menu1-3': '菜单 1-3', 129 'menu1-3': '菜单 1-3',
127 menu2: '菜单 2', 130 menu2: '菜单 2',
128 Table: 'Table', 131 Table: 'Table',
129 dynamicTable: '动态 Table', 132 dynamicTable: '动态 Table',
130 dragTable: '拖拽 Table', 133 dragTable: '拖拽 Table',
131 inlineEditTable: 'Table 内编辑', 134 inlineEditTable: 'Table 内编辑',
132 complexTable: '综合 Table', 135 complexTable: '综合 Table',
133 tab: 'Tab', 136 tab: 'Tab',
134 form: '表单', 137 form: '表单',
135 createArticle: '创建文章', 138 createArticle: '创建文章',
136 editArticle: '编辑文章', 139 editArticle: '编辑文章',
137 articleList: '文章列表', 140 articleList: '文章列表',
138 errorPages: '错误页面', 141 errorPages: '错误页面',
139 page401: '401', 142 page401: '401',
140 page404: '404', 143 page404: '404',
141 errorLog: '错误日志', 144 errorLog: '错误日志',
142 excel: 'Excel', 145 excel: 'Excel',
143 exportExcel: '导出 Excel', 146 exportExcel: '导出 Excel',
144 selectExcel: '导出 已选择项', 147 selectExcel: '导出 已选择项',
145 mergeHeader: '导出 多级表头', 148 mergeHeader: '导出 多级表头',
146 uploadExcel: '上传 Excel', 149 uploadExcel: '上传 Excel',
147 zip: 'Zip', 150 zip: 'Zip',
148 pdf: 'PDF', 151 pdf: 'PDF',
149 exportZip: 'Export Zip', 152 exportZip: 'Export Zip',
150 theme: '换肤', 153 theme: '换肤',
151 clipboardDemo: 'Clipboard', 154 clipboardDemo: 'Clipboard',
152 i18n: '国际化', 155 i18n: '国际化',
153 externalLink: '外链', 156 externalLink: '外链',
154 profile: '个人中心' 157 profile: '个人中心'
155 }, 158 },
156 navbar: { 159 navbar: {
157 dashboard: '首页', 160 dashboard: '首页',
158 github: '项目地址', 161 github: '项目地址',
159 logOut: '退出登录', 162 logOut: '退出登录',
160 profile: '个人中心', 163 profile: '个人中心',
161 theme: '换肤', 164 theme: '换肤',
162 size: '布局大小' 165 size: '布局大小'
163 }, 166 },
164 login: { 167 login: {
165 runner: '运营官', 168 runner: '运营官',
166 shoper: '商家', 169 shoper: '商家',
167 assistant: '操作员', 170 assistant: '操作员',
168 signup: '注册', 171 signup: '注册',
169 forgetpassword: '忘记密码', 172 forgetpassword: '忘记密码',
170 rememberpassword: 'remember password', 173 rememberpassword: 'remember password',
171 174
172 title: '鱼皮出海--让我们荡起双浆', 175 title: '鱼皮出海--让我们荡起双浆',
173 logIn: '登录', 176 logIn: '登录',
174 username: '账号', 177 username: '账号',
175 password: '密码', 178 password: '密码',
176 any: '随便填', 179 any: '随便填',
177 thirdparty: '第三方登录', 180 thirdparty: '第三方登录',
178 thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！' 181 thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
179 }, 182 },
180 documentation: { 183 documentation: {
181 documentation: '文档', 184 documentation: '文档',
182 github: 'Github 地址' 185 github: 'Github 地址'
183 }, 186 },
184 permission: { 187 permission: {
185 addRole: '新增角色', 188 addRole: '新增角色',
186 editPermission: '编辑权限', 189 editPermission: '编辑权限',
187 roles: '你的权限', 190 roles: '你的权限',
188 switchRoles: '切换权限', 191 switchRoles: '切换权限',
189 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 来实现。',
190 delete: '删除', 193 delete: '删除',
191 confirm: '确定', 194 confirm: '确定',
192 cancel: '取消' 195 cancel: '取消'
193 }, 196 },
194 guide: { 197 guide: {
195 description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于', 198 description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
196 button: '打开引导' 199 button: '打开引导'
197 }, 200 },
198 components: { 201 components: {
199 documentation: '文档', 202 documentation: '文档',
200 tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见', 203 tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
201 dropzoneTips: '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone', 204 dropzoneTips: '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',
202 stickyTips: '当页面滚动到预设的位置会吸附在顶部', 205 stickyTips: '当页面滚动到预设的位置会吸附在顶部',
203 backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮', 206 backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
204 backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素', 207 backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
205 imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。' 208 imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'
206 }, 209 },
207 table: { 210 table: {
208 dynamicTips1: '固定表头, 按照表头顺序排序', 211 dynamicTips1: '固定表头, 按照表头顺序排序',
209 dynamicTips2: '不固定表头, 按照点击顺序排序', 212 dynamicTips2: '不固定表头, 按照点击顺序排序',
210 dragTips1: '默认顺序', 213 dragTips1: '默认顺序',
211 dragTips2: '拖拽后顺序', 214 dragTips2: '拖拽后顺序',
212 title: '标题', 215 title: '标题',
213 importance: '重要性', 216 importance: '重要性',
214 type: '类型', 217 type: '类型',
215 remark: '点评', 218 remark: '点评',
216 search: '搜索', 219 search: '搜索',
217 add: '添加', 220 add: '添加',
218 export: '导出', 221 export: '导出',
219 reviewer: '审核人', 222 reviewer: '审核人',
220 id: '序号', 223 id: '序号',
221 date: '时间', 224 date: '时间',
222 author: '作者', 225 author: '作者',
223 readings: '阅读数', 226 readings: '阅读数',
224 status: '状态', 227 status: '状态',
225 actions: '操作', 228 actions: '操作',
226 edit: '编辑', 229 edit: '编辑',
227 publish: '发布', 230 publish: '发布',
228 draft: '草稿', 231 draft: '草稿',
229 delete: '删除', 232 delete: '删除',
230 cancel: '取 消', 233 cancel: '取 消',
231 confirm: '确 定' 234 confirm: '确 定'
232 }, 235 },
233 example: { 236 example: {
234 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，直接缓存所有页面。详情见'
235 }, 238 },
236 errorLog: { 239 errorLog: {
237 tips: '请点击右上角bug小图标', 240 tips: '请点击右上角bug小图标',
238 description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。', 241 description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',
239 documentation: '文档介绍' 242 documentation: '文档介绍'
240 }, 243 },
241 excel: { 244 excel: {
242 export: '导出', 245 export: '导出',
243 selectedExport: '导出已选择项', 246 selectedExport: '导出已选择项',
244 placeholder: '请输入文件名(默认excel-list)' 247 placeholder: '请输入文件名(默认excel-list)'
245 }, 248 },
246 zip: { 249 zip: {
247 export: '导出', 250 export: '导出',
248 placeholder: '请输入文件名(默认file)' 251 placeholder: '请输入文件名(默认file)'
249 }, 252 },
250 pdf: { 253 pdf: {
251 tips: '这里使用 window.print() 来实现下载pdf的功能' 254 tips: '这里使用 window.print() 来实现下载pdf的功能'
252 }, 255 },
253 theme: { 256 theme: {
254 change: '换肤', 257 change: '换肤',
255 documentation: '换肤文档', 258 documentation: '换肤文档',
256 tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。' 259 tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。'
257 }, 260 },
258 tagsView: { 261 tagsView: {
259 refresh: '刷新', 262 refresh: '刷新',
260 close: '关闭', 263 close: '关闭',
261 closeOthers: '关闭其它', 264 closeOthers: '关闭其它',
262 closeAll: '关闭所有' 265 closeAll: '关闭所有'
263 }, 266 },
264 settings: { 267 settings: {
265 title: '系统布局配置', 268 title: '系统布局配置',
266 theme: '主题色', 269 theme: '主题色',
267 tagsView: '开启 Tags-View', 270 tagsView: '开启 Tags-View',
268 fixedHeader: '固定 Header', 271 fixedHeader: '固定 Header',
269 sidebarLogo: '侧边栏 Logo' 272 sidebarLogo: '侧边栏 Logo'
270 } 273 }
271 } 274 }
272 275
src/router/index.js
Diff comments   View file @b58b17e
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Router from 'vue-router' 2 import Router from 'vue-router'
3 3
4 Vue.use(Router) 4 Vue.use(Router)
5 5
6 /* Layout */ 6 /* Layout */
7 import Layout from '@/layout' 7 import Layout from '@/layout'
8 8
9 /* Router Modules */ 9 /* Router Modules */
10 // import componentsRouter from './modules/components' 10 import componentsRouter from './modules/components'
11 // import chartsRouter from './modules/charts' 11 // import chartsRouter from './modules/charts'
12 // import tableRouter from './modules/table' 12 // import tableRouter from './modules/table'
13 // import nestedRouter from './modules/nested' 13 // import nestedRouter from './modules/nested'
14 import userRouter from './modules/user' 14 import userRouter from './modules/user'
15 import systemRouter from './modules/system' 15 import systemRouter from './modules/system'
16 import prodRouter from './modules/prod' 16 import prodRouter from './modules/prod'
17 import orderRouter from './modules/order' 17 import orderRouter from './modules/order'
18 import metaRouter from './modules/meta' 18 import metaRouter from './modules/meta'
19 import sitesRouter from './modules/sites' 19 import sitesRouter from './modules/sites'
20 20
21 /** 21 /**
22 * Note: sub-menu only appear when route children.length >= 1 22 * Note: sub-menu only appear when route children.length >= 1
23 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html 23 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
24 * 24 *
25 * hidden: true if set true, item will not show in the sidebar(default is false) 25 * hidden: true if set true, item will not show in the sidebar(default is false)
26 * alwaysShow: true if set true, will always show the root menu 26 * alwaysShow: true if set true, will always show the root menu
27 * if not set alwaysShow, when item has more than one children route, 27 * if not set alwaysShow, when item has more than one children route,
28 * it will becomes nested mode, otherwise not show the root menu 28 * it will becomes nested mode, otherwise not show the root menu
29 * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb 29 * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
30 * name:'router-name' the name is used by <keep-alive> (must set!!!) 30 * name:'router-name' the name is used by <keep-alive> (must set!!!)
31 * meta : { 31 * meta : {
32 roles: ['admin','assistant','runner', 'shoper'] control the page roles (you can set multiple roles) 32 roles: ['admin','assistant','runner', 'shoper'] control the page roles (you can set multiple roles)
33 title: 'title' the name show in sidebar and breadcrumb (recommend set) 33 title: 'title' the name show in sidebar and breadcrumb (recommend set)
34 icon: 'svg-name' the icon show in the sidebar 34 icon: 'svg-name' the icon show in the sidebar
35 noCache: true if set true, the page will no be cached(default is false) 35 noCache: true if set true, the page will no be cached(default is false)
36 affix: true if set true, the tag will affix in the tags-view 36 affix: true if set true, the tag will affix in the tags-view
37 breadcrumb: false if set false, the item will hidden in breadcrumb(default is true) 37 breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
38 activeMenu: '/example/list' if set path, the sidebar will highlight the path you set 38 activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
39 } 39 }
40 */ 40 */
41 41
42 /** 42 /**
43 * constantRoutes 43 * constantRoutes
44 * a base page that does not have permission requirements 44 * a base page that does not have permission requirements
45 * all roles can be accessed 45 * all roles can be accessed
46 */ 46 */
47 export const constantRoutes = [{ 47 export const constantRoutes = [{
48 path: '/redirect', 48 path: '/redirect',
49 component: Layout, 49 component: Layout,
50 hidden: true, 50 hidden: true,
51 children: [{ 51 children: [{
52 path: '/redirect/:path*', 52 path: '/redirect/:path*',
53 component: () => import('@/views/redirect/index') 53 component: () => import('@/views/redirect/index')
54 }] 54 }]
55 }, 55 },
56 { 56 {
57 path: '/login', 57 path: '/login',
58 component: () => import('@/views/login/index'), 58 component: () => import('@/views/login/index'),
59 hidden: true 59 hidden: true
60 }, 60 },
61 { 61 {
62 path: '/auth-redirect', 62 path: '/auth-redirect',
63 component: () => import('@/views/login/auth-redirect'), 63 component: () => import('@/views/login/auth-redirect'),
64 hidden: true 64 hidden: true
65 }, 65 },
66 { 66 {
67 path: '/404', 67 path: '/404',
68 component: () => import('@/views/error-page/404'), 68 component: () => import('@/views/error-page/404'),
69 hidden: true 69 hidden: true
70 }, 70 },
71 { 71 {
72 path: '/500', 72 path: '/500',
73 component: () => import('@/views/error-page/500'), 73 component: () => import('@/views/error-page/500'),
74 hidden: true 74 hidden: true
75 }, 75 },
76 { 76 {
77 path: '/401', 77 path: '/401',
78 component: () => import('@/views/error-page/401'), 78 component: () => import('@/views/error-page/401'),
79 hidden: true 79 hidden: true
80 }, 80 },
81 { 81 {
82 path: '/', 82 path: '/',
83 component: Layout, 83 component: Layout,
84 redirect: '/dashboard', 84 redirect: '/dashboard',
85 children: [{ 85 children: [{
86 path: 'dashboard', 86 path: 'dashboard',
87 component: () => import('@/views/dashboard/index'), 87 component: () => import('@/views/dashboard/index'),
88 name: 'Dashboard', 88 name: 'Dashboard',
89 meta: { 89 meta: {
90 title: 'dashboard', 90 title: 'dashboard',
91 icon: 'dashboard', 91 icon: 'dashboard',
92 affix: true 92 affix: true
93 } 93 }
94 }] 94 }]
95 }, 95 },
96 // { 96 // {
97 // path: '/documentation', 97 // path: '/documentation',
98 // component: Layout, 98 // component: Layout,
99 // children: [ 99 // children: [
100 // { 100 // {
101 // path: 'index', 101 // path: 'index',
102 // component: () => import('@/views/documentation/index'), 102 // component: () => import('@/views/documentation/index'),
103 // name: 'Documentation', 103 // name: 'Documentation',
104 // meta: { title: 'documentation', icon: 'documentation', affix: true } 104 // meta: { title: 'documentation', icon: 'documentation', affix: true }
105 // } 105 // }
106 // ] 106 // ]
107 // }, 107 // },
108 { 108 {
109 path: '/guide', 109 path: '/guide',
110 component: Layout, 110 component: Layout,
111 redirect: '/guide/index', 111 redirect: '/guide/index',
112 children: [{ 112 children: [{
113 path: 'index', 113 path: 'index',
114 component: () => import('@/views/guide/index'), 114 component: () => import('@/views/guide/index'),
115 name: 'Guide', 115 name: 'Guide',
116 meta: { 116 meta: {
117 title: 'guide', 117 title: 'guide',
118 icon: 'guide', 118 icon: 'guide',
119 noCache: true 119 noCache: true
120 } 120 }
121 }] 121 }]
122 } 122 }
123 // { 123 // {
124 // path: '/profile', 124 // path: '/profile',
125 // component: Layout, 125 // component: Layout,
126 // redirect: '/profile/index', 126 // redirect: '/profile/index',
127 // hidden: true, 127 // hidden: true,
128 // children: [ 128 // children: [
129 // { 129 // {
130 // path: 'index', 130 // path: 'index',
131 // component: () => import('@/views/profile/index'), 131 // component: () => import('@/views/profile/index'),
132 // name: 'Profile', 132 // name: 'Profile',
133 // meta: { title: 'profile', icon: 'user', noCache: true } 133 // meta: { title: 'profile', icon: 'user', noCache: true }
134 // } 134 // }
135 // ] 135 // ]
136 // } 136 // }
137 ] 137 ]
138 138
139 /** 139 /**
140 * asyncRoutes 140 * asyncRoutes
141 * the routes that need to be dynamically loaded based on user roles 141 * the routes that need to be dynamically loaded based on user roles
142 */ 142 */
143 export const asyncRoutes = [ 143 export const asyncRoutes = [
144 // { 144 // {
145 // path: '/permission', 145 // path: '/permission',
146 // component: Layout, 146 // component: Layout,
147 // redirect: '/permission/page', 147 // redirect: '/permission/page',
148 // alwaysShow: true, // will always show the root menu 148 // alwaysShow: true, // will always show the root menu
149 // name: 'Permission', 149 // name: 'Permission',
150 // meta: { 150 // meta: {
151 // title: 'permission', 151 // title: 'permission',
152 // icon: 'lock', 152 // icon: 'lock',
153 // roles: ['admin', 'assistant'] // you can set roles in root nav 153 // roles: ['admin', 'assistant'] // you can set roles in root nav
154 // }, 154 // },
155 // children: [ 155 // children: [
156 // { 156 // {
157 // path: 'page', 157 // path: 'page',
158 // component: () => import('@/views/permission/page'), 158 // component: () => import('@/views/permission/page'),
159 // name: 'PagePermission', 159 // name: 'PagePermission',
160 // meta: { 160 // meta: {
161 // title: 'pagePermission', 161 // title: 'pagePermission',
162 // roles: ['admin','assistant'] // or you can only set roles in sub nav 162 // roles: ['admin','assistant'] // or you can only set roles in sub nav
163 // } 163 // }
164 // }, 164 // },
165 // { 165 // {
166 // path: 'directive', 166 // path: 'directive',
167 // component: () => import('@/views/permission/directive'), 167 // component: () => import('@/views/permission/directive'),
168 // name: 'DirectivePermission', 168 // name: 'DirectivePermission',
169 // meta: { 169 // meta: {
170 // title: 'directivePermission', 170 // title: 'directivePermission',
171 // roles: ['admin', 'shoper'] 171 // roles: ['admin', 'shoper']
172 // // if do not set roles, means: this page does not require permission 172 // // if do not set roles, means: this page does not require permission
173 // } 173 // }
174 // }, 174 // },
175 // { 175 // {
176 // path: 'role', 176 // path: 'role',
177 // component: () => import('@/views/permission/role'), 177 // component: () => import('@/views/permission/role'),
178 // name: 'RolePermission', 178 // name: 'RolePermission',
179 // meta: { 179 // meta: {
180 // title: 'rolePermission', 180 // title: 'rolePermission',
181 // roles: ['admin', 'runner'] 181 // roles: ['admin', 'runner']
182 // } 182 // }
183 // } 183 // }
184 // ] 184 // ]
185 // }, 185 // },
186 // tableRouter, 186 // tableRouter,
187 metaRouter, 187 metaRouter,
188 userRouter, 188 userRouter,
189 prodRouter, 189 prodRouter,
190 orderRouter, 190 orderRouter,
191 sitesRouter, 191 sitesRouter,
192
193 // {
194 // path: '/icon',
195 // component: Layout,
196 // children: [
197 // {
198 // path: 'index',
199 // component: () => import('@/views/icons/index'),
200 // name: 'Icons',
201 // meta: { title: 'icons', icon: 'icon', noCache: true }
202 // }
203 // ]
204 // },
205 systemRouter, 192 systemRouter,
206 /** when your routing map is too long, you can split it into small modules **/ 193 componentsRouter,
207 // componentsRouter,
208 // chartsRouter, 194 // chartsRouter,
209 // nestedRouter, 195 // nestedRouter,
210 // tableRouter, 196 // tableRouter,
197 {
198 path: '/icon',
199 component: Layout,
200 children: [{
201 path: 'index',
202 component: () => import('@/views/icons/index'),
203 name: 'Icons',
204 meta: {
205 title: 'icons',
206 icon: 'icon',
207 noCache: true
208 }
209 }]
210 },
211 /** when your routing map is too long, you can split it into small modules **/
211 212
212 // { 213 {
213 // path: '/example', 214 path: '/example',
214 // component: Layout, 215 component: Layout,
215 // redirect: '/example/list', 216 redirect: '/example/list',
216 // name: 'Example', 217 name: 'Example',
217 // meta: { 218 meta: {
218 // title: 'example', 219 title: 'example',
219 // icon: 'example' 220 icon: 'example'
220 // }, 221 },
221 // children: [ 222 children: [{
222 // { 223 path: 'create',
223 // path: 'create', 224 component: () => import('@/views/example/create'),
224 // component: () => import('@/views/example/create'), 225 name: 'CreateArticle',
225 // name: 'CreateArticle', 226 meta: {
226 // meta: { title: 'createArticle', icon: 'edit' } 227 title: 'createArticle',
227 // }, 228 icon: 'edit'
228 // { 229 }
229 // path: 'edit/:id(\\d+)', 230 },
230 // component: () => import('@/views/example/edit'), 231 {
231 // name: 'EditArticle', 232 path: 'edit/:id(\\d+)',
232 // meta: { title: 'editArticle', noCache: true, activeMenu: '/example/list' }, 233 component: () => import('@/views/example/edit'),
233 // hidden: true 234 name: 'EditArticle',
234 // }, 235 meta: {
235 // { 236 title: 'editArticle',
236 // path: 'list', 237 noCache: true,
237 // component: () => import('@/views/example/list'), 238 activeMenu: '/example/list'
238 // name: 'ArticleList', 239 },
239 // meta: { title: 'articleList', icon: 'list' } 240 hidden: true
240 // } 241 },
241 // ] 242 {
242 // }, 243 path: 'list',
244 component: () => import('@/views/example/list'),
245 name: 'ArticleList',
246 meta: {
247 title: 'articleList',
248 icon: 'list'
249 }
250 }
251 ]
252 },
243 253
244 // { 254 // {
245 // path: '/tab', 255 // path: '/tab',
246 // component: Layout, 256 // component: Layout,
247 // children: [ 257 // children: [
248 // { 258 // {
249 // path: 'index', 259 // path: 'index',
250 // component: () => import('@/views/tab/index'), 260 // component: () => import('@/views/tab/index'),
251 // name: 'Tab', 261 // name: 'Tab',
252 // meta: { title: 'tab', icon: 'tab' } 262 // meta: { title: 'tab', icon: 'tab' }
253 // } 263 // }
254 // ] 264 // ]
255 // }, 265 // },
256 266
257 // { 267 // {
258 // path: '/error', 268 // path: '/error',
259 // component: Layout, 269 // component: Layout,
260 // redirect: 'noRedirect', 270 // redirect: 'noRedirect',
261 // name: 'ErrorPages', 271 // name: 'ErrorPages',
262 // meta: { 272 // meta: {
263 // title: 'errorPages', 273 // title: 'errorPages',
264 // icon: '404' 274 // icon: '404'
265 // }, 275 // },
266 // children: [ 276 // children: [
267 // { 277 // {
268 // path: '401', 278 // path: '401',
269 // component: () => import('@/views/error-page/401'), 279 // component: () => import('@/views/error-page/401'),
270 // name: 'Page401', 280 // name: 'Page401',
271 // meta: { title: 'page401', noCache: true } 281 // meta: { title: 'page401', noCache: true }
272 // }, 282 // },
273 // { 283 // {
274 // path: '404', 284 // path: '404',
275 // component: () => import('@/views/error-page/404'), 285 // component: () => import('@/views/error-page/404'),
276 // name: 'Page404', 286 // name: 'Page404',
277 // meta: { title: 'page404', noCache: true } 287 // meta: { title: 'page404', noCache: true }
278 // } 288 // }
279 // ] 289 // ]
280 // }, 290 // },
281 291
282 // { 292 // {
283 // path: '/error-log', 293 // path: '/error-log',
284 // component: Layout, 294 // component: Layout,
285 // children: [ 295 // children: [
286 // { 296 // {
287 // path: 'log', 297 // path: 'log',
288 // component: () => import('@/views/error-log/index'), 298 // component: () => import('@/views/error-log/index'),
289 // name: 'ErrorLog', 299 // name: 'ErrorLog',
290 // meta: { title: 'errorLog', icon: 'bug' } 300 // meta: { title: 'errorLog', icon: 'bug' }
291 // } 301 // }
292 // ] 302 // ]
293 // }, 303 // },
294 304
295 // { 305 // {
296 // path: '/excel', 306 // path: '/excel',
297 // component: Layout, 307 // component: Layout,
298 // redirect: '/excel/export-excel', 308 // redirect: '/excel/export-excel',
299 // name: 'Excel', 309 // name: 'Excel',
300 // meta: { 310 // meta: {
301 // title: 'excel', 311 // title: 'excel',
302 // icon: 'excel' 312 // icon: 'excel'
303 // }, 313 // },
304 // children: [ 314 // children: [
305 // { 315 // {
306 // path: 'export-excel', 316 // path: 'export-excel',
307 // component: () => import('@/views/excel/export-excel'), 317 // component: () => import('@/views/excel/export-excel'),
308 // name: 'ExportExcel', 318 // name: 'ExportExcel',
309 // meta: { title: 'exportExcel' } 319 // meta: { title: 'exportExcel' }
310 // }, 320 // },
311 // { 321 // {
312 // path: 'export-selected-excel', 322 // path: 'export-selected-excel',
313 // component: () => import('@/views/excel/select-excel'), 323 // component: () => import('@/views/excel/select-excel'),
314 // name: 'SelectExcel', 324 // name: 'SelectExcel',
315 // meta: { title: 'selectExcel' } 325 // meta: { title: 'selectExcel' }
316 // }, 326 // },
317 // { 327 // {
318 // path: 'export-merge-header', 328 // path: 'export-merge-header',
319 // component: () => import('@/views/excel/merge-header'), 329 // component: () => import('@/views/excel/merge-header'),
320 // name: 'MergeHeader', 330 // name: 'MergeHeader',
321 // meta: { title: 'mergeHeader' } 331 // meta: { title: 'mergeHeader' }
322 // }, 332 // },
323 // { 333 // {
324 // path: 'upload-excel', 334 // path: 'upload-excel',
325 // component: () => import('@/views/excel/upload-excel'), 335 // component: () => import('@/views/excel/upload-excel'),
326 // name: 'UploadExcel', 336 // name: 'UploadExcel',
327 // meta: { title: 'uploadExcel' } 337 // meta: { title: 'uploadExcel' }
328 // } 338 // }
329 // ] 339 // ]
330 // }, 340 // },
331 341
332 // { 342 // {
333 // path: '/zip', 343 // path: '/zip',
334 // component: Layout, 344 // component: Layout,
335 // redirect: '/zip/download', 345 // redirect: '/zip/download',
336 // alwaysShow: true, 346 // alwaysShow: true,
337 // name: 'Zip', 347 // name: 'Zip',
338 // meta: { title: 'zip', icon: 'zip' }, 348 // meta: { title: 'zip', icon: 'zip' },
339 // children: [ 349 // children: [
340 // { 350 // {
341 // path: 'download', 351 // path: 'download',
342 // component: () => import('@/views/zip/index'), 352 // component: () => import('@/views/zip/index'),
343 // name: 'ExportZip', 353 // name: 'ExportZip',
344 // meta: { title: 'exportZip' } 354 // meta: { title: 'exportZip' }
345 // } 355 // }
346 // ] 356 // ]
347 // }, 357 // },
348 358
349 // { 359 // {
350 // path: '/pdf', 360 // path: '/pdf',
351 // component: Layout, 361 // component: Layout,
352 // redirect: '/pdf/index', 362 // redirect: '/pdf/index',
353 // children: [ 363 // children: [
354 // { 364 // {
355 // path: 'index', 365 // path: 'index',
356 // component: () => import('@/views/pdf/index'), 366 // component: () => import('@/views/pdf/index'),
357 // name: 'PDF', 367 // name: 'PDF',
358 // meta: { title: 'pdf', icon: 'pdf' } 368 // meta: { title: 'pdf', icon: 'pdf' }
359 // } 369 // }
360 // ] 370 // ]
361 // }, 371 // },
362 // { 372 // {
363 // path: '/pdf/download', 373 // path: '/pdf/download',
364 // component: () => import('@/views/pdf/download'), 374 // component: () => import('@/views/pdf/download'),
365 // hidden: true 375 // hidden: true
366 // }, 376 // },
367 377
368 // { 378 // {
369 // path: '/theme', 379 // path: '/theme',
370 // component: Layout, 380 // component: Layout,
371 // children: [ 381 // children: [
372 // { 382 // {
373 // path: 'index', 383 // path: 'index',
374 // component: () => import('@/views/theme/index'), 384 // component: () => import('@/views/theme/index'),
375 // name: 'Theme', 385 // name: 'Theme',
376 // meta: { title: 'theme', icon: 'theme' } 386 // meta: { title: 'theme', icon: 'theme' }
377 // } 387 // }
378 // ] 388 // ]
379 // }, 389 // },
380 390
381 // { 391 // {
382 // path: '/clipboard', 392 // path: '/clipboard',
383 // component: Layout, 393 // component: Layout,
384 // children: [ 394 // children: [
385 // { 395 // {
386 // path: 'index', 396 // path: 'index',
387 // component: () => import('@/views/clipboard/index'), 397 // component: () => import('@/views/clipboard/index'),
388 // name: 'ClipboardDemo', 398 // name: 'ClipboardDemo',
389 // meta: { title: 'clipboardDemo', icon: 'clipboard' } 399 // meta: { title: 'clipboardDemo', icon: 'clipboard' }
390 // } 400 // }
391 // ] 401 // ]
392 // }, 402 // },
393 403
394 // { 404 // {
395 // path: '/i18n', 405 // path: '/i18n',
396 // component: Layout, 406 // component: Layout,
397 // children: [ 407 // children: [
398 // { 408 // {
399 // path: 'index', 409 // path: 'index',
400 // component: () => import('@/views/i18n-demo/index'), 410 // component: () => import('@/views/i18n-demo/index'),
401 // name: 'I18n', 411 // name: 'I18n',
402 // meta: { title: 'i18n', icon: 'international' } 412 // meta: { title: 'i18n', icon: 'international' }
403 // } 413 // }
404 // ] 414 // ]
405 // }, 415 // },
406 416
407 // { 417 // {
408 // path: 'external-link', 418 // path: 'external-link',
409 // component: Layout, 419 // component: Layout,
410 // children: [ 420 // children: [
411 // { 421 // {
412 // path: 'https://github.com/PanJiaChen/vue-element-admin', 422 // path: 'https://github.com/PanJiaChen/vue-element-admin',
413 // meta: { title: 'externalLink', icon: 'link' } 423 // meta: { title: 'externalLink', icon: 'link' }
414 // } 424 // }
415 // ] 425 // ]
416 // }, 426 // },
417 427
418 // 404 page must be placed at the end !!! 428 // 404 page must be placed at the end !!!
419 { 429 {
420 path: '*', 430 path: '*',
421 redirect: '/404', 431 redirect: '/404',
422 hidden: true 432 hidden: true
423 } 433 }
424 ] 434 ]
425 435
426 const createRouter = () => new Router({ 436 const createRouter = () => new Router({
427 // mode: 'history', // require service support 437 // mode: 'history', // require service support
428 scrollBehavior: () => ({ 438 scrollBehavior: () => ({
429 y: 0 439 y: 0
src/router/modules/meta.js
Diff comments   View file @b58b17e
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/tree'), 16 component: () => import('@/views/meta/tree'),
17 name: 'MetaList', 17 name: 'MetaList',
18 meta: { 18 meta: {
19 title: 'metas.list', 19 title: 'metas.list',
20 icon: 'zip', 20 icon: 'zip',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav 21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 } 22 }
23 }] 23 }]
24 } 24 }
25 export default metaRouter 25 export default metaRouter
26 26
src/router/modules/order.js
Diff comments   View file @b58b17e
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 orderRouter = { 5 const orderRouter = {
6 path: '/orders', 6 path: '/orders',
7 component: Layout, 7 component: Layout,
8 redirect: '/order/page', 8 redirect: '/order/page',
9 alwaysShow: true, // will always show the root menu 9 alwaysShow: true, // will always show the root menu
10 name: 'Order', 10 name: 'Order',
11 meta: { 11 meta: {
12 title: 'orders', 12 title: 'orders',
13 icon: 'shopping', 13 icon: 'shopping',
14 roles: ['admin', 'assistant', 'runner', 'shoper'] // you can set roles in root nav 14 roles: ['admin', 'assistant', 'runner', 'shoper'] // you can set roles in root nav
15 }, 15 },
16 children: [{ 16 children: [{
17 path: 'page', 17 path: 'orderpage',
18 component: () => import('@/views/order/list'), 18 component: () => import('@/views/order/list'),
19 name: 'OrderList', 19 name: 'list',
20 meta: { 20 meta: {
21 title: 'OrderList', 21 title: 'orders',
22 roles: ['admin', 'assistant', 'runner', 'shoper'] // or you can only set roles in sub nav 22 roles: ['admin', 'assistant', 'runner', 'shoper'] // or you can only set roles in sub nav
23 } 23 }
24 }] 24 }]
25 } 25 }
26 26
27 export default orderRouter 27 export default orderRouter
28 28
src/router/modules/prod.js
Diff comments   View file @b58b17e
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 prodRouter = { 5 const prodRouter = {
6 path: '/prods', 6 path: '/prod',
7 component: Layout, 7 component: Layout,
8 redirect: '/prod/page', 8 redirect: '/prod/page',
9 alwaysShow: true, // will always show the root menu 9 alwaysShow: true, // will always show the root menu
10 name: 'Prod', 10 name: 'Prod',
11 meta: { 11 meta: {
12 title: 'prods', // 会自动被i18n替换 12 title: 'prods.prod_menu', // 会自动被i18n替换
13 icon: 'star', 13 icon: 'star',
14 roles: ['admin', 'assistant', 'runner', 'shoper'] // you can set roles in root nav 14 roles: ['admin', 'assistant', 'runner', 'shoper'] // you can set roles in root nav
15 }, 15 },
16 children: [{ 16 children: [
17 path: 'page', 17 // {
18 component: () => import('@/views/permission/page'), 18 // path: 'page',
19 name: 'ProdList', 19 // component: () => import('@/views/permission/page'),
20 meta: { 20 // name: 'ProdList',
21 title: 'ProdList', 21 // meta: {
22 roles: ['admin', 'assistant', 'runner', 'shoper'] 22 // title: 'ProdList',
23 // roles: ['admin', 'assistant', 'runner', 'shoper']
24 // }
25 // },
26 // {
27 // path: 'defined',
28 // component: () => import('@/views/permission/directive'),
29 // name: 'ProdDefiend',
30 // meta: {
31 // title: 'ProdDefiend',
32 // roles: ['admin', 'assistant', 'shoper']
33 // }
34 // },
35 {
36 path: 'list',
37 component: () => import('@/views/prod/list'),
38 name: 'prodList',
39 meta: {
40 title: 'prods.prodlist',
41 roles: ['admin', 'assistant', 'shoper', 'runner']
42 }
23 } 43 }
24 },
25 {
26 path: 'defined',
27 component: () => import('@/views/permission/directive'),
28 name: 'ProdDefiend',
src/router/modules/sites.js
Diff comments   View file @b58b17e
1 import Layout from '@/layout' 1 import Layout from '@/layout'
2 2
3 const sitesRouter = { 3 const sitesRouter = {
4 path: '/sites', 4 path: '/sites',
5 component: Layout, 5 component: Layout,
6 redirect: '/site/page', 6 redirect: '/site/page',
7 alwaysShow: true, // will always show the root menu 7 alwaysShow: true, // will always show the root menu
8 name: 'Site', 8 name: 'Site',
9 meta: { 9 meta: {
10 title: 'sites', 10 title: 'sites',
11 icon: 'people', 11 icon: 'people',
12 roles: ['admin', 'assistant', 'runner'] // you can set roles in root nav 12 roles: ['admin', 'assistant', 'runner'] // you can set roles in root nav
13 }, 13 },
14 children: [{ 14 children: [{
15 path: 'page', 15 path: 'sitepage',
16 component: () => import('@/views/site/list'), 16 component: () => import('@/views/site/list'),
17 name: 'SiteList', 17 name: 'SiteList',
18 meta: { 18 meta: {
19 title: '站点列表', 19 title: '站点列表',
20 roles: ['admin', 'runner'] 20 roles: ['admin', 'runner']
21 21
22 } 22 }
23 }] 23 }]
24 } 24 }
25 25
26 export default sitesRouter 26 export default sitesRouter
27 27
src/router/modules/system.js
Diff comments   View file @b58b17e
1 import Layout from '@/layout' 1 import Layout from '@/layout'
2 2
3 const systemRouter = { 3 const systemRouter = {
4 path: '/system', 4 path: '/system',
5 component: Layout, 5 component: Layout,
6 redirect: '/system/page', 6 redirect: '/system/page',
7 alwaysShow: true, // will always show the root menu 7 alwaysShow: true, // will always show the root menu
8 name: 'System', 8 name: 'System',
9 meta: { 9 meta: {
10 title: 'systems.systems', 10 title: 'systems.systems',
11 icon: 'component', 11 icon: 'component',
12 roles: ['admin', 'assistant'] // you can set roles in root nav 12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 }, 13 },
14 children: [{ 14 children: [{
15 path: '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'] // 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'] // 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'] // 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'] // 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/store/modules/prod.js
Diff comments   View file @b58b17e
No preview for this file type
src/utils/request.js
Diff comments   View file @b58b17e
1 import axios from 'axios' 1 import axios from 'axios'
2 import qs from 'qs' 2 import qs from 'qs'
3 import { 3 import {
4 MessageBox, 4 MessageBox,
5 Message, 5 Message,
6 // Loading, 6 // Loading,
7 Notification 7 Notification
8 } from 'element-ui' 8 } from 'element-ui'
9 import store from '@/store' 9 import store from '@/store'
10 import { 10 import {
11 getToken 11 getToken
12 } from '@/utils/auth' 12 } from '@/utils/auth'
13 13
14 // const baseUrl = 'http://localhost/sys-glass/api'; 14 // const baseUrl = 'http://localhost/sys-glass/api';
15 const baseUrl = process.env.VUE_APP_BASE_API // url = base url + request url 15 // const baseUrl = 'http://localhost:8087';
16 const baseUrl = '/dev-api'
17 // const baseUrl = process.env.VUE_APP_BASE_API // url = base url + request url
16 // create an axios instance 18 // create an axios instance
17 const service = axios.create({ 19 const service = axios.create({
18 // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url 20 // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
19 baseURL: baseUrl, // url = base url + request url 21 baseURL: baseUrl, // url = base url + request url
20 withCredentials: true, // send cookies when cross-domain requests 22 withCredentials: true, // send cookies when cross-domain requests
21 timeout: 3000 // request timeout 23 timeout: 3000 // request timeout
22 }) 24 })
23 // let loadingInstance 25 // let loadingInstance
24 // request interceptor 26 // request interceptor
25 service.interceptors.request.use( 27 service.interceptors.request.use(
26 config => { 28 config => {
27 const token = sessionStorage.getItem('access_token') 29 const token = sessionStorage.getItem('access_token')
28 // const csrf = store.getters.csrf 30 // const csrf = store.getters.csrf
29 if (token) { 31 if (token) {
30 config.headers = { 32 config.headers = {
31 'access-token': token, 33 'access-token': token,
32 'Content-Type': 'application/x-www-form-urlencoded' 34 'Content-Type': 'application/x-www-form-urlencoded'
33 } 35 }
34 } 36 }
35 if (config.url === 'refresh') { 37 if (config.url === 'refresh') {
36 config.headers = { 38 config.headers = {
37 'refresh-token': sessionStorage.getItem('refresh_token'), 39 'refresh-token': sessionStorage.getItem('refresh_token'),
38 'Content-Type': 'application/x-www-form-urlencoded' 40 'Content-Type': 'application/x-www-form-urlencoded'
39 } 41 }
40 } 42 }
41 // let options = { 43 // let options = {
42 // lock: true, 44 // lock: true,
43 // fullscreen: false, 45 // fullscreen: false,
44 // text: '数据加载中……', 46 // text: '数据加载中……',
45 // // background: '#FFCC00', 47 // // background: '#FFCC00',
46 // spinner: 'el-icon-loading' 48 // spinner: 'el-icon-loading'
47 // }; 49 // };
48 const options = { 50 const options = {
49 type: 'success', 51 type: 'success',
50 message: baseUrl + config.url, 52 message: baseUrl + config.url,
51 title: 'request axios ', 53 title: 'request axios ',
52 showClose: true, 54 showClose: true,
53 duration: 3000 55 duration: 3000
54 } 56 }
55 Notification(options) 57 Notification(options)
56 // loadingInstance = Loading.service(options); 58 // loadingInstance = Loading.service(options);
57 config.method === 'post' 59 config.method === 'post'
58 ? config.data = qs.stringify({ 60 ? config.data = qs.stringify({
59 ...config.data 61 ...config.data
60 }) 62 })
61 : config.params = { 63 : config.params = {
62 ...config.params 64 ...config.params
63 } 65 }
64 if (store.getters.token) { 66 if (store.getters.token) {
65 // let each request carry token 67 // let each request carry token
66 // ['X-Token'] is a custom headers key 68 // ['X-Token'] is a custom headers key
67 // please modify it according to the actual situation 69 // please modify it according to the actual situation
68 config.headers['X-Token'] = getToken() 70 config.headers['X-Token'] = getToken()
69 } 71 }
70 config.headers['Content-Type'] = 'application/x-www-form-urlencoded' 72 config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
71 73
72 return config 74 return config
73 // do something before request is sent 75 // do something before request is sent
74 }, 76 },
75 error => { 77 error => {
76 // do something with request error 78 // do something with request error
77 Message({ 79 Message({
78 message: error || 'Error', 80 message: error || 'Error',
79 type: 'error', 81 type: 'error',
80 duration: 5 * 1000 82 duration: 5 * 1000
81 }) 83 })
82 console.log(error) // for debug 84 console.log(error) // for debug
83 return Promise.reject(error) 85 return Promise.reject(error)
84 } 86 }
85 ) 87 )
86 88
87 // response interceptor 89 // response interceptor
88 service.interceptors.response.use( 90 service.interceptors.response.use(
89 /** 91 /**
90 * If you want to get http information such as headers or status 92 * If you want to get http information such as headers or status
91 * Please return response => response 93 * Please return response => response
92 */ 94 */
93 95
94 /** 96 /**
95 * Determine the request status by custom code 97 * Determine the request status by custom code
96 * Here is just an example 98 * Here is just an example
97 * You can also judge the status by HTTP Status Code 99 * You can also judge the status by HTTP Status Code
98 */ 100 */
99 response => { 101 response => {
100 const options = { 102 const options = {
101 type: 'error', 103 type: 'error',
102 message: response.status, 104 message: response.status,
103 title: 'response status value ', 105 title: 'response status value ',
104 showClose: true, 106 showClose: true,
105 duration: 1000 107 duration: 1000
106 } 108 }
107 Notification(options) 109 Notification(options)
108 // Notification.close() 110 // Notification.close()
109 111
110 // 这里根据后端提供的数据进行对应的处理 112 // 这里根据后端提供的数据进行对应的处理
111 console.log('response===>', response) 113 console.log('response===>', response)
112 // 定时刷新access-token 114 // 定时刷新access-token
113 // if (!response.data.value && response.data.data.message === 'token invalid') { 115 // if (!response.data.value && response.data.data.message === 'token invalid') {
114 // // 刷新token 116 // // 刷新token
115 // store.dispatch('refresh').then(response => { 117 // store.dispatch('refresh').then(response => {
116 // sessionStorage.setItem('access_token', response.data) 118 // sessionStorage.setItem('access_token', response.data)
117 // }).catch(error => { 119 // }).catch(error => {
118 // throw new Error('token刷新' + error) 120 // throw new Error('token刷新' + error)
119 // }) 121 // })
120 // } 122 // }
121 123
122 const res = response.data 124 const res = response.data
123 125
124 // if the custom code is not 20000, it is judged as an error. 126 // if the custom code is not 20000, it is judged as an error.
125 if (res.code !== 20000) { 127 if (res.code !== 20000) {
126 Message({ 128 Message({
127 message: res.message || 'Error', 129 message: res.message || 'Error',
128 type: 'error', 130 type: 'error',
129 duration: 5 * 1000 131 duration: 5 * 1000
130 }) 132 })
131 133
132 // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; 134 // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
133 if (res.code === 50008 || res.code === 50012 || res.code === 50014) { 135 if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
134 // to re-login 136 // to re-login
135 MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { 137 MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
136 confirmButtonText: 'Re-Login', 138 confirmButtonText: 'Re-Login',
137 cancelButtonText: 'Cancel', 139 cancelButtonText: 'Cancel',
138 type: 'warning' 140 type: 'warning'
139 }).then(() => { 141 }).then(() => {
140 store.dispatch('user/resetToken').then(() => { 142 store.dispatch('user/resetToken').then(() => {
141 location.reload() 143 location.reload()
142 }) 144 })
143 }) 145 })
144 } 146 }
145 return Promise.reject(new Error(res.message || 'Error')) 147 return Promise.reject(new Error(res.message || 'Error'))
146 } else { 148 } else {
147 return res 149 return res
148 } 150 }
149 }, 151 },
150 error => { 152 error => {
151 console.log('error', error) 153 console.log('error', error)
152 // console.log(JSON.stringify(error)); 154 // console.log(JSON.stringify(error));
153 // 500的状态也应该处理一下 155 // 500的状态也应该处理一下
154 // 401-403的状态也应该处理一下 156 // 401-403的状态也应该处理一下
155 const text = JSON.parse(JSON.stringify(error)).response.status === 404 157 const text = JSON.parse(JSON.stringify(error)).response.status === 404
156 ? '404' 158 ? '404'
157 : '网络异常，请重试' 159 : '网络异常，请重试'
158 Message({ 160 Message({
159 message: text || 'Error', 161 message: text || 'Error',
160 type: 'error', 162 type: 'error',
161 duration: 5 * 1000 163 duration: 5 * 1000
162 }) 164 })
163 165
164 return Promise.reject(error) 166 return Promise.reject(error)
165 } 167 }
166 ) 168 )
167 169
168 // 假设你想移除拦截器 170 // 假设你想移除拦截器
169 // axios.interceptors.request.eject(service); 171 // axios.interceptors.request.eject(service);
170 172
171 export default service 173 export default service
172 174
src/views/prod/list.vue
Diff comments   View file @b58b17e
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 <!-- Note that row-key is necessary to get a correct row order. --> 3 <!-- Note that row-key is necessary to get a correct row order. -->
4 <el-table 4 <el-table
5 ref="dragTable" 5 ref="dragTable"
6 v-loading="listLoading" 6 v-loading="listLoading"
7 :data="list" 7 :data="list"
8 row-key="id" 8 row-key="id"
9 border 9 border
10 fit 10 fit
11 highlight-current-row 11 highlight-current-row
12 style="width: 100%" 12 style="width: 100%"
13 > 13 >
14 <el-table-column 14 <el-table-column
15 align="center" 15 align="center"
16 label="ID" 16 label="PID"
17 width="65" 17 width="65"
18 > 18 >
19 <template slot-scope="{row}"> 19 <template slot-scope="{row}">
20 <span>{{ row.id }}</span> 20 <span>{{ row.id }}</span>
21 </template> 21 </template>
22 </el-table-column> 22 </el-table-column>
23 23
24 <el-table-column 24 <el-table-column
25 width="180px" 25 width="180px"
26 align="center" 26 align="center"
27 label="Date" 27 label="Date2"
28 > 28 >
29 <template slot-scope="{row}"> 29 <template slot-scope="{row}">
30 <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span> 30 <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
31 </template> 31 </template>
32 </el-table-column> 32 </el-table-column>
33 33
34 <el-table-column 34 <el-table-column
35 min-width="300px" 35 min-width="300px"
36 label="Title" 36 label="Title"
37 > 37 >
38 <template slot-scope="{row}"> 38 <template slot-scope="{row}">
39 <span>{{ row.title }}</span> 39 <span>{{ row.title }}</span>
40 </template> 40 </template>
41 </el-table-column> 41 </el-table-column>
42 42
43 <el-table-column 43 <el-table-column
44 width="110px" 44 width="110px"
45 align="center" 45 align="center"
46 label="Author" 46 label="Author"
47 > 47 >
48 <template slot-scope="{row}"> 48 <template slot-scope="{row}">
49 <span>{{ row.author }}</span> 49 <span>{{ row.author }}</span>
50 </template> 50 </template>
51 </el-table-column> 51 </el-table-column>
52 52
53 <el-table-column 53 <el-table-column
54 width="100px" 54 width="100px"
55 label="Importance" 55 label="Importance"
56 > 56 >
57 <template slot-scope="{row}"> 57 <template slot-scope="{row}">
58 <svg-icon 58 <svg-icon
59 v-for="n in + row.importance" 59 v-for="n in + row.importance"
60 :key="n" 60 :key="n"
61 icon-class="star" 61 icon-class="star"
62 class="icon-star" 62 class="icon-star"
63 /> 63 />
64 </template> 64 </template>
65 </el-table-column> 65 </el-table-column>
66 66
67 <el-table-column 67 <el-table-column
68 align="center" 68 align="center"
69 label="Readings" 69 label="Readings"
70 width="95" 70 width="95"
71 > 71 >
72 <template slot-scope="{row}"> 72 <template slot-scope="{row}">
73 <span>{{ row.pageviews }}</span> 73 <span>{{ row.pageviews }}</span>
74 </template> 74 </template>
75 </el-table-column> 75 </el-table-column>
76 76
77 <el-table-column 77 <el-table-column
78 class-name="status-col" 78 class-name="status-col"
79 label="Status" 79 label="Status"
80 width="110" 80 width="110"
81 > 81 >
82 <template slot-scope="{row}"> 82 <template slot-scope="{row}">
83 <el-tag :type="row.status | statusFilter"> 83 <el-tag :type="row.status | statusFilter">
84 {{ row.status }} 84 {{ row.status }}
85 </el-tag> 85 </el-tag>
86 </template> 86 </template>
87 </el-table-column> 87 </el-table-column>
88 88
89 <el-table-column 89 <el-table-column
90 align="center" 90 align="center"
91 label="Drag" 91 label="Drag"
92 width="80" 92 width="80"
93 > 93 >
94 <template slot-scope="{}"> 94 <template slot-scope="{}">
95 <svg-icon 95 <svg-icon
96 class="drag-handler" 96 class="drag-handler"
97 icon-class="drag" 97 icon-class="drag"
98 /> 98 />
99 </template> 99 </template>
100 </el-table-column> 100 </el-table-column>
101 </el-table> 101 </el-table>
102 <!-- $t is vue-i18n global function to translate lang (lang in @/lang) --> 102 <!-- $t is vue-i18n global function to translate lang (lang in @/lang) -->
103 <div class="show-d"> 103 <div class="show-d">
104 <el-tag style="margin-right:12px;">{{ $t('table.dragTips1') }} :</el-tag> {{ oldList }} 104 <el-tag style="margin-right:12px;">{{ $t('table.dragTips1') }} :</el-tag> {{ oldList }}
105 </div> 105 </div>
106 <div class="show-d"> 106 <div class="show-d">
107 <el-tag>{{ $t('table.dragTips2') }} :</el-tag> {{ newList }} 107 <el-tag>{{ $t('table.dragTips2') }} :</el-tag> {{ newList }}
108 </div> 108 </div>
109 </div> 109 </div>
110 </template> 110 </template>
111 111
112 <script> 112 <script>
113 import { fetchList } from '@/api/article' 113 import {
114 fetchList
115 // fetchPv
116 // createUser,
117 // updateUser,
118 // delUser
119 } from '@/api/prod'
114 import Sortable from 'sortablejs' 120 import Sortable from 'sortablejs'
121 // import waves from '@/directive/waves' // waves directive
122 // import { parseTime } from "@/utils";
123 // import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
115 124
116 export default { 125 export default {
117 name: 'DragTable', 126 name: 'DragTable',
118 filters: { 127 filters: {
119 statusFilter(status) { 128 statusFilter(status) {
120 const statusMap = { 129 const statusMap = {
121 published: 'success', 130 published: 'success',
122 draft: 'info', 131 draft: 'info',
123 deleted: 'danger' 132 deleted: 'danger'
124 } 133 }
125 return statusMap[status] 134 return statusMap[status]
126 } 135 }
127 }, 136 },
128 data() { 137 data() {
129 return { 138 return {
130 list: null, 139 list: null,
131 total: null, 140 total: null,
132 listLoading: true, 141 listLoading: true,
133 listQuery: { 142 listQuery: {
134 page: 1, 143 page: 1,
135 limit: 10 144 limit: 10
136 }, 145 },
137 sortable: null, 146 sortable: null,
138 oldList: [], 147 oldList: [],
139 newList: [] 148 newList: []
140 } 149 }
141 }, 150 },
142 created() { 151 created() {
143 this.getList() 152 this.getList()
144 }, 153 },
145 methods: { 154 methods: {
146 async getList() { 155 async getList() {
156 console.log('test======>', 'prod ..... -----getList')
147 this.listLoading = true 157 this.listLoading = true
148 const { data } = await fetchList(this.listQuery) 158 const { data } = await fetchList(this.listQuery)
159 console.log('data===========getList=======', data)
149 this.list = data.items 160 this.list = data.items
150 this.total = data.total 161 this.total = data.total
151 this.listLoading = false 162 // this.listLoading = false;
152 this.oldList = this.list.map(v => v.id) 163 // this.oldList = this.list.map(v => v.id);
153 this.newList = this.oldList.slice() 164 // this.newList = this.oldList.slice();
154 this.$nextTick(() => { 165 // this.$nextTick(() => {
155 this.setSort() 166 // this.setSort();
156 }) 167 // });
157 }, 168 },
158 setSort() { 169 setSort() {
159 const el = this.$refs.dragTable.$el.querySelectorAll( 170 const el = this.$refs.dragTable.$el.querySelectorAll(
160 '.el-table__body-wrapper > table > tbody' 171 '.el-table__body-wrapper > table > tbody'
161 )[0] 172 )[0]
162 this.sortable = Sortable.create(el, { 173 this.sortable = Sortable.create(el, {
163 ghostClass: 'sortable-ghost', // Class name for the drop placeholder, 174 ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
164 setData: function(dataTransfer) { 175 setData: function(dataTransfer) {
165 // to avoid Firefox bug 176 // to avoid Firefox bug
166 // Detail see : https://github.com/RubaXa/Sortable/issues/1012 177 // Detail see : https://github.com/RubaXa/Sortable/issues/1012
167 dataTransfer.setData('Text', '') 178 dataTransfer.setData('Text', '')
168 }, 179 },
169 onEnd: evt => { 180 onEnd: evt => {
170 const targetRow = this.list.splice(evt.oldIndex, 1)[0] 181 const targetRow = this.list.splice(evt.oldIndex, 1)[0]
171 this.list.splice(evt.newIndex, 0, targetRow) 182 this.list.splice(evt.newIndex, 0, targetRow)
172 183
173 // for show the changes, you can delete in you code 184 // for show the changes, you can delete in you code
174 const tempIndex = this.newList.splice(evt.oldIndex, 1)[0] 185 const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
175 this.newList.splice(evt.newIndex, 0, tempIndex) 186 this.newList.splice(evt.newIndex, 0, tempIndex)
176 } 187 }
177 }) 188 })
178 } 189 }
179 } 190 }
180 } 191 }
181 </script> 192 </script>
182 193
183 <style> 194 <style>
184 .sortable-ghost { 195 .sortable-ghost {
185 opacity: 0.8; 196 opacity: 0.8;
186 color: #fff !important; 197 color: #fff !important;
187 background: #42b983 !important; 198 background: #42b983 !important;
188 } 199 }
189 </style> 200 </style>
190 201
191 <style scoped> 202 <style scoped>
192 .icon-star { 203 .icon-star {
193 margin-right: 2px; 204 margin-right: 2px;
194 } 205 }
195 .drag-handler { 206 .drag-handler {
196 width: 20px; 207 width: 20px;
197 height: 20px; 208 height: 20px;
198 cursor: pointer; 209 cursor: pointer;
199 } 210 }
200 .show-d { 211 .show-d {
201 margin-top: 15px; 212 margin-top: 15px;
202 } 213 }
203 </style> 214 </style>
204 215