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

tijiao

Browse Source
This commit is contained in:
始于初见
2025-01-20 10:03:22 +08:00
parent 4c18bc54b8
commit ce347a77c1
15 changed files with 2565 additions and 733 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/deleteComment.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/img/selectComment.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/img/solveComment.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

722
src/components/common/Header.vue
View File

@@ -1,45 +1,47 @@
<template> <template>
<div class="header"> <div class="header">
<!-- 折叠按钮 --> <!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChage"> <div class="collapse-btn" @click="collapseChage" v-if="!home">
<i v-if="!collapse" class="el-icon-s-fold"></i> <i v-if="!collapse" class="el-icon-s-fold"></i>
<i v-else class="el-icon-s-unfold"></i> <i v-else class="el-icon-s-unfold"></i>
</div> </div>
<div class="logo"> <div class="collapse-btn" @click="goHome" v-if="home">
<div> <i class="el-icon-s-home"></i>
<img src="../../assets/img/logo.png" /> </div>
<p>{{ $t('system.title_1') }}</p> <div class="logo">
</div> <div>
<div> <img src="../../assets/img/logo.png" />
{{ $t('system.title_2') }} <p>{{ $t('system.title_1') }}</p>
</div> </div>
<!-- {{ $t('system.title') }} --> <div>
</div> {{ $t('system.title_2') }}
<div class="header-right"> </div>
<div class="header-user-con"> <!-- {{ $t('system.title') }} -->
<div class="changelang"> </div>
<el-dropdown trigger="click" @command="chengelang"> <div class="header-right">
<span class="el-dropdown-link"> <div class="header-user-con">
language <div class="changelang">
<i class="el-icon-arrow-down el-icon--right"></i> <el-dropdown trigger="click" @command="chengelang">
</span> <span class="el-dropdown-link">
<el-dropdown-menu slot="dropdown"> language
<el-dropdown-item command="en">english</el-dropdown-item> <i class="el-icon-arrow-down el-icon--right"></i>
<el-dropdown-item command="zh">中文简体</el-dropdown-item> </span>
</el-dropdown-menu> <el-dropdown-menu slot="dropdown">
</el-dropdown> <el-dropdown-item command="en">english</el-dropdown-item>
</div> <el-dropdown-item command="zh">中文简体</el-dropdown-item>
<!-- 全屏显示 --> </el-dropdown-menu>
<div class="btn-fullscreen" @click="handleFullScreen"> </el-dropdown>
<el-tooltip effect="dark" :content="fullscreen ? $t('system.noscreen') : $t('system.screen')" placement="bottom"> </div>
<i class="el-icon-rank"></i> <!-- 全屏显示 -->
</el-tooltip> <div class="btn-fullscreen" @click="handleFullScreen">
</div> <el-tooltip effect="dark" :content="fullscreen ? $t('system.noscreen') : $t('system.screen')" placement="bottom">
<!-- 消息中心 --> <i class="el-icon-rank"></i>
</el-tooltip>
</div>
<!-- 消息中心 -->
<!-- 身份切换 -->
<!-- 身份切换 --> <!-- <span style="font-size: 14px;margin-right: 8px;" v-if="this.user_cap.includes('author')">View as :</span>
<!-- <span style="font-size: 14px;margin-right: 8px;" v-if="this.user_cap.includes('author')">View as :</span>
<el-dropdown class="link_role" trigger="click" v-if="this.user_cap.includes('author')"> <el-dropdown class="link_role" trigger="click" v-if="this.user_cap.includes('author')">
<span style="color: #fff;cursor: pointer;"> <span style="color: #fff;cursor: pointer;">
Author<i class="el-icon-arrow-down el-icon--right"></i> Author<i class="el-icon-arrow-down el-icon--right"></i>
@@ -63,350 +65,346 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> --> </el-dropdown> -->
<!-- 用户头像 -->
<!-- 用户头像 --> <div class="user-avator" @click="skip_link()" v-if="hasorcie">
<div class="user-avator" @click="skip_link()" v-if="hasorcie"> <el-tooltip class="item" effect="light" content="Link to Orcid" placement="bottom-end">
<el-tooltip class="item" effect="light" content="Link to Orcid" placement="bottom-end"> <img src="../../assets/img/orcid.png" />
<img src="../../assets/img/orcid.png" /> </el-tooltip>
</el-tooltip> </div>
</div> <div class="user-avator" @click="skip_check()" v-else>
<div class="user-avator" @click="skip_check()" v-else> <el-tooltip class="item" effect="light" content="Connect to ORCID" placement="bottom-end">
<el-tooltip class="item" effect="light" content="Connect to ORCID" placement="bottom-end"> <img src="../../assets/img/orcno.png" />
<img src="../../assets/img/orcno.png" /> </el-tooltip>
</el-tooltip> </div>
</div> <!-- 用户名下拉菜单 -->
<!-- 用户名下拉菜单 --> <el-dropdown class="user-name" trigger="click" @command="handleCommand">
<el-dropdown class="user-name" trigger="click" @command="handleCommand"> <span class="el-dropdown-link">
<span class="el-dropdown-link"> {{ username }}
{{ username }} <i class="el-icon-caret-bottom"></i>
<i class="el-icon-caret-bottom"></i> </span>
</span> <el-dropdown-menu slot="dropdown">
<el-dropdown-menu slot="dropdown"> <!-- <el-dropdown-item divided command="personcenter">Personal Center</el-dropdown-item> -->
<!-- <el-dropdown-item divided command="personcenter">Personal Center</el-dropdown-item> --> <el-dropdown-item divided command="loginout">{{ $t('system.loyout') }}</el-dropdown-item>
<el-dropdown-item divided command="loginout">{{ $t('system.loyout') }}</el-dropdown-item> </el-dropdown-menu>
</el-dropdown-menu> </el-dropdown>
</el-dropdown> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import bus from '../common/bus'; import bus from '../common/bus';
export default { export default {
data() { props: ['home'],
return { data() {
collapse: false, return {
fullscreen: false, collapse: false,
name: 'unknown user', fullscreen: false,
message: 2, name: 'unknown user',
hasorcie: false, message: 2,
link_path: '', hasorcie: false,
user_id: localStorage.getItem('U_id'), link_path: '',
user_cap: localStorage.getItem('U_role'), user_id: localStorage.getItem('U_id'),
orcid: '', user_cap: localStorage.getItem('U_role'),
orcidLink: 'https://orcid.org/oauth/authorize?client_id=APP-PKF0BGRP6DWM6FUB&response_type=code&scope=/authenticate&redirect_uri=https://submission.tmrjournals.com/orcidBind', orcid: '',
langArr: [{ orcidLink:
value: 'zh', 'https://orcid.org/oauth/authorize?client_id=APP-PKF0BGRP6DWM6FUB&response_type=code&scope=/authenticate&redirect_uri=https://submission.tmrjournals.com/orcidBind',
label: '中文' langArr: [
}, {
{ value: 'zh',
value: 'en', label: '中文'
label: 'English' },
} {
], value: 'en',
curStartTime: '2019-07-31 08:00:00', label: 'English'
daojishi: '', }
day: '0', ],
hour: '00', curStartTime: '2019-07-31 08:00:00',
min: '00', daojishi: '',
second: '00', day: '0',
}; hour: '00',
}, min: '00',
created() { second: '00'
if(!this.$route.meta.hideSidebar){ };
this.collapse=true },
created() {
}else{ this.initORCID();
this.collapse=false if (this.user_id == 24) {
this.daojishi = '2021.9.3 - 2021.9.30';
this.curStartTime = '2021-10-01 00:00:00';
this.countTime();
}
if (this.user_id == 25) {
this.daojishi = '2021.9.6 - 2021.12.31';
this.curStartTime = '2022-01-01 00:00:00';
this.countTime();
}
},
computed: {
username() {
let username = localStorage.getItem('U_name');
return username ? username : this.name;
},
onRoutes() {
0;
return this.$route.path.replace('/', '');
},
userrole() {
let userrole = localStorage.getItem('U_status');
if (userrole == 1) {
return this.$t('total.author');
} else if (userrole == 2) {
return this.$t('total.editor');
} else if (userrole == 'admin') {
return this.$t('total.admin');
} else {
return this.$t('total.reviewers');
} }
this.initORCID(); }
if (this.user_id == 24) { },
this.daojishi = '2021.9.3 - 2021.9.30' methods: {
this.curStartTime = '2021-10-01 00:00:00' goHome() {
this.countTime(); this.$router.push('/');
} },
if (this.user_id == 25) { // 用户名下拉菜单选择事件
this.daojishi = '2021.9.6 - 2021.12.31' handleCommand(command) {
this.curStartTime = '2022-01-01 00:00:00' // 个人中心
this.countTime(); if (command == 'personcenter') {
} this.$router.push('/percenter');
}, }
computed: { // 退出系统
username() { if (command == 'loginout') {
let username = localStorage.getItem('U_name'); localStorage.removeItem('U_role');
return username ? username : this.name; localStorage.removeItem('U_id');
}, localStorage.removeItem('U_name');
onRoutes() { localStorage.removeItem('U_status');
0 localStorage.removeItem('ms_journal_alias');
return this.$route.path.replace('/', ''); this.$router.push('/login');
}, }
userrole() { },
let userrole = localStorage.getItem('U_status'); // 侧边栏折叠
if (userrole == 1) { collapseChage() {
return this.$t('total.author'); this.collapse = !this.collapse;
} else if (userrole == 2) { bus.$emit('collapse', this.collapse);
return this.$t('total.editor'); },
} else if (userrole == 'admin') { //判断orcid
return this.$t('total.admin'); initORCID() {
} else { this.$api
return this.$t('total.reviewers'); .post('api/user/checkOrcid', {
} account: localStorage.getItem('U_name')
} })
}, .then((res) => {
methods: { this.hasorcie = res.userinfo.orcid == '' ? false : true;
// 用户名下拉菜单选择事件 this.orcid = res.userinfo.orcid;
handleCommand(command) { })
// 个人中心 .catch((err) => {
if (command == 'personcenter') { console.log(err);
this.$router.push('/percenter'); });
} },
// 退出系统 // 全屏事件
if (command == 'loginout') { handleFullScreen() {
localStorage.removeItem('U_role'); let element = document.documentElement;
localStorage.removeItem('U_id'); if (this.fullscreen) {
localStorage.removeItem('U_name'); if (document.exitFullscreen) {
localStorage.removeItem('U_status'); document.exitFullscreen();
localStorage.removeItem('ms_journal_alias'); } else if (document.webkitCancelFullScreen) {
this.$router.push('/login'); document.webkitCancelFullScreen();
} } else if (document.mozCancelFullScreen) {
}, document.mozCancelFullScreen();
// 侧边栏折叠 } else if (document.msExitFullscreen) {
collapseChage() { document.msExitFullscreen();
this.collapse = !this.collapse; }
bus.$emit('collapse', this.collapse); } else {
}, if (element.requestFullscreen) {
//判断orcid element.requestFullscreen();
initORCID() { } else if (element.webkitRequestFullScreen) {
this.$api element.webkitRequestFullScreen();
.post('api/user/checkOrcid', { } else if (element.mozRequestFullScreen) {
account: localStorage.getItem('U_name') element.mozRequestFullScreen();
}) } else if (element.msRequestFullscreen) {
.then((res) => { // IE11
this.hasorcie = res.userinfo.orcid == '' ? false : true; element.msRequestFullscreen();
this.orcid = res.userinfo.orcid; }
}) }
.catch((err) => { this.fullscreen = !this.fullscreen;
console.log(err); },
}); //切换语言
}, chengelang(commond) {
// 全屏事件 localStorage.setItem('langs', commond);
handleFullScreen() { this.$router.go(0);
let element = document.documentElement; },
if (this.fullscreen) { skip_link() {
if (document.exitFullscreen) { location.href = 'https://orcid.org/' + this.orcid;
document.exitFullscreen(); },
} else if (document.webkitCancelFullScreen) { skip_check() {
document.webkitCancelFullScreen(); location.href = this.orcidLink;
} else if (document.mozCancelFullScreen) { },
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
},
//切换语言
chengelang(commond) {
localStorage.setItem('langs', commond);
this.$router.go(0);
},
skip_link() {
location.href = 'https://orcid.org/' + this.orcid;
},
skip_check() {
location.href = this.orcidLink;
},
// 倒计时
// 倒计时 countTime() {
countTime() { // 获取当前时间
// 获取当前时间 let date = new Date();
let date = new Date() let now = date.getTime();
let now = date.getTime() // 设置截止时间
// 设置截止时间 let endDate = new Date(this.curStartTime); // this.curStartTime需要倒计时的日期
let endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期 let end = endDate.getTime();
let end = endDate.getTime() // 时间差
// 时间差 let leftTime = end - now;
let leftTime = end - now // 定义变量 d,h,m,s保存倒计时的时间
// 定义变量 d,h,m,s保存倒计时的时间 if (leftTime >= 0) {
if (leftTime >= 0) { // 天
// 天 this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24) // 时
// 时 let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24) this.hour = h < 10 ? '0' + h : h;
this.hour = h < 10 ? '0' + h : h // 分
// 分 let m = Math.floor((leftTime / 1000 / 60) % 60);
let m = Math.floor(leftTime / 1000 / 60 % 60) this.min = m < 10 ? '0' + m : m;
this.min = m < 10 ? '0' + m : m // 秒
// 秒 let s = Math.floor((leftTime / 1000) % 60);
let s = Math.floor(leftTime / 1000 % 60) this.second = s < 10 ? '0' + s : s;
this.second = s < 10 ? '0' + s : s } else {
} else { this.day = 0;
this.day = 0 this.hour = '00';
this.hour = '00' this.min = '00';
this.min = '00' this.second = '00';
this.second = '00' }
} // 等于0的时候不调用
// 等于0的时候不调用 if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) { return;
return } else {
} else { // 递归每秒调用countTime方法，显示动态时间效果,
// 递归每秒调用countTime方法，显示动态时间效果, setTimeout(this.countTime, 1000);
setTimeout(this.countTime, 1000) }
} }
}, },
}, mounted() {
mounted() { if (document.body.clientWidth < 1000) {
this.collapseChage();
if (document.body.clientWidth < 1000) { }
this.collapseChage(); },
} watch: {
}, $route: {
watch: { handler: function (route) {
$route: { this.link_path = route.path;
handler: function(route) { },
this.link_path = route.path immediate: true
}, }
immediate: true }
} };
}
};
</script> </script>
<style scoped> <style scoped>
.header { .header {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 70px; height: 70px;
font-size: 22px; font-size: 22px;
color: #fff; color: #fff;
} }
.collapse-btn { .collapse-btn {
float: left; float: left;
padding: 0 15px 0 21px; padding: 0 15px 0 21px;
cursor: pointer; cursor: pointer;
line-height: 70px; line-height: 70px;
} }
.header .logo { .header .logo {
float: left; float: left;
padding-top: 19px; padding-top: 19px;
vertical-align: middle; vertical-align: middle;
font-size: 20px; font-size: 20px;
} }
.header .logo img { .header .logo img {
width: 84px; width: 84px;
height: 20px; height: 20px;
margin-top: -4px; margin-top: -4px;
margin-right: 15px; margin-right: 15px;
padding-left: 12px; padding-left: 12px;
} }
.header .logo>div { .header .logo > div {
float: left; float: left;
height: 40px; height: 40px;
} }
.header .logo p { .header .logo p {
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
} }
.header-right { .header-right {
float: right; float: right;
padding-right: 50px; padding-right: 50px;
} }
.header-user-con { .header-user-con {
display: flex; display: flex;
height: 70px; height: 70px;
align-items: center; align-items: center;
} }
.btn-fullscreen { .btn-fullscreen {
transform: rotate(45deg); transform: rotate(45deg);
margin-right: 5px; margin-right: 5px;
font-size: 24px; font-size: 24px;
} }
.changelang { .changelang {
position: relative; position: relative;
width: 90px; width: 90px;
height: 30px; height: 30px;
} }
.btn-fullscreen { .btn-fullscreen {
position: relative; position: relative;
width: 30px; width: 30px;
height: 30px; height: 30px;
text-align: center; text-align: center;
border-radius: 15px; border-radius: 15px;
cursor: pointer; cursor: pointer;
} }
.btn-bell-badge { .btn-bell-badge {
position: absolute; position: absolute;
right: 0; right: 0;
top: -2px; top: -2px;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 4px; border-radius: 4px;
background: #f56c6c; background: #f56c6c;
color: #fff; color: #fff;
} }
.btn-bell .el-icon-bell { .btn-bell .el-icon-bell {
color: #fff; color: #fff;
} }
.user-name { .user-name {
margin-left: 10px; margin-left: 10px;
} }
.user-avator { .user-avator {
margin-left: 20px; margin-left: 20px;
} }
.user-avator img { .user-avator img {
display: block; display: block;
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
.el-dropdown-link { .el-dropdown-link {
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
} }
.el-dropdown-menu__item { .el-dropdown-menu__item {
text-align: center; text-align: center;
} }
#colgreen {
color: rgb(142, 150, 74);
}
#colgreen {
color: rgb(142, 150, 74);
}
</style> </style>

