tougao_web/src/components/page/man_history.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 historical manuscripts</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_l">
			<!-- 期刊下拉菜单 -->
			<el-select v-model="TaBle2.journal_id" filterable placeholder="Please select a journal" @change="handlejournal"
			 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>
			<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-row :gutter="20">
				<el-col :span="24">
					<el-card class="box-card">
						<el-table :data="tableData2" border class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
							<el-table-column prop="title" label="Title"></el-table-column>
							<el-table-column prop="journal_title" label="Journal name"></el-table-column>
							<el-table-column prop="type" label="Type" width="120"></el-table-column>
							<el-table-column label="Major" width="200">
								<template slot-scope="scope" v-if="scope.row.major!=null && scope.row.major!='Others'">
									{{scope.row.major}} > {{scope.row.cmajor}}
								</template>
							</el-table-column>
							<el-table-column prop="ctime" label="Submitted time" width="140"></el-table-column>
							<el-table-column prop="abstrart" label="Abstract">
								<template slot-scope="scope">
									{{scope.row.abstrart | ellipsis}}
								</template>
							</el-table-column>
							<el-table-column label=" " width="100" align="center">
								<template slot-scope="scope">
									<router-link :to="{path:'/man_text_ls',query:{Art_id:scope.row.article_id}}">
										<el-button type="primary" plain>Detail</el-button>
									</router-link>
								</template>
							</el-table-column>
						</el-table>

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


				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Direct_log: this.$route.query.act,
				head_line: "",
				tableData2: [],
				TaBle2: {
					user_id: localStorage.getItem('U_id'),
					pageIndex: 1,
					pageSize: 10
				},
				link_Tota2: 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.TaBle2)
					.then(res => {
						if (res.code == 0) {
							this.cate_jour = res.data.journals
							this.head_line = this.cate_jour[0].title;
							this.TaBle2.journal_id = this.cate_jour[0].journal_id;
							this.getData();

						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			getData() {
				this.$api
					.post('api/Chief/getHArticlesForChief', this.TaBle2)
					.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.tableData2 = res.data.articles;
							this.link_Tota2 = res.data.count || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

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

			// 期刊下拉菜单点击
			handlejournal(params) {
				// this.head_line = params;
				this.TaBle2.journal_id = params;
				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>