Attachment detail drawer.

pull/9/head
ruibaby 2019-04-13 19:28:42 +08:00
parent 4f63dc1d57
commit 04ec088db6
3 changed files with 43 additions and 7 deletions

View File

@ -12,4 +12,11 @@ attachmentApi.list = pagination => {
}) })
} }
attachmentApi.get = attachmentId => {
return service({
url: `${baseUrl}/${attachmentId}`,
method: 'get'
})
}
export default attachmentApi export default attachmentApi

View File

@ -11,7 +11,7 @@
:sm="12" :sm="12"
:xs="24" :xs="24"
> >
<a-card :bodyStyle="{ padding: 0 }" hoverable @click="showDetailDrawer"> <a-card :bodyStyle="{ padding: 0 }" hoverable @click="showDetailDrawer(attachment)">
<div class="attach-thumb"> <div class="attach-thumb">
<img :src="attachment.thumbPath"> <img :src="attachment.thumbPath">
</div> </div>
@ -46,12 +46,24 @@
</a-upload-dragger> </a-upload-dragger>
</a-modal> </a-modal>
<a-drawer <a-drawer
v-if="selectAttachment"
title="图片详情" title="图片详情"
:width="drawerWidth" :width="drawerWidth"
closable closable
:visible="drawerVisible" :visible="drawerVisible"
destroyOnClose destroyOnClose
>图片详情</a-drawer> @close="onChildClose"
>
<a-row type="flex" align="middle">
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
<a-skeleton active :loading="detailImgLoading" :paragraph="{rows: 8}">
<div class="attach-detail-img">
<img :src="selectAttachment.path">
</div>
</a-skeleton>
</a-col>
</a-row>
</a-drawer>
</page-view> </page-view>
</template> </template>
@ -68,6 +80,7 @@ export default {
return { return {
uploadVisible: false, uploadVisible: false,
drawerVisible: false, drawerVisible: false,
detailImgLoading: false,
selectAttachment: null, selectAttachment: null,
drawerWidth: '560', drawerWidth: '560',
attachments: [], attachments: [],
@ -97,8 +110,13 @@ export default {
this.pagination.total = response.data.data.total this.pagination.total = response.data.data.total
}) })
}, },
showDetailDrawer() { showDetailDrawer(attachment) {
this.drawerVisible = true this.drawerVisible = true
this.detailImgLoading = true
this.selectAttachment = attachment
setTimeout(() => {
this.detailImgLoading = false
}, 500)
}, },
showUploadModal() { showUploadModal() {
this.uploadVisible = true this.uploadVisible = true
@ -113,6 +131,9 @@ export default {
} else if (status === 'error') { } else if (status === 'error') {
this.$message.error(`${info.file.name} file upload failed.`) this.$message.error(`${info.file.name} file upload failed.`)
} }
},
onChildClose() {
this.drawerVisible = false
} }
} }
} }
@ -147,4 +168,8 @@ export default {
.ant-card-meta { .ant-card-meta {
padding: 0.8rem; padding: 0.8rem;
} }
.attach-detail-img img {
width: 100%;
}
</style> </style>

View File

@ -103,8 +103,9 @@
<a-drawer <a-drawer
title="选择图片" title="选择图片"
width="320" width="320"
:closable="true" closable
:visible="childrenDrawer" :visible="childDrawerVisible"
@close="onChildClose"
> >
</a-drawer> </a-drawer>
<div class="postControl"> <div class="postControl">
@ -161,7 +162,7 @@ export default {
xs: { span: 24 } xs: { span: 24 }
}, },
visible: false, visible: false,
childrenDrawer: false, childDrawerVisible: false,
drawerWidth: '460', drawerWidth: '460',
tags: [], tags: [],
categories: [], categories: [],
@ -241,7 +242,7 @@ export default {
this.visible = true this.visible = true
}, },
showAttachDrawer() { showAttachDrawer() {
this.childrenDrawer = true this.childDrawerVisible = true
}, },
handlePublishClick() { handlePublishClick() {
this.postToStage.status = 'PUBLISHED' this.postToStage.status = 'PUBLISHED'
@ -253,6 +254,9 @@ export default {
}, },
onClose() { onClose() {
this.visible = false this.visible = false
},
onChildClose() {
this.childDrawerVisible = false
} }
} }
} }