动态收集事件添加

This commit is contained in:
zhaofang
2022-09-19 20:12:23 +08:00
parent 9d8839b401
commit 596410abef
4 changed files with 306 additions and 238 deletions

View File

@@ -1,131 +1,133 @@
<template> <template>
<div class="my-note"> <div class="my-note">
<div class="mynote"> <div class="mynote">
<div class="mynote-tab"> <div class="mynote-tab">
<div @click="notetabType(1)" :class="notetab == 1 ? 'noteactive' : ' ' "> <a href="#">新增笔记</a> </div> <div @click="notetabType(1)" :class="notetab == 1 ? 'noteactive' : ' ' "> <a href="#">新增笔记</a> </div>
<div @click="notetabType(2)" :class="notetab == 2 ? 'noteactive' : ' '"> <a href="#">我的笔记</a> </div> <div @click="notetabType(2)" :class="notetab == 2 ? 'noteactive' : ' '"> <a href="#">我的笔记</a> </div>
</div> </div>
<!-- 新增笔记 --> <!-- 新增笔记 -->
<div class="newcote-content" v-if="notetab == 1"> <div class="newcote-content" v-if="notetab == 1">
<div class="newcote-time" v-if="mynoteData.playTime != 0"> <div class="newcote-time" v-if="mynoteData.playTime != 0">
<img src="../../../public/images/coteplay.png" /> <img src="../../../public/images/coteplay.png" />
{{formatSeconds(mynoteData.playTime)}} {{formatSeconds(mynoteData.playTime)}}
<img src="../../../public/images/cotedetel.png" @click="timeDel()"/> <img src="../../../public/images/cotedetel.png" @click="timeDel()" />
</div>
<div class="newcote-text">
<el-input type="textarea" :autofocus="true" placeholder="好记性不如烂笔头,记录些什么吧~"
v-model="mynoteData.content" maxlength="200" :autosize="{ minRows: 18, maxRows: 20}"
show-word-limit>
</el-input>
</div>
</div>
<!-- 我的笔记 -->
<div class="mycote-content" v-if="notetab == 2">
<div v-if="noteList.length > 0">
<div style="border-bottom:1px solid #4444;padding-bottom:25px;" v-for="note in noteList"
:key="note.id">
<span class="mycote-time">{{note.sysCreateTime}}
<span class="sm">{{note.openType == 1?'公开':'私密'}}</span>
<span class="more">
<el-dropdown>
<span class="el-dropdown-link">
<svg-icon style="margin-right: 0;font-size:26px;" icon-class="spot"></svg-icon>
</span>
<el-dropdown-menu slot="dropdown" class="dropdown-box"
style="background:#333333;border: none;">
<el-dropdown-item command="a" style="color:#fff" @click.native="noteDel(note)">
<img style="width:13px;height:18px;vertical-align: middle;"
src="@/assets/images/icon/note-del.png" /> 删除</el-dropdown-item>
<el-dropdown-item command="b" style="color:#fff" @click.native="noteEdit(note)">
<img style="width:13px;height:14px;margin-right:4px;vertical-align: middle;"
src="@/assets/images/icon/note-edit.png" />编辑</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
<div style="margin-top:10px" class="newcote-time" v-if="note.playTime"
@click="onPlayVideo(note.playTime)">
<img src="../../../public/images/coteplay.png" alt="">
{{formatSeconds(note.playTime)}}
</div> </div>
<div class="newcote-text"> <div class="newcote-text">
<el-input {{note.content}}
type="textarea"
:autofocus="true"
placeholder="好记性不如烂笔头,记录些什么吧~"
v-model="mynoteData.content"
maxlength="200"
:autosize="{ minRows: 18, maxRows: 20}"
show-word-limit>
</el-input>
</div> </div>
</div> </div>
<!-- 我的笔记 --> <h6 class="mycote-dibu">已经到底啦</h6>
<div class="mycote-content" v-if="notetab == 2"> </div>
<div v-if="noteList.length > 0"> <div class="my-nonote" v-else>
<div style="border-bottom:1px solid #4444;padding-bottom:25px;" v-for="note in noteList" :key="note.id"> <img src="../../../public/images/no-note.png" alt="" />
<span class="mycote-time">{{note.sysCreateTime}} <h6 style="color: #666666;font-size: 14px;">你还没有记录此课程的笔记哦</h6>
<span class="sm">{{note.openType == 1?'公开':'私密'}}</span> </div>
<span class="more"> </div>
<el-dropdown> <div class="newcote-bottom" v-if="notetab == 1">
<span class="el-dropdown-link"> <span style="cursor: pointer;" @click="videoLocation"> <img src="../../../public/images/playtime.png"
<svg-icon style="margin-right: 0;font-size:26px;" icon-class="spot"></svg-icon> alt=""> 视频位置</span>
</span> <el-radio v-model="mynoteData.openType" :label="1">公开</el-radio>
<el-dropdown-menu slot="dropdown" class="dropdown-box" style="background:#333333;border: none;"> <el-radio v-model="mynoteData.openType" :label="2">私密</el-radio>
<el-dropdown-item command="a" style="color:#fff" @click.native="noteDel(note)"><img style="width:13px;height:18px;vertical-align: middle;" src="@/assets/images/icon/note-del.png" /> 删除</el-dropdown-item> <el-button type="primary" size="small" @click="saveNote()">保存</el-button>
<el-dropdown-item command="b" style="color:#fff" @click.native="noteEdit(note)"><img style="width:13px;height:14px;margin-right:4px;vertical-align: middle;" src="@/assets/images/icon/note-edit.png" />编辑</el-dropdown-item> </div>
</el-dropdown-menu> </div>
</el-dropdown> <div class="animation-box" :class="inAnimation?'animation':''" @animationend="inAnimation=false">
<div class="box-text">
</span> <img src="../../../public/images/success-note.png" />笔记保存成功U币+2
</span> </div>
<div style="margin-top:10px" class="newcote-time" v-if="note.playTime" @click="onPlayVideo(note.playTime)"> </div>
<img src="../../../public/images/coteplay.png" alt="">
{{formatSeconds(note.playTime)}}
</div>
<div class="newcote-text">
{{note.content}}
</div>
</div>
<h6 class="mycote-dibu">已经到底啦</h6>
</div>
<div class="my-nonote" v-else>
<img src="../../../public/images/no-note.png" alt=""/>
<h6 style="color: #666666;font-size: 14px;">你还没有记录此课程的笔记哦</h6>
</div>
</div>
<div class="newcote-bottom" v-if="notetab == 1">
<span style="cursor: pointer;" @click="videoLocation"> <img src="../../../public/images/playtime.png" alt=""> 视频位置</span>
<el-radio v-model="mynoteData.openType" :label="1">公开</el-radio>
<el-radio v-model="mynoteData.openType" :label="2">私密</el-radio>
<el-button type="primary" size="small" @click="saveNote()">保存</el-button>
</div>
</div>
<div class="animation-box" :class="inAnimation?'animation':''" @animationend="inAnimation=false">
<div class="box-text">
<img src="../../../public/images/success-note.png"/>笔记保存成功U币+2
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import apiNote from '@/api/phase2/note.js'; import apiNote from '@/api/phase2/note.js';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import {formatDate,formatSeconds} from '@/utils/datetime.js'; import { formatDate, formatSeconds } from '@/utils/datetime.js';
import {testType,correctJudgment,numberToLetter} from '@/utils/tools.js'; import { testType, correctJudgment, numberToLetter } from '@/utils/tools.js';
export default { export default {
props:{ props: {
data: { data: {
type: Object, type: Object,
default:()=>{} default: () => { }
}, },
}, },
name:'MyNote', name: 'MyNote',
data() { data() {
return { return {
inAnimation:false, inAnimation: false,
radio:'1', radio: '1',
notetab:1, notetab: 1,
autoSave:null, autoSave: null,
mynoteData:{ mynoteData: {
type:1, //我发布的是1 我导入的是2 type: 1, //我发布的是1 我导入的是2
content:'', content: '',
playTime:'', playTime: '',
courseId:'',// 课程id courseId: '',// 课程id
contentId:'',//课程内容id contentId: '',//课程内容id
courseName:'',// 课程名称 courseName: '',// 课程名称
openType:1,// 1表不公开 9表完全公开 openType: 1,// 1表不公开 9表完全公开
}, },
noteList:[], noteList: [],
type:1, // 1自动保存 2点击保存 type: 1, // 1自动保存 2点击保存
}; };
}, },
computed: { computed: {
...mapGetters(['intTimeNote','userInfo']), ...mapGetters(['intTimeNote', 'userInfo']),
}, },
mounted() { mounted() {
this.mynoteData.courseId = this.data.courseId; this.mynoteData.courseId = this.data.courseId;
this.mynoteData.contentId = this.data.id; this.mynoteData.contentId = this.data.id;
// if(localStorage.getItem("NOTE_TEXT") !=''){ // if(localStorage.getItem("NOTE_TEXT") !=''){
// this.mynoteData.content = localStorage.getItem("NOTE_TEXT"); // this.mynoteData.content = localStorage.getItem("NOTE_TEXT");
// this.notetab = 1; // this.notetab = 1;
// } // }
this.getMyNote(); this.getMyNote();
// this.autoSaveNote(); // this.autoSaveNote();
}, },
watch:{ watch: {
intTimeNote(val) { intTimeNote(val) {
this.mynoteData.playTime = val; this.mynoteData.playTime = val;
} }
}, },
methods: { methods: {
onPlayVideo(time) { onPlayVideo(time) {
this.$emit('onPlayVideo',time); this.$emit('onPlayVideo', time);
}, },
formatSeconds(value) { formatSeconds(value) {
let result = parseInt(value) let result = parseInt(value)
@@ -134,53 +136,53 @@
let s = Math.floor((result % 60)); let s = Math.floor((result % 60));
let res = ''; let res = '';
if(h > 0){ if (h > 0) {
res += `${h}:${m}:${s}`; res += `${h}:${m}:${s}`;
} else { } else {
res += `${m}:${s}`; res += `${m}:${s}`;
} }
return res; return res;
}, },
timeDel(){ timeDel() {
this.mynoteData.playTime = 0; this.mynoteData.playTime = 0;
}, },
autoSaveNote() { autoSaveNote() {
this.autoSave = setInterval(()=>{ this.autoSave = setInterval(() => {
localStorage.setItem("NOTE_TEXT",this.mynoteData.content); localStorage.setItem("NOTE_TEXT", this.mynoteData.content);
},10000); }, 10000);
}, },
noteEdit(note) { noteEdit(note) {
this.mynoteData = note; this.mynoteData = note;
this.notetabType(1); this.notetabType(1);
}, },
noteDel(note) { noteDel(note) {
this.$confirm('您确定要删除这条笔记吗?', '删除提示', { this.$confirm('您确定要删除这条笔记吗?', '删除提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(async() => { }).then(async () => {
apiNote.del(note.id).then(res=>{ apiNote.del(note.id).then(res => {
if(res.status == 200) { if (res.status == 200) {
this.getMyNote(); this.getMyNote();
} else { } else {
this.$message({ type: 'error', message: res.message, offset: 50 }); this.$message({ type: 'error', message: res.message, offset: 50 });
} }
})
}) })
})
.catch((err) => { .catch((err) => {
this.$message({ type: 'info', message: '已取消删除', offset: 50 }); this.$message({ type: 'info', message: '已取消删除', offset: 50 });
}); });
}, },
getMyNote() { getMyNote() {
apiNote.myCourse(this.mynoteData.courseId).then(res=>{ apiNote.myCourse(this.mynoteData.courseId).then(res => {
if(res.status == 200) { if (res.status == 200) {
this.noteList = res.result; this.noteList = res.result;
} }
}) })
}, },
videoLocation() { videoLocation() {
this.$emit('videoLocation'); this.$emit('videoLocation');
}, },
notetabType(num) { notetabType(num) {
this.notetab = num; this.notetab = num;
@@ -189,157 +191,178 @@
// } // }
}, },
saveNote() { saveNote() {
if(this.mynoteData.content == '') { if (this.mynoteData.content == '') {
this.$message({ type: 'info', message: '您还没有书写笔记!', offset: 50 }); this.$message({ type: 'info', message: '您还没有书写笔记!', offset: 50 });
return; return;
} }
apiNote.save(this.mynoteData).then(res=>{ apiNote.save(this.mynoteData).then(res => {
if(res.status == 200 ) { if (res.status == 200) {
if(!this.mynoteData.id) { if (!this.mynoteData.id) {
this.inAnimation = true; this.inAnimation = true;
// 是编辑新增 if(this.mynoteData.openType != 9){
let event = { return
key: "PublishNote",//后台的事件key }
title: "发布公开的笔记",//事件的标题 // 是编辑新增
parameters:"",//用户自定义参数 name:value,name:value let event = {
content: "每发布一个公开 的笔记",//事件的内容 key: "PublishNote",//后台的事件key
objId: res.result.id,//关联的id title: "发布公开的笔记",//事件的标题
objType: "4",//关联的类型 parameters: "",//用户自定义参数 name:value,name:value
objInfo: "笔记", content: "每发布一个公开 的笔记",//事件的内容
aid: this.userInfo.aid, //当前登录人的id objId: res.result.id,//关联的id
aname: this.userInfo.name,//当前人的姓名 objType: "4",//关联的类型
status: 1 //状态直接写1 objInfo: "笔记",
aid: this.userInfo.aid, //当前登录人的id
aname: this.userInfo.name,//当前人的姓名
status: 1 //状态直接写1
}
this.$store.dispatch("userTrigger", event);
} }
this.$store.dispatch("userTrigger", event); setTimeout(() => {
localStorage.setItem("NOTE_TEXT", '');
// clearInterval(this.autoSave);
this.getMyNote();
this.notetabType(2);
this.mynoteData = {
type: 1, //我发布的是1 我导入的是2
content: '',
playTime: '',
courseId: '',// 课程id
contentId: '',//课程内容id
courseName: '',// 课程名称
openType: 1,// 1表不公开 9表完全公开
};
}, 2000)
} }
setTimeout(()=>{
localStorage.setItem("NOTE_TEXT",'');
// clearInterval(this.autoSave);
this.getMyNote();
this.notetabType(2);
this.mynoteData={
type:1, //我发布的是1 我导入的是2
content:'',
playTime:'',
courseId:'',// 课程id
contentId:'',//课程内容id
courseName:'',// 课程名称
openType:1,// 1表不公开 9表完全公开
};
},2000)
}
}) })
} }
}, },
beforeDestroy() { beforeDestroy() {
// clearInterval(this.autoSave); // clearInterval(this.autoSave);
this.autoSave = null; this.autoSave = null;
}, },
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .el-dropdown-menu__item:hover{ ::v-deep .el-dropdown-menu__item:hover {
background: #333333; background: #333333;
} }
.mynote{
.mynote {
// width: 100%; // width: 100%;
margin: 35px 30px; margin: 35px 30px;
position: relative; position: relative;
.animation{
.animation {
display: block !important; display: block !important;
animation-name:ubAddBlock; animation-name: ubAddBlock;
animation-duration:2s; animation-duration: 2s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
.animation-box{
.animation-box {
display: none; display: none;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right:200px; right: 200px;
.box-text{
.box-text {
padding: 12px 16px; padding: 12px 16px;
width: 252px; width: 252px;
height: 40px; height: 40px;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 8px 20px 0px rgba(0,35,114,0.1); box-shadow: 0px 8px 20px 0px rgba(0, 35, 114, 0.1);
border-radius: 2px; border-radius: 2px;
font-size: 14px; font-size: 14px;
color: rgba(0,0,0,0.65); color: rgba(0, 0, 0, 0.65);
img{
img {
width: 16px; width: 16px;
height: 16px; height: 16px;
vertical-align: middle; vertical-align: middle;
margin-right: 22px; margin-right: 22px;
} }
} }
} }
.newcote-time{
.newcote-time {
width: 80px; width: 80px;
height: 30px; height: 30px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #3379FB; border: 1px solid #3379FB;
font-size: 14px; font-size: 14px;
color: #387DF7;; color: #387DF7;
;
text-align: center; text-align: center;
line-height: 28px; line-height: 28px;
margin-bottom: 12px; margin-bottom: 12px;
img{
img {
vertical-align: middle; vertical-align: middle;
margin: 0 5px; margin: 0 5px;
} }
} }
.newcote-bottom{
span{ .newcote-bottom {
span {
font-size: 14px;
color: #333333;
margin-right: 30px;
img {
width: 20px;
height: 24px;
vertical-align: middle;
}
}
}
.newcote-text {
// margin-top: 24px;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
margin-right: 30px; height: 100%;
img{
width: 20px; ::v-deep .el-textarea__inner {
height: 24px; background: #f5f5f5;
vertical-align: middle; border: none;
} padding: 0;
}
} }
}
.newcote-text{ .newcote-content {
// margin-top: 24px;
font-size: 14px;
color: #333333;
height: 100%;
::v-deep .el-textarea__inner{
background: #f5f5f5;
border: none;
padding: 0;
}
}
.newcote-content{
margin: 30px 0px; margin: 30px 0px;
box-sizing: border-box; box-sizing: border-box;
padding: 35px 30px; padding: 35px 30px;
height: 474px; height: 474px;
background-color: #F5F5F5 ; background-color: #F5F5F5;
} }
.mycote-content{
.mycote-content {
margin: 30px 0px; margin: 30px 0px;
box-sizing: border-box; box-sizing: border-box;
padding: 8px 30px; padding: 8px 30px;
height: 550px; height: 550px;
overflow-y: auto; overflow-y: auto;
background-color: #fff; background-color: #fff;
.my-nonote{
.my-nonote {
text-align: center; text-align: center;
margin-top: 100px; margin-top: 100px;
img{
img {
width: 198px; width: 198px;
height: 163px; height: 163px;
} }
} }
.mycote-time{
color: #666; .mycote-time {
font-size: 14px; color: #666;
padding-bottom: 20px; font-size: 14px;
.sm{ padding-bottom: 20px;
.sm {
width: 50px; width: 50px;
height: 22px; height: 22px;
border-radius: 10px; border-radius: 10px;
@@ -348,38 +371,43 @@
font-size: 12px; font-size: 12px;
line-height: 50px; line-height: 50px;
margin-left: 20px; margin-left: 20px;
padding: 3px 10px; padding: 3px 10px;
} }
.more{
.more {
margin-top: 12px; margin-top: 12px;
float: right; float: right;
} }
} }
.mycote-dibu{
margin: 50px 38%;
color: #999999; .mycote-dibu {
font-size: 14px; margin: 50px 38%;
}
} color: #999999;
.mynote-tab{ font-size: 14px;
}
}
.mynote-tab {
width: 180px; width: 180px;
margin-top: 17px; margin-top: 17px;
display: flex; display: flex;
div{
div {
font-size: 16px; font-size: 16px;
color: #666666; color: #666666;
flex: 1; flex: 1;
} }
.noteactive a{
.noteactive a {
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
padding-bottom: 7px; padding-bottom: 7px;
border-bottom: 4px solid #387DF7; border-bottom: 4px solid #387DF7;
} }
} }
} }
</style> </style>

