完善新建笔记

src/api/doc/bookMark.js

@@ -44,7 +44,7 @@ export const pdfRemoveMark = data => {
         data
     })
 }
-export const addOrUpdate = data => {
+export const addOrUpdateBookMarkDoc = data => {
     return request({
         url: baseUrl + '/doc/bookmark/addOrUpdate',
         method: 'post',
@@ -52,7 +52,7 @@ export const addOrUpdate = data => {
     })
 }
 
-export const pdfAddOrUpdate = data => {
+export const addOrUpdateBookMarkPdf = data => {
     return request({
         url: baseUrl + '/doc/bookmark/pdf/addOrUpdate',
         method: 'post',

src/libs/qiwen/globalFunction/file.js

@@ -347,6 +347,7 @@ const fileFunction = {
 			if (WORD.includes(row.extendName.toLowerCase())) {
 				let flag = false
 				const { fileId, username } = row
+				
 				// 根据当前文件的作者的userId进行判断，和本人一致则是可编辑
 				if (store.getters.name == username) {
 					flag = true
@@ -359,7 +360,9 @@ const fileFunction = {
 					path: '/wpsReader',
 					query: {
 						wpsUrl: `https://wwo.wps.cn/office/w/2c9a8083849eac7001849eae1df50001?_w_userid=1638778159578505218&_w_filrread=1&_w_filetype=db&_w_filepath=http://222.85.214.245:9559/ls/public/stream?randomCode=34df183096eb4996a93c3f779702e45d&_w_tokentype=1&_w_appid=1058dd766ec443c79f95933ec6a41169&_w_redirectkey=123456&_w_signature=E1OEcnnGEgVfK7mcnGDFgXJSLPY%3D`,
-						token: `0617753de96249a5a9839daf9b8ff8b5`
+						// wpsUrl: `http://localhost/office/w/2c9a8083849eac7001849eae1df50001?_w_userid=1638778159578505218&_w_filrread=1&_w_filetype=db&_w_filepath=http://222.85.214.245:9559/ls/public/stream?randomCode=34df183096eb4996a93c3f779702e45d&_w_tokentype=1&_w_appid=1058dd766ec443c79f95933ec6a41169&_w_redirectkey=123456&_w_signature=E1OEcnnGEgVfK7mcnGDFgXJSLPY%3D`,
+						token: `0617753de96249a5a9839daf9b8ff8b5`,
+						fileId
 					}
 				})
 				window.open(resolve.href, '_blank')

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

@@ -116,7 +116,6 @@ export default {
   methods: {
     async loadBookMarkList() {
       let res = await getBookMarkList();
-      console.log(res);
       if (res.data) {
         this.markList = res.data;
       }

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

+<template>
+  <!-- doc文档的新增或更新笔记-->
+  <el-dialog
+    title="添加笔记"
+    :visible.sync="dialogVisible"
+    width="500px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :append-to-body="true"
+    v-loading="loading"
+  >
+    <el-form :model="form" label-width="50px" :rules="rules" ref="form">
+      <el-form-item label="原文">
+        <el-input
+          type="textarea"
+          rows="5"
+          v-model="form.bookmarkContent"
+          disabled
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="笔记" prop="noteContent">
+        <el-input
+          placeholder="请输入笔记"
+          v-model="form.noteContent"
+          type="textarea"
+          rows="5"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="标签" disabled style="width: 100%">
+        <el-select
+          style="width: 100%"
+          v-model="tagsArr"
+          multiple
+          filterable
+          remote
+          default-first-option
+          allow-create
+          placeholder="请输入文章标签（可多个）"
+          :remote-method="remoteMethod"
+          :loading="loading"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="mini" @click="handleCancelSubmit">取消</el-button>
+        <el-button type="primary" size="mini" @click="handleSubmitAddNote"
+          >提交</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { addOrUpdateBookMarkDoc } from "@/api/doc/bookMark";
+import { tagSuggest } from "@/api/doc/tag";
+
+export default {
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({
+        docId: "", //文档Id
+        bookmarkContent: "", //笔记内容
+      }),
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false, //新建笔记窗口可见性
+      form: {
+        docId: "",
+        docSType: "doc", //文档类型
+        bookmarkContent: "", //原文
+        noteContent: "", //笔记
+        type: "note", //	笔记类型，新增时必传，[underline-下划线,note-笔记,highlight-高亮]
+        offset: "0", //偏移量，新增时必传
+        sectionId: "0", //父节点ID，新增时必传
+      },
+      tagsArr: [], //标签，提交给后台的时候使用多个用逗号分割
+      options: [], //标签可选项
+      rules: {
+        noteContent: [
+          {
+            required: true,
+            message: "请输入笔记",
+            trigger: "change",
+          },
+        ],
+      },
+      loading: false,
+    };
+  },
+  watch: {
+    formData: {
+      handler(value) {
+        console.log("value", value);
+        const { docId, bookmarkContent } = value;
+        if (docId && bookmarkContent) {
+          this.form.docId = docId;
+          this.form.bookmarkContent = bookmarkContent;
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+
+  methods: {
+    //提交新增笔记
+    handleSubmitAddNote() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          const formData = new FormData();
+          for (const key in this.form) {
+            formData.append(key, this.form[key]);
+          }
+          formData.append("tags", this.tagsArr.join(","));
+          let res = await addOrUpdateBookMarkDoc(formData);
+          if (res.code == 200) {
+            this.$message.success('新建笔记成功！')
+            this.dialogVisible = false
+            this.$emit('update')
+          }
+        }
+      });
+    },
+
+    //取消新增笔记
+    handleCancelSubmit() {
+      this.dialogVisible = false;
+      this.$refs.form.resetFields();
+    },
+    // 远程搜索标签
+    remoteMethod(keyword) {
+      if (keyword !== "") {
+        this.loading = true;
+        const params = {
+          keyword,
+        };
+        tagSuggest(params).then((res) => {
+          this.loading = false;
+          if (res.code == 200) {
+            this.options = res.data.map((item) => {
+              return {
+                label: item.tagName,
+                value: item.id,
+              };
+            });
+          }
+        });
+      } else {
+        this.options = [];
+      }
+    },
+  },
+};
+</script>
+
+<style></style>

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

 <template>
-  <div class="add-note">
+  <!-- 插入笔记 -->
+  <div class="add-note" v-loading="loading">
     <div class="search">
       <el-input
         class="input"
@@ -40,7 +41,7 @@
         </div>
         <div class="origin oneRow">
           <i class="el-icon-document"></i>
-          原文：江湖一窗隔——读林青霞写自己的故事《窗里窗外》的原文
+          原文：{{item.noteContent}}
         </div>
         <div class="note twoRow">
           <i class="el-icon-edit"></i>
@@ -57,6 +58,7 @@
 
 <script>
 import { noteList, tagList } from "./mockData";
+import { getBookMarkList } from "@/api/doc/bookMark";
 export default {
   data() {
     return {
@@ -64,17 +66,30 @@ export default {
       tagModelValue: "",
       //笔记搜索
       searchValue: "",
+      loading: false,
       noteList,
       tagList,
+      // noteList: [], //笔记列表
+      // tagList: [],
     };
   },
+  mounted(){
+    // this.loadData()
+  },
+  methods: {
+    async loadData() {
+      this.loading = true;
+      let res = await getBookMarkList();
+      this.loading = false;
+      if (res.code == 200) {
+        this.noteList = res.data;
+      }
+    },
+  },
 };
 </script>
 
-<style lang="scss">
-// .add-note {
-//   padding: 20px;
-// }
+<style lang="scss" scoped>
 .total,
 .note-list,
 .search {
@@ -88,7 +103,7 @@ export default {
   }
 }
 .total {
-  margin:20px 0 4px;
+  margin: 20px 0 4px;
   display: flex;
   justify-content: flex-end;
   font-style: 14px;

src/views/read/wpsReader/component/mockData.js

@@ -15,7 +15,8 @@ export const tagList = [
 
 export const noteList = [
     {
-        "bookmarkContent": "前，写着她的所遇、所思、所感、所惑……体会着她\n人生中的酸甜苦辣。\n作为林青霞首部文学作品，《窗里窗外》披露",
+        "bookmarkContent": "加强协同推进，通力合作强作为出成效 全市各级各部门要严格对照《分工方案》相关工作要求，",
+        "noteContent": "加强协同推进，通力合作强作为出成效 全市各级各部门要严格对照《分工方案》相关工作要求，",
         "color": "#FFCD45",
         "coords": "355.3691999999999,603.32065,535.7493999999999,603.32065,355.3691999999999,593.75815,535.7493999999999,593.75815,346.9609999999999,589.89065,419.4983,589.89065,346.9609999999999,580.32815,419.4983,580.32815,364.5347499999999,576.46065,520.5301499999998,576.46065,364.5347499999999,566.89815,520.5301499999998,566.89815",
         "createTime": "2023-07-13 11:16:39",
@@ -37,73 +38,4 @@ export const noteList = [
         "userId": "1",
         "tag": "政策报告"
     },
-    {
-        "bookmarkContent": "就是她不在江湖，江湖仍有她\n的传说。林青霞的新书《窗里窗外》一枝独",
-        "color": "#E44234",
-        "coords": "217.62510000000003,576.4604999999999,324.28225,576.4604999999999,217.62510000000003,566.8979999999999,324.28225,566.8979999999999,135.49555000000004,563.0305,280.20040000000006,563.0305,135.49555000000004,553.468,280.20040000000006,553.468",
-        "createTime": "2023-07-14 10:37:44",
-        "docId": "2c98e4068479d17c018479d2300d03bb",
-        "docName": "江湖一窗隔——读林青霞写自己的故事《窗里窗外》",
-        "docSType": "s_type_kbase",
-        "flags": "print",
-        "id": "1679681553947971586",
-        "isDelete": 0,
-        "mdate": "D:20230714103744+08'00'",
-        "page": 0,
-        "rect": "135.49555000000004,553.468,324.28225,576.4604999999999",
-        "showType": "pdf",
-        "subject": "下划线",
-        "title": "zystest03",
-        "type": "underline",
-        "uniqueId": "146f8fef-d3cb-a4cd-bb07-5ef130f5ff35",
-        "updateTime": "2023-07-14 10:37:44",
-        "userId": "1",
-        "tag": "政策报告"
-    },
-    {
-        "bookmarkContent": "前，写着她的所遇、所思、所感、所惑……体会着她\n人生中的酸甜苦辣。\n作为林青霞首部文学作品，《窗里窗外》披露",
-        "color": "#FFCD45",
-        "coords": "355.3691999999999,603.32065,535.7493999999999,603.32065,355.3691999999999,593.75815,535.7493999999999,593.75815,346.9609999999999,589.89065,419.4983,589.89065,346.9609999999999,580.32815,419.4983,580.32815,364.5347499999999,576.46065,520.5301499999998,576.46065,364.5347499999999,566.89815,520.5301499999998,566.89815",
-        "createTime": "2023-07-13 11:16:39",
-        "docId": "2c98e4068479d17c018479d2300d03bb",
-        "docName": "江湖一窗隔——读林青霞写自己的故事《窗里窗外》",
-        "docSType": "s_type_kbase",
-        "flags": "print",
-        "id": "1679328960700768257",
-        "isDelete": 0,
-        "mdate": "D:20230713111639+08'00'",
-        "page": 0,
-        "rect": "346.9609999999999,566.89815,535.7493999999999,603.32065",
-        "showType": "pdf",
-        "subject": "高亮",
-        "title": "zystest03",
-        "type": "highlight",
-        "uniqueId": "919edb36-8b4f-d840-ae92-564e5c56c7ad",
-        "updateTime": "2023-07-13 11:16:39",
-        "userId": "1",
-        "tag": "政策报告"
-    },
-    {
-        "bookmarkContent": "就是她不在江湖，江湖仍有她\n的传说。林青霞的新书《窗里窗外》一枝独",
-        "color": "#E44234",
-        "coords": "217.62510000000003,576.4604999999999,324.28225,576.4604999999999,217.62510000000003,566.8979999999999,324.28225,566.8979999999999,135.49555000000004,563.0305,280.20040000000006,563.0305,135.49555000000004,553.468,280.20040000000006,553.468",
-        "createTime": "2023-07-14 10:37:44",
-        "docId": "2c98e4068479d17c018479d2300d03bb",
-        "docName": "江湖一窗隔——读林青霞写自己的故事《窗里窗外》",
-        "docSType": "s_type_kbase",
-        "flags": "print",
-        "id": "1679681553947971586",
-        "isDelete": 0,
-        "mdate": "D:20230714103744+08'00'",
-        "page": 0,
-        "rect": "135.49555000000004,553.468,324.28225,576.4604999999999",
-        "showType": "pdf",
-        "subject": "下划线",
-        "title": "zystest03",
-        "type": "underline",
-        "uniqueId": "146f8fef-d3cb-a4cd-bb07-5ef130f5ff35",
-        "updateTime": "2023-07-14 10:37:44",
-        "userId": "1",
-        "tag": "政策报告"
-    }
 ]
\ No newline at end of file

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

@@ -3,7 +3,7 @@
     <div class="left">
       <div class="title">{{ currentTab }}</div>
       <div class="left-content">
-        <AddNote />
+        <InsertNote ref="InsertNote" />
         <!-- <AutoCheck v-if="currentTab == '自动检查'" />
         <AutoClose v-if="currentTab == '自动补全'" /> -->
       </div>
@@ -27,13 +27,13 @@
 </template>
 
 <script>
-import AddNote from "./addNote.vue";
+import InsertNote from "./insertNote.vue";
 import AutoCheck from "./autoCheck.vue";
 import AutoClose from "./autoClose.vue";
 export default {
   name: "rightPanel",
   components: {
-    AddNote,
+    InsertNote,
     AutoCheck,
     AutoClose,
   },
@@ -49,6 +49,11 @@ export default {
     handleClickTab(tab) {
       this.currentTab = tab;
     },
+    // 获取笔记
+    loadNoteData() {
+      console.log("获取笔记loadData");
+      this.$refs.InsertNote.loadData();
+    },
   },
 };
 </script>
@@ -59,10 +64,10 @@ export default {
   padding: 40px 0 20px;
   position: relative;
   box-sizing: border-box;
-  flex: 1;
+  width: 100%;
   .left {
-    flex: 1;
     padding-right: 16px;
+    width: 100%;
     .title {
       font-weight: bold;
       display: flex;

src/views/read/wpsReader/index.vue

 <template>
   <div class="wps-reader">
-    <div id="wps-container" class="wps-container"></div>
-    <!-- <div
-      class="add-note-container"
-      :style="{ position: 'fixed', left: 0, top: 100, 'z-index': 9999999 }"
-    >
-      我是增加笔记的盒子
-    </div> -->
-    <RightPanel />
+    <div ref="myIframe" id="wps-container" class="wps-container"></div>
+    <RightPanel class="right-panel"/>
+    <AddOrUpdateNoteDialog
+      :formData="form"
+      ref="AddOrUpdateNoteDialog"
+      @update="handleUpdateRightPanel"
+    />
   </div>
 </template>
 <script>
 import WebOfficeSDK from "/public/weboffice/web-office-sdk-v1.1.19.es";
 import RightPanel from "./component/rightPanel.vue";
+import AddOrUpdateNoteDialog from "./component/addOrUpdateNoteDialog.vue";
+
 export default {
   components: {
     RightPanel,
+    AddOrUpdateNoteDialog,
   },
   data() {
     return {
-      wpsInstance: null, //wpsInstance
+      wpsInstance: null, //wps实例
+      controlButton: null, //新建笔记按钮
+      form: {
+        docId: "", //文档Id
+        bookmarkContent: "", //笔记内容
+      },
     };
   },
   mounted() {
-    const { wpsUrl, token } = this.$route.query;
+    const { wpsUrl, token, fileId } = this.$route.query;
+    this.form.docId = fileId;
     this.initWps(wpsUrl, token);
-
-    // // 监听鼠标
-    // document.addEventListener("mouseover", function (e) {
-    //   console.log(e.clientX);
-    //   console.log(e.clientY);
-
-    // });
-    const selection = window.getSelection() || document.getSelection();
-    if (selection) {
-      const currentRange = selection.getRangeAt(0);
-      this.selection = selection;
-      this.currentRange = currentRange;
-    }
   },
   destroyed() {
-    this.removeWps();
+    this.removeSelectionChangeListener();
   },
   methods: {
     // 初始化WPS
@@ -52,6 +47,12 @@ export default {
       this.wpsInstance.setToken({ token });
       // 等待加载完毕
       await this.wpsInstance.ready();
+      this.addSelectionListen();
+      this.initAddNoteButton();
+    },
+
+    // 添加监听选取文字
+    addSelectionListen() {
       // 注册选取监听
       this.wpsInstance.ApiEvent.AddApiEventListener(
         "WindowSelectionChange",
@@ -60,26 +61,65 @@ export default {
         }
       );
     },
-    // 监听选取变化
+    // 初始化并监听新建笔记按钮
+    async initAddNoteButton() {
+      const app = this.wpsInstance.Application;
+      // 通过 CommandBar 的 Controls 对象，可获取到对应类型的内容集合，从而做新增操作或者获取到具体内容进行操作
+      // 定制元素对象：【开始 Tab】
+      const controls = await app.CommandBars("StartTab").Controls;
+      // 新增按钮型定制元素
+      this.controlButton = await controls.Add(1);
+      this.controlButton.Caption = "新建笔记";
+
+      this.controlButton.Enabled = false;
+      this.controlButton.OnAction = this.handleAddNote;
+    },
+
+    // 监听文字选取变化
     async handleSelectionChange(data) {
-      console.log("data", data);
       const { begin, end } = data;
-      const app = this.wpsInstance.Application;
-      // 获取选中区域
-      const range = await app.ActiveDocument.Range(begin, end);
-      // 获取文本
-      const text = await range.Text;
-      console.log("text", text);
+      console.log(data);
+      if (begin != undefined && (end != undefined) & (begin != end)) {
+        const app = this.wpsInstance.Application;
+        // 获取选中区域
+        const range = await app.ActiveDocument.Range(begin, end);
+        // 获取文本
+        const text = await range.Text;
+        this.form.bookmarkContent = text;
+        if (text) {
+          this.controlButton.Enabled = true;
+        } else {
+          this.controlButton.Enabled = false;
+        }
+      } else {
+        this.form.bookmarkContent = "";
+        this.controlButton.Enabled = false;
+      }
+    },
+
+    //新建笔记
+    handleAddNote() {
+      if (this.form.bookmarkContent) {
+        this.$refs.AddOrUpdateNoteDialog.dialogVisible = true;
+      } else {
+        this.$message.warning("请选择一段文字后再新建笔记！");
+      }
     },
-    // 移除监听
-    removeWps() {
-      if (this.wpsInstance) {
+
+    // 移除文字选取监听
+    removeSelectionChangeListener() {
+      if (this.wpsInstance && this.wpsInstance.ApiEvent) {
         this.wpsInstance.ApiEvent.RemoveApiEventListener(
           "WindowSelectionChange",
           this.handleSelectionChange
         );
       }
     },
+
+    // 更新右侧获取笔记
+    handleUpdateRightPanel() {
+      this.$refs.RightPanel.loadNoteData();
+    },
   },
 };
 </script>
@@ -91,6 +131,9 @@ export default {
     height: 100vh;
     overflow: hidden;
   }
+  .right-panel{
+    width: 20vw;
+  }
 }
 .add-note-container {
   background-color: #999;