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">
                <h3> {{ editdata.courseName }} </h3>
                <div v-if="editdata.playTime != ''"><img src="../../../public/images/coteplay.png" alt="">8:40</div>
            </div>
            <div class="note-text">
               <!-- <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>
         <div class="edit-footer">
           <el-radio-group v-model="editdata.openType">
               <el-radio :label="9">公开</el-radio>
               <el-radio :label="1">私密</el-radio>
            </el-radio-group>
            <el-button style="margin-right:40%" 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">
                 {{ item.beforeContent }}
               </div>
            </div>
         </div>
      </div>
   </div>
</template>

<script>
import apiNote from '@/api/phase2/note.js'
export default {
   data () {
      return {
       isShowList:false,
       isShowTip:'',
        radio: '1',
        editdata:{
         content:'',
         isAuto:false,
        },
        histId:'',
        histdata:[],
        id:'',
        timer:null,
      };
    },
    mounted(){
      this.id = this.$route.query.id;
      this.notedetail();
      this.timer = setInterval(()=>{
         this.savedata(1);
      },30000 *10);
    },
    methods:{
       comeback(){
          this.$router.go(-1);
       },
       notedetail(){
           apiNote.detail(this.id).then(res=>{
           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(() => {
         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=>{
            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;
         }
          apiNote.update(this.editdata).then(res=>{
            if(res.status == 200) {
               sessionStorage.setItem('isShowTip','');
              if(num ==1) {//自动保存
                  this.isShowTip = '笔记自动保存成功';
                  setTimeout(()=>{
                     this.isShowTip = '';
                  },10000*2)
               } else {
                  this.notedetail()
                  this.$message({
                  message: '笔记保存成功',
                  type: 'success'
               });
               }
            } else {
               this.isShowTip = '当前网络异常，内容已离线保存，请尝试连接网络后重新自动上传！';
               setTimeout(()=>{
                     this.isShowTip = '';
                  },10000 * 2)
               sessionStorage.setItem('isShowTip',this.editdata.content);
            }
          })
       }
    },
    beforeDestroy() {
    clearImmediate(this.timer);
  },
    
}
</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;
   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>