完善插入笔记面板；新增我的收藏页面

src/views/mine/myCollect/constant.js

+//分享类型
+export const shareTypeConstant = {
+    PUBLIC_SHARE: 0, //分享给公共社区
+    DEPT_SHARE: 1, //分享给部门
+    PERSONAL_SHARE: 2 //分享给个人
+}
+
+// 分享状态
+export const shareStatusConstant = {
+    SHARED: 0, //已分享
+    IS_REVIEW: 1,//审核中 仅部门和社区需要审核，分享到个人不需要审核
+    REVOKED: 2,//已撤销
+    REJECTED: 3,//已驳回
+}
\ No newline at end of file

src/views/mine/myCollect/index.vue

 <template>
-  <div>测试</div>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="文件名称" prop="fileName">
+        <el-input
+          v-model="queryParams.fileName"
+          placeholder="请输入文件名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <div class="mb8">
+      <el-button
+        type="primary"
+        plain
+        size="mini"
+        :disabled="multiple"
+        @click.native="handleMultiRevoke"
+        >批量取消收藏</el-button
+      >
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </div>
+    <el-table
+      v-loading="loading"
+      :data="shareList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column
+        label="文件名称"
+        align="center"
+        prop="fileName"
+        :show-overflow-tooltip="true"
+      >
+        <template slot-scope="scope">
+          <div class="fileName">
+            <img :src="$file.setFileImg(scope.row)" />
+            <el-link @click="handleOpenFile(scope.row)">
+              {{ scope.row.fileName }}
+            </el-link>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="分享类型"
+        align="center"
+        :show-overflow-tooltip="true"
+      >
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.share_type"
+            :value="scope.row.shareType"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="分享状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <el-tag :type="getShareStatusTagType(scope.row.shareStatus)"
+            ><dict-tag
+              :options="dict.type.share_status"
+              :value="scope.row.shareStatus"
+          /></el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="审核意见"
+        align="center"
+        prop="verifyDesc"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-link
+            v-if="scope.row.shareStatus == shareStatusConstant.SHARED"
+            type="primary"
+            style="margin-right: 16px"
+            @click="handleCancelShare(scope.row.shareId)"
+          >
+            <svg-icon icon-class="revoke"> </svg-icon>取消分享
+          </el-link>
+          <el-link
+            type="primary"
+            icon="el-icon-view"
+            @click="handleOpenFile(scope.row)"
+          >
+            预览
+          </el-link>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.currentPage"
+      :limit.sync="queryParams.pageCount"
+      @pagination="getList"
+    />
+    <el-dialog
+      title="批量取消"
+      :visible.sync="multiCancelVisible"
+      width="400px"
+    >
+      <div class="multi-verify">
+        <div class="text">
+          一共选择了{{ shareIdsArr.length }}条数据，是否确定批量取消分享？
+        </div>
+        <div class="buttons">
+          <el-button
+            size="mini"
+            type="primary"
+            icon="el-icon-check"
+            @click="handleSubmitMultiRemoveShare"
+            >确定</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleCloseMultiRemoveShare"
+            >取消</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+  </div>
 </template>
