Files
learning-system-portal/src/views/user/Mynotes.vue
2022-10-16 11:46:40 +08:00

826 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="note-info-index">
<div class="note-hear">
<h3>我的笔记</h3>
<div>
<el-dropdown style="margin-left:15px" @command="exportCommand">
<el-button>导出<i class="el-icon-arrow-down el-icon--right"></i></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="1">PDF</el-dropdown-item>
<el-dropdown-item command="2">Excel</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown style="margin-left:15px" @command="importCommand">
<el-button>导入<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="3">图片</el-dropdown-item>
<el-dropdown-item command="1">Txt</el-dropdown-item>
<el-dropdown-item command="2">Word</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="note-sift">
<el-date-picker
style="width:250px"
@change="Time()"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="Filtertime"
type="daterange"
start-placeholder="开始"
end-placeholder="结束">
</el-date-picker>
<el-dropdown @command="handleCommand">
<el-button>全部课程<i class="el-icon-arrow-down el-icon--right"></i></el-button>
<el-dropdown-menu slot="dropdown" style="height: 150px;overflow-y: auto !important;">
<el-dropdown-item command="">全部</el-dropdown-item>
<el-dropdown-item v-for="(cou,couidx) in couresna" :key="couidx" :command="cou.courseId">{{cou.courseName}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button @click="publish" class="el-buttons">
修改时间
<i v-if="ordertime" class="el-icon-bottom"></i>
<i v-else class="el-icon-upload2"></i>
</el-button>
<el-button @click="thumbs" class="el-buttons">
点赞次数
<i v-if="orderpiss" class="el-icon-bottom"></i>
<i v-else class="el-icon-upload2"></i>
</el-button>
</div>
<div class="note-tab">
<div class="tabcontent">
<span @click="noteData(null)" :class=" num == null ? 'tab-textactive':''" >全部</span>
<span @click="noteData(1)" :class=" num == 1 ? 'tab-textactive':''" >线上笔记</span>
<span @click="noteData(2)" :class=" num == 2 ? 'tab-textactive':''" >导入笔记</span>
</div>
</div>
<div class="note-all">
<div class="note-all-info" v-for="(item,idx) in datalist" :key="idx">
<div class="all-title">
<h3> {{ item.courseName }} </h3>
<div v-if="item.type==2">导入</div>
<div v-if="item.playTime != ''"><img :src="`${webBaseUrl}/images/coteplay.png`" alt=""> {{ getHMS(item.playTime) }} </div>
<span style="margin-left:14px">{{item.openType == 9?'公开':'私密'}}</span>
<h6>{{ item.sysUpdateTime }}</h6>
</div>
<div class="all-content">
<span v-if="item.contentType != 3">{{ item.content }}</span>
<div v-else>
<template v-for="img in item.content">
<img :src="fileBaseUrl + img" alt=""/>
</template>
</div>
</div>
<div class="all-footer">
<div>
<div class="textbut-box">
<interactBar v-if="item.type == 1" nodeWidth="60px" :readonly="true" :type="6" :data="item" :shares="false" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar>
<el-button @click="deleteNote(item)" style=" margin-right: 10px;" class="textbut" type="text"><svg-icon icon-class="notedel" ></svg-icon>删除</el-button>
<el-button @click="edit(item)" class="textbut" type="text"><svg-icon icon-class="noteedit" ></svg-icon> 编辑</el-button>
</div>
</div>
</div>
</div>
<div style="margin-top:50px;text-align: center">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageIndex"
:page-sizes="[10, 20, 30, 40]"
:page-size="paegSize"
layout="total, sizes, prev, pager, next, jumper"
:total="count">
</el-pagination>
</div>
</div>
<!-- 导入 -->
<el-dialog
:visible.sync="importDialogVisible"
width="785px"
:close-on-click-modal="false">
<div class="import-info">
<p class="import-info-tip">导入笔记</p>
<div class="import-info-enclosure">
<label class="label"><svg-icon style="font-size:12px;margin-right:5px" icon-class="red-start"></svg-icon>标题</label>
<el-input
type="text"
placeholder="请输入内容"
v-model="noteFile.courseName"
maxlength="20"
show-word-limit/>
</div>
<div class="import-info-enclosure">
<label class="label" style="width:66px"><svg-icon style="font-size:16px;margin-right:5px" icon-class="enclisure"></svg-icon>附件</label>
<file-upload dir="files" ref="myUpload" :isClear="importDialogVisible" :fileType="upNoteFile.fileType" :showList="true" :value="imageShowUrl" :limit="upNoteFile.limit" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></file-upload>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="importDialogVisible = false"> </el-button>
<el-button type="primary" @click="noteSave()"> </el-button>
</span>
</el-dialog>
<el-dialog
width="860px"
class="export-dialog"
:close-on-click-modal="false"
:visible.sync="dialogVisible">
<div class="Exportbox">
<div class="export-dialog-top">
<div class="export-dialog-left">
<author-img :avatar="userData.avatar" :aid="userData.aid" :sex="userData.sex"></author-img>
<div class="userInfo-info">
<p><span style="font-weight: 500;font-size: 22px;">{{userData.name}}</span><span style="font-size: 12px;margin-left:10px">{{userInfo.departFullName}}</span></p>
<p>{{userData.sign}}</p>
</div>
</div>
<div class="export-dialog-right">
<p>累计导出{{exportPreData.length}}</p>
<p style="margin-top:10px">导出时间{{formatDate(new Date())}}</p>
</div>
</div>
<div class="export-dialog-body">
<div class="Export-info" style="" v-for="(item,idx) in exportPreData" :key="idx">
<div class="all-title">
<h3> {{item.courseName}}</h3>
<div v-if="item.playTime != ''"><img :src="`${webBaseUrl}/images/coteplay.png`" alt="">{{item.playTime}}</div>
<h6>{{item.sysCreateTime}}</h6>
</div>
<div class="all-content">
<span v-if="item.contentType != 3">{{ item.content }}</span>
<div v-else>
<template v-for="img in item.content">
<img style="max-height:145px;max-width:140px" :src="fileBaseUrl + img" alt=""/>
</template>
</div>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="footer-btn" style="color: #387DF7;" plain @click="dialogVisible = false"> </el-button>
<!-- <el-button @click="dialogVisible = false"> </el-button> -->
<el-button class="footer-btn" style="margin-right:36px" type="primary" @click="exportStart()"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import apiNote from '@/api/phase2/note.js';
import interactBar from '@/components/Portal/interactBar.vue';
import FileUpload from '@/components/NoteUpload/index.vue';
import AuthorImg from '@/components/Portal/authorImg.vue';
import { mapGetters } from 'vuex';
import {formatDate} from '@/utils/tools.js';
import apiUser from "@/api/system/user.js";
export default {
components:{interactBar,FileUpload,AuthorImg},
computed: {
...mapGetters(['userInfo'])
},
data(){
return{
userData:{},
formatDate,
noteFile:{
contentType:null,
type:2,
courseName:'',
filePath:'',
fileName:'',
openType:1,
},
upNoteFile:{
content:[],
fileType:[],//文件上传格式
contentType:null,
limit:1,
},
uploadFileUrl: process.env.VUE_APP_BASE_API + '/xboe/sys/xuploader/file/upload',
text:'',
importDialogVisible:false,
imageShowUrl:'',
count:0,
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
options: [{
value: '选项1',
label: 'PDF'
}, {
value: '选项2',
label: 'Excel'
}],
value1: '起止时间',
num :null,
dialogVisible: false,
pageIndex:1,
paegSize:10,
orderType:true,
orderField:'',
courseId:'',
startTime:'',
endTime:'',
datalist:[ ],
exportPreData:[ ],
thu:true,
couresna:[],
courseName:'',
ordertime:true,
orderpiss:true,
Filtertime:[],
}
},
mounted(){
this.noteData(null);
this.allcoures();
apiUser.getByIds([this.userInfo.aid]).then(res => {
if (res.status == 200) {
this.userData = res.result[0];
} else {
this.$message.error(res.message);
}
});
},
methods: {
exportCommand(e) {
this.exportType = e;
this.dialogVisible = false;
let data = {
orderType:this.orderType,
orderField:this.orderField,
courseId:this.courseId,
type:this.num,
startTime:this.startTime,
endTime:this.endTime,
}
// 获取导出文件前的预览数据
apiNote.exportExcelPre(data).then(res=>{
if(res.status != 200){return;}
if(res.result.data.length == 0){
this.$message.warning('未查询到满足条件的数据')
return;
}
this.exportPreData = res.result.data;
if(res.result.isImage && e == 2){
this.$message.warning('当前筛选条件下含图片类内容无法导出Excel')
return;
}
this.dialogVisible = true;
})
},
exportStart(){
let ids = this.datalist.map(item=>{
if(item.contentType !=3) {
return item.id;
}
})
let data = {
name:this.userData.name,
sign:this.userData.sign,
orderType:this.orderType,
orderField:this.orderField,
courseId:this.courseId,
type:this.num,
startTime:this.startTime,
endTime:this.endTime,
author:this.userData.avatar,//this.userInfo.avatar,
}
if(this.exportType == '1') {
apiNote.exportPdf(data).then(res=>{
if(res.status) {
this.$message.error('导出失败');
} else {
const link = document.createElement('a');// 创建a标签
let blob = new Blob([res],{type: 'application/vnd.ms-pdf;charset=UTF-8'}); // 设置文件类型
link.style.display = "none";
link.href = URL.createObjectURL(blob); // 创建URL
link.setAttribute("download", "我的笔记.pdf");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
this.dialogVisible = false;
}
})
} else {
let data = {
orderType:this.orderType,
orderField:this.orderField,
courseId:this.courseId,
type:this.num,
startTime:this.startTime,
endTime:this.endTime,
}
// apiNote.exportExcel(ids).then(res=>{
apiNote.exportExcel(data).then(res=>{
if(res.status) {
this.$message.error('导出失败');
} else {
const link = document.createElement('a');// 创建a标签
let blob = new Blob([res],{type: 'application/vnd.ms-excel;charset=UTF-8'}); // 设置文件类型
link.style.display = "none";
link.href = URL.createObjectURL(blob); // 创建URL
link.setAttribute("download", "我的笔记.xls");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
this.dialogVisible = false;
}
})
}
},
noteSave() {
if(this.noteFile.courseName == '') {
this.$message.warning('请填写标题!');
return
}
this.noteFile.contentType = this.upNoteFile.contentType;
if(this.upNoteFile.content.length > 0) {
this.noteFile.filePath = this.upNoteFile.content.join();
}
if(this.noteFile.filePath == '') {
this.$message.warning('您还没有上传文件!');
return
}
apiNote.save(this.noteFile).then(res=>{
if(res.status == 200) {
this.$message.success('导入笔记成功');
this.importDialogVisible = false;
this.noteFile.courseName = '';
this.noteData(this.num);
}
})
},
handleBeforeUpload() {
},
importCommand(e){
this.importDialogVisible = true;
this.upNoteFile.contentType = e;
this.noteFile.filePath = '';
this.noteFile.fileName = '';
this.upNoteFile.content = [];
if(e == '3') {
this.upNoteFile.limit = 9;
this.upNoteFile.fileType = ["png","jpg"];
} else if(e == '1'){
this.upNoteFile.fileType = ["txt"];
} else {
this.upNoteFile.fileType = ["doc","docx"];
}
},
handleRemoveSuccess(file) {
if(this.upNoteFile.contentType == 1) {
// this.upNoteFile.content.push()
// this.noteFile.filePath.replace(file.response.result.filePath+',','');
this.upNoteFile.content.forEach((item,index) => {
if(item == file.response.result.filePath) {
this.upNoteFile.content.splice(index,1);
}
});
} else {
this.noteFile.filePath ='';
this.noteFile.fileName = '';
}
},
handleUploadSuccess(file) {
if(this.upNoteFile.contentType == 3) {
this.noteFile.fileName = '图片';
this.upNoteFile.content.push(file.result.filePath);
// this.noteFile.filePath += file.result.filePath;
} else {
this.noteFile.filePath = file.result.filePath;
this.noteFile.fileName = file.result.displayName;
}
},
handleCommand(e) {
this.courseId = e;
this.noteData(this.num);
},
Time(val){
if(this.Filtertime && this.Filtertime.length > 0) {
this.startTime = this.Filtertime[0];
this.endTime = this.Filtertime[1];
} else {
this.startTime ='';
this.endTime = '';
}
this.noteData(this.num);
},
deleteNote(item) {
let $this=this;
this.$confirm('移除后将不在笔记列表中展示', '确定要删除您的笔记吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
apiNote.del(item.id).then(res=>{
if(res.status==200){
this.noteData(this.num);
this.$message({type:'success', message: '删除成功!'});
//删除事件
let event = {
key: "DeleteNote",//
title: "删除笔记",//
parameters:"author",//
content: "删除了笔记",//
source:'page',
objId: item.id,//关联的id
objType: "6",//关联的类型
objInfo: "",
aid: this.userInfo.aid, //当前登录人的id
aname: this.userInfo.name,//当前人的姓名
status: 1 //状态直接写1
}
this.$store.dispatch("userTrigger", event);
}else{
this.$message({type:'success', message: '删除失败!'+res.message});
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
couresitem(item){
this.courseId = item.courseId;
this.noteData(this.num)
},
allcoures(){
apiNote.course().then(res=>{
this.couresna = res.result
})
},
publish(){
this.ordertime = !this.ordertime;
this.orderType = !this.orderType;
this.orderField = 'sysUpdateTime';
this.noteData(this.num)
},
thumbs(){
this.orderpiss = !this.orderpiss;
this.orderField = 'praises';
this.orderType = !this.orderType;
this.noteData(this.num)
},
edit(item){
this.$router.push({ path: `/user/Noteedit?id=${item.id}` });
},
noteData(tab){
this.num = tab
let data = {
pageIndex:this.pageIndex,
paegsize:this.paegSize,
orderType:this.orderType,
orderField:this.orderField,
courseId:this.courseId,
type:this.num,
startTime:this.startTime,
endTime:this.endTime,
}
apiNote.query(data).then(res=>{
if(res.status == 200) {
res.result.list.forEach((item,index)=>{
if(item.contentType == 3) {
item.content = item.content.split(',');
}
});
this.datalist = res.result.list;
this.count = res.result.count;
}
})
},
// 根据秒数转换成对应的时分秒
getHMS(time) {
const hour = parseInt(time / 3600) < 10 ? '0' + parseInt(time / 3600) : parseInt(time / 3600)
const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)
const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)
return hour + ':' + min + ':' + sec
},
handleSizeChange(val) {
this.paegSize = val;
this.pageIndex = 1;
this.noteData(this.num);
},
handleCurrentChange(val) {
this.pageIndex = val;
this.noteData(this.num);
}
}
}
</script>
<style lang="scss" scoped>
.footer-btn{
width: 140px;
height: 40px;
border-radius: 4px;
border: 1px solid #387DF7;
}
::v-deep .note-sift{
.el-dropdown-menu{
}
}
::v-deep .export-dialog{
.el-dialog__header{
display: none;
}
.el-dialog__body{
padding: 0;
}
.export-dialog-top{
height: 90px;
background: linear-gradient(128deg, #70B0FF 0%, #4B7CFF 15%, #4678FF 39%, #7599FF 76%, rgba(1,72,228,0.85) 100%);
box-shadow: 14px 12px 14px 2px rgba(0,0,0,0.03);
padding: 16px 46px 16px 56px;
color: #fff;
display: flex;
justify-content: space-between;
.export-dialog-left{
display: flex;
// ::v-deep .item-author .el-avatar{
// width: 60px !important;
// height: 60px !important;
// }
.el-avatar{
width: 60px;
height: 60px;
img{
width: 100% !important;
}
}
.userInfo-info{
margin-left: 40px;
}
}
.export-dialog-right{
text-align: right;
}
}
.export-dialog-body{
margin: 40px 13px 0 53px;
padding-right: 36px;
height: 500px;
overflow-y: auto;
}
}
.note-info-index{
padding: 15px 18px;
::v-deep .el-upload-dragger{
width: 500px;
height: 168px;
}
.import-info{
padding: 0 74px;
}
.import-info-tip{
font-size: 18px;
font-weight: 600;
color: #333333;
margin-bottom: 34px;
}
.import-info-enclosure{
display: flex;
margin-bottom: 27px;
.label{
width: 72px;
font-size: 16px;
color: #666666;
font-weight: 400;
}
}
}
.el-select-dropdown__item{
width: 140px !important;
}
.el-input--medium .el-input__inner{
height: 40px;
line-height: 40px;
}
.el-dropdown-menu--medium .el-dropdown-menu__item{
width: 100% !important;
// height: 30px !important;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
display: block;
word-break:break-all;
}
.el-dropdown-menu{
width: 140px !important;
padding: 12px 10px;
overflow: hidden;
li{
text-align: center;
}
}
.el-popper{
margin-top: 5px;
}
.Export-info{
border-bottom: 1px solid #ddd;
padding-bottom:30px;
margin-bottom:35px
}
.Export-info:last-child{
border: none;
}
::v-deep.dr-dialog{
max-width: 870px !important;
}
.all-title{
height: 50px;
display: flex;
.daoru{
width: 80px;
height: 30px;
border-radius: 4px;
border: 1px solid #3379FB;
}
h6{
margin: 0;
margin-left: auto;
float: right;
font-size: 14px;
color: #999999;
font-weight: 400;
}
h3{
font-size: 18px;
font-weight: 600;
color: #333333;
margin: 0;
float: left;
}
span{
width: 53px;
height: 22px;
border-radius: 10px;
border: 1px solid #3379FB;
font-size: 14px;
font-weight: 400;
color: #3379FB;
text-align:center;
margin-top: 2px;
display: inline-block;
}
div{
width: 120px;
height: 30px;
border-radius: 4px;
border: 1px solid #3379FB;
font-size: 14px;
font-weight: 400;
color: #387DF7;
line-height: 30px;
text-align: center;
float: left;
margin: 0 20px;
img{
width: 10px;
// height: 16px;
padding-top: 6px;
vertical-align: top;
margin-right: 12px;
}
}
}
::v-deep.el-dialog__header{
background: url('../../../public/images/daochubg.png') 100% / 100% !important;
}
.textbut-box{
// position: absolute;
// right: 0;
display: flex;
}
.textbut{
font-size: 12px;
font-weight: 400;
color: #6E7B84 !important;
}
.note-all{
width: 100%;
.note-all-info{
border-bottom: 1px solid #ddd;
padding-top: 35px;
.all-footer{
height: 10px;
padding-bottom: 45px;
width: 100%;
div{
float: right;
}
}
.all-content{
font-size: 14px;
font-weight: 400;
white-space: pre-line;
color: #333333;
img{
width: 140px;
height: 175px;
margin-right: 23px;
}
}
}
}
.tabcontent{
span{
margin-right: 45px;
padding: 0 7px;
text-align: center;
padding-bottom: 14px;
display: inline-block;
}
}
.tab-textactive{
border-bottom: 4px solid #3379FB;
transform: all 0.3s;
font-weight: 600;
}
.note-tab{
height: 40px;
margin-top: 40px;
border-bottom: 1px solid #ddd;
}
.el-buttons{
width: 160px !important;
height: 40px;
border-radius: 4px;
// margin-left: 20px;
}
.el-buttons:hover{
background-color: #fff !important;
border: 1px solid #ddd !important;
color: #0059FF !important;
}
.el-buttons:focus{
background-color: #fff !important;
color: #0059FF !important;
border: 1px solid #ddd !important;
}
.note-sift{
button{
width: 160px;
height: 40px;
border-radius: 4px;
margin-left: 20px;
}
::v-deep .el-input__inner{
height: 40px;
}
}
.note-hear{
width: 100%;
height: 50px;
div button{
width: 140px;
height: 40px;
}
h3{
margin: 0;
float: left;
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 30px;
}
div{
float: right;
button{
width: 140px;
font-size: 14px;
height: 40px;
border-radius: 4px;
border: 1px solid rgba(153,153,153,0.2);
}
}
}
</style>