tougao_web/src/components/page/articleReviewerAdd.vue

<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> Add manuscript reviewer</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" v-loading="loading" element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
		 element-loading-background="rgba(0, 0, 0, 0.8)">
			<el-select v-model="messform.major_id" filterable placeholder="Please select majors" @change="changereviewer()">
				<el-option :key="0" label="All" :value="0"></el-option>
				<el-option v-for="item in majorsList" :key="item.major_id" :label="item.title+' '+item.ctitle" :value="item.major_id"></el-option>
			</el-select>
			<el-input v-model="messform.keywords" clearable placeholder="Please enter keyword" style="width: 220px;display: inline-block;margin: 0 10px 20px 10px;"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="handleSearch">Search</el-button>
			<el-table :data="revTable" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="realname" label="Real Name"></el-table-column>
				<el-table-column prop="account" label="Name"></el-table-column>
				<el-table-column prop="cmajor" label="" width="180"></el-table-column>
				<el-table-column prop="field" label="Field"></el-table-column>
				<el-table-column prop="company" label="Company"></el-table-column>
				<el-table-column prop="rs_num" label="Reviewed Times" width="140"></el-table-column>
				<!-- <el-table-column prop="rd_num" label="Fail number" width="140"></el-table-column> -->
				<el-table-column label="" width="200" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="success" plain icon="el-icon-tickets" @click="openDetail(scope.row)">Detail</el-button>
						<el-button size="mini" type="primary" plain icon="el-icon-check" @click="openSelect(scope.row)">Select</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="messform.pageIndex" :page-size="messform.pageSize"
				 :total="Total" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
		<el-dialog title="Reviewer information" :visible.sync="mesOpenVisble" width="800px" v-loading="loading"
		 element-loading-text="Loading..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<el-form v-model="mesOpen" label-width="100px">
				<el-form-item label="User">
					<span>{{ mesOpen.account }}</span>
				</el-form-item>
				<el-form-item label="Name">
					<span>{{ mesOpen.realname }}</span>
				</el-form-item>
				<el-form-item label="Country">
					<span>{{ mesOpen.country }}</span>
				</el-form-item>
				<el-form-item label="Company">
					<span>{{ mesOpen.company }}</span>
				</el-form-item>
				<el-form-item label="Major">
					<span>{{ mesOpen.major_title }}</span>
				</el-form-item>
				<el-form-item label="Field">
					<span>{{ mesOpen.field }}</span>
				</el-form-item>
				<el-form-item label="Introduction">
					<span>{{ mesOpen.introduction }}</span>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="mesOpenVisble = false">canel</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				messform: {
					article_id: this.$route.query.id,
					major_id: 0,
					keywords: '',
					pageIndex: 1,
					pageSize: 15
				},
				majorsList: [],
				revTable: [],
				mesOpen: [],
				mesOpenVisble: false,
				loading: false,
				Total: 0

			};
		},
		created() {
			this.getdate();
			this.getmajors();
		},
		computed: {

		},
		methods: {
			// 获取领域列表
			getmajors() {
				this.$api
					.post('api/Reviewer/getAllReviewerMajor', {
						article_id: this.$route.query.id,
					})
					.then((res) => {
						this.majorsList = res.data.majors;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			// 获取编辑列表数据
			getdate() {
				this.$api
					.post('api/Reviewer/searchReviewer', this.messform)
					.then((res) => {
						this.revTable = res.data.reviewers;
						this.Total = res.data.count;
						this.loading = false;
					})
					.catch((err) => {
						console.log(err);
					});
			},

			// 下拉搜索
			changereviewer() {
				this.loading = true;
				this.getdate();
			},

			// 关键字搜索
			handleSearch() {
				this.loading = true;
				this.getdate();
			},

			// 审稿人详情
			openDetail(row) {
				this.mesOpenVisble = true;
				this.$api
					.post('api/Article/getReviewerdetail', {
						uid: row.user_id
					})
					.then((res) => {
						this.mesOpen = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			// 保存添加操作
			openSelect(row) {		
				this.loading = true;
				this.$api
					.post('api/Article/addArticleReviewer', {
						uid: row.user_id,
						articleId: this.$route.query.id
					})
					.then((res) => {
						this.loading = false;
						if (res.code == 0) {
							this.$message.success('add success');
							this.getdate();
							this.$router.push({
								path: 'articleReviewer',
								query: {
									id: this.$route.query.id
								}
							});
						} else {
							this.$message.error('add error');
						}
					})
					.catch((err) => {
						this.loading = false;
						console.log(err);
					});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.messform, 'pageIndex', val);
				this.getdate();
			},

		}
	};
</script>

<style scoped>
	.table {
		width: 100%;
		font-size: 14px;
	}
</style>