@ -1,8 +1,10 @@
@extends('Admin.layout')
@section('header')
< link rel = "stylesheet" href = "/froala/froala_editor.pkgd.min.css" / >
< link rel = "stylesheet" href = "/static/wangeditor_editor@5.1.23_dist_css_style.css" / >
< script src = "/froala/froala_editor.pkgd.min.js" > < / script >
< script src = "/froala/zh_cn.js" > < / script >
< script src = "/static/wangeditor_editor@5.1.23_dist_index.js" > < / script >
< style >
.notebook-lists.warning-background{
background-color: #fdf6ec;
@ -13,7 +15,7 @@
color: #529b2e;
}
.notebook-lists{
margin: 5px;
margin: 0 5px 5px;
box-sizing: border-box;
border-radius: 10px;
padding:10px;
@ -72,38 +74,62 @@
.fr-popup.fr-active{ z-index: 5 !important; }
.edit-title{
border: none;
border-bottom: 1px solid #129b00 ;
border-bottom: 1px solid #C0C4CC ;
outline: none;
width: 100%;
font-size: 20px;
height: 50px;
font-weight: bold;
margin-bottom: 5px;
padding-left: 5px;
color: #303133;
box-sizing: border-box;
}
.searchInput{
font-size: 20px;
padding-right: 64 px;
height: 50px;
}
.tool{
position: absolute;
right: 0;
top: 10px;
}
#app{
padding: 0 10px 0 5px;
}
.content-shade{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #f8e3c535;
}
.content-shade .logo{
font-size: 100px;
text-align: center;
color: #f8e3c585;
line-height: 150px;
position: absolute;
top: 50%;
margin-top: -75px;
width: 100%;
user-select: none;
}
< / style >
@endsection
@section('main')
< el-row >
< el-col :span = "6" >
< div style = "margin: 5px;box-sizing: border-box" >
< el-row >
< el-col :span = "20" >
< el-input class = "searchInput" v-model = "searchText" clearable placeholder = "搜索" >
< template # append >
< el-button @ click = "searchNotebook()" :icon = "searchIcon" > < / el-button >
< / template >
< / el-input >
< / el-col >
< el-col :span = "3" >
< el-icon class = "add" @ click = "create" > < plus / > < / el-icon >
< / el-col >
< / el-row >
< div style = "margin: 0 5px 0;padding:0 5px;box-sizing: border-box;position:relative;" >
< input v-model = "searchText" class = "edit-title searchInput" placeholder = "搜索" >
< div class = "tool" >
< el-icon class = "add" @ click = "searchNotebook" > < component :is = "searchIcon" > < / component > < / el-icon >
< el-icon class = "add" @ click = "create" > < plus / > < / el-icon >
< / div >
< / div >
< div v-infinite-scroll = "load" style = "overflow: auto" >
< div v-infinite-scroll = "reachBottom" :infinite-scroll-disabled = "reachBottomDisabled" style = "overflow: auto;height: calc(100vh - 80px)" >
< div @ click = "notebookToggle(index)" v-for = "(item, index) in notebook" class = "notebook-lists" :class = "{
'success-background':index % 2,
'warning-background':!(index % 2),
@ -116,14 +142,20 @@
< div class = "time" > < div > 创建人：@{{ item.create_name }}< / div > < div > 最后更新： @{{ item.latest_name }}< / div > < / div >
< div class = "delete" @ click . stop = "deleteaa" > < el-icon > < delete / > < / el-icon > < / div >
< / div >
< el-divider v-if = "notNotebook" >
没有更多笔记了
< / el-divider >
< / div >
< / el-col >
< el-col :span = "18" >
< el-col :span = "18" style = "position:relative;" >
< div >
< input v-model = "currentNotebook.title" class = "edit-title" >
< input v-model = "currentNotebook.title" @ change = "titleChange" class = "edit-title" placeholder = "新的笔记 " >
< / div >
< div id = "froala-editore" > < / div >
< div class = "content-shade" v-if = "!currentNotebook.title" >
< div class = "logo" > notebook< / div >
< / div >
< / el-col >
< / el-row >
@endsection
@ -131,12 +163,7 @@
@section('footer')
< script >
VueInit.data.notebook = [
{id:1, title:'这是一个笔记标题1', content:'这是一个笔记内容1', create_name:"张三", latest_name:"李四", create_time:'2020-25-02 15:15:15'},
{id:2, title:'这是一个笔记标题1', content:'这是一个笔记内容1', create_name:"张三", latest_name:"李四", create_time:'2020-25-02 15:15:15'},
{id:3, title:'这是一个笔记标题1', content:'这是一个笔记内容1', create_name:"张三", latest_name:"李四", create_time:'2020-25-02 15:15:15'},
{id:4, title:'这是一个笔记标题1', content:'这是一个笔记内容1', create_name:"张三", latest_name:"李四", create_time:'2020-25-02 15:15:15'},
];
VueInit.data.notebook = [];
VueInit.data.active = 0;
VueInit.data.searchText = "";
VueInit.data.searchIcon = "Search";
@ -144,18 +171,26 @@
VueInit.data.currentNotebook = {title:''};
VueInit.data.noteBookVersion = 0;
VueInit.data.noteBookUpVersion = 0;
VueInit.data.page = 0;
VueInit.data.reachBottomDisabled = true;
VueInit.data.notNotebook = false;
VueInit.methods.searchNotebook = function () {
if (!this.searchText) {
return;
}
this.page = 1;
this.getList();
};
VueInit.methods.titleChange = function (){
this.noteBookVersion++;
}
VueInit.methods.editorInit = function (){
this.editor = new FroalaEditor("div#froala-editore", {
"language": "zh_cn",
"height": window.innerHeight - 200,
"height": window.innerHeight - 17 0,
"imageUploadURL": "/admin/common/froala-upload",
"fileUploadURL": "/admin/common/froala-upload",
"videoUploadURL": "/admin/common/froala-upload",
@ -167,8 +202,23 @@
}
});
}
VueInit.methods.reachBottom = function () {
if(this.notNotebook){
return;
}
this.page++;
this.getList();
};
VueInit.event.addHandler('mounted:editorInit');
VueInit.event.addHandler('created:aaaaaa', function (){
if (this.notebook.length >= 10) {
this.reachBottomDisabled = false;
}else{
this.getList();
}
});
VueInit.methods.notebookToggle = function (index){
this.active = index;
@ -177,6 +227,7 @@
this.noteBookVersion = 0;
this.noteBookUpVersion = 0;
this.editor.html.set(this.currentNotebook.content);
this.getLatest();
}
VueInit.methods.deleteaa = function (){
@ -194,7 +245,6 @@
method: 'post',
data: this.currentNotebook
}).then(({ data:res }) => {
console.log(res, 11);
if (res.code === 200) {
for (let key in res.data) {
this.currentNotebook[key] = res.data[key] ;
@ -206,7 +256,8 @@
}
VueInit.methods.update = function (){
if(this.noteBookUpVersion === this.noteBookVersion){
let upVersion = this.noteBookVersion;
if(this.noteBookUpVersion === upVersion){
return;
}
axios({
@ -214,25 +265,62 @@
method: 'post',
data: this.currentNotebook
});
this.noteBookUpVersion = upVersion;
}
VueInit.event.addHandler('create:updateRegularly', function (){
setInterval(() => this.update(), 2000);
VueInit.event.addHandler('created:updateRegularly', function (){
setInterval(() => {
this.update();
setTimeout(() => this.getLatest(), 1000);
}, 2000);
});
VueInit.event.addHandler('created:getList', function (){
VueInit.methods.getLatest = function (){
if (!this.currentNotebook.id) {
return;
}
axios({
url: "get-latest",
params: {
id:this.currentNotebook.id,
update_time:this.currentNotebook.update_time,
}
}).then(({ data:res }) => {
if (!res.data) {
return;
}
this.currentNotebook.latest_name = res.data.latest_name;
this.currentNotebook.content = res.data.content;
this.currentNotebook.title = res.data.title;
this.currentNotebook.update_time = res.data.update_time;
this.editor.html.set(res.data.content);
});
}
VueInit.methods.getList = function (){
this.reachBottomDisabled = true;
axios({
url:"lists-data",
params:{
search:{
searchType: {title:'like'},
search: {title:this.searchText},
}
},
page:this.page,
limit:10
}
}).then(({ data:res }) => {
console.log(res);
this.reachBottomDisabled = false;
if (this.page === 1){
this.notebook = res.data.data;
}else{
this.notebook.push(...res.data.data);
}
if (res.data.data < 10 ) {
this.notNotebook = true;
}
})
})
}
< / script >
@endsection
