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-03-07 16:19:56 +08:00
parent 15ec73a0fb
commit f022ec8c49
9 changed files with 2805 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,7 +73,7 @@
</common-word-html-type-setting>
</div>
</div>
<div style="width: 100%; width: calc(100% - 285px); float: right;height: calc(100% - 20px);; background-color: #e4e9ed">
<div style="width: 100%; width: calc(100% - 285px); float: right; height: calc(100% - 0px); background-color: #e4e9ed">
<!-- <div class="toolbar">
<div class="toolbar_item" @click="handleImageAdd('img')">
<img src="@/assets/img/upload.png" style="object-fit: contain" />
@@ -98,7 +98,10 @@
@editComment="editComment"
@loaded="loadedWord"
@onEdit="onEdit"
@addContent="onAddContent"
@changeSort="changeSort"
@onDelete="onDelete"
@onDeletes="onDeletes"
@refresh="onRefresh"
@onComment="onComment"
@onAddComment="onAddComment"
@@ -232,9 +235,10 @@
>
<el-form ref="editMes" :model="commentForm" label-width="115px">
<el-form-item label="Select Content:" v-if="commentForm.content">
<p style="background: #eef0f4; line-height: 20px; padding: 10px; box-sizing: border-box" v-html="commentForm.content">
</p>
<p
style="background: #eef0f4; line-height: 20px; padding: 10px; box-sizing: border-box"
v-html="commentForm.content"
></p>
</el-form-item>
<el-form-item label="Word">
<span slot="label">
@@ -293,6 +297,40 @@
</el-button>
</span>
</el-dialog>
<el-dialog
destroy-on-close
v-if="addContentVisible"
title="Add Content"
:visible.sync="addContentVisible"
width="1200px"
:close-on-click-modal="false"
>
<el-form ref="editMes" :model="addContent" label-width="115px">
<el-form-item label="Word">
<span slot="label">
<font style="color: #f56c6c; margin-right: 5px">*</font>
Content :
</span>
<common-content
:value="addContent.content"
@getContent="getContent"
v-if="addContentVisible"
ref="addContent"
style="margin-left: -115px"
></common-content>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editVisible = false"> Cancel </el-button>
<el-button type="primary" @click="handleSaveAddContent">
<!-- <i class="el-icon-finished" style="margin-right: 5px"></i> -->
Save
</el-button>
</span>
</el-dialog>
</div>
</template>
@@ -400,6 +438,8 @@ export default {
ChGtpTxt: ''
},
txtVisible: false,
addContentVisible: false,
addContent: {},
lineStyle: {},
contentStyle: {},
lineTable: [],
@@ -494,11 +534,13 @@ export default {
handleSaveContent() {
this.$refs.commonContent.getTinymceContent('content');
},
handleSaveAddContent() {
this.$refs.addContent.getTinymceContent('addcontent');
},
async getContent(type, content) {
console.log('content at line 539:', content);
if (type == 'content') {
content = content.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, '');
content = content.replace(/\s*style="[^"]*"/g, '');
@@ -522,27 +564,41 @@ export default {
// 获取最终修改后的 HTML
content = div.innerHTML;
this.saveContent(content, this.currentContent.am_id);
} else if (type == 'addcontent') {
var hasTable = /<table[\s\S]*?>[\s\S]*?<\/table>/i.test(content);
if (hasTable) {
this.$message({
type: 'warning',
message: 'Table content is not supported!'
});
return false
}
var list = this.$commonJS.cleanAndParseWordContent(content);
console.log('list at line 569:', list);
this.saveContentList(list, this.currentId);
} else if (type == 'table') {
this.saveTable(content);
} else if (type == 'comment') {
this.addComment(content);
}
},
async saveContent(content, am_id) {
},
async saveContent(content, am_id) {
var that = this;
var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : '';
if (str == '') {
this.$message({
type: 'warning',
message: 'Please enter the content!'
});
}
str= await that.$commonJS.decodeHtml(str)
var str = content.replace(/^<p>\s*(.*?)\s*<\/p>$/, '$1').trim();
// var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : '';
console.log('str at line 580:', JSON.stringify(str));
// if (str == '') {
// this.$message({
// type: 'warning',
// message: 'Please enter the content!'
// });
// }
str = await that.$commonJS.decodeHtml(str);
await that.$api
.post(that.urlList.editContent, {
am_id: am_id,
@@ -556,6 +612,28 @@ export default {
}
});
},
async saveContentList(content, am_id) {
if (content.length == 0) {
this.$message({
type: 'warning',
message: 'Please enter the content!'
});
}
await this.$api
.post('api/Preaccept/addMoreRow', {
article_id: this.articleId,
am_id: am_id,
rows: content
})
.then(async (res) => {
if (res.code == 0) {
this.addContentVisible = false;
this.getDate();
this.getCommentList();
}
});
},
deleteComment(comment, index) {
console.log('comment at line 480:', comment);
if (this.isEditComment) {
@@ -582,7 +660,7 @@ export default {
.catch(() => {});
}
},
async huifu(id) {
var that = this;
await this.$confirm(this.$t('commonTable.reContent'), 'Prompt', {
@@ -712,6 +790,56 @@ export default {
console.log('err at line 466:', err);
});
},
async onDeletes(dataId) {
await this.$confirm(this.$t('commonTable.removeContent'), 'Prompt', {
confirmButtonText: 'Submit',
cancelButtonText: 'Cancel',
type: 'warning'
})
.then(async () => {
var that = this;
await that.$api
.post('/api/Preaccept/delMoreArticleMains', {
ids: dataId
})
.then(async (res) => {
if (res.code == 0) {
setTimeout(() => {
that.getDate();
that.getCommentList();
that.$refs.commonWordHtmlTypeSetting.refresh('img');
that.$refs.commonWordHtmlTypeSetting.refresh('table');
that.$forceUpdate();
});
}
});
// this.Main_List.splice(
// this.Main_List.findIndex((item) => item.p_main_id == dataId),
// 1
// );
})
.catch((err) => {
console.log('err at line 466:', err);
});
},
async changeSort(type,id) {
var that=this
await that.$api
.post(type=='up'?'/api/Preaccept/upArticleMain':'/api/Preaccept/downArticleMain', {
am_id: id
})
.then(async (res) => {
if (res.code == 0) {
setTimeout(() => {
that.getDate();
that.getCommentList();
that.$forceUpdate();
});
}
});
},
async addCommentSetting(content) {
console.log('content at line 602:', content);
await this.$api
@@ -850,6 +978,9 @@ export default {
async onEditTitle(data) {
var url;
switch (data.value) {
case 0:
url = 'api/Preaccept/changeNormal';
break;
case 1:
url = 'api/Preaccept/changeH1';
break;
@@ -962,7 +1093,7 @@ export default {
}
},
updateChange(content, type) {
console.log('content at line 976:', content)
console.log('content at line 976:', content);
var str = this.$commonJS.transformHtmlString(content);
if (type == 'imgNote') {
this.picStyle.note = str;
@@ -1005,13 +1136,19 @@ export default {
this.lineStyle.visiTitle = 'Edit Table';
this.threeVisible = true;
} else {
data.content = data.content.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, ''); // 去除span标签
data.content = data.content.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, ''); // 去除span标签
this.currentContent = data;
this.editVisible = true;
this.currentId = dataId;
}
},
onAddContent(dataId) {
this.addContentVisible = true;
this.addContent = {};
this.currentId = dataId;
},
async onDrop(event, dataId) {
if (event.dataTransfer.getData('image')) {
const draggedImage = JSON.parse(event.dataTransfer.getData('image'));
@@ -1330,16 +1467,16 @@ export default {
},
// 确定保存图片
async savePic() {
async savePic() {
this.picStyle.picUrl;
var str=this.picStyle.note
str= await this.$commonJS.decodeHtml(str)
var str = this.picStyle.note;
str = await this.$commonJS.decodeHtml(str);
if (this.picStyle.visiTitle == 'Edit Figure') {
this.$api
.post(this.urlList.editImage, {
ami_id: this.picStyle.ami_id,
url: this.picStyle.picUrl,
note:str
note: str
})
.then((res) => {
if (res.code == 0) {
@@ -1391,16 +1528,16 @@ export default {
this.$refs.tinymceChildComment.getContent('comment');
});
},
async saveTable(content) {
async saveTable(content) {
console.log('content at line 998:', content);
var strTitle=this.lineStyle.title
strTitle= await this.$commonJS.decodeHtml(strTitle)
var strNote=this.lineStyle.note
if(strNote!=''){
strNote= await this.$commonJS.decodeHtml(strNote)
var strTitle = this.lineStyle.title;
strTitle = await this.$commonJS.decodeHtml(strTitle);
var strNote = this.lineStyle.note;
if (strNote != '') {
strNote = await this.$commonJS.decodeHtml(strNote);
}
if (content && content.table && content.table.length > 0) {
if (this.lineStyle.visiTitle == 'Edit Table') {
this.$api

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

@@ -92,6 +92,10 @@
<li>
<p>- If you want to discard all references and import a new batch of reference information, please click <el-button type="text" @click="removeAll">Delete and re-import</el-button>.</p>
</li>
<li >
<p style="display: flex;align-items: center">- Please note that if this status exists, <span > <img src="../../assets/img/repeat.png" alt="" style="width: 24px;height: 24px;margin-left: 5px;margin-right: 5px">
</span> it indicates that the current reference is duplicated .</p>
</li>
<li>
<p>- Please do not forget to recheck all references in the <span class="status ok float" ><i class="el-icon-circle-check"></i></span> status,especially abbreviated journal title.</p>
</li>
@@ -100,7 +104,12 @@
<div class="refenceCentent mt20">
<el-table :data="tableData" ref="multipleTable"
empty-text="New messages (0)" :show-header="false" :stripe="false" :highlight-current-row="false">
<el-table-column type="index" label="No." width="55" align="center"></el-table-column>
<el-table-column type="index" label="No." width="60" align="center">
<template slot-scope="scope" >
<img src="../../assets/img/repeat.png" v-if="scope.row.is_repeat==1" alt="" style="width: 24px;height: 24px;float: left;">
<span>{{scope.$index+1}}</span>
</template>
</el-table-column>
<el-table-column label="state" width="55" align="center">
<template slot-scope="scope">
<span class="status ok" v-if="scope.row.refer_type == 'journal' && scope.row.doilink != '' || scope.row.refer_type == 'book' && scope.row.isbn != '' " >

1
src/components/page/comArtHtmlCreatNew.vue
View File

@@ -200,6 +200,7 @@ export default {
},
methods: {
goEdit() {
window.open(this.$router.resolve({ path: '/GenerateCharts',
query: {

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

@@ -324,10 +324,13 @@ export default {
// _this.updateTableStyles(container); // 根据需要应用额外的样式
args.content = container.innerHTML; // 更新处理后的内容
});
}else{
}
} else {
if (_this.isAutomaticUpdate) {
args.content = _this.$commonJS.transformHtmlString(args.content); // 更新处理后的内容
}
console.log('粘贴的内容不包含表格');
}

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

File diff suppressed because it is too large Load Diff

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

@@ -1,5 +1,9 @@
<template>
<div class="tinymce-container editor-container word-container" :style="!isPreview ? 'padding:10px 20px 10px 10px;' : 'padding:0px;'" ref="scrollDiv">
<div
class="tinymce-container editor-container word-container"
:style="!isPreview ? 'padding:10px 20px 10px 30px;' : 'padding:0px;'"
ref="scrollDiv"
>
<div
style="
box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
@@ -9,10 +13,101 @@
"
>
<div
class=""
:style="isPreview ? 'width: 100%;padding: 20px;' : 'width: calc(100% - 300px);padding: 20px 20px 20px 34px;'"
v-if="!isPreview"
style="
border-bottom: 2px solid #c7cdcf;
background-color: #fff;
position: fixed;
top: 60px;
left: 285px;
z-index: 10;
right: 330px;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
overflow: hidden;
width: calc(100% - 285px - 330px);
"
>
<div style="width: auto; display: flex; align-items: center">
<!-- <el-checkbox v-model="checked" style="border-right: 1px solid #d8d8d8; padding: 0 20px 0 0;z-index: 10;" size="medium">Select All</el-checkbox> -->
<div
style="border-right: 1px solid #d8d8d8; padding: 0 20px"
:style="currentData.type == 0 ? 'Opacity:1' : 'Opacity:0.6'"
>
<ul class="HTitleBox">
<li
:style="currentData.is_h1 == 1 ? 'color:#4d99f1' : 'color:#333'"
@click="currentData.is_h1 == 0 ? changeTitle(1) : changeTitle(0)"
>
H1
</li>
<li
:style="currentData.is_h2 == 1 ? 'color:#4d99f1' : 'color:#333'"
@click="currentData.is_h2 == 0 ? changeTitle(2) : changeTitle(0)"
>
H2
</li>
<li
:style="currentData.is_h3 == 1 ? 'color:#4d99f1' : 'color:#333'"
@click="currentData.is_h3 == 0 ? changeTitle(3) : changeTitle(0)"
>
H3
</li>
</ul>
</div>
<div style="border-right: 1px solid #d8d8d8; padding: 0 20px">
<ul class="HTitleBox" style="border: none">
<li @click="addContent" style="font-size: 14px; padding: 0">
<i class="el-icon-document"> </i>
Batch Add content
</li>
</ul>
</div>
</div>
<div style="border-left: 1px solid #d8d8d8; padding: 0 20px; float: right">
<ul class="operateBox">
<li
v-if="isEditComment"
style="height: 40px; background-color: #fff !important; color: #f56c6c; border: 1px solid #f56c6c"
@mousedown="cacheSelection"
@click="handleSelection"
>
<i class="el-icon-document-add" style="margin-top: 2px"></i>
Comment
</li>
<li
style="height: 40px; background-color: #cbccd1 !important; color: #333; border: 1px solid #cbccd1"
@click="onAddRow"
>
<i class="el-icon-document-add" style="margin-top: 2px"></i>
Row
</li>
<li style="height: 40px" @click="onEdit">
<i class="el-icon-edit" style="margin-top: 2px"></i>
Edit
</li>
<li style="height: 40px; background-color: red !important" @click="onDelete">
<i class="el-icon-delete" style="margin-top: 2px"></i>
Delete
</li>
</ul>
</div>
</div>
<div
class=""
:style="isPreview ? 'width: 100%;padding: 20px;' : 'width: calc(100% - 300px);padding: 60px 20px 20px 34px;'"
style="
box-sizing: border-box;
width: calc(100% - 300px);
float: left;
@@ -22,6 +117,13 @@
"
>
<template v-for="(item, index) in wordList">
<el-checkbox
@change="updateUniqueIds"
v-if="!isPreview"
v-model="item.checked"
style="position: absolute; left: -20px; width: 8px; height: 8px; margin-top: 8px"
></el-checkbox>
<span class="isRemark" :remark-main-id="item.am_id" v-if="item.checks && item.checks.length > 0 && !isPreview">
><img
class="isRemark"
@@ -32,98 +134,140 @@
<span>{{ item.am_id }}</span>
</span>
<div :class="!isPreview?(item.is_h1?'isTitleH1':item.is_h2?'isTitleH2':item.is_h3?'isTitleH3':''):''" style="line-height: 24px;">
<template v-if="!isPreview"> <span class="Htitle Htitle1" v-if="item.is_h1==1">H1</span>
<span class="Htitle Htitle2" v-else-if="item.is_h2==1">H2</span>
<span class="Htitle Htitle3" v-else-if="item.is_h3==1">H3</span></template>
<div
:key="item.am_id"
id="drop-target"
:class="highlightImg(item.ami_id, item.checks ? item.checks : [])"
:comment-Id="highlightImgCommentId(item.ami_id, item.checks ? item.checks : [])"
@dragover="handleDragOver"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
class="MaxPicture pMain myeditabledivImage drop-target"
@click="initializeEditor(item.am_id, 'img', item)"
v-if="item.type == 1"
:main-state="item.state"
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
:contenteditable="!readonly && !isPreview"
:data-id="item.ami_id"
:type="item.type"
:main-id="item.am_id"
:id="'editor' + item.am_id"
<div
:class="!isPreview ? (item.is_h1 ? 'isTitleH1' : item.is_h2 ? 'isTitleH2' : item.is_h3 ? 'isTitleH3' : '') : ''"
style="line-height: 24px"
>
<template v-if="!isPreview">
<span class="Htitle Htitle1" v-if="item.is_h1 == 1">H1</span>
<span class="Htitle Htitle2" v-else-if="item.is_h2 == 1">H2</span>
<span class="Htitle Htitle3" v-else-if="item.is_h3 == 1">H3</span></template
>
<img :src="`${mediaUrl + item.image.url}`" />
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="item.image.note ? highlightText(item.image.note, item.checks ? item.checks : []) : ''"></span>
</font>
</div>
<div
id="drop-target"
@dragover="handleDragOver"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
@click="initializeEditor(item.am_id, 'table', item)"
class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
v-else-if="item.type == 2"
:main-state="item.state"
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
:contenteditable="!readonly && !isPreview"
:data-id="item.amt_id"
:type="item.type"
:id="'editor' + item.am_id"
:main-id="item.am_id"
>
<!-- 标题部分 -->
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`" style="text-align: center;">
<span v-html="highlightText(item.table.title || '', item.checks ? item.checks : [])"></span>
</font>
<div :class="currentId == item.am_id ? 'glowing-border' : ''" style="position: relative">
<div
v-if="currentId == item.am_id"
style="background-color: #fff; z-index: 100; position: absolute; right: 0px; top: -40px"
>
<el-button
v-if="currentId == item.am_id"
style="background-color: #006699d1; font-weight: bold; color: #fff; font-size: 16px !important"
:style="index==0?' opacity: 0.2;':' opacity: 1;'"
size="mini"
plain
:disabled="index != 0 ? false : true"
@click="changeSort('up')"
>↑</el-button
>
<el-button
v-if="currentId == item.am_id"
style="
background-color: #006699d1;
font-weight: bold;
color: #fff;
font-size: 16px !important;
"
size="mini"
:style="index == wordList.length - 1 ?' opacity: 0.2;':' opacity: 1;'"
plain
:disabled="index == wordList.length - 1 ? true : false"
@click="changeSort('down')"
>↓</el-button
>
</div>
<!-- 表格部分 -->
<table border="1" style="width: 100%; border-collapse: collapse; text-align: center">
<tr v-for="(row, i) in JSON.parse(item.table.table_data)" :key="i" :class="{ 'table-header-row': isHeaderRow(i,item.table.table_data) }">
<td
v-for="(cell, i1) in row"
:key="i1"
:colspan="`${cell.colspan || 1}`"
:rowspan="`${cell.rowspan || 1}`"
<div
:key="item.am_id"
id="drop-target"
:class="highlightImg(item.ami_id, item.checks ? item.checks : [])"
:comment-Id="highlightImgCommentId(item.ami_id, item.checks ? item.checks : [])"
@dragover="handleDragOver"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
class="MaxPicture pMain myeditabledivImage drop-target"
@click="initializeEditor(item.am_id, 'img', item, index)"
v-if="item.type == 1"
:main-state="item.state"
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
:data-id="item.ami_id"
:type="item.type"
:main-id="item.am_id"
:id="'editor' + item.am_id"
>
<img :src="`${mediaUrl + item.image.url}`" />
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span
v-html="item.image.note ? highlightText(item.image.note, item.checks ? item.checks : []) : ''"
></span>
</font>
</div>
<div
id="drop-target"
@dragover="handleDragOver"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
@click="initializeEditor(item.am_id, 'table', item, index)"
class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
v-else-if="item.type == 2"
:main-state="item.state"
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
:data-id="item.amt_id"
:type="item.type"
:id="'editor' + item.am_id"
:main-id="item.am_id"
>
<!-- 标题部分 -->
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`" style="text-align: center">
<span v-html="highlightText(item.table.title || '', item.checks ? item.checks : [])"></span>
</font>
<!-- 表格部分 -->
<table border="1" style="width: 100%; border-collapse: collapse; text-align: center">
<tr
v-for="(row, i) in JSON.parse(item.table.table_data)"
:key="i"
:class="{ 'table-header-row': isHeaderRow(i, item.table.table_data) }"
>
<span v-html="highlightText(cell.text || '', item.checks ? item.checks : [])"></span>
</td>
</tr>
</table>
<td
v-for="(cell, i1) in row"
:key="i1"
:colspan="`${cell.colspan || 1}`"
:rowspan="`${cell.rowspan || 1}`"
>
<span v-html="highlightText(cell.text || '', item.checks ? item.checks : [])"></span>
</td>
</tr>
</table>
<!-- 备注部分 -->
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="highlightText(item.table.note || '', item.checks ? item.checks : [])"></span>
</font>
<!-- 备注部分 -->
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="highlightText(item.table.note || '', item.checks ? item.checks : [])"></span>
</font>
</div>
<div
v-else
id="drop-target"
@dragover="handleDragOver"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
@click="initializeEditor(item.am_id, 'text', item, index)"
class="pMain myeditablediv drop-target"
@blur="clearEditor(item.am_id)"
:main-state="item.state"
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
:data-id="item.am_id"
:main-id="item.am_id"
:type="item.type"
:id="'editor' + item.am_id"
v-html="highlightText(item.content, item.checks ? item.checks : [], item.type)"
></div>
</div>
<div
v-else
id="drop-target"
@dragover="handleDragOver"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
@click="initializeEditor(item.am_id)"
class="pMain myeditablediv drop-target"
@blur="clearEditor(item.am_id)"
:main-state="item.state"
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
:contenteditable="!readonly && !isPreview"
:data-id="item.am_id"
:main-id="item.am_id"
:type="item.type"
:id="'editor' + item.am_id"
v-html="highlightText(item.content, item.checks ? item.checks : [], item.type)"
></div>
</div>
</template>
</div>
@@ -146,7 +290,7 @@
v-for="(item, index) in commentList"
class="comment-item annotation"
:data-target="`main-${item.am_id}`"
style="width: 100%; margin:0 0 10px; background: #fafafa; box-sizing: border-box"
style="width: 100%; margin: 0 0 10px; background: #fafafa; box-sizing: border-box"
>
<div>
<div style="display: flex; align-items: center; justify-content: space-between; background-color: #f3d5d5c2">
@@ -162,21 +306,16 @@
</el-link>
</div>
<div
style="
padding:6px 6px;
box-sizing: border-box;
border-bottom: 1px solid rgba(243, 213, 213);
"
style="padding: 6px 6px; box-sizing: border-box; border-bottom: 1px solid rgba(243, 213, 213)"
:style="commont.estate == 1 ? 'background:#13bc200f;' : ''"
v-for="(commont, commentIndex) in item.comment"
@click="highlightLeftComment(commont.amc_id, item.am_id)"
>
<div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center;line-height: 20px;">
<div style="display: flex; align-items: center; line-height: 20px">
<span
:style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
style="color: #e61a12; font-weight: bold;font-size: 12px;"
style="color: #e61a12; font-weight: bold; font-size: 12px"
>{{ commentIndex + 1 }}、</span
>
<span
@@ -195,7 +334,7 @@
$t('commonTable.Resolved')
}}</span>
</div>
<div style="display: flex; align-items: center; justify-content: center;line-height: 20px;">
<div style="display: flex; align-items: center; justify-content: center; line-height: 20px">
<span style="color: #b8b7b7; font-size: 12px">{{ getTime(commont.ctime) }}</span
><span
style="color: #aaa; font-size: 13px; margin: 0 4px"
@@ -302,7 +441,10 @@
"
>
<i class="el-icon-user-solid" style="color: #333; padding: 0 4px"></i>
<div v-html="commont.author_remark" style="width: calc(100% - 20px); font-size: 13px;line-height: 14px;"></div>
<div
v-html="commont.author_remark"
style="width: calc(100% - 20px); font-size: 13px; line-height: 14px"
></div>
</div>
<i
class="el-icon-edit"
@@ -510,6 +652,14 @@ export default {
},
data() {
return {
cachedHtml: '', // 缓存选中的 HTML
cachedText: '', // 缓存选中的纯文本
cachedMainId: null, // 选中的 main-id
cachedType: null, // 选中的 type
currentId: null,
currentIndex: null,
checked: false,
currentData: {},
imagePath: require('@/assets/img/carriageReturn.png'), // 或者你可以设置其他路径
scrollPosition: 0,
wordList: [],
@@ -556,6 +706,7 @@ export default {
}
],
uploadReset: false,
uniqueIds: [],
dialogVisible: false,
form: {
name: '',
@@ -589,6 +740,11 @@ export default {
deep: true // 启用深度监听
}
},
computed: {
selectedIds() {
return this.wordList.filter((item) => item.checked).map((item) => item.am_id);
}
},
updated() {
// 恢复子组件的滚动位置
// this.$refs.scrollDiv.scrollTop = this.scrollPosition;
@@ -623,8 +779,6 @@ export default {
this.editors = {};
},
beforeDestroy() {
for (const key in this.editors) {
if (this.editors[key]) {
// 确保销毁所有编辑器实例
@@ -639,6 +793,143 @@ export default {
this.editors = {};
},
methods: {
changeSort(type) {
console.log('type at line 782:', type);
if (this.currentId) {
this.$emit('changeSort',type, this.currentId);
}
},
addContent() {
if (this.currentId) {
this.$emit('addContent', this.currentId);
} else {
this.$message.warning('Please select content');
}
},
cacheSelection() {
const selection = window.getSelection();
if (!selection.rangeCount) {
this.clearCache();
return;
}
const range = selection.getRangeAt(0);
let selectedNode = range.commonAncestorContainer;
// **向上查找包含 main-id 的最近 div**
let outerDiv = selectedNode;
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
}
if (!outerDiv) {
this.clearCache();
return;
}
// **缓存 main-id 和 type**
this.cachedMainId = outerDiv.getAttribute('main-id');
this.cachedType = outerDiv.getAttribute('type');
// **创建临时 div 存放选中的 HTML**
const tempDiv = document.createElement('div');
tempDiv.appendChild(range.cloneContents());
// **检查是否包含 <img> 标签**
if (tempDiv.querySelector('img')) {
this.clearCache();
this.$message.error(this.$t('commonTable.selectComment'));
return;
}
// **获取纯文本**
let selectedText = tempDiv.innerText.trim().replace(/\s+/g, ' ');
// **允许保留的 HTML 标签**
const allowedTags = ['sup', 'sub', 'strong', 'em', 'b', 'i', 'blue', 'tr', 'td'];
function preserveTags(node) {
if (node.nodeType === 3) return node.nodeValue; // 文本节点
if (node.nodeType === 1 && allowedTags.includes(node.nodeName.toLowerCase())) {
return node.outerHTML; // 仅保留允许的标签
}
return '';
}
let preservedContent = Array.from(tempDiv.childNodes).map(preserveTags).join('');
// **检查是否已有批注**
if (tempDiv.querySelector('.positionRemarkIndex')) {
this.clearCache();
this.$message.error(this.$t('commonTable.alreadyCommented'));
return;
}
// **缓存选区内容**
this.cachedHtml = preservedContent;
this.cachedText = selectedText;
},
// **点击“添加批注”按钮**
handleSelection() {
if (!this.cachedText) {
this.$message.error(this.$t('commonTable.selectComment'));
return;
}
// **发送批注**
this.$emit('onAddComment', {
mainId: this.cachedMainId,
label: this.cachedHtml
});
// **清空缓存**
this.clearCache();
},
// **清空缓存**
clearCache() {
this.cachedHtml = '';
this.cachedText = '';
this.cachedMainId = null;
this.cachedType = null;
},
updateUniqueIds() {
this.currentId = null;
this.currentData = {};
// this.uniqueIds = [...new Set(this.wordList.filter((item) => item.checked).map((item) => item.am_id))];
console.log('this.uniqueIds at line 839:', this.selectedIds);
this.$forceUpdate();
},
onEdit() {
this.currentData = this.currentData;
this.$emit('onEdit', this.currentId);
},
onAddRow() {
this.currentData = this.currentData;
this.$emit('onAddRow', this.currentId);
},
onDelete() {
console.log('this.uniqueIds.length at line 866:', this.selectedIds.length);
if (this.selectedIds.length > 0) {
this.$emit('onDeletes', this.selectedIds.toString());
this.$forceUpdate();
}
if (this.currentId) {
this.$emit('onDelete', this.currentId);
}
},
changeTitle(value) {
if (this.currentData.type == 0) {
this.$emit('onEditTitle', {
mainId: this.currentId,
value: value
});
}
},
// 右侧批注列点击时，触发高亮左侧对应的批注
// 右侧批注列点击时，触发高亮左侧对应的批注
highlightLeftComment(commentId) {
@@ -689,16 +980,14 @@ export default {
if (outerDiv) {
}
},
// 判断是否是表头行
isHeaderRow(rowIndex,table) {
var table=JSON.parse(table)
var head=table[0]
return rowIndex < head[0].rowspan; // 假设前两行是表头
},
// 判断是否是表头行
isHeaderRow(rowIndex, table) {
var table = JSON.parse(table);
var head = table[0];
return rowIndex < head[0].rowspan; // 假设前两行是表头
},
handleDragLeave(e) {
e.preventDefault();
e.stopPropagation();
@@ -959,28 +1248,38 @@ export default {
}
});
},
initializeEditor(index, type, data) {
initializeEditor(id, type, data, index) {
this.clearHighlight();
this.selectedIds = [];
this.wordList.forEach((item, index) => {
item.checked = false;
});
if (!this.isPreview) {
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; // 清除引用
}
}
this.currentId = id;
this.currentIndex = index;
this.currentData = data;
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}`));
// 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}`));
}
},
deleteComment(data) {
@@ -1025,6 +1324,8 @@ export default {
},
divOnScroll() {
if (!this.isPreview) {
this.currentId = null;
this.currentData = {};
// const scrollTop = scrollDiv.scrollTop; // 获取垂直滚动距离
this.scrollPosition = this.$refs.scrollDiv.scrollTop;
localStorage.setItem('scrollPosition', this.scrollPosition);
@@ -1071,16 +1372,11 @@ export default {
}
},
highlightImgCommentId(imgId, annotations) {
const emptyContentIndexes = annotations
const emptyContentIndexes = annotations
.map((annotation, index) => (annotation.content === '' ? annotation.amc_id : -1)) // 找到内容为空的批注项的索引，其他项返回 -1
.filter((index) => index !== -1) // 过滤掉值为 -1 的项
.join(','); // 以逗号连接索引
return emptyContentIndexes;
return emptyContentIndexes;
},
escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -1118,7 +1414,7 @@ export default {
style="background-color: ${randomColor};
position: relative;
display: inline-block;
white-space: nowrap;
// white-space: nowrap;
overflow-wrap: anywhere;
border-left: 2px solid #cd5454;
border-right: 2px solid #cd5454;"
@@ -1134,7 +1430,6 @@ export default {
});
});
if (type == 0 && tempText == '') {
tempText =
tempText +
`<img contenteditable="${false}" src="${this.imagePath}" alt="" style="width: 20px;height: 20px;opacity:0.6;">`;
@@ -1851,6 +2146,7 @@ export default {
.pMain {
margin-top: 5px;
margin-bottom: 5px;
min-height: 30px;
}
::v-deep .tox.tox-tinymce-inline {
z-index: 9999 !important;
@@ -1955,18 +2251,17 @@ export default {
border: 2px solid #cd5454; /* 高亮边框 */
box-shadow: 0 0 10px #f77b7b; /* 高亮阴影 */
}
.isTitleH1{
position: relative;
/* border: 1px solid #94c2f7; */
.isTitleH1 {
position: relative;
/* border: 1px solid #94c2f7; */
background-color: #dbebfc54;
}
.Htitle{
color: #4d99f1;
background-color: #dbebfca6;
/* border: 1px solid #4d99f1; */
border-radius: 50%;
.Htitle {
color: #4d99f1;
background-color: #dbebfca6;
/* border: 1px solid #4d99f1; */
border-radius: 50%;
font-weight: bold;
position: absolute;
@@ -1976,25 +2271,85 @@ export default {
left: -30px;
top: 0px;
text-align: center;
}
.Htitle1{
.Htitle1 {
width: 24px;
height: 24px;
/* font-size: 14px; */
}
.Htitle2{ width: 24px;
.Htitle2 {
width: 24px;
height: 24px;
/* font-size: 16px; */
}
.Htitle3{ width: 24px;
.Htitle3 {
width: 24px;
height: 24px;
/* font-size: 12px; */
}
.isTitleH2{position: relative;
.isTitleH2 {
position: relative;
background-color: #dbebfc54;
}
.isTitleH3{position: relative;
.isTitleH3 {
position: relative;
background-color: #dbebfc54;
}
.glowing-border {
border: 3px solid #006699d1;
border-radius: 5px;
padding: 4px;
animation: glow 1.5s infinite alternate;
}
@keyframes glow {
0% {
box-shadow: 0 0 5px #006699d1;
}
50% {
box-shadow: 0 0 20px #006699d1;
}
100% {
box-shadow: 0 0 5px #006699d1;
}
}
.HTitleBox {
height: 100%;
border: 1px solid #c5c5c5;
width: auto;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 6px;
}
.HTitleBox li {
list-style: none;
padding: 0 10px;
color: #333;
font-weight: bold;
font-size: 20px;
}
.operateBox {
width: auto;
display: flex;
}
.operateBox li {
width: 55px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
list-style: none;
padding: 2px 10px;
margin: 0 10px;
color: #8a8a8b;
/* font-weight: bold; */
font-size: 16px;
background-color: rgb(43, 129, 239) !important;
color: #fff;
border-radius: 4px;
}
::v-deep .el-checkbox__inner {
width: 18px;
height: 18px;
}
</style>

1
src/components/page/editPublicRefRdit.vue
View File

@@ -78,6 +78,7 @@
<el-table-column type="index" label="No." width="55" align="center">
<template slot-scope="scope">
<i v-if="scope.row.is_change == 1" class="itemChanged"></i>
<img src="../../assets/img/repeat.png" v-if="scope.row.is_repeat==1" alt="" style="width: 24px;height: 24px;float: left;">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>