tougao_web/src/components/page/RejectedArticles.vue

<template>
	<div>
		<div class="container">
			<el-table :data="tableData" border stripe class="table" ref="multipleTable" v-loading="loading"
			header-cell-class-name="table-header" empty-text="New messages (0)">
			<el-table-column type="index" label="No." width="55" align="center"></el-table-column>
			<el-table-column width="180" label="Manuscript ID" align="center">
				<template slot-scope="scope">
					<p style="margin-bottom: 5px;">
						<span
							style="background-color: #006699;width: 20px;color: #fff;margin: 0 2px 0 0;font-weight: bold;padding: 2px 4px;"
							v-if="scope.row.special_num>0">S</span>
						{{scope.row.accept_sn}}
					</p>					
					<!-- <el-button @click="huaGuest(scope.row)" size="mini" type="primary" plain style="margin-top: 10px;">
						Put into special issue</el-button> -->
				</template>
			</el-table-column>
			<el-table-column prop="title" label="Title" align="center">
				<template slot-scope="scope">
					<p style="text-align: left;">
						<el-badge is-dot :hidden="scope.row.author_act==1?false:true" class="item">
							{{scope.row.title}}
						</el-badge>
					</p>
				</template>
			</el-table-column>
			<el-table-column label="scoring" align="center" prop="scoring" width="90">
				
			</el-table-column>					
			<el-table-column label="author" align="center" width="300">		
				<template slot-scope="scope">
					<b>{{scope.row.user.realname}}</b><br/>
					{{scope.row.user.email}}<br/>
					{{scope.row.user.phone}}
				</template>
			</el-table-column>			
			<el-table-column label="Remarks" align="center">
				<template slot-scope="scope">
					<p style="margin-bottom: 5px;text-align: left;">{{scope.row.remarks}}</p>
					<el-button @click="testedit(scope.row)" size="mini" type="primary" plain icon="el-icon-edit">Change
					</el-button>                    
				</template>
			</el-table-column>
			<el-table-column label="" align="center">
				<template slot-scope="scope">					
                    <el-button size="mini" type="primary" plain icon="el-icon-tickets"
						@click="showdetaileditor(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>
        <!-- 标记弹窗 -->
        <el-dialog title="Remarks" :visible.sync="editbox" width="550px">
			<el-form ref="remark" :model="remark" label-width="85px">
				<el-form-item label="Title :">
					<p style="line-height: 20px;margin-top: 6px;">{{remark.title}}</p>
				</el-form-item>
				<el-form-item label="Content :">
					<el-input type="textarea" rows="5" v-model="remark.content"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editbox = false">Cancel</el-button>
				<el-button type="primary" @click="saveRemark">Save</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>	
     // 引入公共文章type
    import  journal_type1  from '../common/TypeList.vue'
	export default {
		name: 'RejectedArticles',
		data() {
			return {
				Total: 0,
                query: {
					//username: localStorage.getItem('U_name'),					
					pageIndex: 1,
					pageSize: 50
				},
                tableData: [],
                editbox:false,
                remark: {
					articleId: this.$route.query.id,
					content: ''
				},  
                journal_type:[],
                ss:'',
				loading:false
			};
		},
		components: {
			
		},
		created() {
			this.getData();
			if (localStorage.getItem('U_point') != null) {
				this.activeIndex = localStorage.getItem('U_point')
				localStorage.removeItem('U_point')
			}
		},
		activated() {
			this.getData();
		},
		methods: {
			// 获取数据
			getData() {
				// 被拒稿件列表
				this.loading = true
				this.$api
					.post('api/Article/getRejectArticles', this.query)
					.then(res => {
						if (res.data.count > 0) {
							this.loading = false
							this.tableData = res.data.articles
                            this.Total = res.data.count
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
            // 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			},
            // 稿件信息展示
			showdetaileditor(row) {
				let stat_num = 'articleDetailEditor'
				this.$router.push({
					path: stat_num,
					query: {
						id: row.article_id,
						mark:'rejectArticles'
					}
				});
			},
            // 标记弹出框
			testedit(e) {
				this.editbox = true;
				this.remark.title = e.title;
				this.remark.articleId = e.article_id;
				this.remark.content = e.remarks;
			},
            // 修改标记
			saveRemark() {
				this.$api.post('api/Article/editArticleRemark', this.remark)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('success');
							this.editbox = false;
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					});
			},
						
		},
        mounted(){
             this.journal_type = journal_type1.journal_type
            // console.log(this.journal_type, this.journal_type1)
        }
	};
</script>

<style scoped>
	.tab_all {
		border-bottom: 1px solid #ddd;
	}

	.tab_Normal {
		font-size: 15px;
		border: 1px solid #fff;
		border-top: 3px solid #fff;
		border-bottom: none;
		float: left;
		margin: 10px 0 -1px 0;
		padding: 20px 30px;
		cursor: pointer;
		background-color: #fafafa;
	}

	.tab_Normal:hover {
		text-decoration: underline;

	}

	.tab_Select {
		background-color: #fff;
		border: 1px solid #ddd;
		border-top: 3px solid #6dafcf;
		border-bottom: 1px solid #fff;
	}

	.tab_Select:hover {}
</style>