hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-08 18:36:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

课程笔记

Browse Source
This commit is contained in:
zhaofang
2022-09-16 18:28:08 +08:00
parent ff41161347
commit 6165979b6f
5 changed files with 916 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Portal/authorInfo.vue
View File

@@ -5,15 +5,15 @@
<!-- <div v-else class="uavatar"><span class="uavatar-text">{{avatarText}}</span></div> -->
<el-avatar shape="circle" size="small" :src="userAvatar" v-if="userAvatar"></el-avatar>
<div v-else class="uavatar">
<div v-if="sex == null" style="border-radius: 50%;width: 28px;height: 28px;"></div>
<div v-if="sex == null" style="border-radius: 50%;width: 40px;height: 40px;"></div>
<div v-else>
<div v-if="sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
<div v-else><img src="../../../public/images/Avatarwoman.png" alt=""></div>
</div>
</div>
</div>
<div v-if="!onlyAvatar" style="padding-left: 5px;padding-top: 6px;font-size: 14px;color: #666666;">
<span>{{userName}}</span>
<div v-if="!onlyAvatar" style="padding-left: 14px;padding-top: 6px;font-size: 14px;">
<span style="color: #333333;font-weight: 600;">{{userName}}</span>
<span class="author-text" v-if="userInfo && userInfo!=''">({{userInfo}})</span>
</div>
</div>
@@ -112,7 +112,8 @@ import { userAvatarText } from "@/utils/tools.js";
line-height: 18px;
display: flex;
.author-text{
color: #6E7B84;
font-size: 12px;
color: #666666;
margin-left: 4px;
}
.uavatar{

114
src/components/Portal/comments.vue
View File

@@ -1,32 +1,16 @@
<template>
<!--评论组件-->
<div class="comments">
<div v-if="showTop" class="comments-top">
<!-- <div v-if="showTop" class="comments-top">
<div class="comments-top-left">评论 <span style="color: #797979;">{{total}}条</span>
<el-checkbox v-if="objType ==2" class="btn" v-model="value" type="primary">只看作者</el-checkbox>
<!-- <el-checkbox v-if="objType ==3" class="btn" v-model="value" type="primary">{{value?'查看所有':'只看案主 @案主可以给他发私信哦'}}</el-checkbox> -->
<!-- <el-radio-group class="btn" v-if="objType ==3" v-model="radio">
<el-radio v-show="radio == 2" :label="1">查看所有</el-radio>
<el-radio v-show="radio == 1" :label="2">只看案主 @案主可以给他发私信哦</el-radio>
</el-radio-group> -->
<el-checkbox v-if="objType ==3" class="btn" v-model="value" type="primary">{{'只看案主'}}</el-checkbox>
<span v-if="objType ==3" class="anzhu"> @案主可以给他发私信哦</span>
<!-- <span v-if="objType ==3"><span v-if="value" @click="value = true">查看所有</span><span v-if="!value" @click="value = false">只看案主 @案主可以给他发私信哦</span></span> -->
</div>
<!-- <div class="comments-top-right" v-if="objType !==2">
<span @click="showList(false)" v-if="listShow">收起<i class="el-icon-arrow-down"></i></span>
<span @click="showList(true)" v-else >打开<i class="el-icon-arrow-up"></i></span>
</div> -->
</div>
</div> -->
<div class="comments-input" v-if="!readonly">
<div class="grid-content bg-purple">
<div style="position: relative !important" class="at-min">
<!-- <el-popover placement="top" width="300" trigger="click">
<el-radio-group v-model="teacherInfo">
<el-radio-button class="reference-tag" v-for="item in teachers" :key="item.id" :label="item.teacherName"></el-radio-button>
</el-radio-group>
<el-tag ref="tag" slot="reference"></el-tag>
</el-popover> -->
<el-popover placement="top-start" width="160" v-model="visible">
<p style="margin-bottom: 10px">请选择要@的老师</p>
@@ -39,18 +23,11 @@
:label="item.aid">{{ item.name }}</el-radio-button>
</el-radio-group>
</div>
<!-- <div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="cancelTeacher()">取消</el-button>
<el-button type="primary" >确定</el-button>
</div> -->
<el-tag ref="tag" slot="reference" class="tag-block"></el-tag>
</el-popover>
</div>
<div style="width:100%;display:flex;">
<div style="flex: 1;">
<!-- type="textarea"
:row="1" -->
<el-input
v-if="objType !==3"
:autosize="{ minRows: 2, maxRows: 2 }"
@@ -59,7 +36,7 @@
show-word-limit
v-model="inputValue"
maxlength="800"
placeholder="写下您的评论(800字以内)，可以@作者哦～"
placeholder="写评论～"
></el-input>
<el-input
v-if="objType ==3"
@@ -80,6 +57,13 @@
</div>
</div>
</div>
<div v-if="showTop" class="comments-top">
<div class="comments-top-left portal-title-tow" style="font-size: 18px;">{{total}}条评论
<el-checkbox v-if="objType ==2" class="btn" v-model="value" type="primary">只看作者</el-checkbox>
<el-checkbox v-if="objType ==3" class="btn" v-model="value" type="primary">{{'只看案主'}}</el-checkbox>
<span v-if="objType ==3" class="anzhu"> @案主可以给他发私信哦</span>
</div>
</div>
<!--列表内容-->
<div class="comments-items" v-show="listShow">
<!--一个评论-->
@@ -87,29 +71,32 @@
<div class="comment" v-for="(com,comIdx) in list" :key="com.id">
<div class="comment-top">
<div class="comment-author">
<authorInfo :avatar="com.avatar" :name="com.sysCreateBy" :sex="com.sex"></authorInfo>
</div>
<div class="comment-time">
<showTime :time="com.sysCreateTime"></showTime>
<authorInfo :avatar="com.avatar" :name="com.sysCreateBy" :sex="com.sex" :info="com.orgInfo"></authorInfo>
</div>
</div>
<div class="comment-body" >
<div class="comment-info" @mouseover="showButtons(com.id)" @mouseout="hideButtons()">
<div class="comment-content" @click="cancelReply()">
<span style="color: #303133" v-html="displayAll(com)"></span>
<span class="portal-summary-text" style="color: #666666;" v-html="displayAll(com)"></span>
<span v-if="com.content.length>170" @click="changeIsAll(com)">
{{com.isAll?'收起':'全文'}}
</span>
</div>
<div class="comment-btns">
<!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
<div v-show="btnsShowRowId==com.id">
<a @click="showReply(com)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
<!--必须当前登录人是一个人-->
<a v-if="userInfo.aid==com.sysCreateAid" @click="delCommnet(com,comIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
<!-- <a v-if="com.replyList && com.replyList.length==5" @click="showMoreReply(com)" ><svg-icon icon-class="all" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>全部</span></a> -->
</div>
<div class="comment-time portal-time">
<showTime :time="com.sysCreateTime"></showTime>
<interactBar :type="10" :shares="false" :data="com" @addAnswers="showReply(com)" :favorites="false" :views="false" :comments="false" :answers="true"></interactBar>
</div>
<!-- <div class="comment-btns"> -->
<!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
<!-- <div v-show="btnsShowRowId==com.id"> -->
<!-- <a @click="showReply(com)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a> -->
<!--必须当前登录人是一个人-->
<!-- <a v-if="userInfo.aid==com.sysCreateAid" @click="delCommnet(com,comIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a> -->
<!-- <a v-if="com.replyList && com.replyList.length==5" @click="showMoreReply(com)" ><svg-icon icon-class="all" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>全部</span></a> -->
<!-- </div> -->
<!-- </div> -->
<div v-if="replyInfo.parentId==com.id" class="comment-reply" style="padding-bottom: 5px;">
<div style="width:100%;display:flex;">
<div style="flex: 1;">
@@ -126,29 +113,32 @@
<div class="comment" v-for="(reply,replyIdx) in com.replyList" :key="reply.id" :class="replyIdx===com.replyList.length-1 ? 'comment-last' : ''">
<div class="comment-top">
<div class="comment-author">
<authorInfo :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex"></authorInfo>
<span style="margin-left: 10px;color: #8590A6;font-size:14px; ">回复</span>
<span style="margin-left: 10px; font-size:14px">{{reply.replyName || reply.toAname}}</span>
</div>
<div class="comment-time">
<showTime :time="reply.sysCreateTime"></showTime>
<authorInfo :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex" :info="reply.orgInfo"></authorInfo>
<span style="margin-left: 10px;color: #8590A6;font-size:14px; ">
<svg-icon style="font-size: 10px;margin-right: 0;" icon-class="triangle"></svg-icon>
</span>
<span style="margin-left: 6px;font-size:14px;margin-top:5px" class="portal-title-tow" >{{reply.replyName || reply.toAname}}</span>
</div>
</div>
<div class="comment-body" @mouseover="showButtons(reply.id)" @mouseout="hideButtons()">
<div class="comment-info" >
<div class="comment-content" @click="cancelReply()">
<span style="color: #303133" v-html="displayAll(reply)"></span>
<span class="portal-summary-text" style="color: #666666;" v-html="displayAll(reply)"></span>
<span v-if="reply.content.length>170" @click="changeIsAll(reply)">
{{reply.isAll?'收起':'全文'}}
</span>
</div>
<div class="comment-btns">
<div class="comment-time portal-time">
<showTime :time="reply.sysCreateTime"></showTime>
<interactBar :type="10" :shares="false" :data="reply" @addAnswers="showReply(reply)" :favorites="false" :views="false" :comments="false" :answers="true"></interactBar>
</div>
<!-- <div class="comment-btns"> -->
<!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
<div v-show="btnsShowRowId==reply.id">
<!-- <div v-show="btnsShowRowId==reply.id">
<a @click="showReply(reply)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
<a v-if="userInfo.aid==reply.sysCreateAid" @click="delReply(com,reply,replyIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
</div>
</div>
</div> -->
<!-- </div> -->
</div>
<!--发布回复-->
<div v-if="replyInfo.parentId==reply.id" class="comment-reply" style="padding-bottom: 5px;">
@@ -177,7 +167,7 @@
<div class="comment" v-for="(reply,rIdx) in replyDiaglog.list" :key="rIdx">
<div class="comment-top">
<div class="comment-author">
<authorInfo :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex"></authorInfo>
<authorInfo :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex" :info="reply.orgInfo"></authorInfo>
<span style="margin-left: 10px;color: #8590A6;font-size:14px; ">回复</span>
<span style="margin-left: 10px; font-size:14px">{{reply.replyName || reply.toAname}}</span>
</div>
@@ -244,6 +234,7 @@
</template>
<script>
import showTime from '@/components/Portal/datetimeShow.vue'
import interactBar from "@/components/Portal/interactBar.vue";
import apiComment from '@/api/modules/comments.js'
import apiUser from '@/api/system/user.js'
import authorInfo from '@/components/Portal/authorInfo.vue';
@@ -279,7 +270,7 @@
default:false
}
},
components:{showTime,authorInfo},
components:{showTime,authorInfo,interactBar},
computed: {
...mapGetters(['userInfo'])
},
@@ -544,6 +535,7 @@
item.isAll=!item.isAll;
},
showReply(item){
console.log("9999999999");
this.replyInfo.objType=this.objType;
this.replyInfo.objId=this.objId;
this.replyInfo.parentId=item.id;
@@ -818,11 +810,18 @@
margin-top: 10px;
background-color: #FFFFFF;
padding: 5px 15px;
.comment-time{
display: flex;
justify-content: space-between;
margin-top: 10px;
color: #666666;
font-size: 12px;
}
.comments-top{
display: flex;
justify-content: space-between;
padding:10px;
border-bottom: 1px solid #f4f4f4;
// border-bottom: 1px solid #f4f4f4;
font-weight: 500;
font-size: 1.1em;
.comments-top-left{
@@ -848,8 +847,7 @@
}
}
.comments-input{
// border-bottom: 1px solid #dddddd;
padding: 5px 15px 10px 15px;
padding: 20px 15px 10px 15px;
}
.comments-items{
padding: 5px 15px;
@@ -863,7 +861,7 @@
.comment{
margin-top: 10px;
background-color: #FFFFFF;
border-bottom: 1px solid #dddddd;
// border-bottom: 1px solid #dddddd;
.comment-top{
display: flex;
justify-content: space-between;
@@ -876,10 +874,6 @@
align-items: center;
height: 30px;
line-height: 30px;
}
.comment-time{
color: #666666;
font-size: 12px;
}
}
.comment-body{

845
src/components/Portal/noteComment.vue Normal file
View File

@@ -0,0 +1,845 @@
<template>
<!--笔记组件-->
<div class="comments">
<div v-if="showTop" class="comments-top">
<div class="comments-top-left portal-title-tow" style="font-size: 18px;">{{total}}条笔记
<el-checkbox v-if="objType ==2" class="btn" v-model="value" type="primary">只看作者</el-checkbox>
<el-checkbox v-if="objType ==3" class="btn" v-model="value" type="primary">{{'只看案主'}}</el-checkbox>
<span v-if="objType ==3" class="anzhu"> @案主可以给他发私信哦</span>
</div>
</div>
<!--列表内容-->
<div class="comments-items" v-show="listShow">
<!--一个评论-->
<div class="zan-wu" v-if="list.length == 0">暂无评论～</div>
<div class="comment" v-for="(com,comIdx) in list" :key="com.id">
<div class="comment-top">
<div class="comment-author">
<authorInfo :avatar="com.avatar" :name="com.sysCreateBy" :sex="com.sex" :info="com.orgInfo"></authorInfo>
</div>
</div>
<div class="comment-body" >
<div class="comment-info" @mouseover="showButtons(com.id)" @mouseout="hideButtons()">
<div class="comment-content" @click="cancelReply()">
<span class="portal-summary-text" style="color: #666666;" v-html="displayAll(com)"></span>
<span v-if="com.content.length>170" @click="changeIsAll(com)">
{{com.isAll?'收起':'全文'}}
</span>
</div>
<div class="comment-time portal-time">
<showTime :time="com.sysCreateTime"></showTime>
<interactBar :type="10" :shares="false" :data="com" @addAnswers="showReply(com)" :favorites="false" :views="false" :comments="false" :answers="true"></interactBar>
</div>
<!-- <div class="comment-btns"> -->
<!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
<!-- <div v-show="btnsShowRowId==com.id"> -->
<!-- <a @click="showReply(com)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a> -->
<!--必须当前登录人是一个人-->
<!-- <a v-if="userInfo.aid==com.sysCreateAid" @click="delCommnet(com,comIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a> -->
<!-- <a v-if="com.replyList && com.replyList.length==5" @click="showMoreReply(com)" ><svg-icon icon-class="all" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>全部</span></a> -->
<!-- </div> -->
<!-- </div> -->
<div v-if="replyInfo.parentId==com.id" class="comment-reply" style="padding-bottom: 5px;">
<div style="width:100%;display:flex;">
<div style="flex: 1;">
<el-input class="hideControl" type="textarea" show-word-limit v-model="replyInfo.content" maxlength="800" placeholder="回复内容..."></el-input>
</div>
<div style="width: 120px;display: flex;justify-content: flex-end;">
<el-button @click="submitReply(com)" type="primary">发布回复</el-button>
</div>
</div>
</div>
</div>
<!--回复内容-->
<div v-if="com.replyList && com.replyList.length>0">
<div class="comment" v-for="(reply,replyIdx) in com.replyList" :key="reply.id" :class="replyIdx===com.replyList.length-1 ? 'comment-last' : ''">
<div class="comment-top">
<div class="comment-author">
<authorInfo :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex" :info="reply.orgInfo"></authorInfo>
<span style="margin-left: 10px;color: #8590A6;font-size:14px; ">
<svg-icon style="font-size: 10px;margin-right: 0;" icon-class="triangle"></svg-icon>
</span>
<span style="margin-left: 6px;font-size:14px;margin-top:5px" class="portal-title-tow" >{{reply.replyName || reply.toAname}}</span>
</div>
</div>
<div class="comment-body" @mouseover="showButtons(reply.id)" @mouseout="hideButtons()">
<div class="comment-info" >
<div class="comment-content" @click="cancelReply()">
<span class="portal-summary-text" style="color: #666666;" v-html="displayAll(reply)"></span>
<span v-if="reply.content.length>170" @click="changeIsAll(reply)">
{{reply.isAll?'收起':'全文'}}
</span>
</div>
<div class="comment-time portal-time">
<showTime :time="reply.sysCreateTime"></showTime>
<interactBar :type="10" :shares="false" :data="reply" @addAnswers="showReply(reply)" :favorites="false" :views="false" :comments="false" :answers="true"></interactBar>
</div>
<!-- <div class="comment-btns"> -->
<!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
<!-- <div v-show="btnsShowRowId==reply.id">
<a @click="showReply(reply)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
<a v-if="userInfo.aid==reply.sysCreateAid" @click="delReply(com,reply,replyIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
</div> -->
<!-- </div> -->
</div>
<!--发布回复-->
<div v-if="replyInfo.parentId==reply.id" class="comment-reply" style="padding-bottom: 5px;">
<div style="width:100%;display:flex;">
<div style="flex: 1;">
<el-input show-word-limit class="hideControl" type="textarea" v-model="replyInfo.content" maxlength="100" placeholder="回复内容..."></el-input>
</div>
<div style="width: 120px;display: flex;justify-content: flex-end;">
<el-button @click="submitReply(com)" type="primary">发布回复</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pagination-div">
<!-- v-if="moreState == 1 -->
<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="list.length !== 0 && moreState == 3">没有更多数据了</span>
</div>
<el-dialog title="全部回复内容" width="60%" :visible.sync="replyDiaglog.show" :close-on-click-modal="false" custom-class="g-dialog">
<div style="padding: 10px;max-height: 500px;overflow-y: auto;">
<div class="comment" v-for="(reply,rIdx) in replyDiaglog.list" :key="rIdx">
<div class="comment-top">
<div class="comment-author">
<authorInfo :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex" :info="reply.orgInfo"></authorInfo>
<span style="margin-left: 10px;color: #8590A6;font-size:14px; ">回复</span>
<span style="margin-left: 10px; font-size:14px">{{reply.replyName || reply.toAname}}</span>
</div>
<div class="comment-time">
<showTime :time="reply.sysCreateTime"></showTime>
</div>
</div>
<div class="comment-body" @mouseover="showButtons(reply.id)" @mouseout="hideButtons()">
<div class="comment-info">
<div class="comment-content">{{reply.content}}</div>
<div class="comment-btns"><!--操作还没有加-->
<div v-show="btnsShowRowId==reply.id">
<a @click="showDlgReply(reply)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
<a v-if="userInfo.aid==reply.sysCreateAid" @click="delDlgReply(reply,rIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
</div>
</div>
</div>
<!--发布回复-->
<div v-if="replyInfo.parentId==reply.id" class="comment-reply" style="padding-bottom: 5px;">
<div style="width:100%;display:flex;">
<div style="flex: 1;">
<el-input show-word-limit class="hideControl" type="textarea" v-model="replyInfo.content" maxlength="100" placeholder="回复内容..."></el-input>
</div>
<div style="width: 120px;display: flex;justify-content: flex-end;">
<el-button @click="submitDlgReply(com)" type="primary">发布回复</el-button>
</div>
</div>
</div>
</div>
</div>
<div style="padding: 20px 10px;text-align: center;">
<div v-if="replyDiaglog.pages>replyDiaglog.pageIndex">
<span class="pag-text" @click="loadMoreReply()">加载更多</span>
</div>
<div v-else >
<span class="pag-text-msg">没有更多数据了</span>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="replyDiaglog.show= false"> 关 闭 </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import showTime from '@/components/Portal/datetimeShow.vue'
import interactBar from "@/components/Portal/interactBar.vue";
import apiComment from '@/api/modules/comments.js'
import apiUser from '@/api/system/user.js'
import authorInfo from '@/components/Portal/authorInfo.vue';
// import author from '@/components/Portal/author.vue';
import { mapGetters } from 'vuex';
export default {
props:{
showTop:{
type:Boolean,
default:true
},
authorId:{
type:String,
},
objId:{
type:String,
required:true
},
objType:{
type:Number,
required:true
},
objTitle:{
type:String,
default:''
},
toUsers:{
type:Array,
},
readonly:{
type:Boolean,
default:false
}
},
components:{showTime,authorInfo,interactBar},
computed: {
...mapGetters(['userInfo'])
},
data() {
return {
radio:1,
value:false,
sex:null,
author:'',
moreState:1,
isAuthor: false,
authorList:[],//当前页面存储的用户信息，如果已经存在就不再重新请求了
toUserId: '',
loadStatus:'more',//more,loading,noMore
pageSize:10,
pageIndex:1,
total:0,
listShow:true,
inputValue:'',
list:[],
replyParent:{},
replyShow:false,
btnsShowRowId:'',
replyInfo:{
clevel:2,
parentId:'',
replyAid:'',
commentId:'',
replyName:'',
objType:'',
objId:'',
content:''
},
replyDiaglog:{
show:false,
pageIndex:1,
pageSize:8,
pages:1,
count:0,
commentId:'',
list:[]
},
toUserDig:{
show:false,
name:'',
chooseUserId:'',
chooseUserName:'',
list:[]
},
visible:false,
}
},
watch:{
value(newVal,oldVal){
if(newVal){
this.author = this.authorId;
} else {
this.author = '';
}
this.loadData();
},
radio(newVal){
if(newVal == 2){
this.author = this.authorId;
} else {
this.author = '';
}
this.loadData();
},
inputValue(val,oldVal) {
let fu = val.substr(-1);
if(fu == '@'&&!oldVal) {
this.toUserId = '';
if(this.toUsers.length == 1 && this.toUsers.length !== 0) {
this.toUserDig.chooseUserId = this.toUsers[0].aid;
this.toUserDig.chooseUserName=this.toUsers[0].name;
this.inputValue+=this.toUsers[0].name;
}else {
this.$refs.tag.$el.click();
}
}
}
},
mounted() {
this.author = this.authorId;
this.loadData(false);
//在中文输入法状态下输入光标不在文字最后，同时会被遮挡两个文字大小的长度
// let vm=document.querySelector('.hideControl input')
// vm.addEventListener('compositionstart',(e)=>{
// vm.style.padding='0 63px 0 0'
// vm.size=100
//以上两种方式都未解决
// })
},
methods: {
loadMore() {
this.pageIndex +=1;
this.loadData(true);
},
// lookYourself() {// 只看作者
// this.pageIndex =1;
// this.isAuthor = !this.isAuthor;
// if(this.isAuthor){
// this.author = this.authorId;
// } else{
// this.author = '';
// }
// this.loadData();
// },
loadAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
// console.log(list,ids)
if(ids.length==0){
return;
}
const noReapetIds=[...new Set(ids)]
apiUser.getByIds(ids).then(res=>{
if(res.status==200){
list.forEach((item,index)=>{
res.result.some(author=>{
if(author.aid==item.sysCreateAid){
item.avatar=author.avatar;
item.orgInfo=author.orgInfo;
item.sex=author.sex;
return true;
}else{
return false;
}
})
});
}else{
console.log('加载用户头像信息:'+res.error);
//this.$message.error(res.message);
}
});
},
// cancelTeacher() {
// this.inputValue = this.inputValue.substr(0, this.inputValue.length -1);
// this.visible = false;
// },
confirmTeacher() {
this.toUserDig.chooseUserId = this.toUserId;
this.toUsers.forEach(item=>{
if(item.aid == this.toUserId) {
this.toUserDig.chooseUserName=item.name;
this.inputValue+=item.name;
}
})
this.visible = false;
},
loadData(append){
let params={
pageIndex:this.pageIndex,
pageSize:this.pageSize,
type:this.objType,
id:this.objId,
author: this.author,
}
let $this=this;
apiComment.pageQuery(params).then(res=>{
if(res.status==200){
let ids=[];
let allList=[];
res.result.list.forEach(item=>{
item.avatar='';
item.orgInfo='';
item.isAll=false;
//item.sex=null;
allList.push(item);
ids.push(item.sysCreateAid);
if(item.replyList && item.replyList!=''){
item.replyList.forEach(reply=>{
reply.avatar='';
reply.orgInfo='';
reply.sex=null;
reply.isAll=false;
allList.push(reply);
ids.push(reply.sysCreateAid);
})
}
});
this.loadAuthorInfo(allList,ids);
this.total=res.result.count;
if(append){
res.result.list.forEach(item=>{
$this.list.push(item);
});
}else{
$this.list=res.result.list;
}
if($this.list.length == this.total) {
this.moreState = 3;
}
this.$emit('writeTotal',this.total);
}else{
this.$message.error(res.message);
}
});
},
showList(flag){
this.listShow=flag;
},
submit(){
if(this.inputValue.trim()!=''){
let cdata={
objType:this.objType,
objId:this.objId,
parentId:'-1',
content:this.inputValue.trim(),
clevel:1,
toAid:'',
toAname:'',
}
if(this.toUserDig.chooseUserId!=='' && this.toUserDig.chooseUserName!=''){
cdata.toAid=this.toUserDig.chooseUserId;
cdata.toAname=this.toUserDig.chooseUserName;
}
apiComment.add(cdata).then(res=>{
if(res.status==200){
// this.list.unshift(res.result);
// this.sex =
res.result.sex=null;
res.result.isAll=false;
this.list.unshift(res.result);
this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
this.$message.success('发布成功');
//
this.total++;
this.$emit('success',res.result);
this.inputValue='';
this.toUserDig.chooseUserId='';
this.toUserDig.chooseUserName='';
}else{
this.$message.error(res.message);
}
});
}
},
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 && item.content.length > 170) {
return item.content.slice(0, 170) + "...";
}
return item.content;
},
changeIsAll(item) {
item.isAll=!item.isAll;
},
showReply(item){
console.log("9999999999");
this.replyInfo.objType=this.objType;
this.replyInfo.objId=this.objId;
this.replyInfo.parentId=item.id;
this.replyInfo.replyAid=item.sysCreateAid;
this.replyInfo.replyName=item.sysCreateBy;
this.replyShow=true;
},
cancelReply(){
this.replyInfo.parentId='';
},
submitReply(comment){
this.replyInfo.content = this.replyInfo.content.trim();
if(this.replyInfo.content==''){
return;
}
this.replyInfo.content=this.replyInfo.content.replace(/^\s*|\s*$/g,"");
if(this.replyInfo.content==''){
return;
}
this.replyInfo.commentId=comment.id;
if(comment.replyList==''){
comment.replyList=[];
}
apiComment.reply(this.replyInfo).then(res=>{
if(res.status==200){
res.result.sex = null;
res.result.isAll=false;
this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
comment.replyList.push(res.result);
this.replyInfo.parentId='';
this.replyInfo.content='';
this.$message.success("发布成功");
}else{
this.$message.error(res.message);
}
});
},
delCommnet(com,idx){
if(com.replyList!='' && com.replyList.length>0){
this.$message.error('有回复的评论不能删除');
return;
}
this.$confirm('您确定要删除所选评论吗?', '删除提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
apiComment.del(com.id,this.userInfo.aid).then(res=>{
if(res.status==200){
this.list.splice(idx,1);
this.total--;
this.$message.success("删除成功");
this.$emit('delSuccess');
}else{
this.$message.error(res.message);
}
});
});
},
delReply(com,re,idx){
// if(com.replyList!='' && com.replyList.length>0){
// this.$message.error('有回复的评论不能删除');
// }
let params={
id:re.id,
user:this.userInfo.aid,
pid:re.parentId
}
this.$confirm('您确定要删除所选评论吗?', '删除提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
apiComment.delReply(params).then(res=>{
if(res.status==200){
com.replyList.splice(idx,1);
this.$message.success("删除成功");
}else{
this.$message.error(res.message);
}
});
})
},
delDlgReply(re,idx){ //弹出窗口中的删除操作
let params={
id:re.id,
user:this.userInfo.aid,
pid:re.parentId
}
let $this=this;
this.$confirm('您确定要删除所选评论吗?', '删除提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
apiComment.delReply(params).then(res=>{
if(res.status==200){
$this.replyDiaglog.list.splice(idx,1);
$this.$message.success("删除成功");
}else{
$this.$message.error(res.message);
}
}).catch(()=>{
})
})
},
showDlgReply(item){
this.replyInfo.objType=this.objType;
this.replyInfo.objId=this.objId;
this.replyInfo.parentId=item.id;
this.replyInfo.replyAid=item.sysCreateAid;
this.replyInfo.replyName=item.sysCreateBy;
this.replyShow=true;
},
submitDlgReply(){
this.replyInfo.content = this.replyInfo.content.trim();
if(this.replyInfo.content==''){
return;
}
this.replyInfo.content=this.replyInfo.content.replace(/^\s*|\s*$/g,"");
if(this.replyInfo.content==''){
return;
}
this.replyInfo.commentId=this.replyDiaglog.commentId;
apiComment.reply(this.replyInfo).then(res=>{
if(res.status==200){
res.result.sex = null;
res.result.isAll=false;
this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
this.replyDiaglog.list.push(res.result);
this.replyInfo.parentId='';
this.replyInfo.content='';
this.$message.success("发布成功");
}else{
this.$message.error(res.message);
}
});
},
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,
type:this.objType,
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);
}
})
},
showToUser(){
this.toUserDig.show=true;
this.toUserDig.chooseUserId='';
this.toUserDig.chooseUserName='';
},
findUserKeyupEnter(){
this.findUser();
},
findUser(){
this.toUserDig.list=[];
var name=this.toUserDig.name;
if(name==''){
return;
}
apiUser.findByName(name).then(rs=>{
if(rs.status==200){
this.toUserDig.list=rs.result;
}else{
this.$message.error('查询用户失败');
}
})
},
confirmUser(u){
this.toUserDig.chooseUserId=u.aid;
this.toUserDig.chooseUserName=u.name;
this.toUserDig.show=false;
this.toUserDig.name='';
}
}
}
</script>
<style lang="scss" scoped>
.anzhu{
font-size: 14px;
color: #999;
}
::v-deep .el-input--medium .el-input__inner {
height: 48px;
}
::v-deep .at-min{
.el-popper[x-placement^=bottom] {
// left: 0 !important;
// bottom: 0 !important;
margin-left: 30px !important;
}
.el-popover{
}
}
.tag-block{
top:0;
left: 0;
position: absolute;
background-color: #fff;
border-color: #fff;
height: 1px;
}
.pag-text{
border: 1px solid #292828;
padding: 10px 20px;
border-radius: 20px;
background: #fff;
cursor: pointer;
}
.reference-tag{
display: block;
// width: 100%;
.el-radio-button__inner{
border: 1px solid #fff !important;
}
}
.svg-btn{
font-size: 30px;
line-height: 30px;
margin-right: 20px;
cursor: pointer;
margin-top: 5px;
}
.comments{
margin-top: 10px;
background-color: #FFFFFF;
padding: 5px 15px;
.comment-time{
display: flex;
justify-content: space-between;
margin-top: 10px;
color: #666666;
font-size: 12px;
}
.comments-top{
display: flex;
justify-content: space-between;
padding:10px;
// border-bottom: 1px solid #f4f4f4;
font-weight: 500;
font-size: 1.1em;
.comments-top-left{
.btn{
// width: 68px;
// height: 32px;
// background: #3C7EFF;
border-radius: 6px;
font-size: 12px;
padding: 10px;
margin-left: 24px;
::v-deep .el-radio__inner{
border-radius: 0 !important;
}
}
}
.comments-top-center{
}
.comments-top-right{
color: #6b6b6b;
cursor: pointer;
}
}
.comments-input{
padding: 20px 15px 10px 15px;
}
.comments-items{
padding: 5px 15px;
.zan-wu{
text-align: center;
font-size: 18px;
color: #6666;
}
}
}
.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-body{
padding-left: 40px;
.comment-content{
padding-bottom: 0px;
white-space: pre-wrap;
word-break:break-all;
span {
color: #409eff;
cursor: pointer;
margin-left: 5px;
}
}
.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-replys{
padding-left: 40px;
}
}
.comment-last{
border-bottom: none;
}
::v-deep .hideControl{
.el-input__count{
}
.el-textarea__inner{
padding-right: 50px;
}
}
</style>

