修复wps iframe宽度问题

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

 <template>
   <!-- doc文档的新增或更新笔记-->
   <el-dialog
-    :title="formData.docId ? '编辑笔记' : '新增笔记'"
+    :title="formData.id ? '编辑笔记' : '新增笔记'"
     :visible.sync="dialogVisible"
     width="500px"
     :close-on-click-modal="false"
@@ -9,7 +9,13 @@
     :append-to-body="true"
     v-loading="loading"
   >
-    <el-form :model="form" label-width="50px" :rules="rules" ref="form" size="mini">
+    <el-form
+      :model="form"
+      label-width="50px"
+      :rules="rules"
+      ref="form"
+      size="mini"
+    >
       <el-form-item label="原文">
         <el-input
           type="textarea"
@@ -92,8 +98,8 @@ export default {
     return {
       dialogVisible: false, //新建笔记窗口可见性
       form: {
-        id: "",
-        docId: "",
+        id: "", //笔记ID，新增时没有
+        docId: "", //文档ID
         docSType: "doc", //文档类型
         bookmarkContent: "", //原文
         noteContent: "", //笔记
@@ -135,6 +141,11 @@ export default {
           for (const key in this.form) {
             if (key == "tagsArr") {
               formData.append("tags", this.form.tagsArr.join(","));
+            } else if (key == "id") {
+              // 只有id有值的时候才append
+              if (id != "") {
+                formData.append("id", this.form.id);
+              }
             } else {
               formData.append(key, this.form[key]);
             }
@@ -146,6 +157,8 @@ export default {
             this.dialogVisible = false;
             this.$emit("update");
           }
+          // 清空表单项
+          this.$refs.form.resetFields()
         }
       });
     },
@@ -189,7 +202,7 @@ export default {
   margin-top: 16px;
   .el-button + .el-button {
     margin-left: 0;
-      margin-top: 10px;
+    margin-top: 10px;
   }
 }
 </style>

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

@@ -306,7 +306,7 @@ export default {
   color: #999;
 }
 .note-list {
-  height: calc(100vh - 210px);
+  height: calc(100vh - 270px);
   overflow: auto;
   .note-item {
     margin-bottom: 16px;

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

@@ -47,7 +47,7 @@ export default {
 <style lang="scss" scoped>
 .panel {
   display: flex;
-  padding: 40px 0 20px;
+  padding: 20px 0;
   position: relative;
   box-sizing: border-box;
   width: 100%;

src/views/read/wpsReader/index.vue

 <template>
-  <div class="wps-reader">
+  <div
+    :class="{
+      'wps-reader': true,
+      'sidebar-open': $store.state.app.sidebar.opened,
+    }"
+  >
     <div ref="myIframe" id="wps-container" class="wps-container"></div>
     <RightPanel
       class="right-panel"
@@ -18,6 +23,7 @@ import WebOfficeSDK from "/public/weboffice/web-office-sdk-v1.1.19.es";
 import RightPanel from "./component/rightPanel.vue";
 import AddOrUpdateNoteDialog from "./component/addOrUpdateNoteDialog.vue";
 import { addNearRead } from "@/api/user";
+import { mapGetters } from "vuex";
 export default {
   components: {
     RightPanel,
@@ -35,13 +41,29 @@ export default {
         noteContent: "", //笔记内容
         tagsArr: [], //标签
       },
+      // isSidebarOpen:false
     };
   },
+  computed: {
+    // ...mapGetters(["sidebar"]),
+    isSidebarOpen() {
+      return this.$store.state.app.sidebar.opened;
+    },
+  },
+  // watch:{
+  //   'sidebar.opened':{
+  //     handler(value){
+  //       this.isSidebarOpen =
+  //     },
+  //     immediate:true
+  //   }
+  // },
   mounted() {
     const { wpsUrl, token, fileId } = this.$route.query;
     this.routeParams = { wpsUrl, token, fileId };
     this.form.docId = fileId;
     this.initWps(wpsUrl, token);
+    console.log("isSidebarOpen", this.isSidebarOpen);
   },
   destroyed() {
     this.removeSelectionChangeListener();
@@ -169,12 +191,28 @@ export default {
 .wps-reader {
   display: flex;
   .wps-container {
-    width: 80vw;
-    height: 100vh;
+    width: calc((100vw - 54px) * 0.8); //默认宽度是sidebar收起的宽度
     overflow: hidden;
   }
+
+  .right-panel {
+    width: calc((100vw - 54px) * 0.2); //默认宽度是sidebar收起的宽度
+  }
+
+  .wps-container,
   .right-panel {
-    width: 20vw;
+    height: calc(100vh - 84px);
+    transition: all ease 0.5s;
+  }
+}
+
+.sidebar-open {
+  .wps-container {
+    width: calc((100vw - 200px) * 0.8); //sidebar展开后的宽度
+  }
+
+  .right-panel {
+    width: calc((100vw - 200px) * 0.2); //默认宽度是sidebar收起的宽度
   }
 }
 .add-note-container {
@@ -184,3 +222,8 @@ export default {
   padding: 20px;
 }
 </style>
+<style>
+.web-office-iframe {
+  width: 100% !important;
+}
+</style>