tougao_web/src/components/page/adminImportReviewer.vue

<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-user-solid"></i> Import reviewer
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<el-form ref="import" :model="upform" label-width="120px">
				<el-form-item label="journal">
					<el-select v-model="upform.journal" 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-form-item>
				<el-form-item label="file">
					<el-upload :action="up_url" name="importExcel" :on-remove="handleRemove" accept=".xls, .xlsx"
						:before-upload="checkfile" :limit="1" :on-exceed="handleExceed" :on-success="upSuccess"
						:on-error="uperror">
						<el-button size="small" type="primary">upload</el-button>
						<div slot="tip" class="el-upload__tip">Only excel files can be uploaded(.xls,.xlsx)</div>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onsubmit">import</el-button>
				</el-form-item>
			</el-form>
			<el-divider></el-divider>
			<el-table :data="tabledata" border>
				<el-table-column prop="username" label="username" 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="gender" label="gender" align="center"></el-table-column>
				<el-table-column prop="technical" label="technical" align="center"></el-table-column>
				<el-table-column prop="country" label="country" align="center"></el-table-column>
				<el-table-column prop="major" label="major" align="center"></el-table-column>
				<el-table-column prop="field" label="field" align="center"></el-table-column>
				<el-table-column prop="company" label="company" align="center"></el-table-column>
			</el-table>
		</div>

		<!-- 提示弹出框 -->
		<el-dialog :visible.sync="warnVisible" width="800px" :close-on-click-modal="false"
			:close-on-press-escape="false" :show-close="false">
			<div class="warnTxt">
				<h3>Tip</h3>
				<p>The page is no longer available. To apply as a reviewer, please login to the author's personal center
					and
					submit an application.</p>
				<p>We apologize for any inconvenience this may have caused and thank you for your understanding.</p>
				<p>
					Author's Personal Center Website:
					<img src="../../assets/img/icon_9.png" alt="">
					<a href="https://submission.tmrjournals.com/dashboard">Personal Center</a>
				</p>
				<img src="../../assets/img/app_reviw.png" alt="">
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				warnVisible: true,
				baseUrl: this.Common.baseUrl,
				upform: {
					journal: '',
					url: ''
				},
				items: [],
				tabledata: []
			};
		},
		created() {
			this.initselect();
		},
		computed: {
			up_url: function() {
				return this.baseUrl + 'api/Admin/up_import';
			}
		},
		methods: {
			onsubmit() {
				return
				if (this.upform.journal == '') {
					this.$message.error('please select journal');
					return false;
				}
				this.$api.post('api/Admin/reviewerImport', this.upform)
					.then(res => {
						console.log(res);
					});
			},
			//初始化期刊选项
			initselect() {
				this.$api
					.post('api/Article/getJournal')
					.then((res) => {
						this.items = res;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			//移除文件
			handleRemove() {},
			//审查文件
			checkfile(file) {
				let isslx =
					file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
					file.type === 'application/vnd.ms-excel';
				if (!isslx) {
					this.$message.error('Only excel files can be uploaded(.xls,.xlsx)');
				}
				return isslx;
			},
			uperror(err) {
				this.$message.error(err);
			},
			handleExceed() {
				this.$message.error('limit one file');
			},
			//文件上传成功后的操作
			upSuccess(res, file) {
				if (res.code == 0) {
					this.upform.url = 'reviewer/import/' + res.upurl;
					this.gettables();
				} else {
					this.$message.error('service error' + res.msg);
				}
			},
			//获取table数据
			gettables() {
				this.$api.post('api/Admin/getExcelData', this.upform)
					.then(res => {
						this.tabledata = res;
					});
			}
		}
	};
</script>

<style scoped>
	.warnTxt {
		font-size: 16px;
	}

	.warnTxt h3 {
		text-align: center;
		font-size: 20px;
		margin-bottom: 40px;
	}

	.warnTxt p {
		line-height: 26px;
		margin: 0 40px 10px 40px;
		word-wrap: break-word;
		word-break: normal;
	}

	.warnTxt p a {
		color: #006699;
		cursor: pointer;
		font-weight: bold;
	}

	.warnTxt p a:hover {
		text-decoration: underline;
	}

	.warnTxt p img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
		margin-left: 5px;
		vertical-align: middle;
		color: #006699;
	}

	.warnTxt>img {
		display: block;
		margin: 20px auto 20px auto;
	}
</style>