<template>
<div class="createPost-container">
<el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
<sticky :class-name="'sub-navbar '+postForm.status">
<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">保存
</el-button>
</sticky>
<div class="createPost-main-container">
<el-row :gutter="20">
<el-card class="box-card">
<div slot="header" class="clearfix">
<div style="float: left; text-align: center;">
帖子相关
</div>
</div>
<el-row>
<el-col :span="24">
<div class="postInfo-container">
<el-row>
<el-col :span="12">
<el-form-item label-width="75px" label="帖子ID:" class="postInfo-container-item" v-if="isEdit">
<el-input :rows="1" v-model="postForm.id" type="number" class="article-textarea"
style="width: 230px" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="75px" label="举报时间:" class="postInfo-container-item" v-if="isEdit">
<el-input :rows="1" v-model="postForm.reported_time" type="text" class="article-textarea"
style="width: 230px" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label-width="65px" label="发帖人:" class="postInfo-container-item">
<el-select v-model="user" :remote-method="getRemoteUserList" filterable remote clearable
placeholder="搜索用户" style="width: 230px;margin-left: 10px">
<el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item"
:value="item"/>
</el-select>
<el-tag type="danger" v-if="postForm.is_puppet">马甲</el-tag>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="75px" label="发帖时间:" class="postInfo-container-item"
prop="posting_time">
<el-date-picker
v-model="postForm.posting_time "
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="expireTimeOption"
placeholder="选择日期时间"
style="width: 230px"
:disabled="this.isEdit"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label-width="75px" label="明星名称:" class="postInfo-container-item">
<el-select v-model="star" :remote-method="getRemoteStarList" filterable remote clearable
placeholder="搜索明星" style="width: 230px">
<el-option v-for="(item,index) in starListOptions" :key="item+index" :label="item"
:value="item"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="75px" label="小组名称:" class="postInfo-container-item">
<el-select v-model="group" :remote-method="getRemoteGroupList" filterable remote clearable
placeholder="搜索小组" style="width: 230px">
<el-option v-for="(item,index) in groupListOptions" :key="item+index" :label="item"
:value="item"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label-width="75px" label="帖子星级:" class="postInfo-container-item">
<el-select v-model="postForm.content_level" :placeholder="'级别:'" clearable
class="postInfo-container-item" style="width:230px">
<el-option v-for="item in TopicLevelOptions" :key="item.key" :label="item.display_name"
:value="item.key"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="75px" label="标签:" class="postInfo-container-item">
<el-select v-model="tags" :remote-method="getRemoteTagList" filterable remote
multiple value-key="id"
placeholder="搜索标签" style="width: 230px">
<el-option v-for="(item,index) in tagListOptions" :key="item+index" :label="item"
:value="item"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-form-item label-width="75px" label="人工减分:" class="postInfo-container-item" style="margin-bottom: 20px">
<el-input v-model="postForm.drop_score" type="number" style="width: 80%"/>
</el-form-item>
<el-form-item style="margin-bottom: 20px" label-width="75px" label="是否在线:">
<el-radio-group v-model="postForm.is_online">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item style="margin-bottom: 40px;" label-width="75px" label="帖子内容:">
<el-input :rows="1" v-model="postForm.content" type="textarea" class="article-textarea" autosize
placeholder="请输入内容"/>
<span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>
</el-form-item>
<div class="item real">
<div class="name">
<span style="color: #606266;text-align:center;font-size:14px;padding:0 12px 0 0;">帖子图片</span>
</div>
<div class="value" style="margin-left: 50px">
<edit-upload :value="edit.hospital_pics" @input="uploadPics" multiple :limit="9" :uploadType="'26'"
@limit="uploadRealLimit"></edit-upload>
<div class="error_icon" v-show="showHospitalPicTip">
<span class="icon-warn">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</span>
</div>
</div>
</div>
<div v-if="hide">
<div class="item video">
<div class="name">
<span style="color: #606266;text-align:center;font-size:14px;padding:0 12px 0 0;">帖子视频</span>
</div>
<div class="value" style="margin-left: 50px">
<div class="up-video">
<ul class="video-items clearfix" v-if="edit.video_url">
<li class="video-item" @click.stop="playVideo">
<video ref="previewVideo" :src="videoUrl"></video>
<span class="close" @click.stop="removeVideo"></span>
</li>
</ul>
<form v-else :class="{ uploading: uploading }">
<input name="token" type="hidden" v-model="video_token">
<input name="file" type="file" class="file" @change="uploadVideo"
accept="video/mp4, video/x-m4v, video/quicktime, video/*">
<div class="loader" v-show="uploading">
<span class="preloader"></span>
<p>上传中...</p>
</div>
</form>
</div>
<modal :show="videoVisible" @click="videoVisible = false">
<div class="preview-video" @click.stop="">
<video-player
:options="opts"
:playsinline="true"
ref="videoPlayer">
</video-player>
</div>
</modal>
</div>
</div>
</div>
</el-card>
</el-row>
<el-row :gutter="20" style="margin-top:50px;" v-if="isEdit">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>评论相关</span>
</div>
<div style="margin-bottom:50px;">
<div class="filter-container">
<el-select v-model="listQuery.filter.type" :placeholder="'评论搜索'" clearable class="filter-item"
style="width: 120px">
<el-option v-for="item in ReplyTypeOptions" :key="item.key" :label="item.display_name"
:value="item.key"/>
</el-select>
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索
</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-edit" @click="reply('')">回复话题</el-button>
<el-button v-waves class="filter-item" type="primary" icon="el-icon-delete" @click="delreply">下线
</el-button>
</div>
<el-table :data="list" border fit highlight-current-row style="width: 100%"
ref="multipleTable" @selection-change="handleSelectionChange">
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column align="center" label="回复ID ">
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="评论用户">
<template slot-scope="scope">
<span>{{ scope.row.reply_user.name }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="被评论用户">
<template slot-scope="scope">
<span>{{ scope.row.be_reply_user.name }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="评论时间">
<template slot-scope="scope">
<span>{{ scope.row.create_time }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="贴主评论">
<template slot-scope="scope">
<span>{{ scope.row.reply_type }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="是否在线">
<template slot-scope="scope">
<el-tag :type="scope.row.is_online | isOnlineFilter">{{ scope.row.is_online=== 1 ? '是' : '否' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="评论内容">
<template slot-scope="scope">
<span >{{ scope.row.content }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" >
<template slot-scope="scope">
<el-button class="filter-item" type="primary" icon="el-icon-edit" @click="reply(scope.row)">回复</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
style="margin-left: 150px;" @pagination="getList"/>
</div>
</el-card>
</el-row>
</div>
</el-form>
<el-dialog :visible.sync="dialogFormVisible">
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px"
style="width: 400px; margin-left:50px;">
<el-form-item :label="'评论用户'" prop="user_name">
<el-select v-model="temp.user_id" :remote-method="getRemoteUserList" filterable remote
value-key="id"
placeholder="搜索用户" style="width: 100%">
<el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item"/>
</el-select>
</el-form-item>
<el-form-item :label="'评论内容'">
<el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.content" type="textarea"
placeholder="Please input"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()" :disabled="this.is_click">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
import MDinput from '@/components/MDinput'
import Sticky from '@/components/Sticky' // 粘性header组件
import Dropzone from '@/components/Dropzone'
import Pagination from '@/components/Pagination'
import EditUpload from '@/components/Upload/EditUpload'
import Modal from '@/components/Modal'
import VideoPlayer from '@/components/Video'
import waves from '@/directive/waves'
import {createRemark, fetchTopic, createTopic, fetchReply, DelReply, ModifyReply} from '@/api/topic'
import {fetchList} from '@/api/user'
import {getToken} from '@/api/qiniu'
import {postVideo} from '@/api/upload'
import {userSearch, groupSearch, starSearch, tagSearch} from '@/api/remoteSearch'
import {VIDEO_PREFIX} from '@/components/Upload/utils/default'
const VIDEO_MAX_SIZE = 100 * 1024 * 1024
const defaultForm = {
status: 'draft',
id: '',
posting_time: '',
content: '',
content_level: 0,
reported_time: '',
group: '',
user: '',
star: '',
is_puppet: '',
is_online: 0,
drop_score: 0,
}
export default {
name: 'GroupDetail',
components: {MDinput, Sticky, Dropzone, Pagination, EditUpload, VideoPlayer, Modal},
directives: {waves},
props: {
isEdit: {
type: Boolean,
default: false
}
},
filters: {
isOnlineFilter(status) {
const statusMap = {
1: 'success',
0: 'info',
}
return statusMap[status]
},
},
data() {
const validateRequire = (rule, value, callback) => {
if (value === '') {
this.$message({
message: rule.field + '为必传项',
type: 'error'
})
callback(new Error(rule.field + '为必传项'))
} else {
callback()
}
}
return {
postForm: Object.assign({}, defaultForm),
loading: false,
is_click: false,
user: '',
star: '',
group: '',
tags: [],
// 搜索相关
userListOptions: [],
groupListOptions: [],
starListOptions: [],
// 表单验证相关
rules: {
posting_time: [{validator: validateRequire, trigger: 'blur'}],
},
ReplyTypeOptions: [
{'key': '1', 'display_name': '帖主的评论'},
{'key': '2', 'display_name': '评论帖子'},
{'key': '3', 'display_name': '评论的回复'},
{'key': '4', 'display_name': '马甲的评论'},
{'key': '5', 'display_name': '马甲评论的回复'},
],
edit: {
video_url: '',
hospital_pics: []
},
expireTimeOption: {
disabledDate(date) {
return date.getTime() <= Date.now();
}
},
tempRoute: {},
TopicLevelOptions: [
{'key': 0, 'display_name': '未审核'},
{'key': 1, 'display_name': '1星'},
{'key': 2, 'display_name': '2星'},
{'key': 3, 'display_name': '3星'},
{'key': 4, 'display_name': '4星'},
{'key': 5, 'display_name': '5星'},
],
list: null,
total: 1,
listLoading: true,
showHospitalPicTip: false,
areaType: 1,
multipleSelection: [],
tagListOptions: [],
is_puppet: 0,
listQuery: {
id: '',
page: 0,
limit: 10,
filter: {
type: ''
},
},
// 视频上传
video_token: '',
uploading: false,
poster: '',
progress: 0,
complete: false,
// 视频弹窗
videoVisible: false,
editInstrument: false,
opts: {
muted: true,
language: 'zh-CN',
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [],
poster: '',
height: 400
},
temp: {
user_id: '',
content: '',
be_replied_id: '',
},
dialogFormVisible: false,
dialogStatus: '',
query: {}
}
},
computed: {
contentShortLength() {
return this.postForm.content.length
},
lang() {
return this.$store.getters.language
},
player() {
return this.$ref.videoPlayer
},
},
created() {
if (this.isEdit) {
const id = this.$route.params && this.$route.params.id
this.fetchData(id)
this.getList()
getToken().then(response => {
this.video_token = response.data.data.token;
})
} else {
this.postForm = Object.assign({}, defaultForm)
getToken().then(response => {
this.video_token = response.data.data.token;
})
}
this.tempRoute = Object.assign({}, this.$route)
},
methods: {
fetchData(id) {
fetchTopic(id).then(response => {
console.log(response.data.data.data)
let star = response.data.data.data.star
let group = response.data.data.data.group
let user = response.data.data.data.user
let tags = response.data.data.data.tags
this.postForm = response.data.data.data
for (let i = 0; i < tags.length; i++) {
this.tags.push(tags[i].id + ':' + tags[i].name);
}
if (star.id && star.name){
this.star = star.id + ':' + star.name
}else{
this.star = ''
}
if (group.id && group.name){
this.group = group.id + ':' + group.name
}else{
this.group = ''
}
this.user = user.id + ':' + user.name
this.postForm.is_puppet = user.is_puppet
this.edit.hospital_pics = response.data.data.data.topic_images
this.edit.video_url = response.data.data.data.video_url
}).catch(err => {
console.log(err)
})
},
submitForm() {
this.$refs.postForm.validate(valid => {
if (valid) {
this.loading = true
if (!this.tags.length){
this.$message.error('标签必填')
this.loading = false
return false
}
if (!this.user){
this.$message.error('发帖人必填')
this.loading = false
return false
}
this.postForm.tags = JSON.stringify(this.tags)
this.postForm.user = this.user;
this.postForm.star = this.star;
this.postForm.group = this.group;
// 序列化图片
this.postForm.topic_images = JSON.stringify(this.edit.hospital_pics);
this.postForm.video_url = this.edit.video_url;
createTopic(this.postForm).then(response => {
this.$notify({
title: '成功',
message: response.data.data.message,
type: 'success',
duration: 2000
})
setTimeout(() => {
this.$router.push('/topic/list')
}, 1000)
}).catch(err => {
this.$notify({
title: '失败',
message: '操作失败',
type: 'danger',
duration: 2000
})
});
this.postForm.status = 'published'
this.loading = false
} else {
console.log('error submit!!')
return false
}
})
},
// 远程数据搜索
getRemoteUserList(query) {
userSearch(query).then(response => {
if (!response.data.data.data) return
this.userListOptions = response.data.data.data
})
},
getRemoteGroupList(query) {
groupSearch(query).then(response => {
if (!response.data.data.data) return
this.groupListOptions = response.data.data.data
})
},
getRemoteStarList(query) {
starSearch(query).then(response => {
if (!response.data.data.data) return
this.starListOptions = response.data.data.data
})
},
getRemoteTagList(query) {
this.query['name'] = query
tagSearch(this.query).then(response => {
if (!response.data.data.data) return
this.tagListOptions = response.data.data.data
})
},
delreply() {
const length = this.multipleSelection.length
let del_list = []
for (let i = 0; i < length; i++) {
del_list.push(this.multipleSelection[i].id)
}
DelReply({'reply_ids': JSON.stringify(del_list)}).then(response => {
this.$message({
message: response.data.data.message,
type: 'success'
})
})
setTimeout(() => {
this.$router.go(0)
}, 1000)
},
getList() {
this.listLoading = true
this.listQuery.id = this.$route.params && this.$route.params.id
fetchReply(this.listQuery).then(response => {
const items = response.data.data.data
this.list = items.map(v => {
this.$set(v, 'edit', false)
v.originalcontent = v.content
return v
})
this.total = response.data.data.total
this.listLoading = false
})
},
// 图片上传
dropzoneS(file) {
this.$message({message: 'Upload success', type: 'success'})
},
dropzoneR(file) {
this.$message({message: 'Delete success', type: 'success'})
},
uploadPics(images) {
this.edit.hospital_pics = images
},
uploadRealLimit() {
this.$message({
message: '最多上传9张',
type: 'warning'
})
},
hide() {
return Number(this.areaType) === 1
},
// 分页相关
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 上传视频
uploadVideo(e) {
let file = e.target.files[0]
let token = this.video_token
// 校验video类型
if (!/video\/\w+/.test(file.type)) {
this.$message({
message: '请上传视频格式',
type: 'warning'
})
return false
}
if (file.size > VIDEO_MAX_SIZE) {
this.$message({
message: '视频大小不能超过100M, 请压缩后上传',
type: 'warning'
})
return false
}
const uploadQiniu = (file, token) => {
if (this.uploading) return
this.uploading = true
let formdata = new window.FormData()
formdata.append('file', file)
formdata.append('token', token)
axios.post('http://upload.qiniu.com/', formdata, {
headers: {'Content-Type': 'multipart/form-data'}
}).then(res => {
let key = res.data.key
axios.get(VIDEO_PREFIX + `${key}?avinfo`).then(res => {
let data = res.data
this.uploading = false
let duration = data.format.duration
if (Math.round(duration) > 1200) {
this.$message({
message: '视频时长不能大于20分钟',
type: 'warning'
})
this.edit.video_url = ''
} else {
this.edit.video_url = `${key}`
}
}).catch(() => {
this.uploading = false
})
}).catch(() => {
this.uploading = false
})
}
if (window.FileReader) {
let reader = new window.FileReader()
reader.readAsDataURL(file)
reader.onprogress = (e) => {
this.progress = Math.round(e.loaded / e.total * 100 * 2)
}
reader.onload = () => {
console.log('support FileReader')
this.complete = true
uploadQiniu(file, token)
}
} else {
console.log('not support FileReader')
uploadQiniu(file, token)
}
},
removeVideo() {
this.edit.video_url = ''
this.uploading = false
},
playVideo() {
this.videoVisible = true
this.opts.sources = [{
type: 'video/mp4',
src: this.videoUrl()
}]
},
videoUrl() {
return VIDEO_PREFIX + this.edit.video_url
},
resetTemp() {
this.temp = {
user_id: '',
content: '',
be_replied_id: '',
replied_user_id: ''
}
},
reply(row) {
this.resetTemp()
if (row){
// this.temp.be_replied_id = row.be_reply_user.id
this.temp.replied_user_id = row.reply_user.id
this.temp.replied_id = row.id
}
this.dialogStatus = 'create'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
createData() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.is_click = true
this.temp.topic_id = this.postForm.id
createRemark(this.temp).then((response) => {
this.list.push(response.data.data.data)
this.dialogFormVisible = false
this.$notify({
message: '创建成功',
type: 'success',
duration: 2000
})
this.is_click = false
})
}
})
},
handleFilter() {
this.listQuery.offset = 1
this.getList();
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
.up-video {
.video-items {
float: left;
margin-right: 16px;
}
.video-item {
float: left;
position: relative;
width: 110px;
height: 110px;
border-radius: 4px;
background-color: #F5FBFF;
cursor: pointer;
overflow: hidden;
vertical-align: top;
&::before {
content: '';
position: absolute;
top: 0px;
right: 0;
width: 30px;
height: 30px;
background: url('../../../assets/image/svg/uploadSuccess.svg') 50% 50% no-repeat;
border-top-right-radius: 4px;
}
&::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url('../../../assets/image/svg/video.svg') center center no-repeat;
background-size: 38px 38px;
}
.close {
display: none;
position: absolute;
width: 30px;
height: 30px;
top: 0px;
right: 0px;
border-top-right-radius: 4px;
cursor: pointer;
background: url('../../../assets/image/svg/video-close.svg') center center no-repeat;
z-index: 1;
}
video {
display: block;
width: 110px;
height: 110px;
}
&:hover {
&::before {
content: '';
position: absolute;
top: 0px;
right: 0;
width: 30px;
height: 30px;
background-image: none;
border-top-right-radius: 4px;
}
.close {
display: block;
}
}
}
form {
position: relative;
display: inline-block;
width: 110px;
height: 110px;
border-radius: 4px;
border: 1px dashed #E5E5E5;
background: #F5FBFF url('../../../assets/image/svg/video-upload.svg') center center no-repeat;
.file {
display: inline-block;
width: 100%;
height: 100%;
padding: 0;
opacity: 0;
border: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
&.uploading {
background: none;
}
}
&:hover {
form {
border: 1px dashed #5CAEDC;
}
}
}
.createPost-container {
position: relative;
.createPost-main-container {
padding: 40px 45px 20px 50px;
.postInfo-container {
position: relative;
@include clearfix;
margin-bottom: 10px;
.postInfo-container-item {
float: left;
}
}
.editor-container {
min-height: 500px;
margin: 0 0 30px;
.editor-upload-btn-container {
text-align: right;
margin-right: 10px;
.editor-upload-btn {
display: inline-block;
}
}
}
}
.word-counter {
width: 40px;
position: absolute;
right: -10px;
top: 0px;
}
}
.real .error_icon {
margin-top: 90px;
}
</style>