完善创作页面的插入笔记

src/components/common/BreadCrumb.vue

 <template>
   <div class="breadcrumb-wrapper">
     <div class="title">当前位置：</div>
-    <el-input
+    <!-- <el-input
       class="file-path-input"
       ref="filePathInputRef"
       placeholder="请输入路径"
@@ -12,20 +12,11 @@
       @blur="handleInputBlurEnter"
       @change="handleInputBlurEnter"
     ></el-input>
-    <!-- {{ breadCrumbList }} -->
+    123 -->
     <div
       class="breadcrumb-box"
-      :class="{ 'able-input': fileType === 0 }"
-      v-show="!isShowInput"
       @click.self="handleClickBreadCrumbSelf"
     >
-      <!-- <el-breadcrumb
-        v-if="![0, 8].includes(fileType) && !['Share'].includes($route.name)"
-        separator-class="el-icon-arrow-right"
-      >
-        <el-breadcrumb-item>{{ fileTypeMap[fileType] }}</el-breadcrumb-item>
-      </el-breadcrumb> -->
-
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item
           v-for="(item, index) in breadCrumbList"

src/components/file/box/contextMenu/Box.vue

@@ -273,45 +273,30 @@ export default {
     // 删除按钮是否显示
     deleteBtnShow() {
       return this.fileType != this.MY_COLLECT; //我的收藏不能删除
-      // return this.fileType !== 8 && !["Share"].includes(this.routeName);
     },
     // 还原按钮是否显示
     restoreBtnShow() {
       return true;
-      // return this.fileType === 6 && !["Share"].includes(this.routeName);
     },
     // 复制按钮是否显示
     copyBtnShow() {
       return true;
-      // return (
-      //   ![6, 8].includes(this.fileType) && !["Share"].includes(this.routeName)
-      // );
     },
     // 移动按钮是否显示
     moveBtnShow() {
       return true;
-      // return (
-      //   ![6, 8].includes(this.fileType) && !["Share"].includes(this.routeName)
-      // );
     },
     // 重命名按钮是否显示
     renameBtnShow() {
       return this.fileType != this.MY_COLLECT; //我的收藏不能重命名
-      // return (
-      //   ![6, 8].includes(this.fileType) && !["Share"].includes(this.routeName)
-      // );
     },
     // 分享按钮是否显示
     shareBtnShow() {
-      return true;
-      // return (
-      //   ![6, 8].includes(this.fileType) && !["Share"].includes(this.routeName)
-      // );
+      return this.fileType !=this.TEMPLATE_MANAGE;//模板管理不能分享
     },
     // 下载按钮是否显示
     downloadBtnShow() {
       return true;
-      // return ![6, 8].includes(this.fileType);
     },
     // 解压缩按钮是否显示
     unzipBtnShow() {
@@ -333,18 +318,10 @@ export default {
     onlineEditBtnShow() {
       // 只有我的Word文件才显示
       // 根据当前文件的作者的userId进行判断，和本人一致则是可编辑
-      console.log("onlineEditBtnShow", this.selectedFile);
       return (
         ["doc", "docx"].includes(this.selectedFile.extendName) &&
         this.selectedFile.userId == store.getters.userInfo.userId
       );
-      // return (
-      //   ![6, 8].includes(this.fileType) &&
-      //   (this.officeFileType.includes(this.selectedFile.extendName) ||
-      //     this.markdownFileType.includes(this.selectedFile.extendName) ||
-      //     this.fileSuffixCodeModeMap.has(this.selectedFile.extendName)) &&
-      //   !["Share"].includes(this.routeName)
-      // );
     },
     // 复制链接按钮是否显示
     copyLinkBtnShow() {

src/components/file/constants.js

@@ -22,5 +22,5 @@ export const uploadModeConstant = {
 // 是否收藏
 export const collectConstant = {
     COLLECTED: 0, //收藏
-    NOT_COLLECTED: 1 ,//未收藏
+    NOT_COLLECTED: 1,//未收藏
 }
\ No newline at end of file

src/components/file/dialog/addFileByTemplate/Dialog.vue

@@ -15,7 +15,7 @@
       label-width="100px"
       label-position="top"
     >
-      <el-form-item label="选择新建方式" prop="addNewFileWay">
+      <el-form-item label="选择新建方式" prop="addNewFileWay" >
         <el-radio-group v-model="form.addNewFileWay">
           <el-radio label="1">新建空白文档</el-radio>
           <el-radio label="2">从模板导入</el-radio>
@@ -67,7 +67,6 @@
 
 <script>
 import { newfile, getTemplateList } from "@/api/wps";
-
 export default {
   name: "AddFileDialog",
   data() {
@@ -89,7 +88,6 @@ export default {
   },
   watch: {
     "form.addNewFileWay"(value) {
-      console.log("form.addNewFileWay", this.form.addNewFileWay);
       if (value == 2) {
         this.loadTemplateList();
       }

src/views/manage/templateManage/index.vue

@@ -5,6 +5,8 @@
 </template>
 <script>
 import FileList from "@/components/file/FileList.vue";
+import { fileTypeConstant } from "@/components/file/constants";
+const { TEMPLATE_MANAGE } = fileTypeConstant;
 export default {
   components: {
     FileList,
@@ -12,6 +14,7 @@ export default {
   data() {
     return {
       isInit: false,
+      ...fileTypeConstant,
     };
   },
   mounted() {
@@ -21,7 +24,7 @@ export default {
 
     // 修改查询参数，例如，给 "filePath" 参数设置新的值
     // 10-我的创作 11-模板管理
-    const newFileType = 11;
+    const newFileType = TEMPLATE_MANAGE;
     const newFilePath = "/模板管理";
     const newQueryParams = {
       ...currentQueryParams,

src/views/mine/myNote/components/noteByFile.vue

@@ -62,7 +62,7 @@
             :key="index"
           >
             <div class="card-head">
-              <div class="tag" v-if="item.tagName.length > 0">
+              <div class="tag" v-if="item.tagName && item.tagName.length > 0">
                 <el-tag
                   style="margin-right: 8px"
                   type="warning"
@@ -152,8 +152,8 @@ export default {
   mixins: [noteOperationMixins],
   data() {
     return {
-      keyword:'',//文件名关键词，搜索文件时使用
-      currentFileId:'',//文件id 搜索笔记时使用
+      keyword: "", //文件名关键词，搜索文件时使用
+      currentFileId: "", //文件id 搜索笔记时使用
       //文件列表
       fileList: {
         records: [],
@@ -210,17 +210,17 @@ export default {
     },
   },
   mounted() {
-    this.loadfileList();
+    this.loadLeftList();
   },
   methods: {
     //加载文件列表
-    async loadfileList() {
+    async loadLeftList() {
       this.loading = true;
       const { current, size } = this.fileList;
       const params = {
         currentPage: current,
         pageCount: size,
-        fileName:this.keyword
+        fileName: this.keyword,
       };
       let res = await getNoteAllFilesList(params);
       if (res.data) {
@@ -252,7 +252,7 @@ export default {
       this.fileList.size = 20;
       // 重置笔记的筛选条件
       this.currentFileId = "";
-      this.loadfileList();
+      this.loadLeftList();
     },
 
     handleReset() {
@@ -260,9 +260,9 @@ export default {
       this.fileList.current = 1;
       this.fileList.size = 20;
       // 重置查询参数
-      this.currentFileId = ''
-      this.keyword = ''
-      this.loadfileList();
+      this.currentFileId = "";
+      this.keyword = "";
+      this.loadLeftList();
     },
 
     // 点击左侧文件
@@ -280,13 +280,13 @@ export default {
     // 文件列表size
     handleSizeChangeFile(value) {
       this.fileList.pageCount = value;
-      this.loadfileList();
+      this.loadLeftList();
     },
 
     // 文件列表current
     handleCurrentChangeFile(value) {
       this.fileList.currentPage = value;
-      this.loadfileList();
+      this.loadLeftList();
     },
 
     // 文件列表current
@@ -395,19 +395,24 @@ export default {
         font-size: 14px;
         margin-bottom: 16px;
         .card-head {
-          display: flex;
-          justify-content: space-between;
           margin-bottom: 16px;
+          .tag {
+            float: left;
+          }
+          // display: flex;
+          // justify-content: space-between;
+
           .oprations {
-            display: flex;
-            justify-content: flex-end;
+            float: right;
             margin-bottom: 8px;
+            // display: flex;
+            // justify-content: flex-end;
+
             .el-link {
               margin-right: 16px;
             }
           }
         }
-
         .bookmark {
           margin-bottom: 16px;
           font-size: 16px;

src/views/mine/myNote/components/noteByTag.vue

@@ -20,14 +20,8 @@
         >
       </div>
 
-      <div class="header">
-        <span class="total"> 共计{{ tagList.total }}条数据 </span>
-        <span>
-          <el-button type="text">
-            <svg-icon icon-class="add-tag"></svg-icon>
-            新增标签</el-button
-          >
-        </span>
+      <div class="total">
+        共计{{ tagList.total }}条数据
       </div>
       <el-row class="list">
         <el-col
@@ -67,7 +61,7 @@
             :key="index"
           >
             <div class="card-head">
-              <div class="tag" v-if="item.tagName.length > 0">
+              <div class="tag" v-if="item.tagName && item.tagName.length > 0">
                 <el-tag
                   style="margin-right: 8px"
                   type="warning"
@@ -202,11 +196,11 @@ export default {
     },
   },
   mounted() {
-    this.loadtagList();
+    this.loadLeftList();
   },
   methods: {
     //加载文件列表
-    async loadtagList() {
+    async loadLeftList() {
       this.loading = true;
       const { current, size } = this.tagList;
       const params = {
@@ -254,7 +248,7 @@ export default {
       this.fileList.size = 20;
       // 重置当前选中的文件
       this.currentTagId = "";
-      this.loadtagList();
+      this.loadLeftList();
     },
 
     handleReset() {
@@ -270,13 +264,13 @@ export default {
     // 文件列表size
     handleSizeChangeFile(value) {
       this.tagList.pageCount = value;
-      this.loadtagList();
+      this.loadLeftList();
     },
 
     // 文件列表current
     handleCurrentChangeFile(value) {
       this.tagList.currentPage = value;
-      this.loadtagList();
+      this.loadLeftList();
     },
 
     // 文件列表current
@@ -312,14 +306,12 @@ export default {
   padding: 20px 20px 0px;
   position: relative;
 
-  .header {
+  .total {
     color: #999;
     padding: 12px 0 10px;
-    // margin-bottom: 10px;
     font-size: 14px;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    justify-content: flex-end;
   }
   .list {
     font-size: 14px;
@@ -382,13 +374,18 @@ export default {
         font-size: 14px;
         margin-bottom: 16px;
         .card-head {
-          display: flex;
-          justify-content: space-between;
           margin-bottom: 16px;
+          // display: flex;
+          // justify-content: space-between;
+           .tag{
+              float: left;
+            }
           .oprations {
-            display: flex;
-            justify-content: flex-end;
+            float: right;
+            // display: flex;
+            // justify-content: flex-end;
             margin-bottom: 8px;
+           
             .el-link {
               margin-right: 16px;
             }

src/views/mine/myNote/components/noteOperationMixins.js

 import { textCopy } from "@/utils/index";
-import { addOrUpdateNoteDoc, deleteNote } from "@/api/doc/bookMark";
+import { deleteNote } from "@/api/doc/bookMark";
 import AddOrUpdateNoteDialog from "@/views/read/wpsReader/component/addOrUpdateNoteDialog.vue";
 export default {
-    components:{
+    components: {
         AddOrUpdateNoteDialog
     },
     methods: {
@@ -43,15 +43,16 @@ export default {
         },
         // 删除笔记
         async handleDeleteNote(item) {
-            this.loading = true;
+            // this.loading = true;
             const params = {
                 id: item.id,
             };
             let res = await deleteNote(params);
+            // this.loading = false;
             if (res.code == 200) {
                 this.$message.success("操作成功");
+                this.loadLeftList();
             }
-            this.loading = false;
         },
     }
 }

src/views/read/wpsReader/component/autoCheck.vue

-<template>
-  <div>自动检查</div>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style></style>

src/views/read/wpsReader/component/autoClose.vue

-<template>
-  <div>自动补全</div>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style></style>

src/views/read/wpsReader/component/insertNote.vue

@@ -5,38 +5,48 @@
       <el-input
         class="input"
         size="mini"
-        placeholder="输入关键词搜索"
+        placeholder="输入关键词搜索原文或笔记"
         suffix-icon="el-icon-search"
-        v-model="searchValue"
+        v-model="searchParams.content"
+        @keyup.enter.native="handleSearch"
         clearable
       ></el-input>
       <el-select
-        v-model="tagModelValue"
-        placeholder="请选择标签"
         size="mini"
-        class="select"
+        v-model="searchParams.tagId"
+        filterable
+        remote
         clearable
+        default-first-option
+        placeholder="标签（可搜索）"
+        :remote-method="remoteMethod"
+        :loading="loading"
+        @change="handleSearch"
       >
         <el-option
-          v-for="item in tagList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
+          v-for="item in tagList.records"
+          :key="item.id"
+          :label="item.tagName"
+          :value="item.id"
         >
         </el-option>
       </el-select>
     </div>
-    <!-- {{ noteList }} -->
-    <div class="total">共{{ noteList.length }}条数据</div>
+    <div class="total">共{{ noteList.records.length }}条数据</div>
     <div class="note-list">
       <el-card
         class="note-item"
-        v-for="(item, index) in noteList"
+        v-for="(item, index) in noteList.records"
         :key="index"
         shadow="hover"
       >
-        <div class="tag">
-          <el-tag type="warning">{{ item.tag }}</el-tag>
+        <div class="tag" v-if="item.tagName && item.tagName.length > 0">
+          <el-tag
+            style="margin-right: 8px"
+            type="warning"
+            v-for="(v, i) in item.tagName.split(',')"
+            >{{ v }}
+          </el-tag>
 
           <el-dropdown>
             <el-link>更多</el-link>
@@ -50,43 +60,78 @@
           </el-dropdown>
         </div>
         <div class="origin oneRow">
-          <i class="el-icon-document"></i>
-          原文：{{ item.bookmarkContent }}
+          <svg-icon
+            icon-class="origin"
+            style="color: #1a5eff; margin-right: 6px"
+          />
+          <!-- <i class="el-icon-document"></i> -->
+          <span>原文：</span>
+          <span
+            v-if="oldContent"
+            v-html="brightenKeyword(item.bookmarkContent, oldContent)"
+          ></span>
+          <span v-else> {{ item.bookmarkContent }}</span>
         </div>
         <div class="note twoRow">
-          <i class="el-icon-edit"></i>
-          笔记：{{ item.noteContent }}
+          <svg-icon
+            icon-class="icon-note"
+            style="color: #e6a23c; margin-right: 6px"
+          />
+          <!-- <i class="el-icon-edit"></i> -->
+          <span>笔记：</span>
+          <span
+            v-if="oldContent"
+            v-html="brightenKeyword(item.noteContent, oldContent)"
+          ></span>
+          <span v-else> {{ item.noteContent }}</span>
         </div>
         <div class="buttons">
           <el-button
             type="primary"
             size="mini"
-            @click="handleInsertNote(item.noteContent)"
-            >引入笔记</el-button
+            @click="handleInsertOrigin(item.bookmarkContent)"
+            >引入原文</el-button
           >
           <el-button
             type="primary"
             size="mini"
             plain
-            @click="handleInsertOrigin(item.bookmarkContent)"
-            >引入原文</el-button
+            @click="handleInsertNote(item.noteContent)"
+            >引入笔记</el-button
           >
         </div>
       </el-card>
     </div>
+    <div class="page">
+      <el-pagination
+        size="mini"
+        class="note-page"
+        background
+        @size-change="handleSizeChangeNote"
+        @current-change="handleCurrentChangeNote"
+        :current-page.sync="noteList.current"
+        :page-size="noteList.size"
+        layout="prev, pager, next"
+        :total="tagList.total"
+      >
+      </el-pagination>
+    </div>
   </div>
 </template>
 
 <script>
-import { noteList, tagList } from "./mockData";
-import { getBookMarkList } from "@/api/doc/bookMark";
+// import { noteList, tagList } from "./mockData";
+import { getNoteByTag, getNoteAllTagList } from "@/api/doc/index";
 export default {
   data() {
     return {
-      //当前选中的标签
-      tagModelValue: "",
-      //笔记搜索
-      searchValue: "",
+      searchParams: {
+        //标签名搜索
+        tagId: "",
+        //从原文和笔记中搜索
+        content: "",
+      },
+      oldContent: "", //用于记录上一次搜索的关键词，以至于不会被实时影响关键词着色效果
       loading: false,
       dropdownList: [
         {
@@ -102,24 +147,67 @@ export default {
           value: "delete",
         },
       ],
-      noteList,
-      tagList,
-      // noteList: [], //笔记列表
-      // tagList: [],
+      noteList: {
+        records: [],
+        current: 1,
+        size: 20,
+        total: 0,
+      }, //笔记列表
+      tagList: {
+        records: [],
+        current: 1,
+        size: 20,
+        total: 0,
+      },
     };
   },
   mounted() {
-    // this.loadData()
+    this.loadNoteList();
   },
   methods: {
-    async loadData() {
+    // 加载笔记列表
+    async loadNoteList() {
       this.loading = true;
-      let res = await getBookMarkList();
+      const { current, size } = this.noteList;
+      const { content, tagId } = this.searchParams;
+      const params = {
+        currentPage: current,
+        pageCount: size,
+        id: tagId,
+        content,
+      };
+      let res = await getNoteByTag(params);
+      this.oldContent = content;
       this.loading = false;
       if (res.code == 200) {
         this.noteList = res.data;
+        this.loadTagList();
       }
     },
+    // 搜索
+    handleSearch() {
+      this.loadNoteList();
+    },
+    // 加载标签
+    async loadTagList() {
+      // 首次加载时只加载最多10个供用户下拉选择
+      this.remoteMethod("", 10);
+    },
+    // 远程搜索标签 默认搜索时pageCount 为100
+    remoteMethod(keyword, pageCount = 100) {
+      this.loading = true;
+      const params = {
+        keyword,
+        currentPage: 1,
+        pageCount,
+      };
+      getNoteAllTagList(params).then((res) => {
+        this.loading = false;
+        if (res.code == 200) {
+          this.tagList = res.data;
+        }
+      });
+    },
     // 插入笔记
     handleInsertNote(value) {
       this.$emit("insertText", value);
@@ -135,17 +223,50 @@ export default {
         case "view":
           break;
         case "edit":
-          this.handleOpenAddUpdateDialog(item)
+          this.handleOpenAddUpdateDialog(item);
           break;
         case "delete":
           break;
       }
     },
-    
     // 打开编辑笔记对话框
-    handleOpenAddUpdateDialog(item){
-      this.$emit('handleOpenAddUpdateDialog',item)
-    }
+    handleOpenAddUpdateDialog(item) {
+      this.$emit("handleOpenAddUpdateDialog", item);
+    },
+    //获取需要标红的文字
+    getRedWords(contentText, keyword) {
+      let keywordArray = keyword.split("");
+      let wordsArray = [];
+      for (let key of keywordArray) {
+        if (contentText.includes(key)) {
+          wordsArray.push(key);
+        }
+      }
+      return wordsArray;
+    },
+    //将文字标红
+    brightenKeyword(contentText, keyword) {
+      let wordsArray = this.getRedWords(contentText, keyword);
+      let res = contentText; //res的初始值是不带任何红色格式的
+      //遍历相同字数组，
+      for (let word of wordsArray) {
+        const Reg = new RegExp(word, "i");
+        //替换每一个相同字
+        res = res.replace(Reg, `<span style="color: red;">${word}</span>`);
+      }
+      return res; //此时的res里已经将需要标红的字体带上了格式（<span style="color:red"></span>）
+    },
+    // 文件列表current
+    handleSizeChangeNote(value) {
+      this.tagList.pageCount = value;
+      this.loadNoteList();
+    },
+
+    // 文件列表current
+    handleCurrentChangeNote(value) {
+      this.tagList.currentPage = value;
+      this.loadNoteList();
+    },
   },
 };
 </script>
@@ -167,11 +288,11 @@ export default {
   margin: 20px 0 4px;
   display: flex;
   justify-content: flex-end;
-  font-style: 14px;
+  font-size: 14px;
   color: #999;
 }
 .note-list {
-  height: calc(100vh - 200px);
+  height: calc(100vh - 210px);
   overflow: auto;
   .note-item {
     margin-bottom: 16px;

src/views/read/wpsReader/component/rightPanel.vue

 <template>
   <div class="panel">
     <div class="left">
-      <div class="title">{{ currentTab }}</div>
+      <div class="title">插入笔记</div>
       <div class="left-content">
         <InsertNote
           ref="InsertNote"
           @insertText="handleInsertText"
           @handleOpenAddUpdateDialog="handleOpenAddUpdateDialog"
         />
-        <!-- <AutoCheck v-if="currentTab == '自动检查'" />
-        <AutoClose v-if="currentTab == '自动补全'" /> -->
       </div>
     </div>
-    <!-- <div class="right">
-      <div class="tabs">
-        <div
-          @click="handleClickTab(item)"
-          :class="{ 'tab-item': true, active: currentTab == item }"
-          v-for="(item, index) in tabs"
-          :key="index"
-        >
-          {{ item }}
-        </div>
-      </div>
-    </div> -->
     <div class="close">
       <i class="el-icon-close"></i>
     </div>
@@ -32,30 +18,18 @@
 
 <script>
 import InsertNote from "./insertNote.vue";
-import AutoCheck from "./autoCheck.vue";
-import AutoClose from "./autoClose.vue";
 export default {
   name: "rightPanel",
   components: {
     InsertNote,
-    AutoCheck,
-    AutoClose,
   },
   data() {
     return {
-      // 当前选中的tab
-      currentTab: "插入笔记",
-      //右侧tabs
-      tabs: ["插入笔记", "自动检查", "自动补全"],
     };
   },
   methods: {
-    handleClickTab(tab) {
-      this.currentTab = tab;
-    },
     // 获取笔记
     loadNoteData() {
-      console.log("获取笔记loadData");
       this.$refs.InsertNote.loadData();
     },
     //插入文字

vue.config.js

@@ -35,9 +35,9 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `http://222.85.214.245:9600`,
+        target: `http://222.85.214.245:9600`,
         // target: `http://222.85.214.245:9558`,
-        target: `http://172.24.100.246:9600`,
+        // target: `http://172.24.100.246:9600`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''