learning-system-portal/src/views/user/Noteedit.vue

<template>
   <div class="box" style="padding: 38px 42px;">
      <div class="edit-box">
         <div class="edit-hear">
            <h3>笔记编辑</h3>
            <span>{{isShowTip}}</span>
            <span class="his-info pointer" @click="isShowList = true">历史记录</span>
         </div>
         <div class="edit-content">
            <div class="note-tit">
                <div @click="toCoursePage()" v-if="editdata.playTime != ''" :style="{cursor:editdata.type==1? 'pointer':''}"><img :src="`${webBaseUrl}/images/coteplay.png`" alt="">{{getHMS(editdata.playTime)}}</div>
            </div>
            <div class="note-text" v-if="editdata.contentType != 3">
               <!-- <input style="vertical-align:top;outline:none;" type="textarea"  :rows="4" v-model="editdata.content"> -->
                <textarea v-model="editdata.content" name="" id="" cols="" rows="16" style="vertical-align:top;outline:none;width:100%;border:none; font-size: 14px;font-weight: 400;color: #333333;" maxlength="200"
  show-word-limit></textarea>
            </div>
            <div class="note-text" v-else>
               <div class="img-box" v-for="(img,index) in imgContent">
                  <img  :src="fileBaseUrl + img" alt=""/>
                  <span class="del-icon"><i class="el-icon-delete" @click="imgDel(index)"></i></span>
               </div>
            </div>
         </div>
         <div class="edit-footer">
            <el-radio-group  v-if="editdata.openType == 9" v-model="editdata.openType"><el-radio :label="9">公开</el-radio><el-radio :label="1">私密</el-radio></el-radio-group>
            <el-radio-group  v-if="editdata.openType == 1" v-model="editdata.openType"><el-radio :label="1">私密</el-radio></el-radio-group>
            <el-button style="margin-right:40%;box-shadow: 1px 8px 15px 1px rgba(56,125,247,0.18);" type="primary" @click="savedata">保存</el-button>
            <el-button  @click="comeback">取消</el-button>
         </div>
      </div>
      <div class="edti-hist" v-show="isShowList">
         <h3>历史记录 <i style="font-size: 22px;color: #999;float: right;" @click="isShowList = false" class="el-icon-circle-close"></i></h3>
         <div class="histinfo" v-for="(item,idx) in histdata" :key="idx">
            <div class="hist-top">
               编辑了笔记
               <span style="font-size: 12px;">{{item.sysCreateTime}}</span>
            </div>
            <div class="hist-cont">
               <div class="hist-tit">
                  <div class="one-line-ellipsis">
                      {{ item.noteName }}
                  </div>
                  <span class="pointer" @click="restore(item)"> <i class="el-icon-refresh-left"></i> 还原</span>
               </div>
               <div class="hist-text" v-if="editdata.contentType != 3">
                 {{ item.beforeContent }}
               </div>
               <div class="hist-text" v-else>
                 <template class="img-box" v-for="(before,index) in item.beforeContent">
                  <img style="width:40px;height:65px;margin-right:10px" :src="fileBaseUrl + before" alt=""/>
                 </template>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>

<script>
import apiNote from '@/api/phase2/note.js'
import {getHMS} from '@/utils/tools.js';
export default {
   data () {
      return {
         getHMS,
         imgContent:[],
         fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
         isShowList:false,
       isShowTip:'',
        radio: '1',
        editdata:{
         content:'',
         isAuto:false,
         type:0,
         courseId:''
        },
        histId:'',
        histdata:[],
        id:'',
        timer:null,
      };
    },
    mounted(){
      this.id = this.$route.query.id;
      this.notedetail();
      this.timer = setInterval(()=>{
         this.savedata(1);
      },30000);
    },
    methods:{
      toCoursePage(){
        if(this.editdata.type==1){
          this.$router.push('/course/detail?id='+this.editdata.courseId);
        }
      },
      imgDel(index) {
         this.imgContent.splice(index,1);
      },
       comeback(){
          clearInterval(this.timer);
          this.timer = null;
          this.$router.go(-1);
       },
       notedetail(){
           apiNote.detail(this.id).then(res=>{
            if(res.result.contentType == 3 && res.result.content != '') {
               this.imgContent = res.result.content.split(',');
           }
           this.editdata = res.result;
           this.editdata.openTypeBackups = res.result.openType;
           this.histId = res.result.id;

           this.hist();
        })
       },
       restore(item){
         this.$confirm('确定还原此次笔记吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         if(this.editdata.contentType == 3) {
            this.imgContent = item.beforeContent;
         } else {
            this.editdata.content = item.beforeContent;
         }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消还原'
          });
        });

         //  apiNote.restore(item.id).then(res=>{
         //       this.$message({
         //          message: '还原成功',
         //          type: 'success'
         //       });
         //       this.hist();
         //  })

       },
      hist(){
         apiNote.history(this.histId).then(res=>{
            if(this.editdata.contentType == 3) {
               res.result.forEach(item=>{
                  item.beforeContent = item.beforeContent.split(',');
               })

            }
            this.histdata = res.result
         })
      },
       savedata(num){
         if(this.editdata.openTypeBackups == 1 && this.editdata.openType == 9) {
           this.$message({
                  message: '仅支持公开笔记转私密笔记！',
                  type: 'warning'
               });
            this.editdata.openType == 1;
         }
         if(num == 1) {
            this.editdata.isAuto = true;

         }
         if(this.imgContent.length > 0) {
            this.editdata.content = this.imgContent.join();
         }
          apiNote.update(this.editdata).then(res=>{
            if(res.status == 200) {
               sessionStorage.setItem('isShowTip','');
              if(num ==1) {//自动保存
                  this.editdata.sysVersion += 1;
                  this.isShowTip = '笔记自动保存成功';
                  setTimeout(()=>{
                     this.isShowTip = '';
                  },10000*2)
               } else {
                  this.notedetail()
                  this.$message({message: '笔记保存成功',type: 'success',center: true});
                  // 跳转到笔记列表
                  clearInterval(this.timer);
                  this.timer = null;
                  this.$router.go(-1);
               }
            } else {
               this.isShowTip = '当前网络异常，内容已离线保存，请尝试连接网络后重新自动上传！';
               setTimeout(()=>{
                     this.isShowTip = '';
                  },10000 * 2)
               sessionStorage.setItem('isShowTip',this.editdata.content);
            }
          })
       }
    },
    beforeDestroy() {
      // clearInterval(this.timer);
      // this.timer = null;
      clearInterval(this.timer)
      this.timer = null
  },
  destroyed(){
   clearInterval(this.timer)
   this.timer = null
  }

}
</script>

