660 lines
17 KiB
Java
660 lines
17 KiB
Java
<template>
|
||
<div class="box">
|
||
<div class="header-search">
|
||
<van-icon @click="iconClick" class="icon" name="arrow-left"/>
|
||
<span class="header-search-text">
|
||
{{queryForm.title}}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="header-buttom" v-if="queryForm.problemTypeNameList && queryForm.problemTypeNameList.length > 0">
|
||
<div class="header-buttom-text" v-for="val in queryForm.problemTypeNameList">
|
||
{{val}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="problemName">
|
||
<div class="problemNameLeft">
|
||
<img src="~@/assets/icon_contact.png" class="problemNameLeftImg" alt="">
|
||
<span class="problemNameLeftText">{{queryForm.createBy}}</span>
|
||
</div>
|
||
<div class="problemNameLeft">
|
||
<img src="~@/assets/icon_time.png" class="problemNameLeftImg" alt="">
|
||
<span class="problemNameLeftText">{{queryForm.createTime}}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content" v-html="queryForm.content">
|
||
|
||
</div>
|
||
|
||
<div class="contentFile" v-if="queryForm.accessoryFileNameList && queryForm.accessoryFileNameList.length > 0">
|
||
<div class="contentFile-text"
|
||
@click="fileClick(item)"
|
||
v-for="item in queryForm.accessoryFileNameList">
|
||
{{item.fileName}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="iconText">
|
||
<div class="iconTextLeft">
|
||
<img src="~@/assets/icon_kan.png" alt="">
|
||
<span class="iconTextLeft-text">
|
||
{{queryForm.browsingHistoryCount}}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="iconTextLeft" @click="likeClick()">
|
||
<img v-if="!this.isPraise" src="~@/assets/icon_zan.png" alt="">
|
||
<img v-else src="~@/assets/dianzan.png" alt="">
|
||
<span class="iconTextLeft-text" :class="{'icon-active':this.isPraise}">
|
||
{{queryForm.praiseCount}}
|
||
</span>
|
||
</div>
|
||
<div class="iconTextLeft" @click="starClick()">
|
||
<img v-if="!this.isCollect" src="~@/assets/icon_shoucang.png" alt="">
|
||
<img v-else src="~@/assets/xuanzhong.png" alt="">
|
||
<span class="iconTextLeft-text" :class="{'icon-active':this.isCollect}">
|
||
{{queryForm.collectCount}}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comment">
|
||
<div class="comment-text" @click="howAboutCommentClick">
|
||
{{$t('howAboutComment')}}～
|
||
</div>
|
||
|
||
<div class="comment-content" v-for="(item,index) in releaseList" :key="index">
|
||
<div class="comment-content-text">
|
||
<div class="comment-content-text-left">
|
||
<span class="comment-content-text-yuan"></span>
|
||
{{item.createBy}}
|
||
</div>
|
||
<div class="comment-content-text-right">
|
||
<span>{{item.createTime}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="comment-text-box">
|
||
{{item.commentContent}}
|
||
</div>
|
||
<div class="comment-text-button">
|
||
<div class="commentRight" @click="messageClick(item)">
|
||
<img src="~@/assets/icon_reply.png" alt="">
|
||
<span>{{$t('answer')}}</span>
|
||
</div>
|
||
<div class="commentRight" @click="deleteClick(item)">
|
||
<img src="~@/assets/icon_rubbish.png" alt="">
|
||
<span>{{$t('delete')}}</span>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 0.3rem"
|
||
v-if="item.problemKnowledgeBaseCommentVOList && item.problemKnowledgeBaseCommentVOList.length > 0">
|
||
<div class="reply-box" v-for="(val,index1) in item.problemKnowledgeBaseCommentVOList">
|
||
<div class="comment-content-text">
|
||
<div class="comment-content-text-left">
|
||
<span class="comment-content-text-yuan"></span>
|
||
{{val.createBy}}
|
||
</div>
|
||
<div class="comment-content-text-right">
|
||
<span>{{val.createTime}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="comment-text-box">
|
||
{{val.commentContent}}
|
||
</div>
|
||
<div class="comment-text-button-one">
|
||
<div class="commentRight" @click="messageClick(item)">
|
||
<img src="~@/assets/icon_reply.png" alt="">
|
||
</div>
|
||
<div class="commentRight" @click="deleteClick(val)">
|
||
<img src="~@/assets/icon_rubbish.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="input-text" v-if="isDisplay">
|
||
<van-cell-group>
|
||
<van-field rows="1"
|
||
class="sendInput"
|
||
autosize
|
||
type="textarea"
|
||
v-model="sendValue"
|
||
placeholder="说点什么吧"/>
|
||
<van-button type="primary" :disabled="sendDisplay" @click="sendClick">{{$t('send')}}</van-button>
|
||
</van-cell-group>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getAction, postAction, putAction } from '@/api/manage'
|
||
import { mapGetters } from 'vuex'
|
||
import { kkFileView } from '@/utils/kkfileView'
|
||
import { deleteAction } from '../../api/manage'
|
||
import { Dialog, Toast } from 'vant'
|
||
|
||
export default {
|
||
name: 'phoneProblemKnowledgeBase',
|
||
data() {
|
||
return {
|
||
url: {
|
||
queryById: '/problemKnowledgeBase/problemKnowledgeBaseEO/queryById'
|
||
},
|
||
queryForm: {},
|
||
releaseList: [],
|
||
isCollect: false,
|
||
isPraise: false,
|
||
sendValue: '',
|
||
isDisplay: false,
|
||
commentQuery: {},
|
||
sendDisplay: true,
|
||
num: 1
|
||
}
|
||
},
|
||
mounted() {
|
||
document.title = 'NIO GRP'
|
||
window.addEventListener('scroll', this.scrolling)
|
||
window.addEventListener('mousedown', this.handleonmousedown)
|
||
this.getQueryBy()
|
||
this.releaseData()
|
||
},
|
||
watch: {
|
||
sendValue: function(res) {
|
||
if (!res) {
|
||
this.sendDisplay = true
|
||
} else {
|
||
this.sendDisplay = false
|
||
}
|
||
}
|
||
},
|
||
destroyed() {
|
||
// 离开该页面需要移除这个监听的事件，不然会报错
|
||
window.removeEventListener('scroll', this.handleScroll)
|
||
window.removeEventListener('mousedown', this.handleonmousedown)
|
||
},
|
||
methods: {
|
||
...mapGetters(['userInfo']),
|
||
scrolling() {
|
||
this.isDisplay = false
|
||
},
|
||
handleonmousedown(e) {
|
||
if (e.srcElement.type == 'textarea' || e.target.type == 'textarea') {
|
||
|
||
} else if (e.target.innerText == this.$t('send')) {
|
||
|
||
} else {
|
||
this.isDisplay = false
|
||
}
|
||
},
|
||
iconClick() {
|
||
this.$router.go(-1)
|
||
},
|
||
getQueryBy() {
|
||
let query = {
|
||
id: this.$route.query.id
|
||
}
|
||
getAction(this.url.queryById, query).then((res) => {
|
||
if (res.success) {
|
||
this.queryForm = res.result || {}
|
||
this.queryForm = { ...this.queryForm }
|
||
if (this.queryForm.praiseEO && this.queryForm.praiseEO.praiseStatus == 'Praise') {
|
||
this.isPraise = true
|
||
} else {
|
||
this.isPraise = false
|
||
}
|
||
if (this.queryForm.collectEO && this.queryForm.collectEO.collectStatus == 'Collect') {
|
||
this.isCollect = true
|
||
} else {
|
||
this.isCollect = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
likeClick() {
|
||
if (this.isDisplay) {
|
||
this.isDisplay = false
|
||
return
|
||
}
|
||
let praiseStatus = ''
|
||
this.isPraise = !this.isPraise
|
||
if (this.isPraise) {
|
||
praiseStatus = 'Praise'
|
||
this.queryForm.praiseCount = this.queryForm.praiseCount + 1
|
||
} else {
|
||
praiseStatus = 'Cancel praise'
|
||
this.queryForm.praiseCount = this.queryForm.praiseCount - 1
|
||
}
|
||
let query = {
|
||
problemKnowledgeBaseId: this.$route.query.id,
|
||
praiseUserId: this.userInfo().id,
|
||
praiseStatus: praiseStatus,
|
||
id: this.queryForm.praiseEO ? this.queryForm.praiseEO.id : undefined
|
||
}
|
||
putAction('/problemKnowledgeBase/problemKnowledgeBasePraiseEO/edit', query).then((res) => {
|
||
if (!this.queryForm.praiseEO || !this.queryForm.praiseEO.id) {
|
||
this.queryById()
|
||
}
|
||
})
|
||
},
|
||
starClick() {
|
||
if (this.isDisplay) {
|
||
this.isDisplay = false
|
||
return
|
||
}
|
||
let collectStatus = ''
|
||
this.isCollect = !this.isCollect
|
||
if (this.isCollect) {
|
||
collectStatus = 'Collect'
|
||
this.queryForm.collectCount = this.queryForm.collectCount + 1
|
||
} else {
|
||
collectStatus = 'Cancel Collect'
|
||
this.queryForm.collectCount = this.queryForm.collectCount - 1
|
||
}
|
||
let query = {
|
||
problemKnowledgeBaseId: this.$route.query.id,
|
||
collectUserId: this.userInfo().id,
|
||
collectStatus: collectStatus,
|
||
id: this.queryForm.collectEO ? this.queryForm.collectEO.id : undefined
|
||
}
|
||
putAction('/problemKnowledgeBase/problemKnowledgeBaseCollectEO/edit', query).then((res) => {
|
||
if (!this.queryForm.collectEO || !this.queryForm.collectEO.id) {
|
||
this.queryById()
|
||
}
|
||
})
|
||
},
|
||
releaseData() {
|
||
let query = {
|
||
problemKnowledgeBaseId: this.$route.query.id
|
||
}
|
||
getAction('/problemKnowledgeBase/problemKnowledgeBaseCommentEO/list', query).then((res) => {
|
||
if (res.success) {
|
||
this.releaseList = res.result || []
|
||
} else {
|
||
this.releaseList = []
|
||
}
|
||
})
|
||
},
|
||
deleteClick(item) {
|
||
let _this = this
|
||
if (this.isDisplay) {
|
||
this.isDisplay = false
|
||
return
|
||
}
|
||
|
||
function beforeClose(action, done) {
|
||
if (action === 'confirm') {
|
||
let url = ''
|
||
if (item.problemKnowledgeBaseId) {
|
||
url = '/problemKnowledgeBase/problemKnowledgeBaseCommentEO/deleteBatch'
|
||
} else {
|
||
url = '/project/problemKnowledgeBaseReplyEO/deleteBatch'
|
||
}
|
||
deleteAction(url, { ids: item.id }).then((res) => {
|
||
if (res.success) {
|
||
Toast(_this.$t('OperationSuccessful'))
|
||
_this.releaseData()
|
||
done()
|
||
} else {
|
||
_this.$message.warning(res.message)
|
||
}
|
||
})
|
||
} else {
|
||
done()
|
||
}
|
||
}
|
||
|
||
Dialog.confirm({
|
||
message: this.$t('confirmDeletion') + '?',
|
||
beforeClose
|
||
})
|
||
},
|
||
howAboutCommentClick() {
|
||
this.isDisplay = true
|
||
this.num = 1
|
||
this.$nextTick(() => {
|
||
let vanField = document.querySelectorAll('.sendInput .van-field__control')[0]
|
||
vanField.focus()
|
||
})
|
||
},
|
||
fileClick(item) {
|
||
kkFileView(item.fileName, item.id)
|
||
},
|
||
messageClick(item) {
|
||
this.isDisplay = true
|
||
this.num = 2
|
||
this.commentQuery = item
|
||
this.$nextTick(() => {
|
||
let vanField = document.querySelectorAll('.sendInput .van-field__control')[0]
|
||
vanField.focus()
|
||
})
|
||
},
|
||
sendClick() {
|
||
if (this.num == 1) {
|
||
let query = {
|
||
problemKnowledgeBaseId: this.$route.query.id,
|
||
commentContent: this.sendValue,
|
||
commentUserId: this.userInfo().id
|
||
}
|
||
postAction('/problemKnowledgeBase/problemKnowledgeBaseCommentEO/add', query).then((res) => {
|
||
if (res.success) {
|
||
Toast(this.$t('OperationSuccessful'))
|
||
this.releaseData()
|
||
this.sendValue = ''
|
||
this.isDisplay = false
|
||
} else {
|
||
Toast(this.$t('operationFailed'))
|
||
}
|
||
})
|
||
} else {
|
||
this.handleComment()
|
||
}
|
||
},
|
||
handleComment() {
|
||
let query = {
|
||
commentId: this.commentQuery.id,
|
||
replyContent: this.sendValue
|
||
}
|
||
postAction('/project/problemKnowledgeBaseReplyEO/add', query).then((res) => {
|
||
if (res.success) {
|
||
Toast(this.$t('OperationSuccessful'))
|
||
this.releaseData()
|
||
this.sendValue = ''
|
||
this.isDisplay = false
|
||
} else {
|
||
Toast(this.$t('operationFailed'))
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.box {
|
||
padding: 0 0.4rem 0.4rem 0.4rem;
|
||
position: relative;
|
||
}
|
||
|
||
.box-showModal {
|
||
position: absolute;
|
||
height: 100%;
|
||
}
|
||
|
||
.header-search {
|
||
width: 100%;
|
||
display: flex;
|
||
position: sticky;
|
||
top: 0;
|
||
padding-top: 0.4rem;
|
||
background: #fff;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.icon {
|
||
font-size: 0.66rem;
|
||
width: 0.7rem;
|
||
}
|
||
|
||
.header-search-text {
|
||
font-size: 0.44rem;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 600;
|
||
color: #040B29;
|
||
margin-left: 0.2rem;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
text-overflow: ellipsis;
|
||
/*! autoprefixer: off */
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
/*! autoprefixer: on;*/
|
||
text-justify: inter-ideograph;
|
||
}
|
||
|
||
.header-buttom {
|
||
margin-top: 0.36rem;
|
||
text-align: right;
|
||
}
|
||
|
||
.header-buttom-text {
|
||
font-size: 0.34rem;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #00B3BE;
|
||
padding: 0.17rem 0.3rem;
|
||
background: rgba(0, 179, 190, 0.12);
|
||
border-radius: 0.12rem;
|
||
opacity: 1;
|
||
display: inline-block;
|
||
margin-left: 0.2rem;
|
||
}
|
||
|
||
.problemName {
|
||
display: flex;
|
||
margin-top: 0.16rem;
|
||
height: 1rem;
|
||
line-height: 1rem;
|
||
}
|
||
|
||
.problemNameLeft {
|
||
margin-right: 0.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.problemNameLeftImg {
|
||
width: 0.42rem;
|
||
}
|
||
|
||
.problemNameLeftText {
|
||
font-size: 0.34rem;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #868A9A;
|
||
margin-left: 0.2rem;
|
||
margin-top: 0.07rem;
|
||
}
|
||
|
||
.content {
|
||
margin-top: 0.1rem;
|
||
font-size: 0.38rem;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #040B29;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.contentFile {
|
||
margin-top: 0.2rem;
|
||
}
|
||
|
||
.contentFile-text {
|
||
font-size: 0.38rem;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #01A0AC;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
.iconText {
|
||
text-align: right;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 0.4rem;
|
||
padding-bottom: 0.6rem;
|
||
border-bottom: 0.02rem solid #E6E7EC;
|
||
}
|
||
|
||
.iconTextLeft-text {
|
||
font-size: 0.38rem;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
margin-left: 0.12rem;
|
||
}
|
||
|
||
.iconTextLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 0.4rem;
|
||
}
|
||
|
||
.iconTextLeft img {
|
||
width: 0.46rem;
|
||
}
|
||
|
||
.comment {
|
||
margin-top: 0.8rem;
|
||
}
|
||
|
||
.comment-text {
|
||
width: 100%;
|
||
background: #F6F7FA;
|
||
border-radius: 0.23rem;
|
||
font-size: 0.42rem;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #868A9A;
|
||
text-align: center;
|
||
padding: 0.36rem 0;
|
||
}
|
||
|
||
.comment-content {
|
||
padding: 0.7rem 0;
|
||
box-sizing: border-box;
|
||
border-bottom: 0.02rem solid #E6E7EC;
|
||
}
|
||
|
||
.comment-content-text {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.comment-content-text-left {
|
||
font-size: 0.42rem;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #040B29;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.comment-content-text-yuan {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
display: inline-block;
|
||
border-radius: 50%;
|
||
background: #01A0AC;
|
||
margin-right: 0.2rem;
|
||
}
|
||
|
||
.comment-content-text-right {
|
||
font-size: 0.34rem;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #868A9A;
|
||
}
|
||
|
||
.comment-text-box {
|
||
font-size: 0.38rem;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #41475E;
|
||
word-break: break-all;
|
||
margin-top: 0.3rem;
|
||
}
|
||
|
||
.comment-text-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
text-align: right;
|
||
margin-top: 0.3rem;
|
||
/*margin-bottom: 0.3rem;*/
|
||
}
|
||
|
||
.comment-text-button-one {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
text-align: right;
|
||
margin-top: 0.3rem;
|
||
}
|
||
|
||
.commentRight {
|
||
margin-left: 0.4rem;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.commentRight img {
|
||
width: 0.44rem;
|
||
}
|
||
|
||
.commentRight span {
|
||
font-size: 0.36rem;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #868A9A;
|
||
margin-left: 0.1rem;
|
||
}
|
||
|
||
.reply-box {
|
||
background: #F6F7F8;
|
||
/*border-radius: 0.16rem;*/
|
||
padding: 0.4rem 0.4rem 0 0.4rem;
|
||
margin-left: 0.5rem;
|
||
}
|
||
|
||
.reply-box:last-child {
|
||
padding-bottom: 0.4rem;
|
||
border-bottom-left-radius: 0.16rem;
|
||
border-bottom-right-radius: 0.16rem;
|
||
}
|
||
|
||
.reply-box:first-child {
|
||
border-top-left-radius: 0.16rem;
|
||
border-top-right-radius: 0.16rem;
|
||
}
|
||
|
||
.icon-active {
|
||
color: #00B3BE !important;
|
||
}
|
||
|
||
.input-text {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background: #F6F7FA;
|
||
padding: 0.2rem 0.4rem;
|
||
}
|
||
|
||
.input-text .van-cell-group {
|
||
display: flex;
|
||
background: transparent;
|
||
align-items: center;
|
||
}
|
||
|
||
.input-text .van-cell {
|
||
width: calc(100% - 1.8rem);
|
||
display: inline-block;
|
||
border-radius: 0.6rem;
|
||
margin-right: 0.3rem;
|
||
}
|
||
|
||
.input-text .van-button {
|
||
width: 1.8rem;
|
||
height: 1rem;
|
||
border-radius: 0.4rem;
|
||
background: #01A0AC;
|
||
border: none;
|
||
}
|
||
</style> |