1929 lines
73 KiB
Vue
1929 lines
73 KiB
Vue
<template>
|
||
<div style="height: 100%">
|
||
<div
|
||
class="container"
|
||
style="
|
||
height: 100%;
|
||
min-width: calc(1000px);
|
||
width: calc(100%);
|
||
background-color: #fafafa;
|
||
padding: 0px 0 0 0;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
"
|
||
>
|
||
<div
|
||
class="right-side"
|
||
style="
|
||
width: 285px;
|
||
float: left;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
|
||
border-radius: 4px;
|
||
overflow-y: auto;
|
||
"
|
||
>
|
||
<!-- <p style="padding: 10px 10px; box-sizing: border-box; font-weight: bold"> -->
|
||
|
||
<!-- <b class="MaxBtn" style="right: 80px; top: 5px; padding: 0"><common-drag-word @tables="getTables"></common-drag-word></b> -->
|
||
<!-- <b class="MaxBtn" @click="MTxtPic()" style="background-color: #13bc20; right: 40px; top: 5px">
|
||
<svg
|
||
t="1684978324047"
|
||
class="icon"
|
||
viewBox="0 0 1024 1024"
|
||
version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
p-id="1967"
|
||
width="15"
|
||
height="15"
|
||
>
|
||
<path
|
||
d="M512 46.208a42.666667 42.666667 0 0 1 4.992 85.077333L512 131.541333H174.208a42.666667 42.666667 0 0 0-42.368 37.717334l-0.298667 4.949333v487.850667L307.2 501.12a88.874667 88.874667 0 0 1 112.042667-6.570667l5.845333 4.608 150.442667 128.896 101.973333-101.888a88.874667 88.874667 0 0 1 110.122667-12.373333l6.058666 4.138667 104.832 78.592V512a42.666667 42.666667 0 0 1 85.077334-4.992l0.298666 4.992v342.698667a128 128 0 0 1-120.490666 127.786666l-7.509334 0.213334H174.208a128 128 0 0 1-127.786667-120.490667l-0.213333-7.509333V174.208a128 128 0 0 1 120.490667-127.786667l7.509333-0.213333H512zM366.378667 563.2l-1.536 0.853333-233.301334 213.76v76.885334a42.666667 42.666667 0 0 0 37.717334 42.368l4.949333 0.298666H855.893333a42.666667 42.666667 0 0 0 42.368-37.717333l0.298667-4.949333v-151.808l-3.285333-2.090667-152.789334-114.602667a3.541333 3.541333 0 0 0-3.2-0.554666l-1.450666 0.853333-97.28 97.28 76.970666 66.048a42.666667 42.666667 0 0 1-51.2 68.010667l-4.309333-3.2-292.437333-250.666667a3.541333 3.541333 0 0 0-3.2-0.768z m415.829333-516.992a42.666667 42.666667 0 0 1 42.410667 37.717333l0.256 4.949334v96h96a42.666667 42.666667 0 0 1 4.992 85.077333l-4.992 0.256h-96v96a42.666667 42.666667 0 0 1-85.034667 4.992l-0.298667-4.992v-96h-96a42.666667 42.666667 0 0 1-4.949333-85.034667l4.949333-0.298666h96v-96a42.666667 42.666667 0 0 1 42.666667-42.666667z"
|
||
fill="#ffffff"
|
||
p-id="1968"
|
||
></path>
|
||
</svg> </b
|
||
><b class="MaxBtn" @click="MTxtTable()" style="background-color: #e07404; right: 0px; top: 5px">
|
||
<i class="el-icon-document-add"></i>
|
||
</b> -->
|
||
<!-- </p> -->
|
||
|
||
<div class="unfetteredBox" style="height: 100%">
|
||
<common-word-html-type-setting
|
||
:urlList="{
|
||
img: 'api/Preaccept/getMainImages',
|
||
table: 'api/Preaccept/getMainTables'
|
||
}"
|
||
:articleId="articleId"
|
||
:content="ManuscirptContent"
|
||
ref="commonWordHtmlTypeSetting"
|
||
@onDragStart="onDragStart"
|
||
@huifu="huifu"
|
||
@onAddComment="onAddComment"
|
||
@addImage="handleImageAdd"
|
||
@addTable="handleTableAdd"
|
||
@addComment="addCommentSetting"
|
||
@goToComment="goToComment"
|
||
@edit="handleImageEdit"
|
||
@goToListComment="goToListComment"
|
||
style="width: 100%; height: 100%; padding: 0 0px; box-sizing: border-box; background-color: #fff"
|
||
>
|
||
</common-word-html-type-setting>
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%; width: calc(100% - 285px); float: right; height: calc(100%); background-color: #e4e9ed">
|
||
<!-- <div class="toolbar">
|
||
<div class="toolbar_item" @click="handleImageAdd('img')">
|
||
<img src="@/assets/img/upload.png" style="object-fit: contain" />
|
||
<span>Add Figure </span>
|
||
</div>
|
||
<div class="toolbar_item" @click="handleTableAdd('table')">
|
||
<img src="@/assets/img/uploadTable.png" style="object-fit: contain" />
|
||
<span>Add Table </span>
|
||
</div>
|
||
</div> -->
|
||
|
||
<common-word
|
||
:key="new Date().getTime()"
|
||
v-if="htmlContent"
|
||
ref="commonWord"
|
||
:value="htmlContent"
|
||
:contentList="Main_List"
|
||
:comments="comments"
|
||
:wordStyle="wordStyle"
|
||
@onDrop="onDrop"
|
||
@saveContent="saveContent"
|
||
@editComment="editComment"
|
||
@loaded="loadedWord"
|
||
@onEdit="onEdit"
|
||
@onDelete="onDelete"
|
||
@refresh="onRefresh"
|
||
@onComment="onComment"
|
||
@onAddComment="onAddComment"
|
||
@solveComment="solveComment"
|
||
@cancelSolveComment="cancelSolveComment"
|
||
@replyComment="replyComment"
|
||
@deleteComment="deleteComment"
|
||
@onEditTitle="onEditTitle"
|
||
@onAddRow="onAddRow"
|
||
@changeComment="changeComment"
|
||
style="width: calc(100%); height: calc(100%)"
|
||
:style="`100%`"
|
||
>
|
||
<template slot="comment">
|
||
<div style="" class="commentList annotations"></div>
|
||
</template>
|
||
</common-word>
|
||
</div>
|
||
</div>
|
||
|
||
<!--添加/修改图片 -->
|
||
<el-dialog :title="picStyle.visiTitle" :visible.sync="pictVisible" width="800px" :close-on-click-modal="false">
|
||
<el-form ref="editMes" :model="picStyle" label-width="150px">
|
||
<el-form-item>
|
||
<span slot="label">
|
||
<font style="color: #f56c6c; margin-right: 5px">*</font>
|
||
Figure :
|
||
</span>
|
||
<el-upload
|
||
:data="{ article_id: articleId }"
|
||
class="avatar-uploader"
|
||
:action="baseUrl + 'api/Preaccept/up_img_mainImage'"
|
||
:show-file-list="false"
|
||
name="mainImage"
|
||
accept=".jpg,.jpeg,.png,.tif"
|
||
:on-success="handleAvatarSuccess"
|
||
:on-error="handleAvatarError"
|
||
:before-upload="beforeAvatarUpload"
|
||
>
|
||
<img v-if="picStyle && picStyle.picUrl" :src="mediaUrl + picStyle.picUrl" class="avatar" />
|
||
<i class="el-icon-plus avatar-uploader-icon" v-else></i>
|
||
</el-upload>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="Figure Describe :">
|
||
<common-content
|
||
:isAutomaticUpdate="true"
|
||
:value="picStyle.note"
|
||
@getContent="getContent"
|
||
v-if="pictVisible"
|
||
@updateChange="(res) => updateChange(res, 'imgNote')"
|
||
:height="120"
|
||
ref="tinymceChildImgNote"
|
||
style="margin-left: -115px"
|
||
></common-content>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="pictVisible = false"> Cancel </el-button>
|
||
<el-button type="primary" @click="savePic">
|
||
<i class="el-icon-finished" style="margin-right: 5px"></i>
|
||
Save Figure
|
||
</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- 添加表格 -->
|
||
<el-dialog
|
||
class="editTableDialog"
|
||
destroy-on-close
|
||
v-if="threeVisible"
|
||
:title="lineStyle.visiTitle"
|
||
:visible.sync="threeVisible"
|
||
width="1200px"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-form ref="editMes" :model="lineStyle" label-width="115px">
|
||
<el-form-item label="Table Title :">
|
||
<common-content
|
||
:id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`"
|
||
:isAutomaticUpdate="true"
|
||
:value="lineStyle.title"
|
||
@getContent="getContent"
|
||
v-if="threeVisible"
|
||
@updateChange="(res) => updateChange(res, 'title')"
|
||
:height="120"
|
||
ref="tinymceChildTitle"
|
||
style="margin-left: -115px"
|
||
></common-content>
|
||
</el-form-item>
|
||
<el-form-item label="Word">
|
||
<span slot="label">
|
||
<font style="color: #f56c6c; margin-right: 5px">*</font>
|
||
Table :
|
||
</span>
|
||
<common-table
|
||
@getContent="getContent"
|
||
v-if="threeVisible"
|
||
ref="commonTable"
|
||
style="margin-left: -115px"
|
||
:lineStyle="lineStyle"
|
||
></common-table>
|
||
</el-form-item>
|
||
<el-form-item label="Bottom Title :">
|
||
<common-content
|
||
:id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-note`"
|
||
:isAutomaticUpdate="true"
|
||
:value="lineStyle.note"
|
||
@getContent="getContent"
|
||
v-if="threeVisible"
|
||
@updateChange="(res) => updateChange(res, 'note')"
|
||
:height="120"
|
||
ref="tinymceChildNote"
|
||
style="margin-left: -115px"
|
||
></common-content>
|
||
</el-form-item>
|
||
</el-form>
|
||
<p style="margin: 20px 0; text-align: right">
|
||
<el-button @click="threeVisible = false"> Cancel </el-button>
|
||
<el-button type="primary" plain @click="handleSaveTable"> save Table </el-button>
|
||
</p>
|
||
</el-dialog>
|
||
<el-dialog
|
||
destroy-on-close
|
||
v-if="commentVisible"
|
||
title="Comment"
|
||
:visible.sync="commentVisible"
|
||
width="600px"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<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>
|
||
</el-form-item>
|
||
<el-form-item label="Word">
|
||
<span slot="label">
|
||
<font style="color: #f56c6c; margin-right: 5px">*</font>
|
||
Comment :
|
||
</span>
|
||
|
||
<tinymce
|
||
ref="tinymceChildComment"
|
||
@getContent="getContent"
|
||
:value="commentForm.remark"
|
||
class="paste-area text-container"
|
||
toolbar="bold italic subscript superscript clearButton "
|
||
style=""
|
||
></tinymce>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="commentVisible = false"> Cancel </el-button>
|
||
<el-button type="primary" @click="handleSaveComment">
|
||
<!-- <i class="el-icon-finished" style="margin-right: 5px"></i> -->
|
||
Save Comment
|
||
</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
destroy-on-close
|
||
v-if="editVisible"
|
||
title="Edit Content"
|
||
:visible.sync="editVisible"
|
||
width="1200px"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-form ref="editMes" :model="contentStyle" label-width="115px">
|
||
<el-form-item label="Word">
|
||
<span slot="label">
|
||
<font style="color: #f56c6c; margin-right: 5px">*</font>
|
||
Content :
|
||
</span>
|
||
<common-content
|
||
:value="currentContent.content"
|
||
@getContent="getContent"
|
||
v-if="editVisible"
|
||
ref="commonContent"
|
||
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="handleSaveContent">
|
||
<!-- <i class="el-icon-finished" style="margin-right: 5px"></i> -->
|
||
Save
|
||
</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import bus from '@/components/common/bus';
|
||
import { del, isShallow } from 'vue';
|
||
import Tiff from 'tiff.js';
|
||
import { mediaUrl } from '@/common/js/commonJS.js'; // 引入通用逻辑
|
||
import Tinymce from '@/components/page/components/Tinymce';
|
||
import bottomTinymce from '@/components/page/components/Tinymce';
|
||
export default {
|
||
data() {
|
||
return {
|
||
isEditComment: false,
|
||
comments: [],
|
||
remarkImageUrl: 'https://submission.tmrjournals.com/public/usericon/20241222/4e77ba3f29ce3cf798b36f24dc411b76.png',
|
||
isFirstComponentLoaded: false,
|
||
isWordComponentLoaded: false,
|
||
currentContent: null,
|
||
editVisible: false,
|
||
currentId: null,
|
||
ManuscirptContent: [],
|
||
articleId: this.$route.query.id,
|
||
isShowComment: false,
|
||
urlList: {
|
||
delete: 'api/Preaccept/delArticleMains',
|
||
addRow: 'api/Preaccept/addBlankRow',
|
||
addComment: 'api/Preaccept/createArticleMainCheckForEditor',
|
||
editComment: 'api/Preaccept/editArticleMainCheck',
|
||
solveComment: 'api/Preaccept/completeArticleMainCheckForAuthor',
|
||
cancelSolveComment: 'api/Preaccept/rejectArticleMainCheckForEditor',
|
||
deleteComment: 'api/Preaccept/delArticleMainCheckForEditor',
|
||
replyComment: 'api/Preaccept/rejectArticleMainCheckForAuthor',
|
||
content: 'api/Preaccept/getArticleMainsRecycle',
|
||
huifuContent: 'api/Preaccept/replyArticleRecycle',
|
||
editContent: 'api/Preaccept/editArticleMainsForAuthor',
|
||
setPositioningTable: 'api/Preaccept/positioningTable',
|
||
removePositioningTable: 'api/Preaccept/removeTable',
|
||
setPositioningImage: 'api/Preaccept/positioningImage',
|
||
removePositioningImage: 'api/Preaccept/removeImage',
|
||
addImage: 'api/Preaccept/addMainImage',
|
||
editImage: 'api/Preaccept/editMainImage',
|
||
addTable: 'api/Preaccept/addMainTable',
|
||
editTable: 'api/Preaccept/editMainTable'
|
||
},
|
||
wordStyle: `
|
||
// p {
|
||
// position: relative;
|
||
// padding: 8px 15px;
|
||
// min-height: 22px;
|
||
// border: 2px dashed #fff;
|
||
// border-radius: 5px;
|
||
// color: #606266;
|
||
// }
|
||
// p {
|
||
// font-size: 14px;
|
||
// line-height: 22px;
|
||
// }
|
||
|
||
.imgBox .chNumer {
|
||
position: absolute;
|
||
top: -2px;
|
||
right: -1px;
|
||
border-radius: 3px;
|
||
font-size: 10px;
|
||
background-color: rgb(0 102 153 / 85%);
|
||
color: #fff;
|
||
padding: 0 6px;
|
||
}
|
||
|
||
.MaxPicture {
|
||
text-align: center;
|
||
}
|
||
|
||
.MaxPicture > img {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.font {
|
||
display: block;
|
||
margin: 0 auto;
|
||
font-size: 13px;
|
||
}
|
||
.tableTitle{
|
||
text-align:center!important;
|
||
font-weight: bold;
|
||
}
|
||
`,
|
||
tables: [],
|
||
htmlContent: '',
|
||
|
||
baseUrl: this.Common.baseUrl,
|
||
// baseUrl: 'https://submission.tmrjournals.com/',
|
||
// mediaUrl: this.Common.mediaUrl,//暂时注释2024121601
|
||
mediaUrl: mediaUrl, //
|
||
Art_Id: this.$route.query.id,
|
||
Art_Doi: this.$route.query.doi,
|
||
Art_web_Id: this.$route.query.artID,
|
||
Art_P_Id: '',
|
||
btnDisble: true,
|
||
detailTitle: '',
|
||
Main_List: [],
|
||
txtStyle: {
|
||
text: '',
|
||
ChGtpTxt: ''
|
||
},
|
||
txtVisible: false,
|
||
lineStyle: {},
|
||
contentStyle: {},
|
||
lineTable: [],
|
||
threeVisible: false,
|
||
picStyle: {},
|
||
commentForm: {},
|
||
commentVisible: false,
|
||
pictVisible: false,
|
||
typesettingType: 1,
|
||
imagesList: [],
|
||
exegesis: "The following contents'<b></b>,<i></i>'are necessary for the generation phase, please do not delete them!!!"
|
||
};
|
||
},
|
||
components: {
|
||
Tinymce,
|
||
bottomTinymce
|
||
},
|
||
computed: {
|
||
combinedValue() {
|
||
// 将两个值组合成一个新的值，可以是字符串、数组、对象等
|
||
// return `${this.isFirstComponentLoaded}-${this.isWordComponentLoaded}`;
|
||
}
|
||
},
|
||
watch: {
|
||
// 监听计算属性
|
||
// combinedValue(newVal, oldVal) {
|
||
// console.log('value1 或 value2 发生变化');
|
||
// console.log('新值:', newVal);
|
||
// console.log('旧值:', oldVal);
|
||
// // 处理任意一个值变化的逻辑
|
||
// this.updateWordTiffImage(newVal);
|
||
// }
|
||
},
|
||
|
||
directives: {
|
||
// 注册一个局部的自定义指令 v-focus
|
||
focus: {
|
||
// 指令的定义
|
||
inserted: function (el) {
|
||
// 聚焦元素
|
||
el.querySelector('textarea').focus();
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
localStorage.removeItem('scrollPosition');
|
||
this.isShowEditComment();
|
||
this.getDate();
|
||
this.getCommentList();
|
||
// this.loadDictionary().catch(console.error);
|
||
},
|
||
mounted() {},
|
||
activated() {
|
||
this.isShowEditComment();
|
||
this.getDate();
|
||
this.getCommentList();
|
||
},
|
||
|
||
methods: {
|
||
isShowEditComment() {
|
||
if (localStorage.getItem('U_role')) {
|
||
var identity = localStorage.getItem('U_role');
|
||
if (identity.includes('editor')) {
|
||
this.isEditComment = true;
|
||
} else {
|
||
this.isEditComment = false;
|
||
}
|
||
}
|
||
},
|
||
|
||
loadedWord() {
|
||
this.isWordComponentLoaded = true;
|
||
},
|
||
// 监听第一个兄弟组件加载完毕
|
||
// onFirstComponentLoaded(imagesList) {
|
||
// this.imagesList = [...imagesList];
|
||
// this.isFirstComponentLoaded = true;
|
||
// },
|
||
// updateWordTiffImage(data) {
|
||
// console.log('updateWordTiffImage at line 423:', data);
|
||
|
||
// if (this.isFirstComponentLoaded && this.isWordComponentLoaded) {
|
||
// this.imagesList.forEach((e) => {
|
||
// if (e.dataUrl) {
|
||
// this.$nextTick(() => {
|
||
// this.$refs.commonWord.replacePlaceholderImage(e.ami_id, e.dataUrl);
|
||
// });
|
||
// }
|
||
// });
|
||
// }
|
||
// },
|
||
handleSaveContent() {
|
||
this.$refs.commonContent.getTinymceContent('content');
|
||
},
|
||
|
||
async getContent(type, content) {
|
||
if (type == 'content') {
|
||
// 使用正则表达式移除所有不允许的标签
|
||
// 1. 移除不允许的标签
|
||
content = content.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);
|
||
|
||
// // 4. 去除多余的空格：替换连续的空格、换行符、制表符等
|
||
// content = content.replace(/\s+/g, ' ').trim(); // 将多个空白字符替换为一个空格，并去除前后空白
|
||
|
||
// // 5. 去除标签之间的空格
|
||
// content = content.replace(/>\s+</g, '><'); // 去除标签之间的空格
|
||
|
||
// 6. 如果需要，还可以去除 <span> 标签内部的空格
|
||
// content = content.replace(/<span[^>]*>\s*([^<]+)\s*<\/span>/g, '<span>$1</span>'); // 清理 <span> 标签内部的空格
|
||
|
||
this.saveContent(content, this.currentContent.am_id);
|
||
} else if (type == 'table') {
|
||
this.saveTable(content);
|
||
} else if (type == 'comment') {
|
||
this.addComment(content);
|
||
}
|
||
},
|
||
deleteComment(comment, index) {
|
||
console.log('comment at line 480:', comment);
|
||
if (this.isEditComment) {
|
||
this.$confirm(this.$t('commonTable.removeAnnotations'), 'Prompt', {
|
||
confirmButtonText: 'Submit',
|
||
cancelButtonText: 'Cancel',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
this.$api
|
||
.post(this.urlList.deleteComment, {
|
||
amc_id: comment.amc_id
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.getDate();
|
||
this.getCommentList();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
});
|
||
// this.comments.splice(index, 1); // 删除评论
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
},
|
||
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!'
|
||
});
|
||
}
|
||
await that.$api
|
||
.post(that.urlList.editContent, {
|
||
am_id: am_id,
|
||
content: str
|
||
})
|
||
.then(async (res) => {
|
||
if (res.code == 0) {
|
||
this.editVisible = false;
|
||
this.getDate();
|
||
this.getCommentList();
|
||
}
|
||
});
|
||
},
|
||
async huifu(id) {
|
||
var that = this;
|
||
await this.$confirm(this.$t('commonTable.reContent'), 'Prompt', {
|
||
confirmButtonText: 'Submit',
|
||
cancelButtonText: 'Cancel',
|
||
type: 'warning'
|
||
})
|
||
.then(async () => {
|
||
var that = this;
|
||
await that.$api
|
||
.post(that.urlList.huifuContent, {
|
||
am_id: id
|
||
})
|
||
.then(async (res) => {
|
||
if (res.code == 0) {
|
||
this.getDate();
|
||
}
|
||
});
|
||
})
|
||
.catch((err) => {
|
||
console.log('err at line 466:', err);
|
||
});
|
||
},
|
||
async getManuscirptContent() {
|
||
var that = this;
|
||
await that.$api
|
||
.post(that.urlList.content, {
|
||
article_id: this.articleId
|
||
})
|
||
.then(async (res) => {
|
||
if (res.code == 0) {
|
||
this.ManuscirptContent = res.data.list;
|
||
// this.$refs.commonWordHtmlTypeSetting.getCommentList();
|
||
}
|
||
});
|
||
},
|
||
changeComment() {
|
||
this.isShowComment = !this.isShowComment;
|
||
},
|
||
|
||
// 编辑评论，显示文本框
|
||
goToListComment(id, type) {
|
||
var am_id;
|
||
if (type == 'img') {
|
||
am_id = this.Main_List.find((item) => item.ami_id == id).am_id;
|
||
} else {
|
||
am_id = this.Main_List.find((item) => item.amt_id == id).am_id;
|
||
}
|
||
if (am_id) {
|
||
this.goToComment(am_id);
|
||
}
|
||
},
|
||
goToComment(mainId) {
|
||
this.$nextTick(() => {
|
||
this.$refs.commonWord.goToComment(mainId);
|
||
});
|
||
},
|
||
getTables(tables, html) {
|
||
this.tables = data.map((e, i) => ({ ...e, p_main_table_id: 2141 + i, p_article_id: 2141 }));
|
||
this.tablesHtml = html;
|
||
},
|
||
onDragStart(event, image, index, type) {
|
||
if (type == 'img') {
|
||
event.dataTransfer.setData('image', JSON.stringify({ ...image }));
|
||
event.dataTransfer.setData('imageIndex', index);
|
||
} else {
|
||
event.dataTransfer.setData('table', JSON.stringify({ table: image.table, amt_id: image.amt_id, title: image.title }));
|
||
event.dataTransfer.setData('tableIndex', index);
|
||
}
|
||
},
|
||
async onDelete(dataId) {
|
||
var dataInfo = this.Main_List.find((item) => item.am_id == dataId);
|
||
|
||
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', {
|
||
confirmButtonText: 'Submit',
|
||
cancelButtonText: 'Cancel',
|
||
type: 'warning'
|
||
})
|
||
.then(async () => {
|
||
var that = this;
|
||
var url = '';
|
||
switch (type) {
|
||
case 'table':
|
||
url = that.urlList.removePositioningTable;
|
||
break;
|
||
case 'img':
|
||
url = that.urlList.removePositioningImage;
|
||
break;
|
||
case 'content':
|
||
url = that.urlList.delete;
|
||
break;
|
||
}
|
||
await that.$api
|
||
.post(url, {
|
||
am_id: dataId
|
||
})
|
||
.then(async (res) => {
|
||
if (res.code == 0) {
|
||
setTimeout(() => {
|
||
that.getDate();
|
||
that.getCommentList();
|
||
if (type == 'img') {
|
||
that.$refs.commonWordHtmlTypeSetting.refresh('img');
|
||
} else {
|
||
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 addCommentSetting(content) {
|
||
console.log('content at line 602:', content);
|
||
await this.$api
|
||
.post(this.urlList.addComment, {
|
||
am_id: content.am_id,
|
||
remark: content.remark
|
||
})
|
||
.then(async (res) => {
|
||
if (res.code == 0) {
|
||
this.$forceUpdate();
|
||
// this.commentVisible = false;
|
||
// this.getDate()
|
||
this.$nextTick(() => {
|
||
this.$refs.commonWordHtmlTypeSetting.getCommentList();
|
||
});
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err.msg);
|
||
});
|
||
},
|
||
async addComment(content) {
|
||
console.log('content at line 603:', this.commentForm);
|
||
var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : '';
|
||
if (str == '') {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: 'Please enter the Comment!'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (this.commentForm.type == 'user') {
|
||
await this.$api
|
||
.post(this.urlList.replyComment, {
|
||
amc_id: this.commentForm.amc_id,
|
||
author_remark: str
|
||
})
|
||
.then(async (res) => {
|
||
if (res.code == 0) {
|
||
this.$forceUpdate();
|
||
this.commentVisible = false;
|
||
this.getDate();
|
||
this.getCommentList();
|
||
this.$nextTick(() => {});
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err.msg);
|
||
});
|
||
} else {
|
||
var data = {};
|
||
if (this.commentForm.amc_id) {
|
||
data = {
|
||
amc_id: this.commentForm.amc_id,
|
||
|
||
remark: str
|
||
};
|
||
} else {
|
||
data = {
|
||
article_id: this.articleId,
|
||
am_id: this.commentForm.am_id,
|
||
content: this.commentForm.content,
|
||
remark: str
|
||
};
|
||
}
|
||
await this.$api
|
||
.post(this.commentForm.amc_id ? this.urlList.editComment : this.urlList.addComment, { ...data })
|
||
.then(async (res) => {
|
||
if (res.code == 0) {
|
||
this.$forceUpdate();
|
||
this.commentVisible = false;
|
||
this.getDate();
|
||
this.getCommentList();
|
||
this.$nextTick(() => {});
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err.msg);
|
||
});
|
||
}
|
||
},
|
||
async onComment(dataId) {
|
||
var data = this.Main_List.find((item) => item.am_id == dataId);
|
||
if (data && data.remark) {
|
||
this.$alert(
|
||
`<p style="display:flex;"><img src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;margin-right:10px;"/><span style=" overflow-wrap: break-word;width:calc(100% - 50px)"> ${data.remark}</span></p>`,
|
||
'Annotations',
|
||
{
|
||
confirmButtonText: 'OK',
|
||
dangerouslyUseHTMLString: true, // 启用 HTML 渲染
|
||
callback: (action) => {}
|
||
}
|
||
);
|
||
}
|
||
},
|
||
onRefresh() {
|
||
this.getDate();
|
||
this.getCommentList();
|
||
},
|
||
editComment(comment, type) {
|
||
console.log('comment at line 813:', comment);
|
||
this.commentForm = {
|
||
...comment,
|
||
type: type,
|
||
remark: type == 'user' ? comment.author_remark : comment.remark
|
||
};
|
||
console.log('this.commentForm at line 815:', this.commentForm);
|
||
this.commentVisible = true;
|
||
},
|
||
async onAddComment(data) {
|
||
var form = this.Main_List.find((item) => item.am_id == data.mainId);
|
||
this.commentForm = {
|
||
...form,
|
||
content: data.label ? data.label : '',
|
||
remark: '',
|
||
type: 'add',
|
||
role: 'editor'
|
||
};
|
||
this.commentVisible = true;
|
||
},
|
||
async replyComment(data) {
|
||
this.commentForm = {
|
||
...data,
|
||
remark: data.author_remark,
|
||
type: 'user'
|
||
};
|
||
this.commentVisible = true;
|
||
},
|
||
async onEditTitle(data) {
|
||
var url;
|
||
switch (data.value) {
|
||
case 1:
|
||
url = 'api/Preaccept/changeH1';
|
||
break;
|
||
case 2:
|
||
url = 'api/Preaccept/changeH2';
|
||
break;
|
||
case 3:
|
||
url = 'api/Preaccept/changeH3';
|
||
break;
|
||
}
|
||
|
||
console.log('data at line 739:', data);
|
||
await this.$api
|
||
.post(url, {
|
||
am_id: data.mainId
|
||
})
|
||
.then(async (res) => {
|
||
this.getDate();
|
||
this.getCommentList();
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err.msg);
|
||
});
|
||
},
|
||
async onAddRow(mainId) {
|
||
console.log('data at line 886:', mainId);
|
||
|
||
await this.$api
|
||
.post(this.urlList.addRow, {
|
||
am_id: mainId,
|
||
article_id: this.articleId
|
||
})
|
||
.then(async (res) => {
|
||
this.getDate();
|
||
this.getCommentList();
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err.msg);
|
||
});
|
||
},
|
||
async solveComment(data) {
|
||
await this.$api
|
||
.post(this.urlList.solveComment, {
|
||
amc_id: data.amc_id
|
||
})
|
||
.then(async (res) => {
|
||
if (res.code == 0) {
|
||
this.getDate();
|
||
this.getCommentList();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err.msg);
|
||
});
|
||
},
|
||
async cancelSolveComment(data) {
|
||
await this.$api
|
||
.post(this.urlList.cancelSolveComment, {
|
||
amc_id: data.amc_id
|
||
})
|
||
.then(async (res) => {
|
||
if (res.code == 0) {
|
||
this.getDate();
|
||
this.getCommentList();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err.msg);
|
||
});
|
||
},
|
||
clearButton() {
|
||
var deleteButtons = document.querySelectorAll('.wordButtonContainer');
|
||
deleteButtons.forEach(function (button) {
|
||
button.remove(); // 移除每个 wordButtonContainer 按钮
|
||
});
|
||
},
|
||
handleImageAdd(type) {
|
||
this.picStyle = { note: '', picUrl: '' };
|
||
this.picStyle.visiTitle = 'Add Figure';
|
||
this.pictVisible = true;
|
||
},
|
||
handleTableAdd(type) {
|
||
this.lineStyle = { note: '', table_data: '', html_data: '' };
|
||
this.lineStyle.visiTitle = 'Add Table';
|
||
this.threeVisible = true;
|
||
},
|
||
handleImageEdit(data, type) {
|
||
console.log('data at line 600:', data);
|
||
if (type == 'img') {
|
||
var extension = data.url.split('.').pop().toLowerCase();
|
||
this.picStyle = {};
|
||
this.picStyle = { ...data, extension: extension, picUrl: data.url };
|
||
this.picStyle.visiTitle = 'Edit Figure';
|
||
this.pictVisible = true;
|
||
} else if (type == 'table') {
|
||
this.lineStyle = {};
|
||
this.lineStyle = {
|
||
...data,
|
||
table: JSON.parse(data.table_data),
|
||
html_data: data.html_data,
|
||
note: data.note,
|
||
title: data.title
|
||
};
|
||
this.lineStyle.visiTitle = 'Edit Table';
|
||
this.threeVisible = true;
|
||
}
|
||
},
|
||
updateChange(content, type) {
|
||
var str = this.$commonJS.transformHtmlString(content);
|
||
if (type == 'imgNote') {
|
||
this.picStyle.note = str;
|
||
} else {
|
||
this.lineStyle[type] = str;
|
||
}
|
||
},
|
||
onEdit(dataId) {
|
||
this.currentContent = {};
|
||
this.picStyle = {};
|
||
this.lineStyle = {};
|
||
this.currentId = null;
|
||
this.clearButton();
|
||
var data = this.Main_List.find((item) => item.am_id == dataId);
|
||
console.log('data at line 667:', data);
|
||
if (data.type == 1) {
|
||
var extension = data.image.url.split('.').pop().toLowerCase();
|
||
if (extension == 'tif') {
|
||
const imgElement = document.querySelector(`[data-img-id="${data.ami_id}"]`);
|
||
if (imgElement) {
|
||
// 获取图片的 src
|
||
data.dataUrl = imgElement.src;
|
||
}
|
||
} else if (['jpg', 'jpeg', 'png'].includes(extension)) {
|
||
} else {
|
||
}
|
||
this.currentContent = { ...data, extension: extension };
|
||
this.picStyle = { ...data, extension: extension, picUrl: data.image.url, note: data.image.note };
|
||
this.picStyle.visiTitle = 'Edit Figure';
|
||
this.pictVisible = true;
|
||
} else if (data.type == 2) {
|
||
this.currentContent = { ...data };
|
||
this.lineStyle = {
|
||
...data,
|
||
table: JSON.parse(data.table.table_data),
|
||
html_data: data.table.html_data,
|
||
note: data.table.note,
|
||
title: data.table.title
|
||
};
|
||
this.lineStyle.visiTitle = 'Edit Table';
|
||
this.threeVisible = true;
|
||
} else {
|
||
this.currentContent = data;
|
||
this.editVisible = true;
|
||
this.currentId = dataId;
|
||
}
|
||
},
|
||
async onDrop(event, dataId) {
|
||
if (event.dataTransfer.getData('image')) {
|
||
const draggedImage = JSON.parse(event.dataTransfer.getData('image'));
|
||
const draggedImageIndex = JSON.parse(event.dataTransfer.getData('imageIndex'));
|
||
this.$nextTick(async () => {
|
||
await this.$api
|
||
.post(this.urlList.setPositioningImage, {
|
||
am_id: dataId,
|
||
ami_id: draggedImage.ami_id
|
||
})
|
||
.then(async (res) => {
|
||
if (res.code == 0) {
|
||
this.getDate();
|
||
this.$nextTick(() => {
|
||
this.$refs.commonWordHtmlTypeSetting.refresh('img');
|
||
});
|
||
this.$forceUpdate();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err.msg);
|
||
});
|
||
});
|
||
// this.Main_List.splice(index + 1, 0, draggedImage);
|
||
// this.$nextTick(() => {
|
||
// this.$refs.commonWordHtmlTypeSetting.changeIsHidden(draggedImageIndex, true, 'img');
|
||
// });
|
||
} else {
|
||
const draggedtable = JSON.parse(event.dataTransfer.getData('table'));
|
||
|
||
this.$nextTick(async () => {
|
||
await this.$api
|
||
.post(this.urlList.setPositioningTable, {
|
||
am_id: dataId,
|
||
amt_id: draggedtable.amt_id
|
||
})
|
||
.then(async (res) => {
|
||
if (res.code == 0) {
|
||
this.getDate();
|
||
this.$nextTick(() => {
|
||
this.$refs.commonWordHtmlTypeSetting.refresh('table');
|
||
});
|
||
this.$forceUpdate();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err.msg);
|
||
});
|
||
});
|
||
|
||
// const draggedtableIndex = JSON.parse(event.dataTransfer.getData('tableIndex'));
|
||
|
||
// this.Main_List.splice(index + 1, 0, draggedtable);
|
||
// console.log('this.Main_List.splice at line 447:', this.Main_List);
|
||
}
|
||
|
||
// this.getWord();
|
||
},
|
||
getCommentList() {
|
||
this.$api
|
||
.post('api/Preaccept/getArticleMainCheckList', {
|
||
article_id: this.articleId
|
||
})
|
||
.then((res) => {
|
||
this.comments = res.data.list;
|
||
// this.positionAnnotations();
|
||
});
|
||
},
|
||
getWord() {
|
||
// var htmlContent = `<h3 class="man_Title" contenteditable="false">${this.detailTitle} </h3>`;
|
||
// htmlContent += this.Main_List.map((item) => {
|
||
// //批注
|
||
// let contentHtml = '';
|
||
// var isRemark = ``;
|
||
// if (item.remark && item.remark != '') {
|
||
// // 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="${
|
||
// this.remarkImageUrl
|
||
// }" alt="" style="width: 20px; height: 20px" />
|
||
|
||
// <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>` : ''}
|
||
// </span>
|
||
|
||
// `;
|
||
// }
|
||
// // 判断是否是图片
|
||
// if (item.type == 1) {
|
||
// var extension = item.image.url.split('.').pop().toLowerCase();
|
||
// if (extension == 'tif') {
|
||
// contentHtml = `
|
||
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
|
||
// item.am_id
|
||
// }">
|
||
// <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>
|
||
// </p>
|
||
// `;
|
||
// } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
|
||
// contentHtml = `
|
||
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
|
||
// item.ami_id
|
||
// }" main-id="${item.am_id}">
|
||
// ${isRemark}
|
||
// <img src="${this.mediaUrl + item.image.url}" 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>
|
||
// </p>
|
||
// `;
|
||
// } else {
|
||
// contentHtml = `
|
||
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
|
||
// item.ami_id
|
||
// }" main-id="${item.am_id}">
|
||
// ${isRemark}
|
||
// <span
|
||
// style="
|
||
// text-align: center;
|
||
// font-size: 30px;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
// "
|
||
// >
|
||
// Figures ( .${item.image.url.split('.').pop().toUpperCase()})
|
||
// </span>
|
||
|
||
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
|
||
// item.image.note ? item.image.note : ''
|
||
// }</font>
|
||
// </p>
|
||
// `;
|
||
// }
|
||
// } else if (item.type == 2) {
|
||
// var tableList = JSON.parse(item.table.table_data);
|
||
|
||
// contentHtml = `
|
||
// <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-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;">
|
||
// ${isRemark}
|
||
// <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; ">
|
||
// ${tableList
|
||
// .map((row) => {
|
||
// return `
|
||
// <tr>
|
||
// ${row
|
||
// .map((cell) => {
|
||
// return `
|
||
// <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
|
||
// <span>${cell.text || ''}</span>
|
||
// </td>
|
||
// `;
|
||
// })
|
||
// .join('')} <!-- join the cells in the row -->
|
||
// </tr>
|
||
// `;
|
||
// })
|
||
// .join('')} <!-- join the rows -->
|
||
// </table>
|
||
// <font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
|
||
// </div>
|
||
// `;
|
||
// } 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>`;
|
||
// }
|
||
|
||
// // 判断是否是表格类型
|
||
|
||
// return contentHtml;
|
||
// }).join('');
|
||
// this.htmlContent = htmlContent;
|
||
this.htmlContent = 'true';
|
||
},
|
||
// 获取数据
|
||
async getDate() {
|
||
this.imagesList = [];
|
||
let urlLInk = '';
|
||
let urlTask = {};
|
||
if (this.Art_Id != undefined) {
|
||
urlLInk = 'api/Preaccept/getArticleMains';
|
||
urlTask.article_id = this.Art_Id;
|
||
}
|
||
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading...',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
|
||
// 获取文章信息
|
||
await this.$api
|
||
.post(urlLInk, urlTask)
|
||
.then(async (res) => {
|
||
if (res.code == 0) {
|
||
// res.data.list.forEach((data) => {
|
||
// if (data.amt_id) {
|
||
// try {
|
||
// const parsedData = JSON.parse(data.table.table_data);
|
||
// } catch (e) {
|
||
// console.error(e.message);
|
||
// }
|
||
// }
|
||
// });
|
||
|
||
this.Main_List = res.data.list;
|
||
this.getManuscirptContent();
|
||
for (let i = 0; i < this.Main_List.length; i++) {
|
||
this.Main_List[i].text = this.Main_List[i].content;
|
||
this.Main_List[i].getnum = 0;
|
||
}
|
||
|
||
// setTimeout(async () => {
|
||
this.$nextTick(async () => {
|
||
await this.getWord();
|
||
loading.close();
|
||
});
|
||
// }, 1000);
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
loading.close();
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err);
|
||
loading.close();
|
||
});
|
||
},
|
||
|
||
// 修改段落/图片
|
||
MTxtEdit(val, num) {
|
||
this.picStyle = JSON.parse(JSON.stringify(val));
|
||
this.picStyle.picUrl = this.picStyle.content;
|
||
this.picStyle.imageUrl = this.baseUrl + 'public/mainimg/' + this.picStyle.content;
|
||
this.picStyle.visiTitle = 'Edit Figure';
|
||
this.pictVisible = true;
|
||
},
|
||
|
||
// 转化为gpt标准格式
|
||
trsanGtp() {
|
||
if (this.btnDisble) {
|
||
this.btnDisble = false;
|
||
this.$api
|
||
.post('api/Production/mainGptcheck', {
|
||
p_main_id: this.txtStyle.p_main_id
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.txtStyle.ChGtpTxt = res.data.content;
|
||
this.btnDisble = true;
|
||
// this.$forceUpdate()
|
||
this.$message.success('Converting success!');
|
||
} else {
|
||
this.btnDisble = true;
|
||
this.$message.error('Converting fail!');
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.btnDisble = true;
|
||
this.$message.error('Converting fail!');
|
||
});
|
||
} else {
|
||
this.$message.warning('Converting, please wait!');
|
||
}
|
||
},
|
||
|
||
// 替换Gtp生成的内容
|
||
replceChGpr(val) {
|
||
this.txtStyle.text = JSON.parse(JSON.stringify(this.txtStyle.ChGtpTxt));
|
||
},
|
||
|
||
// 确定保存段落修改
|
||
saveTxt() {
|
||
this.$api
|
||
.post('api/Production/editProductionMain', {
|
||
p_main_id: this.txtStyle.p_main_id,
|
||
content: this.txtStyle.text
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.$message.success('Successfully edit text!');
|
||
this.txtVisible = false;
|
||
this.getDate();
|
||
// this.Main_List[this.txtStyle.index].text = JSON.parse(JSON.stringify(this.txtStyle.text))
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
|
||
// 图片段落
|
||
MTxtPic(val, num) {
|
||
this.picStyle.pre_type = 'img';
|
||
// this.picStyle.body = val.p_main_img_id;
|
||
|
||
this.picStyle.p_article_id = this.Art_P_Id;
|
||
this.picStyle.titleBot = '';
|
||
this.picStyle.note = '';
|
||
this.picStyle.width = '500';
|
||
this.picStyle.picUrl = '';
|
||
this.picStyle.imageUrl = '';
|
||
this.picStyle.visiTitle = 'Insert Picture Backward';
|
||
this.pictVisible = true;
|
||
},
|
||
|
||
// 确定保存图片
|
||
savePic() {
|
||
this.picStyle.picUrl;
|
||
|
||
if (this.picStyle.visiTitle == 'Edit Figure') {
|
||
this.$api
|
||
.post(this.urlList.editImage, {
|
||
ami_id: this.picStyle.ami_id,
|
||
url: this.picStyle.picUrl,
|
||
note: this.picStyle.note
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.$message.success('Successfully edit Figure!');
|
||
this.pictVisible = false;
|
||
this.$nextTick(() => {
|
||
this.getDate();
|
||
this.getCommentList();
|
||
this.$forceUpdate();
|
||
});
|
||
|
||
this.$refs.commonWordHtmlTypeSetting.refresh('img');
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err);
|
||
});
|
||
} else {
|
||
this.$api
|
||
.post(this.urlList.addImage, {
|
||
article_id: this.articleId,
|
||
url: this.picStyle.picUrl,
|
||
note: this.picStyle.note
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.$message.success('Successfully Add Figure!');
|
||
this.pictVisible = false;
|
||
this.getDate();
|
||
this.$refs.commonWordHtmlTypeSetting.refresh('img');
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err);
|
||
});
|
||
}
|
||
},
|
||
handleSaveTable() {
|
||
this.$nextTick(() => {
|
||
this.$refs.commonTable.getTableContent('table');
|
||
});
|
||
},
|
||
handleSaveComment() {
|
||
this.$nextTick(() => {
|
||
this.$refs.tinymceChildComment.getContent('comment');
|
||
});
|
||
},
|
||
saveTable(content) {
|
||
console.log('content at line 998:', content);
|
||
|
||
if (content && content.table && content.table.length > 0) {
|
||
if (this.lineStyle.visiTitle == 'Edit Table') {
|
||
this.$api
|
||
.post(this.urlList.editTable, {
|
||
amt_id: this.lineStyle.amt_id,
|
||
table_data: JSON.stringify(content.table),
|
||
html_data: content.html_data,
|
||
note: this.lineStyle.note,
|
||
title: this.lineStyle.title
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.$message.success('Successfully edit Table!');
|
||
this.threeVisible = false;
|
||
setTimeout(() => {
|
||
this.getDate();
|
||
this.getCommentList();
|
||
this.$refs.commonWordHtmlTypeSetting.refresh('table');
|
||
});
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err);
|
||
});
|
||
} else {
|
||
this.$api
|
||
.post(this.urlList.addTable, {
|
||
article_id: this.articleId,
|
||
table_data: JSON.stringify(content.table),
|
||
html_data: content.html_data,
|
||
note: this.lineStyle.note,
|
||
title: this.lineStyle.title
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.$message.success('Successfully Add Table!');
|
||
this.threeVisible = false;
|
||
this.getDate();
|
||
this.$refs.commonWordHtmlTypeSetting.refresh('table');
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err);
|
||
});
|
||
}
|
||
} else {
|
||
this.$message.error('Please fill in the table content!');
|
||
}
|
||
},
|
||
async removeEvent(row) {
|
||
// const type = await VXETable.modal.confirm('您确定要删除该数据?')
|
||
const $table = this.$refs.xTable;
|
||
// if (type === 'confirm') {
|
||
$table.remove(row);
|
||
// }
|
||
},
|
||
async insertEvent(row) {
|
||
const $table = this.$refs.xTable;
|
||
const record = {};
|
||
const { row: newRow } = await $table.insertAt(record, row);
|
||
await $table.setEditCell(newRow, 'name');
|
||
},
|
||
// 表格段落
|
||
MTxtTable(val, num) {
|
||
this.lineStyle.textarea = '';
|
||
this.lineStyle.titleCon = '';
|
||
this.lineTable = [];
|
||
this.lineStyle = {};
|
||
this.threeVisible = true;
|
||
|
||
this.$forceUpdate();
|
||
},
|
||
|
||
// 表格转化
|
||
CopyExcelToTable() {
|
||
if (this.lineStyle.textarea == '') {
|
||
this.$message.error('Please fill in the table content!');
|
||
return;
|
||
}
|
||
|
||
let txtRows = this.lineStyle.textarea.split('\n');
|
||
let txtColum = [];
|
||
for (let i = 0; i < txtRows.length; i++) {
|
||
if (txtRows[i] != '') {
|
||
let columns = txtRows[i].split('\t');
|
||
let dataone = [];
|
||
for (let j = 0; j < columns.length; j++) {
|
||
dataone.push(columns[j]);
|
||
}
|
||
txtColum.push(dataone);
|
||
}
|
||
}
|
||
let arrwithNumer = Math.floor(100 / txtColum[0].length) - 2;
|
||
this.lineStyle.arrwith = [];
|
||
for (let i = 0; i < txtColum[0].length; i++) {
|
||
this.lineStyle.arrwith.push(arrwithNumer);
|
||
}
|
||
this.lineTable = txtColum;
|
||
},
|
||
|
||
// 推送
|
||
pushOnline() {
|
||
// 二次确认
|
||
this.$confirm('Are you sure you want to push it to the official website?', 'Tips', {
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
this.$api
|
||
.post('api/Production/pushMainToWeb', {
|
||
article_id: this.Art_web_Id,
|
||
p_article_id: this.Art_P_Id
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.$message.success('Successfully push!');
|
||
this.getDate();
|
||
if (this.Art_Doi != undefined) {
|
||
this.$router.push({
|
||
path: 'comArtHtmlEdit',
|
||
query: {
|
||
artID: this.Art_web_Id
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err);
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
|
||
// 上传图片
|
||
handleAvatarSuccess(res, file) {
|
||
if (res.code == 0) {
|
||
this.picStyle.picUrl = res.data.upurl;
|
||
|
||
this.$forceUpdate();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
this.picStyle.imageUrl = URL.createObjectURL(file.raw);
|
||
},
|
||
handleAvatarError(res, file) {},
|
||
beforeAvatarUpload(file) {
|
||
// const isLt2M = file.size / 1024 / 1024 < 10;
|
||
// if (!isLt2M) {
|
||
// this.$message.error('Picture size cannot exceed 10M!');
|
||
// }
|
||
// return isLt2M;
|
||
const isValidFormat = ['image/jpeg', 'image/png', 'image/tiff'].includes(file.type);
|
||
if (!isValidFormat) {
|
||
this.$message.error(this.$t('commonTable.uploadImageInfo'));
|
||
}
|
||
return isValidFormat; // 返回false将阻止文件上传
|
||
},
|
||
positionAnnotations() {
|
||
this.$nextTick(() => {
|
||
this.comments.forEach((item) => {
|
||
const contentElement = document.querySelector('[remark-main-id="' + item.am_id + '"]');
|
||
const annotationElement = document.querySelector('[data-target="main-' + item.am_id + '"]');
|
||
if (contentElement && annotationElement) {
|
||
const rect = contentElement.getBoundingClientRect();
|
||
annotationElement.style.position = 'absolute';
|
||
annotationElement.style.top = `${rect.top}px`;
|
||
}
|
||
});
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.lineStyle {
|
||
border-top: 1px solid #0066994d;
|
||
padding: 20px 20px 40px 20px;
|
||
}
|
||
|
||
.lineStyle > div {
|
||
}
|
||
|
||
.lineStyle > div span.title {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
margin: 0px 10px 0px 0px;
|
||
}
|
||
|
||
.lineStyle > div font.mark {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
margin: 0px 0px 0px 10px;
|
||
}
|
||
|
||
.lineStyle .styArry {
|
||
display: inline-block;
|
||
margin: 15px 40px 0 0;
|
||
}
|
||
|
||
.lineStyle .styArry:nth-last-child(1) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.lineAll {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.lineAll .lineTit {
|
||
padding: 0 0 20px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.lineAll .lineTit:nth-child(1) {
|
||
border-top: 2px solid #333333;
|
||
border-bottom: 1px solid #333333;
|
||
padding: 10px 0;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.lineAll .lineTit:nth-child(2) {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.lineAll .lineTit:nth-last-child(1) {
|
||
border-bottom: 2px solid #333333;
|
||
}
|
||
|
||
.lineAll .lineTit > div {
|
||
line-height: 22px;
|
||
vertical-align: middle;
|
||
display: inline-block;
|
||
padding: 0 1%;
|
||
}
|
||
|
||
.man_Title {
|
||
background-color: #fff;
|
||
margin: 0 0 10px 0;
|
||
border-bottom: 1px solid #dde1eb;
|
||
box-shadow: 0 5px 5px -2px rgb(134 134 134);
|
||
padding: 12px 25px 8px 25px;
|
||
font-size: 16px;
|
||
line-height: 24px;
|
||
color: #333;
|
||
position: relative;
|
||
}
|
||
|
||
.man_Title button {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
}
|
||
|
||
.type_MTxt {
|
||
background-color: #fff;
|
||
padding: 0 10px 10px 10px;
|
||
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
|
||
position: relative;
|
||
}
|
||
|
||
.type_MTxt > div {
|
||
position: relative;
|
||
padding: 8px 15px;
|
||
min-height: 22px;
|
||
border: 2px dashed red;
|
||
border-radius: 5px;
|
||
color: #606266;
|
||
}
|
||
.type_MTxt > div:hover {
|
||
background-color: rgb(0 102 153 / 10%);
|
||
border: 2px dashed rgb(0 102 153 / 50%);
|
||
}
|
||
/* .type_MTxt > .imgBox:hover {
|
||
background-color: rgb(0 102 153 / 10%);
|
||
border: 2px dashed rgb(0 102 153 / 50%);
|
||
} */
|
||
|
||
.type_MTxt > div > p {
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
}
|
||
|
||
.type_MTxt > .imgBox .chNumer {
|
||
position: absolute;
|
||
top: -2px;
|
||
right: -1px;
|
||
border-radius: 3px;
|
||
font-size: 10px;
|
||
background-color: rgb(0 102 153 / 85%);
|
||
color: #fff;
|
||
padding: 0 6px;
|
||
}
|
||
|
||
.type_MTxt > div .MaxPicture {
|
||
text-align: center;
|
||
}
|
||
|
||
.type_MTxt > div .MaxPicture > img {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.type_MTxt > div .MaxPicture > font {
|
||
display: block;
|
||
margin: 0 auto;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.MaxBtn {
|
||
position: absolute;
|
||
right: 0;
|
||
top: -1px;
|
||
color: #fff;
|
||
border-radius: 50px;
|
||
font-size: 15.5px;
|
||
padding: 6px 7px;
|
||
display: none;
|
||
opacity: 0.75;
|
||
}
|
||
|
||
.MaxBtn {
|
||
display: block;
|
||
}
|
||
|
||
.MaxBtn:hover {
|
||
opacity: 1;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.type_Gbtn {
|
||
color: #fff;
|
||
border-color: #006699;
|
||
background: #006699;
|
||
width: 30%;
|
||
text-align: center;
|
||
padding: 8px 0;
|
||
font-size: 14px;
|
||
border-radius: 8px;
|
||
font-weight: 500;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.type_Gbtn:hover {
|
||
box-shadow: 0 4px 14px rgb(0 102 153 / 30%);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.type_CHar {
|
||
position: relative;
|
||
border-left: 4px solid rgba(0 102 153 / 20%);
|
||
border-radius: 5px;
|
||
padding: 20px 25px 15px 20px;
|
||
background-color: #fff;
|
||
margin: 20px 0 0 0;
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
box-shadow: 0 1px 10px rgb(0 102 153 / 20%);
|
||
}
|
||
|
||
.type_CHar .chReple {
|
||
position: absolute;
|
||
top: -1px;
|
||
right: 1px;
|
||
border-radius: 3px;
|
||
font-size: 10px;
|
||
background-color: rgb(223 109 11);
|
||
opacity: 0.85;
|
||
color: #fff;
|
||
padding: 1px 10px;
|
||
}
|
||
|
||
.type_CHar .chReple:hover {
|
||
opacity: 1;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.avatar-uploader_small {
|
||
height: 100px;
|
||
}
|
||
|
||
.avatar-uploader .el-upload:hover {
|
||
border-color: #409eff;
|
||
}
|
||
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 120px;
|
||
height: 120px;
|
||
line-height: 120px;
|
||
text-align: center;
|
||
}
|
||
|
||
.avatar-uploader_small .el-upload {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
|
||
.avatar-uploader_small .avatar-uploader-icon {
|
||
line-height: 80px;
|
||
margin-left: -30px;
|
||
}
|
||
|
||
.avatar {
|
||
width: 120px;
|
||
height: 120px;
|
||
display: block;
|
||
}
|
||
.unfetteredBox {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
.unfetteredBox .image {
|
||
margin-top: 10px;
|
||
box-shadow: rgba(16, 17, 19, 0.5) 0px 1px 3px;
|
||
margin-right: 10px;
|
||
height: 60px;
|
||
width: 60px;
|
||
border-radius: 4px;
|
||
|
||
overflow: hidden;
|
||
}
|
||
|
||
::v-deep .wordTableHtml table span blue {
|
||
color: rgb(0, 130, 170) !important;
|
||
}
|
||
.toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
border-bottom: none;
|
||
box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
|
||
padding: 4px 0;
|
||
height: 50px;
|
||
box-sizing: border-box;
|
||
transition: box-shadow 0.5s;
|
||
|
||
border-top-left-radius: 10px;
|
||
border-top-right-radius: 10px;
|
||
z-index: 2;
|
||
}
|
||
.toolbar .toolbar_item {
|
||
width: auto;
|
||
color: #767c82;
|
||
font-size: 14px;
|
||
padding: 0 11px 0 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
line-height: 24px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.toolbar .toolbar_item img {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 6px;
|
||
margin-top: -2px;
|
||
}
|
||
::v-deep .el-dialog__body {
|
||
padding: 10px 20px !important;
|
||
}
|
||
.editFormPizhu {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
}
|
||
.editFormPizhu img {
|
||
margin-right: 10px;
|
||
}
|
||
.go-content-box {
|
||
background-color: #f2f3f5;
|
||
}
|
||
.commentList {
|
||
width: 350px !important;
|
||
|
||
padding: 15px;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
/* background-color: #fafafa; */
|
||
background-color: #fafafa;
|
||
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
|
||
}
|
||
|
||
/* 为整个页面的滚动条设置样式 */
|
||
::-webkit-scrollbar {
|
||
width: 8px; /* 垂直滚动条的宽度 */
|
||
height: 8px; /* 水平滚动条的高度 */
|
||
}
|
||
|
||
/* 滚动条轨道样式 */
|
||
::-webkit-scrollbar-track {
|
||
background: #f1f1f1; /* 滚动条轨道颜色 */
|
||
border-radius: 10px; /* 轨道圆角 */
|
||
}
|
||
|
||
/* 滚动条滑块样式 */
|
||
::-webkit-scrollbar-thumb {
|
||
background: #888; /* 滚动条滑块颜色 */
|
||
border-radius: 10px; /* 滑块圆角 */
|
||
}
|
||
|
||
/* 滑块在悬停时的样式 */
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #555; /* 滑块悬停时的颜色 */
|
||
}
|
||
</style>
|