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/components/Tinymce/components/editorImage.vue b/src/components/Tinymce/components/editorImage.vue index eee2c5f2..dd46916a 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 00000000..5c77d97a --- /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 00000000..c45f4591 --- /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 f84f0de2..a7b1fa00 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 6ef13eec..2b081331 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 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 ce43eec2..72eb22db 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' }} ] }, @@ -156,50 +156,49 @@ export const asyncRouterMap = [ ] }, + { + path: '/tab', + component: Layout, + 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: 'Table', + icon: 'table' + }, + children: [ + { 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: '/example', component: Layout, - redirect: '/example/table/complex-table', + redirect: '/example/list', name: 'example', meta: { title: 'example', icon: 'example' }, 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: '/form', - component: Layout, - redirect: 'noredirect', - name: 'form', - meta: { - title: 'form', - icon: 'form' - }, - 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 285cd19a..431fda2d 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 ce9dc03d..8528db44 100644 --- a/src/views/form/components/ArticleDetail.vue +++ b/src/views/example/components/ArticleDetail.vue @@ -3,100 +3,51 @@+ 创建和编辑页面是不能被keep-alive 缓存的,因为keep-alive 的include 目前不支持根据路由来缓存,所以目前都是基于component name 来缓存的,如果你想要实现缓存的效果,可以使用localstorage 等游览器缓存方案。或者不要使用keep-alive + 的include,直接缓存所有页面。详情见 + 文档 +
+ + 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 00000000..7dccafa6 --- /dev/null +++ b/src/views/example/list.vue @@ -0,0 +1,121 @@ + +