文章读取显示

ruoyi-ui/src/views/bookmark/common/NqEdit.vue

@@ -1,41 +1,40 @@
 <template>
-  <div class="home">
+  <div class="home" >
 
-    <div CLASS="nqtitle">
-      <div class="mdui-textfield mdui-textfield-floating-label">
-        <label class="mdui-textfield-label">文章标题</label>
-        <input class="mdui-textfield-input" type="text" required/>
-        <div class="mdui-textfield-error">文章标题不能为空</div>
+    <div class="nqtitle">
+      <div class="mdui-textfield mdui-textfield-floating-label inputtop">
+        <input class="mdui-textfield-input" v-model="queryParamsAndMg.title" type="text" required/>
       </div>
     </div>
-<!--    <div class="mian" v-html="msg">-->
+        <div v-loading="loading"  v-if="!showEditor" class="mian" v-html="queryParamsAndMg.ueditorContent">
 
 
-<!--    </div>-->
+        </div>
 
-    <div>
-    <tinymce
-      ref="editor"
-      v-model="queryParams.UeditorContent"
-      :disabled="disabled"
-      @onClick="onClick"
-    />
-    </div>
-    <div STYLE="margin-top: 10px;margin-bottom: 10px">
+    <div v-if="showEditor" class="edit">
+      <tinymce
+        ref="editor"
+        v-model="queryParamsAndMg.ueditorContent"
+        :disabled="disabled"
+        @onClick="onClick"
+      />
+
+    <div v-if="showEditor"  STYLE="margin-top: 10px;margin-bottom: 10px">
       <button class="mdui-btn mdui-btn-raised mdui-color-indigo-300" @click="clear">清空内容</button>
       <button class="mdui-btn mdui-btn-raised mdui-color-indigo-300" @click="clear">发布</button>
       <button class="mdui-btn mdui-ripple mdui-btn-raised " @click="disabled = true">禁用</button>
       <button class="mdui-btn mdui-ripple mdui-btn-raised " @click="disabled = false">启用</button>
     </div>
-
+    </div>
 
   </div>
 </template>
 <script>
   import tinymce from '../../../components/TinyMCE'
   import {
-    userUpdateNote,userGetNoteInfo
+    userUpdateNote, userGetNoteInfo
   } from "@/api/note/note";
+
   const defaultForm = {
     status: 'draft',
     title: '', // 文章题目
@@ -55,12 +54,25 @@
     components: {
       tinymce
     },
-    data(){
-      return{
+    props: {
+      ueditor: null,
+      noteid: null,
+      updateEditor:null
+    },
+    mounted() {
+
+      this.showEditor=this.updateEditor;
+      this.getNoteById();
+    },
+    updated() {
+
+    },
+    data() {
+      return {
         postForm: Object.assign({}, defaultForm),
         msg: "<span>请尽情创作吧!</span>",
         disabled: false,
-        queryParams:{
+        queryParamsAndMg: {
           noteId: undefined,
           userId: undefined,
           title: undefined,
@@ -77,73 +89,94 @@
           isShare: undefined,
           isEncryption: undefined,
           createUserName: undefined,
-          tiymceUeditor:undefined,
-          UeditorContent:undefined,
+          tiymceUeditor: undefined,
+          ueditorContent: undefined,
         },
+        showEditor:false,
+        loading:false,
       }
     },
     created() {
-      var that = this;
-      var Ueditor = that.$route.query.Ueditor;
-      var noteId = that.$route.query.noteId;
-      this.queryParams.tiymceUeditor=Ueditor;
-      this.queryParams.noteId=noteId;
-
-      //查看对应的文章 信息和标题等等
-      this.getNoteList();
 
     },
     methods: {
       /** 实时更新文章的信息 */
-      UpdateNote(){
-        userUpdateNote(this.queryParams).then(response =>{
-            console.log("已保存:"+Date.now())
+      UpdateNote() {
+        userUpdateNote(this.queryParamsAndMg).then(response => {
+          console.log("已保存:" + Date.now())
         });
       },
       /** 查询便签管理列表 */
-      getNoteList() {
-        userGetNoteInfo(this.queryParams.noteId).then(response => {
-          this.queryParams = response.rows;
-        });
+      getNoteById() {
+        console.log("请求执行了!!!")
+        var that = this;
+        that.loading=true;
+        var blueditor = that.ueditor != null && that.ueditor != '' && that.ueditor != undefined;
+        var blnoteId = that.noteid != null && that.noteid != '' && that.noteid != undefined;
+        if (blueditor) {
+          this.queryParamsAndMg.tiymceUeditor = that.ueditor;
+        }
+        if (blnoteId) {
+          this.queryParamsAndMg.noteId = that.noteid;
+        }
+        if (blueditor && blnoteId) {
+          userGetNoteInfo(this.queryParamsAndMg.noteId).then(response => {
+            that.queryParamsAndMg = response.data;
+          });
+        }
+        that.loading=false;
       },
       //鼠标单击的事件
-      onClick (e, editor) {
+      onClick(e, editor) {
         console.log('Element clicked')
         console.log(e)
         console.log(editor)
       },
       //清空内容
-      clear () {
+      clear() {
         this.$refs.editor.clear()
       }
     }
   }
 </script>
 <style scoped>
-  .title{
+  .title {
     display: flex;
   }
-  .title div:first-child{
+
+  .title div:first-child {
     margin-right: 20px;
   }
-  .title div{
+
+  .title div {
     width: 50%;
 
   }
-  .mian{
-    height: 300px;
+
+  .mian {
+    height: 100%;
     overflow-y: auto;
-    width: 100%;
-    border: 1px solid #cacaca;
-    background-color: #ebebeb;
+    width: 1000px;
     /*text-indent: 10px;*/
     padding: 10px;
     margin-bottom: 10px;
     opacity: 0.9;
   }
-  .home{
+
+  .home {
     height: 800px;
     overflow: scroll;
   }
+  .edit{
+    margin-left: 3px;
+
+  }
+  .nqtitle{
+    margin-left: 3px;
+    margin-bottom: 10px;
+  }
+  .inputtop{
+    padding-top: 6px;
+  }
 
 </style>