Files
tougao_web/src/components/page/OnlineProofreading.vue
2025-11-18 09:02:30 +08:00

2260 lines
81 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: 240px;
float: left;
height: 100%;
background-color: #fff;
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
border-radius: 4px;
overflow-y: auto;
"
>
<div class="unfetteredBox" style="height: 100%">
<commonCatalogue
: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"
@handlePaperclip="handlePaperclip"
@addComment="addCommentSetting"
@goToComment="goToComment"
@edit="handleImageEdit"
@goToListComment="goToListComment"
style="width: 100%; height: 100%; padding: 0 0px; box-sizing: border-box; background-color: #fff"
>
</commonCatalogue>
<input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
</div>
</div>
<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" />
<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
v-if="htmlContent"
ref="commonWord"
:value="htmlContent"
:contentList="Main_List"
:comments="comments"
:wordStyle="wordStyle"
@onDrop="onDrop"
@saveContent="saveContent"
@editComment="editComment"
@loaded="loadedWord"
@onEdit="onEdit"
@addContent="onAddContent"
@changeSort="changeSort"
@onDelete="onDelete"
@onDeletes="onDeletes"
@refresh="onRefresh"
@onComment="onComment"
@onAddComment="onAddComment"
@solveComment="solveComment"
@cancelSolveComment="cancelSolveComment"
@replyComment="replyComment"
@deleteComment="deleteComment"
@editProofreading="editProofreading"
@revokeProofreading="revokeProofreading"
@executeProofreading="executeProofreading"
@deleteProofreading="deleteProofreading"
@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="1200px" :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 Title :">
<common-content
:isAutomaticUpdate="true"
:value="picStyle.title"
@getContent="getContent"
@openLatexEditor="openLatexEditor"
v-if="pictVisible"
@updateChange="(res) => updateChange(res, 'imgTitle')"
:height="200"
ref="tinymceChildImgTitle"
style="margin-left: -115px"
></common-content>
</el-form-item>
<el-form-item label="Figure Describe :">
<common-content
:isAutomaticUpdate="true"
:value="picStyle.note"
@getContent="getContent"
@openLatexEditor="openLatexEditor"
v-if="pictVisible"
@updateChange="(res) => updateChange(res, 'imgNote')"
:height="400"
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-drawer
title="我嵌套了表格!"
class="editTableDialog"
destroy-on-close
v-if="threeVisible"
:title="lineStyle.visiTitle"
:visible.sync="threeVisible"
:wrapperClosable="false"
:close-on-click-modal="false"
direction="rtl"
size="80vw"
>
<el-form ref="editMes" :model="lineStyle" label-width="80px">
<!-- <common-late-x></common-late-x> -->
<!-- :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`" -->
<el-form-item label="Title:">
<common-content
:id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`"
:isAutomaticUpdate="true"
:value="lineStyle.title"
@getContent="getContent"
@openLatexEditor="openLatexEditor"
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"
@openLatexEditor="openLatexEditor"
:lineStyle="lineStyle"
></common-table>
</el-form-item>
<el-form-item label="Note:">
<!-- :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-note`" -->
<common-content
:id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-note`"
:isAutomaticUpdate="true"
:value="lineStyle.note"
@getContent="getContent"
@openLatexEditor="openLatexEditor"
v-if="threeVisible"
@updateChange="(res) => updateChange(res, 'note')"
:height="120"
ref="tinymceChildNote"
></common-content>
</el-form-item>
</el-form>
<p style="margin-top: 20px; text-align: right">
<el-button @click="threeVisible = false"> Cancel </el-button>
<el-button
type="primary"
plain
@click="handleSaveTable"
style="background-color: #006699 !important; background: #006699 !important; margin-right: 20px; color: #fff !important"
>
save Table
</el-button>
</p>
</el-drawer>
<el-drawer
title="我嵌套了表格!"
class="editTableDialog"
destroy-on-close
v-if="tablesHtmlVisible"
:title="lineStyle.visiTitle"
:visible.sync="tablesHtmlVisible"
:wrapperClosable="false"
:close-on-click-modal="false"
direction="rtl"
size="80vw"
>
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: start">
<div v-for="(item, i) in uploadWordTables" class="uploadWordTableBox">
<el-button @click="addUploadWordTable(item)" size="mini" class="insertTable"> 插入 </el-button>
<div class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target">
<p style="font-size: 12px; padding: 10px; box-sizing: border-box">Table {{ i + 1 }}</p>
<table border="1" :style="`width: 800px;zoom:${zoomNum};border-collapse: collapse; text-align: center`">
<tr
v-for="(row, i) in item.table_data"
:key="i"
:class="{ 'table-header-row': isHeaderRow(i, item.table_data) }"
>
<td
style="font-size: 20px"
v-for="(cell, i1) in row"
:key="i1"
:colspan="`${cell.colspan || 1}`"
:rowspan="`${cell.rowspan || 1}`"
>
<span v-html="cell.text"></span>
</td>
</tr>
</table>
</div>
</div>
</div>
</el-drawer>
<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"
@openLatexEditor="openLatexEditor"
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>
<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"
@openLatexEditor="openLatexEditor"
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>
<common-late-x v-if="showLateX" @close="showLateX = false" @save="saveLateX" :LateXInfo="LateXInfo"></common-late-x>
</div>
</template>
<script>
import commonCatalogue from '@/components/page/components/OnlineProofreading/catalogue.vue'
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 {
zoomNum: (window.innerWidth * 0.38) / 850,
uploadWordTables: [],
tablesHtmlVisible: false,
tablesHtml: '',
LateXInfo: {},
isEditComment: false,
showLateX: 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: {
executeProofreading: 'api/Proofread/change',
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,
addContentVisible: false,
editProofreadingContentVisible: false,
proofreadingContent: {},
addContent: {},
lineStyle: {},
lineStyle1: {},
contentStyle: {},
lineTable: [],
threeVisible: false,
picStyle: {},
picStyle1: {},
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,
commonCatalogue
},
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();
}
}
},
async created() {
// await this.$api.post('api/Proofread/proofRead', {
// article_id: this.$route.query.id
// });
localStorage.removeItem('scrollPosition');
this.isShowEditComment();
this.getDate();
this.getCommentList();
// this.loadDictionary().catch(console.error);
},
mounted() {},
async activated() {
// await this.$api.post('api/Proofread/proofRead', {
// article_id: this.$route.query.id
// });
this.isShowEditComment();
this.getDate();
this.getCommentList();
},
methods: {
async copyArray(data) {
try {
// 将数组内容转换为字符串,使用换行符分隔
const textToCopy = JSON.stringify(data);
// 使用 Clipboard API 复制文本
await navigator.clipboard.writeText(textToCopy);
alert('数组内容已复制到剪贴板!');
} catch (err) {
console.error('复制失败:', err);
alert('复制失败,请重试!');
}
},
openLatexEditor(data) {
this.showLateX = true;
this.LateXInfo = data;
},
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');
},
handleSaveAddContent() {
this.$refs.addContent.getTinymceContent('addcontent');
},
handleSaveEditProofreadingContent() {
this.$refs.addContent.getTinymceContent('addcontent');
},
async getContent(type, content) {
if (type == 'content') {
content = this.$commonJS.transformHtmlString(content);
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;
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) {
var that = this;
var str = content.replace(/^<p>\s*(.*?)\s*<\/p>$/, '$1').trim();
str = await that.$commonJS.decodeHtml(str);
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 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();
}
});
},
isHeaderRow(rowIndex, table) {
var table = table;
var head = table[0];
return rowIndex < head[0].rowspan; // 假设前两行是表头
},
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(() => {});
}
},
saveLateX(data) {
console.log('data at line 735:', data);
const { editorId, wmathId, latex } = data;
const newLatex = latex ? latex.trim() : '';
if (!editorId || !wmathId) return;
const targetEditor = tinymce.get(editorId);
if (!targetEditor) return;
const targetWmath = targetEditor.dom.select(`wmath[data-id="${wmathId}"]`, targetEditor.getBody())[0];
if (targetWmath) {
if (!newLatex) {
// ❌ 删除公式
targetEditor.dom.remove(targetWmath);
} else {
// ✅ 更新公式
targetWmath.setAttribute('data-latex', newLatex);
targetWmath.innerHTML = newLatex;
setTimeout(() => {
if (typeof renderMathJax === 'function') {
// this.window.renderMathJax(editorId);
}
}, 10);
}
}
},
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 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
.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 0:
url = 'api/Preaccept/changeNormal';
break;
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);
});
},
handlePaperclip() {
this.uploadWordTables = [];
this.$refs.fileInput.click();
},
handleFileChange(event) {
var that = this;
const loading = this.$loading({
lock: true,
text: 'Loading...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 处理文件上传并传递回调函数
this.$commonJS.handleFileUpload(event, function (tables) {
console.log('tables at line 1138:', tables);
if (tables.length == 0) {
loading.close();
that.$message({
type: 'warning',
message: 'No table found!'
});
return false;
}
// 使用 Promise.all 等待所有表格解析完成
Promise.all(
tables.map((table) => {
return new Promise((resolve, reject) => {
// 解析每个表格
that.$commonJS.parseTableToArray(table, (tableList) => {
resolve({ table_data: tableList, html_data: '' });
});
});
})
)
.then((result) => {
// 所有表格的解析完成后,处理结果
that.uploadWordTables = result;
loading.close();
that.tablesHtmlVisible = true;
})
.catch((error) => {
loading.close();
console.error('Error processing tables:', error);
});
});
const file = event.target.files[0];
if (file) {
// 处理文件逻辑
}
// 关键:重置 input 的值
event.target.value = '';
},
async onAddRow(mainId) {
await this.$api
.post(this.urlList.addRow, {
am_id: mainId,
article_id: this.articleId
})
.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 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 executeProofreading(data) {
console.log('data at line 1225:', data);
await this.$api
.post(this.urlList.executeProofreading, {
am_id: data.am_id,
record_id: data.id,
state: 1,
article_id: this.$route.query.id
})
.then(async (res) => {
if (res.status == 1) {
this.getDate();
this.getCommentList();
} else {
this.$message.error(res.msg);
}
})
.catch((err) => {
this.$message.error(err.msg);
});
},
async revokeProofreading(data) {
console.log('data at line 1225:', data);
await this.$api
.post(this.urlList.executeProofreading, {
am_id: data.am_id,
record_id: data.id,
state: 2,
article_id: this.$route.query.id
})
.then(async (res) => {
if (res.status == 1) {
this.getDate();
this.getCommentList();
} else {
this.$message.error(res.msg);
}
})
.catch((err) => {
this.$message.error(err.msg);
});
},
async editProofreading(data) {
console.log('data at line 1225:', data);
},
deleteProofreading(data, index) {
console.log('comment at line 480:', data);
},
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: '', title: '' };
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;
},
addUploadWordTable(data) {
this.lineStyle = { note: '', table: data.table_data, html_data: data.html_data };
this.lineStyle.visiTitle = 'Add Table';
this.threeVisible = true;
},
handleImageEdit(data, type) {
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) {
// console.log('content at line 1154:', content);
// console.log('content at line 976:', content);
var str = this.$commonJS.transformHtmlString(content);
if (type == 'imgNote') {
this.picStyle1.note = str;
} else if (type == 'imgTitle') {
this.picStyle1.title = str;
} else {
this.lineStyle1[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, title: data.image.title };
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 {
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'));
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() {
this.htmlContent = 'true';
},
// 获取数据
async getDate() {
this.imagesList = [];
let urlLInk = '';
let urlTask = {};
if (this.Art_Id != undefined) {
urlLInk = 'api/Preaccept/getArticleMainsNew';
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) {
this.Main_List = res.data.list.map(e=>{
e.checked = false;
return e;
});
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;
// this.Main_List[i].checked = false;
}
// 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;
},
// 确定保存图片
async savePic() {
this.picStyle.picUrl;
var str = this.picStyle1.note ? await this.$commonJS.decodeHtml(this.picStyle1.note) : '';
var titleStr = this.picStyle1.title ? await this.$commonJS.decodeHtml(this.picStyle1.title) : '';
if (this.picStyle.visiTitle == 'Edit Figure') {
this.$api
.post(this.urlList.editImage, {
ami_id: this.picStyle.ami_id,
url: this.picStyle.picUrl,
note: str,
title: titleStr
})
.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: str,
title: titleStr
})
.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');
});
},
async saveTable(content) {
const cleanTableData = (tableList) => {
if (tableList.length == 0) {
return [];
} else {
// 假设第一行是表头,保存表头
const header = tableList[0];
// 从第二行开始,移除与表头相同的行
const cleanedTable = tableList.filter((row, index) => {
// 如果是第一行,则保留
if (index === 0) return true;
// 比较当前行的每个单元格与表头是否相同
const isHeaderRow = row.every((cell, cellIndex) => {
return cell.text === header[cellIndex].text;
});
return !isHeaderRow; // 只保留与表头不同的行
});
return cleanedTable;
}
};
var cleanedTableList = content.table ? content.table : [];
cleanedTableList = cleanTableData(content.table);
var strTitle = this.lineStyle1.title ? this.lineStyle1.title : '';
var strNote = this.lineStyle1.note ? this.lineStyle1.note : '';
if (strNote != '') {
strNote = await this.$commonJS.decodeHtml(strNote);
}
if (strTitle != '') {
strTitle = await this.$commonJS.decodeHtml(strTitle);
}
const loading = this.$loading({
lock: true,
text: 'Loading...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
if (content && cleanedTableList && cleanedTableList.length > 0) {
if (this.lineStyle.visiTitle == 'Edit Table') {
this.$api
.post(this.urlList.editTable, {
amt_id: this.lineStyle.amt_id,
table_data: JSON.stringify(cleanedTableList),
html_data: content.html_data,
note: strNote,
title: strTitle
})
.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);
loading.close();
}
})
.catch((err) => {
this.$message.error(err);
loading.close();
});
} else {
this.$api
.post(this.urlList.addTable, {
article_id: this.articleId,
table_data: JSON.stringify(cleanedTableList),
html_data: content.html_data,
note: strNote,
title: strTitle
})
.then((res) => {
if (res.code == 0) {
this.$message.success('Successfully Add Table!');
this.threeVisible = false;
this.getDate();
loading.close();
this.$refs.commonWordHtmlTypeSetting.refresh('table');
} else {
this.$message.error(res.msg);
loading.close();
}
})
.catch((err) => {
this.$message.error(err);
loading.close();
});
}
} else {
this.$message.error('Please fill in the table content!');
loading.close();
}
},
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;
}
::v-deep .wordTableHtml table span blue sup {
color: rgb(0, 130, 170) !important;
}
::v-deep .wordTableHtml table span blue sub {
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; /* 滑块悬停时的颜色 */
}
.uploadWordTableBox {
width: 38vw;
position: relative;
height: auto;
overflow: hidden;
padding: 10px;
box-sizing: border-box;
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
}
::v-deep .el-drawer__header {
margin-bottom: 0;
padding: 15px;
}
.uploadWordTableBox .insertTable {
/* display: none; */
position: absolute;
right: 10px;
}
.uploadWordTableBox:hover {
background-color: #0066990d;
/* display: block !important; */
}
</style>