View File

@@ -59,7 +59,7 @@
</div> </div>
<div style="width: 90px;display: flex;justify-content: flex-end;"> <div style="width: 90px;display: flex;justify-content: flex-end;">
<el-button @click="submit()" style="height: 35px;margin-top:20px" type="primary">发布</el-button> <el-button @click="submit()" style="height: 52px;" type="primary">发布</el-button>
</div> </div>
</div> </div>
</div> </div>
@@ -193,7 +193,7 @@
<el-input show-word-limit class="hideControl" type="textarea" v-model="replyInfo.content" maxlength="100" placeholder="回复内容..."></el-input> <el-input show-word-limit class="hideControl" type="textarea" v-model="replyInfo.content" maxlength="100" placeholder="回复内容..."></el-input>
</div> </div>
<div style="width: 120px;display: flex;justify-content: flex-end;"> <div style="width: 120px;display: flex;justify-content: flex-end;">
<el-button @click="submitDlgReply(com)" type="primary">发布回复</el-button> <el-button @click="submitDlgReply(com)" type="primary">发布1回复</el-button>
</div> </div>
</div> </div>
</div> </div>
@@ -499,7 +499,20 @@
this.list.unshift(res.result); this.list.unshift(res.result);
this.loadAuthorInfo([res.result],[res.result.sysCreateAid]); this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
this.$message.success('发布成功'); this.$message.success('发布成功');
//
let event = {
key: "PublishComment",//后台的事件key 发布文章且审核通过
title: "发表评论",//事件的标题
parameters:"",//用户自定义参数 name:value,name:value
content: "每发表一个评论",//事件的内容
objId: this.resolveId,//关联的id
objType: this.objType,//关联的类型
objInfo: "评论",
aid: this.userInfo.aid, //当前登录人的id
aname: this.userInfo.name,//当前人的姓名
status: 1 //状态直接写1
}
this.$store.dispatch("userTrigger", event);
this.total++; this.total++;
this.$emit('success',res.result); this.$emit('success',res.result);
@@ -569,6 +582,19 @@
this.replyInfo.parentId=''; this.replyInfo.parentId='';
this.replyInfo.content=''; this.replyInfo.content='';
this.$message.success("发布成功"); this.$message.success("发布成功");
let event = {
key: "ReplyComment",//后台的事件key 发布文章且审核通过
title: "回复评论",//事件的标题
parameters:"",//用户自定义参数 name:value,name:value
content: "每回一个评论",//事件的内容
objId: this.replyInfo.commentId,//关联的id
objType: this.objType,//关联的类型
objInfo: "评论",
aid: this.userInfo.aid, //当前登录人的id
aname: this.userInfo.name,//当前人的姓名
status: 1 //状态直接写1
}
this.$store.dispatch("userTrigger", event);
}else{ }else{
this.$message.error(res.message); this.$message.error(res.message);
} }

View File

@@ -185,7 +185,7 @@ export default {
}, },
data() { data() {
return { return {
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL, fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
resonimg:{}, resonimg:{},
Internet:3,//1是成功 2是是失败 3是检测中 Internet:3,//1是成功 2是是失败 3是检测中
noData:true, noData:true,

View File

@@ -489,6 +489,20 @@ export default {
this.$message.success('打分成功,谢谢您的打分'); this.$message.success('打分成功,谢谢您的打分');
that.scoreInfo.has = true; that.scoreInfo.has = true;
that.courseInfo.score = rs.result; that.courseInfo.score = rs.result;
let event = {
key: "ScoreCourse",//后台的事件key 发布文章且审核通过
title: "完成课程评分",//事件的标题
parameters:"",//用户自定义参数 name:value,name:value
content: "给课程评分",//事件的内容
objId: this.resolveId,//关联的id
objType: 1,//关联的类型
objInfo: this.courseInfo.name,
aid: this.userInfo.aid, //当前登录人的id
aname: this.userInfo.name,//当前人的姓名
status: 1 //状态直接写1
}
this.$store.dispatch("userTrigger", event);
} else { } else {
this.$message.error('打分处理失败,请稍后再试'); this.$message.error('打分处理失败,请稍后再试');
} }