tougao_web/src/components/page/reviewerApplyList.vue

<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-user"></i> Reviewer Apply list
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.journal_id" @change="getDate" placeholder="Please select journal"
					style="width: 300px;">
					<el-option :key="0" label="All journals" :value="0"></el-option>
					<el-option v-for="item in journalList" :key="item.journal_id" :label="item.title"
						:value="item.journal_id"></el-option>
				</el-select>
			</div>
			<el-table :data="tableData" border stripe class="table" ref="multipleTable"
				header-cell-class-name="table-header">
				<el-table-column label="No." align="center" width="50">
					<template slot-scope="scop">
						{{scop.$index+1}}
					</template>
				</el-table-column>
				<el-table-column prop="account" label="Account" align="center"></el-table-column>
				<el-table-column prop="realname" label="Realname" align="center"></el-table-column>
				<el-table-column prop="email" label="Email" align="center"></el-table-column>
				<el-table-column prop="journal_title" label="Journal" align="center"></el-table-column>
				<el-table-column label="Time" align="center" width="100">
					<template slot-scope="scope">
						{{formatDate(scope.row.apply_time)}}
					</template>
				</el-table-column>
				<el-table-column label="" width="210" align="center">
					<template slot-scope="scope">
						<div style="margin: 0 0 6px 0;">
							<el-button type="primary" plain icon="el-icon-edit" @click="handleDtail(scope.row)">
								Personal Information
							</el-button>
						</div>
						<div>
							<el-button type="success" plain icon="el-icon-check"
								@click="agreeApply(scope.row.ap_reviewer_id)">
								Agree
							</el-button>
							<el-button type="danger" plain icon="el-icon-close"
								@click="deleteApply(scope.row.ap_reviewer_id)">
								Refuse
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'reviewerApplyList',
		data() {
			return {
				query: {
					editor_id: localStorage.getItem('U_id'),
					journal_id: 0,
				},
				tableData: [],
				journalList: [],
				Total: 0
			};
		},
		created() {
			this.getDate()
			this.initselect();
		},
		methods: {
			//初始化期刊选项
			initselect() {
				this.$api
					.post('api/Chief/getJournalsByEditor', {
						'user_id': this.query.editor_id
					})
					.then(res => {
						if (res.code == 0) {
							this.journalList = res.data.journals;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 获取编辑列表数据
			getDate() {
				this.$api
					.post('api/User/getApplyReviewerList', this.query)
					.then(res => {
						this.tableData = res.data.list;
					})
					.catch(err => {
						console.log(err);
					});
			},

			// 详情
			handleDtail(e) {
				let routerJump = this.$router.resolve({
					path: '/partyRole',
					query: {
						id: e.user_id
					}
				});
				window.open(routerJump.href, '_blank');
			},

			//同意审核人
			agreeApply(e) {
				// 二次确认
				this.$confirm('Are you sure you agree to let the user become the reviewer?', 'Tip', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('api/User/agreeReviewerApply', {
								ap_reviewer_id: e
							})
							.then((res) => {
								this.$message.success('Adopt success!');
								this.getDate()
							})
							.catch((err) => {
								console.log(err);
							});
					})
					.catch(() => {});
			},

			//拒绝审核人
			deleteApply(e) {
				// 二次确认
				this.$confirm('Are you sure you reject to let the user become the reviewer?', 'Tip', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('api/User/refuseReviewerApply', {
								ap_reviewer_id: e
							})
							.then((res) => {
								this.$message.success('Reject success!');
								this.getDate()
							})
							.catch((err) => {
								console.log(err);
							});
					})
					.catch(() => {});
			},

			// 时间
			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();
				return Y + M + D;
			},
			
		}
	};
</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;
	}

	.el-table .warning-row {
		background: #f3ca7f;
	}

	.el-table .success-row {
		background: #bcfc9a;
	}

	.el-table .normol-row {
		background: #d8f1c7;
	}

	.el-table .red-row {
		background: #f05555;
	}
</style>