tougao_web/src/components/page/journallist.vue

<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-user"></i> Journal list
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addJournal">add</el-button>
			</div>
			<el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="journal_id" label="ID" align="center"></el-table-column>

				<el-table-column prop="title" label="Title" align="center"></el-table-column>
				<el-table-column prop="issn" label="Issn" align="center"></el-table-column>
				<el-table-column prop="alias" label="Alias" align="center"></el-table-column>
				<el-table-column prop="editor" label="Editor" align="center"></el-table-column>
				<el-table-column label="" width="200" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" plain icon="el-icon-tickets" @click="showdetail(scope.row)">detail</el-button>
						<el-button size="mini" type="warning" plain icon="el-icon-tickets" @click="handleChange(scope.row)">change</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize"
				 :total="Total" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
		<el-dialog title="change" :visible.sync="editVisible" width="40%">
			<el-form ref="changform" :model="change" label-width="80px">
				<el-form-item label="editormsg">
					<span>{{change.title}}</span>
				</el-form-item>
				<el-form-item label="state">
					<el-select v-model="change.editorId" placeholder="Please select">
						<el-option :key="0" label="Please select" :value="0"></el-option>
						<el-option v-for="item in editorList" :key="item.user_id" :label="item.account" :value='item.user_id'></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">cancel</el-button>
				<el-button type="primary" @click="saveChange">save</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'journallist',
		data() {
			return {
				query: {
					pageIndex: 1,
					pageSize: 10
				},
				change: {
					journalId: 0,
					editorId: 0,
					title: ''
				},
				tableData: [],
				editorList: [],
				Total: 0,
				editVisible: false,
			};
		},
		created() {
			this.getdate();
			this.initEditorList();
		},
		methods: {
			// 获取编辑列表数据
			getdate() {
				this.$api
					.post('api/Admin/getJournals', this.query)
					.then(res => {
						this.Total = res.total;
						this.tableData = res.data;
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getdate();
			},
			addJournal() {
				this.$router.push('/journalAdd');
			},
			showdetail(row) {
				alert('Under development');
			},
			//更改期刊编辑
			handleChange(row) {
				this.change.journalId = row.journal_id;
				this.change.editorId = row.editor_id;
				this.change.title = row.title;
				this.editVisible = true;
			},
			//更改期刊编辑
			saveChange() {
				this.$api.post('api/Admin/journalEditorChange', this.change)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('change success');
							this.editVisible = false;
							this.getdate();
						} else {
							this.$message.error('Change failed');
						}
					})
					.catch(err => {
						console.log(err);
					});

			},
			//获取编辑列表
			initEditorList() {
				this.$api.post('api/Admin/getEditorList')
					.then(res => {
						if (res.code == 0) {
							this.editorList = res.data;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	};
</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>