From 5547b3b8d967b4959d3bd06644372a1910788d05 Mon Sep 17 00:00:00 2001 From: guqing <1484563614@qq.com> Date: Thu, 13 Jun 2019 14:34:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=97=A5=E5=BF=97=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Upload/UploadPhoto.vue | 163 ++++++++----- src/views/dashboard/Dashboard.vue | 103 +++++---- src/views/sheet/internal/JournalList.vue | 282 +++++++++++------------ 3 files changed, 301 insertions(+), 247 deletions(-) diff --git a/src/components/Upload/UploadPhoto.vue b/src/components/Upload/UploadPhoto.vue index 82141b45..86bec4ed 100644 --- a/src/components/Upload/UploadPhoto.vue +++ b/src/components/Upload/UploadPhoto.vue @@ -2,19 +2,19 @@
-
- +
+
Upload
- example + example
@@ -22,79 +22,118 @@ import axios from 'axios' import attachmentApi from '@/api/attachment' export default { - data () { + props: { + photoList: { + type: Array, + required: false, + default: function() { + return [] + } + }, + plusPhotoVisible: { + type: Boolean, + required: false, + default: true + } + }, + data() { return { - name: 'file', + name: 'file', previewVisible: false, previewImage: '', fileList: [], - uploadHandler: attachmentApi.upload + uploadHandler: attachmentApi.upload + } + }, + created() { + // 在生命周期开始时调用一次赋值解决watch没有监控到数据的问题 + this.handlerEditPreviewPhoto(this.photoList) + }, + watch: { + photoList(newValue, oldValue) { + this.handlerEditPreviewPhoto(newValue) } }, methods: { - handleCancel () { + handlerEditPreviewPhoto(data) { + // 先清空 + this.fileList = [] + // 编辑日志时回显图片 + if (data !== null && data !== undefined) { + for (var i = 0; i < data.length; i++) { + // 构造合适的对象 + this.fileList.push({ + uid: data[i].id, + name: data[i].name, + status: 'done', + url: data[i].thumbnail + }) + } + } + }, + handleCancel() { this.previewVisible = false }, - handlePreview (file) { + handlePreview(file) { this.previewImage = file.url || file.thumbUrl this.previewVisible = true }, - handleChange ({ fileList }) { + handleChange({ fileList }) { this.fileList = fileList }, - handleUpload(option) { - this.$log.debug('Uploading option', option) - const CancelToken = axios.CancelToken - const source = CancelToken.source() - - const data = new FormData() - data.append(this.name, option.file) - - this.uploadHandler( - data, - progressEvent => { - if (progressEvent.total > 0) { - progressEvent.percent = (progressEvent.loaded / progressEvent.total) * 100 - } - this.$log.debug('Uploading percent: ', progressEvent.percent) - option.onProgress(progressEvent) - }, - source.token, - option.file - ) - .then(response => { - this.$log.debug('Uploaded successfully', response) - option.onSuccess(response, option.file) - this.$emit('success', response, option.file) - }) - .catch(error => { - this.$log.debug('Failed to upload file', error) - option.onError(error, error.response) - this.$emit('failure', error, option.file) - }) - return { - abort: () => { - this.$log.debug('Upload operation aborted by the user') - source.cancel('Upload operation canceled by the user.') - } - } - } - }, + handleUpload(option) { + this.$log.debug('Uploading option', option) + const CancelToken = axios.CancelToken + const source = CancelToken.source() + + const data = new FormData() + data.append(this.name, option.file) + + this.uploadHandler( + data, + progressEvent => { + if (progressEvent.total > 0) { + progressEvent.percent = (progressEvent.loaded / progressEvent.total) * 100 + } + this.$log.debug('Uploading percent: ', progressEvent.percent) + option.onProgress(progressEvent) + }, + source.token, + option.file + ) + .then(response => { + this.$log.debug('Uploaded successfully', response) + option.onSuccess(response, option.file) + this.$emit('success', response, option.file) + }) + .catch(error => { + this.$log.debug('Failed to upload file', error) + option.onError(error, error.response) + this.$emit('failure', error, option.file) + }) + return { + abort: () => { + this.$log.debug('Upload operation aborted by the user') + source.cancel('Upload operation canceled by the user.') + } + } + } + } } \ No newline at end of file +.ant-upload-select-picture-card .ant-upload-text { + margin-top: 8px; + color: #666; +} +.ant-upload-list-picture-card { + /* 将浮动恢复为默认值,避免出现纵向换行情况 */ + float: initial; +} + diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue index add75bf9..2c31458d 100644 --- a/src/views/dashboard/Dashboard.vue +++ b/src/views/dashboard/Dashboard.vue @@ -199,27 +199,27 @@ v-model="journal.content" placeholder="写点什么吧..." /> - - - - - - - - - - 保存 - 更多选项 + + + + + + + + + 保存 + 更多选项 @@ -332,7 +332,7 @@ import postApi from '@/api/post' import logApi from '@/api/log' import adminApi from '@/api/admin' import journalApi from '@/api/journal' -import countTo from 'vue-count-to' +import countTo from 'vue-count-to' import UploadPhoto from '../../components/Upload/UploadPhoto.vue' export default { name: 'Dashboard', @@ -341,12 +341,13 @@ export default { PageView, AnalysisCard, RecentCommentTab, - countTo, - UploadPhoto + countTo, + UploadPhoto }, data() { - return { - showMoreOptions: false, + return { + photoList: [], + showMoreOptions: false, startVal: 0, logType: logApi.logType, activityLoading: true, @@ -357,7 +358,11 @@ export default { postData: [], logData: [], countsData: {}, - journal: {}, + journal: { + content: '', + photos: [] + }, + journalPhotos: [], // 日志图片集合最多九张 logs: [], options: [], keys: ['blog_url'], @@ -415,7 +420,19 @@ export default { } next() }, - methods: { + methods: { + handlerPhotoUploadSuccess(response, file) { + var callData = response.data.data + var photo = { + name: callData.name, + url: callData.path, + thumbnail: callData.thumbPath, + suffix: callData.suffix, + width: callData.width, + height: callData.height + } + this.journalPhotos.push(photo) + }, loadOptions() { optionApi.listAll(this.keys).then(response => { this.options = response.data.data @@ -444,15 +461,20 @@ export default { this.$router.push({ name: 'PostEdit', query: { postId: post.id } }) }, handleCreateJournalClick() { + // 给属性填充数据 + this.journal.photos = this.journalPhotos + journalApi.create(this.journal).then(response => { this.$message.success('发表成功！') this.journal = {} + this.photoList = [] + this.showMoreOptions = false }) - }, - handleUploadPhotoWallClick(){ - // 是否显示上传照片墙组件 - this.showMoreOptions = !this.showMoreOptions - }, + }, + handleUploadPhotoWallClick() { + // 是否显示上传照片墙组件 + this.showMoreOptions = !this.showMoreOptions + }, handleShowLogDrawer() { this.logDrawerVisiable = true this.loadLogs() @@ -479,12 +501,11 @@ export default { } } } - - - diff --git a/src/views/sheet/internal/JournalList.vue b/src/views/sheet/internal/JournalList.vue index 717df78e..fb89bac0 100644 --- a/src/views/sheet/internal/JournalList.vue +++ b/src/views/sheet/internal/JournalList.vue @@ -6,18 +6,12 @@
- + - + - + 公开 @@ -25,32 +19,19 @@ - + - 查询 - 重置 + 查询 + 重置
- 写日志 + 写日志
- +
- + + + + example + + + + + + + {{ item.createTime | moment }} - +
@@ -132,39 +114,36 @@ + + 发布 + - - - - - - - 更多选项 - + + + + + + + + 更多选项 + + + @@ -175,21 +154,11 @@ v-model="selectCommentVisible" > - + @@ -203,23 +172,16 @@ destroyOnClose @close="()=>this.commentVisiable = false" > - + - +

{{ journal.content }}

{{ journal.createTime | moment }} - + { @@ -360,10 +347,10 @@ export default { this.handleCommentShow(this.journal) }) }, - createOrUpdateJournal() { - // 给属性填充数据 - this.journal.photos = this.journalPhotos - + createOrUpdateJournal() { + // 给属性填充数据 + this.journal.photos = this.journalPhotos + if (this.journal.id) { journalApi.update(this.journal.id, this.journal).then(response => { this.$message.success('更新成功！') @@ -373,6 +360,7 @@ export default { journalApi.create(this.journal).then(response => { this.$message.success('发表成功！') this.loadJournals() + this.photoList = [] }) } this.visible = false @@ -389,11 +377,17 @@ export default { } } } - -