mirror of https://github.com/halo-dev/halo-admin
pref: attachment search param.
ruibaby
parent
75b5ea43ce
commit
c0392299e7
|
|
@ -53,6 +53,13 @@ attachmentApi.getMediaTypes = () => {
|
|||
})
|
||||
}
|
||||
|
||||
attachmentApi.getTypes = () => {
|
||||
return service({
|
||||
url: `${baseUrl}/types`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
attachmentApi.CancelToken = axios.CancelToken
|
||||
attachmentApi.isCancel = axios.isCancel
|
||||
|
||||
|
|
@ -80,31 +87,31 @@ attachmentApi.uploads = (formDatas, uploadProgress, cancelToken) => {
|
|||
|
||||
attachmentApi.type = {
|
||||
LOCAL: {
|
||||
type: 'local',
|
||||
type: 'LOCAL',
|
||||
text: '本地'
|
||||
},
|
||||
SMMS: {
|
||||
type: 'smms',
|
||||
type: 'SMMS',
|
||||
text: 'SM.MS'
|
||||
},
|
||||
UPOSS: {
|
||||
type: 'uposs',
|
||||
type: 'UPOSS',
|
||||
text: '又拍云'
|
||||
},
|
||||
QINIUOSS: {
|
||||
type: 'qiniuoss',
|
||||
type: 'QINIUOSS',
|
||||
text: '七牛云'
|
||||
},
|
||||
ALIOSS: {
|
||||
type: 'alioss',
|
||||
type: 'ALIOSS',
|
||||
text: '阿里云'
|
||||
},
|
||||
BAIDUBOS: {
|
||||
type: 'baidubos',
|
||||
type: 'BAIDUBOS',
|
||||
text: '百度云'
|
||||
},
|
||||
TENCENTCOS: {
|
||||
type: 'tencentcos',
|
||||
type: 'TENCENTCOS',
|
||||
text: '腾讯云'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,52 +1,117 @@
|
|||
<template>
|
||||
<page-view>
|
||||
<a-row :gutter="12" type="flex" align="middle">
|
||||
<a-col :span="24" style="padding-bottom: 12px;">
|
||||
<a-card :bordered="false" :bodyStyle="{ padding: '16px' }">
|
||||
<a-row
|
||||
:gutter="12"
|
||||
type="flex"
|
||||
align="middle"
|
||||
>
|
||||
<a-col
|
||||
:span="24"
|
||||
style="padding-bottom: 12px;"
|
||||
>
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:bodyStyle="{ padding: '16px' }"
|
||||
>
|
||||
<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" @keyup.enter="handleQuery()" />
|
||||
<a-input
|
||||
v-model="queryParam.keyword"
|
||||
@keyup.enter="handleQuery()"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-col
|
||||
:md="6"
|
||||
:sm="24"
|
||||
>
|
||||
<a-form-item label="存储位置">
|
||||
<a-select v-model="queryParam.attachmentType" @change="handleQuery()">
|
||||
<a-select-option v-for="item in Object.keys(attachmentType)" :key="item" :value="item">{{
|
||||
<a-select
|
||||
v-model="queryParam.attachmentType"
|
||||
@change="handleQuery()"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in types"
|
||||
:key="item"
|
||||
:value="item"
|
||||
>{{
|
||||
attachmentType[item].text
|
||||
}}</a-select-option>
|
||||
</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 v-model="queryParam.mediaType" @change="handleQuery()">
|
||||
<a-select-option v-for="(item, index) in mediaTypes" :key="index" :value="item">{{
|
||||
<a-select
|
||||
v-model="queryParam.mediaType"
|
||||
@change="handleQuery()"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in mediaTypes"
|
||||
:key="index"
|
||||
:value="item"
|
||||
>{{
|
||||
item
|
||||
}}</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="handleQuery()">查询</a-button>
|
||||
<a-button style="margin-left: 8px;" @click="handleResetParam()">重置</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleQuery()"
|
||||
>查询</a-button>
|
||||
<a-button
|
||||
style="margin-left: 8px;"
|
||||
@click="handleResetParam()"
|
||||
>重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="table-operator" style="margin-bottom: 0;">
|
||||
<a-button type="primary" icon="cloud-upload" @click="() => (uploadVisible = true)">上传</a-button>
|
||||
<a-button icon="select" v-show="!supportMultipleSelection" @click="handleMultipleSelection">
|
||||
<div
|
||||
class="table-operator"
|
||||
style="margin-bottom: 0;"
|
||||
>
|
||||
<a-button
|
||||
type="primary"
|
||||
icon="cloud-upload"
|
||||
@click="() => (uploadVisible = true)"
|
||||
>上传</a-button>
|
||||
<a-button
|
||||
icon="select"
|
||||
v-show="!supportMultipleSelection"
|
||||
@click="handleMultipleSelection"
|
||||
>
|
||||
批量操作
|
||||
</a-button>
|
||||
<a-button type="danger" icon="delete" v-show="supportMultipleSelection" @click="handleDeleteAttachmentInBatch">
|
||||
<a-button
|
||||
type="danger"
|
||||
icon="delete"
|
||||
v-show="supportMultipleSelection"
|
||||
@click="handleDeleteAttachmentInBatch"
|
||||
>
|
||||
删除
|
||||
</a-button>
|
||||
<a-button icon="close" v-show="supportMultipleSelection" @click="handleCancelMultipleSelection">
|
||||
<a-button
|
||||
icon="close"
|
||||
v-show="supportMultipleSelection"
|
||||
@click="handleCancelMultipleSelection"
|
||||
>
|
||||
取消
|
||||
</a-button>
|
||||
</div>
|
||||
|
|
@ -58,14 +123,30 @@
|
|||
:dataSource="formattedDatas"
|
||||
:loading="listLoading"
|
||||
>
|
||||
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
||||
<a-card :bodyStyle="{ padding: 0 }" hoverable @click="handleShowDetailDrawer(item)">
|
||||
<a-list-item
|
||||
slot="renderItem"
|
||||
slot-scope="item, index"
|
||||
:key="index"
|
||||
>
|
||||
<a-card
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
hoverable
|
||||
@click="handleShowDetailDrawer(item)"
|
||||
>
|
||||
<div class="attach-thumb">
|
||||
<span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
|
||||
<img :src="item.thumbPath" v-show="handleJudgeMediaType(item)" loading="lazy" />
|
||||
<img
|
||||
:src="item.thumbPath"
|
||||
v-show="handleJudgeMediaType(item)"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<a-card-meta style="padding: 0.8rem;">
|
||||
<ellipsis :length="isMobile() ? 12 : 16" tooltip slot="description">{{ item.name }}</ellipsis>
|
||||
<ellipsis
|
||||
:length="isMobile() ? 12 : 16"
|
||||
tooltip
|
||||
slot="description"
|
||||
>{{ item.name }}</ellipsis>
|
||||
</a-card-meta>
|
||||
<a-checkbox
|
||||
class="select-attachment-checkbox"
|
||||
|
|
@ -91,8 +172,17 @@
|
|||
@showSizeChange="handlePaginationChange"
|
||||
/>
|
||||
</div>
|
||||
<a-modal title="上传附件" v-model="uploadVisible" :footer="null" :afterClose="onUploadClose" destroyOnClose>
|
||||
<FilePondUpload ref="upload" :uploadHandler="uploadHandler"></FilePondUpload>
|
||||
<a-modal
|
||||
title="上传附件"
|
||||
v-model="uploadVisible"
|
||||
:footer="null"
|
||||
:afterClose="onUploadClose"
|
||||
destroyOnClose
|
||||
>
|
||||
<FilePondUpload
|
||||
ref="upload"
|
||||
:uploadHandler="uploadHandler"
|
||||
></FilePondUpload>
|
||||
</a-modal>
|
||||
<AttachmentDetailDrawer
|
||||
v-model="drawerVisible"
|
||||
|
|
@ -128,6 +218,7 @@ export default {
|
|||
selectAttachment: {},
|
||||
attachments: [],
|
||||
mediaTypes: [],
|
||||
types: [],
|
||||
editable: false,
|
||||
pagination: {
|
||||
page: 1,
|
||||
|
|
@ -162,6 +253,7 @@ export default {
|
|||
created() {
|
||||
this.loadAttachments()
|
||||
this.loadMediaTypes()
|
||||
this.loadTypes()
|
||||
},
|
||||
destroyed: function() {
|
||||
if (this.drawerVisible) {
|
||||
|
|
@ -192,6 +284,11 @@ export default {
|
|||
this.mediaTypes = response.data.data
|
||||
})
|
||||
},
|
||||
loadTypes() {
|
||||
attachmentApi.getTypes().then(response => {
|
||||
this.types = response.data.data
|
||||
})
|
||||
},
|
||||
handleShowDetailDrawer(attachment) {
|
||||
this.selectAttachment = attachment
|
||||
if (this.supportMultipleSelection) {
|
||||
|
|
@ -212,6 +309,7 @@ export default {
|
|||
this.queryParam.attachmentType = null
|
||||
this.handlePaginationChange(1, this.pagination.size)
|
||||
this.loadMediaTypes()
|
||||
this.loadTypes()
|
||||
},
|
||||
handleQuery() {
|
||||
this.handlePaginationChange(1, this.pagination.size)
|
||||
|
|
@ -220,6 +318,7 @@ export default {
|
|||
this.$refs.upload.handleClearFileList()
|
||||
this.handlePaginationChange(1, this.pagination.size)
|
||||
this.loadMediaTypes()
|
||||
this.loadTypes()
|
||||
},
|
||||
handleJudgeMediaType(attachment) {
|
||||
var mediaType = attachment.mediaType
|
||||
|
|
@ -285,7 +384,7 @@ export default {
|
|||
that.$message.success('删除成功')
|
||||
})
|
||||
},
|
||||
onCancel() { }
|
||||
onCancel() {}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue