zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
始于初见
2025-01-21 09:14:35 +08:00
parent 49feb0777d
commit 1f169dc517
12 changed files with 4057 additions and 792 deletions
Download Patch File Download Diff File Expand all files Collapse all files

315
src/assets/css/main.css
View File

@@ -512,7 +512,7 @@ a {
} }
.kuang_communtion .kuang_communtion_conmt { .kuang_communtion .kuang_communtion_conmt {
/* max-height: 350px; /* max-height: 350px;
overflow-y: auto; */ overflow-y: auto; */
word-break: normal; word-break: normal;
} }
@@ -1072,115 +1072,262 @@ a {
line-height: 24px; line-height: 24px;
} */ } */
.wordTableHtml b span { .wordTableHtml b span {
font-weight: bold !important; font-weight: bold !important;
} }
.wordTableHtml i span {
font-style: italic !important; .wordTableHtml i span {
font-style: italic !important;
} }
.wordTableHtml sub span {
vertical-align: sub; .wordTableHtml sub span {
vertical-align: sub;
} }
.wordTableHtml sup span { .wordTableHtml sup span {
vertical-align: super; vertical-align: super;
} }
.wordTableHtml sub {
vertical-align: sub !important; .wordTableHtml sub {
vertical-align: sub !important;
} }
.wordTableHtml sup {
vertical-align: super !important; .wordTableHtml sup {
vertical-align: super !important;
} }
.wordTableHtml span[style*='vertical-align: super'] {
vertical-align: super !important; .wordTableHtml span[style*='vertical-align: super'] {
vertical-align: super !important;
} }
.wordTableHtml span[style*='vertical-align: sub'] {
vertical-align: sub !important; .wordTableHtml span[style*='vertical-align: sub'] {
vertical-align: sub !important;
} }
.wordTableHtml table { .wordTableHtml table {
border: 0px !important; border: 0px !important;
border-collapse: collapse; /* 去除单元格间隙 */ border-collapse: collapse;
width: auto; /* 去除单元格间隙 */
margin: 0 auto !important; width: auto;
table-layout: auto; /* 自动调整列宽 */ margin: 0 auto !important;
text-align: left; table-layout: auto;
font-family: 'Charis SIL' !important; /* 自动调整列宽 */
font-size: 7.5pt !important; text-align: left;
mso-font-kerning: 1pt !important; font-family: 'Charis SIL' !important;
line-height: 10pt !important; font-size: 7.5pt !important;
mos-line-height: 10pt !important; mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
} }
.wordTableHtml table td, .wordTableHtml table td,
.wordTableHtml table th{ .wordTableHtml table th {
padding: 5px; padding: 5px;
text-align: left !important; text-align: left !important;
word-wrap: break-word; /* 长单词自动换行 */ word-wrap: break-word;
word-break: break-word; /* 长单词自动换行 */
font-family: 'Charis SIL' !important; word-break: break-word;
font-size: 7.5pt !important; font-family: 'Charis SIL' !important;
mso-font-kerning: 1pt !important; font-size: 7.5pt !important;
line-height: 10pt !important; mso-font-kerning: 1pt !important;
mos-line-height: 10pt !important; line-height: 10pt !important;
mos-line-height: 10pt !important;
} }
.wordTableHtml table tbody tr td { .wordTableHtml table tbody tr td {
text-align: left !important; text-align: left !important;
border-left: none !important; border-left: none !important;
mso-border-left-alt: none !important; mso-border-left-alt: none !important;
border-right: none !important; border-right: none !important;
mso-border-right-alt: none !important; mso-border-right-alt: none !important;
border-top: none; border-top: none;
mso-border-top-alt: none !important; mso-border-top-alt: none !important;
border-bottom: none !important; border-bottom: none !important;
mso-border-bottom-alt: none !important; mso-border-bottom-alt: none !important;
border: 1px dashed #dcdfe6 !important; border: 1px dashed #dcdfe6 !important;
border-left: 1px dashed #dcdfe6 !important; border-left: 1px dashed #dcdfe6 !important;
border-right: 1px dashed #dcdfe6 !important; border-right: 1px dashed #dcdfe6 !important;
word-break: keep-all !important; word-break: keep-all !important;
/* text-align: justify !important; */ /* text-align: justify !important; */
} }
.wordTableHtml table tr td p { .wordTableHtml table tr td p {
display: flex; display: flex;
text-align: left !important; text-align: left !important;
align-items: center; align-items: center;
margin: 0; margin: 0;
font-family: 'Charis SIL' !important; font-family: 'Charis SIL' !important;
font-size: 7.5pt !important; font-size: 7.5pt !important;
mso-font-kerning: 1pt !important; mso-font-kerning: 1pt !important;
line-height: 10pt !important; line-height: 10pt !important;
mos-line-height: 10pt !important; mos-line-height: 10pt !important;
} }
.wordTableHtml table span { .wordTableHtml table span {
color: #000000; color: #000000;
text-align: left !important; text-align: left !important;
font-family: 'Charis SIL' !important; font-family: 'Charis SIL' !important;
font-size: 7.5pt !important; font-size: 7.5pt !important;
mso-font-kerning: 1pt !important; mso-font-kerning: 1pt !important;
line-height: 10pt !important; line-height: 10pt !important;
mos-line-height: 10pt !important; mos-line-height: 10pt !important;
} }
.wordTableHtml table .color-highlight { .wordTableHtml table .color-highlight {
color: rgb(0, 130, 170) !important; color: rgb(0, 130, 170) !important;
font-family: 'Charis SIL' !important; font-family: 'Charis SIL' !important;
font-size: 7.5pt !important; font-size: 7.5pt !important;
mso-font-kerning: 1pt !important; mso-font-kerning: 1pt !important;
line-height: 10pt !important; line-height: 10pt !important;
mos-line-height: 10pt !important; mos-line-height: 10pt !important;
} }
.wordTableHtml table blue { .wordTableHtml table blue {
color: rgb(0, 130, 170) !important; color: rgb(0, 130, 170) !important;
font-family: 'Charis SIL' !important; font-family: 'Charis SIL' !important;
font-size: 7.5pt !important; font-size: 7.5pt !important;
mso-font-kerning: 1pt !important; mso-font-kerning: 1pt !important;
line-height: 10pt !important; line-height: 10pt !important;
mos-line-height: 10pt !important; mos-line-height: 10pt !important;
} }
.wordTableHtml table tr:first-child td {
border-top: 1px solid #000 !important;
border-bottom: 1px solid #000 !important; .wordTableHtml table tr:first-child td {
border-top: 1px solid #000 !important;
border-bottom: 1px solid #000 !important;
} }
.wordTableHtml table tr:last-of-type td {
border-bottom: 1px solid #000 !important; .wordTableHtml table tr:last-of-type td {
border-bottom: 1px solid #000 !important;
} }
.word-container b span {
font-weight: bold !important;
}
.word-container i span {
font-style: italic !important;
}
.word-container sub span {
vertical-align: sub;
}
.word-container sup span {
vertical-align: sup;
}
.word-container sub {
vertical-align: sub !important;
}
.word-container sup {
vertical-align: sup !important;
}
.word-container span[style*='vertical-align: super'] {
vertical-align: super !important;
}
.word-container span[style*='vertical-align: sub'] {
vertical-align: sub !important;
}
.word-container table {
border: 0px !important;
border-collapse: collapse;
/* 去除单元格间隙 */
width: auto;
margin: 0 auto !important;
table-layout: auto;
/* 自动调整列宽 */
text-align: left;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.word-container table td,
.word-container table th {
padding: 5px;
text-align: left !important;
white-space: pre-wrap;
/* 保留换行符并换行 */
word-wrap: break-word;
/* 长单词自动换行 */
word-break: break-word;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.word-container table tbody tr td {
text-align: left !important;
border-left: none !important;
mso-border-left-alt: none !important;
border-right: none !important;
mso-border-right-alt: none !important;
border-top: none;
mso-border-top-alt: none !important;
border-bottom: none !important;
mso-border-bottom-alt: none !important;
border: 1px dashed #dcdfe6 !important;
border-left: 1px dashed #dcdfe6 !important;
border-right: 1px dashed #dcdfe6 !important;
word-break: keep-all !important;
text-align: justify !important;
}
.word-container table tr td p {
text-align: left !important;
margin: 0;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.word-container table span {
color: #000000;
text-align: left !important;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.word-container table .color-highlight {
color: rgb(0, 130, 170) !important;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.word-container table tr:first-child td {
border-top: 1pt solid #000 !important;
mso-border-top-alt: 0.5pt solid #000 !important;
border-bottom: 1pt solid #000 !important;
mso-border-bottom-alt: 0.5pt solid #000 !important;
}
.word-container table tr:last-of-type {
border-bottom: 1pt solid #000 !important;
mso-border-bottom-alt: 0.5pt solid #000 !important;
}
.word-container blue {
color: rgb(0, 130, 170) !important;
}

BIN
src/assets/img/uploadTable.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

221
src/common/js/commonJS.js
View File

@@ -1,3 +1,4 @@
import Vue from 'vue';
import JSZip from 'jszip'; import JSZip from 'jszip';
import Common from '@/components/common/common' import Common from '@/components/common/common'
import Tiff from 'tiff.js'; import Tiff from 'tiff.js';
@@ -1150,6 +1151,226 @@ convertParagraphsToHtml(paragraphs) {
}, },
initEditorButton(vueInstance,ed) {
ed.ui.registry.addMenuButton('customDropdown', {
text: 'Set Title', // 下拉框标题
fetch: function (callback) {
// 定义下拉框的内容
const items = [
{
label: 'First level title',
value: 1
},
{
label: 'Secondary Title',
value: 2
},
{
label: 'Third level title',
value: 3
}
];
const menuItems = items.map((item) => ({
type: 'menuitem',
text: item.label,
onAction: function () {
var edSelection = ed.selection;
const selectedNode = edSelection.getNode(); // 获取选中的节点
if (selectedNode) {
// 向上查找最外层的 div
let outerDiv = selectedNode;
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
}
// 如果找到的 div 节点存在
if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id');
vueInstance.$emit('onEditTitle', {
mainId: dataId,
value: item.value
});
}
}
}
}));
callback(menuItems);
}
});
// 添加自定义菜单项
ed.ui.registry.addButton('Save', {
icon: 'checkmark',
text: 'Save',
onAction: function () {
var deleteButtons = document.querySelectorAll('.tox-tinymce-inline');
var edSelection = ed.selection;
const selectedNode = edSelection.getNode(); // 获取选中的节点
let outerDiv = selectedNode;
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
}
// 如果找到的 div 节点存在
if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id');
var content;
console.log('outerDiv at line 663:', outerDiv.innerHTML);
content = outerDiv.innerHTML.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, '');
content =content.replace(/<([a-zA-Z]+)>\s*<\/\1>/g, '');
content = content.replace(/&nbsp;/g, ' ');
content = content.replace(/\s*style="[^"]*"/g, '');
var div = document.createElement('div');
div.innerHTML = content; // 将 HTML 字符串加载到 div 中
// 替换所有 <strong> 为 <b>
var strongTags = div.getElementsByTagName('strong');
for (var i = 0; i < strongTags.length; i++) {
var bTag = document.createElement('b');
bTag.innerHTML = strongTags[i].innerHTML; // 保留内容
strongTags[i].parentNode.replaceChild(bTag, strongTags[i]);
}
// 替换所有 <em> 为 <i>
var emTags = div.getElementsByTagName('em');
for (var i = 0; i < emTags.length; i++) {
var iTag = document.createElement('i');
iTag.innerHTML = emTags[i].innerHTML; // 保留内容
emTags[i].parentNode.replaceChild(iTag, emTags[i]);
}
content = div.innerHTML;
console.log('content at line 486:', content);
vueInstance.$emit('saveContent', content, dataId);
}
}
});
ed.ui.registry.addButton('Edit', {
icon: 'highlight-bg-color',
text: 'Edit',
onAction: function () {
var edSelection = ed.selection;
const selectedNode = edSelection.getNode(); // 获取选中的节点
let outerDiv = selectedNode;
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
}
// 如果找到的 div 节点存在
if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id');
console.log('dataId at line 1258:', dataId)
vueInstance.$emit('onEdit', dataId);
}
}
});
ed.ui.registry.addButton('commentAdd', {
icon: 'comment-add',
text: 'Comment Add',
onAction: function () {
var edSelection = ed.selection;
const selectedNode = edSelection.getNode(); // 获取选中的节点
if (selectedNode) {
// 向上查找最外层的 div
let outerDiv = selectedNode;
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
}
// 如果找到的 div 节点存在
if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id');
let selectedText = edSelection.getContent({ format: 'text' });
vueInstance.$emit('onAddComment', {
mainId: dataId,
label: selectedText ? selectedText : ''
});
}
}
}
});
ed.ui.registry.addButton('delete', {
icon: 'remove',
text: 'Delete',
onAction: function () {
var edSelection = ed.selection;
const selectedNode = edSelection.getNode(); // 获取选中的节点
if (selectedNode) {
// 向上查找最外层的 div
let outerDiv = selectedNode;
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
}
// 如果找到的 div 节点存在
if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id');
vueInstance.$emit('onDelete',dataId);
}
}
}
});
// 定义自定义按钮
ed.ui.registry.addButton('clearButton', {
text: 'Empty',
onAction: () => {
// 插入自定义表格到编辑器中
ed.setContent('');
}
});
ed.ui.registry.addButton('customBlue', {
text: 'Blue', // 按钮文本
onAction: function () {
// 在选中的文本周围包裹 <blue> 标签
var selectedText = ed.selection.getContent();
console.log('selectedText at line 529:', selectedText);
if (selectedText) {
var wrappedText = `<blue>${selectedText}</blue>`;
ed.selection.setContent(wrappedText);
} else {
this.$message.error('请选择要添加蓝色的文本');
}
}
});
ed.ui.registry.addButton('removeBlue', {
text: 'Blue', // 按钮文本
onAction: function () {
const range = ed.selection.getRng(); // 获取选区范围
let startNode = range.startContainer; // 获取选区起始节点
let closestBlue = null;
// 向上查找最近的 <blue> 标签
while (startNode) {
if (startNode.nodeName && startNode.nodeName.toLowerCase() === 'blue') {
closestBlue = startNode;
break;
}
startNode = startNode.parentNode;
}
if (closestBlue) {
// 如果找到最近的 <blue> 标签，移除它的外层标签，但保留内容
const parent = closestBlue.parentNode;
while (closestBlue.firstChild) {
parent.insertBefore(closestBlue.firstChild, closestBlue);
}
parent.removeChild(closestBlue);
} else {
// 未找到 <blue> 标签，仅移除选中的 <blue> 标签内容
const selectedContent = ed.selection.getContent({ format: 'html' });
// 使用正则表达式移除选区中的 <blue> 标签
const cleanedContent = selectedContent
.replace(/<blue[^>]*>/g, '') // 删除起始标签 <blue>
.replace(/<\/blue>/g, ''); // 删除结束标签 </blue>
// 更新选中的内容
ed.selection.setContent(cleanedContent);
}
}
});
},
// 通用递归方法 // 通用递归方法
}; };

