Files
tougao_web/src/components/page/articleEditorialBoard.vue
2025-11-17 17:00:14 +08:00

756 lines
27 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>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> Manuscript Final Decision list </el-breadcrumb-item>
<el-breadcrumb-item>
<div>
<span>ID:{{ articleBaseInfo.accept_sn }} </span>
</div>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<div class="handle-box" v-if="articleBaseInfo.state == 8">
<div>
<el-button type="primary" icon="el-icon-plus" @click="openSuggRev">Editorial Board Bank</el-button>
</div>
<!-- <el-button type="primary" icon="el-icon-circle-plus-outline" @click="editVisible1 = true">Supplement</el-button> -->
</div>
<el-table
:data="tableData"
stripe
size="mini"
class="table"
ref="multipleTable"
header-cell-class-name="table-header"
empty-text="New messages (0)"
>
<el-table-column type="index" label="No." align="center" width="50"></el-table-column>
<el-table-column label="Base Information" width="320px">
<template slot-scope="scope">
<p class="tab_tie_col">
<span>Name: </span>
<b style="font-size: 15px; letter-spacing: -0.5px">{{ scope.row.account }}</b>
</p>
<p class="tab_tie_col">
<span>Realname: </span>
{{ scope.row.realname }}
</p>
<p class="tab_tie_col"><span>Email: </span>{{ scope.row.email }}</p>
<p class="tab_tie_col">
<span>Identity: </span>
<span v-if="scope.row.reviewer_type == 0" style="color: #409eff">Editor-in-Chief</span>
<span v-if="scope.row.reviewer_type == 1" style="color: #409eff">Vice Editor-in-Chief</span>
<span v-if="scope.row.reviewer_type == 2" style="color: #409eff">Editorial Board Member</span>
</p>
</template>
</el-table-column>
<!-- <el-table-column label="Other Information">
<template slot-scope="scope">
<p class="tab_tie_col">
<span>Field: </span>
{{ scope.row.field }}
</p>
<p class="tab_tie_col" v-if="scope.row.company">
<span>Company: </span>
{{ scope.row.company }}
</p>
</template>
</el-table-column> -->
<!-- <el-table-column prop="art_rev_id" label="ID" align="center" width="60"></el-table-column> -->
<!-- <el-table-column label="Reviewer" align="center" width="130">
<template slot-scope="scope">
<el-badge is-dot :hidden="scope.row.reviewer_act == 1 ? false : true" class="item">
{{ scope.row.reviewer }}
</el-badge>
</template>
</el-table-column> -->
<!-- <el-table-column prop="country" label="Country" align="center" width="100"></el-table-column> -->
<!-- <el-table-column prop="email" label="Email" align="center"></el-table-column> -->
<!-- <el-table-column prop="company" label="Company" align="center"></el-table-column> -->
<!-- <el-table-column prop="major_str" label="Major"></el-table-column> -->
<el-table-column label="Research areas">
<template slot-scope="scope">
<commonMajorTableList
:user_id="scope.row.reviewer_id"
:baseInfo="scope.row"
:key="scope.row.reviewer_id"
:disabled="true"
></commonMajorTableList>
</template>
</el-table-column>
<!-- <el-table-column prop="field" label="Field"></el-table-column> -->
<el-table-column label="State" align="center" width="180">
<template slot-scope="scope">
<span style="font-size: 16px" v-html="revstate(scope.row)"></span>
<font
v-if="scope.row.update_time"
style="color: #aaa; display: block; line-height: 18px; font-size: 13px"
v-html="formatDate(scope.row.update_time)"
>
</font>
</template>
</el-table-column>
<el-table-column label="" width="100" align="center">
<template slot-scope="scope">
<el-button
v-show="scope.row.state == 1 || scope.row.state == 2 || scope.row.state == 3"
ize="mini"
type="primary"
plain
icon="el-icon-tickets"
@click="showdetail(scope.row)"
>Detail</el-button
>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="total, prev, pager, next"
:current-page="query.page"
:page-size="query.size"
:total="Total"
@current-change="handlePageChange"
></el-pagination>
</div>
</div>
<el-dialog
:close-on-click-modal="false"
title="Add Editorial Board Members"
:visible.sync="AddSuggest"
width="1200px"
custom-class="editorialBoardDialog"
>
<el-select
v-model="editorialBoardForm.board_type"
placeholder=""
@change="selectEditorialBoardType"
style="margin-bottom: 20px; width: 200px"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
<el-input clearable v-model="editorialBoardForm.email" style="width: 300px; margin-left: 20px" placeholder="Email "></el-input>
<el-button type="primary" style="margin-left: 40px" size="mini" @click="search">Search</el-button>
<el-button type="primary" plain style="margin-left: 10px" size="mini" @click="reset">Reset</el-button>
<el-table
:data="tableSuggest"
stripe
class="table"
ref="multipleTable"
header-cell-class-name="table-header"
empty-text="New messages (0)"
>
<el-table-column type="index" label="No." align="center" width="50"></el-table-column>
<el-table-column prop="User Message" label="Realname" width="340">
<template slot-scope="scope">
<p style="font-size: 14px; font-weight: bold; margin-top: 2px">{{ scope.row.realname }}</p>
<p style="margin: 2px 0 0px 0">
<span style="color: #999">Email :</span>
{{ scope.row.email }}
</p>
<p style="margin: 0 0 5px 0" v-if="scope.row.title != ''">
<span style="color: #999">Identity : </span>
<span v-if="scope.row.type == 0" style="color: #409eff">Editor-in-Chief</span>
<span v-if="scope.row.type == 1" style="color: #409eff">Vice Editor-in-Chief</span>
<span v-if="scope.row.type == 2" style="color: #409eff">Editorial Board Members</span>
</p>
</template>
</el-table-column>
<el-table-column prop="research_areas" label="Research Areas">
<template slot-scope="scope">
<commonMajorTableList
:user_id="scope.row.user_id"
:baseInfo="scope.row"
:key="scope.row.user_id"
:disabled="true"
></commonMajorTableList>
</template>
</el-table-column>
<el-table-column label="" width="120" align="center">
<template slot-scope="scope">
<el-button v-if="scope.row.is_invite == 2 " size="mini" type="primary" plain icon="el-icon-check" @click="selSuggest(scope.row)"> Select</el-button>
<el-button disabled v-if="scope.row.is_invite == 1 " size="mini" type="info" plain > Invited</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="total, prev, pager, next"
:current-page="editorialBoardForm.page"
:page-size="editorialBoardForm.size"
:total="editorialBoardTotal"
@current-change="handleEditorialBoardPageChange"
></el-pagination>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="AddSuggest = false">Cancel</el-button>
</span>
</el-dialog>
<el-dialog
title="add reviewer"
:close-on-click-modal="false"
:closeOnClickModal="false"
:visible.sync="editVisible"
width="80%"
v-loading="loading"
element-loading-text="Loading..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<el-form ref="editform" :model="editform" label-width="100px">
<el-form-item label="state">
<el-select v-model="editform.uid" filterable @change="changereviewer()" placeholder="Please select">
<el-option :key="0" label="please select" :value="0"></el-option>
<el-option v-for="item in reviewerList" :key="item.user_id" :label="item.account" :value="item.user_id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Country" v-if="editform.uid != 0">
<span>{{ reviewer_data.country }}</span>
</el-form-item>
<el-form-item label="Company" v-if="editform.uid != 0">
<span>{{ reviewer_data.company }}</span>
</el-form-item>
<el-form-item label="Major" v-if="editform.uid != 0">
<span>{{ reviewer_data.major_title }}</span>
</el-form-item>
<el-form-item label="Field" v-if="editform.uid != 0">
<span>{{ reviewer_data.field }}</span>
</el-form-item>
<el-form-item label="Introduction" v-if="editform.uid != 0">
<span>{{ reviewer_data.introduction }}</span>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="editVisible = false">canel</el-button>
<el-button type="primary" @click="saveEdit">save</el-button>
</span>
</el-dialog>
<articleEditorDetail :dateId="FinalDetailBaseInfo.id" ref="commonFinalDetail"></articleEditorDetail>
</div>
</template>
<script>
import { Loading } from 'element-ui';
import articleEditorDetail from './articleEditorDetail.vue';
import commonMajorTableList from '../page/components/major/tableList.vue';
export default {
components: {
commonMajorTableList,
articleEditorDetail
},
data() {
return {
FinalDetailBaseInfo: {},
options: [
{
value: 0,
label: 'Editor-in-Chief'
},
{
value: 1,
label: 'Vice Editor-in-Chief'
},
{
value: 2,
label: 'Editorial Board Members'
}
],
editorialBoardForm: {
page: 1,
size: 10,
board_type: 0
},
majorData: [],
baseUrl: this.Common.baseUrl,
articleBaseInfo: {},
questionform: {
uid: 0,
articleId: this.$route.query.id,
qu1: '',
qu2: '',
qu3: '',
qu4: '',
qu5: '',
qu6: '',
qu7: '',
qu8: '',
qu9: '',
qu9contents: '',
qu10: '',
qu10contents: '',
qu11: '',
qu11contents: '',
qu12: '',
qu12contents: '',
qu13: '',
qu13contents: '',
qu14: '',
qu14contents: '',
qu15: '',
qu15contents: '',
rated: '',
recommend: '',
other: '',
confident: '',
comment: ''
},
txt_mess: {},
query: {
articleId: this.$route.query.id,
article_id: this.$route.query.id
// page: 1,
// size: 10
},
page: 1,
size: 10,
editform: {
uid: 0,
articleId: this.$route.query.id
},
reviewer_data: {
introduction: '',
country: '',
company: '',
major_title: '',
field: ''
},
reviewer_data1: {
introduction: '',
country: '',
company: '',
major_title: '',
field: ''
},
editVisible: false,
editVisible1: false,
AddSuggest: false,
tableData: [],
reviewerList: [],
tableSuggest: [],
loading: false,
Total: 0,
editorialBoardTotal: 0
};
},
created() {
this.initArticle();
this.getdate();
this.initreviewerList();
},
computed: {
upload_url: function () {
return this.baseUrl + 'api/Reviewer/up_file';
}
},
methods: {
selectEditorialBoardType(type) {
console.log('type at line 525:', type);
this.editorialBoardForm.board_type = type;
this.editorialBoardForm.page = 1;
this.$forceUpdate();
this.getEditorialBoardType();
},
search() {
this.editorialBoardForm.page = 1;
this.getEditorialBoardType();
},
reset() {
this.editorialBoardForm.page = 1;
this.editorialBoardForm.email = '';
this.getEditorialBoardType();
},
initArticle() {
this.$api
.post('api/Article/getArticleDetail', {
articleId: this.query.article_id,
human: 'editor'
})
.then((res) => {
this.articleBaseInfo = res.article;
});
},
// 获取编辑列表数据
getdate() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
zIndex: 9999 // 设置一个足够高的层级
});
this.$api
.post('api/Finalreview/inviteBoardLists', {
article_id: this.$route.query.id,
page: this.page,
size: this.size
})
.then((res) => {
loading.close();
console.log('res at line 562:', res);
this.Total = res.data.total;
this.tableData = res.data.lists;
})
.catch((err) => {
loading.close();
console.log(err);
});
},
// 分页导航
handlePageChange(val) {
this.$set(this.query, 'page', val);
this.getdate();
},
handleEditorialBoardPageChange(val) {
this.$set(this.editorialBoardForm, 'page', val);
this.getEditorialBoardType();
},
addReviewer() {
alert('sssss');
},
// 添加跳页面
openAddRev() {
// this.$router.push({
// path: 'articleReviewerAdd',
// query: {
// id: this.$route.query.id
// }
// });
},
//初始化审查员列表
initreviewerList() {
this.$api
.post('api/Article/getArticleReviewerList', {
articleId: this.query.articleId
})
.then((res) => {
this.reviewerList = res.data;
})
.catch((err) => {
console.log(err);
});
},
//保存添加操作
saveEdit() {
if (this.editform.uid == 0) {
this.$message.error('please select a reviewer');
} else {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
zIndex: 9999 // 设置一个足够高的层级
});
this.$api
.post('api/Article/addArticleReviewer', this.editform)
.then((res) => {
loading.close();
if (res.code == 0) {
this.$message.success('add success');
this.$router.go(0);
} else {
this.$message.error('add error');
}
})
.catch((err) => {
loading.close();
console.log(err);
});
}
},
addArtRev() {
if (this.questionform.uid == 0) {
this.$message.error('Please select a reviewer');
} else if (this.questionform.is_anonymous == '' && this.questionform.is_anonymous != '0') {
this.$message.error('Please choose disclose your name or remain anonymous.');
} else {
this.loading = true;
this.$api
.post('api/Article/addArtRev', this.questionform)
.then((res) => {
this.loading = false;
if (res.code == 0) {
this.$message.success('add success');
this.$router.go(0);
} else {
this.$message.error('add error');
}
})
.catch((err) => {
console.log(err);
});
}
},
getEditorialBoardType() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
zIndex: 9999 // 设置一个足够高的层级
});
this.$api
.post('api/Finalreview/boardLists', {
...this.editorialBoardForm,
article_id: this.query.article_id
})
.then((res) => {
loading.close();
this.tableSuggest = res.data.lists;
this.editorialBoardTotal = res.data.total;
this.AddSuggest = true;
})
.catch((err) => {
loading.close();
console.log(err);
});
},
// 添加推荐审稿人
async openSuggRev() {
this. editorialBoardForm= {
page: 1,
size: 10,
board_type: 0
}
await this.getEditorialBoardType();
},
selSuggest(e) {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
zIndex: 9999 // 设置一个足够高的层级
});
this.$api
.post('api/Finalreview/invite', {
reviewer_id: e.user_id,
article_id: this.$route.query.id
})
.then((res) => {
loading.close();
if (res.status == 1) {
this.$message.success('Add Success');
this.AddSuggest = false;
this.getdate();
} else {
this.$message.error('Add Error:' + res.msg);
}
})
.catch((err) => {
loading.close();
console.log(err);
});
},
showdetail(row) {
console.log('row at line 577:', row)
this.FinalDetailBaseInfo={...row}
this.$nextTick(() => {
this.$refs.commonFinalDetail.init();
this.$api
.post('api/Workbench/updateArticleState', {
article_id: this.$route.query.id,
act_id: row.id,
type: '3',
account: localStorage.getItem('U_name')
})
});
},
changereviewer() {
if (this.editform.uid !== 0) {
this.$api
.post('api/Article/getReviewerdetail', {
uid: this.editform.uid
})
.then((res) => {
this.reviewer_data.introduction = res.data.introduction;
this.reviewer_data.country = res.data.country;
this.reviewer_data.company = res.data.company;
this.reviewer_data.major_title = res.data.major_title;
this.reviewer_data.field = res.data.field;
})
.catch((err) => {
console.log(err);
});
}
},
changereviewer1() {
if (this.questionform.uid !== 0) {
this.$api
.post('api/Article/getReviewerdetail', {
uid: this.questionform.uid
})
.then((res) => {
this.reviewer_data1.introduction = res.data.introduction;
this.reviewer_data1.country = res.data.country;
this.reviewer_data1.company = res.data.company;
this.reviewer_data1.major_title = res.data.major_title;
this.reviewer_data1.field = res.data.field;
})
.catch((err) => {
console.log(err);
});
}
},
revstate(row, column, cellValue, index) {
let frag = '';
if (row.state == 0) {
frag = '<text style="color:#67c23a">Agree to review</text>';
} else if (row.state == 1) {
// 大修
frag = '<text style="color:#67c23a">Accept</text>';
// frag = 'Revision';
} else if (row.state == 3) {
frag = '<text style="color:#0077b8">Revision</text>';
} else if (row.state == 2) {
//小修
// frag = 'Accept';
frag = '<text style="color:#f56c6c">Reject</text>';
} else if (row.state == 4) {
frag = '<text style="color:#888">invalid</text>';
} else if (row.state == 5) {
frag = 'invitation';
}
return frag;
},
// 时间
formatDate(timestamp) {
var date = new Date(timestamp * 1000); //时间戳为10位需*1000时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
return Y + M + D + '<br/>' + h + ':' + m + ':' + s;
}
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
.reviewerListBox {
color: rgba(0, 119, 184, 1);
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.reviewerListBox .labelTitle {
color: rgba(0, 119, 184, 1);
}
.handle-box {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.handle-select {
width: 120px;
}
.handle-input {
width: 300px;
display: inline-block;
}
.table {
width: 100%;
font-size: 14px;
}
.red {
color: #ff0000;
}
.mr10 {
margin-right: 10px;
}
.table-td-thumb {
display: block;
margin: auto;
width: 40px;
height: 40px;
}
.el-table .warning-row {
background: #f3ca7f;
}
.el-table .success-row {
background: #bcfc9a;
}
.el-table .normol-row {
background: #d8f1c7;
}
.el-table .red-row {
background: #f05555;
}
.tab_tie_col {
/* margin-bottom: 5px; */
color: #333;
word-wrap: break-word;
word-break: normal;
}
.tab_tie_col > span {
color: #888;
margin: 0 5px 0 0;
font-size: 13px;
}
::v-deep .editorialBoardDialog .el-dialog__body {
padding-top: 10px !important;
padding-bottom: 0px !important;
}
::v-deep .editorialBoardDialog .el-dialog__body .el-table--mini .el-table__cell {
padding: 0px !important;
}
</style>