524 lines
15 KiB
Vue
524 lines
15 KiB
Vue
<template>
|
||
<div>
|
||
<div class="crumbs">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item>
|
||
<i class="el-icon-document-copy"></i>
|
||
<router-link :to="{path:'/managing'}">
|
||
<span class="top_dao"> Editor-in-Chief Article</span>
|
||
</router-link>
|
||
>> Editor-in-Chief Article Detail
|
||
</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
<div class="container_l">
|
||
<el-row :gutter="20" style="display: flex;">
|
||
<el-col :span="16">
|
||
<el-card class="box-card">
|
||
<div class="tet_list" :model="txt_mess">
|
||
<h4>{{txt_mess.title}}</h4>
|
||
<h5>{{this.head_line}}<span style="margin: 0 10px;">>></span> Manuscript ID: {{txt_mess.accept_sn}}</h5>
|
||
<p style="margin: 8px 0 5px 0;"><b>Author : </b>{{txt_mess.author}}</p>
|
||
<p><b>Type :</b> {{txt_mess.type}}</p>
|
||
<p><b>Submitted time :</b> {{txt_mess.ctime}}</p>
|
||
<p style="margin-bottom: 10px;"><b>Abstract :</b> <br>{{txt_mess.abstrart}}</p>
|
||
|
||
<div class="file_sty" v-for="item in fileList">
|
||
<img src="../../assets/img/icon_0.png" alt="" class="icon_img">
|
||
<a :href='mediaUrl+item.file_url' target="_blank" class="txt_pdf">Manuscript
|
||
<span style="margin-left: 50px;color: #888;font-size: 13px;">{{item.ctime}}</span>
|
||
<i class="el-icon-download" style="margin-left: 20px;color: #66b1ff;font-weight: bold;"></i>
|
||
</a><br>
|
||
</div>
|
||
|
||
<p style="margin-top: 10px;color: #999;font-size: 14px;">
|
||
<b style="color: #e41411;">Download failed？</b>
|
||
<br>If you have upgraded the Google Chrome browser to version 86, released on October 6, 2020, you may have
|
||
noticed that some file downloads don't work anymore in the browser. You click on the download link and nothing
|
||
happens.
|
||
<br>1. Right now, the easiest option available is to
|
||
<b style="color: #e41411;">right-click on the download link and select "save link as".</b>
|
||
The download is executed when you do that.
|
||
<br>2. Please try to use a different browser for downloads. For now, a browser like Firefox, Internet Explorer,
|
||
Brave, Vivaldi, the new Edge, or Opera all allow the download.
|
||
</p>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card class="box-card">
|
||
<div class="tet_people">
|
||
<h4>I want to invite the following editorial board members to get more opinions for the manuscript.
|
||
<el-button type="primary" @click="add_Editer" plain style="margin:5px 0 5px 20px;">+ Add</el-button>
|
||
</h4>
|
||
<ul v-for="(item,index) in Editard_list">
|
||
<li style="list-style: none;font-size: 15px;">
|
||
<span><span style="margin-right: 6px;">{{index+1}}.</span>{{item.account}} (<font v-if="item.realname!=''">{{item.realname}}
|
||
, </font>{{item.email}}) </span>
|
||
<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(item)"></el-button>
|
||
</li>
|
||
</ul>
|
||
<p style="color: #6f6f6f;font-size: 14px; margin: 20px 0px 0px 10px;" v-if="Editard_list==''">No editorial board
|
||
members</p>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<div>
|
||
<h2 style="margin: 30px 0 15px 5px;font-size: 16px;">Add my comment (The comment will be showed to : editor,
|
||
editorial board members, young sciencists member.)</h2>
|
||
<div class="chatIcon">
|
||
<el-popover placement="top-start" width="400" trigger="click" class="emoBox">
|
||
<div class="emotionList">
|
||
<a href="javascript:void(0);" @click="getEmo(index)" v-for="(item,index) in faceList" :key="index" class="emotionItem">{{item}}</a>
|
||
</div>
|
||
<!-- <el-button class="emotionSelect" slot="reference" style="padding: 7px 10px;border: 0;margin: 3px 5px;position: absolute;z-index: 500;background: 0;">
|
||
<svg t="1629607720277" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||
p-id="3396" width="20" height="20">
|
||
<path d="M512 1024c282.752 0 512-229.248 512-512S794.752 0 512 0 0 229.248 0 512s229.248 512 512 512z m0-85.333333C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667z"
|
||
fill="#FFBB20" p-id="3397"></path>
|
||
<path d="M512 512m-85.333333 0a85.333333 85.333333 0 1 0 170.666666 0 85.333333 85.333333 0 1 0-170.666666 0Z"
|
||
fill="#FFFFFF" p-id="3398"></path>
|
||
<path d="M320 405.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="3399"></path>
|
||
<path d="M704 405.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="3400"></path>
|
||
<path d="M234.666667 576c42.666667 170.666667 135.125333 256 277.333333 256s234.666667-85.333333 277.333333-256h-554.666666z"
|
||
fill="#E01313" p-id="3401"></path>
|
||
</svg>
|
||
</el-button> -->
|
||
</el-popover>
|
||
</div>
|
||
<el-input v-model="add_edit.content" class="chatText ping_lun" type="textarea" id='textarea' rows="5" placeholder="Please enter the content..."
|
||
@keyup.enter.native="sendInfo"></el-input>
|
||
|
||
<div style="text-align: right;">
|
||
<el-button type="primary" @click="hdSubmit" class="sub_mit">Save</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 style="margin: 0 0 15px 5px;font-size: 16px;">All comments</h2>
|
||
<el-card class="box-card" v-if="this.commentData!=''">
|
||
<comment :comments="commentData"></comment>
|
||
</el-card>
|
||
<p v-if="this.commentData==''" style="color:#6f6f6f;font-size: 14px;margin: 20px 0 0 10px;">No comment</p>
|
||
</div>
|
||
|
||
|
||
<!-- 添加编委弹出框 -->
|
||
<el-dialog title="Add Editorial board member" :visible.sync="addVisible" width="50%" :close-on-click-modal="false">
|
||
<el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
|
||
<el-table-column prop="account" label="account" align="center"></el-table-column>
|
||
<el-table-column prop="major_title" label="major title" align="center"></el-table-column>
|
||
<el-table-column prop="realname" label="realname" align="center"></el-table-column>
|
||
<el-table-column prop="phone" label="phone" align="center" width="150px"></el-table-column>
|
||
<el-table-column prop="email" label="email" align="center"></el-table-column>
|
||
<el-table-column label="" width="100" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" @click="handleChoose(scope.$index, scope.row)">+ Choice</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="pagination">
|
||
<el-pagination background layout="total, prev, pager, next" :current-page="qEdit.pageIndex" :page-size="qEdit.pageSize"
|
||
:total="Total" @current-change="handlePageChange"></el-pagination>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import comment from './comment'
|
||
// import appData from '../../assets/js/emoji.json'
|
||
const appData = require("../../assets/js/emoji.json");
|
||
|
||
export default {
|
||
components: {
|
||
comment
|
||
},
|
||
mounted() {
|
||
for (let i in appData) {
|
||
this.faceList.push(appData[i].char);
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
mediaUrl: this.Common.mediaUrl,
|
||
textarea: '',
|
||
commentData: [],
|
||
txt_mess: {},
|
||
txt_peop: {},
|
||
add_edit: {
|
||
article_id: this.$route.query.Art_id,
|
||
user_id: localStorage.getItem('U_id'),
|
||
content: ''
|
||
},
|
||
select_edit: {
|
||
board_id: '',
|
||
article_id: this.$route.query.Art_id,
|
||
},
|
||
head_line: '',
|
||
Art_id: this.$route.query.Art_id,
|
||
tableData: [],
|
||
fileList: [],
|
||
faceList: [],
|
||
addVisible: false,
|
||
qEdit: {
|
||
journal_id: localStorage.getItem('journal_id'),
|
||
pageIndex: 1,
|
||
pageSize: 10
|
||
},
|
||
Total: 0,
|
||
Editard_list: [],
|
||
// Edit_Chi: [],
|
||
rules: {}
|
||
}
|
||
},
|
||
created() {
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
getData() {
|
||
// 获取文章信息
|
||
this.$api
|
||
.post('api/Chief/getArticleDetail ', {
|
||
'article_id': this.Art_id
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
|
||
let mes_date = new Date(parseInt(res.data.article.ctime) * 1000);
|
||
let Y = mes_date.getFullYear() + '-';
|
||
let M = mes_date.getMonth() + 1 < 10 ? '0' + (mes_date.getMonth() + 1) + '-' : mes_date.getMonth() + 1 + '-';
|
||
let D = mes_date.getDate() < 10 ? '0' + mes_date.getDate() : mes_date.getDate();
|
||
res.data.article.ctime = Y + M + D;
|
||
|
||
this.txt_mess = res.data.article;
|
||
|
||
if (res.data.article.file != "") {
|
||
this.head_line = res.data.article.journal.title;
|
||
let file_down = res.data.article.file;
|
||
for (var i = 0; i < file_down.length; i++) {
|
||
let date = new Date(parseInt(file_down[i].ctime) * 1000);
|
||
let Y = date.getFullYear() + '-';
|
||
let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
|
||
let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
||
file_down[i].ctime = Y + M + D;
|
||
}
|
||
this.fileList = file_down
|
||
|
||
|
||
// 获取文章编委池子
|
||
this.$api
|
||
.post('api/Chief/getAllArticleBoards', this.qEdit)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.tableData = res.data.boards;
|
||
this.Total = res.data.count || 0;
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
});
|
||
}
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
|
||
// 获取文章的编委列表
|
||
this.$api
|
||
.post('api/Chief/getArticleBoard', {
|
||
'article_id': this.Art_id
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.Editard_list = res.data.boards;
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
|
||
|
||
// 获取评论内容
|
||
this.$api
|
||
.post('api/Chief/getAllChiefMsg', {
|
||
'article_id': this.Art_id
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
for (var i = 0; i < res.data.msgs.length; i++) {
|
||
let date = new Date(parseInt(res.data.msgs[i].ctime) * 1000);
|
||
let Y = date.getFullYear() + '-';
|
||
let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
|
||
let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
||
let h = date.getHours() < 10 ? ('0' + date.getHours()) + ':' : date.getHours() + ':';
|
||
let n = date.getMinutes() < 10 ? ('0' + date.getMinutes()) + ':' : date.getMinutes() + ':';
|
||
let s = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds();
|
||
|
||
res.data.msgs[i].ctime = Y + M + D + ' ' + h + n + s;
|
||
}
|
||
this.commentData = res.data.msgs;
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
|
||
},
|
||
|
||
// 添加编委-弹出框
|
||
add_Editer() {
|
||
this.addVisible = true;
|
||
},
|
||
|
||
|
||
// 保存添加编委
|
||
handleChoose(index, row) {
|
||
this.select_edit.board_id = row.user_id;
|
||
this.$api
|
||
.post('api/Chief/addArticleBoard', this.select_edit)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('Editorial board of newly added articles succeeded!');
|
||
this.addVisible = false;
|
||
this.getData();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
|
||
// 分页导航
|
||
handlePageChange(val) {
|
||
this.$set(this.qEdit, 'pageIndex', val);
|
||
this.getData();
|
||
},
|
||
|
||
|
||
// 删除编委
|
||
handleDelete(item) {
|
||
// 二次确认删除
|
||
this.$confirm('Are you sure you want to delete the editorial board of this article？', 'Delete', {
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
this.$api
|
||
.post('api/Chief/delArticleBoard', item)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('删除成功');
|
||
this.getData();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
|
||
// 获取表情包
|
||
getEmo(index) {
|
||
var textArea = document.getElementById('textarea');
|
||
|
||
function changeSelectedText(obj, str) {
|
||
if (window.getSelection) {
|
||
// 非IE浏览器
|
||
textArea.setRangeText(str);
|
||
// 在未选中文本的情况下，重新设置光标位置
|
||
textArea.selectionStart += str.length;
|
||
textArea.focus()
|
||
} else if (document.selection) {
|
||
// IE浏览器
|
||
obj.focus();
|
||
var sel = document.selection.createRange();
|
||
sel.text = str;
|
||
}
|
||
}
|
||
changeSelectedText(textArea, this.faceList[index]);
|
||
this.textarea = textArea.value; // 要同步data中的数据
|
||
// console.log(this.faceList[index]);
|
||
return;
|
||
},
|
||
|
||
// 添加评论
|
||
hdSubmit() {
|
||
// console.log(this.add_edit)
|
||
if (this.add_edit.content == '') {
|
||
this.$message.error('Add message cannot be empty!');
|
||
} else {
|
||
this.$api
|
||
.post('api/Chief/addMsgForArticle', this.add_edit)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('Successfully added message!');
|
||
this.add_edit.content = ''
|
||
this.getData();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
}
|
||
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.ma_title {
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.icon_img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.tet_list {
|
||
font-size: 20px;
|
||
}
|
||
|
||
|
||
.upload-txtc .el-upload-list__item .el-icon-upload-success {
|
||
display: none !important;
|
||
}
|
||
|
||
.top_dao:hover {
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tet_list h5 {
|
||
font-size: 15px;
|
||
margin: 20px 0 5px 0;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.tet_list p {
|
||
font-family: Calibri;
|
||
line-height: 22px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.tet_people {}
|
||
|
||
.tet_people .el-input {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.file_sty {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.file_sty a {
|
||
color: #606266;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.file_sty a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.ping_lun {}
|
||
|
||
.ping_lun textarea {
|
||
/* padding-top: 50px; */
|
||
-webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||
border: 0;
|
||
}
|
||
|
||
.ping_lun textarea:focus {
|
||
/* height: 140px; */
|
||
-webkit-box-shadow: 0 0 6px 0 #5094d5;
|
||
box-shadow: 0 0 6px 0 #5094d5;
|
||
border: 1px solid #5094d5;
|
||
}
|
||
|
||
.sub_mit {
|
||
margin: 15px 0 0 0;
|
||
width: 100px;
|
||
}
|
||
|
||
.red {
|
||
color: #ff0000;
|
||
}
|
||
|
||
/* 表情包 */
|
||
.el-popover {
|
||
height: 200px;
|
||
width: 400px;
|
||
overflow: scroll;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.chatIcon {
|
||
/* padding: 0 10px; */
|
||
font-size: 25px;
|
||
}
|
||
|
||
.emotionList {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 5px;
|
||
}
|
||
|
||
.emotionItem {
|
||
width: 10%;
|
||
font-size: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
/*包含以下四种的链接*/
|
||
.emotionItem {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/*正常的未被访问过的链接*/
|
||
.emotionItem:link {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/*已经访问过的链接*/
|
||
.emotionItem:visited {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/*鼠标划过(停留)的链接*/
|
||
.emotionItem:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* 正在点击的链接*/
|
||
.emotionItem:active {
|
||
text-decoration: none;
|
||
}
|
||
</style>
|