diff --git a/src/components/page/chiefperiod.vue b/src/components/page/chiefperiod.vue
new file mode 100644
index 0000000..709dc3a
--- /dev/null
+++ b/src/components/page/chiefperiod.vue
@@ -0,0 +1,183 @@
+<template>
+	<div>
+		<div class="crumbs">
+			<el-breadcrumb separator="/">
+				<el-breadcrumb-item>
+					<i class="el-icon-connection"></i> Journal list
+				</el-breadcrumb-item>
+			</el-breadcrumb>
+		</div>
+		<div class="container">
+			<el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header">
+				<el-table-column prop="title" label="title" width="320px"></el-table-column>
+				<el-table-column label="chief" align="center">
+					<template slot-scope="scope">
+						<div v-for="item in scope.row.chief">
+							{{item.realname==''?item.account:(item.realname!=''?item.account+' ('+item.realname+')':'')}}
+							<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(item)"></el-button>
+						</div>
+						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">Choice</el-button>
+					</template>
+				</el-table-column>
+				<el-table-column prop="issn" label="issn" width="130px"></el-table-column>
+				<el-table-column prop="email" label="email" width="240px"></el-table-column>
+				<el-table-column prop="website" label="website" width="300px"></el-table-column>
+			</el-table>
+		</div>
+
+		<!-- 选择弹出框 -->
+		<el-dialog title="Choice editor" :visible.sync="editVisible" width="30%">
+			<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="80px">
+				<el-form-item label="title">
+					<template slot-scope="scope">
+						{{editForm.title}}
+					</template>
+				</el-form-item>
+				<el-form-item label="chief" prop="chief">
+					<el-select v-model="editForm.user_id" filterable placeholder="Please select the editor in chief" value-key="groupID"
+					 style="width: 250px;">
+						<el-option v-for="item in chietry"
+						 :label="item.realname==''?item.account:(item.realname!=''?item.account+' ('+item.realname+')':'')"
+						:key="item.user_id" :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="saveEdit(editForm)">OK</el-button>
+			</span>
+		</el-dialog>
+
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tableData: [],
+				editVisible: false,
+				editForm: {},
+				idx: -1,
+				chietry: [],
+				rules: {
+					account: [{
+						required: true,
+						message: 'Please input account',
+						trigger: 'blur'
+					}]
+				}
+			};
+		},
+		created() {
+			this.getdate();
+		},
+		methods: {
+			// 获取列表数据
+			getdate() {
+				this.$api
+					.post('api/Chief/getJournalForChief')
+					.then(res => {
+						this.tableData = res.data.journals;
+					})
+					.catch(err => {
+						console.log(err);
+					});
+			},
+			// 编辑操作
+			handleEdit(index, row) {
+				this.idx = index;
+				this.editForm = Object.assign({}, row);
+				// 获取下拉数据
+				this.$api
+					.post('api/Chief/getChiefList')
+					.then(res => {
+						if (res.code == 0) {
+							this.chietry = res.data.chiefs;
+							for (let i = 0; i < this.chietry.length; i++) {
+								for (let r = 0; r < this.editForm.chief.length; r++) {
+									if (this.chietry[i].user_id == this.editForm.chief[r].user_id) {
+										this.chietry.splice(i, 1);
+										if (i == 0) {
+											i = 0
+										} else {
+											i = i - 1
+										}
+									}
+								}
+							}
+						} else {
+							this.$message.error(res.msg);
+						}
+					})
+					.catch(err => {
+						this.$message.error(err);
+					});
+
+				this.editVisible = true;
+			},
+			// 保存编辑
+			saveEdit(editForm) {
+				this.$refs.edit_Form.validate((valid) => {
+					if (valid) {
+						this.$api
+							.post('api/Chief/addChiefToJournal', this.editForm)
+							.then(res => {
+								if (res.code == 0) {
+									this.editVisible = false;
+									this.$message.success(`更改第 ${this.idx + 1} 行成功`);
+									this.getdate();
+								} else {
+									this.$message.error(res.msg);
+								}
+							})
+							.catch(err => {
+								this.$message.error(err);
+							});
+					} else {
+						this.$message.error('error submit!!');
+						return false;
+					}
+				});
+			},
+			// 删除操作
+			handleDelete(item) {
+				// 二次确认删除
+				this.$confirm('Are you sure you want to delete？', 'Delete', {
+						type: 'warning'
+					})
+					.then(() => {
+						this.$api
+							.post('api/Chief/delChiefToJournal', item)
+							.then(res => {
+								if (res.code == 0) {
+									this.$message.success('删除成功');
+									this.getdate();
+								} else {
+									this.$message.error(res.msg);
+								}
+							})
+							.catch(err => {
+								this.$message.error(err);
+							});
+					})
+					.catch(() => {});
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.handle-box {
+		margin-bottom: 20px;
+	}
+
+	.table {
+		width: 100%;
+		font-size: 14px;
+	}
+
+	.red {
+		color: #ff0000;
+	}
+</style>