From 4fc25241fe1c89aadc35e58fef22f12137303377 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= Date: Wed, 30 May 2018 15:25:08 +0800 Subject: [PATCH] refactor example demo (#713) * refactor: Adjust the example directory structure * perf form demo * refine editor-slide-upload css * refine demo --- src/api/article.js | 5 +- .../Tinymce/components/editorImage.vue | 7 +- src/icons/svg/edit.svg | 1 + src/icons/svg/list.svg | 1 + src/lang/en.js | 5 +- src/lang/zh.js | 5 +- src/mock/article.js | 34 ++-- src/router/index.js | 63 +++--- src/utils/index.js | 4 + .../components/ArticleDetail.vue | 189 ++++++------------ .../example/components/Dropdown/Comment.vue | 31 +++ .../example/components/Dropdown/Platform.vue | 40 ++++ .../example/components/Dropdown/SourceUrl.vue | 31 +++ .../example/components/Dropdown/index.js | 3 + src/views/example/components/Warning.vue | 9 + src/views/{form => example}/create.vue | 0 src/views/{form => example}/edit.vue | 0 src/views/example/list.vue | 121 +++++++++++ src/views/example/table/index.vue | 18 -- src/views/layout/components/AppMain.vue | 8 +- src/views/layout/components/TagsView.vue | 2 +- .../{example => }/tab/components/tabPane.vue | 0 src/views/{example => }/tab/index.vue | 2 + .../{example => }/table/complexTable.vue | 2 +- src/views/{example => }/table/dragTable.vue | 2 +- .../table/dynamicTable/fixedThead.vue | 0 .../table/dynamicTable/index.vue | 0 .../table/dynamicTable/unfixedThead.vue | 0 .../{example => }/table/inlineEditTable.vue | 2 +- .../table/treeTable/customEval.js | 0 .../table/treeTable/customTreeTable.vue | 0 .../table/treeTable/treeTable.vue | 0 32 files changed, 376 insertions(+), 209 deletions(-) create mode 100644 src/icons/svg/edit.svg create mode 100644 src/icons/svg/list.svg rename src/views/{form => example}/components/ArticleDetail.vue (52%) create mode 100644 src/views/example/components/Dropdown/Comment.vue create mode 100644 src/views/example/components/Dropdown/Platform.vue create mode 100644 src/views/example/components/Dropdown/SourceUrl.vue create mode 100644 src/views/example/components/Dropdown/index.js create mode 100644 src/views/example/components/Warning.vue rename src/views/{form => example}/create.vue (100%) rename src/views/{form => example}/edit.vue (100%) create mode 100644 src/views/example/list.vue delete mode 100644 src/views/example/table/index.vue rename src/views/{example => }/tab/components/tabPane.vue (100%) rename src/views/{example => }/tab/index.vue (85%) rename src/views/{example => }/table/complexTable.vue (99%) rename src/views/{example => }/table/dragTable.vue (98%) rename src/views/{example => }/table/dynamicTable/fixedThead.vue (100%) rename src/views/{example => }/table/dynamicTable/index.vue (100%) rename src/views/{example => }/table/dynamicTable/unfixedThead.vue (100%) rename src/views/{example => }/table/inlineEditTable.vue (98%) rename src/views/{example => }/table/treeTable/customEval.js (100%) rename src/views/{example => }/table/treeTable/customTreeTable.vue (100%) rename src/views/{example => }/table/treeTable/treeTable.vue (100%) diff --git a/src/api/article.js b/src/api/article.js index 9eacd90..f54b8af 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/components/Tinymce/components/editorImage.vue b/src/components/Tinymce/components/editorImage.vue index eee2c5f..dd46916 100644 --- a/src/components/Tinymce/components/editorImage.vue +++ b/src/components/Tinymce/components/editorImage.vue @@ -87,9 +87,10 @@ export default { diff --git a/src/icons/svg/edit.svg b/src/icons/svg/edit.svg new file mode 100644 index 0000000..5c77d97 --- /dev/null +++ b/src/icons/svg/edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/list.svg b/src/icons/svg/list.svg new file mode 100644 index 0000000..c45f459 --- /dev/null +++ b/src/icons/svg/list.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lang/en.js b/src/lang/en.js index f84f0de..a7b1fa0 100644 --- a/src/lang/en.js +++ b/src/lang/en.js @@ -37,8 +37,9 @@ export default { customTreeTable: 'Custom TreeTable', tab: 'Tab', form: 'Form', - createForm: 'Create Form', - editForm: 'Edit Form', + createArticle: 'Create Article', + editArticle: 'Edit Article', + articleList: 'Article List', errorPages: 'Error Pages', page401: '401', page404: '404', diff --git a/src/lang/zh.js b/src/lang/zh.js index 6ef13ee..2b08133 100644 --- a/src/lang/zh.js +++ b/src/lang/zh.js @@ -37,8 +37,9 @@ export default { customTreeTable: '自定义树表', tab: 'Tab', form: '表单', - createForm: '创建表单', - editForm: '编辑表单', + createArticle: '创建文章', + editArticle: '编辑文章', + articleList: '文章列表', errorPages: '错误页面', page401: '401', page404: '404', diff --git a/src/mock/article.js b/src/mock/article.js index 2f5b458..45923dd 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 ce43eec..72eb22d 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -127,7 +127,6 @@ export const asyncRouterMap = [ { path: 'tinymce', component: _import('components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }}, { path: 'markdown', component: _import('components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }}, { path: 'json-editor', component: _import('components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }}, - { path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }}, { path: 'splitpane', component: _import('components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }}, { path: 'avatar-upload', component: _import('components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }}, { path: 'dropzone', component: _import('components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }}, @@ -136,6 +135,7 @@ export const asyncRouterMap = [ { path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }}, { path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }}, { path: 'drag-dialog', component: _import('components-demo/dragDialog'), name: 'dragDialog-demo', meta: { title: 'dragDialog' }}, + { path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }}, { path: 'drag-kanban', component: _import('components-demo/dragKanban'), name: 'dragKanban-demo', meta: { title: 'dragKanban' }} ] }, @@ -157,49 +157,48 @@ export const asyncRouterMap = [ }, { - path: '/example', + path: '/tab', component: Layout, - redirect: '/example/table/complex-table', - name: 'example', + children: [{ + path: 'index', + component: _import('tab/index'), + name: 'tab', + meta: { title: 'tab', icon: 'tab' } + }] + }, + + { + path: '/table', + component: Layout, + redirect: '/table/complex-table', + name: 'table', meta: { - title: 'example', - icon: 'example' + title: 'Table', + icon: 'table' }, children: [ - { - path: '/example/table', - component: _import('example/table/index'), - redirect: '/example/table/complex-table', - name: 'Table', - meta: { - title: 'Table', - icon: 'table' - }, - children: [ - { path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }}, - { path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }}, - { path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }}, - { path: 'tree-table', component: _import('example/table/treeTable/treeTable'), name: 'treeTableDemo', meta: { title: 'treeTable' }}, - { path: 'custom-tree-table', component: _import('example/table/treeTable/customTreeTable'), name: 'customTreeTableDemo', meta: { title: 'customTreeTable' }}, - { path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }} - ] - }, - { path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'tab' }} + { path: 'dynamic-table', component: _import('table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }}, + { path: 'drag-table', component: _import('table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }}, + { path: 'inline-edit-table', component: _import('table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }}, + { path: 'tree-table', component: _import('table/treeTable/treeTable'), name: 'treeTableDemo', meta: { title: 'treeTable' }}, + { path: 'custom-tree-table', component: _import('table/treeTable/customTreeTable'), name: 'customTreeTableDemo', meta: { title: 'customTreeTable' }}, + { path: 'complex-table', component: _import('table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }} ] }, { - path: '/form', + path: '/example', component: Layout, - redirect: 'noredirect', - name: 'form', + redirect: '/example/list', + name: 'example', meta: { - title: 'form', - icon: 'form' + title: 'example', + icon: 'example' }, children: [ - { path: 'create-form', component: _import('form/create'), name: 'createForm', meta: { title: 'createForm', icon: 'table' }}, - { path: 'edit-form', component: _import('form/edit'), name: 'editForm', meta: { title: 'editForm', icon: 'table' }} + { 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', noCache: true }, hidden: true }, + { path: 'list', component: _import('example/list'), name: 'articleList', meta: { title: 'articleList', icon: 'list' }} ] }, diff --git a/src/utils/index.js b/src/utils/index.js index 285cd19..431fda2 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -261,3 +261,7 @@ export function deepClone(source) { }) return targetObj } + +export function uniqueArr(arr) { + return Array.from(new Set(arr)) +} diff --git a/src/views/form/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue similarity index 52% rename from src/views/form/components/ArticleDetail.vue rename to src/views/example/components/ArticleDetail.vue index ce9dc03..8528db4 100644 --- a/src/views/form/components/ArticleDetail.vue +++ b/src/views/example/components/ArticleDetail.vue @@ -3,100 +3,51 @@ - - - + + + + 发布 + + 草稿
+ + + 标题 - app可能会显示不全
- - 无结果 - + + + + - - - - - - - - - + + + + + + +
@@ -109,11 +60,11 @@
- +
- +
@@ -131,6 +82,8 @@ import Sticky from '@/components/Sticky' // 粘性header组件 import { validateURL } from '@/utils/validate' import { fetchArticle } from '@/api/article' import { userSearch } from '@/api/remoteSearch' +import Warning from './Warning' +import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown' const defaultForm = { status: 'draft', @@ -139,16 +92,16 @@ 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 { name: 'articleDetail', - components: { Tinymce, MDinput, Upload, Multiselect, Sticky }, + components: { Tinymce, MDinput, Upload, Multiselect, Sticky, Warning, CommentDropdown, PlatformDropdown, SourceUrlDropdown }, props: { isEdit: { type: Boolean, @@ -184,14 +137,8 @@ export default { } return { postForm: Object.assign({}, defaultForm), - fetchSuccess: true, loading: false, - userLIstOptions: [], - platformsOptions: [ - { key: 'a-platform', name: 'a-platform' }, - { key: 'b-platform', name: 'b-platform' }, - { key: 'c-platform', name: 'c-platform' } - ], + userListOptions: [], rules: { image_uri: [{ validator: validateRequire }], title: [{ validator: validateRequire }], @@ -207,17 +154,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) }) }, @@ -260,10 +210,7 @@ export default { getRemoteUserList(query) { 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) }) } } @@ -271,44 +218,36 @@ export default { - diff --git a/src/views/example/components/Dropdown/Comment.vue b/src/views/example/components/Dropdown/Comment.vue new file mode 100644 index 0000000..da21759 --- /dev/null +++ b/src/views/example/components/Dropdown/Comment.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/views/example/components/Dropdown/Platform.vue b/src/views/example/components/Dropdown/Platform.vue new file mode 100644 index 0000000..a20321d --- /dev/null +++ b/src/views/example/components/Dropdown/Platform.vue @@ -0,0 +1,40 @@ + + + diff --git a/src/views/example/components/Dropdown/SourceUrl.vue b/src/views/example/components/Dropdown/SourceUrl.vue new file mode 100644 index 0000000..f09eb69 --- /dev/null +++ b/src/views/example/components/Dropdown/SourceUrl.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/views/example/components/Dropdown/index.js b/src/views/example/components/Dropdown/index.js new file mode 100644 index 0000000..bc0c171 --- /dev/null +++ b/src/views/example/components/Dropdown/index.js @@ -0,0 +1,3 @@ +export { default as CommentDropdown } from './Comment' +export { default as PlatformDropdown } from './Platform' +export { default as SourceUrlDropdown } from './SourceUrl' diff --git a/src/views/example/components/Warning.vue b/src/views/example/components/Warning.vue new file mode 100644 index 0000000..a0012ed --- /dev/null +++ b/src/views/example/components/Warning.vue @@ -0,0 +1,9 @@ + + diff --git a/src/views/form/create.vue b/src/views/example/create.vue similarity index 100% rename from src/views/form/create.vue rename to src/views/example/create.vue diff --git a/src/views/form/edit.vue b/src/views/example/edit.vue similarity index 100% rename from src/views/form/edit.vue rename to src/views/example/edit.vue diff --git a/src/views/example/list.vue b/src/views/example/list.vue new file mode 100644 index 0000000..7dccafa --- /dev/null +++ b/src/views/example/list.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/src/views/example/table/index.vue b/src/views/example/table/index.vue deleted file mode 100644 index de92c02..0000000 --- a/src/views/example/table/index.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue index 8e10a9e..770ab43 100644 --- a/src/views/layout/components/AppMain.vue +++ b/src/views/layout/components/AppMain.vue @@ -2,7 +2,7 @@
- +
@@ -14,10 +14,10 @@ export default { computed: { cachedViews() { return this.$store.state.tagsView.cachedViews + }, + key() { + return this.$route.fullPath } - // key() { - // return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date() - // } } } diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue index c319933..55467fc 100644 --- a/src/views/layout/components/TagsView.vue +++ b/src/views/layout/components/TagsView.vue @@ -59,7 +59,7 @@ export default { return false }, isActive(route) { - return route.path === this.$route.path || route.name === this.$route.name + return route.path === this.$route.path }, addViewTags() { const route = this.generateRoute() diff --git a/src/views/example/tab/components/tabPane.vue b/src/views/tab/components/tabPane.vue similarity index 100% rename from src/views/example/tab/components/tabPane.vue rename to src/views/tab/components/tabPane.vue diff --git a/src/views/example/tab/index.vue b/src/views/tab/index.vue similarity index 85% rename from src/views/example/tab/index.vue rename to src/views/tab/index.vue index 2a3239a..7f4b9bf 100644 --- a/src/views/example/tab/index.vue +++ b/src/views/tab/index.vue @@ -1,6 +1,8 @@