mirror of https://github.com/halo-dev/halo
Refactor attachment detail drawer
johnniang
parent
ff86cc2841
commit
2e74ef1864
|
|
@ -125,137 +125,30 @@
|
||||||
<p class="ant-upload-hint">支持单个或批量上传</p>
|
<p class="ant-upload-hint">支持单个或批量上传</p>
|
||||||
</upload>
|
</upload>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<a-drawer
|
<AttachmentDetailDrawer
|
||||||
|
v-model="drawerVisiable"
|
||||||
v-if="selectAttachment"
|
v-if="selectAttachment"
|
||||||
title="附件详情"
|
:attachment="selectAttachment"
|
||||||
:width="isMobile()?'100%':'560'"
|
@delete="handleDelete"
|
||||||
closable
|
/>
|
||||||
:visible="drawerVisible"
|
|
||||||
destroyOnClose
|
|
||||||
@close="onChildClose"
|
|
||||||
>
|
|
||||||
<a-row
|
|
||||||
type="flex"
|
|
||||||
align="middle"
|
|
||||||
>
|
|
||||||
<a-col :span="24">
|
|
||||||
<a-skeleton
|
|
||||||
active
|
|
||||||
:loading="detailLoading"
|
|
||||||
:paragraph="{rows: 8}"
|
|
||||||
>
|
|
||||||
<div class="attach-detail-img">
|
|
||||||
<img :src="selectAttachment.path">
|
|
||||||
</div>
|
|
||||||
</a-skeleton>
|
|
||||||
</a-col>
|
|
||||||
<a-divider />
|
|
||||||
<a-col :span="24">
|
|
||||||
<a-skeleton
|
|
||||||
active
|
|
||||||
:loading="detailLoading"
|
|
||||||
:paragraph="{rows: 8}"
|
|
||||||
>
|
|
||||||
<a-list itemLayout="horizontal">
|
|
||||||
<a-list-item>
|
|
||||||
<a-list-item-meta>
|
|
||||||
<template
|
|
||||||
slot="description"
|
|
||||||
v-if="editable"
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
v-model="selectAttachment.name"
|
|
||||||
@blur="updateAttachment"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template
|
|
||||||
slot="description"
|
|
||||||
v-else
|
|
||||||
>{{ selectAttachment.name }}</template>
|
|
||||||
<span slot="title">
|
|
||||||
附件名：
|
|
||||||
<a-icon
|
|
||||||
type="edit"
|
|
||||||
@click="handleEditName"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</a-list-item-meta>
|
|
||||||
</a-list-item>
|
|
||||||
<a-list-item>
|
|
||||||
<a-list-item-meta :description="selectAttachment.mediaType">
|
|
||||||
<span slot="title">附件类型：</span>
|
|
||||||
</a-list-item-meta>
|
|
||||||
</a-list-item>
|
|
||||||
<a-list-item>
|
|
||||||
<a-list-item-meta :description="selectAttachment.size">
|
|
||||||
<span slot="title">附件大小：</span>
|
|
||||||
</a-list-item-meta>
|
|
||||||
</a-list-item>
|
|
||||||
<a-list-item>
|
|
||||||
<a-list-item-meta :description="selectAttachment.height+'x'+selectAttachment.width">
|
|
||||||
<span slot="title">图片尺寸：</span>
|
|
||||||
</a-list-item-meta>
|
|
||||||
</a-list-item>
|
|
||||||
<a-list-item>
|
|
||||||
<a-list-item-meta :description="selectAttachment.createTime">
|
|
||||||
<span slot="title">上传日期：</span>
|
|
||||||
</a-list-item-meta>
|
|
||||||
</a-list-item>
|
|
||||||
<a-list-item>
|
|
||||||
<a-list-item-meta :description="selectAttachment.path">
|
|
||||||
<span slot="title">
|
|
||||||
普通链接：
|
|
||||||
<a-icon
|
|
||||||
type="copy"
|
|
||||||
@click="doCopyNormalLink"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</a-list-item-meta>
|
|
||||||
</a-list-item>
|
|
||||||
<a-list-item>
|
|
||||||
<a-list-item-meta :description="''">
|
|
||||||
<span slot="title">
|
|
||||||
Markdown 格式：
|
|
||||||
<a-icon
|
|
||||||
type="copy"
|
|
||||||
@click="doCopyMarkdownLink"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</a-list-item-meta>
|
|
||||||
</a-list-item>
|
|
||||||
</a-list>
|
|
||||||
</a-skeleton>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<div class="attachment-control">
|
|
||||||
<a-popconfirm
|
|
||||||
title="你确定要删除该附件？"
|
|
||||||
@confirm="deleteAttachment(selectAttachment.id)"
|
|
||||||
okText="确定"
|
|
||||||
cancelText="取消"
|
|
||||||
>
|
|
||||||
<a-button type="danger">删除</a-button>
|
|
||||||
</a-popconfirm>
|
|
||||||
</div>
|
|
||||||
</a-drawer>
|
|
||||||
</page-view>
|
</page-view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { PageView } from '@/layouts'
|
import { PageView } from '@/layouts'
|
||||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||||
|
import AttachmentDetailDrawer from './components/AttachmentDetailDrawer'
|
||||||
import attachmentApi from '@/api/attachment'
|
import attachmentApi from '@/api/attachment'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
PageView
|
PageView,
|
||||||
|
AttachmentDetailDrawer
|
||||||
},
|
},
|
||||||
mixins: [mixin, mixinDevice],
|
mixins: [mixin, mixinDevice],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
uploadVisible: false,
|
uploadVisible: false,
|
||||||
drawerVisible: false,
|
|
||||||
detailLoading: false,
|
|
||||||
selectAttachment: null,
|
selectAttachment: null,
|
||||||
attachments: [],
|
attachments: [],
|
||||||
editable: false,
|
editable: false,
|
||||||
|
|
@ -270,7 +163,8 @@ export default {
|
||||||
sort: null,
|
sort: null,
|
||||||
keyword: null
|
keyword: null
|
||||||
},
|
},
|
||||||
uploadHandler: attachmentApi.upload
|
uploadHandler: attachmentApi.upload,
|
||||||
|
drawerVisiable: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -287,12 +181,8 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
showDetailDrawer(attachment) {
|
showDetailDrawer(attachment) {
|
||||||
this.drawerVisible = true
|
|
||||||
this.detailLoading = true
|
|
||||||
this.selectAttachment = attachment
|
this.selectAttachment = attachment
|
||||||
setTimeout(() => {
|
this.drawerVisiable = true
|
||||||
this.detailLoading = false
|
|
||||||
}, 500)
|
|
||||||
},
|
},
|
||||||
showUploadModal() {
|
showUploadModal() {
|
||||||
this.uploadVisible = true
|
this.uploadVisible = true
|
||||||
|
|
@ -308,56 +198,18 @@ export default {
|
||||||
handleUploadSuccess() {
|
handleUploadSuccess() {
|
||||||
this.loadAttachments()
|
this.loadAttachments()
|
||||||
},
|
},
|
||||||
deleteAttachment(id) {
|
|
||||||
attachmentApi.delete(id).then(response => {
|
|
||||||
this.$message.success('删除成功！')
|
|
||||||
this.drawerVisible = false
|
|
||||||
this.loadAttachments()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
doCopyNormalLink() {
|
|
||||||
const text = `${this.selectAttachment.path}`
|
|
||||||
this.$copyText(text)
|
|
||||||
.then(message => {
|
|
||||||
console.log('copy', message)
|
|
||||||
this.$message.success('复制成功')
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
console.log('copy.err', err)
|
|
||||||
this.$message.error('复制失败')
|
|
||||||
})
|
|
||||||
},
|
|
||||||
doCopyMarkdownLink() {
|
|
||||||
const text = ``
|
|
||||||
this.$copyText(text)
|
|
||||||
.then(message => {
|
|
||||||
console.log('copy', message)
|
|
||||||
this.$message.success('复制成功')
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
console.log('copy.err', err)
|
|
||||||
this.$message.error('复制失败')
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onChildClose() {
|
|
||||||
this.drawerVisible = false
|
|
||||||
},
|
|
||||||
handlePaginationChange(page, size) {
|
handlePaginationChange(page, size) {
|
||||||
this.$log.debug(`Current: ${page}, PageSize: ${size}`)
|
this.$log.debug(`Current: ${page}, PageSize: ${size}`)
|
||||||
this.pagination.page = page
|
this.pagination.page = page
|
||||||
this.pagination.size = size
|
this.pagination.size = size
|
||||||
this.loadAttachments()
|
this.loadAttachments()
|
||||||
},
|
},
|
||||||
handleEditName() {
|
|
||||||
this.editable = !this.editable
|
|
||||||
},
|
|
||||||
updateAttachment() {
|
|
||||||
this.$message.success('修改')
|
|
||||||
this.editable = false
|
|
||||||
},
|
|
||||||
resetParam() {
|
resetParam() {
|
||||||
this.queryParam.keyword = null
|
this.queryParam.keyword = null
|
||||||
this.loadAttachments()
|
this.loadAttachments()
|
||||||
|
},
|
||||||
|
handleDelete(attachment) {
|
||||||
|
this.loadAttachments()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,199 @@
|
||||||
|
<template>
|
||||||
|
<a-drawer
|
||||||
|
title="附件详情"
|
||||||
|
:width="isMobile()?'100%':'560'"
|
||||||
|
closable
|
||||||
|
:visible="visiable"
|
||||||
|
destroyOnClose
|
||||||
|
@close="onClose"
|
||||||
|
>
|
||||||
|
<a-row
|
||||||
|
type="flex"
|
||||||
|
align="middle"
|
||||||
|
>
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-skeleton
|
||||||
|
active
|
||||||
|
:loading="detailLoading"
|
||||||
|
:paragraph="{rows: 8}"
|
||||||
|
>
|
||||||
|
<div class="attach-detail-img">
|
||||||
|
<img :src="attachment.path">
|
||||||
|
</div>
|
||||||
|
</a-skeleton>
|
||||||
|
</a-col>
|
||||||
|
<a-divider />
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-skeleton
|
||||||
|
active
|
||||||
|
:loading="detailLoading"
|
||||||
|
:paragraph="{rows: 8}"
|
||||||
|
>
|
||||||
|
<a-list itemLayout="horizontal">
|
||||||
|
<a-list-item>
|
||||||
|
<a-list-item-meta>
|
||||||
|
<template
|
||||||
|
slot="description"
|
||||||
|
v-if="editable"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model="attachment.name"
|
||||||
|
@blur="updateAttachment"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
slot="description"
|
||||||
|
v-else
|
||||||
|
>{{ attachment.name }}</template>
|
||||||
|
<span slot="title">
|
||||||
|
附件名：
|
||||||
|
<a-icon
|
||||||
|
type="edit"
|
||||||
|
@click="handleEditName"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
<a-list-item>
|
||||||
|
<a-list-item-meta :description="attachment.mediaType">
|
||||||
|
<span slot="title">附件类型：</span>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
<a-list-item>
|
||||||
|
<a-list-item-meta :description="attachment.size">
|
||||||
|
<span slot="title">附件大小：</span>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
<a-list-item>
|
||||||
|
<a-list-item-meta :description="attachment.height+'x'+attachment.width">
|
||||||
|
<span slot="title">图片尺寸：</span>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
<a-list-item>
|
||||||
|
<a-list-item-meta :description="attachment.createTime">
|
||||||
|
<span slot="title">上传日期：</span>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
<a-list-item>
|
||||||
|
<a-list-item-meta :description="attachment.path">
|
||||||
|
<span slot="title">
|
||||||
|
普通链接：
|
||||||
|
<a-icon
|
||||||
|
type="copy"
|
||||||
|
@click="doCopyNormalLink"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
<a-list-item>
|
||||||
|
<a-list-item-meta :description="''">
|
||||||
|
<span slot="title">
|
||||||
|
Markdown 格式：
|
||||||
|
<a-icon
|
||||||
|
type="copy"
|
||||||
|
@click="doCopyMarkdownLink"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
</a-list>
|
||||||
|
</a-skeleton>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<div class="attachment-control">
|
||||||
|
<a-popconfirm
|
||||||
|
title="你确定要删除该附件？"
|
||||||
|
@confirm="deleteAttachment"
|
||||||
|
okText="确定"
|
||||||
|
cancelText="取消"
|
||||||
|
>
|
||||||
|
<a-button type="danger">删除</a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
</div>
|
||||||
|
</a-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||||
|
import attachmentApi from '@/api/attachment'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AttachmentDetailDrawer',
|
||||||
|
mixins: [mixin, mixinDevice],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
detailLoading: true,
|
||||||
|
editable: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
prop: 'visiable',
|
||||||
|
event: 'close'
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
attachment: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
visiable: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.detailLoading = false
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
deleteAttachment() {
|
||||||
|
attachmentApi.delete(this.attachment.id).then(response => {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.$emit('delete', this.attachment)
|
||||||
|
this.onClose()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleEditName() {
|
||||||
|
this.editable = !this.editable
|
||||||
|
},
|
||||||
|
updateAttachment() {
|
||||||
|
this.$message.success('修改')
|
||||||
|
this.editable = false
|
||||||
|
},
|
||||||
|
doCopyNormalLink() {
|
||||||
|
const text = `${this.attachment.path}`
|
||||||
|
this.$copyText(text)
|
||||||
|
.then(message => {
|
||||||
|
console.log('copy', message)
|
||||||
|
this.$message.success('复制成功')
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log('copy.err', err)
|
||||||
|
this.$message.error('复制失败')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
doCopyMarkdownLink() {
|
||||||
|
const text = ``
|
||||||
|
this.$copyText(text)
|
||||||
|
.then(message => {
|
||||||
|
console.log('copy', message)
|
||||||
|
this.$message.success('复制成功')
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log('copy.err', err)
|
||||||
|
this.$message.error('复制失败')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.$emit('close', false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.attach-detail-img img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue