468 lines
21 KiB
Vue
468 lines
21 KiB
Vue
<template>
|
||
<div>
|
||
<div class="container" v-loading="importIoading" element-loading-text="In the process of importing, please later">
|
||
<div v-if="tableData.length == 0">
|
||
<!-- 没有引用时 -->
|
||
<div class="noneData">
|
||
<img src="../../assets/img/noneData.png" alt="" class="icon_img">
|
||
<p class="nodatatext">TMR did not identify an available article citation in your latest uploaded document</p>
|
||
</div>
|
||
<el-row :gutter="20">
|
||
<!-- 教程 -->
|
||
<el-col >
|
||
<div class=" whoDo mt20">
|
||
<div>
|
||
<h2>What should I do
|
||
<el-tooltip class="item" effect="light" content="click for more help" placement="right">
|
||
<span class="el-icon-warning-outline help" @click="showHelp"></span>
|
||
</el-tooltip>
|
||
</h2>
|
||
<p class="mt10 c666">you can add a citation in the following way.</p>
|
||
<ul>
|
||
<!-- 文本域 -->
|
||
<li>
|
||
<div class="mt20">
|
||
<h4>Add in bulk by text field <el-button @click="addText" class="inlinebutton" type="primary" plain size="mini">Add</el-button></h4>
|
||
<div v-if="textareaVisible">
|
||
<el-input class="textarea mt10"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="Put your reference entry here"
|
||
v-model="textarea">
|
||
</el-input>
|
||
<el-button class="mt10" icon="el-icon-check" type="primary" size="mini" @click="importText()">Import</el-button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- 文件上传的形式 -->
|
||
<li>
|
||
<div class="mt20">
|
||
<h4>Add in bulk by uploading excel files</h4>
|
||
<p class="mt10 c666">Before uploading the file, you need to download the template file,
|
||
<a href="https://submission.tmrjournals.com/public/coverLetter/system/refer.xlsx" download="refer" target="_blank" class="downloadbtn" >click download</a>
|
||
,to add your references to the template file, and upload it.
|
||
<el-button class="inlinebutton" type="primary" plain size="mini" @click="showUpload">upload</el-button></p>
|
||
<div v-if="uploadVisible">
|
||
<div class="uploadBox">
|
||
<el-upload ref="uploadFile" class="upload-demo up_newstyle" :action="upload_manuscirpt"
|
||
accept=".xlsx" name="referFile" :before-upload="beforeupload_manuscirpt"
|
||
:on-error="uperr_coverLetter" :on-success="upSuccess_manuscirpt" :limit="1"
|
||
:on-exceed="alertlimit"
|
||
:on-remove="removefilemanuscirpt"
|
||
:file-list="fileL_manuscirpt"
|
||
>
|
||
<div class="el-upload__text" @click="clearUploadedFile">
|
||
<em>Upload</em>
|
||
</div>
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<!-- 有引用数据-->
|
||
<div v-else>
|
||
<div class="topInfo">
|
||
<h3>Dear {{user_name}}</h3>
|
||
<p class="mt10">您可以在本页面对引用数据进行对应的修改和调整，主要包括如下操作:</p>
|
||
<ul class="mt20">
|
||
<li>
|
||
<p>需要您调整一下引用条目，将
|
||
<span class="status warn float" ><i class="el-icon-warning-outline"></i></span>
|
||
状态的引用信息调整到
|
||
<span class="status ok float" ><i class="el-icon-warning-outline"></i></span>
|
||
的状态。</p>
|
||
</li>
|
||
<li>
|
||
<p>如果您觉得顺序有不妥，您可以点击每一条信息后面的
|
||
<el-button type="warning" size="mini" plain>↑</el-button>
|
||
和
|
||
<el-button type="warning" size="mini" plain>↓</el-button> 调整数据的前后顺序。</p>
|
||
</li>
|
||
<li>
|
||
<p>您可以点击 <el-button type="success" size="mini" plain>Add</el-button> 在这一行的后面再添加一行引用信息。</p>
|
||
</li>
|
||
<li>
|
||
<p>您也可以全部放弃这些引用信息，重新导入一批引用信息。<el-link type="primary" @click="removeAll">删除并重新导入</el-link></p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="refenceCentent mt20">
|
||
<el-table :data="tableData" ref="multipleTable"
|
||
empty-text="New messages (0)" :show-header="false" :stripe="false" :highlight-current-row="false">
|
||
<!-- <el-table-column type="index" label="No." width="55" align="center"></el-table-column> -->
|
||
<el-table-column label="state" width="55" align="center">
|
||
<template slot-scope="scope">
|
||
<span class="status warn" v-if="scope.row.refer_doi == ''" >
|
||
<i class="el-icon-warning-outline"></i>
|
||
</span>
|
||
<span class="status ok" v-else >
|
||
<i class="el-icon-circle-check"></i>
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="Title" align="left">
|
||
<template slot-scope="scope">
|
||
<p class="wrongLine" style="text-align: left;" v-if="scope.row.refer_doi == ''">
|
||
{{scope.row.refer_content}}
|
||
</p>
|
||
<div style="text-align: left;" v-else>
|
||
<p>{{scope.row.author}}{{scope.row.title}} <em>{{scope.row.joura}}</em> {{scope.row.dateno}}<br/></p>
|
||
<a class="doiLink" :href="scope.row.doilink" target="_blank">{{scope.row.doilink}}</a>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" width="360">
|
||
<div slot-scope="scope">
|
||
<el-button style="margin-left:10px;" @click="change(scope.row)" plain type="primary" size="mini" icon="el-icon-edit">edit</el-button>
|
||
<el-tooltip popper-class="tps" class="item" effect="light" content="Add one under this line" placement="top">
|
||
<el-button @click="addLine(scope.row)" type="success" size="mini" plain>Add</el-button>
|
||
</el-tooltip>
|
||
<el-button type="warning" size="mini" plain :disabled="scope.$index != 0 ? false : true" @click="changeOrder(scope.row,'up')">↑</el-button>
|
||
<el-button type="warning" size="mini" plain :disabled="scope.$index == tableData.length-1 ? true : false" @click="changeOrder(scope.row,'down')">↓</el-button>
|
||
<el-button type="danger" icon="el-icon-delete" size="mini" style="float: right;" plain @click="deleteLine(scope.row)">delete</el-button>
|
||
</div>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 修改引用 -->
|
||
<el-dialog title="Add References" :visible.sync="editboxVisible" width="500px">
|
||
<p class="yinyongPre c888">现在您可以添加或者修改您的引用文献信息，如果您有引用文献的Doi数据，可以直接复制到Doi输入框，并提交，系统会自动识别您的引用文献，如果您没有Doi数据，也可以打开“Show Content”开关，直接填写您的引用文献内容。</p>
|
||
<el-form :model="refenceForm" :rules="refenceFormrules" ref="refenceForm" label-width="80px" class="editForm mt10">
|
||
<el-form-item label="Show Content" label-width="120px">
|
||
<el-switch v-model="contentVisible"></el-switch>
|
||
</el-form-item>
|
||
<el-form-item label="Doi:" required prop="refer_doi" v-if="!contentVisible">
|
||
<el-input v-model="refenceForm.refer_doi" ></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="Content:" required prop="refer_content" v-else>
|
||
<el-input rows="5" v-model="refenceForm.refer_content" type="textarea"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="editboxVisible = false">Cancel</el-button>
|
||
<el-button type="primary" @click="saveChange">Save</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!-- 帮助信息 -->
|
||
<el-dialog title="Any questions or Help" :visible.sync="helpVisible" width="500px">
|
||
<div>
|
||
<p class="mt20">If you do not understand the operation items on this page or need help, you can find us in the following ways:</p>
|
||
<p class="mt20">- Way one</p>
|
||
<p class="mt10">- Way two</p>
|
||
<p class="mt10">- Way three</p>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="helpVisible = false" type="primary">OK</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!-- 临时引用信息 -->
|
||
<el-dialog title="Reference List" :visible.sync="linVisible" width="800px">
|
||
<div class="refenceCentent mt20" v-if="Tempredable.length > 0">
|
||
<el-table :data="Tempredable" ref="tempredableTable"
|
||
empty-text="New messages (0)" :show-header="false" :stripe="false" :highlight-current-row="false">
|
||
<el-table-column type="index" label="No." width="55" align="center"></el-table-column>
|
||
<el-table-column label="Title" align="left">
|
||
<template slot-scope="scope">
|
||
<p style="text-align: left;">
|
||
<!-- <el-badge is-dot :hidden="scope.row.author_act==1?false:true" class="item"> -->
|
||
{{scope.row.content}}<br/><el-link type="primary">{{scope.row.doi}}</el-link>
|
||
<!-- </el-badge> -->
|
||
</p>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="shuoming mt20">
|
||
<p class="c888"><i class="el-icon-message-solid"></i> The above is the citation data identified according to your uploaded file, you can choose to import, or discard this data and import again.</p>
|
||
</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer" >
|
||
<el-button @click="abandon">Abandon and Reimport</el-button>
|
||
<el-button type="primary" @click="importText">Import</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data(){
|
||
return{
|
||
user_name: localStorage.getItem('U_relname'),
|
||
importIoading: false,
|
||
baseUrl: this.Common.baseUrl,
|
||
contentVisible:false,
|
||
// 引用数据列表
|
||
tableData:[
|
||
],
|
||
// 临时引用列表
|
||
Tempredable:[
|
||
],
|
||
editboxVisible:false,
|
||
helpVisible:false,
|
||
uploadVisible:false,
|
||
linVisible:false,
|
||
textarea:'',
|
||
textareaVisible:false,
|
||
fileL_manuscirpt: [],
|
||
form: {
|
||
referFile: '',
|
||
},
|
||
// 引用表单
|
||
refenceForm:{
|
||
refer_content:'',
|
||
refer_doi:''
|
||
},
|
||
refenceFormrules:{
|
||
title:[
|
||
{ required: true, message: 'The title cannot be empty', trigger: 'blur' },
|
||
]
|
||
}
|
||
}
|
||
},
|
||
created(){
|
||
this.getRefData()
|
||
},
|
||
methods:{
|
||
// 获取引用文献信息
|
||
getRefData(){
|
||
this.$api
|
||
.post('api/Preaccept/getArticleReferences',{'article_id': this.$route.query.id})
|
||
.then(res => {
|
||
console.log(res)
|
||
if(res.code == 0 && res.data.refers.length > 0){
|
||
this.tableData = res.data.refers
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
});
|
||
},
|
||
// 放弃导入数据
|
||
abandon(){
|
||
this.form.referFile = '';
|
||
this.fileL_manuscirpt = [];
|
||
this.linVisible = false;
|
||
this.Tempredable = []
|
||
},
|
||
// 显示帮助信息
|
||
showHelp(){
|
||
this.helpVisible = true
|
||
},
|
||
// 导入文本域
|
||
importText(){
|
||
this.importIoading = true
|
||
//console.log(this.form.referFile,'referFile')
|
||
this.$api
|
||
.post('api/Preaccept/addRefersByExcel', {
|
||
'article_id' :this.$route.query.id,
|
||
'referFile' : this.form.referFile
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('Import succeeded')
|
||
this.linVisible = false
|
||
this.Tempredable = []
|
||
this.importIoading = false
|
||
// 有可以可用的文献数据，刷新当前页面
|
||
// location.reload() // 刷新本页面
|
||
this.getRefData()
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
});
|
||
|
||
},
|
||
// 文本域添加
|
||
addText(){
|
||
this.textareaVisible = true
|
||
this.uploadVisible = false
|
||
},
|
||
showUpload(){
|
||
this.textareaVisible = false
|
||
this.uploadVisible = true
|
||
},
|
||
// 显示修改引用
|
||
change(row){
|
||
this.editboxVisible = true
|
||
this.refenceForm = row
|
||
},
|
||
// 保存修改
|
||
saveChange(){
|
||
|
||
},
|
||
beforeupload_manuscirpt(file) {
|
||
let flieArr = file.name.split(".")
|
||
let fileSuffix = flieArr[flieArr.length - 1];
|
||
console.log(fileSuffix)
|
||
console.log(this.upload_manuscirpt,'upload_manuscirpt')
|
||
// return false
|
||
if (fileSuffix != 'xlsx') {
|
||
this.$message.error('Only excel and compressed files can be uploaded(.xlsx)');
|
||
return false;
|
||
}
|
||
// 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;
|
||
},
|
||
uperr_coverLetter(err) {
|
||
this.$message.error('Upload error');
|
||
},
|
||
upSuccess_manuscirpt(res, file) {
|
||
if (res.code == 0) {
|
||
this.form.referFile = res.upurl;
|
||
this.fileL_manuscirpt = [{}];
|
||
this.fileL_manuscirpt[0].name = "referFile";
|
||
this.fileL_manuscirpt[0].url = res.upurl;
|
||
if(res.refers.length > 0){
|
||
this.Tempredable = res.refers
|
||
this.linVisible = true
|
||
}
|
||
} else {
|
||
this.$message.error('service error: ' + res.msg);
|
||
}
|
||
},
|
||
//超出传送文件个数限制
|
||
alertlimit() {
|
||
this.$message.error('The maximum number of uploaded files has been exceeded');
|
||
},
|
||
removefilemanuscirpt(file, fileList) {
|
||
this.form.referFile = '';
|
||
this.fileL_manuscirpt = [];
|
||
this.$message.success('Deletion succeeded!');
|
||
// this.$api
|
||
// .post('api/Article/delArticleFile', {
|
||
// file_id: this.form.manuscirptId
|
||
// })
|
||
// .then((res) => {
|
||
// if (res.code == 0) {
|
||
// this.$message.success('Deletion succeeded!');
|
||
// } else {
|
||
// this.$message.error(res.msg);
|
||
// }
|
||
// });
|
||
},
|
||
clearUploadedFile() {
|
||
this.$refs['uploadFile'].clearFiles();
|
||
},
|
||
// 清空引用文献
|
||
removeAll(){
|
||
this.$api
|
||
.post('api/Preaccept/discardRefers', {
|
||
'article_id': this.$route.query.id
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('success！')
|
||
setTimeout(()=>{
|
||
location.reload() // 刷新本页面
|
||
},2000)
|
||
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
// 添加一行
|
||
addLine(row){
|
||
this.editboxVisible = true
|
||
this.refenceForm = {}
|
||
},
|
||
|
||
// 删除一行
|
||
deleteLine(row){
|
||
this.$confirm('Are you sure you want to remove this reference?', 'Tips', {
|
||
confirmButtonText: 'Sure',
|
||
cancelButtonText: 'Cancel',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: 'remove successed!'
|
||
});
|
||
})
|
||
},
|
||
|
||
// 调整顺序
|
||
changeOrder(row, opName){
|
||
let optitle = ''
|
||
opName == 'up' ? optitle = 'Move up this line?' : optitle = 'Move down this line?'
|
||
this.$confirm(optitle, 'Tips', {
|
||
confirmButtonText: 'Sure',
|
||
cancelButtonText: 'Cancel',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: 'remove successed!'
|
||
});
|
||
})
|
||
}
|
||
},
|
||
computed: {
|
||
upload_manuscirpt: function() {
|
||
// return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
|
||
return this.baseUrl + 'api/Preaccept/up_refer_file';
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.wrongLine{ color: #f15f44;}
|
||
.doiLink{color: #409EFF;}
|
||
.editForm{background-color:#f9f9f9; padding: 20px 0; padding-right: 20px;}
|
||
.yinyongPre{line-height: 28px; margin-bottom: 20px;}
|
||
.shuoming{font-size: 14px; line-height: 26px; }
|
||
.shuoming i{color: #F5BF6D;}
|
||
.status{ display: block; width: 40px; height: 40px; border-radius: 40px; font-size: 22px; line-height: 40px; color: #fff; text-align: center;}
|
||
.status.ok{background: #a7e389;}
|
||
.status.warn{background: #ffd192;}
|
||
.status.float{display: inline-block;}
|
||
.topInfo{padding: 20px; }
|
||
.topInfo ul{padding-left: 30px;}
|
||
.topInfo ul li{margin-top: 10px;}
|
||
.downloadbtn{font-weight: bold; color: #409EFF !important;}
|
||
.uploadBox{width: 400px;}
|
||
.el-upload__text{width: 80px; height: 80px; text-align: center; line-height: 80px;}
|
||
.help{font-size: 18px; color: #F5BF6D; cursor: pointer;}
|
||
.el-alert__title{font-size: 26px;}
|
||
.mt20{margin-top: 20px;}
|
||
.content_box{padding:15px 10px; border:3px dashed #eff6ff; }
|
||
.flexbox{display: flex;}
|
||
p{color: #333; font-size: 14px;}
|
||
.mt10{margin-top: 10px;}
|
||
.more{font-weight: bold;}
|
||
.noneData{ margin:30px 0; padding: 20px; border:3px dashed #F8F8F8; }
|
||
.noneData img{display: block; margin: 10px auto; opacity: .5; width: 100px;}
|
||
.nodatatext{color: #666; text-align: center;}
|
||
.inlinebutton{}
|
||
.whoDo{background: #EEF7F9; padding: 30px;}
|
||
|
||
.whoDo ul{padding-left: 20px;}
|
||
.helpcontent{color: #888; margin-top: 150px;}
|
||
.helpcontent p{color: inherit; font-size: 12px;}
|
||
.c666{color: #666;}
|
||
.c888{color: #888;}
|
||
|
||
/deep/ .el-table tr:nth-child(2n){
|
||
background: #fff;
|
||
}
|
||
</style> |