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

12

Browse Source
This commit is contained in:
wangjinlei
2020-11-06 16:55:29 +08:00
parent 0b21db11dc
commit 3c2f2de6de
80 changed files with 22382 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
src/components/page/articleList.vue Normal file
View File

@@ -0,0 +1,229 @@
<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" size="medium" @change="getdate" placeholder="Please select journal">
<el-option :key="0" label="All journals" :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" size="medium" @change="getdate" placeholder="Please select status">
<el-option :key="0" label="All status" :value="0"></el-option>
<el-option :key="1" :label="$t('artstate.state1')" :value="1"></el-option>
<el-option :key="2" :label="$t('artstate.state2')" :value="2"></el-option>
<el-option :key="3" :label="$t('artstate.state3')" :value="3"></el-option>
<el-option :key="4" :label="$t('artstate.state4')" :value="4"></el-option>
<el-option :key="5" :label="$t('artstate.state5')" :value="5"></el-option>
</el-select>
<el-input v-model="query.name" placeholder="Title" class="handle-input mr10" style="margin-left:10px;"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handleSearch">search</el-button>
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addArticle">add</el-button>
</div>
<el-table
:data="tableData"
border
ref="multipleTable"
>
>
<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 label="Title" align="center">
<template slot-scope="scope">
<el-badge is-dot :hidden="scope.row.editor_act==1?false:true" class="item">
{{scope.row.title}}
</el-badge>
</template>
</el-table-column>
<el-table-column prop="journalname" label="Journal" align="center"></el-table-column>
<el-table-column prop="accept_sn" label="Manuscript ID" align="center"></el-table-column>
<el-table-column
prop="state"
label="Status"
:formatter="stateFormat"
align="center"
width="100"
></el-table-column>
<el-table-column label="" width="180" 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 {
data() {
return {
items: '',
query: {
username: localStorage.getItem('ms_username'),
journal: localStorage.getItem('ms_journal_alias')?parseInt(localStorage.getItem('ms_journal_alias')):0,
name: '',
state:0,
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/Article/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;
default:
str = 'error!!';
}
return str;
},
// 分页导航
handlePageChange(val) {
this.$set(this.query, 'pageIndex', val);
this.getdate();
},
showdetail(row) {
// if(row.state==4){
// this.$router.push({path:'articleRevise',query:{id:row.article_id}});
// }else{
this.$router.push({ path: 'articleDetail', query: { id: row.article_id } });
// }
},
tableRowClassName({ row, rowIndex }) {
if(row.editor_act == 1){
return 'hasChange-row';
}
}
}
};
</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>