From ae98ef7351a1f8642ea31ba771074c5d35e9da22 Mon Sep 17 00:00:00 2001 From: ruibaby Date: Sun, 8 Sep 2019 21:31:41 +0800 Subject: [PATCH] Refactor upload component. --- package.json | 3 + src/api/backup.js | 2 +- src/api/post.js | 7 + src/api/sheet.js | 7 + src/components/Upload/FilePondUpload.vue | 132 ++++++++++++++++++ src/components/Upload/UpdateTheme.vue | 110 --------------- src/components/index.js | 4 +- src/store/modules/option.js | 7 +- src/views/attachment/AttachmentList.vue | 19 +-- .../components/AttachmentDrawer.vue | 21 ++- .../components/AttachmentSelectDrawer.vue | 19 +-- src/views/comment/components/CommentTab.vue | 1 + src/views/interface/ThemeList.vue | 66 ++++----- src/views/post/PostEdit.vue | 8 +- src/views/post/PostList.vue | 17 ++- src/views/sheet/SheetEdit.vue | 8 +- src/views/sheet/SheetList.vue | 15 +- src/views/system/OptionForm.vue | 24 ++++ src/views/system/ToolList.vue | 21 ++- 19 files changed, 275 insertions(+), 216 deletions(-) create mode 100644 src/components/Upload/FilePondUpload.vue delete mode 100644 src/components/Upload/UpdateTheme.vue diff --git a/package.json b/package.json index 57dfbe1b..719d12c6 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "ant-design-vue": "^1.3.16", "axios": "^0.18.0", "enquire.js": "^2.1.6", + "filepond": "^4.6.1", + "filepond-plugin-image-preview": "^4.4.0", "halo-editor": "^2.7.6", "marked": "^0.6.3", "moment": "^2.24.0", @@ -22,6 +24,7 @@ "vue-clipboard2": "^0.3.0", "vue-codemirror-lite": "^1.0.4", "vue-count-to": "^1.0.13", + "vue-filepond": "^5.1.3", "vue-ls": "^3.2.1", "vue-router": "^3.1.2", "vue-video-player": "^5.0.2", diff --git a/src/api/backup.js b/src/api/backup.js index bd3e9c90..df891b40 100644 --- a/src/api/backup.js +++ b/src/api/backup.js @@ -6,7 +6,7 @@ const backupApi = {} backupApi.importMarkdown = (formData, uploadProgress, cancelToken) => { return service({ - url: `${baseUrl}/import/markdowns`, + url: `${baseUrl}/import/markdown`, timeout: 8640000, // 24 hours data: formData, // form data onUploadProgress: uploadProgress, diff --git a/src/api/post.js b/src/api/post.js index 5709a6a0..88580d9d 100644 --- a/src/api/post.js +++ b/src/api/post.js @@ -66,6 +66,13 @@ postApi.delete = postId => { }) } +postApi.preview = postId => { + return service({ + url: `${baseUrl}/preview/${postId}`, + method: 'get' + }) +} + postApi.postStatus = { PUBLISHED: { color: 'green', diff --git a/src/api/sheet.js b/src/api/sheet.js index 4f815e2e..e106e71b 100644 --- a/src/api/sheet.js +++ b/src/api/sheet.js @@ -61,6 +61,13 @@ sheetApi.delete = sheetId => { }) } +sheetApi.preview = sheetId => { + return service({ + url: `${baseUrl}/preview/${sheetId}`, + method: 'get' + }) +} + sheetApi.sheetStatus = { PUBLISHED: { color: 'green', diff --git a/src/components/Upload/FilePondUpload.vue b/src/components/Upload/FilePondUpload.vue new file mode 100644 index 00000000..8072cae4 --- /dev/null +++ b/src/components/Upload/FilePondUpload.vue @@ -0,0 +1,132 @@ + + + diff --git a/src/components/Upload/UpdateTheme.vue b/src/components/Upload/UpdateTheme.vue deleted file mode 100644 index fe0b348f..00000000 --- a/src/components/Upload/UpdateTheme.vue +++ /dev/null @@ -1,110 +0,0 @@ - - - - - diff --git a/src/components/index.js b/src/components/index.js index 8b6eb14c..8cecd912 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,13 +4,13 @@ import Vue from 'vue' import Ellipsis from '@/components/Ellipsis' import FooterToolbar from '@/components/FooterToolbar' import Upload from '@/components/Upload/Upload' -import UpdateTheme from '@/components/Upload/UpdateTheme' +import FilePondUpload from '@/components/Upload/FilePondUpload' const _components = { Ellipsis, FooterToolbar, Upload, - UpdateTheme + FilePondUpload } const components = {} diff --git a/src/store/modules/option.js b/src/store/modules/option.js index d27dba80..1e84bc9e 100644 --- a/src/store/modules/option.js +++ b/src/store/modules/option.js @@ -3,7 +3,12 @@ import { OPTIONS } from '@/store/mutation-types' import optionApi from '@/api/option' -const keys = ['blog_url'] +const keys = [ + 'blog_url', + 'attachment_upload_image_preview_enable', + 'attachment_upload_max_parallel_uploads', + 'attachment_upload_max_files' +] const option = { state: { options: [] diff --git a/src/views/attachment/AttachmentList.vue b/src/views/attachment/AttachmentList.vue index 4bdc4ecb..efc763ec 100644 --- a/src/views/attachment/AttachmentList.vue +++ b/src/views/attachment/AttachmentList.vue @@ -136,18 +136,12 @@ v-model="uploadVisible" :footer="null" :afterClose="onUploadClose" + destroyOnClose > - -

- -

-

点击选择文件或将文件拖拽到此处

-

支持单个或批量上传

- + > - +
- -

- -

-

点击选择文件或将文件拖拽到此处

-

支持单个或批量上传

- +
@@ -128,7 +122,7 @@ export default { }, attachments: [], selectedAttachment: {}, - attachmentUploadHandler: attachmentApi.upload + uploadHandler: attachmentApi.upload } }, computed: { @@ -183,6 +177,7 @@ export default { this.loadAttachments() }, onUploadClose() { + this.$refs.upload.handleClearFileList() this.loadSkeleton() this.loadAttachments() }, diff --git a/src/views/attachment/components/AttachmentSelectDrawer.vue b/src/views/attachment/components/AttachmentSelectDrawer.vue index d509bb3d..1f2895d5 100644 --- a/src/views/attachment/components/AttachmentSelectDrawer.vue +++ b/src/views/attachment/components/AttachmentSelectDrawer.vue @@ -67,18 +67,12 @@ v-model="uploadVisible" :footer="null" :afterClose="onUploadClose" + destroyOnClose > - -

- -

-

点击选择文件或将文件拖拽到此处

-

支持单个或批量上传

- + @@ -126,7 +120,7 @@ export default { sort: '' }, attachments: [], - attachmentUploadHandler: attachmentApi.upload + uploadHandler: attachmentApi.upload } }, created() { @@ -174,6 +168,7 @@ export default { this.loadAttachments() }, onUploadClose() { + this.$refs.upload.handleClearFileList() this.loadSkeleton() this.loadAttachments() }, diff --git a/src/views/comment/components/CommentTab.vue b/src/views/comment/components/CommentTab.vue index d911ebc6..1dd697b2 100644 --- a/src/views/comment/components/CommentTab.vue +++ b/src/views/comment/components/CommentTab.vue @@ -235,6 +235,7 @@ :title="'回复给：'+selectComment.author" v-model="replyCommentVisible" @close="onReplyClose" + destroyOnClose > @@ -313,26 +309,6 @@ export default { this.loadThemes() }) }, - onThemeSettingsClose() { - this.themeSettingVisible = false - this.selectedTheme = {} - }, - handleUploadChange(info) { - const status = info.file.status - if (status === 'done') { - this.$message.success(`${info.file.name} 主题上传成功！`) - } else if (status === 'error') { - this.$message.error(`${info.file.name} 主题上传失败！`) - } - }, - handleNewThemeUploadChange(info) { - const status = info.file.status - if (status === 'done') { - this.$message.success(`${info.file.name} 主题更新成功！`) - } else if (status === 'error') { - this.$message.error(`${info.file.name} 主题更新失败！`) - } - }, handleUploadSuccess() { if (this.uploadThemeVisible) { this.uploadThemeVisible = false @@ -375,13 +351,25 @@ export default { }) }, handleShowUpdateNewThemeModal(item) { - console.log(item) this.prepareUpdateTheme = item this.uploadNewThemeVisible = true }, handleShowThemeSetting(theme) { this.selectedTheme = theme this.themeSettingVisible = true + }, + onThemeUploadClose() { + if (this.uploadThemeVisible) { + this.$refs.upload.handleClearFileList() + } + if (this.uploadNewThemeVisible) { + this.$refs.updateByupload.handleClearFileList() + } + this.loadThemes() + }, + onThemeSettingsClose() { + this.themeSettingVisible = false + this.selectedTheme = {} } } } diff --git a/src/views/post/PostEdit.vue b/src/views/post/PostEdit.vue index f8b21e97..4a3add21 100644 --- a/src/views/post/PostEdit.vue +++ b/src/views/post/PostEdit.vue @@ -187,14 +187,18 @@ export default { // Update the post postApi.update(this.postToStage.id, this.postToStage, false).then(response => { this.$log.debug('Updated post', response.data.data) - window.open(`${this.options.blog_url}/api/admin/posts/preview/${this.postToStage.id}`, '_blank') + postApi.preview(this.postToStage.id).then(response => { + window.open(response.data, '_blank') + }) }) } else { // Create the post postApi.create(this.postToStage, false).then(response => { this.$log.debug('Created post', response.data.data) this.postToStage = response.data.data - window.open(`${this.options.blog_url}/api/admin/posts/preview/${this.postToStage.id}`, '_blank') + postApi.preview(this.postToStage.id).then(response => { + window.open(response.data, '_blank') + }) }) } }, diff --git a/src/views/post/PostList.vue b/src/views/post/PostList.vue index 9ef81103..997f2455 100644 --- a/src/views/post/PostList.vue +++ b/src/views/post/PostList.vue @@ -143,10 +143,10 @@ twoToneColor="red" /> {{ text }} {{ text }} {{ text }} {{ text }} @@ -564,6 +564,11 @@ export default { this.postSettingVisible = true }) }, + handlePreview(postId) { + postApi.preview(postId).then(response => { + window.open(response.data, '_blank') + }) + }, // 关闭文章设置抽屉 onPostSettingsClose() { this.postSettingVisible = false diff --git a/src/views/sheet/SheetEdit.vue b/src/views/sheet/SheetEdit.vue index c5c24e42..3bad874d 100644 --- a/src/views/sheet/SheetEdit.vue +++ b/src/views/sheet/SheetEdit.vue @@ -174,13 +174,17 @@ export default { if (this.sheetToStage.id) { sheetApi.update(this.sheetToStage.id, this.sheetToStage, false).then(response => { this.$log.debug('Updated sheet', response.data.data) - window.open(`${this.options.blog_url}/api/admin/sheets/preview/${this.sheetToStage.id}`, '_blank') + sheetApi.preview(this.sheetToStage.id).then(response => { + window.open(response.data, '_blank') + }) }) } else { sheetApi.create(this.sheetToStage, false).then(response => { this.$log.debug('Created sheet', response.data.data) this.sheetToStage = response.data.data - window.open(`${this.options.blog_url}/api/admin/sheets/preview/${this.sheetToStage.id}`, '_blank') + sheetApi.preview(this.sheetToStage.id).then(response => { + window.open(response.data, '_blank') + }) }) } }, diff --git a/src/views/sheet/SheetList.vue b/src/views/sheet/SheetList.vue index dc116a3c..19a49ed1 100644 --- a/src/views/sheet/SheetList.vue +++ b/src/views/sheet/SheetList.vue @@ -83,10 +83,10 @@ style="max-width: 150px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" > {{ text }} {{ text }} {{ text }} @@ -390,6 +390,11 @@ export default { this.sheetSettingVisible = true }) }, + handlePreview(sheetId) { + sheetApi.preview(sheetId).then(response => { + window.open(response.data, '_blank') + }) + }, onSheetSettingsClose() { this.sheetSettingVisible = false this.selectedSheet = {} diff --git a/src/views/system/OptionForm.vue b/src/views/system/OptionForm.vue index 72a52797..79f7159c 100644 --- a/src/views/system/OptionForm.vue +++ b/src/views/system/OptionForm.vue @@ -251,6 +251,30 @@ 附件设置 + + + + + + + + + - -

- -

-

拖拽或点击选择 Markdown 文件到此处

-

支持多个文件同时上传

- + > @@ -69,6 +65,9 @@ export default { } else if (status === 'error') { this.$message.error(`${info.file.name} 导入失败！`) } + }, + onUploadClose() { + this.$refs.upload.handleClearFileList() } } }