Skip to content

Z
zys-ui
提交 e13b5c01 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

完善新建笔记

上级 9dd5c3b4
隐藏空白字符变更
内嵌 并排
正在显示 包含 285 行增加 和 122 行删除
src/api/doc/bookMark.js
浏览文件 @ e13b5c01
......@@ -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
浏览文件 @ e13b5c01
......@@ -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
浏览文件 @ e13b5c01
......@@ -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 0 → 100644
浏览文件 @ e13b5c01
<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
浏览文件 @ e13b5c01
<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
浏览文件 @ e13b5c01
......@@ -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
浏览文件 @ e13b5c01
......@@ -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
浏览文件 @ e13b5c01
<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;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论