mirror of https://github.com/halo-dev/halo-admin
ruibaby
6 years ago
parent
9c5d072688
commit
ae5ffd9d3a
@ -0,0 +1,23 @@
|
||||
import service from '@/utils/service'
|
||||
|
||||
const baseUrl = '/api/admin/galleries'
|
||||
|
||||
const galleryApi = {}
|
||||
|
||||
galleryApi.query = params => {
|
||||
return service({
|
||||
url: baseUrl,
|
||||
params: params,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
galleryApi.create = (gallery) => {
|
||||
return service({
|
||||
url: baseUrl,
|
||||
data: gallery,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
export default galleryApi
|
||||
@ -1,10 +1,262 @@
|
||||
<template>
|
||||
<div class="page-header-index-wide">Link List</div>
|
||||
<div class="page-header-index-wide">
|
||||
<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-form-item label="关键词">
|
||||
<a-input v-model="queryParam.keyword" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
:md="6"
|
||||
:sm="24"
|
||||
>
|
||||
<a-form-item label="分组">
|
||||
<a-select v-model="queryParam.attachmentType">
|
||||
<a-select-option
|
||||
v-for="item in Object.keys(attachmentType)"
|
||||
:key="item"
|
||||
:value="item"
|
||||
>{{ attachmentType[item].text }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
:md="6"
|
||||
:sm="24"
|
||||
>
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="loadAttachments(true)"
|
||||
>查询</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>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-list
|
||||
:grid="{ gutter: 12, xs: 1, sm: 2, md: 4, lg: 6, xl: 6, xxl: 6 }"
|
||||
:dataSource="galleries"
|
||||
:loading="listLoading"
|
||||
>
|
||||
<a-list-item
|
||||
slot="renderItem"
|
||||
slot-scope="item, index"
|
||||
:key="index"
|
||||
>
|
||||
<a-card
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
hoverable
|
||||
@click="showDetailDrawer(item)"
|
||||
>
|
||||
<div class="attach-thumb">
|
||||
<img :src="item.thumbnail">
|
||||
</div>
|
||||
<a-card-meta>
|
||||
<ellipsis
|
||||
:length="isMobile()?36:18"
|
||||
tooltip
|
||||
slot="description"
|
||||
>{{ item.name }}</ellipsis>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row
|
||||
type="flex"
|
||||
justify="end"
|
||||
>
|
||||
<a-pagination
|
||||
:total="pagination.total"
|
||||
:defaultPageSize="pagination.size"
|
||||
:pageSizeOptions="['18', '36', '54','72','90','108']"
|
||||
showSizeChanger
|
||||
@change="handlePaginationChange"
|
||||
@showSizeChange="handlePaginationChange"
|
||||
/>
|
||||
</a-row>
|
||||
<AttachmentDetailDrawer
|
||||
v-model="drawerVisiable"
|
||||
v-if="selectAttachment"
|
||||
:attachment="selectAttachment"
|
||||
@delete="handleDelete"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
import AttachmentDetailDrawer from '../../attachment/components/AttachmentDetailDrawer'
|
||||
import attachmentApi from '@/api/attachment'
|
||||
import galleryApi from '@/api/gallery'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AttachmentDetailDrawer
|
||||
},
|
||||
mixins: [mixin, mixinDevice],
|
||||
data() {
|
||||
return {
|
||||
attachmentType: attachmentApi.type,
|
||||
listLoading: true,
|
||||
selectAttachment: {},
|
||||
attachments: [],
|
||||
galleries: [],
|
||||
mediaTypes: [],
|
||||
editable: false,
|
||||
pagination: {
|
||||
page: 1,
|
||||
size: 18,
|
||||
sort: null
|
||||
},
|
||||
queryParam: {
|
||||
page: 0,
|
||||
size: 18,
|
||||
sort: null,
|
||||
keyword: null,
|
||||
mediaType: null,
|
||||
attachmentType: null
|
||||
},
|
||||
drawerVisiable: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formattedDatas() {
|
||||
return this.attachments.map(attachment => {
|
||||
attachment.typeProperty = this.attachmentType[attachment.type]
|
||||
return attachment
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadAttachments()
|
||||
this.loadGalleries()
|
||||
this.loadMediaTypes()
|
||||
},
|
||||
methods: {
|
||||
loadAttachments(isSearch) {
|
||||
this.queryParam.page = this.pagination.page - 1
|
||||
this.queryParam.size = this.pagination.size
|
||||
this.queryParam.sort = this.pagination.sort
|
||||
if (isSearch) {
|
||||
this.queryParam.page = 0
|
||||
}
|
||||
this.listLoading = true
|
||||
attachmentApi.query(this.queryParam).then(response => {
|
||||
this.attachments = response.data.data.content
|
||||
this.pagination.total = response.data.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
loadGalleries(isSearch) {
|
||||
this.queryParam.page = this.pagination.page - 1
|
||||
this.queryParam.size = this.pagination.size
|
||||
this.queryParam.sort = this.pagination.sort
|
||||
if (isSearch) {
|
||||
this.queryParam.page = 0
|
||||
}
|
||||
this.listLoading = true
|
||||
galleryApi.query(this.queryParam).then(response => {
|
||||
this.galleries = response.data.data.content
|
||||
this.pagination.total = response.data.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
loadMediaTypes() {
|
||||
attachmentApi.getMediaTypes().then(response => {
|
||||
this.mediaTypes = response.data.data
|
||||
})
|
||||
},
|
||||
showDetailDrawer(attachment) {
|
||||
this.selectAttachment = attachment
|
||||
this.drawerVisiable = true
|
||||
},
|
||||
showUploadModal() {
|
||||
this.uploadVisible = true
|
||||
},
|
||||
handlePaginationChange(page, size) {
|
||||
this.$log.debug(`Current: ${page}, PageSize: ${size}`)
|
||||
this.pagination.page = page
|
||||
this.pagination.size = size
|
||||
this.loadAttachments()
|
||||
},
|
||||
resetParam() {
|
||||
this.queryParam.keyword = null
|
||||
this.queryParam.mediaType = null
|
||||
this.queryParam.attachmentType = null
|
||||
this.loadAttachments()
|
||||
},
|
||||
handleDelete(attachment) {
|
||||
this.loadAttachments()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.ant-divider-horizontal {
|
||||
margin: 24px 0 12px 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.attach-thumb {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
padding-bottom: 56%;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-card-meta {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.attach-detail-img img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-operator {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue