339 lines
16 KiB
Vue
339 lines
16 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="flexbox 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,
|
||
<el-link @click="" class="downloadbtn" type="primary" >click download</el-link>
|
||
,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=".xls, .xlsx" name="manuscirpt" :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 v-show="fileL_manuscirpt.length <= 0" class="el-upload__text" @click="clearUploadedFile">
|
||
<em>Upload</em>
|
||
</div>
|
||
</el-upload>
|
||
</div>
|
||
<el-button v-if="fileL_manuscirpt.length > 0" class="mt10" icon="el-icon-check" type="primary" size="mini">Import</el-button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<!-- 辅助信息 -->
|
||
<!-- <el-col >
|
||
<div class="flexbox helpcontent mt20">
|
||
<span class="el-icon-info"></span>
|
||
<div>
|
||
<h4>Any questions/Help</h4>
|
||
<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>
|
||
</div>
|
||
</el-col> -->
|
||
</el-row>
|
||
</div>
|
||
<!-- 有引用数据-->
|
||
<div v-else>
|
||
<div class="topInfo">
|
||
<h4>Dear {{user_name}}</h4>
|
||
<p class="mt10">您可以在本页面对引用数据进行对应的修改和调整，主要包括如下操作:</p>
|
||
<ul class="mt20">
|
||
<li>
|
||
<p>需要您调整一下引用条目，将
|
||
<el-button class="status" icon="el-icon-warning-outline" type="warning" plain circle></el-button>
|
||
状态的引用信息调整到
|
||
<el-button class="status" icon="el-icon-circle-check" type="success" plain circle></el-button>
|
||
的状态。</p>
|
||
</li>
|
||
<li>
|
||
<p>如果您觉得顺序有不妥，您可以点击每一条信息后面的
|
||
<el-button type="primary" size="mini" plain>↑</el-button>
|
||
和
|
||
<el-button type="primary" size="mini" plain>↓</el-button> 调整数据的前后顺序。</p>
|
||
</li>
|
||
<li>
|
||
<p>您可以点击 <el-button type="primary" size="mini" plain>+</el-button> 在这一行的后面再添加一行引用信息。</p>
|
||
</li>
|
||
<li>
|
||
<p>您也可以全部放弃这些引用信息，重新导入一批引用信息。<el-link type="primary">删除并重新导入</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="status" prop="status" width="55" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button class="status" icon="el-icon-circle-check" v-if="scope.row.status == 1" type="success" plain circle></el-button>
|
||
<el-button class="status" icon="el-icon-warning-outline" v-if="scope.row.status == 0" type="warning" plain circle></el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="title" 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.title}}
|
||
<!-- </el-badge> -->
|
||
</p>
|
||
</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">change</el-button>
|
||
<el-tooltip popper-class="tps" class="item" effect="light" content="Add one under this line" placement="top">
|
||
<el-button type="primary" size="mini" plain>+</el-button>
|
||
</el-tooltip>
|
||
<el-button type="primary" size="mini" plain>↑</el-button>
|
||
<el-button type="primary" size="mini" plain>↓</el-button>
|
||
<el-button type="danger" icon="el-icon-delete" size="mini" style="float: right;" plain>delete</el-button>
|
||
</div>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 修改引用 -->
|
||
<el-dialog title="Add References" :visible.sync="editboxVisible" width="500px">
|
||
<el-form :model="refenceForm" :rules="refenceFormrules" ref="refenceForm" label-width="60px" class="demo-ruleForm">
|
||
<el-form-item label="title" prop="title">
|
||
<el-input rows="8" v-model="refenceForm.title" 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>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data(){
|
||
return{
|
||
user_name: localStorage.getItem('U_relname'),
|
||
importIoading: false,
|
||
baseUrl: this.Common.baseUrl,
|
||
// 引用数据列表
|
||
tableData:[
|
||
{ id:'01',
|
||
status:0,
|
||
title: `Zhang Y, Ren L, Min S, Lv F, Yu J. Effects of N-Methyl-D-aspartate receptor (NMDAR) and Ca2+/calmodulin-dependent protein kinase IIα (CaMKIIα) on learning and memory impairment in depressed rats with different charge by modified electroconvulsive shock. Ann Transl Med 2021;9(16):1320–1320. Availa`},
|
||
{ id:'02',
|
||
status:1,
|
||
title: `Zhang Y, Ren L, Min S, Lv F, Yu J. Effects of N-Methyl-D-aspartate receptor (NMDAR) and Ca2+/calmodulin-dependent protein kinase IIα (CaMKIIα) on learning and memory impairment in depressed rats with different charge by modified electroconvulsive shock. Ann Transl Med 2021;9(16):1320–1320. Availa`},
|
||
{ id:'01',
|
||
status:0,
|
||
title: `Zhang Y, Ren L, Min S, Lv F, Yu J. Effects of N-Methyl-D-aspartate receptor (NMDAR) and Ca2+/calmodulin-dependent protein kinase IIα (CaMKIIα) on learning and memory impairment in depressed rats with different charge by modified electroconvulsive shock. Ann Transl Med 2021;9(16):1320–1320. Availa`},
|
||
{ id:'02',
|
||
status:0,
|
||
title: `Zhang Y, Ren L, Min S, Lv F, Yu J. Effects of N-Methyl-D-aspartate receptor (NMDAR) and Ca2+/calmodulin-dependent protein kinase IIα (CaMKIIα) on learning and memory impairment in depressed rats with different charge by modified electroconvulsive shock. Ann Transl Med 2021;9(16):1320–1320. Availa`
|
||
}
|
||
|
||
],
|
||
editboxVisible:false,
|
||
helpVisible:false,
|
||
uploadVisible:false,
|
||
textarea:'',
|
||
textareaVisible:false,
|
||
fileL_manuscirpt: [],
|
||
form: {
|
||
manuscirpt: '',
|
||
},
|
||
// 引用表单
|
||
refenceForm:{
|
||
title:''
|
||
},
|
||
refenceFormrules:{
|
||
title:[
|
||
{ required: true, message: 'The title cannot be empty', trigger: 'blur' },
|
||
]
|
||
}
|
||
}
|
||
},
|
||
methods:{
|
||
// 显示帮助信息
|
||
showHelp(){
|
||
this.helpVisible = true
|
||
},
|
||
// 导入文本域
|
||
importText(){
|
||
this.importIoading = true
|
||
setTimeout(()=>{
|
||
this.importIoading = false
|
||
this.$message.success('Import successful!')
|
||
},3000)
|
||
},
|
||
// 文本域添加
|
||
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];
|
||
if (fileSuffix != 'docx') {
|
||
this.$message.error('Only excel and compressed files can be uploaded(.xls, .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.manuscirpt = 'manuscirpt/' + res.upurl;
|
||
this.fileL_manuscirpt = [{}];
|
||
this.fileL_manuscirpt[0].name = "Manuscirpt File";
|
||
this.fileL_manuscirpt[0].url = 'manuscirpt/' + res.upurl;
|
||
// this.onStaging(5)
|
||
} 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.manuscirpt = '';
|
||
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();
|
||
},
|
||
},
|
||
computed: {
|
||
upload_manuscirpt: function() {
|
||
return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
.status{border: none;}
|
||
.topInfo{padding: 20px; }
|
||
.topInfo ul{padding-left: 30px;}
|
||
.topInfo ul li{margin-top: 10px;}
|
||
.downloadbtn{font-weight: bold;}
|
||
.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;}
|
||
|
||
/deep/ .el-table tr:nth-child(2n){
|
||
background: #fff;
|
||
}
|
||
</style> |