feat: support set thumbnail to category and tag.

pull/3445/head
ruibaby 2020-02-15 20:35:37 +08:00
parent 069e47e8ac
commit ad10279584
3 changed files with 68 additions and 5 deletions

View File

@ -911,4 +911,8 @@ body {
img { img {
width: 100%; width: 100%;
} }
}
.ant-input-group-addon {
line-height: initial !important;
} }

View File

@ -32,6 +32,20 @@
v-model="categoryToCreate.parentId" v-model="categoryToCreate.parentId"
/> />
</a-form-item> </a-form-item>
<a-form-item
label="封面图"
help="* 在分类页面可展示,需要主题支持"
>
<a-input v-model="categoryToCreate.thumbnail">
<a
href="javascript:void(0);"
slot="addonAfter"
@click="()=>this.thumbnailDrawerVisible = true"
>
<a-icon type="picture" />
</a>
</a-input>
</a-form-item>
<a-form-item <a-form-item
label="描述:" label="描述:"
help="* 分类描述,部分主题可显示" help="* 分类描述,部分主题可显示"
@ -206,12 +220,19 @@
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<AttachmentSelectDrawer
v-model="thumbnailDrawerVisible"
@listenToSelect="handleSelectThumbnail"
title="选择封面图"
/>
</div> </div>
</template> </template>
<script> <script>
import { mixin, mixinDevice } from '@/utils/mixin.js' import { mixin, mixinDevice } from '@/utils/mixin.js'
import CategorySelectTree from './components/CategorySelectTree' import CategorySelectTree from './components/CategorySelectTree'
import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
import categoryApi from '@/api/category' import categoryApi from '@/api/category'
import menuApi from '@/api/menu' import menuApi from '@/api/menu'
@ -239,13 +260,14 @@ const columns = [
} }
] ]
export default { export default {
components: { CategorySelectTree }, components: { CategorySelectTree, AttachmentSelectDrawer },
mixins: [mixin, mixinDevice], mixins: [mixin, mixinDevice],
data() { data() {
return { return {
formType: 'create', formType: 'create',
categories: [], categories: [],
categoryToCreate: {}, categoryToCreate: {},
thumbnailDrawerVisible: false,
menu: {}, menu: {},
loading: false, loading: false,
columns columns
@ -316,6 +338,10 @@ export default {
this.$message.success('添加到菜单成功!') this.$message.success('添加到菜单成功!')
this.menu = {} this.menu = {}
}) })
},
handleSelectThumbnail(data) {
this.$set(this.categoryToCreate, 'thumbnail', encodeURI(data.path))
this.thumbnailDrawerVisible = false
} }
} }
} }

View File

@ -9,7 +9,10 @@
:xs="24" :xs="24"
:style="{ 'padding-bottom': '12px' }" :style="{ 'padding-bottom': '12px' }"
> >
<a-card :title="title" :bodyStyle="{ padding: '16px' }"> <a-card
:title="title"
:bodyStyle="{ padding: '16px' }"
>
<a-form layout="horizontal"> <a-form layout="horizontal">
<a-form-item <a-form-item
label="名称:" label="名称:"
@ -23,6 +26,20 @@
> >
<a-input v-model="tagToCreate.slugName" /> <a-input v-model="tagToCreate.slugName" />
</a-form-item> </a-form-item>
<a-form-item
label="封面图"
help="* 在标签页面可展示,需要主题支持"
>
<a-input v-model="tagToCreate.thumbnail">
<a
href="javascript:void(0);"
slot="addonAfter"
@click="()=>this.thumbnailDrawerVisible = true"
>
<a-icon type="picture" />
</a>
</a-input>
</a-form-item>
<a-form-item> <a-form-item>
<a-button <a-button
type="primary" type="primary"
@ -64,8 +81,11 @@
:xs="24" :xs="24"
:style="{ 'padding-bottom': '12px' }" :style="{ 'padding-bottom': '12px' }"
> >
<a-card title="所有标签" :bodyStyle="{ padding: '16px' }"> <a-card
<a-empty v-if="tags.length==0"/> title="所有标签"
:bodyStyle="{ padding: '16px' }"
>
<a-empty v-if="tags.length==0" />
<a-tooltip <a-tooltip
placement="topLeft" placement="topLeft"
v-for="tag in tags" v-for="tag in tags"
@ -84,18 +104,27 @@
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<AttachmentSelectDrawer
v-model="thumbnailDrawerVisible"
@listenToSelect="handleSelectThumbnail"
title="选择封面图"
/>
</div> </div>
</template> </template>
<script> <script>
import tagApi from '@/api/tag' import tagApi from '@/api/tag'
import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
export default { export default {
components: { AttachmentSelectDrawer },
data() { data() {
return { return {
formType: 'create', formType: 'create',
tags: [], tags: [],
tagToCreate: {} tagToCreate: {},
thumbnailDrawerVisible: false
} }
}, },
computed: { computed: {
@ -155,6 +184,10 @@ export default {
}) })
} }
this.handleAddTag() this.handleAddTag()
},
handleSelectThumbnail(data) {
this.$set(this.tagToCreate, 'thumbnail', encodeURI(data.path))
this.thumbnailDrawerVisible = false
} }
} }
} }