403
src/components/common/Header2.vue Normal file
View File

@@ -0,0 +1,403 @@
<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>
<div class="header-right">
<div class="header-user-con">
<div class="changelang">
<el-dropdown trigger="click" @command="chengelang">
<span class="el-dropdown-link">
language
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="en">english</el-dropdown-item>
<el-dropdown-item command="zh">中文简体</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<!-- 全屏显示 -->
<div class="btn-fullscreen" @click="handleFullScreen">
<el-tooltip effect="dark" :content="fullscreen ? $t('system.noscreen') : $t('system.screen')" placement="bottom">
<i class="el-icon-rank"></i>
</el-tooltip>
</div>
<!-- 消息中心 -->
<!-- 身份切换 -->
<!-- <span style="font-size: 14px;margin-right: 8px;" v-if="this.user_cap.includes('author')">View as :</span>
<el-dropdown class="link_role" trigger="click" v-if="this.user_cap.includes('author')">
<span style="color: #fff;cursor: pointer;">
Author<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu :default-active="onRoutes" router slot="dropdown" style="cursor: pointer;">
<router-link :to="{path:'/dashboard'}">
<el-dropdown-item>Author</el-dropdown-item>
</router-link>
<router-link :to="{path:'/managing'}" v-if="this.user_cap.includes('chief')">
<el-dropdown-item>Editor-in-Chief</el-dropdown-item>
</router-link>
<router-link :to="{path:'/editorial'}" v-if="this.user_cap.includes(',board')">
<el-dropdown-item>Editorial board member</el-dropdown-item>
</router-link>
<router-link :to="{path:'/peerewer'}" v-if="this.user_cap.includes('reviewer')">
<el-dropdown-item>Reviewer</el-dropdown-item>
</router-link>
<router-link :to="{path:'/youthed'}" v-if="this.user_cap.includes('yboard')">
<el-dropdown-item>Young scientist member</el-dropdown-item>
</router-link>
</el-dropdown-menu>
</el-dropdown> -->
<!-- 用户头像 -->
<div class="user-avator" @click="skip_link()" v-if="hasorcie">
<el-tooltip class="item" effect="light" content="Link to Orcid" placement="bottom-end">
<img src="../../assets/img/orcid.png" />
</el-tooltip>
</div>
<div class="user-avator" @click="skip_check()" v-else>
<el-tooltip class="item" effect="light" content="Connect to ORCID" placement="bottom-end">
<img src="../../assets/img/orcno.png" />
</el-tooltip>
</div>
<!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{ username }}
<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item divided command="personcenter">Personal Center</el-dropdown-item> -->
<el-dropdown-item divided command="loginout">{{ $t('system.loyout') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
</template>
<script>
import bus from '../common/bus';
export default {
props: ['home'],
data() {
return {
collapse: false,
fullscreen: false,
name: 'unknown user',
message: 2,
hasorcie: false,
link_path: '',
user_id: localStorage.getItem('U_id'),
user_cap: localStorage.getItem('U_role'),
orcid: '',
orcidLink:
'https://orcid.org/oauth/authorize?client_id=APP-PKF0BGRP6DWM6FUB&response_type=code&scope=/authenticate&redirect_uri=https://submission.tmrjournals.com/orcidBind',
langArr: [
{
value: 'zh',
label: '中文'
},
{
value: 'en',
label: 'English'
}
],
curStartTime: '2019-07-31 08:00:00',
daojishi: '',
day: '0',
hour: '00',
min: '00',
second: '00'
};
},
created() {
this.initORCID();
if (this.user_id == 24) {
this.daojishi = '2021.9.3 - 2021.9.30';
this.curStartTime = '2021-10-01 00:00:00';
this.countTime();
}
if (this.user_id == 25) {
this.daojishi = '2021.9.6 - 2021.12.31';
this.curStartTime = '2022-01-01 00:00:00';
this.countTime();
}
},
computed: {
username() {
let username = localStorage.getItem('U_name');
return username ? username : this.name;
},
onRoutes() {
0;
return this.$route.path.replace('/', '');
},
userrole() {
let userrole = localStorage.getItem('U_status');
if (userrole == 1) {
return this.$t('total.author');
} else if (userrole == 2) {
return this.$t('total.editor');
} else if (userrole == 'admin') {
return this.$t('total.admin');
} else {
return this.$t('total.reviewers');
}
}
},
methods: {
goHome() {
this.$router.push('/');
},
// 用户名下拉菜单选择事件
handleCommand(command) {
// 个人中心
if (command == 'personcenter') {
this.$router.push('/percenter');
}
// 退出系统
if (command == 'loginout') {
localStorage.removeItem('U_role');
localStorage.removeItem('U_id');
localStorage.removeItem('U_name');
localStorage.removeItem('U_status');
localStorage.removeItem('ms_journal_alias');
this.$router.push('/login');
}
},
// 侧边栏折叠
collapseChage() {
this.collapse = !this.collapse;
bus.$emit('collapse', this.collapse);
},
//判断orcid
initORCID() {
this.$api
.post('api/user/checkOrcid', {
account: localStorage.getItem('U_name')
})
.then((res) => {
this.hasorcie = res.userinfo.orcid == '' ? false : true;
this.orcid = res.userinfo.orcid;
})
.catch((err) => {
console.log(err);
});
},
// 全屏事件
handleFullScreen() {
let element = document.documentElement;
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
},
//切换语言
chengelang(commond) {
localStorage.setItem('langs', commond);
this.$router.go(0);
},
skip_link() {
location.href = 'https://orcid.org/' + this.orcid;
},
skip_check() {
location.href = this.orcidLink;
},
// 倒计时
countTime() {
// 获取当前时间
let date = new Date();
let now = date.getTime();
// 设置截止时间
let endDate = new Date(this.curStartTime); // this.curStartTime需要倒计时的日期
let end = endDate.getTime();
// 时间差
let leftTime = end - now;
// 定义变量 d,h,m,s保存倒计时的时间
if (leftTime >= 0) {
// 天
this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
// 时
let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
this.hour = h < 10 ? '0' + h : h;
// 分
let m = Math.floor((leftTime / 1000 / 60) % 60);
this.min = m < 10 ? '0' + m : m;
// 秒
let s = Math.floor((leftTime / 1000) % 60);
this.second = s < 10 ? '0' + s : s;
} else {
this.day = 0;
this.hour = '00';
this.min = '00';
this.second = '00';
}
// 等于0的时候不调用
if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
return;
} else {
// 递归每秒调用countTime方法，显示动态时间效果,
setTimeout(this.countTime, 1000);
}
}
},
mounted() {
if (document.body.clientWidth < 1000) {
this.collapseChage();
}
},
watch: {
$route: {
handler: function (route) {
this.link_path = route.path;
},
immediate: true
}
}
};
</script>
<style scoped>
.header {
background-color: #fff;
position: relative;
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: space-between;
height: 60px;
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);
border-bottom:1px solid #f0f0f0;
}
.collapse-btn {
float: left;
padding: 0 15px 0 21px;
cursor: pointer;
line-height: 60px;
}
.header .logo {
float: left;
padding-top: 19px;
vertical-align: middle;
font-size: 20px;
}
.header .logo img {
width: 84px;
height: 20px;
margin-top: -4px;
margin-right: 15px;
padding-left: 12px;
}
.header .logo > div {
float: left;
height: 40px;
}
.header .logo p {
font-size: 12px;
text-align: center;
}
.header-right {
float: right;
padding-right: 50px;
}
.header-user-con {
display: flex;
height: 60px;
align-items: center;
}
.btn-fullscreen {
transform: rotate(45deg);
margin-right: 5px;
font-size: 24px;
}
.changelang {
position: relative;
width: 90px;
height: 30px;
}
.btn-fullscreen {
position: relative;
width: 30px;
height: 30px;
text-align: center;
border-radius: 15px;
cursor: pointer;
}
.btn-bell-badge {
position: absolute;
right: 0;
top: -2px;
width: 8px;
height: 8px;
border-radius: 4px;
background: #f56c6c;
color: #333639;
}
.btn-bell .el-icon-bell {
color: #333639;
}
.user-name {
margin-left: 10px;
}
.user-avator {
margin-left: 20px;
}
.user-avator img {
display: block;
width: 20px;
height: 20px;
}
.el-dropdown-link {
color: #333639;
cursor: pointer;
}
.el-dropdown-menu__item {
text-align: center;
}
#colgreen {
color: rgb(142, 150, 74);
}
</style>

50
src/components/common/Home.vue
View File

@@ -1,24 +1,41 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<v-head></v-head> <template v-if="!this.$route.meta.hideSidebar">
<v-head></v-head>
<v-sidebar ></v-sidebar>
<div class="content-box" :class="{ 'content-collapse': collapse }"> <v-sidebar></v-sidebar>
<v-tags></v-tags> <div class="content-box" :class="{ 'content-collapse': collapse }">
<div class="content"> <v-tags></v-tags>
<transition name="move" mode="out-in"> <div class="content">
<keep-alive :include="tagsList"> <transition name="move" mode="out-in">
<router-view ></router-view> <keep-alive :include="tagsList">
</keep-alive> <router-view></router-view>
</transition> </keep-alive>
<el-backtop target=".content"></el-backtop> </transition>
<el-backtop target=".content"></el-backtop>
</div>
</div> </div>
</div> </template>
<template v-else>
<v-head2 :home="true"></v-head2>
<div style="width: 100%;height: calc(100% - 62px);overflow: hidden;">
<div class="content" style="padding: 0;overflow: hidden;">
<transition name="move" mode="out-in">
<keep-alive :include="tagsList">
<router-view></router-view>
</keep-alive>
</transition>
<el-backtop target=".content"></el-backtop>
</div>
</div>
</template>
</div> </div>
</template> </template>
<script> <script>
import vHead from './Header.vue'; import vHead from './Header.vue';
import vHead2 from './Header2.vue';
import vSidebar from './Sidebar.vue'; import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue'; import vTags from './Tags.vue';
import bus from './bus'; import bus from './bus';
@@ -31,16 +48,11 @@ export default {
}, },
components: { components: {
vHead, vHead,
vHead2,
vSidebar, vSidebar,
vTags vTags
}, },
created() { created() {
if(!this.$route.meta.hideSidebar){
this.collapse=true
}else{
this.collapse=false
}
bus.$on('collapse-content', (msg) => { bus.$on('collapse-content', (msg) => {
this.collapse = msg; this.collapse = msg;
localStorage.setItem('collapse', this.collapse); localStorage.setItem('collapse', this.collapse);

7
src/components/common/Sidebar.vue
View File

@@ -636,12 +636,7 @@ export default {
} }
}, },
created() { created() {
if(!this.$route.meta.hideSidebar){
this.collapse=true
}else{
this.collapse=false
}
localStorage.setItem('collapse', this.collapse); localStorage.setItem('collapse', this.collapse);
if (this.userrole == 2) { if (this.userrole == 2) {
//其余的身份（显示作者） //其余的身份（显示作者）

4
src/components/common/langs/en.js
View File

@@ -355,6 +355,10 @@ const en = {
}, },
commonTable: { commonTable: {
add: 'Add', add: 'Add',
delete: 'Delete',
reply: 'Reply',
solve: 'Solve',
Resolved: 'Resolved',
preview: 'Preview', preview: 'Preview',
link: 'Positioning', link: 'Positioning',
Typed: 'Typed', Typed: 'Typed',

4
src/components/common/langs/zh.js
View File

@@ -348,6 +348,10 @@ const zh = {
}, },
commonTable: { commonTable: {
add: '新增', add: '新增',
delete: '删除',
reply: '答复',
solve: '解决',
Resolved: '已解决',
preview: '预览', preview: '预览',
positioning: '定位', positioning: '定位',
edit: '编辑', edit: '编辑',

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

@@ -1,11 +1,5 @@
<template> <template>
<div style="height:100%"> <div style="height: 100%">
<!-- <div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item> <i class="el-icon-document-copy"></i> Text Proofread </el-breadcrumb-item>
</el-breadcrumb>
</div> -->
<div <div
class="container" class="container"
style=" style="
@@ -58,7 +52,6 @@
<div class="unfetteredBox" style="height: 100%"> <div class="unfetteredBox" style="height: 100%">
<common-word-html-type-setting <common-word-html-type-setting
:urlList="{ :urlList="{
img: 'api/Preaccept/getMainImages', img: 'api/Preaccept/getMainImages',
table: 'api/Preaccept/getMainTables' table: 'api/Preaccept/getMainTables'
@@ -79,11 +72,8 @@
</common-word-html-type-setting> </common-word-html-type-setting>
</div> </div>
</div> </div>
<div <div style="width: 100%; width: calc(100% - 285px); float: right; height: calc(100%); background-color: #e4e9ed">
v-if="htmlContent" <!-- <div class="toolbar">
style="width: 100%; width: calc(100% - 295px); float: right; height: calc(100%); background-color: #f8f8f9"
>
<div class="toolbar">
<div class="toolbar_item" @click="handleImageAdd('img')"> <div class="toolbar_item" @click="handleImageAdd('img')">
<img src="@/assets/img/upload.png" style="object-fit: contain" /> <img src="@/assets/img/upload.png" style="object-fit: contain" />
<span>Add Figure </span> <span>Add Figure </span>
@@ -92,16 +82,19 @@
<img src="@/assets/img/uploadTable.png" style="object-fit: contain" /> <img src="@/assets/img/uploadTable.png" style="object-fit: contain" />
<span>Add Table </span> <span>Add Table </span>
</div> </div>
</div> </div> -->
<!---->
<common-word <common-word
v-if="htmlContent" v-if="htmlContent"
ref="commonWord" ref="commonWord"
:value="htmlContent" :value="htmlContent"
:contentList="Main_List" :contentList="Main_List"
:comments="comments"
:wordStyle="wordStyle" :wordStyle="wordStyle"
@onDrop="onDrop" @onDrop="onDrop"
@saveContent="saveContent"
@deleteComment="deleteComment"
@editComment="editComment"
@loaded="loadedWord" @loaded="loadedWord"
@onEdit="onEdit" @onEdit="onEdit"
@onDelete="onDelete" @onDelete="onDelete"
@@ -109,9 +102,15 @@
@onAddComment="onAddComment" @onAddComment="onAddComment"
@onEditTitle="onEditTitle" @onEditTitle="onEditTitle"
@changeComment="changeComment" @changeComment="changeComment"
style="width: calc(100%); height: calc(100% - 50px); margin-top: -1px" style="width: calc(100%); height: calc(100%)"
:style="`100%`" :style="`100%`"
></common-word> >
<template slot="comment">
<div style="" class="commentList annotations">
</div>
</template>
</common-word>
</div> </div>
<!-- <div style="height: 20px" v-if="Art_Doi == undefined"></div> --> <!-- <div style="height: 20px" v-if="Art_Doi == undefined"></div> -->
@@ -222,10 +221,10 @@
:close-on-click-modal="false" :close-on-click-modal="false"
> >
<el-form ref="editMes" :model="commentForm" label-width="115px"> <el-form ref="editMes" :model="commentForm" label-width="115px">
<el-form-item label="Select Content:" v-if="commentForm.commentLabel"> <el-form-item label="Select Content:" v-if="commentForm.commentLabel">
<p style="background: #eef0f4;line-height: 20px;padding: 10px;box-sizing: border-box;">{{ commentForm.commentLabel }}</p> <p style="background: #eef0f4; line-height: 20px; padding: 10px; box-sizing: border-box">
{{ commentForm.commentLabel }}
</p>
</el-form-item> </el-form-item>
<el-form-item label="Word"> <el-form-item label="Word">
<span slot="label"> <span slot="label">
@@ -297,6 +296,8 @@ import bottomTinymce from '@/components/page/components/Tinymce';
export default { export default {
data() { data() {
return { return {
isEditComment: false,
comments: [],
remarkImageUrl: 'https://submission.tmrjournals.com/public/usericon/20241222/4e77ba3f29ce3cf798b36f24dc411b76.png', remarkImageUrl: 'https://submission.tmrjournals.com/public/usericon/20241222/4e77ba3f29ce3cf798b36f24dc411b76.png',
isFirstComponentLoaded: false, isFirstComponentLoaded: false,
isWordComponentLoaded: false, isWordComponentLoaded: false,
@@ -428,20 +429,30 @@ export default {
} }
}, },
created() { created() {
bus.$on('collapse', (msg) => { this.isShowEditComment();
this.collapse = msg;
localStorage.setItem('collapse', this.collapse);
bus.$emit('collapse-content', msg);
});
this.getDate(); this.getDate();
this.getCommentList();
// this.loadDictionary().catch(console.error); // this.loadDictionary().catch(console.error);
}, },
activated() { activated() {
this.isShowEditComment();
this.getDate(); this.getDate();
this.getCommentList();
}, },
methods: { 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() { loadedWord() {
this.isWordComponentLoaded = true; this.isWordComponentLoaded = true;
}, },
@@ -516,8 +527,29 @@ export default {
this.addComment(content); this.addComment(content);
} }
}, },
deleteComment(comment, index) {
async saveContent(content) { 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.getDate()
this.getCommentList();
});
// this.comments.splice(index, 1); // 删除评论
})
.catch(() => {});
}
},
async saveContent(content,am_id) {
var that = this; var that = this;
var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : ''; var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : '';
if (str == '') { if (str == '') {
@@ -528,7 +560,7 @@ export default {
} }
await that.$api await that.$api
.post(that.urlList.editContent, { .post(that.urlList.editContent, {
am_id: this.currentId, am_id: am_id,
content: str content: str
}) })
.then(async (res) => { .then(async (res) => {
@@ -684,7 +716,6 @@ export default {
}, },
async addComment(content) { async addComment(content) {
console.log('content at line 603:', this.commentForm); console.log('content at line 603:', this.commentForm);
var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : ''; var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : '';
if (str == '') { if (str == '') {
this.$message({ this.$message({
@@ -702,6 +733,7 @@ export default {
this.$forceUpdate(); this.$forceUpdate();
this.commentVisible = false; this.commentVisible = false;
this.getDate(); this.getDate();
this.getCommentList();
this.$nextTick(() => {}); this.$nextTick(() => {});
} else { } else {
this.$message.error(res.msg); this.$message.error(res.msg);
@@ -724,51 +756,48 @@ export default {
} }
); );
} }
console.log('data at line 575:', data); },
editComment(comment) {
this.commentForm = {
...comment
};
this.commentVisible = true;
}, },
async onAddComment(data) { async onAddComment(data) {
console.log('data at line 858:', data);
var form = this.Main_List.find((item) => item.am_id == data.mainId); var form = this.Main_List.find((item) => item.am_id == data.mainId);
this.commentForm = { this.commentForm = {
commentLabel:data.label, commentLabel: data.label ? data.label : '',
...form ...form
}; };
this.commentVisible = true; this.commentVisible = true;
}, },
async onEditTitle(data) { async onEditTitle(data) {
var url; var url;
switch (data.value){ switch (data.value) {
case 1: case 1:
url = 'api/Preaccept/changeH1'; url = 'api/Preaccept/changeH1';
break; break;
case 2: case 2:
url = 'api/Preaccept/changeH2'; url = 'api/Preaccept/changeH2';
break; break;
case 3: case 3:
url = 'api/Preaccept/changeH3'; url = 'api/Preaccept/changeH3';
break; break;
} }
console.log('data at line 739:', data) console.log('data at line 739:', data);
await this.$api await this.$api
.post(url, { .post(url, {
am_id: data.mainId, am_id: data.mainId
})
}) .then(async (res) => {
.then(async (res) => { this.getDate();
this.getDate(); this.getCommentList();
}) })
.catch((err) => { .catch((err) => {
this.$message.error(err.msg); this.$message.error(err.msg);
}); });
// var form = this.Main_List.find((item) => item.am_id == data.mainId);
// this.commentForm = {
// commentLabel:data.label,
// ...form
// };
// this.commentVisible = true;
}, },
clearButton() { clearButton() {
var deleteButtons = document.querySelectorAll('.wordButtonContainer'); var deleteButtons = document.querySelectorAll('.wordButtonContainer');
@@ -915,120 +944,123 @@ export default {
}) })
.then((res) => { .then((res) => {
this.comments = res.data.list; this.comments = res.data.list;
console.log('this.comments at line 537:', this.comments); // this.positionAnnotations();
}); });
}, },
getWord() { getWord() {
var htmlContent = `<h3 class="man_Title" contenteditable="false">${this.detailTitle} </h3>`; // var htmlContent = `<h3 class="man_Title" contenteditable="false">${this.detailTitle} </h3>`;
htmlContent += this.Main_List.map((item) => { // htmlContent += this.Main_List.map((item) => {
//批注 // //批注
let contentHtml = ''; // let contentHtml = '';
var isRemark = ``; // var isRemark = ``;
if (item.remark && item.remark != '') { // if (item.remark && item.remark != '') {
// isRemark = `<img class="isRemark" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`; // // isRemark = `<img class="isRemark" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${ // isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${
this.remarkImageUrl // this.remarkImageUrl
}" alt="" style="width: 20px; height: 20px" /> // }" alt="" style="width: 20px; height: 20px" />
<span class="isRemarkIcon" main-id="${item.am_id}" > (${item.am_id})</span> // <span class="isRemarkIcon" main-id="${item.am_id}" > (${item.am_id})</span>
${item.state == 0 ? `<span class="Resolved" main-id="${item.am_id}">Resolved</span>` : ''} // ${item.state == 0 ? `<span class="Resolved" main-id="${item.am_id}">Resolved</span>` : ''}
</span> // </span>
`; // `;
} // }
// 判断是否是图片 // // 判断是否是图片
if (item.type == 1) { // if (item.type == 1) {
var extension = item.image.url.split('.').pop().toLowerCase(); // var extension = item.image.url.split('.').pop().toLowerCase();
if (extension == 'tif') { // if (extension == 'tif') {
contentHtml = ` // contentHtml = `
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${ // <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
item.am_id // item.am_id
}"> // }">
<img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" /> // <img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font> // <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
</p> // </p>
`; // `;
} else if (['jpg', 'jpeg', 'png'].includes(extension)) { // } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
contentHtml = ` // contentHtml = `
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${ // <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
item.ami_id // item.ami_id
}" main-id="${item.am_id}"> // }" main-id="${item.am_id}">
${isRemark} // ${isRemark}
<img src="${this.mediaUrl + item.image.url}" style="width: ${ // <img src="${this.mediaUrl + item.image.url}" style="width: ${
item.width ? `${item.width}px` : '100%' // item.width ? `${item.width}px` : '100%'
}" /> // }" />
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${ // <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
item.image.note ? item.image.note : '' // item.image.note ? item.image.note : ''
}</font> // }</font>
</p> // </p>
`; // `;
} else { // } else {
contentHtml = ` // contentHtml = `
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${ // <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
item.ami_id // item.ami_id
}" main-id="${item.am_id}"> // }" main-id="${item.am_id}">
${isRemark} // ${isRemark}
<span // <span
style=" // style="
text-align: center; // text-align: center;
font-size: 30px; // font-size: 30px;
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
" // "
> // >
Figures ( .${item.image.url.split('.').pop().toUpperCase()}) // Figures ( .${item.image.url.split('.').pop().toUpperCase()})
</span> // </span>
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${ // <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
item.image.note ? item.image.note : '' // item.image.note ? item.image.note : ''
}</font> // }</font>
</p> // </p>
`; // `;
} // }
} else if (item.type == 2) { // } else if (item.type == 2) {
var tableList = JSON.parse(item.table.table_data); // var tableList = JSON.parse(item.table.table_data);
contentHtml = ` // contentHtml = `
<div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${ // <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
item.am_id // item.am_id
}" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;"> // }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
${isRemark} // ${isRemark}
<font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font> // <font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
<table border="1" style="width: auto; border-collapse: collapse; text-align: center; "> // <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
${tableList // ${tableList
.map((row) => { // .map((row) => {
return ` // return `
<tr> // <tr>
${row // ${row
.map((cell) => { // .map((cell) => {
return ` // return `
<td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}"> // <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
<span>${cell.text || ''}</span> // <span>${cell.text || ''}</span>
</td> // </td>
`; // `;
}) // })
.join('')} <!-- join the cells in the row --> // .join('')} <!-- join the cells in the row -->
</tr> // </tr>
`; // `;
}) // })
.join('')} <!-- join the rows --> // .join('')} <!-- join the rows -->
</table> // </table>
<font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font> // <font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
</div> // </div>
`; // `;
} else { // } else {
contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`; // contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
} // }
// 判断是否是表格类型 // // 判断是否是表格类型
return contentHtml; // return contentHtml;
}).join(''); // }).join('');
this.htmlContent = htmlContent; // this.htmlContent = htmlContent;
this.htmlContent = 'true';
}, },
// 获取数据 // 获取数据
async getDate() { async getDate() {
// this.isFirstComponentLoaded = false; // this.isFirstComponentLoaded = false;
// this.isWordComponentLoaded = false; // this.isWordComponentLoaded = false;
this.imagesList = []; this.imagesList = [];
@@ -1374,6 +1406,20 @@ export default {
this.$message.error(this.$t('commonTable.uploadImageInfo')); this.$message.error(this.$t('commonTable.uploadImageInfo'));
} }
return isValidFormat; // 返回false将阻止文件上传 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`;
}
});
});
} }
} }
}; };
@@ -1688,4 +1734,42 @@ export default {
.editFormPizhu img { .editFormPizhu img {
margin-right: 10px; 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> </style>

1022
src/components/page/components/table/comment.vue Normal file
View File

File diff suppressed because it is too large Load Diff

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

@@ -1,59 +1,160 @@
<template> <template>
<div <div class="tinymce-container editor-container word-container" style="" ref="scrollDiv">
class="tinymce-container editor-container word-container" <div
style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; position: relative; overflow: auto" style="
ref="scrollDiv" box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
> margin: 10px 0;
box-sizing: border-box;
display: flex;
align-items: stretch; /* 使子元素拉伸，匹配父元素的高度 */
"
>
<div
class=""
style="
padding: 20px;
box-sizing: border-box;
width: calc(100% - 300px);
float: left;
background-color: #fff;
border-right: 1px solid #cecfd3;
position: relative;
flex: 1;
"
>
<template v-for="(item, index) in contentList">
<li
v-if="item.remark && item.remark != ''"
class="comment-item annotation"
:data-target="`main-${item.am_id}`"
style="width: calc(350px - 20px); padding: 6px 0;margin-top: 10px;"
>
<div>
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px">
<div class="pizhu" style="display: flex; align-items: center">
<span style="color: #fc625d; display: flex; align-items: center">
<img
class="isRemark"
src="@/assets/img/isRemark.png"
alt=""
style="width: 15px; height: 15px; margin-right: 6px"
/>
{{ item.am_id
}}<span v-if="item.state == 0" class="Resolved">{{ $t('commonTable.Resolved') }}</span></span
>
</div>
<div style="display: flex; align-items: center; justify-content: center">
<span style="color: #b8b7b7; font-size: 14px">{{ getTime(item.ctime) }}</span
><span style="color: #aaa; font-size: 14px; margin: 0 4px">|</span>
<el-dropdown class="commentOperate">
<span class="el-dropdown-link">
<img src="@/assets/img/selectComment.png" alt="" style="width: 18px; height: 18px" />
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item>答复</el-dropdown-item> -->
<el-dropdown-item>
<p class="commentOperateItem">
<img src="@/assets/img/solveComment.png" alt="" />
<span style="color: #34c749">{{ $t('commonTable.solve') }}</span>
</p>
</el-dropdown-item>
<el-dropdown-item>
<p class="commentOperateItem" v-if="isEditComment" @click="deleteComment(item, index)">
<img src="@/assets/img/deleteComment.png" alt="" />
<span style="color: #ed382d"> {{ $t('commonTable.delete') }}</span>
</p>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div style="display: flex; align-items: center; justify-content: space-between">
<p
:style="isEditComment ? 'width: calc(100% - 40px)' : 'width: calc(100%)'"
style="line-height: 18px; min-height: 20px; width: calc(100%); white-space: normal;padding-top: 10px;padding-left:20px ;"
v-html="getCommentRemark(item)"
></p>
<i
class="el-icon-edit"
v-if="isEditComment"
@click="editComment(item, index)"
style="color: #006699;"
></i>
</div>
</div>
</li>
<span class="isRemark" :remark-main-id="item.am_id" v-if="item.remark && item.remark != ''"
><img
class="isRemark"
src="@/assets/img/isRemark.png"
alt=""
style="width: 15px; height: 15px; margin-right: 6px;margin-left: -14px;"
/>
</span>
<div
class="MaxPicture pMain myeditabledivImage"
@click="initializeEditor(item.am_id)"
:class="item.remark && item.remark != '' ? 'remarkbg' : ''"
v-if="item.type == 1"
:main-state="item.state"
:contenteditable="!readonly"
:data-id="item.ami_id"
:main-id="item.am_id"
:id="'editor' + item.am_id"
>
<img :src="`${mediaUrl + item.image.url}`" :style="`width: ${item.width ? `${item.width}px` : '500px'}`" />
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
item.image.note ? item.image.note : ''
}}</font>
</div>
<div
:class="item.remark && item.remark != '' ? 'remarkbg' : ''"
@click="initializeEditor(item.am_id)"
class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable"
v-else-if="item.type == 2"
:main-state="item.state"
:contenteditable="!readonly"
:data-id="item.amt_id"
:id="'editor' + item.am_id"
:main-id="item.am_id"
>
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
item.table.title ? item.table.title : ''
}}</font>
<table border="1" style="width: auto; border-collapse: collapse; text-align: center">
<tr v-for="(row, i) in JSON.parse(item.table.table_data)">
<td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}" v-for="(cell, i1) in row">
<span v-html="cell.text"></span>
</td>
</tr>
</table>
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
item.table.note ? item.table.note : ''
}}</font>
</div>
<div
@click="initializeEditor(item.am_id)"
class="pMain myeditablediv"
:class="item.remark && item.remark != '' ? 'remarkbg' : ''"
v-else
:main-state="item.state"
:contenteditable="!readonly"
:data-id="item.am_id"
:main-id="item.am_id"
:id="'editor' + item.am_id"
v-html="item.content"
></div>
</template>
</div>
<slot name="comment" />
</div>
<!-- <form method="post"> --> <!-- <form method="post"> -->
<template class="" v-for="(item, index) in contentList">
<div
class="MaxPicture pMain myeditabledivImage"
v-if="item.type == 1"
:main-state="item.state"
:contenteditable="!readonly"
:data-id="item.ami_id"
:main-id="item.am_id"
>
<img :src="`${mediaUrl + item.image.url}`" :style="`width: ${item.width ? `${item.width}px` : '500px'}`" />
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
item.image.note ? item.image.note : ''
}}</font>
</div>
<div
class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable"
v-else-if="item.type == 2"
:main-state="item.state"
:contenteditable="!readonly"
:data-id="item.amt_id"
:main-id="item.am_id"
>
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
item.table.title ? item.table.title : ''
}}</font>
<table border="1" style="width: auto; border-collapse: collapse; text-align: center">
<tr v-for="(row, i) in JSON.parse(item.table.table_data)">
<td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}" v-for="(cell, i1) in row">
<span v-html="cell.text"></span>
</td>
</tr>
</table>
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
item.table.note ? item.table.note : ''
}}</font>
</div>
<div
class="pMain myeditablediv"
v-else
:main-state="item.state"
:contenteditable="!readonly"
:data-id="item.am_id"
:main-id="item.am_id"
v-html="item.content"
></div>
</template>
<!-- </form> --> <!-- </form> -->
@@ -70,41 +171,6 @@ const toolbar = 'addImageButton ';
const tableStyle = ` const tableStyle = `
.tox .tox-edit-area::before{ .tox .tox-edit-area::before{
border:none; border:none;
}
.isRemark {
display:flex;
align-items:center;
position:absolute;
top:-12px;
left:-12px;
z-index:2;
cursor: pointer;
}
.isRemark img{
width:15px;
height:15px;
margin-right:4px;
}
.isRemark span{
background-color: #fef0f0;
border-color: #fde2e2;
padding: 0 5px;
line-height: 19px;
color: #f56c6c;
font-size: 12px;display:inline-block;
}
.isRemark .Resolved{
background-color: #f0f9eb;
margin-left:10px;
border-color: #67c23a;
color:#67c23a;
font-weight:bold;
border-radius:2px;
} }
img{ img{
@@ -251,6 +317,13 @@ export default {
return []; return [];
} }
}, },
comments: {
type: Array,
default() {
return [];
}
},
menubar: { menubar: {
default: 'file edit insert view format table ' default: 'file edit insert view format table '
}, },
@@ -274,6 +347,8 @@ export default {
}, },
data() { data() {
return { return {
editors: {}, // 用于存储每个编辑器的实例
editorsInitialized: {}, // 用于存储每个编辑器实例
mediaUrl: mediaUrl, // mediaUrl: mediaUrl, //
lastTag: null, lastTag: null,
isEditComment: false, isEditComment: false,
@@ -340,11 +415,11 @@ export default {
} }
}, },
mounted() { mounted() {
// this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true }); this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
this.isShowEditComment(); this.isShowEditComment();
this.typesettingType = 1; this.typesettingType = 1;
this.initTinymce(); // this.initTinymce();
}, },
activated() { activated() {
this.isShowEditComment(); this.isShowEditComment();
@@ -355,79 +430,25 @@ export default {
this.destroyTinymce(); this.destroyTinymce();
}, },
methods: { methods: {
divOnScroll() { initializeEditor(index) {
console.log('111 at line 358:', 111); const editorId = `editor${index}`;
var deleteButtons = document.querySelectorAll('.tox-tinymce-inline');
if (deleteButtons) {
deleteButtons.forEach(function (button) {
button.remove(); // 移除每个 wordButtonContainer 按钮
});
}
},
isShowEditComment() {
if (localStorage.getItem('U_role')) {
var identity = localStorage.getItem('U_role');
if (identity.includes('editor')) { // 检查当前编辑器是否已经初始化
this.isEditComment = true; if (this.editors[editorId]) return;
} else {
this.isEditComment = false; // 销毁所有已初始化的编辑器实例
for (const key in this.editors) {
if (this.editors[key]) {
// 确保销毁所有编辑器实例
tinymce.remove(this.editors[key]);
this.editors[key] = null; // 清除引用
} }
} }
},
// 查看评论详情
handleSubmit() {
this.$refs.uploadImage.handleSubmit();
},
getDetail(val) {
if (this.hasInit == true) {
this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val));
}
},
//将字符串添加到富文本编辑器中
addArtWork(str) {
window.tinymce.get(this.tinymceId).insertContent(str);
},
onClick(e) {
this.$emit('onClick', e, tinymce);
},
changeTable() {
// 获取所有表格
const tables = window.tinymce.get(this.tinymceId).getBody().querySelectorAll('table');
console.log('tables at line 110:', tables);
// 遍历并设置样式
tables.forEach((table) => {
console.log('table at line 360:', table);
const editor = window.tinymce.get(this.tinymceId);
editor.dom.setStyles(table, {
width: this.typesettingType == 1 ? '17.18cm' : '25.88cm'
});
});
this.$forceUpdate();
},
goToComment(mainId) {
var ed = window.tinymce.get(this.tinymceId);
const editorDoc = ed.getDoc(); // 获取 TinyMCE 内部的 document
console.log('Looking for element with main-id:', mainId); // 调试输出
// 在 iframe 内部的 document 中查找带有 main-id 的元素
const commentElement = editorDoc.querySelector(`[main-id="${mainId}"]`);
if (commentElement) {
commentElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
} else {
console.log('没有找到对应的批注元素', mainId); // 调试输出
}
},
initTinymce() {
var _this = this; var _this = this;
// _this.$emit('positionAnnotations');
// non-breaking // non-breaking
window.tinymce.init({ tinymce.init({
selector: '.myeditablediv', selector: `#${editorId}`,
inline: true, inline: true,
license_key: 'gpl', // 使用开源 GPL 许可证 license_key: 'gpl', // 使用开源 GPL 许可证
content_css: false, content_css: false,
@@ -439,28 +460,28 @@ export default {
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1){ .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1){
font-weight:bold !important; font-weight:bold !important;
background-color:#fef0f0; background-color:#fef0f0;
color: #f56c6c; color: #f56c6c;
fill:rgb(19, 188, 32); fill:rgb(19, 188, 32);
} }
/* 成功 */ /* 成功 */
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1){ .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1){
font-weight:bold !important; font-weight:bold !important;
background-color: rgb(19, 188, 32); background-color: rgb(19, 188, 32);
color: #fff; color: #fff;
fill:rgb(19, 188, 32); fill:rgb(19, 188, 32);
} }
/* 删除 */ /* 删除 */
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1){ .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1){
font-weight:bold !important; font-weight:bold !important;
background-color: red; background-color: red;
color: #fff; color: #fff;
} }
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1) svg{ .tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important; font-weight:bold !important;
background-color:#fef0f0; background-color:#fef0f0;
color: #f56c6c; /* 设置字体颜色 */ color: #f56c6c; /* 设置字体颜色 */
fill:#f56c6c !important; fill:#f56c6c !important;
font-size:16px!important; font-size:16px!important;
} }
@@ -482,13 +503,13 @@ export default {
font-weight:bold !important; font-weight:bold !important;
color: #007bff; /* 设置字体颜色 */ color: #007bff; /* 设置字体颜色 */
} }
.tox-toolbar-overlord .tox-toolbar:nth-child(2) .tox-toolbar__group:nth-child(4) button.tox-tbtn:nth-child(2){ .tox-toolbar-overlord .tox-toolbar:nth-child(2) .tox-toolbar__group:nth-child(4) button.tox-tbtn:nth-child(2){
font-weight:bold !important; font-weight:bold !important;
color: #007bff; /* 设置字体颜色 */ color: #007bff; /* 设置字体颜色 */
text-decoration: line-through; text-decoration: line-through;
} }
`, `,
menubar: false, menubar: false,
toolbar: [ toolbar: [
@@ -498,6 +519,29 @@ export default {
end_container_on_empty_block: true, end_container_on_empty_block: true,
content_css: 'default ', content_css: 'default ',
setup(ed) { setup(ed) {
var previousContent = ed.getContent();
ed.on('blur', function () {
var edSelection = ed.selection;
const selectedNode = edSelection.getNode(); // 获取选中的节点
if (selectedNode) {
// 向上查找最外层的 div
let outerDiv = selectedNode;
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
}
// 如果找到的 div 节点存在
if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id');
// console.log('previousContent at line 617:', outerDiv.innerHTML.replace(/^<p>/, '').replace(/<\/p>$/, ''))
if (previousContent == _this.contentList.find((e) => e.am_id == dataId).content) {
console.log('at line 618:', '内容没有发生变化');
} else {
console.log('at line 618:', '内容发生变化');
}
}
}
});
ed.ui.registry.addMenuButton('customDropdown', { ed.ui.registry.addMenuButton('customDropdown', {
text: 'Set Title', // 下拉框标题 text: 'Set Title', // 下拉框标题
fetch: function (callback) { fetch: function (callback) {
@@ -529,11 +573,9 @@ export default {
while (outerDiv && outerDiv.tagName !== 'DIV') { while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode; outerDiv = outerDiv.parentNode;
} }
// 如果找到的 div 节点存在 // 如果找到的 div 节点存在
if (outerDiv) { if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id'); const dataId = outerDiv.getAttribute('main-id');
_this.$emit('onEditTitle', { _this.$emit('onEditTitle', {
mainId: dataId, mainId: dataId,
value: item.value value: item.value
@@ -550,7 +592,61 @@ export default {
icon: 'checkmark', icon: 'checkmark',
text: 'Save', text: 'Save',
onAction: function () { onAction: function () {
_this.getContent('content'); var deleteButtons = document.querySelectorAll('.tox-tinymce-inline');
// if (deleteButtons) {
// deleteButtons.forEach(function (button) {
// button.remove(); // 移除每个 wordButtonContainer 按钮
// });
// }
var edSelection = ed.selection;
const selectedNode = edSelection.getNode(); // 获取选中的节点
let outerDiv = selectedNode;
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
}
// 如果找到的 div 节点存在
if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id');
var content;
console.log('outerDiv at line 663:', outerDiv.innerHTML);
content = outerDiv.innerHTML.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, '');
// 2. 移除所有 style 属性
content = content.replace(/\s*style="[^"]*"/g, '');
// 3. 将 <strong> 转换为 <b>，<em> 转换为 <i>
var div = document.createElement('div');
div.innerHTML = content; // 将 HTML 字符串加载到 div 中
// 替换所有 <strong> 为 <b>
var strongTags = div.getElementsByTagName('strong');
for (var i = 0; i < strongTags.length; i++) {
var bTag = document.createElement('b');
bTag.innerHTML = strongTags[i].innerHTML; // 保留内容
strongTags[i].parentNode.replaceChild(bTag, strongTags[i]);
}
// 替换所有 <em> 为 <i>
var emTags = div.getElementsByTagName('em');
for (var i = 0; i < emTags.length; i++) {
var iTag = document.createElement('i');
iTag.innerHTML = emTags[i].innerHTML; // 保留内容
emTags[i].parentNode.replaceChild(iTag, emTags[i]);
}
// 获取最终修改后的 HTML
content = div.innerHTML;
console.log('content at line 486:', content);
_this.$emit('saveContent', content, dataId);
// const dataId = outerDiv.getAttribute('main-id');
// let selectedText = edSelection.getContent({ format: 'text' });
// _this.$emit('onAddComment', {
// mainId: dataId,
// label: selectedText ? selectedText : ''
// });
}
} }
}); });
ed.ui.registry.addButton('commentAdd', { ed.ui.registry.addButton('commentAdd', {
@@ -673,7 +769,138 @@ export default {
// } // }
} }
}); });
// 初始化当前编辑器
// tinymce.init({
// selector: `#${editorId}`,
// inline: true, // 使用内联模式
// menubar: false, // 禁用菜单栏
// toolbar: 'undo redo | bold italic | alignleft aligncenter alignright', // 工具栏
// setup: (editor) => {
// editor.on('blur', () => {
// console.log('内容更新:', editor.getContent());
// });
// }
// });
// 保存当前编辑器实例
this.$set(this.editors, editorId, tinymce.get(`editor${index}`));
}, },
deleteComment(data) {
this.$emit('deleteComment', data);
},
editComment(data) {
this.$emit('editComment', data);
},
getCommentRemark(data) {
console.log('data at line 426:', data);
var info = this.comments.find((e) => e.am_id == data.am_id);
if (info && info.remark) {
return info.remark;
}
},
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;
},
divOnScroll() {
// 检查每个编辑器是否在可视区域内
for (const key in this.editors) {
const editorElement = document.getElementById(key);
const editor = this.editors[key];
if (editorElement) {
const rect = editorElement.getBoundingClientRect();
const isVisible =
rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;
if (!isVisible) {
// 如果编辑器不可见，销毁该编辑器实例
if (editor) {
tinymce.remove(editor);
this.$set(this.editors, key, null); // 清除该编辑器的引用
}
}
}
}
},
isShowEditComment() {
if (localStorage.getItem('U_role')) {
var identity = localStorage.getItem('U_role');
if (identity.includes('editor')) {
this.isEditComment = true;
} else {
this.isEditComment = false;
}
}
},
// 查看评论详情
handleSubmit() {
this.$refs.uploadImage.handleSubmit();
},
getDetail(val) {
if (this.hasInit == true) {
this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val));
}
},
//将字符串添加到富文本编辑器中
addArtWork(str) {
window.tinymce.get(this.tinymceId).insertContent(str);
},
onClick(e) {
this.$emit('onClick', e, tinymce);
},
changeTable() {
// 获取所有表格
const tables = window.tinymce.get(this.tinymceId).getBody().querySelectorAll('table');
console.log('tables at line 110:', tables);
// 遍历并设置样式
tables.forEach((table) => {
console.log('table at line 360:', table);
const editor = window.tinymce.get(this.tinymceId);
editor.dom.setStyles(table, {
width: this.typesettingType == 1 ? '17.18cm' : '25.88cm'
});
});
this.$forceUpdate();
},
goToComment(mainId) {
var ed = window.tinymce.get(this.tinymceId);
const editorDoc = ed.getDoc(); // 获取 TinyMCE 内部的 document
console.log('Looking for element with main-id:', mainId); // 调试输出
// 在 iframe 内部的 document 中查找带有 main-id 的元素
const commentElement = editorDoc.querySelector(`[main-id="${mainId}"]`);
if (commentElement) {
commentElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
} else {
console.log('没有找到对应的批注元素', mainId); // 调试输出
}
},
initTinymce() {},
// initTinymce() { // initTinymce() {
// var deleteButtons = document.querySelectorAll('.wordButtonContainer'); // var deleteButtons = document.querySelectorAll('.wordButtonContainer');
// if (deleteButtons) { // if (deleteButtons) {
@@ -1384,11 +1611,100 @@ export default {
.word-container table span blue { .word-container table span blue {
color: rgb(0, 130, 170) !important; color: rgb(0, 130, 170) !important;
} }
.word-container {
width: 100%;
height: 100%;
position: relative;
overflow: auto;
/* background: #f2f3f5 !important; */
padding: 20px 20px;
box-sizing: border-box;
}
.pMain { .pMain {
margin-top: 20px; margin-top: 5px;
margin-bottom: 20px; margin-bottom: 5px;
} }
::v-deep .tox.tox-tinymce-inline{ ::v-deep .tox.tox-tinymce-inline {
z-index: 9999 !important; z-index: 9999 !important;
} }
.remarkbg {
background-color: #f3d5d5c2;
border-right: 2px solid #cd5454;
}
.isRemark {
display: flex;
align-items: center;
/* position:absolute; */
top: -12px;
left: -12px;
z-index: 2;
cursor: pointer;
}
.isRemark img {
width: 15px;
height: 15px;
margin-right: 4px;
}
.isRemark span {
background-color: #fef0f0;
border-color: #fde2e2;
padding: 0 5px;
line-height: 19px;
color: #f56c6c;
font-size: 12px;
display: inline-block;
}
.commentList li {
list-style: none;
}
.comment-item {
z-index: 10;
list-style: none;
width: 320px;
position: absolute;
right: -340px;
}
.comment-item::before {
content: '';
position: absolute;
top: 24px; /* 调整线段开始的超出位置 */
left: -32px; /* 调整线段开始的超出位置 */
width: 34px; /* 设置斜线的长度 */
height: 0; /* 设置高度为 0，使用 border 来创建线条 */
border-top: 2px dashed #cd5454; /* 设置斜线为虚线，设置颜色和宽度 */
background-color: #cd5454; /* 设置斜线的颜色 */
transform: rotate(-15deg); /* 设置斜线的角度 */
}
.commentOperateItem {
display: flex;
align-items: center;
font-size: 14px;
font-weight: bold;
}
.commentOperateItem img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.Resolved {
background-color: #dedede;
margin-left: 10px;
border-color: #dedede;
color: #8888a6;
font-weight: bold;
padding: 2px 4px;
border-radius: 2px;
font-size: 14px
}
/* .Resolved {
background-color: #f0f9eb;
margin-left: 10px;
border-color: #67c23a;
color: #67c23a;
font-weight: bold;
border-radius: 2px;
} */
</style> </style>

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

@@ -54,7 +54,7 @@
</ul> --> </ul> -->
<div style="width: 200px; float: right; padding: 10px; height: 100%; box-sizing: border-box; overflow-y: auto" class="arrlist"> <div style="width: 200px; float: right; padding: 10px; height: 100%; box-sizing: border-box; overflow-y: auto" class="arrlist">
<ul style="width: 100%; height: auto"> <ul style="width: 100%; height: auto">
<li v-show="currentMenu == 1"> <!-- <li v-show="currentMenu == 1">
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: start"> <div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: start">
<li v-for="(comment, index) in comments" :key="index" class="comment-item" style="width: 100%; padding: 6px 0"> <li v-for="(comment, index) in comments" :key="index" class="comment-item" style="width: 100%; padding: 6px 0">
<div @click.prevent="goToComment(comment.am_id)"> <div @click.prevent="goToComment(comment.am_id)">
@@ -74,18 +74,9 @@
<span style="color: #b8b7b7;font-size: 12px">{{ getTime(comment.ctime) }}</span> <span style="color: #b8b7b7;font-size: 12px">{{ getTime(comment.ctime) }}</span>
</p> </p>
<!-- 当 isEditing 为 true 时，显示可编辑的输入框 -->
<!-- <div v-if="isEditing === index">
<el-input
v-focus
type="textarea"
v-model="comment.remark"
@blur.stop="saveComment(index,comment)"
style="width: 100%; box-sizing: border-box; padding: 5px"
></el-input>
</div> -->
<!-- 当 isEditing 为 false 时，显示评论文本 -->
<div style="display: flex; align-items: center; justify-content: space-between"> <div style="display: flex; align-items: center; justify-content: space-between">
<p :style="isEditComment?'width: calc(100% - 40px)':'width: calc(100%)'" style="line-height:18px;min-height: 20px; width: calc(100%);white-space: normal;" v-html="comment.remark"> <p :style="isEditComment?'width: calc(100% - 40px)':'width: calc(100%)'" style="line-height:18px;min-height: 20px; width: calc(100%);white-space: normal;" v-html="comment.remark">
@@ -106,11 +97,11 @@
></i> ></i>
</div> </div>
<!-- 删除按钮 -->
</div> </div>
</li> </li>
</div> </div>
</li> </li> -->
<li v-show="currentMenu == 2"> <li v-show="currentMenu == 2">
<div style="" class="go-content-charts-item-box"> <div style="" class="go-content-charts-item-box">
<div class="item_box" style="width: 100%; height: auto; position: relative"> <div class="item_box" style="width: 100%; height: auto; position: relative">

2
src/main.js
View File

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

3
src/router/index.js
View File

@@ -988,7 +988,8 @@ export default new Router({
path: '/GenerateCharts', //用户端预收录-引用编辑 path: '/GenerateCharts', //用户端预收录-引用编辑
component: () => import('../components/page/GenerateCharts'), component: () => import('../components/page/GenerateCharts'),
meta: { meta: {
title: 'Text Proofread' title: 'Text Proofread',
hideSidebar: true
} }
}, },
{ {