<style lang="scss" scoped>
.note-input{
   outline-style: none;
   border: none;
   font-size: 14px;
   font-weight: 400;
   color: #333333;
   width: 300px;
   height: 300px;
}
.edti-hist{
   position: absolute;
   // height: 650px;
   overflow-y: auto;
   right: -10px;
   top:-20px;
   width: 380px;
   padding: 0 30px;
   box-sizing: border-box;
   margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: #333333;
   background: #FFFFFF;
   box-shadow: -9px 2px 25px 0px rgba(119,119,119,0.16);
   height: 700px;
   border-radius: 4px;
   h3{
      margin: 0;
      margin-top: 50px;
      padding-bottom: 33px;
      border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2);
   }
   .histinfo{
      // background: #F2F5F7;
      .hist-cont{
         // padding: 38px 32px;
         box-sizing: border-box;
         // height: 163px;
         background: #FFFFFF;
         border-radius: 4px;
         margin-top: 20px;
         padding-bottom: 30px;
         border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2);
         .hist-text{
            word-break:break-all;
            font-weight: 400;
            color: #666666;
            margin-top: 20px;
            font-size: 14px;
            white-space: pre-wrap;
         }
         .hist-tit{
            display: flex;
            font-size: 16px;
            font-weight: 600;
            color: #666666;
            div{
               flex: 1;
            }
            span{
               width: 60px;
               left: auto;
               color: #387DF7;
               font-weight: 400;
               font-size: 16px;
            }
         }
      }
      .hist-top{
         font-size: 16px;
         font-weight: 400;
         color: #333333;
         margin-top: 30px;
         span{
            float: right;
            font-weight: 400;
            color: #999999;
            font-size: 16px;
         }
      }
   }
}
.edit-footer{
   button{
      float: right;
      margin-left: 25px;
      width: 140px;
      height: 40px;
      border-radius: 4px;
   }
}
.edit-content{
   min-height: 480px;
}
.note-text{
   font-size: 14px;
   font-weight: 400;
   color: #333333;
   display: flex;
   flex-wrap: wrap;
   .img-box{
      position: relative;
      // display: flex;
      .del-icon{
         display: inline-block;
         position: absolute;
         top:0;
         right:20px;
      }
   }
   img{
      width: 140px;
      height: 175px;
      margin-right: 23px;
   }
   input{
      border: none;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      width: 100%;
      height: 100px;
   }
}
.note-tit{
   padding-top: 30px;
   width: 100%;
   margin-bottom: 30px;
   display: flex;
       h3{
              font-size: 18px;
              font-weight: 600;
              color: #333333;
              margin: 0;
              float: left;
           }
           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;
                }
           }

}
.box{
   position: relative;
   width: 100%;
   height: 100%;
   // display: flex;
   .edit-box{
      // flex: 1;
      padding-right: 30px;
      .his-info{
         float: right;
         font-weight: 600 !important;
         color: #333333 !important;
         font-size: 18px;
      }
      .edit-hear{
         height: 40px;
         border-bottom: 1px solid #ddd;
         h3{
            margin: 0;
            float: left;
            font-size: 18px;
            font-weight: 600;
            color: #333333;
            line-height: 30px;

         }
         span{
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            margin-left: 27px;
            line-height: 30px;
         }
      }
   }

}

</style>