From de8a38d6ec1242e3e309267505ef415fa5ab98a5 Mon Sep 17 00:00:00 2001 From: Pan Date: Tue, 8 May 2018 17:09:27 +0800 Subject: [PATCH] perf form demo --- src/api/article.js | 5 +- src/mock/article.js | 34 ++--- src/router/index.js | 4 +- .../example/components/ArticleDetail.vue | 139 ++++++++---------- src/views/example/list.vue | 58 ++++---- src/views/table/complexTable.vue | 2 +- src/views/table/dragTable.vue | 2 +- src/views/table/inlineEditTable.vue | 2 +- 8 files changed, 114 insertions(+), 132 deletions(-) diff --git a/src/api/article.js b/src/api/article.js index 9eacd90d..f54b8af6 100644 --- a/src/api/article.js +++ b/src/api/article.js @@ -8,10 +8,11 @@ export function fetchList(query) { }) } -export function fetchArticle() { +export function fetchArticle(id) { return request({ url: '/article/detail', - method: 'get' + method: 'get', + params: { id } }) } diff --git a/src/mock/article.js b/src/mock/article.js index 2f5b4583..45923ddd 100644 --- a/src/mock/article.js +++ b/src/mock/article.js @@ -4,6 +4,9 @@ import { param2Obj } from '@/utils' const List = [] const count = 100 +const baseContent = '

我是测试数据我是测试数据

' +const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3' + for (let i = 0; i < count; i++) { List.push(Mock.mock({ id: '@increment', @@ -11,12 +14,17 @@ for (let i = 0; i < count; i++) { author: '@first', reviewer: '@first', title: '@title(5, 10)', + content_short: '我是测试数据', + content: baseContent, forecast: '@float(0, 100, 2, 2)', importance: '@integer(1, 3)', 'type|1': ['CN', 'US', 'JP', 'EU'], 'status|1': ['published', 'draft', 'deleted'], display_time: '@datetime', - pageviews: '@integer(300, 5000)' + comment_disabled: true, + pageviews: '@integer(300, 5000)', + image_uri, + platforms: ['a-platform'] })) } @@ -45,22 +53,14 @@ export default { getPv: () => ({ pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }] }), - getArticle: () => ({ - id: 120000000001, - author: { key: 'mockPan' }, - source_name: '原创作者', - category_item: [{ key: 'global', name: '全球' }], - comment_disabled: true, - content: '

我是测试数据我是测试数据

"', - content_short: '我是测试数据', - display_time: +new Date(), - image_uri: 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3', - platforms: ['a-platform'], - source_uri: 'https://github.com/PanJiaChen/vue-element-admin', - status: 'published', - tags: [], - title: 'vue-element-admin' - }), + getArticle: (config) => { + const { id } = param2Obj(config.url) + for (const article of List) { + if (article.id === +id) { + return article + } + } + }, createArticle: () => ({ data: 'success' }), diff --git a/src/router/index.js b/src/router/index.js index a04c0fb1..814fe6d8 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -166,7 +166,7 @@ export const asyncRouterMap = [ { path: '/example', component: Layout, - redirect: '/example/table/complex-table', + redirect: '/example/list', name: 'example', meta: { title: 'example', @@ -174,7 +174,7 @@ export const asyncRouterMap = [ }, children: [ { path: 'create', component: _import('example/create'), name: 'createArticle', meta: { title: 'createArticle', icon: 'edit' }}, - { path: 'edit/:id(\\d+)', component: _import('example/edit'), name: 'editArticle', meta: { title: 'editArticle' }, hidden: true }, + { path: 'edit/:id(\\d+)', component: _import('example/edit'), name: 'editArticle', meta: { title: 'editArticle', noCache: true }, hidden: true }, { path: 'list', component: _import('example/list'), name: 'articleList', meta: { title: 'articleList', icon: 'list' }} ] }, diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue index ce9dc03d..fc19eb6c 100644 --- a/src/views/example/components/ArticleDetail.vue +++ b/src/views/example/components/ArticleDetail.vue @@ -3,62 +3,54 @@ - - + + 平台 + + + + + + {{item.name}} + + + + + + + 外链 + + + + + + + + + + + + 发布 + + 草稿
@@ -68,27 +60,25 @@ 标题 - app可能会显示不全
- - 无结果 - + + + + - - - - - - + + + + @@ -139,11 +129,11 @@ const defaultForm = { content_short: '', // 文章摘要 source_uri: '', // 文章外链 image_uri: '', // 文章图片 - source_name: '', // 文章外部作者 display_time: undefined, // 前台展示时间 id: undefined, platforms: ['a-platform'], - comment_disabled: false + comment_disabled: false, + importance: 0 } export default { @@ -184,9 +174,8 @@ export default { } return { postForm: Object.assign({}, defaultForm), - fetchSuccess: true, loading: false, - userLIstOptions: [], + userListOptions: [], platformsOptions: [ { key: 'a-platform', name: 'a-platform' }, { key: 'b-platform', name: 'b-platform' }, @@ -207,17 +196,20 @@ export default { }, created() { if (this.isEdit) { - this.fetchData() + const id = this.$route.params && this.$route.params.id + this.fetchData(id) } else { this.postForm = Object.assign({}, defaultForm) } }, methods: { - fetchData() { - fetchArticle().then(response => { + fetchData(id) { + fetchArticle(id).then(response => { this.postForm = response.data + // Just for test + this.postForm.title += ` Article Id:${this.postForm.id}` + this.postForm.content_short += ` Article Id:${this.postForm.id}` }).catch(err => { - this.fetchSuccess = false console.log(err) }) }, @@ -261,9 +253,7 @@ export default { userSearch(query).then(response => { if (!response.data.items) return console.log(response) - this.userLIstOptions = response.data.items.map(v => ({ - key: v.name - })) + this.userListOptions = response.data.items.map(v => v.name) }) } } @@ -311,4 +301,3 @@ export default { } } - diff --git a/src/views/example/list.vue b/src/views/example/list.vue index 3d2ad00f..7dccafa6 100644 --- a/src/views/example/list.vue +++ b/src/views/example/list.vue @@ -1,8 +1,7 @@