mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-15 13:56:43 +08:00
1187 lines
41 KiB
Vue
1187 lines
41 KiB
Vue
<template>
|
||
<div id="answer-detail">
|
||
<portal-header current="qa" :goSearch="4"></portal-header>
|
||
<div class="portal-content xcontent">
|
||
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
|
||
<el-breadcrumb-item :to="{ path: '/qa' }">问答列表</el-breadcrumb-item>
|
||
<el-breadcrumb-item>问答详情</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
<div class="xrow" style="display: flex;justify-content: space-between;">
|
||
<div style="flex: 1;" class="xcol content-div">
|
||
<el-row v-if="noData">
|
||
<el-card :body-style="{ padding: '0px' }" class="detail">
|
||
<div class="title">
|
||
<span class="qa-basic" :class="detailData.isResolve ? 'qa-solve' : 'qa-unSolve'">
|
||
{{ detailData.isResolve === true ? '【已解决】' : detailData.isResolve === false ? '【待解决】' : '' }}
|
||
</span>
|
||
{{ detailData.title }}
|
||
</div>
|
||
<div class="label"
|
||
style="display: flex;margin: 9px 0 14px 0;justify-content: space-between;align-items: center;font-size: 12px;">
|
||
<!-- <img :src="detailData.avatar || '/temp/index/male.jpg'" /> -->
|
||
<author width="24px" height="24px" :avatar="detailData.avatar" :name="detailData.name"
|
||
:sex="detailData.sex"></author>
|
||
<!-- <author :avatar="detailData.avatar" :info="detailData.orgInfo" :name="detailData.name"></author> -->
|
||
<time-show :time="detailData.sysCreateTime"></time-show>
|
||
</div>
|
||
<div class="content">
|
||
<div style="word-break:break-all;">{{ detailData.content }}</div>
|
||
<div v-if="detailData.images" style="margin: 10px 0px;">
|
||
<el-image :src="fileUrl + detailData.images" fit="scaleDown" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn-div">
|
||
<div class="write-btn" @click="answerShow = true">
|
||
<el-button type="text" icon="el-icon-edit">写回答</el-button>
|
||
</div>
|
||
<span class="answer-total">共计{{ detailData.answers }}条回答</span>
|
||
<interactBar v-if="detailData.id" :type="4" :comments="false" :data="detailData" :views="false">
|
||
</interactBar>
|
||
</div>
|
||
</el-card>
|
||
<div v-if="answerShow">
|
||
<el-card :body-style="{ padding: '0px' }" style="padding: 20px;">
|
||
<div>
|
||
<el-input type="textarea" rows="5" placeholder="写下您的答案(800字以内)，可以@提问者哦～" minlength="1" maxlength="800"
|
||
v-model="content"></el-input>
|
||
</div>
|
||
<div style="padding-top: 10px;">
|
||
<el-button type="primary" :disabled="!checked" class="dian-btn" @click="publishAnswer">发布</el-button>
|
||
<!-- <el-checkbox style="margin-left:20px" v-model="checked"></el-checkbox><span style="margin-left:10px" @click="qaFormCheckedShow = true">我已阅读并遵守平台内容发布要求</span> -->
|
||
<el-checkbox style="margin-left:20px" v-model="checked"></el-checkbox><span
|
||
style="font-size:14px;color:#787878;margin-left:10px">我已阅读并遵守<span
|
||
style="color:#588afc;cursor: pointer;" @click="qaFormCheckedShow = true">平台内容发布要求</span></span>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<el-card class="box-card" v-if="answerList.length == 0 && !answerShow" :body-style="{ padding: '0px' }">
|
||
<div>
|
||
<div style="height:50px;margin-top: 50px;">
|
||
<img style="width:50px" src="../../../assets/images/icon/anser.png" alt="" srcset="">
|
||
</div>
|
||
<div style="font-size:14px;padding-bottom: 50px;">
|
||
暂时还没有回答，开始 <el-link type="primary" @click="openAnswer">写第一个回答</el-link>
|
||
</div>
|
||
</div>
|
||
|
||
</el-card>
|
||
<div v-if="answerList.length > 0">
|
||
<div :span="24">
|
||
<!-- <el-card :body-style="{ padding: '0px' }" class="answer publishAnswer">
|
||
<el-input placeholder="写回答...（1-1000个字）" minlength="1" maxlength="255" v-model="content"></el-input>
|
||
<el-button type="primary" class="dian-btn" @click="publishAnswer">发布</el-button>
|
||
</el-card> -->
|
||
<el-card :body-style="{ padding: '0px' }" class="answer-reply-box">
|
||
<div class="answer" v-for="(item, index) of answerList" :key="item.id"
|
||
:style="index === answerList.length - 1 ? 'border-bottom:none;' : ''">
|
||
<div class="answer-top">
|
||
<div>
|
||
<author :avatar="item.avatar" :name="item.sysCreateBy" :sex="item.sex"></author>
|
||
</div>
|
||
<div>
|
||
<span v-if="detailData.isResolve && item.isBest" style="color: #ffb30f">最佳答案</span>
|
||
<el-button type="primary"
|
||
v-if="!detailData.isResolve && detailData.sysCreateAid == userInfo.aid" class="zuijia"
|
||
@click="editAnsweBest(item)">设为最佳答案</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="answer-body">
|
||
<div @mouseover="showButtons(item.id)" @mouseout="hideButtons()">
|
||
<!--在这一层上加事件-->
|
||
<div class="answer-text">
|
||
<span style="color: #303133" v-html="displayAll(item)"></span>
|
||
<span v-if="item.content.length > 170" @click="changeIsAll(item)">{{ item.isAll ? '收起' : '全文'
|
||
}}</span>
|
||
</div>
|
||
<div class="answer-time">
|
||
<div>回答于 <time-show :time="item.sysCreateTime"></time-show>
|
||
</div>
|
||
<div style="margin-right: 10px;">
|
||
<interactBar :type="5" :comments="false" :favorites="false" :data="item" :shares="false"
|
||
:views="false"></interactBar>
|
||
</div>
|
||
</div>
|
||
<div class="answer-boot">
|
||
<div class="answer-boot-btns">
|
||
<div v-show="btnsShowRowId == item.id">
|
||
<a @click="showRowInput(item, {})">
|
||
<svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon>
|
||
<span>回复</span>
|
||
</a>
|
||
<a v-if="item.sysCreateAid == userInfo.aid" @click="editAnswer(item)"> <i
|
||
class="el-icon-edit"
|
||
style="margin-right:10px;font-size: 15px;color: #8590A6; ">编辑</i></a>
|
||
<a v-if="item.sysCreateAid == userInfo.aid" @click="delAnswer(item)">
|
||
<svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon>
|
||
<span>删除</span>
|
||
</a>
|
||
<!-- <a v-if="item.answers && item.answers.length==5" @click="showMoreReply(item)" ><svg-icon icon-class="all" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>全部回复</span></a> -->
|
||
</div>
|
||
<!-- <i class="el-icon-chat-line-round" @click="showRowInput(item,{})" style="margin-right:10px;"></i>
|
||
<i class="el-icon-edit" style="margin-right:10px;" v-if="item.sysCreateAid == userInfo.aid" @click="editAnswer(item)"></i>
|
||
<i class="el-icon-delete" v-if="detailData.sysCreateAid == userInfo.aid||item.sysCreateAid == userInfo.aid" @click="delAnswer(item)"></i> -->
|
||
</div>
|
||
</div>
|
||
<!---->
|
||
<div v-show="curParentId == item.id" class="answer-reply">
|
||
<el-input type="textarea" v-model="replyContent" show-word-limit maxlength="800"
|
||
placeholder="回复内容"></el-input>
|
||
<el-button type="primary" @click="replyContentMethod(item, {})">发布回复</el-button>
|
||
</div>
|
||
</div>
|
||
<!--一级评论，二级数据-->
|
||
<div v-if="item.answers && item.answers.length != 0">
|
||
<div class="comment" v-for="(con, i) in item.answers" :key="i"
|
||
:class="i === item.answers.length - 1 ? 'comment-last' : ''">
|
||
<div class="comment-top">
|
||
<div class="comment-author">
|
||
<author :avatar="con.avatar" :name="con.sysCreateBy" :sex="con.sex"></author>
|
||
<span class="comment-author-text">回复</span>
|
||
<span style="margin-left: 10px; font-size:14px">{{ con.replayName }}</span>
|
||
</div>
|
||
<div class="comment-time">
|
||
<time-show :time="con.sysCreateTime"></time-show>
|
||
</div>
|
||
</div>
|
||
<div class="comment-body">
|
||
<div class="comment-info" @mouseover="showButtons(con.id)" @mouseout="hideButtons()">
|
||
<div class="comment-content">
|
||
<span style="color: #303133" v-html="displayAll(con)"></span>
|
||
<span v-if="con.content.length > 170" @click="changeIsAll(con)">
|
||
{{ con.isAll ? '收起' : '全文' }}
|
||
</span>
|
||
</div>
|
||
<div class="comment-btns">
|
||
<div v-show="btnsShowRowId == con.id">
|
||
<a @click="showRowInput(con, item)">
|
||
<svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;">
|
||
</svg-icon><span>回复</span>
|
||
</a>
|
||
<a v-if="con.sysCreateAid == userInfo.aid" @click="delAnswer(con)">
|
||
<svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon>
|
||
<span>删除</span>
|
||
</a>
|
||
</div>
|
||
<!-- <i class="el-icon-chat-line-round" @click="showRowInput(con,item)" style="margin-right:10px;"></i>
|
||
<i class="el-icon-edit" style="margin-right:10px;" v-if="con.sysCreateAid == userInfo.aid" @click="editAnswer(con)"></i>
|
||
<i class="el-icon-delete" v-if="detailData.sysCreateAid == userInfo.aid||con.sysCreateAid == userInfo.aid" @click="delAnswer(con)"></i> -->
|
||
</div>
|
||
<div class="comment-reply" v-show="curParentId == con.id">
|
||
<el-input type="textarea" v-model="replyContent" placeholder="回复内容" show-word-limit
|
||
maxlength="100"></el-input>
|
||
<el-button type="primary" @click="replyContentMethod(con, item)">发布回复</el-button>
|
||
</div>
|
||
</div>
|
||
<!--三级数据-->
|
||
<div v-if="con.answers && con.answers.length > 0">
|
||
<div class="comment" v-for="(row, rowIdx) in con.answers" :key="rowIdx"
|
||
:class="rowIdx === con.answers.length - 1 ? 'comment-last' : ''">
|
||
<div class="comment-top">
|
||
<div class="comment-author">
|
||
<author :avatar="row.avatar" :name="row.sysCreateBy" :sex="row.sex"></author>
|
||
<span class="comment-author-text">回复</span>
|
||
<span style="margin-left: 10px; font-size:14px">{{ row.replayName }}</span>
|
||
</div>
|
||
<div class="comment-time">
|
||
<time-show :time="row.sysCreateTime"></time-show>
|
||
</div>
|
||
</div>
|
||
<div class="comment-body">
|
||
<div class="comment-info" @mouseover="showButtons(row.id)" @mouseout="hideButtons()">
|
||
<div class="comment-content">
|
||
<span style="color: #303133" v-html="displayAll(row)"></span>
|
||
<span v-if="row.content.length > 170" @click="changeIsAll(row)">
|
||
{{ row.isAll ? '收起' : '全文' }}
|
||
</span>
|
||
</div>
|
||
<div class="comment-btns">
|
||
<div v-show="btnsShowRowId == row.id">
|
||
<a @click="showRowInput(row, con)">
|
||
<svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;">
|
||
</svg-icon><span>回复</span>
|
||
</a>
|
||
<a v-if="row.sysCreateAid == userInfo.aid" @click="delAnswer(row)">
|
||
<svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;">
|
||
</svg-icon><span>删除</span>
|
||
</a>
|
||
</div>
|
||
<!-- <i class="el-icon-thumb" style="margin-right:10px;"></i> -->
|
||
<!-- <i class="el-icon-chat-line-round" @click="showRowInput(row,con)" style="margin-right:10px;"></i>
|
||
<i class="el-icon-edit" style="margin-right:10px;" v-if="row.sysCreateAid == userInfo.aid" @click="editAnswer(row)"></i>
|
||
<i class="el-icon-delete" v-if="detailData.sysCreateAid == userInfo.aid||row.sysCreateAid == userInfo.aid" @click="delAnswer(row)"></i> -->
|
||
</div>
|
||
</div>
|
||
<div class="comment-reply" v-show="curParentId == row.id">
|
||
<el-input type="textarea" v-model="replyContent" show-word-limit maxlength="100"
|
||
placeholder="回复内容"></el-input>
|
||
<el-button type="primary" @click="replyContentMethod(row, con)">发布回复</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--二级数据结束-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
<div class="pagination-div">
|
||
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
|
||
<span class="pag-text-msg" style="font-size:14px;color: #444444;"
|
||
v-else-if="moreState == 3">没有更多数据了</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-row>
|
||
<div v-else>
|
||
<el-empty :image-size="200"></el-empty>
|
||
</div>
|
||
</div>
|
||
<div style="width: 410px;margin-left: 26px;">
|
||
<!-- <el-row> -->
|
||
<div class="qa-ranking">
|
||
<div class="portal-model-btn" @click="$refs.addQuestion.askQuestionDialog = true">
|
||
<svg-icon style="margin-right: 0;font-size: 24px;" icon-class="question-mark"></svg-icon>
|
||
提问题
|
||
</div>
|
||
<div class="portal-right-box list-bg">
|
||
<p class="portal-title-one" style="padding-bottom:12px">贡献榜</p>
|
||
<ul>
|
||
<li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
|
||
<span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">
|
||
<img src="/images/list-01.png" alt="">
|
||
</span>
|
||
<span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">
|
||
<img src="/images/list02.png" alt="">
|
||
</span>
|
||
<span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">
|
||
<img src="/images/list03.png" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==3" style="margin-right:94px">
|
||
<img src="/images/list04.png" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==4" style="margin-right:94px">
|
||
<img src="/images/list05.png" alt="">
|
||
</span>
|
||
<span class="portal-title-desc">{{ item.sysCreateUname }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="course-resources">
|
||
<!-- 资源位 -->
|
||
<img :src="fileBaseUrl + resonimg.image" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<addQuestion ref="addQuestion" @sure="toDetail"></addQuestion>
|
||
<editQuestion ref="editQuestion" @enSure="enSure" :editData="editData"></editQuestion>
|
||
<el-dialog class="checked-show" :visible.sync="qaFormCheckedShow" width="800px" top="14vh" :show-close="false"
|
||
:modal="false">
|
||
<agreement></agreement>
|
||
<span slot="footer" class="dialog-footer">
|
||
<!-- <el-button @click="qaFormCheckedShow = false">取 消</el-button> -->
|
||
<el-button style="margin-right:10px" type="primary" @click="qaFormCheckedShow = false">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
<portal-footer></portal-footer>
|
||
<portalFloatTools></portalFloatTools>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import agreement from "@/components/Portal/agreement.vue";
|
||
import { mapGetters } from "vuex";
|
||
import portalHeader from "@/components/PortalHeader.vue";
|
||
import addQuestion from "@/components/Qa/addQuestion.vue";
|
||
import portalFooter from "@/components/PortalFooter.vue";
|
||
import interactBar from "@/components/Portal/interactBar.vue";
|
||
import editQuestion from "@/components/Qa/editQuestion.vue";
|
||
import timeShow from "@/components/Portal/datetimeShow.vue";
|
||
import author from "@/components/Portal/authorInfo.vue";
|
||
import portalFloatTools from "@/components/PortalFloatTools.vue";
|
||
import apiQa from "@/api/modules/qa.js";
|
||
import apiUser from "@/api/system/user.js";
|
||
import apiPraise from "@/api/modules/praises.js";
|
||
import apiFavorites from "@/api/modules/favorites.js";
|
||
import apiMessage from "@/api/system/message.js";
|
||
import apiPlace from "@/api/phase2/place.js"
|
||
export default {
|
||
name: "answer",
|
||
components: {
|
||
portalHeader,
|
||
portalFooter,
|
||
interactBar,
|
||
addQuestion,
|
||
editQuestion,
|
||
timeShow,
|
||
author,
|
||
portalFloatTools,
|
||
agreement
|
||
},
|
||
computed: {
|
||
...mapGetters(["userInfo"])
|
||
},
|
||
data() {
|
||
return {
|
||
resonimg:{},
|
||
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||
noData: true,
|
||
qaFormCheckedShow: false,
|
||
checked: false,
|
||
// sex:null,
|
||
moreState: 1,
|
||
pageIndex: 1,
|
||
qid: "",
|
||
fileUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||
detailData: {}, //单条问答数据详情，不包括答案列表
|
||
content: "", //发布回答内容,
|
||
// curQa:{id:'',shares:20,collects:30,praises:10,browses:236},
|
||
// answer: "",
|
||
updateDialog: false, //控制弹窗
|
||
answerList: [], //回复列表
|
||
editData: {}, //用于保存的单条数据
|
||
editDataIndex: "", //单条数据的位置
|
||
controlList: [],
|
||
answerShow: false, //控制回答输入框是否显示
|
||
anking: 2, //排行榜
|
||
ankingList: [],
|
||
controlListNew: [], //用来控制回复输入框的显示与否
|
||
curParent: {},//当前输入的上级的对象，用于往answers中追加回复的内容
|
||
curParentId: '',//当前回复的内容的id
|
||
replyContent: "",//回复的内容
|
||
readonly: false,//是否只读，用于预览
|
||
btnsShowRowId: '',//显示的button的条目id
|
||
replyDiaglog: {
|
||
show: false,
|
||
pageIndex: 1,
|
||
pageSize: 8,
|
||
pages: 1,
|
||
count: 0,
|
||
commentId: '',
|
||
list: []
|
||
}
|
||
};
|
||
},
|
||
watch: {
|
||
content(newVal, oldVal) {
|
||
if (!oldVal && newVal === "@") {
|
||
this.content += this.detailData.name;
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
let $this = this;
|
||
this.qid = this.$route.query.id;
|
||
this.getQuestionDetail();
|
||
this.loadAnswer();
|
||
this.$watermark.set(this.userInfo.name + this.userInfo.loginName);
|
||
window.addEventListener("scroll", this.handleScroll);
|
||
this.getAnkingData();
|
||
this.couresreso();
|
||
let event = {
|
||
key: "ReadQuestion",//后台的事件key 发布文章且审核通过
|
||
title: "阅读问题",//事件的标题
|
||
parameters:"",//用户自定义参数 name:value,name:value
|
||
content: "打开问题页面时触发",//事件的内容
|
||
objId: this.qid,//关联的id
|
||
objType: "4",//关联的类型
|
||
objInfo: "问答",
|
||
aid: this.userInfo.aid, //当前登录人的id
|
||
aname: this.userInfo.name,//当前人的姓名
|
||
status: 1 //状态，直接写1
|
||
}
|
||
this.$store.dispatch("userTrigger", event);
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener("scroll", this.handleScroll);
|
||
},
|
||
methods: {
|
||
couresreso(){
|
||
let key = 'qa';
|
||
apiPlace.detail(key).then(res=>{
|
||
console.log(res)
|
||
let lmj = JSON.parse(res.result.content)
|
||
this.resonimg = lmj[0]
|
||
console.log(this.resonimg.image)
|
||
})
|
||
},
|
||
handleScroll() {
|
||
let innerHeight = document.querySelector("#answer-detail").clientHeight;
|
||
let outerHeight = document.documentElement.clientHeight;
|
||
let scrollTop = document.documentElement.scrollTop;
|
||
if (outerHeight + scrollTop + 350 >= innerHeight) {
|
||
if (this.moreState == 1) {
|
||
this.loadMore();
|
||
}
|
||
}
|
||
if (scrollTop > 400) {
|
||
document.querySelector(".qa-ranking").style.cssText =
|
||
"position: fixed;top: 0;width:410px";
|
||
} else {
|
||
document.querySelector(".qa-ranking").style.cssText =
|
||
"position: static";
|
||
}
|
||
},
|
||
toDetail(flag, form) {
|
||
if (flag) {
|
||
location.href = "answer?id=" + form.id;
|
||
}
|
||
},
|
||
loadMore() {
|
||
this.pageIndex += 1;
|
||
this.getAnswerList(false);
|
||
},
|
||
getAnkingData() {
|
||
apiQa.queryList(5).then(res => {
|
||
if (res.status == 200) {
|
||
this.ankingList = res.result;
|
||
}
|
||
});
|
||
},
|
||
loadAnswer() {
|
||
this.pageIndex = 1;
|
||
this.getAnswerList(true);
|
||
},
|
||
messageSave(type) {
|
||
let content;
|
||
if (type == "set") {
|
||
content = this.userInfo.name + "设置了我的回答为" + "-" + this.detailData.title + "为最佳答案";
|
||
}
|
||
if (type == "send") {
|
||
content = this.userInfo.name + "回答了我的问答" + "-" + this.detailData.title;
|
||
}
|
||
let message = {
|
||
refId: this.detailData.id,
|
||
title: "系统消息",
|
||
sendName: this.userInfo.name,
|
||
acceptName: this.detailData.sysCreateBy,
|
||
acceptId: this.detailData.sysCreateAid,
|
||
content,
|
||
refType: 4,
|
||
sendType: 1
|
||
};
|
||
apiMessage.save(message).then(res => {
|
||
if (res.status == 200) {
|
||
}
|
||
});
|
||
},
|
||
enSure() {
|
||
this.editData = {};
|
||
this.loadAnswer();
|
||
},
|
||
showRowInput(row, parent) { //显示行输框
|
||
if (this.curParentId) {
|
||
this.curParentId = '';
|
||
this.curParent = {};
|
||
} else {
|
||
this.curParentId = row.id;
|
||
this.curParent = parent;
|
||
}
|
||
},
|
||
//获取问题详细信息
|
||
getQuestionDetail() {
|
||
if (!this.qid) return;
|
||
apiQa.detail(this.qid, true).then(res => {
|
||
if (res.status == 200) {
|
||
res.result.avatar = "";
|
||
res.result.name = "";
|
||
res.result.orgInfo = "";
|
||
res.result.sex = null;
|
||
this.detailData = res.result;
|
||
if (JSON.stringify(this.detailData) != "{}") {
|
||
this.getQaUserData(this.detailData);
|
||
}
|
||
} else {
|
||
this.noData = false;
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
//获取回答列表
|
||
getAnswerList(flag) {
|
||
// 隐藏loadMore
|
||
if (flag) {
|
||
this.answerList = [];
|
||
}
|
||
this.moreState = 2;
|
||
if (this.pageIndex == 1) {
|
||
// 重置数据
|
||
this.answerList = [];
|
||
}
|
||
let that = this;
|
||
apiQa.page({
|
||
qid: this.$route.query.id,
|
||
pageSize: 10,
|
||
pageIndex: this.pageIndex
|
||
}).then(res => {
|
||
if (res.status == 200) {
|
||
let allList = [];
|
||
let ids = [];
|
||
let level3ParentIds = [];
|
||
if (res.result.list.length != 0) {
|
||
res.result.list.forEach(item => {
|
||
item.avatar = "";
|
||
item.sex = null;
|
||
item.isAll = false;//字数过大时，显示隐藏控制
|
||
allList.push(item);
|
||
ids.push(item.sysCreateAid);
|
||
if (item.answers && item.answers.length != 0) {
|
||
item.answers.forEach(answers => {
|
||
answers.avatar = "";
|
||
answers.sex = null;
|
||
answers.isAll = false;
|
||
allList.push(answers);
|
||
level3ParentIds.push(answers.id);
|
||
ids.push(answers.sysCreateAid);
|
||
});
|
||
}
|
||
});
|
||
this.getUserInfoList(allList, ids);
|
||
this.answerList.push(...res.result.list);
|
||
this.loadLevel3Data(level3ParentIds);
|
||
}
|
||
if (res.result.totalPages > this.pageIndex) {
|
||
that.moreState = 1;
|
||
} else {
|
||
that.moreState = 3;
|
||
}
|
||
} else {
|
||
that.moreState = 3;
|
||
//加载错误
|
||
this.$message.error('加载数据失败');
|
||
}
|
||
});
|
||
},
|
||
//加载第三级的数据
|
||
loadLevel3Data(commentIdArray) {
|
||
let $this = this;
|
||
if (commentIdArray && commentIdArray.length > 0) {
|
||
apiQa.replayClevel3(commentIdArray).then(rs => {
|
||
if (rs.status == 200) {
|
||
//先处理头像
|
||
let aids = [];
|
||
rs.result.forEach(item => {
|
||
item.avatar = "";
|
||
item.sex = null;
|
||
item.isAll = false;
|
||
aids.push(item.sysCreateAid);
|
||
});
|
||
$this.getUserInfoList(rs.result, aids);
|
||
$this.answerList.forEach(one1 => {
|
||
if (one1.answers.length > 0) {
|
||
one1.answers.forEach(one2 => {
|
||
one2.answers = one2.answers ? one2.answers : [];
|
||
rs.result.forEach(rsRow => {
|
||
if (rsRow.commentId == one2.id) {
|
||
one2.answers.push(rsRow);
|
||
}
|
||
})
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//获取人物信息列表
|
||
getUserInfoList(list, ids) {
|
||
// const ids = idsList.map(item => item.sysCreateAid);
|
||
if (ids.length == 0) {
|
||
return;
|
||
}
|
||
const noReapetIds = [...new Set(ids)];
|
||
apiUser.getByIds(noReapetIds).then(res => {
|
||
if (res.status == 200) {
|
||
list.forEach((item, index) => {
|
||
res.result.some(author => {
|
||
// item.sex=author.sex;
|
||
if (author.aid == item.sysCreateAid) {
|
||
item.avatar = author.avatar;
|
||
item.orgInfo = author.orgInfo;
|
||
item.sex = author.sex;
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//获取人物信息
|
||
getQaUserData(detailData) {
|
||
apiUser
|
||
.getByIds([detailData.sysCreateAid])
|
||
.then(res => {
|
||
if (res.status == 200) {
|
||
this.detailData = Object.assign(detailData, res.result[0]);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message({
|
||
message: "数据请求失败",
|
||
type: "error"
|
||
});
|
||
});
|
||
},
|
||
//发布回答
|
||
publishAnswer() {
|
||
let content = "";
|
||
// if(this.content.indexOf('@'+this.detailData.name)!=-1){
|
||
// content=this.content.slice(this.detailData.name.length+1)
|
||
// }
|
||
if (this.content.length < 1 || this.content.trim() == "@" + this.detailData.name) {
|
||
return this.$message.warning("请输入回答");
|
||
} else {
|
||
content = this.content.trim();
|
||
}
|
||
apiQa.saveAnswer({
|
||
qid: this.$route.query.id,
|
||
content: content
|
||
}).then(res => {
|
||
if (res.status == 200) {
|
||
this.messageSave("send");
|
||
this.$message({ message: "发布回答成功", type: "success" });
|
||
this.answerShow = false;
|
||
this.getQuestionDetail();
|
||
this.loadAnswer();
|
||
this.content = "";
|
||
let event = {
|
||
key: "AnswerQuestion",//后台的事件key
|
||
title: "回答问题",//事件的标题
|
||
parameters:"",//用户自定义参数 name:value,name:value
|
||
content: "回答别人提出的问题",//事件的内容
|
||
objId: this.qid,//关联的id
|
||
objType: "4",//关联的类型
|
||
objInfo: "问答",
|
||
aid: this.userInfo.aid, //当前登录人的id
|
||
aname: this.userInfo.name,//当前人的姓名
|
||
status: 1 //状态，直接写1
|
||
}
|
||
this.$store.dispatch("userTrigger", event);
|
||
} else {
|
||
this.$message({ message: res.message, type: "error" });
|
||
}
|
||
}).catch(err => {
|
||
this.$message({ message: "发布失败", type: "error" });
|
||
});
|
||
},
|
||
//编辑回答
|
||
editAnswer(data) {
|
||
let { sysCreateAid, id: answerid, content } = data;
|
||
this.editData = { sysCreateAid, answerid, content };
|
||
this.$refs.editQuestion.updateDialog = true;
|
||
},
|
||
//删除答案
|
||
delAnswer(data) {
|
||
this.$confirm("此操作将永久删除该答案, 是否继续?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning"
|
||
}).then(() => {
|
||
const { id } = data;
|
||
apiQa.delAnswer(id).then(res => {
|
||
if (res.status == 200) {
|
||
this.loadAnswer();
|
||
this.getQuestionDetail();
|
||
this.$message({
|
||
message: "删除成功",
|
||
type: "success"
|
||
});
|
||
} else {
|
||
this.$message({
|
||
message: res.message,
|
||
type: "error"
|
||
});
|
||
}
|
||
}).catch(err => {
|
||
this.$message({
|
||
message: "删除失败",
|
||
type: "error"
|
||
});
|
||
});
|
||
}).catch(() => { });
|
||
},
|
||
//设置为最佳答案
|
||
editAnsweBest(data) {
|
||
const { id } = data;
|
||
apiQa.isBest(id).then(res => {
|
||
if (res.status == 200) {
|
||
this.messageSave("set");
|
||
this.loadAnswer();
|
||
this.getQuestionDetail();
|
||
this.$message({
|
||
type: "success",
|
||
message: "设置为最佳答案成功"
|
||
});
|
||
}
|
||
}).catch(err => {
|
||
this.$message({
|
||
type: "warning",
|
||
message: "设置为最佳答案失败"
|
||
});
|
||
});
|
||
},
|
||
enSure(data) {
|
||
this.loadAnswer();
|
||
this.$off("ensure");
|
||
},
|
||
showButtons(id) {
|
||
if (!this.readonly) {
|
||
this.btnsShowRowId = id;
|
||
}
|
||
},
|
||
hideButtons() {
|
||
this.btnsShowRowId = '';
|
||
},
|
||
//展示全部
|
||
displayAll(item) {
|
||
let content = '';
|
||
content = item.content.replace(/(\n){2,}/,'<br>');
|
||
item.content = content;
|
||
if (!item.isAll && item.content.length > 170) {
|
||
return item.content.slice(0, 170) + "...";
|
||
}
|
||
return item.content;
|
||
},
|
||
changeIsAll(item) {
|
||
item.isAll = !item.isAll;
|
||
},
|
||
openAnswer() {
|
||
this.answerShow = true;
|
||
},
|
||
replyContentMethod(data, parent) {
|
||
if (!this.replyContent) {
|
||
return this.$message.error("回复内容不能为空");
|
||
}
|
||
|
||
//默认是一级评论，2级数据
|
||
let replyData = {
|
||
replayAid: data.sysCreateAid,
|
||
replayName: data.sysCreateBy,
|
||
content: this.replyContent.trim(),
|
||
parentId: data.id,
|
||
commentId: "",
|
||
clevel: 2
|
||
}
|
||
//console.log(data,'data');
|
||
if (data.clevel == 2) { //当前是一级评论
|
||
replyData.commentId = data.id;
|
||
replyData.clevel = 3;
|
||
} else if (data.clevel > 2) {
|
||
replyData.commentId = data.commentId;
|
||
replyData.clevel = 3;
|
||
}
|
||
apiQa.saveComment(replyData).then(res => {
|
||
if (res.status == 200) {
|
||
res.result.avatar = "";
|
||
res.result.sex = null;
|
||
res.result.isAll = false;
|
||
this.$message.success("回复成功");
|
||
this.getUserInfoList([res.result], [res.result.sysCreateAid]);
|
||
this.curParentId = '';
|
||
this.curParent = {};
|
||
this.replyContent = '';
|
||
//添加到页面中
|
||
if (data.clevel < 3) {
|
||
if (data.answers) {
|
||
data.answers.push(res.result);
|
||
} else {
|
||
data.answers = [];
|
||
data.answers.push(res.result);
|
||
}
|
||
} else {
|
||
parent.answers.push(res.result);
|
||
}
|
||
|
||
} else {
|
||
this.$message.error("回复失败");
|
||
}
|
||
});
|
||
},
|
||
showMoreReply(comment) {
|
||
this.replyDiaglog.pages = 1;
|
||
this.replyDiaglog.count = 0;
|
||
this.replyDiaglog.pageIndex = 1;
|
||
this.replyDiaglog.list = [];
|
||
this.replyDiaglog.show = true;
|
||
this.replyDiaglog.commentId = comment.id;
|
||
this.loadAllReplyData(false);
|
||
},
|
||
loadMoreReply() {
|
||
this.replyDiaglog.pageIndex++;
|
||
this.loadAllReplyData(true);
|
||
},
|
||
loadAllReplyData(append) {
|
||
let params = {
|
||
pageIndex: this.replyDiaglog.pageIndex,
|
||
pageSize: this.replyDiaglog.pageSize,
|
||
commentId: this.replyDiaglog.commentId
|
||
}
|
||
let $this = this;
|
||
// apiComment.replyList(params).then(rs=>{
|
||
// if(rs.status==200){
|
||
// $this.replyDiaglog.count=rs.result.count;
|
||
// $this.replyDiaglog.pages=rs.result.totalPages;
|
||
// let ids=[];
|
||
// if(append){
|
||
// rs.result.list.forEach(item=>{
|
||
// item.avatar='';
|
||
// ids.push(item.sysCreateAid);
|
||
// $this.replyDiaglog.list.push(item);
|
||
// })
|
||
// }else{
|
||
// rs.result.list.forEach(item=>{
|
||
// item.avatar='';
|
||
// ids.push(item.sysCreateAid);
|
||
// })
|
||
// $this.replyDiaglog.list=rs.result.list;
|
||
// }
|
||
// this.loadAuthorInfo(rs.result.list,ids);
|
||
// }else{
|
||
// this.$message.error(rs.message);
|
||
// }
|
||
// })
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.course-resources{
|
||
width: 410px;
|
||
margin-top: 26px;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
::v-deep .checked-show {
|
||
.el-dialog__header {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-card__body {
|
||
padding: 0;
|
||
}
|
||
|
||
::v-deep .bacolor:nth-child(odd) {
|
||
background-color: #fff;
|
||
padding: 0 5px;
|
||
}
|
||
|
||
::v-deep .bacolor:nth-child(even) {
|
||
background-color: #f6f6f6;
|
||
padding: 0 5px;
|
||
}
|
||
|
||
.write-btn {
|
||
width: 80px;
|
||
// height: 50px;
|
||
line-height: 36px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
border-radius: 4px;
|
||
border: 1px solid #3e7fff;
|
||
color: #3e7fff;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.ranking-title {
|
||
line-height: 34px;
|
||
font-size: 15px;
|
||
color: #333333;
|
||
|
||
.center-titlt {
|
||
font-size: 15px;
|
||
color: #333333;
|
||
}
|
||
|
||
.center {
|
||
text-align: right;
|
||
}
|
||
|
||
img {
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.detail {
|
||
background-color: #fff;
|
||
padding: 5px 20px 10px 20px;
|
||
|
||
.title {
|
||
margin-top: 20px;
|
||
font-size: 22px;
|
||
line-height: 30px;
|
||
word-break: break-all;
|
||
|
||
.resolve {
|
||
// padding: 3px;
|
||
color: #08a890;
|
||
margin-left: -10px;
|
||
}
|
||
|
||
.unResolve {
|
||
// padding:3px;
|
||
color: #588afc;
|
||
margin-left: -10px;
|
||
}
|
||
}
|
||
|
||
.label {
|
||
font-size: 15px;
|
||
color: #999999;
|
||
}
|
||
|
||
.content {
|
||
line-height: 21px;
|
||
margin: 14px 0 16px 0;
|
||
font-size: 15px;
|
||
color: #666666;
|
||
}
|
||
|
||
.btn-div {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 9px;
|
||
|
||
.answer-total {
|
||
font-size: 14px;
|
||
margin: 0 10px;
|
||
}
|
||
|
||
::v-deep .interact-bar-btns {
|
||
justify-content: flex-start !important;
|
||
}
|
||
}
|
||
|
||
.dian-btn {
|
||
margin-top: 50px;
|
||
width: 60%;
|
||
}
|
||
}
|
||
|
||
.answer {
|
||
margin-top: 14px;
|
||
background-color: #fff;
|
||
border-bottom: 1px solid #dddddd;
|
||
|
||
// padding: 5px 20px 20px 20px;
|
||
.answer-top {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
img {
|
||
margin-right: 10px;
|
||
width: 30px;
|
||
border: 1px solid #eee;
|
||
border-radius: 50%;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.zuijia {
|
||
width: 106px;
|
||
height: 42px;
|
||
color: #3e7fff;
|
||
font-size: 14px;
|
||
margin-left: auto;
|
||
background: rgba(38, 128, 235, 0.2);
|
||
//
|
||
border: 0;
|
||
padding: 0;
|
||
line-height: 42px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.answer-body {
|
||
padding-left: 40px;
|
||
|
||
.answer-text {
|
||
margin: 20px 0 15px;
|
||
line-height: 24px;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
|
||
span {
|
||
color: #409eff;
|
||
cursor: pointer;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
.answer-time {
|
||
font-size: 14px;
|
||
color: #8590a6;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.answer-boot {
|
||
height: 35px;
|
||
line-height: 35px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.answer-boot-btns {
|
||
a {
|
||
margin-right: 15px;
|
||
|
||
span {
|
||
margin-left: 6px;
|
||
color: #8590A6;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.answer-reply {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
|
||
.el-button {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .bottom {
|
||
// text-align: right;
|
||
// }
|
||
}
|
||
|
||
.comment {
|
||
margin-top: 10px;
|
||
background-color: #FFFFFF;
|
||
border-bottom: 1px solid #dddddd;
|
||
|
||
.comment-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-bottom: 10px;
|
||
font-weight: 500;
|
||
line-height: 30px;
|
||
font-size: 1.1em;
|
||
|
||
.comment-author {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
|
||
.comment-author-text {
|
||
margin-left: 10px;
|
||
color: #8590A6;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.comment-time {
|
||
color: #666666;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.comment-body {
|
||
padding-left: 40px;
|
||
|
||
.comment-content {
|
||
padding-bottom: 0px;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
|
||
span {
|
||
cursor: pointer;
|
||
color: #409EFF
|
||
}
|
||
}
|
||
|
||
.comment-btns {
|
||
// padding: 5px 10px 10px 0px;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
|
||
a {
|
||
margin-right: 15px;
|
||
|
||
span {
|
||
margin-left: 6px;
|
||
color: #8590A6;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.comment-reply {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
|
||
.el-button {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.comment-replys {
|
||
padding-left: 40px;
|
||
}
|
||
}
|
||
|
||
.comment-last {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.answer-reply-box {
|
||
margin-top: 10px;
|
||
background-color: #fff;
|
||
padding: 5px 20px 10px 20px;
|
||
}
|
||
|
||
// ::v-deep .publishAnswer {
|
||
// padding: 24px 20px;
|
||
// .el-card__body {
|
||
// // display: flex;
|
||
// // justify-content: space-between;
|
||
// align-items: center;
|
||
// .el-input__inner {
|
||
// height: 48px;
|
||
// }
|
||
// .el-button {
|
||
// margin-left: 20px;
|
||
// // height: 48px;
|
||
// // width: 78px;
|
||
// color: #e8f3fa;
|
||
// font-size: 16px;
|
||
// }
|
||
// }
|
||
// }
|
||
.box-card {
|
||
text-align: center;
|
||
font-size: 18px;
|
||
color: #6666;
|
||
// line-height: 84px;
|
||
margin-bottom: -24px;
|
||
height: 190px;
|
||
line-height: 40px;
|
||
|
||
.el-link {
|
||
line-height: 1;
|
||
}
|
||
}
|
||
</style>
|