mirror of https://github.com/halo-dev/halo
483 lines
14 KiB
Vue
483 lines
14 KiB
Vue
<template>
|
|
<div class="page-header-index-wide">
|
|
<a-row>
|
|
<a-col :span="24">
|
|
<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
|
|
placeholder="请选择状态"
|
|
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-form-item>
|
|
</a-col>
|
|
<a-col
|
|
:md="6"
|
|
:sm="24"
|
|
>
|
|
<span class="table-page-search-submitButtons">
|
|
<a-button
|
|
type="primary"
|
|
@click="loadJournals(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="handleNew"
|
|
>写日志</a-button>
|
|
</div>
|
|
<a-divider />
|
|
<div style="margin-top:15px">
|
|
<a-list
|
|
itemLayout="vertical"
|
|
:pagination="false"
|
|
:dataSource="journals"
|
|
:loading="listLoading"
|
|
>
|
|
<a-list-item
|
|
slot="renderItem"
|
|
slot-scope="item, index"
|
|
:key="index"
|
|
>
|
|
<!-- 日志图片集合 -->
|
|
<!-- <a-card
|
|
hoverable
|
|
v-for="(photo, photoIndex) in item.photos"
|
|
:key="photoIndex"
|
|
class="photo-card"
|
|
@click="handlerPhotoPreview(photo)"
|
|
>
|
|
<img alt="example" :src="photo.thumbnail" slot="cover">
|
|
</a-card> -->
|
|
|
|
<a-modal
|
|
:visible="previewVisible"
|
|
:footer="null"
|
|
@cancel="handleCancelPreview"
|
|
>
|
|
<img
|
|
:alt="previewPhoto.name + previewPhoto.description"
|
|
style="width: 100%"
|
|
:src="previewPhoto.url"
|
|
>
|
|
</a-modal>
|
|
|
|
<template slot="actions">
|
|
<span>
|
|
<a href="javascript:void(0);">
|
|
<a-icon
|
|
type="like-o"
|
|
style="margin-right: 8px"
|
|
/>
|
|
{{ item.likes }}
|
|
</a>
|
|
</span>
|
|
<span>
|
|
<a
|
|
href="javascript:void(0);"
|
|
@click="handleCommentShow(item)"
|
|
>
|
|
<a-icon
|
|
type="message"
|
|
style="margin-right: 8px"
|
|
/>
|
|
{{ item.commentCount }}
|
|
</a>
|
|
</span>
|
|
<!-- <span>
|
|
From 微信
|
|
</span>-->
|
|
</template>
|
|
<template slot="extra">
|
|
<a
|
|
href="javascript:void(0);"
|
|
@click="handleEdit(item)"
|
|
>编辑</a>
|
|
<a-divider type="vertical" />
|
|
<a-popconfirm
|
|
title="你确定要删除这条日志？"
|
|
@confirm="handleDelete(item.id)"
|
|
okText="确定"
|
|
cancelText="取消"
|
|
>
|
|
<a href="javascript:void(0);">删除</a>
|
|
</a-popconfirm>
|
|
</template>
|
|
|
|
<a-list-item-meta :description="item.content">
|
|
<span slot="title">{{ item.createTime | moment }}</span>
|
|
<a-avatar
|
|
slot="avatar"
|
|
size="large"
|
|
:src="user.avatar"
|
|
/>
|
|
</a-list-item-meta>
|
|
</a-list-item>
|
|
<div class="page-wrapper">
|
|
<a-pagination
|
|
class="pagination"
|
|
:total="pagination.total"
|
|
:defaultPageSize="pagination.size"
|
|
:pageSizeOptions="['1', '2', '5', '10', '20', '50', '100']"
|
|
showSizeChanger
|
|
@showSizeChange="onPaginationChange"
|
|
@change="onPaginationChange"
|
|
/>
|
|
</div>
|
|
</a-list>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<!-- 编辑日志弹窗 -->
|
|
<a-modal v-model="visible">
|
|
<template slot="title">
|
|
{{ title }}
|
|
<a-tooltip
|
|
slot="action"
|
|
title="只能输入250字"
|
|
>
|
|
<a-icon type="info-circle-o" />
|
|
</a-tooltip>
|
|
</template>
|
|
<template slot="footer">
|
|
<a-button
|
|
key="submit"
|
|
type="primary"
|
|
@click="createOrUpdateJournal"
|
|
>发布</a-button>
|
|
</template>
|
|
<a-form layout="vertical">
|
|
<a-form-item>
|
|
<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 v-show="showMoreOptions">
|
|
<UploadPhoto
|
|
@success="handlerPhotoUploadSuccess"
|
|
:photoList="photoList"
|
|
:plusPhotoVisible="plusPhotoVisible"
|
|
></UploadPhoto>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a
|
|
href="javascript:;"
|
|
class="more-options-btn"
|
|
type="default"
|
|
@click="handleUploadPhotoWallClick"
|
|
>
|
|
更多选项
|
|
<a-icon type="down"/>
|
|
</a>
|
|
</a-form-item> -->
|
|
</a-form>
|
|
</a-modal>
|
|
|
|
<!-- 评论回复弹窗 -->
|
|
<a-modal
|
|
v-if="selectComment"
|
|
:title="'回复给：'+selectComment.author"
|
|
v-model="selectCommentVisible"
|
|
>
|
|
<template slot="footer">
|
|
<a-button
|
|
key="submit"
|
|
type="primary"
|
|
@click="handleReplyComment"
|
|
>回复</a-button>
|
|
</template>
|
|
<a-form layout="vertical">
|
|
<a-form-item>
|
|
<a-input
|
|
type="textarea"
|
|
:autosize="{ minRows: 8 }"
|
|
v-model="replyComment.content"
|
|
/>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
|
|
<!-- 评论列表抽屉 -->
|
|
<a-drawer
|
|
title="评论列表"
|
|
:width="isMobile()?'100%':'460'"
|
|
closable
|
|
:visible="commentVisiable"
|
|
destroyOnClose
|
|
@close="()=>this.commentVisiable = false"
|
|
>
|
|
<a-row
|
|
type="flex"
|
|
align="middle"
|
|
>
|
|
<a-col :span="24">
|
|
<a-comment>
|
|
<a-avatar
|
|
:src="user.avatar"
|
|
:alt="user.nickname"
|
|
slot="avatar"
|
|
/>
|
|
<p slot="content">{{ journal.content }}</p>
|
|
|
|
<span slot="datetime">{{ journal.createTime | moment }}</span>
|
|
</a-comment>
|
|
</a-col>
|
|
<a-divider />
|
|
<a-col :span="24">
|
|
<journal-comment-tree
|
|
v-for="(comment,index) in comments"
|
|
:key="index"
|
|
:comment="comment"
|
|
@reply="handleCommentReplyClick"
|
|
@delete="handleCommentDelete"
|
|
/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import JournalCommentTree from './components/JournalCommentTree'
|
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
|
import journalApi from '@/api/journal'
|
|
import journalCommentApi from '@/api/journalComment'
|
|
import userApi from '@/api/user'
|
|
import UploadPhoto from '@/components/Upload/UploadPhoto.vue'
|
|
export default {
|
|
mixins: [mixin, mixinDevice],
|
|
components: { JournalCommentTree, UploadPhoto },
|
|
data() {
|
|
return {
|
|
journalType: journalApi.journalType,
|
|
plusPhotoVisible: true,
|
|
photoList: [], // 编辑图片时回显所需对象
|
|
previewVisible: false,
|
|
showMoreOptions: false,
|
|
previewPhoto: {
|
|
// 图片预览信息临时对象
|
|
name: '',
|
|
description: '',
|
|
url: ''
|
|
},
|
|
title: '发表',
|
|
listLoading: false,
|
|
visible: false,
|
|
commentVisiable: false,
|
|
selectCommentVisible: false,
|
|
pagination: {
|
|
page: 1,
|
|
size: 10,
|
|
sort: null
|
|
},
|
|
queryParam: {
|
|
page: 0,
|
|
size: 10,
|
|
sort: null,
|
|
keyword: null,
|
|
type: null
|
|
},
|
|
journals: [],
|
|
comments: [],
|
|
journal: {
|
|
id: undefined,
|
|
content: '',
|
|
photos: []
|
|
},
|
|
isPublic: true,
|
|
journalPhotos: [], // 日志图片集合最多九张
|
|
selectComment: null,
|
|
replyComment: {},
|
|
user: {}
|
|
}
|
|
},
|
|
created() {
|
|
this.loadJournals()
|
|
this.loadUser()
|
|
},
|
|
methods: {
|
|
handleCancelPreview() {
|
|
this.previewVisible = false
|
|
},
|
|
handlerPhotoPreview(photo) {
|
|
// 日志图片预览
|
|
this.previewVisible = true
|
|
this.previewPhoto = photo
|
|
},
|
|
handlerPhotoUploadSuccess(response, file) {
|
|
var callData = response.data.data
|
|
var photo = {
|
|
name: callData.name,
|
|
url: callData.path,
|
|
thumbnail: callData.thumbPath,
|
|
suffix: callData.suffix,
|
|
width: callData.width,
|
|
height: callData.height
|
|
}
|
|
this.journalPhotos.push(photo)
|
|
},
|
|
handleUploadPhotoWallClick() {
|
|
// 是否显示上传照片墙组件
|
|
this.showMoreOptions = !this.showMoreOptions
|
|
},
|
|
loadJournals(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
|
|
journalApi.query(this.queryParam).then(response => {
|
|
this.journals = response.data.data.content
|
|
this.pagination.total = response.data.data.total
|
|
this.listLoading = false
|
|
})
|
|
},
|
|
loadUser() {
|
|
userApi.getProfile().then(response => {
|
|
this.user = response.data.data
|
|
})
|
|
},
|
|
handleNew() {
|
|
this.title = '新建'
|
|
this.visible = true
|
|
this.journal = {}
|
|
|
|
// 显示图片上传框
|
|
this.plusPhotoVisible = true
|
|
this.photoList = []
|
|
},
|
|
handleEdit(item) {
|
|
this.title = '编辑'
|
|
this.journal = item
|
|
this.visible = true
|
|
|
|
// 为编辑时需要回显图片数组赋值,并隐藏图片上传框
|
|
this.plusPhotoVisible = false
|
|
this.photoList = item.photos
|
|
},
|
|
handleDelete(id) {
|
|
journalApi.delete(id).then(response => {
|
|
this.$message.success('删除成功！')
|
|
this.loadJournals()
|
|
})
|
|
},
|
|
handleCommentShow(journal) {
|
|
this.journal = journal
|
|
journalApi.commentTree(this.journal.id).then(response => {
|
|
this.comments = response.data.data.content
|
|
this.commentVisiable = true
|
|
})
|
|
},
|
|
handleCommentReplyClick(comment) {
|
|
this.selectComment = comment
|
|
this.selectCommentVisible = true
|
|
this.replyComment.parentId = comment.id
|
|
this.replyComment.postId = this.journal.id
|
|
},
|
|
handleReplyComment() {
|
|
journalCommentApi.create(this.replyComment).then(response => {
|
|
this.$message.success('回复成功！')
|
|
this.replyComment = {}
|
|
this.selectComment = {}
|
|
this.selectCommentVisible = false
|
|
this.handleCommentShow(this.journal)
|
|
})
|
|
},
|
|
handleCommentDelete(comment) {
|
|
journalCommentApi.delete(comment.id).then(response => {
|
|
this.$message.success('删除成功！')
|
|
this.handleCommentShow(this.journal)
|
|
})
|
|
},
|
|
createOrUpdateJournal() {
|
|
// 给属性填充数据
|
|
// this.journal.photos = this.journalPhotos
|
|
this.journal.type = this.isPublic ? 'PUBLIC' : 'PRIVATE'
|
|
|
|
if (this.journal.id) {
|
|
journalApi.update(this.journal.id, this.journal).then(response => {
|
|
this.$message.success('更新成功！')
|
|
this.loadJournals()
|
|
this.isPublic = true
|
|
})
|
|
} else {
|
|
journalApi.create(this.journal).then(response => {
|
|
this.$message.success('发表成功！')
|
|
this.loadJournals()
|
|
this.photoList = []
|
|
this.isPublic = true
|
|
})
|
|
}
|
|
this.visible = false
|
|
},
|
|
onPaginationChange(page, pageSize) {
|
|
this.$log.debug(`Current: ${page}, PageSize: ${pageSize}`)
|
|
this.pagination.page = page
|
|
this.pagination.size = pageSize
|
|
this.loadJournals()
|
|
},
|
|
resetParam() {
|
|
this.queryParam.keyword = null
|
|
this.queryParam.type = null
|
|
this.loadJournals()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped="scoped">
|
|
/* .more-options-btn {
|
|
margin-left: 15px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.photo-card {
|
|
width: 104px;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
} */
|
|
</style>
|