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>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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>
|
</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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in new issue