This commit is contained in:
2025-11-18 09:02:30 +08:00
parent ef0e8e83e0
commit 7489c63962
7 changed files with 683 additions and 38 deletions

View File

@@ -29,7 +29,7 @@ a {
position: absolute;
left: 260px;
right: 0;
top: 60px;
top: 40px;
bottom: 0;
padding-bottom: 30px;
-webkit-transition: left .3s ease-in-out;

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

View File

@@ -1,9 +1,10 @@
<template>
<div class="header">
<!-- 折叠按钮 -->
<div class="" @click="goHome" >
<i class="el-icon-s-home" style="font-size: 24px;line-height: 60px;color: #006699d1;"></i>
<div class="" style="display: flex;align-items: center">
<i class="el-icon-s-home" style="font-size: 24px;line-height: 40px;color: #006699d1;"@click="goHome"></i>
<img v-if="isProofreading" src="../../assets/img/Online Proofreading.png" alt="" height="24px" style="margin-left: 10px;margin-top: 4px;"/>
</div>
<div class="header-right">
@@ -85,6 +86,7 @@ export default {
props: ['home'],
data() {
return {
isProofreading: false,
collapse: false,
fullscreen: false,
name: 'unknown user',
@@ -277,6 +279,13 @@ export default {
$route: {
handler: function (route) {
this.link_path = route.path;
if(this.link_path.includes('OnlineProofreading')){
this.isProofreading=true;
}else{
this.isProofreading=false;
}
},
immediate: true
}
@@ -291,7 +300,7 @@ export default {
width: 100%;
display: flex;
justify-content: space-between;
height: 60px;
height: 40px;
padding: 0 20px;
color: #333639;
box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
@@ -302,7 +311,7 @@ export default {
float: left;
padding: 0 15px 0 21px;
cursor: pointer;
line-height: 60px;
line-height: 40px;
}
.header .logo {
@@ -337,7 +346,7 @@ export default {
.header-user-con {
display: flex;
height: 60px;
height: 40px;
align-items: center;
}
@@ -350,7 +359,7 @@ export default {
.changelang {
position: relative;
width: 90px;
height: 30px;
/* height: 30px; */
}
.btn-fullscreen {

View File

@@ -22,7 +22,7 @@
</template>
<template v-else>
<v-head2 :home="true"></v-head2>
<div style="width: 100%; height: calc(100% - 62px); overflow: hidden">
<div style="width: 100%; height: calc(100% - 42px); overflow: hidden">
<div class="content" style="padding: 0; overflow: hidden">
<!-- <transition name="move" mode="out-in"> -->
<!-- <keep-alive :include="tagsList"> -->

View File

@@ -16,7 +16,7 @@
<div
class="right-side"
style="
width: 285px;
width: 240px;
float: left;
height: 100%;
background-color: #fff;
@@ -25,33 +25,10 @@
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
<commonCatalogue
:urlList="{
img: 'api/Preaccept/getMainImages',
table: 'api/Preaccept/getMainTables'
@@ -71,7 +48,7 @@
@goToListComment="goToListComment"
style="width: 100%; height: 100%; padding: 0 0px; box-sizing: border-box; background-color: #fff"
>
</common-word-html-type-setting>
</commonCatalogue>
<input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
</div>
</div>
@@ -410,6 +387,8 @@
</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';
@@ -541,7 +520,8 @@ export default {
},
components: {
Tinymce,
bottomTinymce
bottomTinymce,
commonCatalogue
},
computed: {
combinedValue() {

View File

@@ -0,0 +1,656 @@
<template>
<!-- v-show="tables.length > 0 || images.length > 0" -->
<div
style="background-color: transparent !important; margin-top: 0px !important; height: 100%; padding: 0 !important; overflow: hidden"
class="ManuscirptList"
>
<!-- 图片缩略图区域 -->
<div>
Contents
</div>
<div
style="width: 240px; padding: 10px; height: calc(100% - 28px); box-sizing: border-box; overflow-y: auto"
class="arrlist"
>
<ul style="width: 100%; height: auto">
<li >
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: start">
<div
v-for="(item, index) in catalogueList"
style="width: calc(100%); display: flex; align-items: center; justify-content: space-between; color: #606266"
>
{{ item.title }}
<!-- <div
style="
width: calc(100% - 50px);
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis;
"
>
<p
v-html="index + 1 + '. ' + item.content"
style="font-size: 14px; width: 100%; overflow: hidden; line-height: 30px"
></p>
</div> -->
</div>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import { mediaUrl } from '@/common/js/commonJS.js'; // 引入通用逻辑
export default {
props: ['articleId', 'imgWidth', 'imgHeight', 'scale', 'isEdit', 'isShowEdit', 'urlList', 'content'],
data() {
return {
isShowComment: false,
isCollapse: false,
isEditComment: false,
isEditing: null, // 用于跟踪当前正在编辑的批注索引
selectedComment: null, // 存储当前选择的批注内容
comments: [], // 存储所有批注
isFresh: false,
currentSelectType: '0',
currentMenu: 1,
mediaUrl,
statusList: [
{ title: 'ALL', type: '0' },
{ title: 'Typed', type: '1' },
{ title: 'Unfettered', type: '2' }
],
catalogueList: [
{ title: 'Title ', type: '1' },
{ title: 'Author name', type: '2' },
{ title: 'Affialition', type: '3' },
{ title: 'Abstract & Keywords', type: '4' },
{ title: 'Main text', type: '5' },
{ title: 'Back Matter', type: '6' },
{ title: 'Editorial inforation', type: '7' },
{ title: 'Reference ', type: '8' },
],
images: [],
tables: [],
imagesList: [],
tablesList: [],
tablesHtml: [],
imagesHtml: [],
activeNames: ['images', 'tables']
};
},
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
console.log('el at line 263:', el);
// 聚焦元素
el.querySelector('textarea').focus();
}
}
},
methods: {
changeIsCollapse(e) {
localStorage.setItem('isCollapse', e);
},
isShowEditComment() {
if (localStorage.getItem('U_role')) {
var identity = localStorage.getItem('U_role');
if (identity.includes('editor')) {
this.isEditComment = true;
} else {
this.isEditComment = false;
}
}
},
changeComment() {
this.isShowComment = !this.isShowComment;
},
// 编辑评论,显示文本框
editComment(index) {
if (this.isEditComment) {
this.isEditing = index; // 设置当前正在编辑的评论索引
}
},
// 保存评论修改
saveComment(index, comment) {
if (this.isEditComment) {
this.$emit('addComment', comment);
this.isEditing = null; // 退出编辑模式
}
},
onAddComment(comment) {
if (this.isEditComment) {
this.$emit('onAddComment', comment.am_id);
// this.isEditing = null; // 退出编辑模式
}
},
// 删除评论
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('api/Preaccept/clearMainsRemark', {
am_id: comment.am_id
})
.then((res) => {
this.getCommentList();
});
// this.comments.splice(index, 1); // 删除评论
})
.catch(() => {});
}
},
getTime(timestamp) {
// 创建一个新的 Date 对象
// 转换为 Date 对象(乘以 1000因为 JavaScript 使用毫秒)
const date = new Date(timestamp * 1000);
// 获取年、月、日、时、分、秒
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的,所以加 1
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
// 格式化为 年-月-日 时:分:秒
const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
console.log(formattedDate); // 输出: 2025-10-20 15:30:03
return formattedDate;
},
goToComment(mainId) {
this.$nextTick(() => {
this.$emit('goToComment', mainId);
});
},
getCommentList() {
this.$api
.post('api/Preaccept/getNotes', {
article_id: this.articleId
})
.then((res) => {
this.comments = res.data.list;
});
},
addImage() {
this.$emit('addImage');
},
addTable() {
this.$emit('addTable');
},
handlePaperclip() {
this.$emit('handlePaperclip');
},
add(type) {
this.$emit('add', type);
},
edit(data, type) {
this.$emit('edit', data, type);
},
huifu(id) {
this.$emit('huifu', id);
},
handleSelectMenu(v) {
this.currentMenu = v;
this.currentSelectType = '0';
// if (v == 1) {
// this.getCommentList();
// } else {
this.filterData();
// }
},
selectType(v) {
this.currentSelectType = v.type;
this.filterData();
},
filterData(type) {
if (type) {
if (type == 'img') {
this.imagesList = [...this.images];
} else if (type == 'table') {
this.tablesList = [...this.tables];
}
} else {
if (this.currentMenu == 1) {
switch (this.currentSelectType) {
case '0':
this.imagesList = [...this.images];
break;
case '1':
this.imagesList = [...this.images].filter((e) => e.has_selected == 1);
break;
case '2':
this.imagesList = [...this.images].filter((e) => e.has_selected == 0);
break;
}
} else if (this.currentMenu == 2) {
switch (this.currentSelectType) {
case '0':
this.tablesList = [...this.tables];
// console.log('this.tablesList at line 393:', this.tablesList);
break;
case '1':
this.tablesList = [...this.tables].filter((e) => e.has_selected == 1);
break;
case '2':
this.tablesList = [...this.tables].filter((e) => e.has_selected == 0);
break;
}
} else {
}
}
},
goToListComment(id, type) {
this.$emit('goToListComment', id, type);
},
async refresh(type) {
this.isFresh = false;
this.$nextTick(async () => {
if (type == 'img') {
await this.getWordimgList();
await this.filterData();
} else if (type == 'table') {
await this.getWordTablesList();
await this.filterData();
}
this.$forceUpdate();
this.isFresh = true;
// this.$emit('loaded', loadedthis.images);
});
},
changeDataIsHidden(val, status, type) {
console.log('type at line 165:', type);
var index;
this.$nextTick(() => {
if (type == 'img') {
index = this.images.findIndex((element) => element.article_image_id === val.article_image_id);
console.log('index at line 170:', index);
this.images[index].isHidden = status;
} else {
index = this.tables.findIndex((element) => element.id === id);
this.tables[index].isHidden = status;
}
this.$forceUpdate();
});
},
changeIsHidden(index, status, type) {
console.log('type at line 165:', type);
this.$nextTick(() => {
if (type == 'img') {
this.images[index].isHidden = status;
} else {
this.tables[index].isHidden = status;
console.log('this.tables at line 169:', this.tables);
}
this.$forceUpdate();
});
},
onDragStart($event, item, index, type) {
this.$emit('onDragStart', $event, item, index, type);
},
changeActiveNames(e) {
console.log('e at line 156:', e);
if (['tables'].includes(e)) {
this.$nextTick(() => {
this.getWordTablesList();
});
}
if (['images'].includes(e)) {
this.$nextTick(() => {
this.getWordimgList();
});
}
},
openPreview(index, type) {
this.$nextTick(() => {
document.getElementById(type + '-modal-' + index).style.display = 'flex';
});
},
async getWordimgList() {
var that = this;
await this.$api
.post(this.urlList ? this.urlList.img : 'api/Article/getArticleImages', {
article_id: this.articleId
})
.then(async (res) => {
var list = [...res.data.list];
if (this.urlList) {
list = list.map((e) => {
return {
...e,
image: e.url,
article_image_id: e.ami_id
};
});
} else {
list = res.data.list;
}
if (list.length > 0) {
list.forEach((img, index) => {
var extension = img.image.split('.').pop().toLowerCase();
// if (extension === 'tif' || extension === 'jpg' || extension === 'jpeg' || extension === 'png') {
const modalContent = `<img src="${this.mediaUrl + img.image}" alt="Image ${index}" style="width:100%;" >`;
this.$commonJS.createImageModal(index, modalContent, 'img');
// }
});
}
this.images = list;
this.$emit('loaded', this.images);
});
},
isHeaderRow(rowIndex, table) {
var table =table;
var head = table[0];
return rowIndex < head[0].rowspan; // 假设前两行是表头
},
async getWordTablesList(callback) {
this.$api
.post(this.urlList ? this.urlList.table : 'api/Article/getArticleTable', {
article_id: this.articleId
})
.then(async (res) => {
if (this.urlList) {
this.tables =
res.data.list && res.data.list.length > 0
? res.data.list.map((e) => {
return {
...e,
article_table_id: e.amt_id,
table: JSON.parse(e.table_data)
};
})
: [];
} else {
this.tables =
res.data.list && res.data.list.length > 0
? res.data.list.map((e) => {
return {
...e,
table: JSON.parse(e.table)
};
})
: [];
}
await this.filterData('table');
if (this.tables.length > 0) {
this.tables.forEach((table, index) => {
var modalContent = `
<div class="wordTableHtml" style="background:#FFF;padding:20px">
<table
border="1"
style="
border-collapse: collapse;
width: 100%;
text-align: center;
table-layout: auto;"
>`;
if (table.table && table.table.length > 0) {
table.table.forEach((row,i) => {
modalContent += `<tr class="${this.isHeaderRow(i, table.table)? 'table-header-row':'' }">`;
row.forEach((cell) => {
modalContent += `
<td
colspan="${cell.colspan || 1}"
rowspan="${cell.rowspan || 1}"
style=""
>
<span>${cell.text}</span>
</td>`;
});
modalContent += `</tr>`;
});
}
modalContent += `</table></div>`;
this.$commonJS.createImageModal(index, modalContent, 'table', '');
});
}
});
}
},
async created() {
this.isCollapse = localStorage.getItem('isCollapse') == 'true' ? true : false;
console.log('localStorage.getItem', typeof localStorage.getItem('isCollapse'));
this.isShowEditComment();
this.isFresh = false;
this.$nextTick(async () => {
await this.getCommentList();
await this.getWordimgList();
await this.getWordTablesList();
await this.filterData();
this.isFresh = true;
});
},
async activated() {
this.isCollapse = localStorage.getItem('isCollapse') == 'true' ? true : false;
this.isFresh = false;
this.isShowEditComment();
this.$nextTick(async () => {
await this.getWordimgList();
await this.getWordTablesList();
await this.filterData();
this.isFresh = true;
});
},
mounted() {}
};
</script>
<style scoped>
.ManuscirptList {
background-color: none !important;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
color: #333639;
}
.ManuscirptList div {
cursor: pointer;
background-color: none !important;
}
::v-deep .wordTableHtml table {
cursor: pointer;
background-color: #fff !important;
border-bottom: 1px solid #000 !important;
}
.el-menu-vertical-demo {
width: 85px;
}
.el-menu-vertical-demo li {
display: flex;
flex-direction: column;
padding: 10px 6px !important;
font-size: 14px !important;
text-align: center;
}
::v-deep .el-menu-vertical-demo.el-menu-item:focus,
.el-menu-item:hover {
background-color: #f8f8f9 !important;
}
::v-deep .el-menu-item.is-active {
background-color: #2196f32e !important;
}
.isSelectType {
background-color: #2196f32e !important;
color: #006699;
}
li {
list-style: none;
}
.item_box {
background-color: #f2f3f5;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 6px;
overflow: hidden;
}
.go-transition .title {
background-color: #e5e6eb;
color: #767c82;
font-size: 13px;
padding: 2px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.go-transition .list-img {
padding: 6px 0;
background-color: #f2f3f5;
box-sizing: border-box;
}
.go-transition .list-img :hover {
transition: all 0.4s;
}
.go-content-charts-item-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 9px;
transition: all 0.7s linear;
}
.arraylist {
background-color: #f8f8f9;
}
.arrlist::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
min-height: 12px;
border: 4px solid transparent;
background-clip: content-box;
border-radius: 7px;
background-color: #c8d5e1;
}
.badge {
background-color: #f56c6c;
border-radius: 10px;
color: #fff;
display: inline-block;
font-size: 12px;
height: 18px;
line-height: 18px;
padding: 0 6px;
text-align: center;
white-space: nowrap;
border: 1px solid #fff;
position: absolute;
}
.comments-section {
padding: 10px;
box-sizing: border-box;
border: 1px solid #cecfd3;
border-left: 2px solid #cecfd3;
/* border-radius: 5px; */
background-color: #f9f9f9;
box-shadow: rgba(16, 17, 19, 0.06) 0px 1px 3px;
width: 300px;
background-color: #fafafa;
float: right;
position: absolute;
right: -302px;
top: 0px;
z-index: 999;
}
.comment-item {
padding: 5px 0;
border-bottom: 1px solid #ddd;
cursor: pointer;
box-sizing: border-box;
font-size: 14px;
}
.comment-item:last-child {
border-bottom: none;
}
.comment-details {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
.comment-details h3 {
margin-bottom: 10px;
}
.comment-details p {
margin-bottom: 10px;
}
.comment-details button {
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.comment-details button:hover {
background-color: #0056b3;
}
.comments-section ul,
.comments-section li {
list-style: none;
margin: 0;
padding: 0;
}
::v-deep.pizhu.el-link--default:hover {
border-color: #fc625d !important;
}
.go-mt {
/* background-color: #f2f3f5;
height: 28px; */
width: 200px;
float: right;
}
.double .item_box {
width: 46% !important;
}
.double .item_box .previewbox {
display: none;
}
.double .item_box .imgbox {
height: 50px !important;
width: auto !important;
}
.double .item_box .imgbox img {
height: 60px !important;
width: auto !important;
}
.double .go-transition .title {
font-size: 12px !important;
padding: 0 2px !important;
line-height: 20px !important;
}
.single {
}
</style>

View File

@@ -25,7 +25,7 @@
border-bottom: 2px solid #c7cdcf;
background-color: #fff;
position: fixed;
top: 60px;
top: 40px;
left: 285px;
z-index: 10;
right: 330px;