mirror of https://github.com/halo-dev/halo-admin
Refactor attachment upload
johnniang
parent
fce26152a7
commit
ff86cc2841
|
|
@ -1,17 +1,30 @@
|
|||
<template>
|
||||
<page-view>
|
||||
<a-row :gutter="12" type="flex" align="middle">
|
||||
<a-col :span="24" class="search-box">
|
||||
<a-row
|
||||
:gutter="12"
|
||||
type="flex"
|
||||
align="middle"
|
||||
>
|
||||
<a-col
|
||||
:span="24"
|
||||
class="search-box"
|
||||
>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-col
|
||||
:md="6"
|
||||
:sm="24"
|
||||
>
|
||||
<a-form-item label="关键词">
|
||||
<a-input v-model="queryParam.keyword"/>
|
||||
<a-input v-model="queryParam.keyword" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-col
|
||||
:md="6"
|
||||
:sm="24"
|
||||
>
|
||||
<a-form-item label="年月份">
|
||||
<a-select placeholder="请选择年月">
|
||||
<a-select-option value="2019-01">2019-01</a-select-option>
|
||||
|
|
@ -20,24 +33,40 @@
|
|||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-col
|
||||
:md="6"
|
||||
:sm="24"
|
||||
>
|
||||
<a-form-item label="类型">
|
||||
<a-select placeholder="请选择类型">
|
||||
<a-select-option value="image/png">image/png</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-col
|
||||
:md="6"
|
||||
:sm="24"
|
||||
>
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="loadAttachments">查询</a-button>
|
||||
<a-button style="margin-left: 8px;" @click="resetParam">重置</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="loadAttachments"
|
||||
>查询</a-button>
|
||||
<a-button
|
||||
style="margin-left: 8px;"
|
||||
@click="resetParam"
|
||||
>重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="plus" @click="showUploadModal">上传</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
icon="plus"
|
||||
@click="showUploadModal"
|
||||
>上传</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
|
@ -51,7 +80,11 @@
|
|||
:sm="12"
|
||||
:xs="24"
|
||||
>
|
||||
<a-card :bodyStyle="{ padding: 0 }" hoverable @click="showDetailDrawer(attachment)">
|
||||
<a-card
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
hoverable
|
||||
@click="showDetailDrawer(attachment)"
|
||||
>
|
||||
<div class="attach-thumb">
|
||||
<img :src="attachment.thumbPath">
|
||||
</div>
|
||||
|
|
@ -61,7 +94,10 @@
|
|||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row type="flex" justify="end">
|
||||
<a-row
|
||||
type="flex"
|
||||
justify="end"
|
||||
>
|
||||
<a-pagination
|
||||
:total="pagination.total"
|
||||
:defaultPageSize="pagination.size"
|
||||
|
|
@ -71,19 +107,23 @@
|
|||
@showSizeChange="handlePaginationChange"
|
||||
/>
|
||||
</a-row>
|
||||
<a-modal title="上传附件" v-model="uploadVisible" :footer="null">
|
||||
<a-upload-dragger
|
||||
<a-modal
|
||||
title="上传附件"
|
||||
v-model="uploadVisible"
|
||||
:footer="null"
|
||||
>
|
||||
<upload
|
||||
name="file"
|
||||
:multiple="true"
|
||||
:customRequest="handleUpload"
|
||||
@change="handleChange"
|
||||
multiple
|
||||
:uploadHandler="uploadHandler"
|
||||
@success="handleUploadSuccess"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<a-icon type="inbox"/>
|
||||
<a-icon type="inbox" />
|
||||
</p>
|
||||
<p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
|
||||
<p class="ant-upload-hint">支持单个或批量上传</p>
|
||||
</a-upload-dragger>
|
||||
</upload>
|
||||
</a-modal>
|
||||
<a-drawer
|
||||
v-if="selectAttachment"
|
||||
|
|
@ -94,27 +134,50 @@
|
|||
destroyOnClose
|
||||
@close="onChildClose"
|
||||
>
|
||||
<a-row type="flex" align="middle">
|
||||
<a-row
|
||||
type="flex"
|
||||
align="middle"
|
||||
>
|
||||
<a-col :span="24">
|
||||
<a-skeleton active :loading="detailLoading" :paragraph="{rows: 8}">
|
||||
<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-divider />
|
||||
<a-col :span="24">
|
||||
<a-skeleton active :loading="detailLoading" :paragraph="{rows: 8}">
|
||||
<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
|
||||
slot="description"
|
||||
v-if="editable"
|
||||
>
|
||||
<a-input
|
||||
v-model="selectAttachment.name"
|
||||
@blur="updateAttachment"
|
||||
/>
|
||||
</template>
|
||||
<template slot="description" v-else>{{ selectAttachment.name }}</template>
|
||||
<template
|
||||
slot="description"
|
||||
v-else
|
||||
>{{ selectAttachment.name }}</template>
|
||||
<span slot="title">
|
||||
附件名：
|
||||
<a-icon type="edit" @click="handleEditName"/>
|
||||
<a-icon
|
||||
type="edit"
|
||||
@click="handleEditName"
|
||||
/>
|
||||
</span>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
|
|
@ -142,17 +205,21 @@
|
|||
<a-list-item-meta :description="selectAttachment.path">
|
||||
<span slot="title">
|
||||
普通链接：
|
||||
<a-icon type="copy" @click="doCopyNormalLink"/>
|
||||
<a-icon
|
||||
type="copy"
|
||||
@click="doCopyNormalLink"
|
||||
/>
|
||||
</span>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta
|
||||
:description="''"
|
||||
>
|
||||
<a-list-item-meta :description="''">
|
||||
<span slot="title">
|
||||
Markdown 格式：
|
||||
<a-icon type="copy" @click="doCopyMarkdownLink"/>
|
||||
<a-icon
|
||||
type="copy"
|
||||
@click="doCopyMarkdownLink"
|
||||
/>
|
||||
</span>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
|
|
@ -202,7 +269,8 @@ export default {
|
|||
size: 18,
|
||||
sort: null,
|
||||
keyword: null
|
||||
}
|
||||
},
|
||||
uploadHandler: attachmentApi.upload
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -237,6 +305,9 @@ export default {
|
|||
this.$message.error(`${info.file.name} 文件上传失败`)
|
||||
}
|
||||
},
|
||||
handleUploadSuccess() {
|
||||
this.loadAttachments()
|
||||
},
|
||||
deleteAttachment(id) {
|
||||
attachmentApi.delete(id).then(response => {
|
||||
this.$message.success('删除成功！')
|
||||
|
|
@ -277,39 +348,6 @@ export default {
|
|||
this.pagination.size = size
|
||||
this.loadAttachments()
|
||||
},
|
||||
handleUpload(option) {
|
||||
this.$log.debug('Uploading option', option)
|
||||
const CancelToken = attachmentApi.CancelToken
|
||||
const source = CancelToken.source()
|
||||
|
||||
const data = new FormData()
|
||||
data.append('file', option.file)
|
||||
attachmentApi
|
||||
.upload(
|
||||
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
|
||||
)
|
||||
.then(response => {
|
||||
option.onSuccess(response, option.file)
|
||||
this.loadAttachments()
|
||||
})
|
||||
.catch(error => {
|
||||
option.onError(error, error.response)
|
||||
})
|
||||
|
||||
return {
|
||||
abort: () => {
|
||||
source.cancel('Upload operation canceled by the user.')
|
||||
}
|
||||
}
|
||||
},
|
||||
handleEditName() {
|
||||
this.editable = !this.editable
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue