Support journal type.

pull/3445/head
ruibaby 2019-08-27 12:30:53 +08:00
parent e311e30975
commit 6598c91e61
3 changed files with 136 additions and 35 deletions

View File

@ -42,4 +42,13 @@ journalApi.commentTree = journalId => {
}) })
} }
journalApi.journalType = {
PUBLIC: {
text: '公开'
},
PRIVATE: {
text: '私密'
}
}
export default journalApi export default journalApi

View File

@ -169,6 +169,7 @@
v-for="(category,index) in categoriesOfPost" v-for="(category,index) in categoriesOfPost"
:key="index" :key="index"
color="blue" color="blue"
style="margin-bottom: 8px"
>{{ category.name }}</a-tag> >{{ category.name }}</a-tag>
</span> </span>
@ -180,6 +181,7 @@
v-for="(tag, index) in tags" v-for="(tag, index) in tags"
:key="index" :key="index"
color="green" color="green"
style="margin-bottom: 8px"
>{{ tag.name }}</a-tag> >{{ tag.name }}</a-tag>
</span> </span>
@ -313,7 +315,8 @@ const columns = [
dataIndex: 'commentCount' dataIndex: 'commentCount'
}, },
{ {
title: '访问量', title: '访问',
width: '70px',
dataIndex: 'visits' dataIndex: 'visits'
}, },
{ {

View File

@ -6,32 +6,57 @@
<div class="table-page-search-wrapper"> <div class="table-page-search-wrapper">
<a-form layout="inline"> <a-form layout="inline">
<a-row :gutter="48"> <a-row :gutter="48">
<a-col :md="6" :sm="24"> <a-col
:md="6"
:sm="24"
>
<a-form-item label="关键词"> <a-form-item label="关键词">
<a-input v-model="queryParam.keyword"/> <a-input v-model="queryParam.keyword" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<!-- <a-col :md="6" :sm="24"> <a-col
:md="6"
:sm="24"
>
<a-form-item label="状态"> <a-form-item label="状态">
<a-select placeholder="请选择状态"> <a-select
<a-select-option value="1">公开</a-select-option> placeholder="请选择状态"
<a-select-option value="0">私密</a-select-option> v-model="queryParam.type"
>
<a-select-option
v-for="type in Object.keys(journalType)"
:key="type"
:value="type"
>{{ journalType[type].text }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> --> </a-col>
<a-col :md="6" :sm="24"> <a-col
:md="6"
:sm="24"
>
<span class="table-page-search-submitButtons"> <span class="table-page-search-submitButtons">
<a-button type="primary" @click="loadJournals(true)"></a-button> <a-button
<a-button style="margin-left: 8px;" @click="resetParam"></a-button> type="primary"
@click="loadJournals(true)"
>查询</a-button>
<a-button
style="margin-left: 8px;"
@click="resetParam"
>重置</a-button>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
</div> </div>
<div class="table-operator"> <div class="table-operator">
<a-button type="primary" icon="plus" @click="handleNew"></a-button> <a-button
type="primary"
icon="plus"
@click="handleNew"
>写日志</a-button>
</div> </div>
<a-divider/> <a-divider />
<div style="margin-top:15px"> <div style="margin-top:15px">
<a-list <a-list
itemLayout="vertical" itemLayout="vertical"
@ -39,7 +64,11 @@
:dataSource="journals" :dataSource="journals"
:loading="listLoading" :loading="listLoading"
> >
<a-list-item slot="renderItem" slot-scope="item, index" :key="index"> <a-list-item
slot="renderItem"
slot-scope="item, index"
:key="index"
>
<!-- 日志图片集合 --> <!-- 日志图片集合 -->
<!-- <a-card <!-- <a-card
hoverable hoverable
@ -51,7 +80,11 @@
<img alt="example" :src="photo.thumbnail" slot="cover"> <img alt="example" :src="photo.thumbnail" slot="cover">
</a-card> --> </a-card> -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancelPreview"> <a-modal
:visible="previewVisible"
:footer="null"
@cancel="handleCancelPreview"
>
<img <img
:alt="previewPhoto.name + previewPhoto.description" :alt="previewPhoto.name + previewPhoto.description"
style="width: 100%" style="width: 100%"
@ -62,13 +95,22 @@
<template slot="actions"> <template slot="actions">
<span> <span>
<a href="javascript:void(0);"> <a href="javascript:void(0);">
<a-icon type="like-o" style="margin-right: 8px"/> <a-icon
type="like-o"
style="margin-right: 8px"
/>
{{ item.likes }} {{ item.likes }}
</a> </a>
</span> </span>
<span> <span>
<a href="javascript:void(0);" @click="handleCommentShow(item)"> <a
<a-icon type="message" style="margin-right: 8px"/> href="javascript:void(0);"
@click="handleCommentShow(item)"
>
<a-icon
type="message"
style="margin-right: 8px"
/>
{{ item.commentCount }} {{ item.commentCount }}
</a> </a>
</span> </span>
@ -77,8 +119,11 @@
</span>--> </span>-->
</template> </template>
<template slot="extra"> <template slot="extra">
<a href="javascript:void(0);" @click="handleEdit(item)"></a> <a
<a-divider type="vertical"/> href="javascript:void(0);"
@click="handleEdit(item)"
>编辑</a>
<a-divider type="vertical" />
<a-popconfirm <a-popconfirm
title="你确定要删除这条日志?" title="你确定要删除这条日志?"
@confirm="handleDelete(item.id)" @confirm="handleDelete(item.id)"
@ -91,7 +136,11 @@
<a-list-item-meta :description="item.content"> <a-list-item-meta :description="item.content">
<span slot="title">{{ item.createTime | moment }}</span> <span slot="title">{{ item.createTime | moment }}</span>
<a-avatar slot="avatar" size="large" :src="user.avatar"/> <a-avatar
slot="avatar"
size="large"
:src="user.avatar"
/>
</a-list-item-meta> </a-list-item-meta>
</a-list-item> </a-list-item>
<div class="page-wrapper"> <div class="page-wrapper">
@ -115,16 +164,35 @@
<a-modal v-model="visible"> <a-modal v-model="visible">
<template slot="title"> <template slot="title">
{{ title }} {{ title }}
<a-tooltip slot="action" title="只能输入250字"> <a-tooltip
<a-icon type="info-circle-o"/> slot="action"
title="只能输入250字"
>
<a-icon type="info-circle-o" />
</a-tooltip> </a-tooltip>
</template> </template>
<template slot="footer"> <template slot="footer">
<a-button key="submit" type="primary" @click="createOrUpdateJournal"></a-button> <a-button
key="submit"
type="primary"
@click="createOrUpdateJournal"
>发布</a-button>
</template> </template>
<a-form layout="vertical"> <a-form layout="vertical">
<a-form-item> <a-form-item>
<a-input type="textarea" :autosize="{ minRows: 8 }" v-model="journal.content"/> <a-input
type="textarea"
:autosize="{ minRows: 8 }"
v-model="journal.content"
/>
</a-form-item>
<a-form-item>
<a-switch
checkedChildren="公开"
unCheckedChildren="私密"
v-model="isPublic"
defaultChecked
/>
</a-form-item> </a-form-item>
<!-- <a-form-item v-show="showMoreOptions"> <!-- <a-form-item v-show="showMoreOptions">
<UploadPhoto <UploadPhoto
@ -154,11 +222,19 @@
v-model="selectCommentVisible" v-model="selectCommentVisible"
> >
<template slot="footer"> <template slot="footer">
<a-button key="submit" type="primary" @click="handleReplyComment"></a-button> <a-button
key="submit"
type="primary"
@click="handleReplyComment"
>回复</a-button>
</template> </template>
<a-form layout="vertical"> <a-form layout="vertical">
<a-form-item> <a-form-item>
<a-input type="textarea" :autosize="{ minRows: 8 }" v-model="replyComment.content"/> <a-input
type="textarea"
:autosize="{ minRows: 8 }"
v-model="replyComment.content"
/>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
@ -172,16 +248,23 @@
destroyOnClose destroyOnClose
@close="()=>this.commentVisiable = false" @close="()=>this.commentVisiable = false"
> >
<a-row type="flex" align="middle"> <a-row
type="flex"
align="middle"
>
<a-col :span="24"> <a-col :span="24">
<a-comment> <a-comment>
<a-avatar :src="user.avatar" :alt="user.nickname" slot="avatar"/> <a-avatar
:src="user.avatar"
:alt="user.nickname"
slot="avatar"
/>
<p slot="content">{{ journal.content }}</p> <p slot="content">{{ journal.content }}</p>
<span slot="datetime">{{ journal.createTime | moment }}</span> <span slot="datetime">{{ journal.createTime | moment }}</span>
</a-comment> </a-comment>
</a-col> </a-col>
<a-divider/> <a-divider />
<a-col :span="24"> <a-col :span="24">
<journal-comment-tree <journal-comment-tree
v-for="(comment,index) in comments" v-for="(comment,index) in comments"
@ -208,6 +291,7 @@ export default {
components: { JournalCommentTree, UploadPhoto }, components: { JournalCommentTree, UploadPhoto },
data() { data() {
return { return {
journalType: journalApi.journalType,
plusPhotoVisible: true, plusPhotoVisible: true,
photoList: [], // photoList: [], //
previewVisible: false, previewVisible: false,
@ -232,7 +316,8 @@ export default {
page: 0, page: 0,
size: 10, size: 10,
sort: null, sort: null,
keyword: null keyword: null,
type: null
}, },
journals: [], journals: [],
comments: [], comments: [],
@ -241,6 +326,7 @@ export default {
content: '', content: '',
photos: [] photos: []
}, },
isPublic: true,
journalPhotos: [], // journalPhotos: [], //
selectComment: null, selectComment: null,
replyComment: {}, replyComment: {},
@ -349,18 +435,21 @@ export default {
}, },
createOrUpdateJournal() { createOrUpdateJournal() {
// //
this.journal.photos = this.journalPhotos // this.journal.photos = this.journalPhotos
this.journal.type = this.isPublic ? 'PUBLIC' : 'PRIVATE'
if (this.journal.id) { if (this.journal.id) {
journalApi.update(this.journal.id, this.journal).then(response => { journalApi.update(this.journal.id, this.journal).then(response => {
this.$message.success('更新成功!') this.$message.success('更新成功!')
this.loadJournals() this.loadJournals()
this.isPublic = true
}) })
} else { } else {
journalApi.create(this.journal).then(response => { journalApi.create(this.journal).then(response => {
this.$message.success('发表成功!') this.$message.success('发表成功!')
this.loadJournals() this.loadJournals()
this.photoList = [] this.photoList = []
this.isPublic = true
}) })
} }
this.visible = false this.visible = false
@ -373,21 +462,21 @@ export default {
}, },
resetParam() { resetParam() {
this.queryParam.keyword = null this.queryParam.keyword = null
this.queryParam.type = null
this.loadJournals() this.loadJournals()
} }
} }
} }
</script> </script>
<style scoped="scoped"> <style scoped="scoped">
.more-options-btn { /* .more-options-btn {
margin-left: 15px; margin-left: 15px;
text-decoration: none; text-decoration: none;
} }
/* 日志图片卡片样式 */
.photo-card { .photo-card {
width: 104px; width: 104px;
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} } */
</style> </style>