Files
tougao_web/src/components/page/ReferenceEditor.vue
2023-06-25 14:19:50 +08:00

682 lines
30 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
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 v-loading.fullscreen.lock="holeLoading">
<div class="container" v-loading="importIoading" element-loading-text="In the process of importing, please wait">
<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 uploading excel files &nbsp;&nbsp;
<!-- <el-button class="inlinebutton" type="primary" plain size="mini" @click="showUpload">Add</el-button> -->
</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.
</p>
<div v-if="uploadVisible">
<div class="uploadBox">
<el-upload ref="uploadFile" class="upload-demo up_newstyle mt10" :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>
<!-- 文本域 -->
<!-- <li>
<div class="mt20">
<h4>Add in bulk by text field &nbsp;&nbsp;&nbsp;<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> -->
</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,'Edit')" 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, 'Add')" 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 v-loading="addLoading" :title= "dialogTitle + ' References'" :visible.sync="editboxVisible" width="500px">
<p class="yinyongPre c888">现在您可以添加或者修改您的引用文献信息如果您有引用文献的Doi数据可以直接复制到Doi输入框并提交系统会自动识别您的引用文献如果您没有Doi数据也可以打开Show Content开关直接填写您的引用文献内容</p>
<p v-if="this.dialogTitle == 'Add'">There is no Doi data: <el-switch v-model="contentVisible"></el-switch></p>
<el-form v-show="!contentVisible" :model="refenceForm" :rules="refenceFormrules" ref="refenceForm" label-width="80px" class="editForm mt10">
<!-- 内容开关 -->
<el-form-item label="Doi:" required prop="refer_doi" >
<el-input v-model="refenceForm.refer_doi" ></el-input>
</el-form-item>
</el-form>
<el-form v-show="contentVisible" :model="refenceLinkForm" :rules="refenceLinkFormrules" ref="refenceLinkForm" label-width="80px" class="editForm mt10">
<!-- 内容开关 -->
<!-- <el-form-item label="There is no Doi data" label-width="160px">
<el-switch v-model="contentVisible"></el-switch>
</el-form-item> -->
<el-form-item label="author:" required prop="author" >
<el-input v-model="refenceLinkForm.author"></el-input>
</el-form-item>
<el-form-item label="title:" required prop="title" >
<el-input v-model="refenceLinkForm.title" ></el-input>
</el-form-item>
<el-form-item label="joura:" required prop="joura" >
<el-input v-model="refenceLinkForm.joura" ></el-input>
</el-form-item>
<el-form-item label="dateno:" required prop="dateno" >
<el-input v-model="refenceLinkForm.dateno" ></el-input>
</el-form-item>
<el-form-item label="link:" required prop="link" >
<el-input v-model="refenceLinkForm.link" ></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelSave">Cancel</el-button>
<el-button type="primary" @click="saveChange" v-if="dialogTitle == 'Edit'">Save</el-button>
<el-button type="primary" @click="saveAdd" v-else>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" max-height="400px"
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>&nbsp;&nbsp;The above is the citation data identified according to your uploaded file, you can choose to import, or discard this data and upload 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'),
holeLoading : false, // 进入页面的loading
importIoading: false,
baseUrl: this.Common.baseUrl,
addLoading:false,
contentVisible:false,
// 引用数据列表
tableData:[
],
// 临时引用列表
Tempredable:[
],
editboxVisible:false,
helpVisible:false,
uploadVisible:true,
linVisible:false,
textarea:'',
textareaVisible:false,
fileL_manuscirpt: [],
form: {
referFile: '',
},
// 引用表单
refenceForm:{
refer_doi:'',
p_refer_id:null, // 当前行一行的引用序号
},
refenceFormrules:{
refer_doi:[
{ required: true, message: 'The Doi cannot be empty', trigger: 'blur' },
]
},
// 引用表单
refenceLinkForm:{
author:'',
title:'',
joura:'',
dateno:'',
link:'',
p_refer_id:null, // 当前行一行的引用序号
},
refenceLinkFormrules:{
author:[
{ required: true, message: 'The author cannot be empty', trigger: 'blur' },
],
title:[
{ required: true, message: 'The title cannot be empty', trigger: 'blur' },
],
dateno:[
{ required: true, message: 'The dateno cannot be empty', trigger: 'blur' },
],
link:[
{ required: true, message: 'The link cannot be empty', trigger: 'blur' },
]
},
dialogTitle:''
}
},
created(){
this.openFullScreen1()
this.getRefData()
this.holeLoading = true
},
methods:{
// 全页面加载动画
openFullScreen1() {
this.holeLoading = true;
},
// 获取引用文献信息
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
}
this.holeLoading = false
})
.catch(err => {
console.log(err);
});
},
// 放弃导入数据
abandon(){
this.form.referFile = '';
this.fileL_manuscirpt = [];
this.linVisible = false;
this.Tempredable = []
},
// 显示帮助信息
showHelp(){
this.helpVisible = true
},
// 导入文本域
importText(){
this.linVisible = false
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, optitle){
this.dialogTitle = optitle
this.editboxVisible = true
if(row.refer_doi){
// 有doi
this.refenceForm.refer_doi = row.refer_doi
this.refenceForm.p_refer_id = row.p_refer_id
}else{
// doi
this.contentVisible = true
}
},
// 取消保存
cancelSave(){
this.editboxVisible = false
// refenceForm
this.$refs['refenceForm'].resetFields();
this.refenceForm.refer_doi = ''
this.dialogTitle = ''
},
// 编辑引用
saveChange(){
if(this.contentVisible){ // 无doi形式
this.editNoneDoi()
}else{
this.editHaveDoi()
}
},
// 编辑无doi
editNoneDoi(){
this.$refs.refenceLinkForm.validate((valid) => {
this.addLoading = true
if(valid){
console.log('没有doi编辑情况')
}
})
},
// 编辑有doi
editHaveDoi(){
this.$refs.refenceForm.validate((valid) => {
this.addLoading = true
if(valid){
this.$api
.post('api/Preaccept/editRefer', {
// 'article_id': this.$route.query.id,
'p_refer_id': this.refenceForm.p_refer_id,
'doi': this.refenceForm.refer_doi
})
.then(res => {
if (res.code == 0) {
this.addLoading = false
this.$message.success('successed')
this.getRefData()
this.cancelSave()
}else if(res.code == 1){
this.addLoading = false
this.$message.error(res.msg)
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
}else{
}
})
},
// 保存新增
saveAdd(){
this.$refs.refenceForm.validate((valid) => {
if(valid){
this.addLoading = true
this.$api
.post('api/Preaccept/addRefer', {
'article_id': this.$route.query.id,
'pre_p_refer_id': this.refenceForm.p_refer_id,
'doi': this.refenceForm.refer_doi
})
.then(res => {
if (res.code == 0) {
this.addLoading = false
this.$message.success('successed')
this.getRefData()
this.cancelSave()
}else if(res.code == 1){
// doi 错误
this.addLoading = false
this.$message.error(res.msg)
// this.getRefData()
// this.cancelSave()
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
}else{
this.$message.error('error submit!!');
return false;
}
})
},
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.$confirm('Are you sure you want to empty the reference?', 'Tips', {
confirmButtonText: 'Sure',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(()=>{
this.$api
.post('api/Preaccept/discardRefers', {
'article_id': this.$route.query.id
})
.then(res => {
if (res.code == 0) {
this.$message.success('success')
location.reload() // 刷新本页面
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
}).catch(()=>{})
},
// 添加一行
addLine(row, optitle){
//console.log(row)
this.dialogTitle = optitle
// this.$refs['refenceForm'].clearValidate()
this.editboxVisible = true
this.refenceForm.p_refer_id = row.p_refer_id
this.$nextTick(()=>{
this.$refs['refenceForm'].clearValidate(['refer_doi']);
})
},
// 删除一行
deleteLine(row){
this.$confirm('Are you sure you want to remove this reference?', 'Tips', {
confirmButtonText: 'Sure',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
this.$api
.post('api/Preaccept/delRefer', {
'p_refer_id': row.p_refer_id
})
.then(res => {
if (res.code == 0) {
this.$message.success('remove successed!')
this.getRefData()
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
}).catch(() => {
// this.$message({
// type: 'info',
// message: '已取消删除'
// });
});
},
// 调整顺序
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.$api
.post('api/Preaccept/sortRefer', {
'p_refer_id': row.p_refer_id,
'act': opName
})
.then(res => {
if (res.code == 0) {
this.$message.success('successed!')
this.getRefData()
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.$message.error(err);
});
// this.$message({
// type: 'success',
// message: 'remove successed!'
// });
}).catch(()=>{});
}
},
computed: {
upload_manuscirpt: function() {
// return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
return this.baseUrl + 'api/Preaccept/up_refer_file';
},
},
watch: {
contentVisible: {
handler(newVal, oldVal) {
this.$nextTick(()=>{
this.$refs['refenceLinkForm'].clearValidate()
this.$refs['refenceForm'].clearValidate()
})
console.log(newVal)
},
// immediate: true,
deep: true // 可以深度检测到 person 对象的属性值的变化
}
}
}
</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>