tougao_web/src/components/page/man_article.vue

<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-document-copy"></i> <span class="top_dao"> Editor-in-Chief manuscripts list</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_l">
			<!-- 期刊下拉菜单 -->
			<el-select v-model="query.journal_id" filterable placeholder="Please select a journal" @change="getData"
				style="width: 300px;">
				<el-option v-for="item in cate_jour" :key="item.journal_id" :label="item.title"
					:value="item.journal_id"></el-option>
			</el-select>
			<el-select v-model="query.type" @change="getData()" placeholder="Please select status"
				style="width: 120px;margin-left: 10px;">
				<el-option :key="1" label="Dealing" :value="1"></el-option>
				<el-option :key="2" label="Finished" :value="2"></el-option>
			</el-select>
			<p style="float: right;color: #fb8c19;font-size: 14px;margin: 8px 20px 0 0;">From Aug. 2021-New manuscript
				system updated</p>
			<br><br>

			<el-card class="box-card">
				<el-table :data="tableData" border class="table" ref="multipleTable"
					header-cell-class-name="table-header" empty-text="New messages (0)">
					<el-table-column label="Manuscript ID" width="170" align="center">
						<template slot-scope="scope">
							<p style="margin-bottom: 5px;">{{scope.row.accept_sn}}</p>
							<router-link :to="{path:'/man_text_ls',query:{Art_id:scope.row.article_id}}">
								<el-button type="primary" icon="el-icon-tickets" plain>Detail</el-button>
							</router-link>
						</template>
					</el-table-column>
					<el-table-column prop="title" label="Title"></el-table-column>
					<el-table-column prop="type" label="Type" width="120"></el-table-column>
					<el-table-column prop="major_str" label="Major" width="200"></el-table-column>
					<el-table-column prop="ctime" label="Submitted time" width="140" align="center"></el-table-column>
					<el-table-column prop="abstrart" label="Abstract">
						<template slot-scope="scope">
							{{scope.row.abstrart | ellipsis}}
						</template>
					</el-table-column>
				</el-table>

				<div class="pagination">
					<el-pagination layout="total, prev, pager, next" :current-page="query.pageIndex"
						:page-size="query.pageSize" :total="link_Tota" @current-change="handlePageChange2">
					</el-pagination>
				</div>
			</el-card>



		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Direct_log: this.$route.query.act,
				head_line: "",
				tableData: [],
				query: {
					user_id: localStorage.getItem('U_id'),
					type: 2,
					pageIndex: 1,
					pageSize: 10
				},
				link_Tota: 0,
				cate_jour: [],
			};
		},
		mounted() {

		},
		created() {
			if (this.Direct_log == null) {
				this.getTable();
			} else {
				this.$api
					.post('api/Chief/autoLoginForChief ', {
						'code': this.Direct_log
					})
					.then(res => {
						if (res.code == 0) {
							localStorage.setItem('U_role', res.data.roles);
							localStorage.setItem('U_name', res.data.user.account);
							localStorage.setItem('U_id', res.data.user.user_id);
							localStorage.setItem('U_relname', res.data.user.realname);
							this.getTable();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			}
		},
		methods: {
			// 获取期刊数据
			getTable() {
				this.$api
					.post('api/Chief/getJournalsFromChief', this.query)
					.then(res => {
						if (res.code == 0) {
							this.cate_jour = res.data.journals
							this.query.journal_id = this.cate_jour[0].journal_id;
							this.getData();

						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 获取列表数据
			getData() {
				let link_ty = ''
				if (this.query.type == 1) {
					link_ty = 'api/Chief/getPArticlesForChief'
				} else {
					link_ty = 'api/Chief/getHArticlesForChief'
				}
				this.$api
					.post(link_ty, this.query)
					.then(res => {
						if (res.code == 0) {
							if (res.data.articles != '') {
								for (let i = 0; i < res.data.articles.length; i++) {
									let date = new Date(parseInt(res.data.articles[i].ctime) * 1000);
									let Y = date.getFullYear() + '-';
									let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date
										.getMonth() + 1 + '-';
									let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
									res.data.articles[i].ctime = Y + M + D;
								}
							}
							this.tableData = res.data.articles;
							this.link_Tota = res.data.count || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 下拉
			getSelData(e) {
				if (e == 1) {

				} else {

				}
			},

			// 分页导航
			handlePageChange2(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			},

		},
		filters: {
			ellipsis(value) {
				if (!value) return "";
				if (value.length > 200) {
					value = value.slice(0, 200);
					return value.slice(0, value.lastIndexOf(" ")) + "...";
				}
				return value;
			}
		},
		watch: {

		}
	};
</script>

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