8
src/components/common/common.vue
View File

@@ -2,12 +2,12 @@
//记得切换 //记得切换
//正式 //正式
const mediaUrl = '/public/'; // const mediaUrl = '/public/';
const baseUrl = '/'; // const baseUrl = '/';
// const mediaUrl = 'https://submission.tmrjournals.com/public/'; const mediaUrl = 'https://submission.tmrjournals.com/public/';
// const baseUrl = '/api'; const baseUrl = '/api';

258
src/components/page/GenerateCharts.vue
View File

@@ -62,7 +62,8 @@
@onDragStart="onDragStart" @onDragStart="onDragStart"
@huifu="huifu" @huifu="huifu"
@onAddComment="onAddComment" @onAddComment="onAddComment"
@add="handleImageAdd" @addImage="handleImageAdd"
@addTable="handleTableAdd"
@addComment="addCommentSetting" @addComment="addCommentSetting"
@goToComment="goToComment" @goToComment="goToComment"
@edit="handleImageEdit" @edit="handleImageEdit"
@@ -98,6 +99,7 @@
@loaded="loadedWord" @loaded="loadedWord"
@onEdit="onEdit" @onEdit="onEdit"
@onDelete="onDelete" @onDelete="onDelete"
@refresh="onRefresh"
@onComment="onComment" @onComment="onComment"
@onAddComment="onAddComment" @onAddComment="onAddComment"
@onEditTitle="onEditTitle" @onEditTitle="onEditTitle"
@@ -106,17 +108,10 @@
:style="`100%`" :style="`100%`"
> >
<template slot="comment"> <template slot="comment">
<div style="" class="commentList annotations"> <div style="" class="commentList annotations"></div>
</div>
</template> </template>
</common-word> </common-word>
</div> </div>
<!-- <div style="height: 20px" v-if="Art_Doi == undefined"></div> -->
<!-- <div style="margin: 20px 0 0 0; text-align: center; padding-bottom: 30px" v-if="Art_Doi != undefined">
<el-button icon="el-icon-finished" type="primary" style="width: 350px" @click="pushOnline()"> Push Online </el-button>
</div> -->
</div> </div>
<!--添加/修改图片 --> <!--添加/修改图片 -->
@@ -144,8 +139,16 @@
</el-form-item> </el-form-item>
<el-form-item label="Figure Describe :"> <el-form-item label="Figure Describe :">
<el-input placeholder="Please enter the table describe..." v-model="picStyle.note" type="textarea" :rows="3"> <tinymce
</el-input> :isAutomaticUpdate="true"
ref="tinymceChildImgNote"
@getContent="getContent"
@updateChange="(res) => updateChange(res, 'imgNote')"
:value="picStyle.note"
class="paste-area text-container"
toolbar="bold italic subscript superscript clearButton"
height="120"
></tinymce>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -541,7 +544,7 @@ export default {
am_id: comment.am_id am_id: comment.am_id
}) })
.then((res) => { .then((res) => {
this.getDate() this.getDate();
this.getCommentList(); this.getCommentList();
}); });
// this.comments.splice(index, 1); // 删除评论 // this.comments.splice(index, 1); // 删除评论
@@ -549,7 +552,7 @@ export default {
.catch(() => {}); .catch(() => {});
} }
}, },
async saveContent(content,am_id) { async saveContent(content, am_id) {
var that = this; var that = this;
var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : ''; var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : '';
if (str == '') { if (str == '') {
@@ -643,7 +646,14 @@ export default {
async onDelete(dataId) { async onDelete(dataId) {
var dataInfo = this.Main_List.find((item) => item.am_id == dataId); var dataInfo = this.Main_List.find((item) => item.am_id == dataId);
var type = dataInfo.amt_id ? 'table' : dataInfo.ami_id ? 'img' : 'content'; var type = '';
if (dataInfo.type == 1) {
type = 'img';
} else if (dataInfo.type == 2) {
type = 'table';
} else if (dataInfo.type == 0) {
type = 'content';
}
await this.$confirm(this.$t('commonTable.removeContent'), 'Prompt', { await this.$confirm(this.$t('commonTable.removeContent'), 'Prompt', {
confirmButtonText: 'Submit', confirmButtonText: 'Submit',
@@ -672,6 +682,7 @@ export default {
if (res.code == 0) { if (res.code == 0) {
setTimeout(() => { setTimeout(() => {
that.getDate(); that.getDate();
that.getCommentList();
if (type == 'img') { if (type == 'img') {
that.$refs.commonWordHtmlTypeSetting.refresh('img'); that.$refs.commonWordHtmlTypeSetting.refresh('img');
} else { } else {
@@ -757,6 +768,10 @@ export default {
); );
} }
}, },
onRefresh() {
this.getDate();
this.getCommentList();
},
editComment(comment) { editComment(comment) {
this.commentForm = { this.commentForm = {
...comment ...comment
@@ -836,7 +851,11 @@ export default {
}, },
updateChange(content, type) { updateChange(content, type) {
var str = this.$commonJS.transformHtmlString(content); var str = this.$commonJS.transformHtmlString(content);
this.lineStyle[type] = str; if (type == 'imgNote') {
this.picStyle.note = str;
} else {
this.lineStyle[type] = str;
}
}, },
onEdit(dataId) { onEdit(dataId) {
this.currentId = null; this.currentId = null;
@@ -948,121 +967,117 @@ export default {
}); });
}, },
getWord() { getWord() {
// var htmlContent = `<h3 class="man_Title" contenteditable="false">${this.detailTitle} </h3>`; // var htmlContent = `<h3 class="man_Title" contenteditable="false">${this.detailTitle} </h3>`;
// htmlContent += this.Main_List.map((item) => { // htmlContent += this.Main_List.map((item) => {
// //批注 // //批注
// let contentHtml = ''; // let contentHtml = '';
// var isRemark = ``; // var isRemark = ``;
// if (item.remark && item.remark != '') { // if (item.remark && item.remark != '') {
// // isRemark = `<img class="isRemark" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`; // // isRemark = `<img class="isRemark" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
// isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${ // isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${
// this.remarkImageUrl // this.remarkImageUrl
// }" alt="" style="width: 20px; height: 20px" /> // }" alt="" style="width: 20px; height: 20px" />
// <span class="isRemarkIcon" main-id="${item.am_id}" > (${item.am_id})</span> // <span class="isRemarkIcon" main-id="${item.am_id}" > (${item.am_id})</span>
// ${item.state == 0 ? `<span class="Resolved" main-id="${item.am_id}">Resolved</span>` : ''} // ${item.state == 0 ? `<span class="Resolved" main-id="${item.am_id}">Resolved</span>` : ''}
// </span> // </span>
// `; // `;
// } // }
// // 判断是否是图片 // // 判断是否是图片
// if (item.type == 1) { // if (item.type == 1) {
// var extension = item.image.url.split('.').pop().toLowerCase(); // var extension = item.image.url.split('.').pop().toLowerCase();
// if (extension == 'tif') { // if (extension == 'tif') {
// contentHtml = ` // contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${ // <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
// item.am_id // item.am_id
// }"> // }">
// <img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" /> // <img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font> // <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
// </p> // </p>
// `; // `;
// } else if (['jpg', 'jpeg', 'png'].includes(extension)) { // } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
// contentHtml = ` // contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${ // <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
// item.ami_id // item.ami_id
// }" main-id="${item.am_id}"> // }" main-id="${item.am_id}">
// ${isRemark} // ${isRemark}
// <img src="${this.mediaUrl + item.image.url}" style="width: ${ // <img src="${this.mediaUrl + item.image.url}" style="width: ${
// item.width ? `${item.width}px` : '100%' // item.width ? `${item.width}px` : '100%'
// }" /> // }" />
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${ // <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
// item.image.note ? item.image.note : '' // item.image.note ? item.image.note : ''
// }</font> // }</font>
// </p> // </p>
// `; // `;
// } else { // } else {
// contentHtml = ` // contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${ // <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
// item.ami_id // item.ami_id
// }" main-id="${item.am_id}"> // }" main-id="${item.am_id}">
// ${isRemark} // ${isRemark}
// <span // <span
// style=" // style="
// text-align: center; // text-align: center;
// font-size: 30px; // font-size: 30px;
// display: flex; // display: flex;
// align-items: center; // align-items: center;
// justify-content: center; // justify-content: center;
// " // "
// > // >
// Figures ( .${item.image.url.split('.').pop().toUpperCase()}) // Figures ( .${item.image.url.split('.').pop().toUpperCase()})
// </span> // </span>
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${ // <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
// item.image.note ? item.image.note : '' // item.image.note ? item.image.note : ''
// }</font> // }</font>
// </p> // </p>
// `; // `;
// } // }
// } else if (item.type == 2) { // } else if (item.type == 2) {
// var tableList = JSON.parse(item.table.table_data); // var tableList = JSON.parse(item.table.table_data);
// contentHtml = ` // contentHtml = `
// <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${ // <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
// item.am_id // item.am_id
// }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;"> // }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
// ${isRemark} // ${isRemark}
// <font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font> // <font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
// <table border="1" style="width: auto; border-collapse: collapse; text-align: center; "> // <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
// ${tableList // ${tableList
// .map((row) => { // .map((row) => {
// return ` // return `
// <tr> // <tr>
// ${row // ${row
// .map((cell) => { // .map((cell) => {
// return ` // return `
// <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}"> // <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
// <span>${cell.text || ''}</span> // <span>${cell.text || ''}</span>
// </td> // </td>
// `; // `;
// }) // })
// .join('')} <!-- join the cells in the row --> // .join('')} <!-- join the cells in the row -->
// </tr> // </tr>
// `; // `;
// }) // })
// .join('')} <!-- join the rows --> // .join('')} <!-- join the rows -->
// </table> // </table>
// <font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font> // <font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
// </div> // </div>
// `; // `;
// } else { // } else {
// contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`; // contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
// } // }
// // 判断是否是表格类型 // // 判断是否是表格类型
// return contentHtml; // return contentHtml;
// }).join(''); // }).join('');
// this.htmlContent = htmlContent; // this.htmlContent = htmlContent;
this.htmlContent = 'true'; this.htmlContent = 'true';
}, },
// 获取数据 // 获取数据
async getDate() { async getDate() {
// this.isFirstComponentLoaded = false;
// this.isWordComponentLoaded = false;
this.imagesList = []; this.imagesList = [];
let urlLInk = ''; let urlLInk = '';
let urlTask = {}; let urlTask = {};
@@ -1083,8 +1098,6 @@ export default {
.post(urlLInk, urlTask) .post(urlLInk, urlTask)
.then(async (res) => { .then(async (res) => {
if (res.code == 0) { if (res.code == 0) {
// this.detailTitle = res.data.production.title;
// this.Art_P_Id = res.data.production.p_article_id;
this.Main_List = res.data.list; this.Main_List = res.data.list;
this.getManuscirptContent(); this.getManuscirptContent();
for (let i = 0; i < this.Main_List.length; i++) { for (let i = 0; i < this.Main_List.length; i++) {
@@ -1410,7 +1423,6 @@ export default {
positionAnnotations() { positionAnnotations() {
this.$nextTick(() => { this.$nextTick(() => {
this.comments.forEach((item) => { this.comments.forEach((item) => {
const contentElement = document.querySelector('[remark-main-id="' + item.am_id + '"]'); const contentElement = document.querySelector('[remark-main-id="' + item.am_id + '"]');
const annotationElement = document.querySelector('[data-target="main-' + item.am_id + '"]'); const annotationElement = document.querySelector('[data-target="main-' + item.am_id + '"]');
if (contentElement && annotationElement) { if (contentElement && annotationElement) {
@@ -1770,6 +1782,4 @@ export default {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块悬停时的颜色 */ background: #555; /* 滑块悬停时的颜色 */
} }
</style> </style>

159
src/components/page/components/Tinymce/index.vue
View File

@@ -329,17 +329,29 @@ export default {
} }
}, },
content_style: `${tableStyle} table span blue { content_style: `${tableStyle}
color: rgb(0, 130, 170) !important; .tox-editor-header{
}blue { background-color: #f8f9fa!important;
color: rgb(0, 130, 170) !important; }
}`, .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
color: #007bff; /* 设置字体颜色 */
}
.tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(2){
font-weight:bold !important;
color: #007bff; /* 设置字体颜色 */
text-decoration: line-through;
}
table span blue {
color: rgb(0, 130, 170) !important;
}blue {
color: rgb(0, 130, 170) !important;
}`,
formats: { formats: {
bold: { inline: 'b' }, bold: { inline: 'b' },
italic: { inline: 'i' } italic: { inline: 'i' }
}, },
body_class: 'panel-body ', body_class: 'panel-body ',
object_resizing: false, object_resizing: false,
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar, toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
@@ -352,107 +364,8 @@ export default {
content_css: 'default', // 加载 TinyMCE 默认样式表 content_css: 'default', // 加载 TinyMCE 默认样式表
//设置自定义按钮 myCustomToolbarButton //设置自定义按钮 myCustomToolbarButton
setup(ed) { setup(ed) {
// ed.on('change', function () { _this.$commonJS.initEditorButton(_this, ed);
// var selectedColor = ed.formatter.get('forecolor');
// console.log('ed.formatter.get at line 355:', ed.formatter)
// console.log('ed.formatter.get at line 355:', selectedColor)
// // 检查是否选择了蓝色
// if (selectedColor === '#0082AA') {
// // 蓝色的 hex 值
// var selectedText = ed.selection.getContent(); // 获取选中的文本
// if (selectedText) {
// var wrappedText = `<blue>${selectedText}</blue>`; // 包裹 <blue> 标签
// ed.selection.setContent(wrappedText); // 更新内容
// }
// }
// });
ed.ui.registry.addButton('customBlue', {
text: 'Blue', // 按钮文本
onAction: function () {
// 在选中的文本周围包裹 <blue> 标签
var selectedText = ed.selection.getContent();
var wrappedText = `<blue>${selectedText}</blue>`;
ed.selection.setContent(wrappedText);
},
classes: 'custom-colored-tinymce-button'
});
ed.ui.registry.addButton('removeBlue', {
text: 'Remove Blue', // 按钮文本
onAction: function () {
const range = ed.selection.getRng(); // 获取选区范围
let startNode = range.startContainer; // 获取选区起始节点
let closestBlue = null;
// 向上查找最近的 <blue> 标签
while (startNode) {
if (startNode.nodeName && startNode.nodeName.toLowerCase() === 'blue') {
closestBlue = startNode;
break;
}
startNode = startNode.parentNode;
}
if (closestBlue) {
// 如果找到最近的 <blue> 标签，移除它的外层标签，但保留内容
const parent = closestBlue.parentNode;
while (closestBlue.firstChild) {
parent.insertBefore(closestBlue.firstChild, closestBlue);
}
parent.removeChild(closestBlue);
} else {
// 未找到 <blue> 标签，仅移除选中的 <blue> 标签内容
const selectedContent = ed.selection.getContent({ format: 'html' });
// 使用正则表达式移除选区中的 <blue> 标签
const cleanedContent = selectedContent
.replace(/<blue[^>]*>/g, '') // 删除起始标签 <blue>
.replace(/<\/blue>/g, ''); // 删除结束标签 </blue>
// 更新选中的内容
ed.selection.setContent(cleanedContent);
}
}
});
ed.ui.registry.addToggleButton('toggleBlue', {
text: 'Toggle Blue', // 按钮文本
onAction: function () {
var selectedContent = ed.selection.getContent({ format: 'html' }); // 获取选中内容（HTML 格式）
// 创建临时 DOM 容器
var tempDiv = document.createElement('div');
tempDiv.innerHTML = selectedContent;
// 检查是否完全被 <blue> 包裹
if (tempDiv.childNodes.length === 1 && tempDiv.firstChild.nodeName.toLowerCase() === 'blue') {
// 移除 <blue> 标签
var unwrappedContent = tempDiv.firstChild.innerHTML;
ed.selection.setContent(unwrappedContent); // 更新内容
} else {
// 添加 <blue> 标签
var wrappedContent = `<blue>${selectedContent}</blue>`;
ed.selection.setContent(wrappedContent); // 更新内容
}
},
onSetup: function (buttonApi) {
// 更新按钮状态（激活或非激活）
function updateButtonState() {
var selectedContent = ed.selection.getContent({ format: 'html' });
var tempDiv = document.createElement('div');
tempDiv.innerHTML = selectedContent;
buttonApi.setActive(
tempDiv.childNodes.length === 1 && tempDiv.firstChild.nodeName.toLowerCase() === 'blue'
);
}
// 监听编辑器中的选区变化
ed.on('NodeChange', updateButtonState);
ed.on('KeyUp', updateButtonState); // 处理键盘操作导致的内容变化
}
});
ed.ui.registry.addButton('uploadWord', { ed.ui.registry.addButton('uploadWord', {
text: 'Word', text: 'Word',
icon: 'import-word', // 使用自定义图标 icon: 'import-word', // 使用自定义图标
@@ -478,23 +391,23 @@ export default {
} }
}); });
ed.ui.registry.addMenuButton('customDropdown', { // ed.ui.registry.addMenuButton('customDropdown', {
text: _this.$t('commonTable.PaperRotation'), // 下拉框标题 // text: _this.$t('commonTable.PaperRotation'), // 下拉框标题
fetch: function (callback) { // fetch: function (callback) {
// 定义下拉框的内容 // // 定义下拉框的内容
const items = [..._this.typesettingTypeOptions]; // const items = [..._this.typesettingTypeOptions];
const menuItems = items.map((item) => ({ // const menuItems = items.map((item) => ({
type: 'menuitem', // type: 'menuitem',
text: item.label, // text: item.label,
onAction: function () { // onAction: function () {
_this.typesettingType = item.value; // _this.typesettingType = item.value;
_this.changeTable(); // _this.changeTable();
// ed.execCommand(item.value); // 执行命令 // // ed.execCommand(item.value); // 执行命令
} // }
})); // }));
callback(menuItems); // callback(menuItems);
} // }
}); // });
ed.on('init', function () { ed.on('init', function () {
const editorBody = ed.getBody(); const editorBody = ed.getBody();

1320
src/components/page/components/table/editTable.vue Normal file
View File

File diff suppressed because it is too large Load Diff

11
src/components/page/components/table/table.vue
View File

@@ -4,15 +4,13 @@
<!--uploadWord |customButtonExportWord |customButtonExportImg --> <!--uploadWord |customButtonExportWord |customButtonExportImg -->
<tinymce <tinymce
type="table" type="table"
ref="tinymceChild1" ref="tinymceChild1"
@getContent="getContent" @getContent="getContent"
:value="updatedHtml" :value="updatedHtml"
:typesettingType="typesettingType" :typesettingType="typesettingType"
class="paste-area text-container" class="paste-area text-container"
:toolbar="`undo redo | formatselect | bold italic ${ :toolbar="['bold italic|customBlue removeBlue|subscript superscript|table tabledelete|clearButton']"
identity ? '| customBlue removeBlue' : ''
} |subscript superscript|table tabledelete ${identity ? '| customDropdown' : ''} | clearButton`"
style=" style="
/* white-space: pre-line; */ /* white-space: pre-line; */
line-height: 12px; line-height: 12px;
@@ -25,7 +23,6 @@
margin-bottom: 0pt; /* 段后间距 */ margin-bottom: 0pt; /* 段后间距 */
" "
></tinymce> ></tinymce>
</div> </div>
</div> </div>
</template> </template>
@@ -105,8 +102,8 @@ export default {
}, },
getContent(type, content) { getContent(type, content) {
if (content) { if (content) {
const container = document.createElement("div"); const container = document.createElement('div');
container.innerHTML = content; container.innerHTML = content;
this.$commonJS.parseTableToArray(content, (table) => { this.$commonJS.parseTableToArray(content, (table) => {
console.log('res at line 104:', table); console.log('res at line 104:', table);

1621
src/components/page/components/table/word copy 2.vue Normal file
View File

File diff suppressed because it is too large Load Diff

739
src/components/page/components/table/word.vue
View File

@@ -22,17 +22,17 @@
flex: 1; flex: 1;
" "
> >
<template v-for="(item, index) in contentList"> <template v-for="(item, index) in wordList">
<li <li
v-if="item.remark && item.remark != ''" v-if="item.remark && item.remark != ''"
class="comment-item annotation" class="comment-item annotation"
:data-target="`main-${item.am_id}`" :data-target="`main-${item.am_id}`"
style="width: calc(350px - 20px); padding: 6px 0;margin-top: 10px;" style="width: calc(350px - 20px); padding: 6px 0; margin-top: 10px"
> >
<div> <div>
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px"> <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px">
<div class="pizhu" style="display: flex; align-items: center"> <div class="pizhu" style="display: flex; align-items: center">
<span style="color: #fc625d; display: flex; align-items: center; font-weight: bold;"> <span style="color: #fc625d; display: flex; align-items: center; font-weight: bold">
<img <img
class="isRemark" class="isRemark"
src="@/assets/img/isRemark.png" src="@/assets/img/isRemark.png"
@@ -42,14 +42,17 @@
{{ item.am_id {{ item.am_id
}}<span v-if="item.state == 0" class="Resolved">{{ $t('commonTable.Resolved') }}</span></span }}<span v-if="item.state == 0" class="Resolved">{{ $t('commonTable.Resolved') }}</span></span
> >
</div> </div>
<div style="display: flex; align-items: center; justify-content: center"> <div style="display: flex; align-items: center; justify-content: center">
<span style="color: #b8b7b7; font-size: 14px">{{ getTime(item.ctime) }}</span <span style="color: #b8b7b7; font-size: 14px">{{ getTime(item.ctime) }}</span
><span style="color: #aaa; font-size: 14px; margin: 0 4px">|</span> ><span style="color: #aaa; font-size: 14px; margin: 0 4px">|</span>
<el-dropdown class="commentOperate"> <el-dropdown class="commentOperate">
<span class="el-dropdown-link" style="display: flex; align-items: center; justify-content: center">
<span class="el-dropdown-link" style="display: flex;align-items: center;justify-content: center;"> <img
<img src="@/assets/img/selectComment.png" alt="" style="width: 18px; height: 18px;margin-top: 2px;" /> src="@/assets/img/selectComment.png"
alt=""
style="width: 18px; height: 18px; margin-top: 2px"
/>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item>答复</el-dropdown-item> --> <!-- <el-dropdown-item>答复</el-dropdown-item> -->
@@ -72,15 +75,17 @@
<div style="display: flex; align-items: center; justify-content: space-between"> <div style="display: flex; align-items: center; justify-content: space-between">
<p <p
:style="isEditComment ? 'width: calc(100% - 40px)' : 'width: calc(100%)'" :style="isEditComment ? 'width: calc(100% - 40px)' : 'width: calc(100%)'"
style="line-height: 18px; min-height: 20px; width: calc(100%); white-space: normal;padding-top: 10px;padding-left:20px ;" style="
line-height: 18px;
min-height: 20px;
width: calc(100%);
white-space: normal;
padding-top: 10px;
padding-left: 20px;
"
v-html="getCommentRemark(item)" v-html="getCommentRemark(item)"
></p> ></p>
<i <i class="el-icon-edit" v-if="isEditComment" @click="editComment(item, index)" style="color: #006699"></i>
class="el-icon-edit"
v-if="isEditComment"
@click="editComment(item, index)"
style="color: #006699;"
></i>
</div> </div>
</div> </div>
</li> </li>
@@ -89,15 +94,13 @@
class="isRemark" class="isRemark"
src="@/assets/img/isRemark.png" src="@/assets/img/isRemark.png"
alt="" alt=""
style="width: 15px; height: 15px; margin-right: 6px;margin-left: -14px;" style="width: 15px; height: 15px; margin-right: 6px; margin-left: -14px"
/> />
</span> </span>
<div <div
class="MaxPicture pMain myeditabledivImage" class="MaxPicture pMain myeditabledivImage"
@click="initializeEditor(item.am_id)" @click="initializeEditor(item.am_id, 'img', item)"
:class="item.remark && item.remark != '' ? 'remarkbg' : ''" :class="item.remark && item.remark != '' ? 'remarkbg' : ''"
v-if="item.type == 1" v-if="item.type == 1"
:main-state="item.state" :main-state="item.state"
@@ -106,14 +109,17 @@
:main-id="item.am_id" :main-id="item.am_id"
:id="'editor' + item.am_id" :id="'editor' + item.am_id"
> >
<img :src="`${mediaUrl + item.image.url}`" :style="`width: ${item.width ? `${item.width}px` : '500px'}`" />
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{ <img :src="`${mediaUrl + item.image.url}`" />
item.image.note ? item.image.note : ''
}}</font>
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="item.image.note ? item.image.note : ''"></span>
</font>
</div> </div>
<div <div
:class="item.remark && item.remark != '' ? 'remarkbg' : ''" :class="item.remark && item.remark != '' ? 'remarkbg' : ''"
@click="initializeEditor(item.am_id)" @click="initializeEditor(item.am_id, 'table', item)"
class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable" class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable"
v-else-if="item.type == 2" v-else-if="item.type == 2"
:main-state="item.state" :main-state="item.state"
@@ -122,21 +128,21 @@
:id="'editor' + item.am_id" :id="'editor' + item.am_id"
:main-id="item.am_id" :main-id="item.am_id"
> >
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{ <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
item.table.title ? item.table.title : '' <span v-html="item.table.title ? item.table.title : ''"></span>
}}</font> </font>
<table border="1" style="width: auto; border-collapse: collapse; text-align: center"> <table border="1" style="width: auto; border-collapse: collapse; text-align: center">
<tr v-for="(row, i) in JSON.parse(item.table.table_data)"> <tr v-for="(row, i) in JSON.parse(item.table.table_data)">
<td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}" v-for="(cell, i1) in row"> <td :colspan="`${cell.colspan || 1}`" :rowspan="`${cell.rowspan || 1}`" v-for="(cell, i1) in row">
<span v-html="cell.text"></span> <span v-html="cell.text"></span>
</td> </td>
</tr> </tr>
</table> </table>
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{ <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
item.table.note ? item.table.note : '' <span v-html="item.table.note ? item.table.note : ''"></span
}}</font> ></font>
</div> </div>
<div <div
@@ -144,6 +150,7 @@
class="pMain myeditablediv" class="pMain myeditablediv"
:class="item.remark && item.remark != '' ? 'remarkbg' : ''" :class="item.remark && item.remark != '' ? 'remarkbg' : ''"
v-else v-else
@blur="clearEditor(item.am_id)"
:main-state="item.state" :main-state="item.state"
:contenteditable="!readonly" :contenteditable="!readonly"
:data-id="item.am_id" :data-id="item.am_id"
@@ -348,6 +355,7 @@ export default {
}, },
data() { data() {
return { return {
wordList: [],
editors: {}, // 用于存储每个编辑器的实例 editors: {}, // 用于存储每个编辑器的实例
editorsInitialized: {}, // 用于存储每个编辑器实例 editorsInitialized: {}, // 用于存储每个编辑器实例
mediaUrl: mediaUrl, // mediaUrl: mediaUrl, //
@@ -408,53 +416,70 @@ export default {
}, },
// this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(newVal)); // this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(newVal));
watch: { watch: {
value(newVal) { contentList(val) {
this.$nextTick(() => { if (val) {
window.tinymce.get(this.tinymceId).setContent(newVal); this.wordList = [...this.contentList];
this.$emit('loaded'); }
});
} }
}, },
mounted() { mounted() {
this.wordList = [...this.contentList];
for (const key in this.editors) {
if (this.editors[key]) {
// 确保销毁所有编辑器实例
tinymce.remove(this.editors[key]);
this.editors[key] = null; // 清除引用
}
}
this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true }); this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
this.isShowEditComment(); this.isShowEditComment();
this.typesettingType = 1; this.typesettingType = 1;
// this.initTinymce();
}, },
activated() { activated() {
this.wordList = [...this.contentList];
for (const key in this.editors) {
if (this.editors[key]) {
// 确保销毁所有编辑器实例
tinymce.remove(this.editors[key]);
this.editors[key] = null; // 清除引用
}
}
this.isShowEditComment(); this.isShowEditComment();
this.typesettingType = 1; this.typesettingType = 1;
this.initTinymce();
}, },
deactivated() { deactivated() {
this.destroyTinymce(); this.destroyTinymce();
for (const key in this.editors) {
if (this.editors[key]) {
// 确保销毁所有编辑器实例
tinymce.remove(this.editors[key]);
this.editors[key] = null; // 清除引用
}
}
}, },
methods: { methods: {
initializeEditor(index) { clearEditor(editorId){
const editorId = `editor${index}`; console.log('editorId at line 462:', editorId)
for (const key in this.editors) {
// 检查当前编辑器是否已经初始化 if (this.editors[key]) {
if (this.editors[editorId]) return; // 确保销毁所有编辑器实例
tinymce.remove(this.editors[key]);
// 销毁所有已初始化的编辑器实例 this.editors[key] = null; // 清除引用
for (const key in this.editors) {
if (this.editors[key]) {
// 确保销毁所有编辑器实例
tinymce.remove(this.editors[key]);
this.editors[key] = null; // 清除引用
}
} }
}
},
initTinymceContent(editorId) {
var _this = this; var _this = this;
// _this.$emit('positionAnnotations');
// non-breaking
tinymce.init({ tinymce.init({
selector: `#${editorId}`, selector: `#${editorId}`,
inline: true, inline: true,
license_key: 'gpl', // 使用开源 GPL 许可证 license_key: 'gpl', // 使用开源 GPL 许可证
content_css: false, content_css: false,
table_resize_bars: true, table_resize_bars: true,
valid_elements: '*[*]', image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
valid_elements: 'img[src|alt|width|height],strong,em,sub,sup,blue,table,b,i', // 允许的标签和属性
plugins: 'forecolor code paste table image resize searchreplace', plugins: 'forecolor code paste table image resize searchreplace',
content_style: `${tableStyle + this.wordStyle} content_style: `${tableStyle + this.wordStyle}
/* 添加批注 */ /* 添加批注 */
@@ -520,232 +545,122 @@ export default {
end_container_on_empty_block: true, end_container_on_empty_block: true,
content_css: 'default ', content_css: 'default ',
setup(ed) { setup(ed) {
ed.on('keydown', function (e) {
// 检查是否按下回车键
if (e.keyCode === 13) {
// 13 是回车键的 keyCode
e.preventDefault(); // 阻止默认行为（换行）
}
});
var previousContent = ed.getContent(); var previousContent = ed.getContent();
ed.on('blur', function () { ed.on('blur', function () {
var edSelection = ed.selection; // 失去焦点时不执行保存操作，什么都不做
const selectedNode = edSelection.getNode(); // 获取选中的节点 console.log('编辑器失去焦点，但不保存内容');
if (selectedNode) { });
// 向上查找最外层的 div _this.$commonJS.initEditorButton(_this, ed);
let outerDiv = selectedNode; },
while (outerDiv && outerDiv.tagName !== 'DIV') { init_instance_callback: (editor) => {}
outerDiv = outerDiv.parentNode; });
} },
initTinymceImg(editorId) {
var _this = this;
tinymce.init({
readonly: true,
selector: `#${editorId}`,
inline: true,
license_key: 'gpl', // 使用开源 GPL 许可证
content_css: false,
table_resize_bars: true,
image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
valid_elements: '*[*]',
// 如果找到的 div 节点存在 plugins: 'forecolor code paste table image resize searchreplace',
if (outerDiv) { content_style: `${tableStyle + this.wordStyle}
const dataId = outerDiv.getAttribute('main-id');
// console.log('previousContent at line 617:', outerDiv.innerHTML.replace(/^<p>/, '').replace(/<\/p>$/, '')) .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1){
if (previousContent == _this.contentList.find((e) => e.am_id == dataId).content) { font-weight:bold !important;
console.log('at line 618:', '内容没有发生变化'); background-color:#fef0f0;
} else { color: #f56c6c;
console.log('at line 618:', '内容发生变化'); fill:rgb(19, 188, 32);
} }
} /* 成功 */
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
background-color: rgb(43, 129, 239) !important;
color: #fff;
fill:rgb(19, 188, 32);
}
/* 删除 */
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
background-color: red;
color: #fff;
}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color:#fef0f0;
color: #f56c6c; /* 设置字体颜色 */
fill:#f56c6c !important;
font-size:16px!important;
}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color: rgb(43, 129, 239) !important;
color: #fff; /* 设置字体颜色 */
fill:#fff !important;
font-size:16px!important;
}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color: red;
color: #fff; /* 设置字体颜色 */
fill:#fff !important;
font-size:16px!important;
}
`,
menubar: false,
toolbar: ['commentAdd |delete| Edit'],
end_container_on_empty_block: true,
content_css: 'default ',
setup(ed) {
// 禁止输入内容，但工具栏按钮仍然有效
ed.on('keydown', function (e) {
if (ed.mode.get() === 'readonly') {
e.preventDefault(); // 阻止任何输入
} }
}); });
ed.ui.registry.addMenuButton('customDropdown', { ed.on('keydown', function (e) {
text: 'Set Title', // 下拉框标题 // 检查是否按下回车键
fetch: function (callback) { if (e.keyCode === 13) {
// 定义下拉框的内容 // 13 是回车键的 keyCode
const items = [ e.preventDefault(); // 阻止默认行为（换行）
{
label: 'First level title',
value: 1
},
// 1 cm = 144 Twip 上边距（2.54 cm） = 2.54 × 144 = 365.76 Twip
{
label: 'Secondary Title',
value: 2
},
{
label: 'Third level title',
value: 3
}
];
const menuItems = items.map((item) => ({
type: 'menuitem',
text: item.label,
onAction: function () {
var edSelection = ed.selection;
const selectedNode = edSelection.getNode(); // 获取选中的节点
if (selectedNode) {
// 向上查找最外层的 div
let outerDiv = selectedNode;
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
}
// 如果找到的 div 节点存在
if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id');
_this.$emit('onEditTitle', {
mainId: dataId,
value: item.value
});
}
}
}
}));
callback(menuItems);
} }
}); });
// 添加自定义菜单项 // ed.on('NodeChange', function (e) {
ed.ui.registry.addButton('Save', { // if (e.element.nodeName === 'IMG') {
icon: 'checkmark', // // 禁止对图片进行编辑
text: 'Save', // e.element.setAttribute('contenteditable', 'false'); // 禁用图片编辑
onAction: function () { // e.element.style.pointerEvents = 'none'; // 禁用点击事件
var deleteButtons = document.querySelectorAll('.tox-tinymce-inline'); // }
// if (deleteButtons) { // });
// deleteButtons.forEach(function (button) { var previousContent = ed.getContent();
// button.remove(); // 移除每个 wordButtonContainer 按钮 ed.on('blur', function () {
// }); // 失去焦点时不执行保存操作，什么都不做
// } console.log('编辑器失去焦点，但不保存内容');
var edSelection = ed.selection;
const selectedNode = edSelection.getNode(); // 获取选中的节点
let outerDiv = selectedNode;
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
}
// 如果找到的 div 节点存在
if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id');
var content;
console.log('outerDiv at line 663:', outerDiv.innerHTML);
content = outerDiv.innerHTML.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, '');
// 2. 移除所有 style 属性
content = content.replace(/\s*style="[^"]*"/g, '');
// 3. 将 <strong> 转换为 <b>，<em> 转换为 <i>
var div = document.createElement('div');
div.innerHTML = content; // 将 HTML 字符串加载到 div 中
// 替换所有 <strong> 为 <b>
var strongTags = div.getElementsByTagName('strong');
for (var i = 0; i < strongTags.length; i++) {
var bTag = document.createElement('b');
bTag.innerHTML = strongTags[i].innerHTML; // 保留内容
strongTags[i].parentNode.replaceChild(bTag, strongTags[i]);
}
// 替换所有 <em> 为 <i>
var emTags = div.getElementsByTagName('em');
for (var i = 0; i < emTags.length; i++) {
var iTag = document.createElement('i');
iTag.innerHTML = emTags[i].innerHTML; // 保留内容
emTags[i].parentNode.replaceChild(iTag, emTags[i]);
}
// 获取最终修改后的 HTML
content = div.innerHTML;
console.log('content at line 486:', content);
_this.$emit('saveContent', content, dataId);
// const dataId = outerDiv.getAttribute('main-id');
// let selectedText = edSelection.getContent({ format: 'text' });
// _this.$emit('onAddComment', {
// mainId: dataId,
// label: selectedText ? selectedText : ''
// });
}
}
});
ed.ui.registry.addButton('commentAdd', {
icon: 'comment-add',
text: 'Comment Add',
onAction: function () {
var edSelection = ed.selection;
const selectedNode = edSelection.getNode(); // 获取选中的节点
if (selectedNode) {
// 向上查找最外层的 div
let outerDiv = selectedNode;
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
}
// 如果找到的 div 节点存在
if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id');
let selectedText = edSelection.getContent({ format: 'text' });
_this.$emit('onAddComment', {
mainId: dataId,
label: selectedText ? selectedText : ''
});
}
}
}
});
ed.ui.registry.addButton('delete', {
icon: 'remove',
text: 'Delete',
onAction: function () {
_this.$emit('delete');
}
});
// 定义自定义按钮
ed.ui.registry.addButton('clearButton', {
text: 'Empty',
onAction: () => {
// 插入自定义表格到编辑器中
ed.setContent('');
}
});
ed.ui.registry.addButton('customBlue', {
text: 'Blue', // 按钮文本
onAction: function () {
// 在选中的文本周围包裹 <blue> 标签
var selectedText = ed.selection.getContent();
console.log('selectedText at line 529:', selectedText);
if (selectedText) {
var wrappedText = `<blue>${selectedText}</blue>`;
ed.selection.setContent(wrappedText);
} else {
this.$message.error('请选择要添加蓝色的文本');
}
}
});
ed.ui.registry.addButton('removeBlue', {
text: 'Blue', // 按钮文本
onAction: function () {
const range = ed.selection.getRng(); // 获取选区范围
let startNode = range.startContainer; // 获取选区起始节点
let closestBlue = null;
// 向上查找最近的 <blue> 标签
while (startNode) {
if (startNode.nodeName && startNode.nodeName.toLowerCase() === 'blue') {
closestBlue = startNode;
break;
}
startNode = startNode.parentNode;
}
if (closestBlue) {
// 如果找到最近的 <blue> 标签，移除它的外层标签，但保留内容
const parent = closestBlue.parentNode;
while (closestBlue.firstChild) {
parent.insertBefore(closestBlue.firstChild, closestBlue);
}
parent.removeChild(closestBlue);
} else {
// 未找到 <blue> 标签，仅移除选中的 <blue> 标签内容
const selectedContent = ed.selection.getContent({ format: 'html' });
// 使用正则表达式移除选区中的 <blue> 标签
const cleanedContent = selectedContent
.replace(/<blue[^>]*>/g, '') // 删除起始标签 <blue>
.replace(/<\/blue>/g, ''); // 删除结束标签 </blue>
// 更新选中的内容
ed.selection.setContent(cleanedContent);
}
}
}); });
_this.$commonJS.initEditorButton(_this, ed);
}, },
init_instance_callback: (editor) => { init_instance_callback: (editor) => {
const disabledButtons = document.querySelectorAll('.tox-tbtn--disabled');
disabledButtons.forEach((button) => {
button.classList.remove('tox-tbtn--disabled');
button.removeAttribute('aria-disabled');
});
// if (_this.value) { // if (_this.value) {
// editor.setContent(_this.value); // editor.setContent(_this.value);
// _this.$emit('loaded'); // _this.$emit('loaded');
@@ -770,21 +685,150 @@ export default {
// } // }
} }
}); });
},
initTinymceTable(editorId) {
var _this = this;
tinymce.init({
readonly: true,
selector: `#${editorId}`,
inline: true,
license_key: 'gpl', // 使用开源 GPL 许可证
content_css: false,
table_resize_bars: true,
valid_elements: '*[*]',
image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
plugins: 'forecolor code paste table image resize searchreplace',
content_style: `${tableStyle + this.wordStyle}
// 初始化当前编辑器 .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1){
// tinymce.init({ font-weight:bold !important;
// selector: `#${editorId}`, background-color:#fef0f0;
// inline: true, // 使用内联模式 color: #f56c6c;
// menubar: false, // 禁用菜单栏 fill:rgb(19, 188, 32);
// toolbar: 'undo redo | bold italic | alignleft aligncenter alignright', // 工具栏 }
// setup: (editor) => { /* 成功 */
// editor.on('blur', () => { .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1){
// console.log('内容更新:', editor.getContent()); font-weight:bold !important;
// }); background-color: rgb(43, 129, 239) !important;
// } color: #fff;
// }); fill:rgb(19, 188, 32);
}
/* 删除 */
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
background-color: red;
color: #fff;
// 保存当前编辑器实例 }
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color:#fef0f0;
color: #f56c6c; /* 设置字体颜色 */
fill:#f56c6c !important;
font-size:16px!important;
}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color: rgb(43, 129, 239) !important;
color: #fff; /* 设置字体颜色 */
fill:#fff !important;
font-size:16px!important;
}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color: red;
color: #fff; /* 设置字体颜色 */
fill:#fff !important;
font-size:16px!important;
}
`,
menubar: false,
toolbar: ['commentAdd |delete| Edit'],
end_container_on_empty_block: true,
content_css: 'default ',
setup(ed) {
// 禁止输入内容，但工具栏按钮仍然有效
ed.on('keydown', function (e) {
if (ed.mode.get() === 'readonly') {
e.preventDefault(); // 阻止任何输入
}
});
ed.on('keydown', function (e) {
// 检查是否按下回车键
if (e.keyCode === 13) {
// 13 是回车键的 keyCode
e.preventDefault(); // 阻止默认行为（换行）
}
});
// ed.on('NodeChange', function (e) {
// if (e.element.nodeName === 'IMG') {
// // 禁止对图片进行编辑
// e.element.setAttribute('contenteditable', 'false'); // 禁用图片编辑
// e.element.style.pointerEvents = 'none'; // 禁用点击事件
// }
// });
var previousContent = ed.getContent();
ed.on('blur', function () {
// 失去焦点时不执行保存操作，什么都不做
console.log('编辑器失去焦点，但不保存内容');
});
_this.$commonJS.initEditorButton(_this, ed);
},
init_instance_callback: (editor) => {
const disabledButtons = document.querySelectorAll('.tox-tbtn--disabled');
disabledButtons.forEach((button) => {
button.classList.remove('tox-tbtn--disabled');
button.removeAttribute('aria-disabled');
});
// if (_this.value) {
// editor.setContent(_this.value);
// _this.$emit('loaded');
// }
// _this.hasInit = true;
// editor.on('NodeChange Change KeyUp SetContent', () => {
// this.hasChange = true;
// this.$emit('input', editor.getContent());
// });
// const iframeDocument = editor.getDoc(); // 使用 ed.getDoc() 获取编辑器的 document
// if (iframeDocument) {
// iframeDocument.addEventListener('scroll', function () {
// if (wordButtonContainer) {
// wordButtonContainer.remove();
// wordButtonContainer = null;
// }
// if (_this.lastTag) {
// _this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
// _this.lastTag.style.border = '';
// }
// });
// }
}
});
},
initializeEditor(index, type, data) {
const editorId = `editor${index}`;
// 检查当前编辑器是否已经初始化
if (this.editors[editorId]) return;
// 销毁所有已初始化的编辑器实例
for (const key in this.editors) {
if (this.editors[key]) {
// 确保销毁所有编辑器实例
tinymce.remove(this.editors[key]);
this.editors[key] = null; // 清除引用
}
}
if (type == 'img') {
this.initTinymceImg(editorId);
} else if (type == 'table') {
this.initTinymceTable(editorId);
} else {
this.initTinymceContent(editorId);
}
this.$set(this.editors, editorId, tinymce.get(`editor${index}`)); this.$set(this.editors, editorId, tinymce.get(`editor${index}`));
}, },
deleteComment(data) { deleteComment(data) {
@@ -888,17 +932,9 @@ export default {
this.$forceUpdate(); this.$forceUpdate();
}, },
goToComment(mainId) { goToComment(mainId) {
var ed = window.tinymce.get(this.tinymceId); const section = document.querySelector(`[main-id="${mainId}"]`);
const editorDoc = ed.getDoc(); // 获取 TinyMCE 内部的 document if (section) {
console.log('Looking for element with main-id:', mainId); // 调试输出 section.scrollIntoView({ top: 100, behavior: 'smooth' });
// 在 iframe 内部的 document 中查找带有 main-id 的元素
const commentElement = editorDoc.querySelector(`[main-id="${mainId}"]`);
if (commentElement) {
commentElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
} else {
console.log('没有找到对应的批注元素', mainId); // 调试输出
} }
}, },
initTinymce() {}, initTinymce() {},
@@ -1506,112 +1542,7 @@ export default {
text-align: center !important; text-align: center !important;
font-weight: bold; font-weight: bold;
} }
.word-container b span {
font-weight: bold !important;
}
.word-container i span {
font-style: italic !important;
}
.word-container sub span {
vertical-align: sub;
}
.word-container sup span {
vertical-align: sup;
}
.word-container sub {
vertical-align: sub !important;
}
.word-container sup {
vertical-align: sup !important;
}
.word-container span[style*='vertical-align: super'] {
vertical-align: super !important;
}
.word-container span[style*='vertical-align: sub'] {
vertical-align: sub !important;
}
.word-container table {
border: 0px !important;
border-collapse: collapse; /* 去除单元格间隙 */
width: auto;
margin: 0 auto !important;
table-layout: auto; /* 自动调整列宽 */
text-align: left;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.word-container table td,
.word-container table th {
padding: 5px;
text-align: left !important;
white-space: pre-wrap; /* 保留换行符并换行 */
word-wrap: break-word; /* 长单词自动换行 */
word-break: break-word;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.word-container table tbody tr td {
text-align: left !important;
border-left: none !important;
mso-border-left-alt: none !important;
border-right: none !important;
mso-border-right-alt: none !important;
border-top: none;
mso-border-top-alt: none !important;
border-bottom: none !important;
mso-border-bottom-alt: none !important;
border: 1px dashed #dcdfe6 !important;
border-left: 1px dashed #dcdfe6 !important;
border-right: 1px dashed #dcdfe6 !important;
word-break: keep-all !important;
text-align: justify !important;
}
.word-container table tr td p {
text-align: left !important;
margin: 0;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.word-container table span {
color: #000000;
text-align: left !important;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.word-container table .color-highlight {
color: rgb(0, 130, 170) !important;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.word-container table tr:first-child td {
border-top: 1pt solid #000 !important;
mso-border-top-alt: 0.5pt solid #000 !important;
border-bottom: 1pt solid #000 !important;
mso-border-bottom-alt: 0.5pt solid #000 !important;
}
.word-container table tr:last-of-type {
border-bottom: 1pt solid #000 !important;
mso-border-bottom-alt: 0.5pt solid #000 !important;
}
.word-container table span blue {
color: rgb(0, 130, 170) !important;
}
.word-container { .word-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -1700,13 +1631,9 @@ export default {
padding: 2px 4px; padding: 2px 4px;
border-radius: 2px; border-radius: 2px;
font-size: 14px; font-size: 14px;
font-weight: 500;
}
.MaxPicture img {
width: 580px !important;
} }
/* .Resolved {
background-color: #f0f9eb;
margin-left: 10px;
border-color: #67c23a;
color: #67c23a;
font-weight: bold;
border-radius: 2px;
} */
</style> </style>

169
src/components/page/components/table/wordHtmlTypesetting.vue
View File

@@ -1,9 +1,8 @@
<template> <template>
<!-- v-show="tables.length > 0 || images.length > 0" --> <!-- v-show="tables.length > 0 || images.length > 0" -->
<div <div
style="background-color: transparent !important; margin-top: 0px !important; height: 100%; padding: 0 !important; overflow: hidden" style="background-color: transparent !important; margin-top: 0px !important; height: 100%; padding: 0 !important; overflow: hidden"
class="ManuscirptList" class="ManuscirptList"
> >
<!-- 图片缩略图区域 --> <!-- 图片缩略图区域 -->
@@ -16,20 +15,20 @@
class="el-menu-vertical-demo" class="el-menu-vertical-demo"
@select="handleSelectMenu" @select="handleSelectMenu"
> >
<el-menu-item index="1"> <!-- <el-menu-item index="1">
<i class="el-icon-message-solid" style="margin: 0 auto; color: #fc625d"></i> <i class="el-icon-message-solid" style="margin: 0 auto; color: #fc625d"></i>
<span slot="title" style="line-height: 30px">Annotations</span> <span slot="title" style="line-height: 30px">Annotations</span>
</el-menu-item> </el-menu-item> -->
<el-menu-item index="2"> <el-menu-item index="1">
<i class="el-icon-picture" color="#333639" style="margin: 0 auto"></i> <i class="el-icon-picture" color="#333639" style="margin: 0 auto"></i>
<span slot="title" style="line-height: 20px">Figures</span> <span slot="title" style="line-height: 20px">Figures</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="3"> <el-menu-item index="2">
<i class="el-icon-s-grid" color="#333639" style="margin: 0 auto"></i> <i class="el-icon-s-grid" color="#333639" style="margin: 0 auto"></i>
<span slot="title" style="line-height: 30px">Tables</span> <span slot="title" style="line-height: 30px">Tables</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="4"> <el-menu-item index="3">
<i class="el-icon-delete-solid" color="#333639" style="margin: 0 auto"></i> <i class="el-icon-delete-solid" color="#333639" style="margin: 0 auto"></i>
<span slot="title" style="line-height: 30px">Recycle Bin</span> <span slot="title" style="line-height: 30px">Recycle Bin</span>
</el-menu-item> </el-menu-item>
@@ -102,7 +101,7 @@
</li> </li>
</div> </div>
</li> --> </li> -->
<li v-show="currentMenu == 2"> <li v-show="currentMenu == 1">
<div style="" class="go-content-charts-item-box"> <div style="" class="go-content-charts-item-box">
<div class="item_box" style="width: 100%; height: auto; position: relative"> <div class="item_box" style="width: 100%; height: auto; position: relative">
<el-collapse v-if="isShowEdit"> <el-collapse v-if="isShowEdit">
@@ -130,6 +129,56 @@
<el-link> Figures {{ index + 1 }} </el-link> <el-link> Figures {{ index + 1 }} </el-link>
</p> --> </p> -->
</div> </div>
<div class="item_box" style="width: 100%; height: auto; position: relative">
<div class="list-center go-flex-center go-transition" style="width: 100%" @click="addImage">
<div class="title">
<span>Add Figure </span>
</div>
<div
class="thumbnailBox image list-img"
:style="`
border: 1px solid #ccccccb5;
width: 100%;
height: auto;
border-radius: 4px;
overflow: hidden;
position: relative;`"
>
<div style="width: 100%; height: 80px; display: flex; justify-content: center; align-items: center">
<!-- 图片内容 -->
<img src="@/assets/img/upload.png" style="width: 100px; height: 100%; object-fit: cover" />
</div>
<!-- 输入框 -->
</div>
</div>
<el-collapse v-if="isShowEdit">
<el-collapse-item name="1" style="margin-top: 4px">
<template slot="title">
<div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
<span style="color: #777">Tables {{ index + 1 }}</span>
<span v-if="isShowEdit"><i class="el-icon-edit" v-if="isEdit"></i>Comments/ Suggestions</span>
</div>
</template>
<el-input
v-if="isShowEdit"
type="textarea"
placeholder="please input content"
:readonly="!isEdit"
:rows="4"
></el-input>
</el-collapse-item>
</el-collapse>
<!-- <p
style="color: #777; margin-top: 6px"
v-else
@click="img.has_selected == 1 ? goToListComment(img.article_image_id, 'img') : ''"
>
<el-link> Figures {{ index + 1 }} </el-link>
</p> -->
</div>
<div <div
class="item_box" class="item_box"
v-for="(img, index) in imagesList" v-for="(img, index) in imagesList"
@@ -211,7 +260,6 @@
/> />
</template> </template>
<template v-else> <template v-else>
<div <div
style=" style="
width: 140px; width: 140px;
@@ -260,8 +308,66 @@
</div> </div>
</div> </div>
</li> </li>
<li v-show="currentMenu == 3"> <li v-show="currentMenu == 2">
<div style="" class="go-content-charts-item-box"> <div style="" class="go-content-charts-item-box">
<div
class="item_box"
@click="addTable"
style="width: 100%; height: auto; position: relative"
>
<div class="list-center go-flex-center go-transition" style="width: 100%">
<div class="title">
<span
>Add Table </span>
</div>
<div
class="thumbnailBox image list-img"
:style="`
border: 1px solid #ccccccb5;
width: 100%;
height: auto;
border-radius: 4px;
overflow: hidden;
position: relative;`"
>
<div style="width: 100%; height: 80px; display: flex; justify-content: center; align-items: center">
<!-- 图片内容 -->
<img src="@/assets/img/uploadTable.png" style="width: 100px; height: 100%; object-fit: cover" />
</div>
</div>
</div>
<el-collapse v-if="isShowEdit">
<el-collapse-item name="1" style="margin-top: 4px">
<template slot="title">
<div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
<span style="color: #777">Tables {{ index + 1 }}</span>
<span v-if="isShowEdit"><i class="el-icon-edit" v-if="isEdit"></i>Comments/ Suggestions</span>
</div>
</template>
<el-input
v-if="isShowEdit"
type="textarea"
placeholder="please input content"
:readonly="!isEdit"
:rows="4"
></el-input>
</el-collapse-item>
</el-collapse>
<!-- <p
style="color: #777; margin-top: 6px"
v-else
@click="img.has_selected == 1 ? goToListComment(img.article_image_id, 'img') : ''"
>
<el-link> Figures {{ index + 1 }} </el-link>
</p> -->
</div>
<div <div
class="item_box" class="item_box"
v-for="(table, index) in tablesList" v-for="(table, index) in tablesList"
@@ -374,7 +480,7 @@
</div> </div>
</div> </div>
</li> </li>
<li v-show="currentMenu == 4"> <li v-show="currentMenu == 3">
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: start"> <div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: start">
<div <div
v-for="(item, index) in content" v-for="(item, index) in content"
@@ -419,7 +525,6 @@ export default {
mediaUrl, mediaUrl,
statusList: [ statusList: [
{ title: 'ALL', type: '0' }, { title: 'ALL', type: '0' },
{ title: 'Typed', type: '1' }, { title: 'Typed', type: '1' },
@@ -467,22 +572,22 @@ export default {
}, },
// 保存评论修改 // 保存评论修改
saveComment(index,comment) { saveComment(index, comment) {
if (this.isEditComment) { if (this.isEditComment) {
this.$emit('addComment',comment) this.$emit('addComment', comment);
this.isEditing = null; // 退出编辑模式 this.isEditing = null; // 退出编辑模式
} }
}, },
onAddComment(comment) { onAddComment(comment) {
if (this.isEditComment) { if (this.isEditComment) {
this.$emit('onAddComment',comment.am_id) this.$emit('onAddComment', comment.am_id);
// this.isEditing = null; // 退出编辑模式 // this.isEditing = null; // 退出编辑模式
} }
}, },
// 删除评论 // 删除评论
deleteComment(comment, index) { deleteComment(comment, index) {
console.log('comment at line 480:', comment) console.log('comment at line 480:', comment);
if (this.isEditComment) { if (this.isEditComment) {
this.$confirm(this.$t('commonTable.removeAnnotations'), 'Prompt', { this.$confirm(this.$t('commonTable.removeAnnotations'), 'Prompt', {
confirmButtonText: 'Submit', confirmButtonText: 'Submit',
@@ -490,14 +595,13 @@ export default {
type: 'warning' type: 'warning'
}) })
.then(() => { .then(() => {
this.$api this.$api
.post('api/Preaccept/clearMainsRemark', { .post('api/Preaccept/clearMainsRemark', {
am_id: comment.am_id am_id: comment.am_id
}) })
.then((res) => { .then((res) => {
this.getCommentList() this.getCommentList();
}); });
// this.comments.splice(index, 1); // 删除评论 // this.comments.splice(index, 1); // 删除评论
}) })
.catch(() => {}); .catch(() => {});
@@ -538,7 +642,12 @@ export default {
this.comments = res.data.list; this.comments = res.data.list;
console.log('this.comments at line 537:', this.comments); console.log('this.comments at line 537:', this.comments);
}); });
},
addImage() {
this.$emit('addImage');
},
addTable() {
this.$emit('addTable');
}, },
add(type) { add(type) {
this.$emit('add', type); this.$emit('add', type);
@@ -571,7 +680,7 @@ export default {
this.tablesList = [...this.tables]; this.tablesList = [...this.tables];
} }
} else { } else {
if (this.currentMenu == 2) { if (this.currentMenu == 1) {
switch (this.currentSelectType) { switch (this.currentSelectType) {
case '0': case '0':
this.imagesList = [...this.images]; this.imagesList = [...this.images];
@@ -583,7 +692,7 @@ export default {
this.imagesList = [...this.images].filter((e) => e.has_selected == 0); this.imagesList = [...this.images].filter((e) => e.has_selected == 0);
break; break;
} }
} else if (this.currentMenu == 3) { } else if (this.currentMenu == 2) {
switch (this.currentSelectType) { switch (this.currentSelectType) {
case '0': case '0':
this.tablesList = [...this.tables]; this.tablesList = [...this.tables];
@@ -647,7 +756,7 @@ export default {
}); });
}, },
onDragStart($event, item, index, type) { onDragStart($event, item, index, type) {
console.log('type at line 192:', index);
this.$emit('onDragStart', $event, item, index, type); this.$emit('onDragStart', $event, item, index, type);
}, },
changeActiveNames(e) { changeActiveNames(e) {
@@ -693,12 +802,10 @@ export default {
list.forEach((img, index) => { list.forEach((img, index) => {
var extension = img.image.split('.').pop().toLowerCase(); var extension = img.image.split('.').pop().toLowerCase();
// if (extension === 'tif' || extension === 'jpg' || extension === 'jpeg' || extension === 'png') { // if (extension === 'tif' || extension === 'jpg' || extension === 'jpeg' || extension === 'png') {
const modalContent = `<img src="${this.mediaUrl + img.image}" alt="Image ${index}" style="width:100%;" >`; const modalContent = `<img src="${this.mediaUrl + img.image}" alt="Image ${index}" style="width:100%;" >`;
this.$commonJS.createImageModal(index, modalContent, 'img'); this.$commonJS.createImageModal(index, modalContent, 'img');
// } // }
}); });
} }
this.images = list; this.images = list;

2
src/main.js
View File

@@ -81,6 +81,8 @@ import commonContent from '@/components/page/components/table/content.vue'
Vue.component('common-content', commonContent); Vue.component('common-content', commonContent);
import commonWord from '@/components/page/components/table/word.vue' import commonWord from '@/components/page/components/table/word.vue'
Vue.component('common-comment', commonComment); Vue.component('common-comment', commonComment);
import commonEditTable from '@/components/page/components/table/editTable.vue'
Vue.component('common-edit-table', commonEditTable);
import commonComment from '@/components/page/components/table/comment.vue' import commonComment from '@/components/page/components/table/comment.vue'
Vue.component('common-word', commonWord); Vue.component('common-word', commonWord);
import commonAnnotations from '@/components/page/components/table/annotations.vue' import commonAnnotations from '@/components/page/components/table/annotations.vue'