个人中心笔记

This commit is contained in:
zhaofang
2022-09-27 16:15:27 +08:00
parent 2c2505087c
commit 758f34c52a
3 changed files with 126 additions and 70 deletions

View File

@@ -4,7 +4,7 @@
<div class="edit-hear">
<h3>笔记编辑</h3>
<span>{{isShowTip}}</span>
<span class="his-info pointer">历史记录</span>
<span class="his-info pointer" @click="isShowList = true">历史记录</span>
</div>
<div class="edit-content">
<div class="note-tit">
@@ -13,7 +13,8 @@
</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;"></textarea>
<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">
@@ -21,26 +22,23 @@
<el-radio :label="9">公开</el-radio>
<el-radio :label="1">私密</el-radio>
</el-radio-group>
<el-button style="margin-right:40%" @click="comeback">取消</el-button>
<el-button type="primary" @click="savedata" >确定</el-button>
<el-button style="margin-right:40%" type="primary" @click="savedata">保存</el-button>
<el-button @click="comeback">取消</el-button>
</div>
</div>
<div class="edti-hist">
<h3>历史记录</h3>
<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>{{item.sysCreateTime}}</span>
<span style="font-size: 12px;">{{item.sysCreateTime}}</span>
</div>
<div class="hist-cont">
<div class="hist-tit">
<div class=".two-line-ellipsis">
<div class="one-line-ellipsis">
{{ item.noteName }}
</div>
<span @click="restore(item)"> <i class="el-icon-refresh-left"></i> 还原</span>
<span class="pointer" @click="restore(item)"> <i class="el-icon-refresh-left"></i> 还原</span>
</div>
<div class="hist-text">
{{ item.beforeContent }}
@@ -48,7 +46,6 @@
</div>
</div>
</div>
</div>
</template>
@@ -57,10 +54,12 @@ import apiNote from '@/api/phase2/note.js'
export default {
data () {
return {
isShowList:false,
isShowTip:'',
radio: '1',
editdata:{
content:'',
isAuto:false,
},
histId:'',
histdata:[],
@@ -73,15 +72,14 @@ export default {
this.notedetail();
this.timer = setInterval(()=>{
this.savedata(1);
},300000);
},30000 *10);
},
methods:{
comeback(){
this.$router.go (-1);
this.$router.go(-1);
},
notedetail(){
apiNote.detail(this.id).then(res=>{
// let that = this;
this.editdata = res.result;
this.editdata.openTypeBackups = res.result.openType;
this.histId = res.result.id;
@@ -89,13 +87,27 @@ export default {
})
},
restore(item){
apiNote.restore(item.id).then(res=>{
this.$message({
message: '还原成功',
type: 'success'
});
this.hist();
})
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=>{
@@ -109,6 +121,9 @@ export default {
type: 'warning'
});
this.editdata.openType == 1;
}
if(num == 1) {
this.editdata.isAuto = true;
}
apiNote.update(this.editdata).then(res=>{
if(res.status == 200) {
@@ -117,7 +132,7 @@ export default {
this.isShowTip = '笔记自动保存成功';
setTimeout(()=>{
this.isShowTip = '';
},10000)
},10000*2)
} else {
this.notedetail()
this.$message({
@@ -127,9 +142,11 @@ export default {
}
} else {
this.isShowTip = '当前网络异常,内容已离线保存,请尝试连接网络后重新自动上传!';
setTimeout(()=>{
this.isShowTip = '';
},10000 * 2)
sessionStorage.setItem('isShowTip',this.editdata.content);
}
})
}
},
@@ -152,10 +169,12 @@ export default {
}
.edti-hist{
position: absolute;
// height: 650px;
overflow-y: auto;
right: -10px;
top:-20px;
width: 380px;
padding-left: 30px;
padding: 0 30px;
box-sizing: border-box;
margin: 0;
font-size: 18px;
@@ -163,23 +182,32 @@ export default {
color: #333333;
background: #FFFFFF;
box-shadow: -9px 2px 25px 0px rgba(119,119,119,0.16);
min-height: 400px;
overflow-y: auto;
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;
// padding: 38px 32px;
box-sizing: border-box;
height: 163px;
// 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;
@@ -202,7 +230,7 @@ export default {
font-size: 16px;
font-weight: 400;
color: #333333;
margin-top: 35px;
margin-top: 30px;
span{
float: right;
font-weight: 400;
@@ -275,9 +303,9 @@ export default {
position: relative;
width: 100%;
height: 100%;
display: flex;
// display: flex;
.edit-box{
flex: 1;
// flex: 1;
padding-right: 30px;
.his-info{
float: right;