Files
tougao_web/src/components/page/monitorManuscript.vue
徐哼唧L 5ed3073b6e 0
2022-12-09 16:18:12 +08:00

307 lines
8.2 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-cascades"></i> Manuscript list
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<div class="handle-box">
<el-select v-model="query.journal" @change="getdate" placeholder="Please select journal">
<el-option :key="0" label="All journal" :value="0"></el-option>
<el-option v-for="item in items" :key="item.journal_id" :label="item.title" :value="item.journal_id"></el-option>
</el-select>
<el-select v-model="query.state" @change="getdate" placeholder="Please select status" style="margin-left:5px;">
<el-option :key="-1" label="All status" :value="-1"></el-option>
<el-option :key="0" :label="$t('artstate.state0')" :value="0" :disabled="query.act==2"></el-option>
<el-option :key="1" :label="$t('artstate.state1')" :value="1" :disabled="query.act==2"></el-option>
<el-option :key="2" :label="$t('artstate.state2')" :value="2" :disabled="query.act==2"></el-option>
<el-option :key="3" :label="$t('artstate.state3')" :value="3" :disabled="query.act==1"></el-option>
<el-option :key="4" :label="$t('artstate.state4')" :value="4" :disabled="query.act==2"></el-option>
<el-option :key="5" :label="$t('artstate.state5')" :value="5" :disabled="query.act==1"></el-option>
<el-option :key="6" :label="$t('artstate.state6')" :value="6" :disabled="query.act==2"></el-option>
</el-select>
<el-select v-model="query.act" @change="getdate" placeholder="Please select status" style="margin-left:5px;">
<el-option :key="1" :label="$t('artstate.act1')" :value="1"></el-option>
<el-option :key="2" :label="$t('artstate.act2')" :value="2"></el-option>
</el-select>
</div>
<el-table :data="tableData" border ref="multipleTable" empty-text="New messages (0)">
>
<el-table-column type="index" label="No." width="55" align="center"></el-table-column>
<!-- <el-table-column prop="article_id" label="ID" width="55" align="center"></el-table-column> -->
<el-table-column prop="title" label="Title" align="left"></el-table-column>
<el-table-column prop="abbr" label="Journal" width="80" align="center"></el-table-column>
<el-table-column :formatter="typeFormat" label="Type" width="100" align="center"></el-table-column>
<el-table-column :formatter="repeFormat" prop="repetition" label="Repetition" width="80" align="center"></el-table-column>
<el-table-column prop="realname" label="Editor" width="100" align="center"></el-table-column>
<el-table-column :formatter="dateFormat" prop="ctime" width="100" label="Add date" align="center"></el-table-column>
<el-table-column prop="state" label="Status" :formatter="stateFormat" align="center" width="100"></el-table-column>
<el-table-column prop="country" label="Country" width="120" align="center"></el-table-column>
<el-table-column label="" width="100" align="center">
<template slot-scope="scope">
<el-button size="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.pageIndex" :page-size="query.pageSize"
:total="Total" @current-change="handlePageChange"></el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'monitorManuscript',
data() {
return {
items: '',
query: {
journal: 0,
state: -1,
act: 1,
pageIndex: 1,
pageSize: 10
},
tableData: [],
multipleSelection: [],
delList: [],
editVisible: false,
Total: 0
// form: {},
// idx: -1,
// id: -1
};
},
created() {
this.initselect();
this.getdate();
},
methods: {
//初始化期刊选项
initselect() {
this.$api
.post('api/Article/getJournal')
.then(res => {
this.items = res;
})
.catch(err => {
console.log(err);
});
},
// 获取数据
getdate() {
this.$api
.post('api/Admin/getArticle', this.query)
.then(res => {
console.log(res);
this.Total = res.total;
this.tableData = res.data;
})
.catch(err => {
console.log(err);
});
},
// 触发搜索按钮
handleSearch() {
this.$set(this.query, 'pageIndex', 1);
this.getdate();
},
//跳转到增加稿件页面
addArticle() {
this.$router.push('/articleAdd');
},
//格式化状态输出
stateFormat(row, column) {
let str = '';
switch (row.state) {
case 0:
str = this.$t('artstate.state0');
break;
case 1:
str = this.$t('artstate.state1');;
break;
case 2:
str = this.$t('artstate.state2');;
break;
case 3:
str = this.$t('artstate.state3');;
break;
case 4:
str = this.$t('artstate.state4');;
break;
case 5:
str = this.$t('artstate.state5');;
break;
case 6:
str = this.$t('artstate.state6');;
break;
default:
str = 'error!!';
}
return str;
},
// 分页导航
handlePageChange(val) {
this.$set(this.query, 'pageIndex', val);
this.getdate();
},
showdetail(row) {
this.$router.push({
path: 'monitorManuscriptDetail',
query: {
id: row.article_id
}
});
},
tableRowClassName({
row,
rowIndex
}) {
if (row.editor_act == 1) {
return 'hasChange-row';
}
},
dateFormat(row, column, cellValue, index) {
return this.formatDate(cellValue);
},
nameformate(row, column, cellValue, index) {
return row.username + '(' + row.realname + ')';
},
repeFormat(row, column, cellValue, index) {
return cellValue + '%';
},
typeFormat(row, column, cellValue, index) {
let frag = '';
switch (row.type) {
case "A":
frag = 'ARTICLE';
break;
case 'B':
frag = 'REVIEW';
break;
case 'C':
frag = 'CASE REPORT';
break;
case 'P':
frag = 'RESEARCH PROPOSAL';
break;
case 'N':
frag = 'NEWS';
break;
case 'T':
frag = 'COMMENT';
break;
case 'CT':
frag = 'CORRECTION';
break;
case 'HT':
frag = 'HYPOTHESIS';
break;
case 'PF':
frag = 'PREFACE';
break;
case 'ET':
frag = 'EDITORIAL';
break;
case 'RP':
frag = 'REPORT';
break;
case 'LR':
frag = 'LETTER';
break;
case 'EF':
frag = 'EMPIRICAL FORMULA';
break;
case 'EM':
frag = 'EVIDENCE-BASED MEDICINE';
break;
case 'EC':
frag = 'EXPERT CONSENSUS';
break;
case 'LTE':
frag = 'LETTER TO EDITOR';
break;
case 'QI':
frag = 'QUESTIONNAIRE INVESTIGATION';
break;
case 'PT':
frag = 'PROTOCOL';
break;
case 'CS':
frag = 'CASE SERIES';
break;
case 'RT':
frag = 'RETRACTION';
break;
case 'MR':
frag = 'MINI REVIEW';
break;
default:
frag = 'OTHERS';
}
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;
// return Y + M + D + ' ' + h + ':' + m + ':' + s;
},
}
};
</script>
<style scoped>
.handle-box {
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;
}
.item {
margin-top: 5px;
}
</style>
<style>
.el-table .hasChange-row {
background-color: #ffebe8;
}
</style>