582 lines
22 KiB
Vue
582 lines
22 KiB
Vue
<template>
|
||
<div>
|
||
<div class="crumbs">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item>
|
||
<i class="el-icon-lx-calendar"></i>
|
||
<router-link :to="{ path: '/articleList' }">
|
||
<span class="top_dao"> Manuscript list</span>
|
||
</router-link>
|
||
>> Manuscript process
|
||
</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
<div class="container_state">
|
||
<p style="color: #888; margin: 10px 0 5px 0">ID : {{ artMes.accept_sn }}</p>
|
||
<p style="font-size: 16px; font-weight: bolder; letter-spacing: -0.5px">
|
||
<!-- <span class="art_type">{{ellType(artMes.type)}}</span> -->
|
||
{{ artMes.title }}
|
||
</p>
|
||
<!-- <p style="color: #7f8790;margin: 10px 0 0 0;">Follow the progress of your submission.</p> -->
|
||
<div class="tit_head">
|
||
Status : <b style="margin: 0 50px 0 0">{{ statetostr(artMes.laststate) }}</b> Journal : <b>{{ artMes.journalname }}</b>
|
||
</div>
|
||
<div class="tit_head" v-if="artMes.majors&&artMes.majors.length>0">
|
||
<b style="margin: 0 50px 0 0;font-size: 20px;">Research areas</b>
|
||
|
||
<div style="margin-top: 10px;">
|
||
<p style="" v-for="(v, i) in artMes.majors">
|
||
<span style="color: #333; margin-right: 10px">Field {{ i + 1 }}:</span>{{ v.str
|
||
}}
|
||
</p>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<el-row :gutter="30">
|
||
<el-col :span="15">
|
||
<div class="process_new">
|
||
<!-- <p style="width: 100%;height: 1px;background-color: #eee;margin: 35px 0 30px 0;"></p> -->
|
||
<h2 style="font-size: 18px; margin: 0 0 10px 0; float: left; letter-spacing: -0.8px">Manuscript Tracking</h2>
|
||
<!-- <div class="radio" style="float: right;">
|
||
<el-radio-group v-model="reverse">
|
||
<el-radio-button :label="false">Ascending</el-radio-button>
|
||
<el-radio-button :label="true">Descending</el-radio-button>
|
||
</el-radio-group>
|
||
</div> -->
|
||
<br clear="both" />
|
||
<el-timeline :reverse="reverse" class="author_tree">
|
||
<el-timeline-item
|
||
v-for="(item, index) in prossMsgs"
|
||
:icon="item.icon"
|
||
:color="item.color"
|
||
size="large"
|
||
:key="index"
|
||
:timestamp="formatDate(item.ctime)"
|
||
placement="top"
|
||
v-if="item.ftype == 0"
|
||
>
|
||
<el-card>
|
||
<p>
|
||
<font>{{ statetostr(item.state_to) }}</font>
|
||
<!-- 提交 -->
|
||
<font v-if="item.state_to == -1">
|
||
<!-- : <font style="margin-left: 5px;">First submitted to <b>{{artMes.journalname}}</b></font> -->
|
||
</font>
|
||
<!-- 给编辑 -->
|
||
<font v-if="item.state_to == 1">
|
||
<!-- : <b style="margin-left: 5px;"> Submission checks complete</b> -->
|
||
</font>
|
||
<!-- 审查中 -->
|
||
<font v-if="item.state_to == 2">
|
||
<!-- : <b style="margin-left: 5px;"> Editor assigned</b> -->
|
||
</font>
|
||
<!-- 拒绝 -->
|
||
<font v-if="item.state_to == 3">
|
||
<!-- : <b> Reject manuscript</b> -->
|
||
</font>
|
||
<!-- 修改 -->
|
||
<font v-if="item.state_to == 4">
|
||
:
|
||
<router-link
|
||
:to="{ path: '/articleProcessRevision', query: { id: artMes.article_id } }"
|
||
v-if="item.back == 1"
|
||
>
|
||
<b style="margin-left: 5px; color: #006699; text-decoration: underline"
|
||
>Upload Major Revision</b
|
||
>
|
||
</router-link>
|
||
<b style="margin-left: 5px; color: #888; text-decoration: underline" v-if="item.back == 0">
|
||
Upload Major Revision (Completed)
|
||
</b>
|
||
</font>
|
||
<!-- 接收 -->
|
||
<font v-if="item.state_to == 5">
|
||
<!-- : <b style="margin-left: 5px;"> Successfully received manuscript</b> -->
|
||
</font>
|
||
</p>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="9">
|
||
<!-- 审稿人列表 -->
|
||
<!-- <div class="art_process_">
|
||
<h2>
|
||
Coment from reviewers
|
||
</h2>
|
||
<div style="max-height: 300px;overflow-y: auto;">
|
||
<div class="art_process_list">
|
||
<b>1</b>reviewers <span>202-50-60</span>
|
||
<p>reviewersreviewersreviewersreviewersreviewers</p>
|
||
</div>
|
||
<div class="art_process_list">
|
||
<b>1</b>reviewers <span>202-50-60</span>
|
||
<p>reviewersreviewersreviewersreviewersreviewers</p>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- 对话列表 -->
|
||
<div class="kuang_communtion">
|
||
<h2>Communication</h2>
|
||
<div v-for="item in talkMsgs" class="kuang_communtion_conmt">
|
||
<div v-if="item.user_id != artMes.user_id" class="talk_aued">
|
||
<p>Editor :</p>
|
||
<el-card>
|
||
<p style="white-space: pre-wrap">{{ item.ad_content }}</p>
|
||
</el-card>
|
||
<b>{{ formatDate(item.ad_ctime) }}</b>
|
||
</div>
|
||
<div v-if="item.user_id == artMes.user_id" class="talk_aued talk_edit">
|
||
<p>Author :</p>
|
||
<el-card>
|
||
<p style="white-space: pre-wrap">{{ item.ad_content }}</p>
|
||
</el-card>
|
||
<b>{{ formatDate(item.ad_ctime) }}</b>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kuang_communtion_input">
|
||
<p v-if="talkMsgs"></p>
|
||
<span class="text_bor_ghu">
|
||
<el-input
|
||
type="textarea"
|
||
rows="3"
|
||
v-model="msgform.ad_content"
|
||
placeholder="You can initiate short conversations with the editor."
|
||
resize="none"
|
||
>
|
||
</el-input>
|
||
<el-button type="primary" @click="saveMsg">Send</el-button>
|
||
</span>
|
||
|
||
<font style="font-size: 12px; color: #999; padding: 12px 5px 0 5px; display: block">
|
||
This column is served as an instant correspondence between the editor and authors, aiming to acquire a
|
||
faster way of communication than E-Mail. If you have any questions, please start the instant corresponding,
|
||
and the editors will reply to you in 24 hours.
|
||
<br />
|
||
<font style="color: #006699">Please Attention</font>
|
||
<br />
|
||
<font style="color: #006699">1.</font> If you need to send files as attachments, please send them to
|
||
tmr@tmrjournals.com
|
||
<br />
|
||
<font style="color: #006699">2.</font> Please do not upload the primary documents like the cover letter, the
|
||
reply to the reviewer comments, etc.
|
||
</font>
|
||
</div>
|
||
</div>
|
||
<p style="line-height: 20px; color: #999; padding: 0 15px 0 15px">
|
||
We encourage authors to upload a Cover Letter file and make sure the Highlights part in the main manuscript is after
|
||
the abstract and keywords. That will help authors let editors quickly obtain information and evaluate the scientific
|
||
value of their research correctly.
|
||
<br />Please remind our editor in the cover letter if you want your manuscript processed quickly. <br />Please note
|
||
that manuscripts with at least one of the following characteristics will be included in the journal's manuscript
|
||
fast track:
|
||
<br />
|
||
<font style="color: #006699">1.Interest:</font> This manuscript has a novel perspective.
|
||
<br />
|
||
<font style="color: #006699">2.Importance:</font> This manuscript belongs to the focus area.
|
||
<br />
|
||
<font style="color: #006699">3.Value:</font> This manuscript belongs to the advanced topic and can attract wide
|
||
attention.
|
||
</p>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<el-dialog title="Message" :visible.sync="editVisible" width="40%">
|
||
<el-form ref="msgform" :model="msgform" label-width="80px">
|
||
<el-form-item label="Message">
|
||
<el-input type="textarea" rows="5" v-model="msgform.content" placeholder="Author messages"> </el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="saveMsg" :loading="saveloading">save</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
baseUrl: this.Common.baseUrl,
|
||
mediaUrl: this.Common.mediaUrl,
|
||
articleId: this.$route.query.id,
|
||
userName: localStorage.getItem('U_name'),
|
||
loading: false,
|
||
reverse: false,
|
||
artMes: {
|
||
articleId: this.$route.query.id
|
||
},
|
||
msgform: {
|
||
username: localStorage.getItem('U_name'),
|
||
article_id: this.$route.query.id,
|
||
ad_content: ''
|
||
},
|
||
query_review: {
|
||
articleId: this.$route.query.id,
|
||
pageIndex: 1,
|
||
pageSize: 10
|
||
},
|
||
prossMsgs: [],
|
||
talkMsgs: [],
|
||
review_Data: [],
|
||
|
||
editVisible: false,
|
||
saveloading: false
|
||
};
|
||
},
|
||
created: function () {
|
||
this.initarticle();
|
||
},
|
||
computed: {},
|
||
methods: {
|
||
//初始化文章信息
|
||
initarticle() {
|
||
this.$api
|
||
.post('api/Article/getArticleDetail', {
|
||
articleId: this.articleId,
|
||
human: 'author'
|
||
})
|
||
.then((res) => {
|
||
let back_num = 0;
|
||
// 添加投递稿件条目
|
||
res.msg.unshift({
|
||
state_to: -1,
|
||
ctime: res.article.ctime,
|
||
color: '#B5C334',
|
||
icon: 'el-icon-collection-tag',
|
||
ftype: 0
|
||
});
|
||
for (let i = res.msg.length - 1; i >= 0; i--) {
|
||
if (res.msg[i].state_to == 4 && res.msg[i + 1] == undefined && back_num == 0) {
|
||
res.msg[i].back = 1;
|
||
back_num = 1;
|
||
} else {
|
||
res.msg[i].back = 0;
|
||
}
|
||
if (res.msg[i].state_to == 1) {
|
||
res.msg[i].color = '#f75822';
|
||
res.msg[i].icon = 'el-icon-document-checked';
|
||
}
|
||
if (res.msg[i].state_to == 2) {
|
||
res.msg[i].color = '#0ebee1';
|
||
res.msg[i].icon = 'el-icon-document';
|
||
}
|
||
if (res.msg[i].state_to == 3) {
|
||
res.msg[i].color = '#888';
|
||
res.msg[i].icon = 'el-icon-close';
|
||
}
|
||
if (res.msg[i].state_to == 4) {
|
||
res.msg[i].color = '#5a90e1';
|
||
res.msg[i].icon = 'el-icon-edit-outline';
|
||
}
|
||
if (res.msg[i].state_to == 5) {
|
||
res.msg[i].color = '#91cc75';
|
||
res.msg[i].icon = 'el-icon-check';
|
||
}
|
||
if (res.msg[i].state_to == 6) {
|
||
res.msg[i].color = '#27727B';
|
||
res.msg[i].icon = 'el-icon-star-off';
|
||
}
|
||
}
|
||
this.artMes = res.article;
|
||
this.artMes.laststate = res.msg[res.msg.length - 1].state_to;
|
||
this.prossMsgs = res.msg;
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
|
||
// 留言板列表
|
||
this.$api
|
||
.post('api/Article/getArticleDialogs', {
|
||
article_id: this.$route.query.id
|
||
})
|
||
.then((res) => {
|
||
this.talkMsgs = res.data.dialogs;
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
|
||
// 获取编辑列表数据
|
||
this.$api
|
||
.post('api/Article/getReviewerList', this.query_review)
|
||
.then((res) => {
|
||
this.review_Data = res.data;
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
},
|
||
|
||
// 日期
|
||
formatDate(timestamp) {
|
||
var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
||
var Y = date.getFullYear() + '-';
|
||
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
|
||
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
||
var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
|
||
var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
|
||
var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
|
||
return Y + M + D + ' ' + h + ':' + m + ':' + s;
|
||
},
|
||
|
||
// 对话框
|
||
authormsg() {
|
||
this.editVisible = true;
|
||
},
|
||
|
||
// 保存留言
|
||
saveMsg() {
|
||
if (this.msgform.ad_content == '') {
|
||
this.$message.error('Please input messages');
|
||
return false;
|
||
}
|
||
this.loading = true;
|
||
this.$api.post('api/Article/pushArticleDialog', this.msgform).then((res) => {
|
||
this.loading = false;
|
||
this.$message.success('Sent successfully');
|
||
this.initarticle();
|
||
});
|
||
},
|
||
|
||
statetostr(mystate) {
|
||
let str = '';
|
||
switch (mystate) {
|
||
case -1:
|
||
str = 'Submitted';
|
||
break;
|
||
case 0:
|
||
str = 'Received';
|
||
break;
|
||
case 1:
|
||
str = 'With editor';
|
||
break;
|
||
case 2:
|
||
str = 'Under review';
|
||
break;
|
||
case 3:
|
||
str = 'Reject';
|
||
break;
|
||
case 4:
|
||
str = 'Revision';
|
||
break;
|
||
case 5:
|
||
str = 'Accepted';
|
||
break;
|
||
case 6:
|
||
str = 'Pre-accept';
|
||
break;
|
||
default:
|
||
str = 'error!!';
|
||
}
|
||
return str;
|
||
},
|
||
|
||
ellType(e) {
|
||
let frag = '';
|
||
switch (e) {
|
||
case 'A':
|
||
frag = 'Article';
|
||
break;
|
||
case 'B':
|
||
frag = 'Review';
|
||
break;
|
||
case 'C':
|
||
frag = 'Case report';
|
||
break;
|
||
case 'P':
|
||
frag = 'Research proposal';
|
||
break;
|
||
case 'N':
|
||
frag = 'News';
|
||
break;
|
||
case 'T':
|
||
frag = 'Comment';
|
||
break;
|
||
case 'CT':
|
||
frag = 'Correction';
|
||
break;
|
||
case 'HT':
|
||
frag = 'Hypothesis';
|
||
break;
|
||
case 'PF':
|
||
frag = 'Preface';
|
||
break;
|
||
case 'ET':
|
||
frag = 'Editorial';
|
||
break;
|
||
case 'RP':
|
||
frag = 'Report';
|
||
break;
|
||
case 'LR':
|
||
frag = 'Letter';
|
||
break;
|
||
case 'EF':
|
||
frag = 'Empirical formula';
|
||
break;
|
||
case 'EM':
|
||
frag = 'Evidence-based medicine';
|
||
break;
|
||
case 'EC':
|
||
frag = 'Expert consensus';
|
||
break;
|
||
case 'LTE':
|
||
frag = 'Letter to editor';
|
||
break;
|
||
case 'QI':
|
||
frag = 'Questionnaire investigation';
|
||
break;
|
||
case 'PT':
|
||
frag = 'Protocol';
|
||
break;
|
||
case 'CS':
|
||
frag = 'Case Series';
|
||
break;
|
||
case 'RT':
|
||
frag = 'Retraction';
|
||
break;
|
||
case 'MR':
|
||
frag = 'Mini Review';
|
||
break;
|
||
default:
|
||
frag = 'Others';
|
||
}
|
||
return frag;
|
||
}
|
||
},
|
||
filters: {}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.top_dao:hover {
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.process_new {
|
||
border: 1px solid #dcdfe6;
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.art_type {
|
||
/* background-color: #ddeef7; */
|
||
color: #006699;
|
||
padding: 2px 5px;
|
||
border-radius: 5px;
|
||
font-size: 12px;
|
||
margin: 0 10px 0 0;
|
||
}
|
||
|
||
.tit_head {
|
||
border-radius: 5px;
|
||
border: 1px solid #ebeef5;
|
||
padding: 20px;
|
||
font-size: 15px;
|
||
margin: 20px 0 30px 0;
|
||
background-color: #fff;
|
||
/* background-color: #fcfcfc; */
|
||
}
|
||
|
||
.tit_head b {
|
||
color: #006699;
|
||
/* text-decoration: underline; */
|
||
}
|
||
|
||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||
background-color: #006699;
|
||
border-color: #006699;
|
||
}
|
||
|
||
.author_tree {
|
||
margin: 40px 0 0 10px;
|
||
}
|
||
|
||
.author_tree .el-timeline-item {
|
||
padding-bottom: 1px;
|
||
}
|
||
|
||
.author_tree .el-timeline-item__node--large {
|
||
left: 155px;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.author_tree .el-timeline-item__wrapper {
|
||
padding-left: 0;
|
||
margin: 0 0 50px 0;
|
||
}
|
||
|
||
.author_tree .el-timeline-item__timestamp.is-top {
|
||
padding-top: 10px;
|
||
margin-bottom: 13px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.author_tree .el-timeline-item__content {
|
||
margin: -50px 0 0 210px;
|
||
}
|
||
|
||
.author_tree .el-timeline-item__tail {
|
||
height: auto;
|
||
bottom: 15px;
|
||
top: 45px;
|
||
border-left: 3px solid #e4e7ed;
|
||
/* border-left: 2px solid #66a3c2; */
|
||
left: 168px;
|
||
}
|
||
|
||
.art_process_ {
|
||
margin-bottom: 30px;
|
||
border: 1px solid #dcdfe6;
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.art_process_ > h2 {
|
||
font-size: 18px;
|
||
margin: 0 0 2px 0;
|
||
letter-spacing: -0.8px;
|
||
}
|
||
|
||
.art_process_list {
|
||
border-bottom: 1px solid #dcdfe6;
|
||
padding: 15px 0 25px 10px;
|
||
}
|
||
|
||
.art_process_ .art_process_list:last-child {
|
||
border-bottom: 0;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.art_process_list b {
|
||
background-color: #006699;
|
||
color: #fff;
|
||
display: inline-block;
|
||
width: 18px;
|
||
height: 18px;
|
||
line-height: 18px;
|
||
text-align: center;
|
||
margin: 0 10px 0 0;
|
||
}
|
||
|
||
.art_process_list span {
|
||
color: #888;
|
||
margin: 0 0 0 15px;
|
||
}
|
||
|
||
.art_process_list p {
|
||
margin: 10px 0 0 28px;
|
||
}
|
||
</style>
|