mirror of https://github.com/halo-dev/halo-admin
完善日志图片功能
guqing
parent
9859fcfd74
commit
5547b3b8d9
|
|
@ -8,13 +8,13 @@
|
|||
@preview="handlePreview"
|
||||
@change="handleChange"
|
||||
>
|
||||
<div v-if="fileList.length < 9" id="plus-photo-uploadbox">
|
||||
<a-icon type="plus" />
|
||||
<div v-if="fileList.length < 9 && plusPhotoVisible" id="plus-photo-uploadbox">
|
||||
<a-icon type="plus"/>
|
||||
<div class="ant-upload-text">Upload</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
<img alt="example" style="width: 100%" :src="previewImage">
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -22,7 +22,21 @@
|
|||
import axios from 'axios'
|
||||
import attachmentApi from '@/api/attachment'
|
||||
export default {
|
||||
data () {
|
||||
props: {
|
||||
photoList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
plusPhotoVisible: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: 'file',
|
||||
previewVisible: false,
|
||||
|
|
@ -31,15 +45,40 @@ export default {
|
|||
uploadHandler: attachmentApi.upload
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 在生命周期开始时调用一次赋值解决watch没有监控到数据的问题
|
||||
this.handlerEditPreviewPhoto(this.photoList)
|
||||
},
|
||||
watch: {
|
||||
photoList(newValue, oldValue) {
|
||||
this.handlerEditPreviewPhoto(newValue)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCancel () {
|
||||
handlerEditPreviewPhoto(data) {
|
||||
// 先清空
|
||||
this.fileList = []
|
||||
// 编辑日志时回显图片
|
||||
if (data !== null && data !== undefined) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
// 构造合适的对象
|
||||
this.fileList.push({
|
||||
uid: data[i].id,
|
||||
name: data[i].name,
|
||||
status: 'done',
|
||||
url: data[i].thumbnail
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
handleCancel() {
|
||||
this.previewVisible = false
|
||||
},
|
||||
handlePreview (file) {
|
||||
handlePreview(file) {
|
||||
this.previewImage = file.url || file.thumbUrl
|
||||
this.previewVisible = true
|
||||
},
|
||||
handleChange ({ fileList }) {
|
||||
handleChange({ fileList }) {
|
||||
this.fileList = fileList
|
||||
},
|
||||
handleUpload(option) {
|
||||
|
|
@ -79,22 +118,22 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* you can make up upload button and sample style by using stylesheets */
|
||||
.ant-upload-select-picture-card i {
|
||||
/* you can make up upload button and sample style by using stylesheets */
|
||||
.ant-upload-select-picture-card i {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
.ant-upload-list-picture-card {
|
||||
}
|
||||
.ant-upload-list-picture-card {
|
||||
/* 将浮动恢复为默认值,避免出现纵向换行情况 */
|
||||
float: initial;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -203,12 +203,10 @@
|
|||
|
||||
<!-- 日志图片上传 -->
|
||||
<a-form-item v-show="showMoreOptions">
|
||||
<UploadPhoto></UploadPhoto>
|
||||
<!-- <a-collapse :bordered="false">
|
||||
<a-collapse-panel key="1">
|
||||
|
||||
</a-collapse-panel>
|
||||
</a-collapse> -->
|
||||
<UploadPhoto
|
||||
@success="handlerPhotoUploadSuccess"
|
||||
:photoList="photoList"
|
||||
></UploadPhoto>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
|
|
@ -216,7 +214,9 @@
|
|||
type="primary"
|
||||
@click="handleCreateJournalClick"
|
||||
>保存</a-button>
|
||||
<a href="javascript:;" class="more-options-btn"
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="more-options-btn"
|
||||
type="default"
|
||||
@click="handleUploadPhotoWallClick"
|
||||
>更多选项<a-icon type="down" /></a>
|
||||
|
|
@ -346,6 +346,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
photoList: [],
|
||||
showMoreOptions: false,
|
||||
startVal: 0,
|
||||
logType: logApi.logType,
|
||||
|
|
@ -357,7 +358,11 @@ export default {
|
|||
postData: [],
|
||||
logData: [],
|
||||
countsData: {},
|
||||
journal: {},
|
||||
journal: {
|
||||
content: '',
|
||||
photos: []
|
||||
},
|
||||
journalPhotos: [], // 日志图片集合最多九张
|
||||
logs: [],
|
||||
options: [],
|
||||
keys: ['blog_url'],
|
||||
|
|
@ -416,6 +421,18 @@ export default {
|
|||
next()
|
||||
},
|
||||
methods: {
|
||||
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)
|
||||
},
|
||||
loadOptions() {
|
||||
optionApi.listAll(this.keys).then(response => {
|
||||
this.options = response.data.data
|
||||
|
|
@ -444,12 +461,17 @@ export default {
|
|||
this.$router.push({ name: 'PostEdit', query: { postId: post.id } })
|
||||
},
|
||||
handleCreateJournalClick() {
|
||||
// 给属性填充数据
|
||||
this.journal.photos = this.journalPhotos
|
||||
|
||||
journalApi.create(this.journal).then(response => {
|
||||
this.$message.success('发表成功！')
|
||||
this.journal = {}
|
||||
this.photoList = []
|
||||
this.showMoreOptions = false
|
||||
})
|
||||
},
|
||||
handleUploadPhotoWallClick(){
|
||||
handleUploadPhotoWallClick() {
|
||||
// 是否显示上传照片墙组件
|
||||
this.showMoreOptions = !this.showMoreOptions
|
||||
},
|
||||
|
|
@ -486,5 +508,4 @@ export default {
|
|||
margin-left: 15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,18 +6,12 @@
|
|||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col
|
||||
:md="6"
|
||||
:sm="24"
|
||||
>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="关键词">
|
||||
<a-input v-model="queryParam.keyword" />
|
||||
<a-input v-model="queryParam.keyword"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
:md="6"
|
||||
:sm="24"
|
||||
>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="状态">
|
||||
<a-select placeholder="请选择状态">
|
||||
<a-select-option value="1">公开</a-select-option>
|
||||
|
|
@ -25,32 +19,19 @@
|
|||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
:md="6"
|
||||
:sm="24"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<a-button type="primary" icon="plus" @click="handleNew">写日志</a-button>
|
||||
</div>
|
||||
<a-divider />
|
||||
<a-divider/>
|
||||
<div style="margin-top:15px">
|
||||
<a-list
|
||||
itemLayout="vertical"
|
||||
|
|
@ -58,42 +39,46 @@
|
|||
:dataSource="journals"
|
||||
: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
|
||||
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-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 href="javascript:void(0);" @click="handleCommentShow(item)">
|
||||
<a-icon type="message" style="margin-right: 8px"/>
|
||||
{{ item.commentCount }}
|
||||
</a>
|
||||
</span>
|
||||
<!-- <span>
|
||||
From 微信
|
||||
</span> -->
|
||||
</span>-->
|
||||
</template>
|
||||
<template slot="extra">
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
@click="handleEdit(item)"
|
||||
>编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a href="javascript:void(0);" @click="handleEdit(item)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm
|
||||
title="你确定要删除这条日志？"
|
||||
@confirm="handleDelete(item.id)"
|
||||
|
|
@ -103,13 +88,10 @@
|
|||
<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-avatar slot="avatar" size="large" :src="user.avatar"/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<div class="page-wrapper">
|
||||
|
|
@ -132,38 +114,35 @@
|
|||
<!-- 编辑日志弹窗 -->
|
||||
<a-modal v-model="visible">
|
||||
<template slot="title">
|
||||
{{ title }} <a-tooltip
|
||||
slot="action"
|
||||
title="只能输入250字"
|
||||
>
|
||||
<a-icon type="info-circle-o" />
|
||||
{{ 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>
|
||||
<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-input type="textarea" :autosize="{ minRows: 8 }" v-model="journal.content"/>
|
||||
</a-form-item>
|
||||
<a-form-item v-show="showMoreOptions">
|
||||
<UploadPhoto @success="handlerPhotoUploadSuccess"></UploadPhoto>
|
||||
<UploadPhoto
|
||||
@success="handlerPhotoUploadSuccess"
|
||||
:photoList="photoList"
|
||||
:plusPhotoVisible="plusPhotoVisible"
|
||||
></UploadPhoto>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a href="javascript:;" class="more-options-btn"
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="more-options-btn"
|
||||
type="default"
|
||||
@click="handleUploadPhotoWallClick"
|
||||
>更多选项<a-icon type="down" /></a>
|
||||
>
|
||||
更多选项
|
||||
<a-icon type="down"/>
|
||||
</a>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
|
@ -175,21 +154,11 @@
|
|||
v-model="selectCommentVisible"
|
||||
>
|
||||
<template slot="footer">
|
||||
<a-button
|
||||
key="submit"
|
||||
type="primary"
|
||||
@click="handleReplyComment"
|
||||
>
|
||||
回复
|
||||
</a-button>
|
||||
<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-input type="textarea" :autosize="{ minRows: 8 }" v-model="replyComment.content"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
|
@ -203,23 +172,16 @@
|
|||
destroyOnClose
|
||||
@close="()=>this.commentVisiable = false"
|
||||
>
|
||||
<a-row
|
||||
type="flex"
|
||||
align="middle"
|
||||
>
|
||||
<a-row type="flex" align="middle">
|
||||
<a-col :span="24">
|
||||
<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>
|
||||
|
||||
<span slot="datetime">{{ journal.createTime | moment }}</span>
|
||||
</a-comment>
|
||||
</a-col>
|
||||
<a-divider />
|
||||
<a-divider/>
|
||||
<a-col :span="24">
|
||||
<journal-comment-tree
|
||||
v-for="(comment,index) in comments"
|
||||
|
|
@ -246,7 +208,16 @@ export default {
|
|||
components: { JournalCommentTree, UploadPhoto },
|
||||
data() {
|
||||
return {
|
||||
plusPhotoVisible: true,
|
||||
photoList: [], // 编辑图片时回显所需对象
|
||||
previewVisible: false,
|
||||
showMoreOptions: false,
|
||||
previewPhoto: {
|
||||
// 图片预览信息临时对象
|
||||
name: '',
|
||||
description: '',
|
||||
url: ''
|
||||
},
|
||||
title: '发表',
|
||||
listLoading: false,
|
||||
visible: false,
|
||||
|
|
@ -266,14 +237,14 @@ export default {
|
|||
journals: [],
|
||||
comments: [],
|
||||
journal: {
|
||||
id: null,
|
||||
id: undefined,
|
||||
content: '',
|
||||
photos: []
|
||||
},
|
||||
journalPhotos: [],
|
||||
journalPhotos: [], // 日志图片集合最多九张
|
||||
selectComment: null,
|
||||
replyComment: {},
|
||||
user: {},
|
||||
user: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -281,7 +252,15 @@ export default {
|
|||
this.loadUser()
|
||||
},
|
||||
methods: {
|
||||
handlerPhotoUploadSuccess(response, file){
|
||||
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,
|
||||
|
|
@ -293,7 +272,7 @@ export default {
|
|||
}
|
||||
this.journalPhotos.push(photo)
|
||||
},
|
||||
handleUploadPhotoWallClick(){
|
||||
handleUploadPhotoWallClick() {
|
||||
// 是否显示上传照片墙组件
|
||||
this.showMoreOptions = !this.showMoreOptions
|
||||
},
|
||||
|
|
@ -320,11 +299,19 @@ export default {
|
|||
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 => {
|
||||
|
|
@ -373,6 +360,7 @@ export default {
|
|||
journalApi.create(this.journal).then(response => {
|
||||
this.$message.success('发表成功！')
|
||||
this.loadJournals()
|
||||
this.photoList = []
|
||||
})
|
||||
}
|
||||
this.visible = false
|
||||
|
|
@ -391,9 +379,15 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<style scoped="scoped">
|
||||
.more-options-btn{
|
||||
.more-options-btn {
|
||||
margin-left: 15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 日志图片卡片样式 */
|
||||
.photo-card {
|
||||
width: 104px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue