tijiao
This commit is contained in:
BIN
src/assets/img/deleteComment.png
Normal file
BIN
src/assets/img/deleteComment.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/img/selectComment.png
Normal file
BIN
src/assets/img/selectComment.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/img/solveComment.png
Normal file
BIN
src/assets/img/solveComment.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
@@ -1,45 +1,47 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<!-- 折叠按钮 -->
|
||||
<div class="collapse-btn" @click="collapseChage">
|
||||
<i v-if="!collapse" class="el-icon-s-fold"></i>
|
||||
<i v-else class="el-icon-s-unfold"></i>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<div>
|
||||
<img src="../../assets/img/logo.png" />
|
||||
<p>{{ $t('system.title_1') }}</p>
|
||||
</div>
|
||||
<div>
|
||||
{{ $t('system.title_2') }}
|
||||
</div>
|
||||
<!-- {{ $t('system.title') }} -->
|
||||
</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>
|
||||
<!-- 消息中心 -->
|
||||
<div class="header">
|
||||
<!-- 折叠按钮 -->
|
||||
<div class="collapse-btn" @click="collapseChage" v-if="!home">
|
||||
<i v-if="!collapse" class="el-icon-s-fold"></i>
|
||||
<i v-else class="el-icon-s-unfold"></i>
|
||||
</div>
|
||||
<div class="collapse-btn" @click="goHome" v-if="home">
|
||||
<i class="el-icon-s-home"></i>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<div>
|
||||
<img src="../../assets/img/logo.png" />
|
||||
<p>{{ $t('system.title_1') }}</p>
|
||||
</div>
|
||||
<div>
|
||||
{{ $t('system.title_2') }}
|
||||
</div>
|
||||
<!-- {{ $t('system.title') }} -->
|
||||
</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>
|
||||
<!-- 身份切换 -->
|
||||
<!-- <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>
|
||||
@@ -63,350 +65,346 @@
|
||||
</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>
|
||||
<!-- 用户头像 -->
|
||||
<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 {
|
||||
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() {
|
||||
if(!this.$route.meta.hideSidebar){
|
||||
this.collapse=true
|
||||
|
||||
}else{
|
||||
this.collapse=false
|
||||
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');
|
||||
}
|
||||
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: {
|
||||
// 用户名下拉菜单选择事件
|
||||
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;
|
||||
},
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
};
|
||||
// 倒计时
|
||||
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 {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
float: left;
|
||||
padding: 0 15px 0 21px;
|
||||
cursor: pointer;
|
||||
line-height: 70px;
|
||||
}
|
||||
.collapse-btn {
|
||||
float: left;
|
||||
padding: 0 15px 0 21px;
|
||||
cursor: pointer;
|
||||
line-height: 70px;
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
float: left;
|
||||
padding-top: 19px;
|
||||
vertical-align: middle;
|
||||
font-size: 20px;
|
||||
}
|
||||
.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 img {
|
||||
width: 84px;
|
||||
height: 20px;
|
||||
margin-top: -4px;
|
||||
margin-right: 15px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.header .logo>div {
|
||||
float: left;
|
||||
height: 40px;
|
||||
}
|
||||
.header .logo > div {
|
||||
float: left;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.header .logo p {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.header .logo p {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
float: right;
|
||||
padding-right: 50px;
|
||||
}
|
||||
.header-right {
|
||||
float: right;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.header-user-con {
|
||||
display: flex;
|
||||
height: 70px;
|
||||
align-items: center;
|
||||
}
|
||||
.header-user-con {
|
||||
display: flex;
|
||||
height: 70px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-fullscreen {
|
||||
transform: rotate(45deg);
|
||||
margin-right: 5px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.btn-fullscreen {
|
||||
transform: rotate(45deg);
|
||||
margin-right: 5px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.changelang {
|
||||
position: relative;
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
}
|
||||
.changelang {
|
||||
position: relative;
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.btn-fullscreen {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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: #fff;
|
||||
}
|
||||
.btn-bell-badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #f56c6c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-bell .el-icon-bell {
|
||||
color: #fff;
|
||||
}
|
||||
.btn-bell .el-icon-bell {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.user-name {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.user-avator {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.user-avator {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.user-avator img {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.user-avator img {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#colgreen {
|
||||
color: rgb(142, 150, 74);
|
||||
}
|
||||
.el-dropdown-menu__item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#colgreen {
|
||||
color: rgb(142, 150, 74);
|
||||
}
|
||||
</style>
|
||||
|
||||
403
src/components/common/Header2.vue
Normal file
403
src/components/common/Header2.vue
Normal 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>
|
||||
@@ -1,24 +1,41 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<v-head></v-head>
|
||||
|
||||
<v-sidebar ></v-sidebar>
|
||||
<div class="content-box" :class="{ 'content-collapse': collapse }">
|
||||
<v-tags></v-tags>
|
||||
<div class="content">
|
||||
<transition name="move" mode="out-in">
|
||||
<keep-alive :include="tagsList">
|
||||
<router-view ></router-view>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
<el-backtop target=".content"></el-backtop>
|
||||
<template v-if="!this.$route.meta.hideSidebar">
|
||||
<v-head></v-head>
|
||||
|
||||
<v-sidebar></v-sidebar>
|
||||
<div class="content-box" :class="{ 'content-collapse': collapse }">
|
||||
<v-tags></v-tags>
|
||||
<div class="content">
|
||||
<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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vHead from './Header.vue';
|
||||
import vHead2 from './Header2.vue';
|
||||
import vSidebar from './Sidebar.vue';
|
||||
import vTags from './Tags.vue';
|
||||
import bus from './bus';
|
||||
@@ -31,16 +48,11 @@ export default {
|
||||
},
|
||||
components: {
|
||||
vHead,
|
||||
vHead2,
|
||||
vSidebar,
|
||||
vTags
|
||||
},
|
||||
created() {
|
||||
if(!this.$route.meta.hideSidebar){
|
||||
this.collapse=true
|
||||
|
||||
}else{
|
||||
this.collapse=false
|
||||
}
|
||||
bus.$on('collapse-content', (msg) => {
|
||||
this.collapse = msg;
|
||||
localStorage.setItem('collapse', this.collapse);
|
||||
|
||||
@@ -636,12 +636,7 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(!this.$route.meta.hideSidebar){
|
||||
this.collapse=true
|
||||
|
||||
}else{
|
||||
this.collapse=false
|
||||
}
|
||||
|
||||
localStorage.setItem('collapse', this.collapse);
|
||||
if (this.userrole == 2) {
|
||||
//其余的身份（显示作者）
|
||||
|
||||
@@ -355,6 +355,10 @@ const en = {
|
||||
},
|
||||
commonTable: {
|
||||
add: 'Add',
|
||||
delete: 'Delete',
|
||||
reply: 'Reply',
|
||||
solve: 'Solve',
|
||||
Resolved: 'Resolved',
|
||||
preview: 'Preview',
|
||||
link: 'Positioning',
|
||||
Typed: 'Typed',
|
||||
|
||||
@@ -348,6 +348,10 @@ const zh = {
|
||||
},
|
||||
commonTable: {
|
||||
add: '新增',
|
||||
delete: '删除',
|
||||
reply: '答复',
|
||||
solve: '解决',
|
||||
Resolved: '已解决',
|
||||
preview: '预览',
|
||||
positioning: '定位',
|
||||
edit: '编辑',
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
<template>
|
||||
<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 style="height: 100%">
|
||||
<div
|
||||
class="container"
|
||||
style="
|
||||
@@ -58,7 +52,6 @@
|
||||
|
||||
<div class="unfetteredBox" style="height: 100%">
|
||||
<common-word-html-type-setting
|
||||
|
||||
:urlList="{
|
||||
img: 'api/Preaccept/getMainImages',
|
||||
table: 'api/Preaccept/getMainTables'
|
||||
@@ -79,11 +72,8 @@
|
||||
</common-word-html-type-setting>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="htmlContent"
|
||||
style="width: 100%; width: calc(100% - 295px); float: right; height: calc(100%); background-color: #f8f8f9"
|
||||
>
|
||||
<div class="toolbar">
|
||||
<div style="width: 100%; width: calc(100% - 285px); float: right; height: calc(100%); background-color: #e4e9ed">
|
||||
<!-- <div class="toolbar">
|
||||
<div class="toolbar_item" @click="handleImageAdd('img')">
|
||||
<img src="@/assets/img/upload.png" style="object-fit: contain" />
|
||||
<span>Add Figure </span>
|
||||
@@ -92,16 +82,19 @@
|
||||
<img src="@/assets/img/uploadTable.png" style="object-fit: contain" />
|
||||
<span>Add Table </span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!---->
|
||||
<common-word
|
||||
v-if="htmlContent"
|
||||
ref="commonWord"
|
||||
:value="htmlContent"
|
||||
:contentList="Main_List"
|
||||
:comments="comments"
|
||||
:wordStyle="wordStyle"
|
||||
@onDrop="onDrop"
|
||||
@saveContent="saveContent"
|
||||
@deleteComment="deleteComment"
|
||||
@editComment="editComment"
|
||||
@loaded="loadedWord"
|
||||
@onEdit="onEdit"
|
||||
@onDelete="onDelete"
|
||||
@@ -109,9 +102,15 @@
|
||||
@onAddComment="onAddComment"
|
||||
@onEditTitle="onEditTitle"
|
||||
@changeComment="changeComment"
|
||||
style="width: calc(100%); height: calc(100% - 50px); margin-top: -1px"
|
||||
style="width: calc(100%); height: calc(100%)"
|
||||
:style="`100%`"
|
||||
></common-word>
|
||||
>
|
||||
<template slot="comment">
|
||||
<div style="" class="commentList annotations">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</common-word>
|
||||
</div>
|
||||
|
||||
<!-- <div style="height: 20px" v-if="Art_Doi == undefined"></div> -->
|
||||
@@ -222,10 +221,10 @@
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="editMes" :model="commentForm" label-width="115px">
|
||||
|
||||
<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 label="Word">
|
||||
<span slot="label">
|
||||
@@ -297,6 +296,8 @@ import bottomTinymce from '@/components/page/components/Tinymce';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isEditComment: false,
|
||||
comments: [],
|
||||
remarkImageUrl: 'https://submission.tmrjournals.com/public/usericon/20241222/4e77ba3f29ce3cf798b36f24dc411b76.png',
|
||||
isFirstComponentLoaded: false,
|
||||
isWordComponentLoaded: false,
|
||||
@@ -428,20 +429,30 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
bus.$on('collapse', (msg) => {
|
||||
this.collapse = msg;
|
||||
localStorage.setItem('collapse', this.collapse);
|
||||
bus.$emit('collapse-content', msg);
|
||||
});
|
||||
this.isShowEditComment();
|
||||
this.getDate();
|
||||
this.getCommentList();
|
||||
// this.loadDictionary().catch(console.error);
|
||||
},
|
||||
|
||||
activated() {
|
||||
this.isShowEditComment();
|
||||
this.getDate();
|
||||
this.getCommentList();
|
||||
},
|
||||
|
||||
methods: {
|
||||
isShowEditComment() {
|
||||
if (localStorage.getItem('U_role')) {
|
||||
var identity = localStorage.getItem('U_role');
|
||||
if (identity.includes('editor')) {
|
||||
this.isEditComment = true;
|
||||
} else {
|
||||
this.isEditComment = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
loadedWord() {
|
||||
this.isWordComponentLoaded = true;
|
||||
},
|
||||
@@ -516,8 +527,29 @@ export default {
|
||||
this.addComment(content);
|
||||
}
|
||||
},
|
||||
|
||||
async saveContent(content) {
|
||||
deleteComment(comment, index) {
|
||||
console.log('comment at line 480:', comment);
|
||||
if (this.isEditComment) {
|
||||
this.$confirm(this.$t('commonTable.removeAnnotations'), 'Prompt', {
|
||||
confirmButtonText: 'Submit',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
this.$api
|
||||
.post('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 str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : '';
|
||||
if (str == '') {
|
||||
@@ -528,7 +560,7 @@ export default {
|
||||
}
|
||||
await that.$api
|
||||
.post(that.urlList.editContent, {
|
||||
am_id: this.currentId,
|
||||
am_id: am_id,
|
||||
content: str
|
||||
})
|
||||
.then(async (res) => {
|
||||
@@ -684,7 +716,6 @@ export default {
|
||||
},
|
||||
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({
|
||||
@@ -702,6 +733,7 @@ export default {
|
||||
this.$forceUpdate();
|
||||
this.commentVisible = false;
|
||||
this.getDate();
|
||||
this.getCommentList();
|
||||
this.$nextTick(() => {});
|
||||
} else {
|
||||
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) {
|
||||
|
||||
console.log('data at line 858:', data);
|
||||
var form = this.Main_List.find((item) => item.am_id == data.mainId);
|
||||
this.commentForm = {
|
||||
commentLabel:data.label,
|
||||
commentLabel: data.label ? data.label : '',
|
||||
...form
|
||||
};
|
||||
this.commentVisible = true;
|
||||
|
||||
},
|
||||
async onEditTitle(data) {
|
||||
var url;
|
||||
switch (data.value){
|
||||
switch (data.value) {
|
||||
case 1:
|
||||
url = 'api/Preaccept/changeH1';
|
||||
break;
|
||||
case 2:
|
||||
url = 'api/Preaccept/changeH2';
|
||||
url = 'api/Preaccept/changeH2';
|
||||
break;
|
||||
case 3:
|
||||
url = 'api/Preaccept/changeH3';
|
||||
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();
|
||||
})
|
||||
.catch((err) => {
|
||||
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;
|
||||
|
||||
|
||||
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);
|
||||
});
|
||||
},
|
||||
clearButton() {
|
||||
var deleteButtons = document.querySelectorAll('.wordButtonContainer');
|
||||
@@ -915,120 +944,123 @@ export default {
|
||||
})
|
||||
.then((res) => {
|
||||
this.comments = res.data.list;
|
||||
console.log('this.comments at line 537:', this.comments);
|
||||
// this.positionAnnotations();
|
||||
});
|
||||
},
|
||||
getWord() {
|
||||
var htmlContent = `<h3 class="man_Title" contenteditable="false">${this.detailTitle} </h3>`;
|
||||
htmlContent += this.Main_List.map((item) => {
|
||||
//批注
|
||||
let contentHtml = '';
|
||||
var isRemark = ``;
|
||||
if (item.remark && item.remark != '') {
|
||||
// isRemark = `<img class="isRemark" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
|
||||
isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${
|
||||
this.remarkImageUrl
|
||||
}" alt="" style="width: 20px; height: 20px" />
|
||||
// var htmlContent = `<h3 class="man_Title" contenteditable="false">${this.detailTitle} </h3>`;
|
||||
// htmlContent += this.Main_List.map((item) => {
|
||||
// //批注
|
||||
// let contentHtml = '';
|
||||
// var isRemark = ``;
|
||||
// if (item.remark && item.remark != '') {
|
||||
// // isRemark = `<img class="isRemark" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
|
||||
// isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${
|
||||
// this.remarkImageUrl
|
||||
// }" alt="" style="width: 20px; height: 20px" />
|
||||
|
||||
<span class="isRemarkIcon" main-id="${item.am_id}" > (${item.am_id})</span>
|
||||
${item.state == 0 ? `<span class="Resolved" main-id="${item.am_id}">Resolved</span>` : ''}
|
||||
</span>
|
||||
// <span class="isRemarkIcon" main-id="${item.am_id}" > (${item.am_id})</span>
|
||||
// ${item.state == 0 ? `<span class="Resolved" main-id="${item.am_id}">Resolved</span>` : ''}
|
||||
// </span>
|
||||
|
||||
`;
|
||||
}
|
||||
// 判断是否是图片
|
||||
if (item.type == 1) {
|
||||
var extension = item.image.url.split('.').pop().toLowerCase();
|
||||
if (extension == 'tif') {
|
||||
contentHtml = `
|
||||
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
|
||||
item.am_id
|
||||
}">
|
||||
<img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
|
||||
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
|
||||
</p>
|
||||
`;
|
||||
} else if (['jpg', 'jpeg', 'png'].includes(extension)) {
|
||||
contentHtml = `
|
||||
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
|
||||
item.ami_id
|
||||
}" main-id="${item.am_id}">
|
||||
${isRemark}
|
||||
<img src="${this.mediaUrl + item.image.url}" style="width: ${
|
||||
item.width ? `${item.width}px` : '100%'
|
||||
}" />
|
||||
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
|
||||
item.image.note ? item.image.note : ''
|
||||
}</font>
|
||||
</p>
|
||||
`;
|
||||
} else {
|
||||
contentHtml = `
|
||||
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
|
||||
item.ami_id
|
||||
}" main-id="${item.am_id}">
|
||||
${isRemark}
|
||||
<span
|
||||
style="
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
Figures ( .${item.image.url.split('.').pop().toUpperCase()})
|
||||
</span>
|
||||
// `;
|
||||
// }
|
||||
// // 判断是否是图片
|
||||
// if (item.type == 1) {
|
||||
// var extension = item.image.url.split('.').pop().toLowerCase();
|
||||
// if (extension == 'tif') {
|
||||
// contentHtml = `
|
||||
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
|
||||
// item.am_id
|
||||
// }">
|
||||
// <img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
|
||||
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
|
||||
// </p>
|
||||
// `;
|
||||
// } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
|
||||
// contentHtml = `
|
||||
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
|
||||
// item.ami_id
|
||||
// }" main-id="${item.am_id}">
|
||||
// ${isRemark}
|
||||
// <img src="${this.mediaUrl + item.image.url}" style="width: ${
|
||||
// item.width ? `${item.width}px` : '100%'
|
||||
// }" />
|
||||
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
|
||||
// item.image.note ? item.image.note : ''
|
||||
// }</font>
|
||||
// </p>
|
||||
// `;
|
||||
// } else {
|
||||
// contentHtml = `
|
||||
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
|
||||
// item.ami_id
|
||||
// }" main-id="${item.am_id}">
|
||||
// ${isRemark}
|
||||
// <span
|
||||
// style="
|
||||
// text-align: center;
|
||||
// font-size: 30px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// "
|
||||
// >
|
||||
// Figures ( .${item.image.url.split('.').pop().toUpperCase()})
|
||||
// </span>
|
||||
|
||||
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
|
||||
item.image.note ? item.image.note : ''
|
||||
}</font>
|
||||
</p>
|
||||
`;
|
||||
}
|
||||
} else if (item.type == 2) {
|
||||
var tableList = JSON.parse(item.table.table_data);
|
||||
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
|
||||
// item.image.note ? item.image.note : ''
|
||||
// }</font>
|
||||
// </p>
|
||||
// `;
|
||||
// }
|
||||
// } else if (item.type == 2) {
|
||||
// var tableList = JSON.parse(item.table.table_data);
|
||||
|
||||
contentHtml = `
|
||||
<div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
|
||||
item.am_id
|
||||
}" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
|
||||
${isRemark}
|
||||
<font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
|
||||
<table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
|
||||
${tableList
|
||||
.map((row) => {
|
||||
return `
|
||||
<tr>
|
||||
${row
|
||||
.map((cell) => {
|
||||
return `
|
||||
<td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
|
||||
<span>${cell.text || ''}</span>
|
||||
</td>
|
||||
`;
|
||||
})
|
||||
.join('')} <!-- join the cells in the row -->
|
||||
</tr>
|
||||
`;
|
||||
})
|
||||
.join('')} <!-- join the rows -->
|
||||
</table>
|
||||
<font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
|
||||
}
|
||||
// contentHtml = `
|
||||
// <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
|
||||
// item.am_id
|
||||
// }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
|
||||
// ${isRemark}
|
||||
// <font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
|
||||
// <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
|
||||
// ${tableList
|
||||
// .map((row) => {
|
||||
// return `
|
||||
// <tr>
|
||||
// ${row
|
||||
// .map((cell) => {
|
||||
// return `
|
||||
// <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
|
||||
// <span>${cell.text || ''}</span>
|
||||
// </td>
|
||||
// `;
|
||||
// })
|
||||
// .join('')} <!-- join the cells in the row -->
|
||||
// </tr>
|
||||
// `;
|
||||
// })
|
||||
// .join('')} <!-- join the rows -->
|
||||
// </table>
|
||||
// <font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
|
||||
// </div>
|
||||
// `;
|
||||
// } else {
|
||||
// contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
|
||||
// }
|
||||
|
||||
// 判断是否是表格类型
|
||||
// // 判断是否是表格类型
|
||||
|
||||
return contentHtml;
|
||||
}).join('');
|
||||
this.htmlContent = htmlContent;
|
||||
// return contentHtml;
|
||||
// }).join('');
|
||||
// this.htmlContent = htmlContent;
|
||||
this.htmlContent = 'true';
|
||||
|
||||
},
|
||||
// 获取数据
|
||||
async getDate() {
|
||||
|
||||
// this.isFirstComponentLoaded = false;
|
||||
// this.isWordComponentLoaded = false;
|
||||
this.imagesList = [];
|
||||
@@ -1374,6 +1406,20 @@ export default {
|
||||
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`;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1688,4 +1734,42 @@ export default {
|
||||
.editFormPizhu img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.go-content-box {
|
||||
background-color: #f2f3f5;
|
||||
}
|
||||
.commentList {
|
||||
width: 350px !important;
|
||||
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fafafa; */
|
||||
background-color: #fafafa;
|
||||
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
|
||||
}
|
||||
|
||||
/* 为整个页面的滚动条设置样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px; /* 垂直滚动条的宽度 */
|
||||
height: 8px; /* 水平滚动条的高度 */
|
||||
}
|
||||
|
||||
/* 滚动条轨道样式 */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1; /* 滚动条轨道颜色 */
|
||||
border-radius: 10px; /* 轨道圆角 */
|
||||
}
|
||||
|
||||
/* 滚动条滑块样式 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888; /* 滚动条滑块颜色 */
|
||||
border-radius: 10px; /* 滑块圆角 */
|
||||
}
|
||||
|
||||
/* 滑块在悬停时的样式 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555; /* 滑块悬停时的颜色 */
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
1022
src/components/page/components/table/comment.vue
Normal file
1022
src/components/page/components/table/comment.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,59 +1,160 @@
|
||||
<template>
|
||||
<div
|
||||
class="tinymce-container editor-container word-container"
|
||||
style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; position: relative; overflow: auto"
|
||||
ref="scrollDiv"
|
||||
>
|
||||
<div class="tinymce-container editor-container word-container" style="" ref="scrollDiv">
|
||||
<div
|
||||
style="
|
||||
box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
|
||||
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"> -->
|
||||
<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> -->
|
||||
|
||||
@@ -70,41 +171,6 @@ const toolbar = 'addImageButton ';
|
||||
const tableStyle = `
|
||||
.tox .tox-edit-area::before{
|
||||
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{
|
||||
@@ -251,6 +317,13 @@ export default {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
comments: {
|
||||
type: Array,
|
||||
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
menubar: {
|
||||
default: 'file edit insert view format table '
|
||||
},
|
||||
@@ -274,6 +347,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editors: {}, // 用于存储每个编辑器的实例
|
||||
editorsInitialized: {}, // 用于存储每个编辑器实例
|
||||
mediaUrl: mediaUrl, //
|
||||
lastTag: null,
|
||||
isEditComment: false,
|
||||
@@ -340,11 +415,11 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
|
||||
this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
|
||||
|
||||
this.isShowEditComment();
|
||||
this.typesettingType = 1;
|
||||
this.initTinymce();
|
||||
// this.initTinymce();
|
||||
},
|
||||
activated() {
|
||||
this.isShowEditComment();
|
||||
@@ -355,79 +430,25 @@ export default {
|
||||
this.destroyTinymce();
|
||||
},
|
||||
methods: {
|
||||
divOnScroll() {
|
||||
console.log('111 at line 358:', 111);
|
||||
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');
|
||||
initializeEditor(index) {
|
||||
const editorId = `editor${index}`;
|
||||
|
||||
if (identity.includes('editor')) {
|
||||
this.isEditComment = true;
|
||||
} else {
|
||||
this.isEditComment = false;
|
||||
// 检查当前编辑器是否已经初始化
|
||||
if (this.editors[editorId]) return;
|
||||
|
||||
// 销毁所有已初始化的编辑器实例
|
||||
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;
|
||||
// _this.$emit('positionAnnotations');
|
||||
// non-breaking
|
||||
window.tinymce.init({
|
||||
selector: '.myeditablediv',
|
||||
tinymce.init({
|
||||
selector: `#${editorId}`,
|
||||
inline: true,
|
||||
license_key: 'gpl', // 使用开源 GPL 许可证
|
||||
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){
|
||||
font-weight:bold !important;
|
||||
background-color:#fef0f0;
|
||||
color: #f56c6c;
|
||||
color: #f56c6c;
|
||||
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){
|
||||
font-weight:bold !important;
|
||||
background-color: rgb(19, 188, 32);
|
||||
color: #fff;
|
||||
color: #fff;
|
||||
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){
|
||||
font-weight:bold !important;
|
||||
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{
|
||||
font-weight:bold !important;
|
||||
background-color:#fef0f0;
|
||||
color: #f56c6c; /* 设置字体颜色 */
|
||||
|
||||
|
||||
fill:#f56c6c !important;
|
||||
font-size:16px!important;
|
||||
}
|
||||
@@ -482,13 +503,13 @@ export default {
|
||||
font-weight:bold !important;
|
||||
color: #007bff; /* 设置字体颜色 */
|
||||
}
|
||||
|
||||
|
||||
.tox-toolbar-overlord .tox-toolbar:nth-child(2) .tox-toolbar__group:nth-child(4) button.tox-tbtn:nth-child(2){
|
||||
font-weight:bold !important;
|
||||
color: #007bff; /* 设置字体颜色 */
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
|
||||
`,
|
||||
menubar: false,
|
||||
toolbar: [
|
||||
@@ -498,6 +519,29 @@ export default {
|
||||
end_container_on_empty_block: true,
|
||||
content_css: 'default ',
|
||||
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', {
|
||||
text: 'Set Title', // 下拉框标题
|
||||
fetch: function (callback) {
|
||||
@@ -529,11 +573,9 @@ export default {
|
||||
while (outerDiv && outerDiv.tagName !== 'DIV') {
|
||||
outerDiv = outerDiv.parentNode;
|
||||
}
|
||||
|
||||
// 如果找到的 div 节点存在
|
||||
if (outerDiv) {
|
||||
const dataId = outerDiv.getAttribute('main-id');
|
||||
|
||||
_this.$emit('onEditTitle', {
|
||||
mainId: dataId,
|
||||
value: item.value
|
||||
@@ -550,7 +592,61 @@ export default {
|
||||
icon: 'checkmark',
|
||||
text: 'Save',
|
||||
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', {
|
||||
@@ -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() {
|
||||
// var deleteButtons = document.querySelectorAll('.wordButtonContainer');
|
||||
// if (deleteButtons) {
|
||||
@@ -1384,11 +1611,100 @@ export default {
|
||||
.word-container table span blue {
|
||||
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 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
::v-deep .tox.tox-tinymce-inline{
|
||||
z-index: 9999 !important;
|
||||
::v-deep .tox.tox-tinymce-inline {
|
||||
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>
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
</ul> -->
|
||||
<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">
|
||||
<li v-show="currentMenu == 1">
|
||||
<!-- <li v-show="currentMenu == 1">
|
||||
<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">
|
||||
<div @click.prevent="goToComment(comment.am_id)">
|
||||
@@ -74,18 +74,9 @@
|
||||
<span style="color: #b8b7b7;font-size: 12px">{{ getTime(comment.ctime) }}</span>
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 删除按钮 -->
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</li>
|
||||
</li> -->
|
||||
<li v-show="currentMenu == 2">
|
||||
<div style="" class="go-content-charts-item-box">
|
||||
<div class="item_box" style="width: 100%; height: auto; position: relative">
|
||||
|
||||
@@ -80,6 +80,8 @@ Vue.component('common-tiff', commonTiff);
|
||||
import commonContent from '@/components/page/components/table/content.vue'
|
||||
Vue.component('common-content', commonContent);
|
||||
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);
|
||||
import commonAnnotations from '@/components/page/components/table/annotations.vue'
|
||||
Vue.component('common-annotations', commonAnnotations);
|
||||
|
||||
@@ -988,7 +988,8 @@ export default new Router({
|
||||
path: '/GenerateCharts', //用户端预收录-引用编辑
|
||||
component: () => import('../components/page/GenerateCharts'),
|
||||
meta: {
|
||||
title: 'Text Proofread'
|
||||
title: 'Text Proofread',
|
||||
hideSidebar: true
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user