-<script></script>
-<style lang="scss"></style>
+
+<script>
+import { getMyShareList, removeShare } from "@/api/user/share";
+import { shareStatusConstant } from "./constant";
+
+export default {
+  name: "myShare",
+  dicts: ["share_type", "share_status"],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      shareIdsArr: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      shareList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        currentPage: 1,
+        pageCount: 10,
+        fileName: "", //文件名称
+        shareStatus: "", //分享状态
+      },
+      // 分享状态常量
+      shareStatusConstant,
+      // 批量取消的弹窗可见性
+      multiCancelVisible: false,
+      shareIdsArr: [],
+    };
+  },
+  computed: {
+    getShareStatusTagType(shareStatus) {
+      return (shareStatus) => {
+        switch (shareStatus) {
+          case shareStatusConstant.SHARED: //已分享
+            return "success";
+          case shareStatusConstant.IS_REVIEW: //审核中
+            return "primary";
+          case shareStatusConstant.REVOKED: //已撤销
+            return "info";
+          case shareStatusConstant.REJECTED: //已驳回
+            return "danger";
+        }
+      };
+    },
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.shareIdsArr = selection.map((item) => item.shareId);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    /** 查询字典类型列表 */
+    getList() {
+      this.loading = true;
+      getMyShareList(this.queryParams).then((res) => {
+        this.total = res.data.total;
+        this.loading = false;
+        this.shareList = res.data.records;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.resetForm("queryForm");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.currentPage = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 点击取消分享
+    async handleCancelShare(fileIds) {
+      const params = {
+        fileIds,
+      };
+      let res = await removeShare(params);
+      if (res.code == 200) {
+        this.$message.success("取消分享成功！");
+        this.getList();
+      }
+    },
+    // 批量取消分享
+    handleMultiRevoke() {
+      this.multiCancelVisible = true;
+    },
+    // 提交批量取消分享
+    handleSubmitMultiRemoveShare() {
+      const fileIds = this.shareIdsArr.join(",");
+      this.handleCancelShare(fileIds);
+      this.handleCloseMultiRemoveShare();
+    },
+    // 关闭批量取消分享
+    handleCloseMultiRemoveShare() {
+      this.multiCancelVisible = false;
+    },
+    // 点击打开文件
+    handleOpenFile(file) {
+      this.$file.handleFileNameClickNew(file);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.fileName {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img {
+    width: 18px;
+    height: 18px;
+    object-fit: contain;
+    margin-right: 4px;
+  }
+}
+.multi-verify {
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+  }
+}
+</style>

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

@@ -33,11 +33,21 @@
         class="note-item"
         v-for="(item, index) in noteList"
         :key="index"
-        shadow="never"
+        shadow="hover"
       >
         <div class="tag">
           <el-tag type="warning">{{ item.tag }}</el-tag>
-          <el-link>更多</el-link>
+
+          <el-dropdown>
+            <el-link>更多</el-link>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-for="(dropItem, i) in dropdownList"
+                @click.native="handleClickDropdown(dropItem.value, item)"
+                >{{ dropItem.label }}</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </el-dropdown>
         </div>
         <div class="origin oneRow">
           <i class="el-icon-document"></i>
@@ -78,6 +88,20 @@ export default {
       //笔记搜索
       searchValue: "",
       loading: false,
+      dropdownList: [
+        {
+          label: "查看原文",
+          value: "view",
+        },
+        {
+          label: "编辑笔记",
+          value: "edit",
+        },
+        {
+          label: "删除笔记",
+          value: "delete",
+        },
+      ],
       noteList,
       tagList,
       // noteList: [], //笔记列表
@@ -99,17 +123,29 @@ export default {
     // 插入笔记
     handleInsertNote(value) {
       this.$emit("insertText", value);
-
-      // console.log("handleInsertNote");
-      //  await this.wps
-      //   .WordApplication()
-      //   .ActiveDocument.ActiveWindow.Selection.InsertAfter(txt);
     },
     // 插入原文
     handleInsertOrigin(value) {
-      // console.log("handleInsertOrigin");
       this.$emit("insertText", value);
     },
+    // 点击更多的下拉框
+    handleClickDropdown(type, item) {
+      console.log(type, item);
+      switch (type) {
+        case "view":
+          break;
+        case "edit":
+          this.handleOpenAddUpdateDialog(item)
+          break;
+        case "delete":
+          break;
+      }
+    },
+    
+    // 打开编辑笔记对话框
+    handleOpenAddUpdateDialog(item){
+      this.$emit('handleOpenAddUpdateDialog',item)
+    }
   },
 };
 </script>

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

@@ -3,7 +3,11 @@
     <div class="left">
       <div class="title">{{ currentTab }}</div>
       <div class="left-content">
-        <InsertNote ref="InsertNote" @insertText="handleInsertText"/>
+        <InsertNote
+          ref="InsertNote"
+          @insertText="handleInsertText"
+          @handleOpenAddUpdateDialog="handleOpenAddUpdateDialog"
+        />
         <!-- <AutoCheck v-if="currentTab == '自动检查'" />
         <AutoClose v-if="currentTab == '自动补全'" /> -->
       </div>
@@ -55,9 +59,13 @@ export default {
       this.$refs.InsertNote.loadData();
     },
     //插入文字
-    handleInsertText(value){
-      this.$emit('handleInsertText',value)
-    } 
+    handleInsertText(value) {
+      this.$emit("handleInsertText", value);
+    },
+    // 打开编辑笔记对话框
+    handleOpenAddUpdateDialog(item) {
+      this.$emit("handleOpenAddUpdateDialog", item);
+    },
   },
 };
 </script>

src/views/read/wpsReader/index.vue

 <template>
   <div class="wps-reader">
     <div ref="myIframe" id="wps-container" class="wps-container"></div>
-    <RightPanel class="right-panel" @handleInsertText="handleInsertText" />
+    <RightPanel
+      class="right-panel"
+      @handleInsertText="handleInsertText"
+      @handleOpenAddUpdateDialog="handleOpenAddUpdateDialog"
+    />
     <AddOrUpdateNoteDialog
       :formData="form"
       ref="AddOrUpdateNoteDialog"
@@ -126,10 +130,14 @@ export default {
       await this.wpsInstance
         .WordApplication()
         .ActiveDocument.ActiveWindow.Selection.InsertAfter(value);
-         this.$notify.success({
-          title: '提示',
-          message: '引入成功'
-        });
+      this.$notify.success({
+        title: "提示",
+        message: "引入成功",
+      });
+    },
+
+    handleOpenAddUpdateDialog(item) {
+      this.$refs.AddOrUpdateNoteDialog.dialogVisible = true;
     },
   },
 };