From b9a981b50ccf606009a24dd7ec2e3f6fa863bc6d Mon Sep 17 00:00:00 2001
From: xulu <xl376837995@163.com>
Date: Thu, 29 Jul 2021 11:30:45 +0800
Subject: [PATCH] 1

---
 src/components/page/chiefeditor.vue | 261 ++++++++++++++++++++++++++++
 1 file changed, 261 insertions(+)
 create mode 100644 src/components/page/chiefeditor.vue

diff --git a/src/components/page/chiefeditor.vue b/src/components/page/chiefeditor.vue
new file mode 100644
index 0000000..8645703
--- /dev/null
+++ b/src/components/page/chiefeditor.vue
@@ -0,0 +1,261 @@
+<template>
+	<div>
+		<div class="crumbs">
+			<el-breadcrumb separator="/">
+				<el-breadcrumb-item>
+					<i class="el-icon-connection"></i> Editor 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="addEditor">add</el-button>
+			</div>
+
+			<el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header">
+				<el-table-column prop="user_id" label="ID" align="center"></el-table-column>
+				<el-table-column prop="account" label="username" align="center"></el-table-column>
+				<el-table-column prop="realname" label="realname" align="center"></el-table-column>
+				<el-table-column prop="phone" label="phone" align="center"></el-table-column>
+				<el-table-column prop="email" label="email" align="center"></el-table-column>
+				<el-table-column label="操作" width="100" align="center">
+					<template slot-scope="scope">
+						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</div>
+
+		<!-- 添加弹出框 -->
+		<el-dialog title="Add editor" :visible.sync="addVisible" width="40%">
+			<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="150px">
+				<el-form-item label="account" prop="account">
+					<el-input v-model="addForm.account"></el-input>
+				</el-form-item>
+				<el-form-item label="email" prop="email">
+					<el-input v-model="addForm.email"></el-input>
+				</el-form-item>
+				<el-form-item label="realname" prop="realname">
+					<el-input v-model="addForm.realname"></el-input>
+				</el-form-item>
+				<el-form-item label="password" prop="password">
+					<el-input v-model="addForm.password" type="password"></el-input>
+				</el-form-item>
+				<el-form-item label="Confirm password" prop="repassword">
+					<el-input v-model="addForm.repassword" type="password"></el-input>
+				</el-form-item>
+				<el-form-item label="phone" prop="phone">
+					<el-input v-model="addForm.phone"></el-input>
+				</el-form-item>
+			</el-form>
+			<span slot="footer" class="dialog-footer">
+				<el-button @click="addVisible = false">取 消</el-button>
+				<el-button type="primary" @click="saveAdd(addForm)">确 定</el-button>
+			</span>
+		</el-dialog>
+
+		<!-- 编辑弹出框 -->
+		<el-dialog title="Edit editor" :visible.sync="editVisible" width="40%">
+			<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="150px">
+				<el-form-item label="account" prop="account">
+					<el-input v-model="editForm.account"></el-input>
+				</el-form-item>
+				<el-form-item label="email" prop="email">
+					<el-input v-model="editForm.email"></el-input>
+				</el-form-item>
+				<el-form-item label="realname" prop="realname">
+					<el-input v-model="editForm.realname"></el-input>
+				</el-form-item>
+				<el-form-item label="phone" prop="phone">
+					<el-input v-model="editForm.phone"></el-input>
+				</el-form-item>
+			</el-form>
+			<span slot="footer" class="dialog-footer">
+				<el-button @click="editVisible = false">取 消</el-button>
+				<el-button type="primary" @click="saveEdit(editForm)">确 定</el-button>
+			</span>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'editorList',
+		data() {
+			return {
+				tableData: [],
+				editVisible: false,
+				addVisible: false,
+				aid: -1,
+				editForm: {},
+				idx: -1,
+				id: -1,
+				addForm: {},
+				rules: {
+					account: [{
+						required: true,
+						message: 'Please input account',
+						trigger: 'blur'
+					}],
+					email: [{
+						required: true,
+						message: 'Please input email',
+						trigger: 'blur'
+					}, {
+						validator: function(rule, value, callback) {
+							if (/^[-.-_A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value) == false) {
+								callback(new Error("Please enter the correct email format"));
+							} else {
+								callback();
+							}
+						},
+						trigger: "blur"
+					}],
+					password: [{
+						required: true,
+						message: 'Please input password',
+						trigger: 'blur'
+					}],
+					repassword: [{
+						required: true,
+						message: 'Please input confirm password',
+						trigger: 'blur'
+					}]
+				}
+			};
+		},
+		created() {
+			this.getdate();
+		},
+		methods: {
+			// 获取编辑列表数据
+			getdate() {
+				this.$api
+					.post('api/Chief/getChiefList')
+					.then(res => {
+						this.tableData = res.data.chiefs;
+					})
+					.catch(err => {
+						console.log(err);
+					});
+			},
+
+			// 添加操作
+			addEditor(index, row) {
+				this.aid = index;
+				this.addVisible = true;
+			},
+
+			// 保存添加
+			saveAdd(addForm) {
+				if (addForm.password == addForm.repassword) {
+					this.$refs.add_Form.validate((valid) => {
+						if (valid) {
+							this.$api
+								.post('api/Chief/addChief', this.addForm)
+								.then(res => {
+									if (res.code == 0) {
+										this.addVisible = false;
+										this.$refs.add_Form.resetFields();
+										this.$message.success(`添加成功`);
+										this.getdate();
+									} else {
+										this.$message.error(res.msg);
+									}
+								})
+								.catch(err => {
+									this.$message.error(err);
+								});
+						} else {
+							return false;
+						}
+					});
+				} else {
+					this.$message.error("两次新密码输入不一致");
+				}
+
+			},
+			// 编辑操作
+			handleEdit(index, row) {
+				this.idx = index;
+				this.editForm = Object.assign({}, row);
+				this.editVisible = true;
+			},
+			// 保存编辑
+			saveEdit(editForm) {
+				this.$refs.edit_Form.validate((valid) => {
+					if (valid) {
+						this.$api
+							.post('api/Chief/editChief', 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;
+					}
+				});
+			},
+		}
+	};
+</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>