1
src/icons/svg/triangle.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1663322082653" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2441" width="200" height="200"><path d="M204.58705 951.162088 204.58705 72.836889 819.41295 511.998977Z" p-id="2442" fill="#666666"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 260 B

19
src/views/study/coursenew.vue
View File

@@ -110,14 +110,15 @@
<div @click="coutab" :class="courestab == true? 'coureactive' : ''">课程评论<span class=""></span> </div>
<div @click="coutab" :class="courestab == false? 'coureactive' : ''">课程笔记<span class=""></span> </div>
</div>
<div v-if="courestab" class="coures-comments" style="margin-left:17px">
<div v-show="courestab" class="coures-comments" style="margin-left:17px">
<comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id" :toUsers="toUsers"></comments>
</div>
<div v-else class="coures-note">
<div class="note-tole">33条笔记</div>
<div v-show="!courestab" class="coures-note">
<note-comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id"></note-comments>
<!-- <div class="note-tole">33条笔记</div>
<div class="note-info">
</div>
</div> -->
</div>
</div>
@@ -190,6 +191,7 @@
import { mapGetters } from 'vuex';
import portalHeader from "@/components/PortalHeader.vue";
import comments from "@/components/Portal/comments.vue";
import noteComments from "@/components/Portal/noteComment.vue";
import interactBar from "@/components/Portal/interactBar.vue";
import audioPlayer from '@/components/AudioPlayer/index.vue';
import videoPlayer from '@/components/VideoPlayer/index.vue';
@@ -214,7 +216,7 @@ import assess from '@/components/Course/assess';
import myNote from '../../components/Course/myNote.vue';
export default {
name: "atticle",
components: {courseImage, portalHeader, hyperLink, comments, homework, exam, interactBar, assess, pdfPreview, audioPlayer, videoPlayer,myNote },
components: {courseImage, portalHeader, hyperLink, comments, homework, exam, interactBar, assess, pdfPreview, audioPlayer, videoPlayer,myNote,noteComments },
data(){
return{
notePlay:null,
@@ -1068,8 +1070,8 @@ export default {
}
.coures-note{
min-height: 500px;
padding-left: 50px;
padding-top: 25px;
padding-left: 17px;
padding-top: 10px;
.note-tole{
color: #333333;
font-size: 18px;
@@ -1090,11 +1092,12 @@ export default {
margin-left: 47px;
div{
flex: 1;
color: #666666;
color: #333333;
font-size: 18px;
}
.coureactive{
color: #333333;
font-weight: 600;
position: relative;
span{
display: inline-block;