Files
tougao_web/src/components/page/articleDetailEditor.vue
wangjinlei 0c02b8efbd 20210625
2021-06-25 11:26:07 +08:00

940 lines
42 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<i class="el-icon-lx-calendar"></i> Manuscript detail
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<el-row>
<el-col :span="16">
<div class="form-box" v-loading="loading">
<el-form ref="articleform" :model="form" label-width="200px">
<el-form-item label="Status">
<span>{{articleState}}</span>
<el-button
style="margin-left:10px;"
type="text"
@click="testvis"
icon="el-icon-edit"
>change</el-button>
</el-form-item>
<el-form-item label="Remarks">
<span>{{form.remarks}}</span>
<el-button
style="margin-left:10px;"
type="text"
@click="testedit"
icon="el-icon-edit"
>edit</el-button>
</el-form-item>
<el-form-item label="Repetition">
<span>{{form.repetition}}%</span>
<el-button
style="margin-left:10px;"
type="text"
@click="changeRepe"
icon="el-icon-edit"
>change</el-button>
</el-form-item>
<el-form-item v-if="form.accept_sn != ''" label="Manusript ID">
<span>{{form.accept_sn}}</span>
</el-form-item>
<el-form-item label="Journal">
<span>{{journal_me}}</span>
</el-form-item>
<el-form-item v-if="form.special_num > 0 " label="Special Issues">
<span>{{ form.special_title }}</span>
</el-form-item>
<el-form-item label="Title">
<span>{{form.title}}</span>
</el-form-item>
<el-form-item label="Type">
<span>{{myType}}</span>
</el-form-item>
<el-form-item label="Major">
<el-row>
<el-col :span="8">{{form.major}}</el-col>
<el-col :span="16">{{form.cmajor}}</el-col>
</el-row>
</el-form-item>
<el-form-item label="Ethical Approval" v-show="form.type=='A'">
<span>{{form.approval?'yes':'no'}}</span>
</el-form-item>
<el-form-item label="Author">
<el-collapse>
<el-collapse-item
v-for="(item, index) in form.authorList"
:key="index"
:name="index+1"
>
<template
slot="title"
>Author {{index+1}} :{{item.firstname}} {{item.lastname}} {{item.isSuper?'#':''}}{{item.isReport?'*':''}}</template>
<el-form-item label="E-mail:" label-width="100px">
{{item.email}}
</el-form-item>
<el-form-item label="Name:" label-width="100px">
{{item.firstname}} {{item.lastname}}
</el-form-item>
<el-form-item label="ORCID iD:" label-width="100px">
{{item.orcid}}
</el-form-item>
<el-form-item label="First author:" label-width="100px">
<el-switch
v-model="item.isSuper"
active-text="yes"
inactive-text="no"
></el-switch>
</el-form-item>
<el-form-item
label="Corresponding Author:"
label-width="160px"
>
<el-switch
v-model="item.isReport"
active-text="yes"
inactive-text="no"
></el-switch>
</el-form-item>
<el-form-item
label="Address"
label-width="100px"
v-show="item.isReport"
>
{{item.address}}
</el-form-item>
<el-form-item label="Institution:" label-width="100px">
{{item.company}}
</el-form-item>
<el-form-item label="Department:" label-width="100px">
{{item.department}}
</el-form-item>
<el-form-item label="Title:" label-width="100px">
{{item.title}}
</el-form-item>
<el-form-item label="Country:" label-width="100px">
{{item.country}}
</el-form-item>
</el-collapse-item>
</el-collapse>
</el-form-item>
<el-form-item label="Abstrart">
<span>{{form.abstrart}}</span>
</el-form-item>
<el-form-item label="KeyWords">
<span>{{form.keyWords}}</span>
</el-form-item>
<el-form-item label="Fund">
<span>{{form.fund}}</span>
</el-form-item>
<el-form-item label="Cover letter">
<el-popover placement="right" width="350" trigger="click">
<el-table :data="coverLetterFileList">
<el-table-column
width="150"
:formatter="filedateformate"
property="ctime"
align="center"
label="date"
></el-table-column>
<el-table-column
width="100"
property="username"
align="center"
label="Uploader"
></el-table-column>
<el-table-column
width="100"
label="download"
align="center"
>
<template slot-scope="scope">
<el-link
type="primary"
icon="el-icon-download"
:href="getlinkurl(scope.row)"
></el-link>
</template>
</el-table-column>
</el-table>
<el-button
class="more_btn"
icon="el-icon-download"
type="text"
slot="reference"
>Download</el-button>
</el-popover>
<!-- <el-upload
class="upload-demo"
:action="upload_coverLetter"
accept=".pdf, .doc, .docx"
name="coverLetter"
:before-upload="beforeupload_coverLetter"
:on-error="uperr_coverLetter"
:on-success="upSuccess_coverLetter"
:limit="1"
:on-exceed="alertlimit"
:on-remove="removefilecoverLetter"
>
<div class="el-upload__text">
<em>Re upload</em>
</div>
<div
class="el-upload__tip"
slot="tip"
>Only pdf and word files can be uploaded(.pdf,.doc,.docx)</div>
</el-upload> -->
</el-form-item>
<el-form-item label="Figures">
<el-popover placement="right" width="350" trigger="click">
<el-table :data="picturesAndTablesFileList">
<el-table-column
width="150"
:formatter="filedateformate"
property="ctime"
align="center"
label="date"
></el-table-column>
<el-table-column
width="100"
property="username"
align="center"
label="Uploader"
></el-table-column>
<el-table-column
width="100"
label="download"
align="center"
>
<template slot-scope="scope">
<el-link
type="primary"
icon="el-icon-download"
:href="getlinkurl(scope.row)"
></el-link>
</template>
</el-table-column>
</el-table>
<el-button
class="more_btn"
icon="el-icon-download"
type="text"
slot="reference"
>Download</el-button>
</el-popover>
<!-- <el-upload
class="upload-demo"
:action="upload_picturesAndTables"
accept=".rar, .zip"
name="picturesAndTables"
:before-upload="beforeupload_picturesAndTables"
:on-error="uperr_coverLetter"
:on-success="upSuccess_picturesAndTables"
:limit="1"
:on-exceed="alertlimit"
:on-remove="removefilepicturesAndTables"
>
<div class="el-upload__text">
<em>Re upload</em>
</div>
<div
class="el-upload__tip"
slot="tip"
>Only compressed files can be uploaded(.rar,.zip)</div>
</el-upload> -->
</el-form-item>
<el-form-item label="Title page">
<el-popover placement="right" width="350" trigger="click">
<el-table :data="totalpageFileList">
<el-table-column
width="150"
:formatter="filedateformate"
property="ctime"
align="center"
label="date"
></el-table-column>
<el-table-column
width="100"
property="username"
align="center"
label="Uploader"
></el-table-column>
<el-table-column
width="100"
label="download"
align="center"
>
<template slot-scope="scope">
<el-link
type="primary"
icon="el-icon-download"
:href="getlinkurl(scope.row)"
></el-link>
</template>
</el-table-column>
</el-table>
<el-button
class="more_btn"
icon="el-icon-download"
type="text"
slot="reference"
>Download</el-button>
</el-popover>
<!-- <el-upload
class="upload-demo"
:action="upload_totalpage"
accept=".doc, .docx, .rar, .zip"
name="totalpage"
:before-upload="beforeupload_totalpage"
:on-error="uperr_coverLetter"
:on-success="upSuccess_totalpage"
:limit="1"
:on-exceed="alertlimit"
:on-remove="removefiletotalpage"
>
<div class="el-upload__text">
<em>Re upload</em>
</div>
<div
class="el-upload__tip"
slot="tip"
>Only word and compressed files can be uploaded(.doc,.docx,.rar,.zip)</div>
</el-upload> -->
</el-form-item>
<el-form-item label="Manuscirpt">
<el-popover placement="right" width="350" trigger="click">
<el-table :data="manuscirptFileList">
<el-table-column
width="150"
:formatter="filedateformate"
property="ctime"
align="center"
label="date"
></el-table-column>
<el-table-column
width="100"
property="username"
align="center"
label="Uploader"
></el-table-column>
<el-table-column
width="100"
label="download"
align="center"
>
<template slot-scope="scope">
<el-link
type="primary"
icon="el-icon-download"
:href="getlinkurl(scope.row)"
></el-link>
</template>
</el-table-column>
</el-table>
<el-button
class="more_btn"
icon="el-icon-download"
type="text"
slot="reference"
>Download</el-button>
</el-popover>
<el-upload
class="upload-demo"
:action="upload_manuscirpt"
accept=".doc, .docx, .rar, .zip"
name="manuscirpt"
:before-upload="beforeupload_manuscirpt"
:on-error="uperr_coverLetter"
:on-success="upSuccess_manuscirpt"
:limit="1"
:on-exceed="alertlimit"
:on-remove="removefilemanuscirpt"
>
<div class="el-upload__text">
<em>Re upload</em>
</div>
<div
class="el-upload__tip"
slot="tip"
>Only word and compressed files can be uploaded(.doc,.docx,.rar,.zip)</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onsubmit">Submit</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
<el-col :span="8">
<div class="tree_box">
<h2>State tracking</h2>
<div class="block">
<el-timeline>
<el-timeline-item
:timestamp="formatDate(form.ctime)"
placement="top"
>
<el-card>
<h4>Manuscript submission</h4>
<p>{{form.username}} Submit articles</p>
<p>Manuscript ID:{{form.accept_sn}}</p>
</el-card>
</el-timeline-item>
<el-timeline-item
v-for="(activity, index) in msgs"
:key="index"
:timestamp="formatDate(activity.ctime)"
placement="top"
>
<el-card v-if="activity.ftype==0">
<p>Status change :{{statetostr(activity.state_from)}} => {{statetostr(activity.state_to)}}</p>
<p v-if="activity.content!=''">{{activity.content}}</p>
</el-card>
<el-card v-else>
<p>Author message:</p>
<p>{{activity.content}}</p>
</el-card>
<!-- <el-card>
<p>state change :{{statetostr(activity.state_from)}} => {{statetostr(activity.state_to)}}</p>
<p>{{activity.content}}</p>
</el-card> -->
</el-timeline-item>
</el-timeline>
</div>
</div>
</el-col>
</el-row>
</div>
<el-dialog title="edit" :visible.sync="editVisible" width="40%" v-loading="loading1">
<el-form ref="editform" :model="editform" label-width="80px" >
<el-form-item label="state">
<el-select v-model="editform.state" placeholder="Please select">
<el-option
v-for="item in items"
:key="item.state"
:label="item.title"
:value="item.state"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="transfer" v-show="editform.state==3 && form.transList.length==0">
<el-select v-model="editform.trsjournal" placeholder="Please select">
<el-option :key="0" label="no transfer" :value="0"></el-option>
<el-option
v-for="item in journals"
:key="item.journal_id"
:label="item.title"
:value="item.journal_id"
:disabled="item.journal_id==form.journal"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="editormsg">
<el-input
type="textarea"
rows="5"
v-model="editform.editormsg"
placeholder="feedback information"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editVisible = false">cancel</el-button>
<el-button type="primary" @click="saveEdit">save</el-button>
</span>
</el-dialog>
<el-dialog title="remarks" :visible.sync="editbox" width="40%" v-loading="loading2">
<el-form ref="remark" :model="remark" label-width="80px" >
<el-form-item label="content">
<el-input
type="textarea"
rows="5"
v-model="remark.content"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveRemark">save</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog title="repetition" :visible.sync="repebox" width="40%" v-loading="loading3">
<el-form ref="repetition" :model="repeform" label-width="80px" >
<el-form-item label="content">
<el-input maxlength="3" style="width:100px;" v-model="repeform.repefen" >
<template slot="append">%</template>
</el-input>
</el-form-item>
<el-form-item label="Zip">
<el-upload
class="upload-demo"
:action="upload_zip"
accept=".rar, .zip"
name="repezip"
:on-success="upSuccess_repezip"
:limit="1"
:on-exceed="alertlimit"
:on-remove="removefilerepezip"
>
<div class="el-upload__text">
<em>click upload</em>
</div>
<div
class="el-upload__tip"
slot="tip"
>Only pdf and word files can be uploaded(.pdf,.doc,.docx)</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveRepe">save</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
baseUrl: this.Common.baseUrl,
mediaUrl:this.Common.mediaUrl,
items: '',
loading:false,
loading1:false,
loading2:false,
loading3:false,
editVisible: false,
editbox:false,
repebox:false,
coverLetterFileList: [],
picturesAndTablesFileList: [],
totalpageFileList:[],
manuscirptFileList: [],
editform: {
editname: localStorage.getItem('ms_username'),
articleId: this.$route.query.id,
state: 0,
trsjournal:0,
editormsg: ''
},
remark:{
articleId:this.$route.query.id,
content:''
},
repeform:{
articleId:this.$route.query.id,
repefen:'',
zipurl:''
},
journals:[],
items: [
{
state: 0,
title: this.$t('artstate.state0'),
disabled: true
},
{
state: 1,
title: this.$t('artstate.state1')
},
{
state: 2,
title: this.$t('artstate.state2'),
},
{
state: 3,
title: this.$t('artstate.state3')
},
{
state: 4,
title: this.$t('artstate.state4')
},
{
state: 5,
title: this.$t('artstate.state5')
}
],
form: {
articleId: this.$route.query.id,
journal: '',
journalname: '',
username: '',
title: '',
accept_sn:'',
abstrart: '',
keyWords: '',
fund: '',
type:'',
major:'',
cmajor:'',
approval:false,
repetition:'',
manuscirpt: '',
remarks:'',
state: '',
ctime: '',
authorList:[],
transList:[]
},
msgs: []
};
},
created: function() {
this.initarticle();
this.initselect();
this.initFileList();
},
computed: {
myType:function(){
let frag = '';
switch(this.form.type){
case "A":
frag = 'Article';
break;
case 'B':
frag = 'Review';
break;
case 'C':
frag = 'Case report';
break;
case 'M':
frag = 'Meta-analysis';
break;
case 'P':
frag = 'Research proposal';
break;
case 'N':
frag = 'News';
break;
case 'T':
frag = 'Comment';
break;
default:
frag = 'Others';
}
return frag;
},
// coverLetterUrl: function() {
// return this.baseUrl + this.form.coverLetter;
// },
// picturesAndTablesUrl: function() {
// return this.baseUrl + this.form.picturesAndTables;
// },
manuscirptUrl: function() {
return this.baseUrl + this.form.manuscirpt;
},
upload_coverLetter:function(){
return this.baseUrl+'api/Article/up_file/type/coverLetter';
},
upload_picturesAndTables:function(){
return this.baseUrl+'api/Article/up_file/type/picturesAndTables';
},
upload_manuscirpt:function(){
return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
},
upload_zip:function(){
return this.baseUrl + 'api/Article/up_file/type/repezip';
},
journal_me:function(){
var frag = this.form.journalname;
if(this.form.special_num>0){
frag += "(Special Issues)";
}
return frag;
},
articleState: function() {
let str = '';
switch (this.form.state) {
case 0:
str = this.$t('artstate.state0');
break;
case 1:
str = this.$t('artstate.state1');
break;
case 2:
str = this.$t('artstate.state2');
break;
case 3:
str = this.$t('artstate.state3');
break;
case 4:
str = this.$t('artstate.state4');
break;
case 5:
str = this.$t('artstate.state5');
break;
}
return str;
}
},
methods: {
//弹出编辑框
testvis() {
this.editVisible = true;
},
testedit(){
this.editbox = true;
},
changeRepe(){
this.repebox = true;
},
statetostr(mystate) {
let str = '';
switch (mystate) {
case 0:
str = this.$t('artstate.state0');
break;
case 1:
str = this.$t('artstate.state1');
break;
case 2:
str = this.$t('artstate.state2');
break;
case 3:
str = this.$t('artstate.state3');
break;
case 4:
str = this.$t('artstate.state4');
break;
case 5:
str = this.$t('artstate.state5');
break;
}
return str;
},
//修改文章状态
saveEdit() {
this.loading1 = true;
this.$api
.post('api/Article/editArticleEditor', this.editform)
.then(res => {
this.loading1 = false;
this.$message.success('success');
this.editVisible = false;
this.$router.go(0);
})
.catch(err => {
console.log(err);
});
},
saveRemark(){
this.loading2 = true;
this.$api.post('api/Article/editArticleRemark',this.remark)
.then(res=>{
this.loading2 = false;
this.$message.success('success');
this.$router.go(0);
});
},
saveRepe(){
if(this.repeform.zipurl==''){
this.$message.error('please upload zip');
return false;
}
this.loading3 = true;
this.$api.post('api/Article/changeRepetition',this.repeform)
.then(res=>{
this.loading3 = false;
this.$message.success('success');
this.$router.go(0);
});
},
//初始化期刊选项
initselect() {
this.$api
.post('api/Article/getJournal')
.then((res) => {
this.journals = res;
})
.catch((err) => {
console.log(err);
});
},
//初始化期刊信息
initarticle() {
this.$api
.post('api/Article/getArticleDetail', { articleId: this.editform.articleId,human:'editor' })
.then(res => {
console.log(res);
this.form.username = res.article.account;
this.form.title = res.article.title;
this.form.journal = res.article.journal_id;
this.form.journalname = res.article.journalname;
this.form.abstrart = res.article.abstrart;
this.form.accept_sn = res.article.accept_sn;
this.form.keyWords = res.article.keywords;
this.form.fund = res.article.fund;
this.form.type = res.article.type;
this.form.special_num = res.article.special_num;
this.form.special_title = res.article.special_title;
this.form.major = res.major.major==null?'':res.major.major.title;
this.form.cmajor = res.major.cmajor==null?'':res.major.cmajor.title;
this.form.approval = res.article.approval==1?true:false;
this.form.repetition = res.article.repetition;
this.form.remarks = res.article.remarks;
this.repeform.repefen = res.article.repetition;
this.remark.content = res.article.remarks;
this.editform.state = this.form.state = res.article.state;
this.form.ctime = res.article.ctime;
this.form.transList = res.transfer;
this.msgs = res.msg;
var alist = res.authors;
for (var i in alist) {
this.form.authorList.push({
art_aut_id: alist[i].art_aut_id,
firstname: alist[i].firstname,
lastname: alist[i].lastname,
orcid: alist[i].orcid,
company: alist[i].company,
department: alist[i].department,
title: alist[i].author_title,
country: alist[i].country,
email: alist[i].email,
address: alist[i].address,
isSuper: alist[i].is_super == 1 ? true : false,
isReport: alist[i].is_report == 1 ? true : false
});
}
})
.catch(err => {
console.log(err);
});
},
//初始化filelist
initFileList() {
this.$api
.post('api/Article/getFilelistByArticleID', { articleId: this.form.articleId })
.then(res => {
this.coverLetterFileList = res.coverLetter;
this.picturesAndTablesFileList = res.picturesAndTables;
this.manuscirptFileList = res.manuscirpt;
this.totalpageFileList = res.totalpage;
})
.catch(err => {
console.log(err);
});
},
uperr_coverLetter(err) {
this.$message.error('upload error');
},
beforeupload() {},
filedateformate(row, column, cellValue, index) {
return this.formatDate(cellValue);
},
// upSuccess_coverLetter(res, file) {
// if (res.code == 0) {
// this.form.coverLetter = 'coverLetter/' + res.upurl;
// } else {
// this.$message.error('service error' + res.msg);
// }
// },
// upSuccess_picturesAndTables(res, file) {
// if (res.code == 0) {
// this.form.picturesAndTables = 'picturesAndTables/' + res.upurl;
// } else {
// this.$message.error('service error' + res.msg);
// }
// },
upSuccess_manuscirpt(res, file) {
if (res.code == 0) {
this.form.manuscirpt = 'manuscirpt/' + res.upurl;
} else {
this.$message.error('service error' + res.msg);
}
},
upSuccess_repezip(res, file){
if(res.code == 0){
this.repeform.zipurl = 'repezip/'+res.upurl;
}
},
//超出传送文件个数限制
alertlimit() {
this.$message.error('The maximum number of uploaded files has been exceeded');
},
getlinkurl(row) {
return this.mediaUrl + row.file_url;
},
//检验上传文件的格式
beforeupload_manuscirpt(file) {
// const ismau =
// file.type === 'application/msword' ||
// file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'||
// file.type === 'application/x-zip-compressed' ||
// file.name.split(".")[1] === 'rar';
// if (!ismau) {
// this.$message.error('Only word and compressed files(.doc,.docx,.rar,.zip)');
// }
// return ismau;
},
//清除文件时的事件
removefilemanuscirpt(file, fileList) {
this.form.manuscirpt = '';
},
removefilerepezip(file, fileList){
this.repeform.zipurl = '';
},
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;
},
onsubmit() {
if ( this.form.manuscirpt == '') {
this.$message.error('Manuscirpt is required');
console.log('file up error');
return false;
}
this.loading = true;
this.$api.post('api/Article/changeArticleFileEditor',this.form)
.then(res=>{
this.loading = false;
this.$message.success('success');
this.$router.go(0);
})
.catch(err=>{
console.log(err);
});
}
}
};
</script>
<style scoped>
.dwnbtn {
margin-bottom: 5px;
}
.container {
min-width: 800px;
}
.tree_box {
padding: 15px 10px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-row {
border-bottom: rgb(230, 211, 211) solid 1px;
margin-bottom: 5px;
line-height: 3.5;
}
.author-title {
color: #969595;
text-align: center;
background-color: #eceaea;
}
.author-delete {
text-align: center;
}
.author-delete i {
color: red;
}
</style>