zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成右侧按钮基本功能

Browse Source
This commit is contained in:
@fawn-nine
2023-06-13 18:02:20 +08:00
parent fa8a3caf9a
commit fdeaeb57d2
2 changed files with 75 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/page/ReferenceEditor.vue
View File

@@ -68,7 +68,7 @@
<!-- 有引用数据-->
<div v-else>
<div class="topInfo">
<h4>Dear {{user_name}}</h4>
<h3>Dear {{user_name}}</h3>
<p class="mt10">您可以在本页面对引用数据进行对应的修改和调整，主要包括如下操作:</p>
<ul class="mt20">
<li>
@@ -80,12 +80,12 @@
</li>
<li>
<p>如果您觉得顺序有不妥，您可以点击每一条信息后面的
<el-button type="primary" size="mini" plain>↑</el-button>
<el-button type="warning" size="mini" plain>↑</el-button>
和
<el-button type="primary" size="mini" plain>↓</el-button> 调整数据的前后顺序。</p>
<el-button type="warning" size="mini" plain>↓</el-button> 调整数据的前后顺序。</p>
</li>
<li>
<p>您可以点击 <el-button type="primary" size="mini" plain>+</el-button> 在这一行的后面再添加一行引用信息。</p>
<p>您可以点击 <el-button type="success" size="mini" plain>Add</el-button> 在这一行的后面再添加一行引用信息。</p>
</li>
<li>
<p>您也可以全部放弃这些引用信息，重新导入一批引用信息。<el-link type="primary" @click="removeAll">删除并重新导入</el-link></p>
@@ -108,24 +108,24 @@
</el-table-column>
<el-table-column label="Title" align="left">
<template slot-scope="scope">
<p style="text-align: left;" v-if="scope.row.refer_doi == ''">
<p class="wrongLine" style="text-align: left;" v-if="scope.row.refer_doi == ''">
{{scope.row.refer_content}}
</p>
<p style="text-align: left;" v-else>
{{scope.row.refer_doi}}
</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 v-if="scope.row.refer_doi == ''" style="margin-left:10px;" @click="change(scope.row)" plain type="warning" size="mini" icon="el-icon-edit" >edit</el-button>
<el-button v-else style="margin-left:10px;" @click="change(scope.row)" plain type="primary" size="mini" icon="el-icon-edit">change</el-button>
<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 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>
<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>
@@ -134,9 +134,16 @@
</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>
<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">
@@ -191,6 +198,7 @@
user_name: localStorage.getItem('U_relname'),
importIoading: false,
baseUrl: this.Common.baseUrl,
contentVisible:false,
// 引用数据列表
tableData:[
],
@@ -209,7 +217,8 @@
},
// 引用表单
refenceForm:{
title:''
refer_content:'',
refer_doi:''
},
refenceFormrules:{
title:[
@@ -371,6 +380,41 @@
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() {
@@ -382,11 +426,15 @@
</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: #67c23a;}
.status.warn{background: #e6a23c;}
.status.ok{background: #a7e389;}
.status.warn{background: #ffd192;}
.status.float{display: inline-block;}
.topInfo{padding: 20px; }
.topInfo ul{padding-left: 30px;}